From 5105a643a48d8eb70c364234a7e198389e168161 Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Fri, 10 Apr 2026 15:57:47 +0200
Subject: [PATCH 1/3] feature: added realistic template for sd-audio

---
 .changeset/thick-singers-jump.md              |   5 +
 .../src/components/combobox/combobox.ts       |   3 +-
 .../src/stories/templates/audio.stories.ts    | 185 ++++++++++++++----
 3 files changed, 157 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/thick-singers-jump.md

diff --git a/.changeset/thick-singers-jump.md b/.changeset/thick-singers-jump.md
new file mode 100644
index 0000000000..b65d3d3394
--- /dev/null
+++ b/.changeset/thick-singers-jump.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': minor
+---
+
+Added realistic template for ´sd-audio´
diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts
index 8ad54f60a6..4b568d6f3c 100644
--- a/packages/components/src/components/combobox/combobox.ts
+++ b/packages/components/src/components/combobox/combobox.ts
@@ -1509,10 +1509,9 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                   `
                 : html`
                     <button
-                      class="sd-interactive combobox-button absolute top-2 sd-icon-fill-primary"
+                      class="sd-interactive combobox-button absolute top-2 sd-color-icon-fill-primary"
                       tabindex="-1"
                       aria-hidden="true"
-                      class="sd-interactive combobox-button absolute top-2"
                       @keydown=${this.handleComboboxMouseDown}
                       type="button"
                     >
diff --git a/packages/docs/src/stories/templates/audio.stories.ts b/packages/docs/src/stories/templates/audio.stories.ts
index 24dcad7298..68d53ab982 100644
--- a/packages/docs/src/stories/templates/audio.stories.ts
+++ b/packages/docs/src/stories/templates/audio.stories.ts
@@ -14,68 +14,185 @@ export default {
 };
 
 export const Default = {
-  name: 'sd-audio with text',
+  name: 'Audio with Text',
   render: () => html`
     <div class="mb-4">
-      <p class="font-bold text-base flex justify-center">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      </p>
-      <p class="text-sm text-neutral-700 flex justify-center">Lorem ipsum sic semeper</p>
-    </div>
-    <sd-audio>
-      <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
-    </sd-audio>
-  `
-};
-
-export const AudioWithHeadline = {
-  name: 'sd-audio with sd-headline',
-  render: () => html`
-    <div class="mb-4">
-      <p class="text-center sd-display text-xl text-primary">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+      <p class="font-bold text-base flex justify-center">Harmony in the System</p>
+      <p class="text-sm text-neutral-700 flex justify-center">
+        Listen to the sound of collaboration, the melody of consistency, and the beat of scalability.
       </p>
     </div>
     <sd-audio>
       <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
+      <div slot="transcript">
+        <p>1<br />00:00:00.000 --&gt; 00:00:04.000<br />A bond unbroken, usability</p>
+        <p>2<br />00:00:04.001 --&gt; 00:00:08.000<br />We weave the fabric of digital reality</p>
+        <p>
+          <strong>[Chorus]</strong><br />I'm here to light the path you walk, ohh<br />Under the stars where dreams we
+          talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal, pure
+        </p>
+        <p>
+          3<br />00:00:08.001 --&gt; 00:00:12.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+          walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy,
+          eternal, pure
+        </p>
+        <p>
+          4<br />00:00:12.001 --&gt; 00:00:16.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+          walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy,
+          eternal, pure
+        </p>
+        <p>
+          5<br />00:00:16.001 --&gt; 00:00:20.000<br /><strong>[Chorus Continuation]</strong><br />Hey, Solid
+          Components, they gleam<br />Usable, consistent like a dream<br />In the net of codes, we're threading<br />Creating
+          visions that we're spreading<br />Solid Design System, seamless team<br />In this digital flow, we stream
+        </p>
+        <p>
+          6<br />00:00:20.001 --&gt; 00:00:24.000<br /><strong>[Chorus Continuation]</strong><br />Woven strong, a
+          network supreme<br />With Solid Components, we're the dream team
+        </p>
+      </div>
     </sd-audio>
   `
 };
 
 export const AudioWithTeaser = {
-  name: 'sd-audio with sd-teaser',
+  name: 'Audio with Teaser',
   render: () => html`
     <style>
       sd-teaser {
         --distribution-media: 30%;
       }
+
+      sd-teaser [slot='media'] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+      }
+
+      sd-teaser .teaser-icon {
+        --sd-icon-size: 136px;
+        width: 136px;
+        height: 136px;
+      }
     </style>
+
     <sd-teaser variant="default" breakpoint="448" class="mb-6">
-      <div slot="media" class="relative">
-        <img class="aspect-square object-cover" src="./placeholders/images/generic.jpg" alt="Example of a teaser" />
-      </div>
-      <div slot="meta" class="meta-info">
-        <span class="meta-info-item">Meta information</span>
+      <div slot="media" class="relative bg-slate-50">
+        <sd-icon name="content/music" slot="icon-left" class="teaser-icon primary" color="primary"></sd-icon>
       </div>
-      <h3 slot="headline">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      </h3>
+      <h3 slot="headline">Harmony in the System</h3>
       <div class="flex flex-col gap-5">
-        <p>Lorem ipsum dolor sit amet</p>
+        <p class="text-sm text-neutral-700 flex">
+          Listen to the sound of collaboration, the melody of consistency, and the beat of scalability.
+        </p>
       </div>
     </sd-teaser>
-    <sd-audio reversed-layout hide-timestamps speed="1.5">
+
+    <sd-audio reversed-layout hide-timestamps>
       <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
+      <div slot="transcript">
+        <p>1<br />00:00:00.000 --&gt; 00:00:04.000<br />A bond unbroken, usability</p>
+        <p>2<br />00:00:04.001 --&gt; 00:00:08.000<br />We weave the fabric of digital reality</p>
+        <p>
+          <strong>[Chorus]</strong><br />I'm here to light the path you walk, ohh<br />Under the stars where dreams we
+          talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal, pure
+        </p>
+        <p>
+          3<br />00:00:08.001 --&gt; 00:00:12.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+          walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy,
+          eternal, pure
+        </p>
+        <p>
+          4<br />00:00:12.001 --&gt; 00:00:16.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+          walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy,
+          eternal, pure
+        </p>
+        <p>
+          5<br />00:00:16.001 --&gt; 00:00:20.000<br /><strong>[Chorus Continuation]</strong><br />Hey, Solid
+          Components, they gleam<br />Usable, consistent like a dream<br />In the net of codes, we're threading<br />Creating
+          visions that we're spreading<br />Solid Design System, seamless team<br />In this digital flow, we stream
+        </p>
+        <p>
+          6<br />00:00:20.001 --&gt; 00:00:24.000<br /><strong>[Chorus Continuation]</strong><br />Woven strong, a
+          network supreme<br />With Solid Components, we're the dream team
+        </p>
+      </div>
     </sd-audio>
   `
 };
 
 export const AudioAnimated = {
-  name: 'sd-audio animated',
+  name: 'Audio with Display',
   render: () => html`
-    <sd-audio animated hide-timestamps>
-      <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
-    </sd-audio>
-    <p class="text-center sd-leadtext text-xl text-primary mt-4">“Lorem ipsum dolor sit amet, conseincididunt”</p>
+    <div class="py-12">
+      <p class="text-center sd-display text-primary mb-8">Harmony in the System</p>
+
+      <sd-audio reversed-layout hide-timestamps>
+        <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
+        <div slot="transcript">
+          <p>1<br />00:00:00.000 --&gt; 00:00:04.000<br />A bond unbroken, usability</p>
+          <p>2<br />00:00:04.001 --&gt; 00:00:08.000<br />We weave the fabric of digital reality</p>
+          <p>
+            <strong>[Chorus]</strong><br />I'm here to light the path you walk, ohh<br />Under the stars where dreams we
+            talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal, pure
+          </p>
+          <p>
+            3<br />00:00:08.001 --&gt; 00:00:12.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+            walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring
+            joy, eternal, pure
+          </p>
+          <p>
+            4<br />00:00:12.001 --&gt; 00:00:16.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+            walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring
+            joy, eternal, pure
+          </p>
+          <p>
+            5<br />00:00:16.001 --&gt; 00:00:20.000<br /><strong>[Chorus Continuation]</strong><br />Hey, Solid
+            Components, they gleam<br />Usable, consistent like a dream<br />In the net of codes, we're threading<br />Creating
+            visions that we're spreading<br />Solid Design System, seamless team<br />In this digital flow, we stream
+          </p>
+          <p>
+            6<br />00:00:20.001 --&gt; 00:00:24.000<br /><strong>[Chorus Continuation]</strong><br />Woven strong, a
+            network supreme<br />With Solid Components, we're the dream team
+          </p>
+        </div>
+      </sd-audio>
+    </div>
+
+    <div class="mt-8 py-12">
+      <sd-audio animated hide-timestamps>
+        <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
+        <div slot="transcript">
+          <p>1<br />00:00:00.000 --&gt; 00:00:04.000<br />A bond unbroken, usability</p>
+          <p>2<br />00:00:04.001 --&gt; 00:00:08.000<br />We weave the fabric of digital reality</p>
+          <p>
+            <strong>[Chorus]</strong><br />I'm here to light the path you walk, ohh<br />Under the stars where dreams we
+            talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal, pure
+          </p>
+          <p>
+            3<br />00:00:08.001 --&gt; 00:00:12.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+            walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring
+            joy, eternal, pure
+          </p>
+          <p>
+            4<br />00:00:12.001 --&gt; 00:00:16.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you
+            walk, ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring
+            joy, eternal, pure
+          </p>
+          <p>
+            5<br />00:00:16.001 --&gt; 00:00:20.000<br /><strong>[Chorus Continuation]</strong><br />Hey, Solid
+            Components, they gleam<br />Usable, consistent like a dream<br />In the net of codes, we're threading<br />Creating
+            visions that we're spreading<br />Solid Design System, seamless team<br />In this digital flow, we stream
+          </p>
+          <p>
+            6<br />00:00:20.001 --&gt; 00:00:24.000<br /><strong>[Chorus Continuation]</strong><br />Woven strong, a
+            network supreme<br />With Solid Components, we're the dream team
+          </p>
+        </div>
+      </sd-audio>
+
+      <p class="text-center sd-leadtext mt-8">“SDS Song: Harmony in the System”</p>
+    </div>
   `
 };

From eaf446b011f7c096dc50abb4e2f0248a8e8e2b66 Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Mon, 13 Apr 2026 08:41:54 +0200
Subject: [PATCH 2/3] chore: fix the headline size

---
 packages/docs/src/stories/templates/audio.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/stories/templates/audio.stories.ts b/packages/docs/src/stories/templates/audio.stories.ts
index 68d53ab982..e19b2783ee 100644
--- a/packages/docs/src/stories/templates/audio.stories.ts
+++ b/packages/docs/src/stories/templates/audio.stories.ts
@@ -126,7 +126,7 @@ export const AudioAnimated = {
   name: 'Audio with Display',
   render: () => html`
     <div class="py-12">
-      <p class="text-center sd-display text-primary mb-8">Harmony in the System</p>
+      <div class="sd-display sd-display--size-3xl text-primary mb-8 text-center">Harmony in the System</div>
 
       <sd-audio reversed-layout hide-timestamps>
         <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>

From d3b56088e973be01a22ff7f6b0487f44fdd699d6 Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Mon, 13 Apr 2026 08:44:13 +0200
Subject: [PATCH 3/3] chore: added sd-display as in figma

---
 packages/docs/src/stories/templates/audio.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/stories/templates/audio.stories.ts b/packages/docs/src/stories/templates/audio.stories.ts
index e19b2783ee..0a85fe196f 100644
--- a/packages/docs/src/stories/templates/audio.stories.ts
+++ b/packages/docs/src/stories/templates/audio.stories.ts
@@ -192,7 +192,7 @@ export const AudioAnimated = {
         </div>
       </sd-audio>
 
-      <p class="text-center sd-leadtext mt-8">“SDS Song: Harmony in the System”</p>
+      <div class="sd-display sd-display--size-xl mt-8 text-center">“SDS Song: Harmony in the System”</div>
     </div>
   `
 };