From a18c5f813610badf32179ccd12062307291b15a0 Mon Sep 17 00:00:00 2001
From: Clemens Fiedler <clemens.fiedler@virtual-identity.com>
Date: Wed, 6 May 2026 14:52:16 +0200
Subject: [PATCH 1/2] =?UTF-8?q?feat(2982):=20docs:=20=F0=9F=93=9A=20wrong?=
 =?UTF-8?q?=20template=20for=20sd-prose,=20remove=20unnecessary=20css=20cl?=
 =?UTF-8?q?asses?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/src/stories/styles/prose.stories.ts  | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/docs/src/stories/styles/prose.stories.ts b/packages/docs/src/stories/styles/prose.stories.ts
index fd4f6ee28c..ace074495f 100644
--- a/packages/docs/src/stories/styles/prose.stories.ts
+++ b/packages/docs/src/stories/styles/prose.stories.ts
@@ -69,23 +69,23 @@ export const Default = {
 export const StylingOptions = {
   render: () => html`
     <div class="sd-prose sd-prose--full-width flex flex-col gap-8">
-      <h1 class="sd-headline">H1 - Nisi eu excepteur anim esse</h1>
-      <h2 class="sd-headline sd-headline--size-3xl">H2 - Nisi eu excepteur anim esse</h2>
+      <h1>H1 - Nisi eu excepteur anim esse</h1>
+      <h2>H2 - Nisi eu excepteur anim esse</h2>
       <sd-divider></sd-divider>
-      <h3 class="sd-headline sd-headline--size-xl">H3 - Nisi eu excepteur anim esse</h3>
-      <h4 class="sd-headline sd-headline--size-lg">H4 - Nisi eu excepteur anim esse</h4>
-      <h5 class="sd-headline sd-headline--size-base">H5 - Nisi eu excepteur anim esse</h5>
-      <p class="sd-paragraph">
+      <h3>H3 - Nisi eu excepteur anim esse</h3>
+      <h4>H4 - Nisi eu excepteur anim esse</h4>
+      <h5>H5 - Nisi eu excepteur anim esse</h5>
+      <p>
         Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
         phasellus dui vel id.
       </p>
-      <p class="sd-paragraph">
+      <p>
         <strong>
           Paragraph Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor
           molestie phasellus dui vel id.
         </strong>
       </p>
-      <p class="sd-leadtext">
+      <p>
         Leadtext - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
         phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique.
         Facilisis commodo integer hendrerit tortor.
@@ -109,7 +109,7 @@ export const StylingOptions = {
         <li>Unordered list level 1</li>
         <li>Unordered list level 1</li>
       </ul>
-      <figure class="sd-media p-4">
+      <figure>
         <img
           src="./placeholders/images/generic.jpg"
           alt="A generic placeholder jpg"
@@ -119,40 +119,40 @@ export const StylingOptions = {
           Figcaption - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
         </figcaption>
       </figure>
-      <table class="sd-table">
+      <table>
         <thead>
           <tr>
-            <th class="sd-table-cell">Header</th>
-            <th class="sd-table-cell">Header</th>
-            <th class="sd-table-cell">Header</th>
+            <th>Header</th>
+            <th>Header</th>
+            <th>Header</th>
           </tr>
         </thead>
 
         <tbody>
           <tr>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
           </tr>
           <tr>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
           </tr>
           <tr>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
           </tr>
           <tr>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
           </tr>
           <tr>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
-            <td class="sd-table-cell">Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
+            <td>Cell Content</td>
           </tr>
         </tbody>
       </table>
@@ -168,7 +168,7 @@ export const FullWidth = {
     html` <div class="flex flex-col space-y-8">
       <div class="sd-prose">
         <h4>Default width</h4>
-        <p class="sd-paragraph">
+        <p>
           Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
           phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique.
           Facilisis commodo integer hendrerit tortor.
@@ -176,7 +176,7 @@ export const FullWidth = {
       </div>
       <div class="sd-prose sd-prose--full-width">
         <h4>Full width</h4>
-        <p class="sd-paragraph">
+        <p>
           Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
           phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique.
           Facilisis commodo integer hendrerit tortor.
@@ -191,7 +191,7 @@ export const FullWidth = {
 export const Inverted = {
   render: () => html`
     <div class="bg-primary p-4 sd-prose sd-prose--inverted">
-      <p class="sd-paragraph">
+      <p>
         Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
         phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique.
         Facilisis commodo integer hendrerit tortor.

From 1340559f3f89aa628db09d19b513d1663f1a8283 Mon Sep 17 00:00:00 2001
From: Clemens Fiedler <clemens.fiedler@virtual-identity.com>
Date: Wed, 6 May 2026 16:31:12 +0200
Subject: [PATCH 2/2] =?UTF-8?q?feat(2982):=20docs:=20=F0=9F=93=9A=20wrong?=
 =?UTF-8?q?=20template=20for=20sd-prose,=20add=20changeset.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fix-sd-prose-story-templates.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-sd-prose-story-templates.md

diff --git a/.changeset/fix-sd-prose-story-templates.md b/.changeset/fix-sd-prose-story-templates.md
new file mode 100644
index 0000000000..6e128b8c35
--- /dev/null
+++ b/.changeset/fix-sd-prose-story-templates.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Fixed `sd-prose` story templates to use bare semantic HTML instead of explicit `sd-headline`, `sd-paragraph`, `sd-table-cell`, and `sd-media` classes on child elements.