@solid-design-system/mcp 0.0.1

package/metadata/packages/styles/sd-table/info.md

@@ -0,0 +1,43 @@
+## Overview
+
+`sd-table` – Used to reset the styles of a table to predefined values. To style table cells use the `sd-table-cell` component.t.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-table/slot
+
+## Guidelines
+
+### Use Cases
+
+- Organize, structure, and compare data.
+- Present tabular content in a scannable, analyzable format for dashboards, reports, or listings.
+
+### Rules
+
+### Interaction
+
+- Enable interactive features like sorting and filtering to enhance data exploration.
+- To indicate scrollability, you can use [sd-scrollable](./?path=/docs/components-sd-scrollable--docs).
+
+### First Sticky Column
+
+- Create a sticky first column by enabling the “shadow-right” option.
+- Use this feature in wide tables to keep the first column in view while scrolling horizontally.
+
+### Accessibility
+
+- Use proper HTML table elements (e.g., <code>&lt;table&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;td&gt;</code>) to ensure screen readers can correctly interpret table headers and cell data.
+- Ensure any interactive elements within cells (e.g., sorting or filtering controls) are keyboard accessible and have clear focus indicators.
+- If the table is scrollable, confirm that the scrolling behavior and sticky columns preserve the logical reading order and remain navigable for screen reader users.
+- Only use tables to display tabular data, not for layout purposes.
+
+### Related Templates
+
+- table--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-table/stories/slot.md

@@ -0,0 +1,11 @@
+Use `default` slot to add content to the table.
+
+```html
+<table class="sd-table w-full">
+  <tbody>
+    <tr>
+      <td>Lorem ipsum dolor sit amet.</td>
+    </tr>
+  </tbody>
+</table>
+```

package/metadata/packages/styles/sd-table-cell/info.md

@@ -0,0 +1,61 @@
+## Overview
+
+`sd-table-cell` – Used to organize and structure content, scanning, comparing, and analyzing the data. It is designed to be used inside the `sd-table` component.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-table-cell/variants
+- sd-table-cell/divider
+- sd-table-cell/shadow
+
+## Guidelines
+
+### Use Cases
+
+- Organize, structure, and compare data when building tables.
+- Present tabular content in a scannable, analyzable format for dashboards, reports, or listings.
+
+### Rules
+
+### Layout
+
+- Display a top and bottom divider on every table cell; left and right edges remain open by default.
+- Toggle vertical dividers when a clearer column separation is needed (by selecting “divider”).
+- Ensure consistent cell padding to maintain a clean and organized table layout and allow content to "breathe".
+- Consider using alternating row colors (zebra style) to improve readability for larger tables.
+
+### Interaction
+
+- Enable interactive features like sorting and filtering to enhance data exploration.
+- To indicate scrollability, you can use [sd-scrollable](./?path=/docs/components-sd-scrollable--docs).
+
+### First Sticky Column
+
+- Create a sticky first column by enabling the “shadow-right” option.
+- Use this feature in wide tables to keep the first column in view while scrolling horizontally.
+
+### Text Styling
+
+- Bold text to create a header cell or emphasize important data.
+- Choose left (default), center, or right alignment as desired.
+
+### Background
+
+- Use with light background options of white, neutral-100 and primary-100.
+
+### Accessibility
+
+- Use proper HTML table elements (e.g., <code>&lt;table&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;td&gt;</code>) to ensure screen readers can correctly interpret table headers and cell data.
+- Ensure any interactive elements within cells (e.g., sorting or filtering controls) are keyboard accessible and have clear focus indicators.
+- If the table is scrollable, confirm that the scrolling behavior and sticky columns preserve the logical reading order and remain navigable for screen reader users.
+- Only use tables to display tabular data, not for layout purposes.
+
+### Related Templates
+
+- table--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-table-cell/stories/divider.md

@@ -0,0 +1,19 @@
+Use the `sd-table-cell--divider` class to toggle vertical dividers.
+
+```html
+<table class="sd-table w-[325px]">
+  <thead>
+    <tr>
+      <td class="font-bold sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Header</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="relative">
+      <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Cell content</td>
+    </tr>
+    <tr class="relative">
+      <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```

package/metadata/packages/styles/sd-table-cell/stories/shadow.md

@@ -0,0 +1,137 @@
+Use the `sd-table-cell--shadow-*` classes to add a shadow to columns or rows when the table is scrollable with sticky headers:
+
+- `sd-table-cell--shadow-right`
+- `sd-table-cell--shadow-left`
+- `sd-table-cell--shadow-bottom`
+- `sd-table-cell--shadow-top`
+
+```html
+<div class="flex flex-col gap-16">
+  <table class="sd-table sample-table">
+    <tbody>
+      <tr>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-right sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+      <tr>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-right sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+      <tr>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-right  sd-table-cell--shadow-active "
+        >
+          Cell content
+        </td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+    </tbody>
+  </table>
+  <table class="sd-table sample-table">
+    <tbody>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-left sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-left sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-left sd-table-cell--shadow-active "
+        >
+          Cell content
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table class="sd-table sample-table">
+    <tbody>
+      <tr>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-bottom sd-table-cell--shadow-active "
+        >
+          Cell content
+        </td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-bottom sd-table-cell--shadow-active "
+        >
+          Cell content
+        </td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-bottom sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table class="sd-table sample-table">
+    <tbody>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+        <td class="sd-table-cell text-nowrap whitespace-nowrap">Cell content</td>
+      </tr>
+      <tr>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-top sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-top sd-table-cell--shadow-active"
+        >
+          Cell content
+        </td>
+        <td
+          class="sd-table-cell left-0 top-auto sticky right-0 z-[2] sd-table-cell--shadow-top sd-table-cell--shadow-active "
+        >
+          Cell content
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```

package/metadata/packages/styles/sd-table-cell/stories/variants.md

@@ -0,0 +1,39 @@
+Use the `sd-table-cell--bg-*` classes for alternative appearances:
+
+- transparent is the default background
+- `sd-table-cell--bg-white`
+- `sd-table-cell--bg-primary-100`
+- `sd-table-cell--bg-neutral-100`
+
+```html
+<div class="grid grid-cols-2 gap-8">
+  <table class="sd-table">
+    <tbody>
+      <tr class="relative">
+        <td class="sd-table-cell">Transparent</td>
+      </tr>
+    </tbody>
+  </table>
+  <table class="sd-table">
+    <tbody>
+      <tr class="relative">
+        <td class="sd-table-cell sd-table-cell--bg-white">White</td>
+      </tr>
+    </tbody>
+  </table>
+  <table class="sd-table">
+    <tbody>
+      <tr class="relative">
+        <td class="sd-table-cell sd-table-cell--bg-primary-100">Primary-100</td>
+      </tr>
+    </tbody>
+  </table>
+  <table class="sd-table">
+    <tbody>
+      <tr class="relative">
+        <td class="sd-table-cell sd-table-cell--bg-neutral-100">Neutral-100</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```

package/metadata/packages/templates/accordion-group.md

@@ -0,0 +1,163 @@
+---
+name: accordion-group
+title: Accordion Group
+components:
+  - sd-accordion
+  - sd-accordion-group
+  - sd-headline
+  - sd-headline--size-xl
+  - sd-media
+  - sd-paragraph
+  - sd-prose
+version: 1.0.0
+---
+
+## Template: Accordion Group with White Background
+
+```html
+<div class="bg-white p-8">
+  <sd-accordion-group>
+    <sd-accordion summary="Shareholder structure">
+      <figure class="sd-media">
+        <img
+          class="w-full aspect-ratio"
+          src="./placeholders/images/collaboration.jpg"
+          alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
+        />
+      </figure>
+      <p class="sd-paragraph mt-4">
+        Union Investment is the dedicated asset manager within the German cooperative financial network. All
+        shareholders are also part of the network, which ensures a stable and long-term ownership structure. This allows
+        us to maintain a sustainable business model and develop strong, long-term client relationships.
+      </p>
+    </sd-accordion>
+    <sd-accordion summary="Cooperative financial network">
+      <h3 class="sd-headline sd-headline--size-xl mb-4">
+        Union Investment is the asset manager within the German cooperative financial Network.
+      </h3>
+      <figure class="sd-media">
+        <img
+          class="w-full aspect-ratio"
+          src="./placeholders/images/coins.jpg"
+          alt="Close-up of hands stacking coins into small piles on a table, suggesting financial planning or saving."
+        />
+      </figure>
+    </sd-accordion>
+    <sd-accordion summary="Investment philosophy">
+      <div class="sd-prose">
+        <p>
+          Our investment philosophy is based on our belief that markets are inefficient. Long-term outperformance is,
+          therefore, best achieved through a combination of fundamental research, actively managed security selection
+          and robust risk management. This conviction lies at the heart of all our investment solutions. We offer a
+          transparent investment process, which allows clients to keep track of our investment decisions.
+        </p>
+        <p>
+          We take an integrated approach to portfolio management, with every portfolio manager also acting as a senior
+          research specialist. This structure enhances the team's commitment to the process and helps to ensure
+          accountability for investment performance.
+        </p>
+      </div>
+    </sd-accordion>
+  </sd-accordion-group>
+</div>
+```
+
+## Template: Accordion Group with Neutral-100 Background
+
+```html
+<div class="bg-neutral-100 p-8">
+  <sd-accordion-group>
+    <sd-accordion summary="Shareholder structure">
+      <figure class="sd-media">
+        <img
+          class="w-full aspect-ratio"
+          src="./placeholders/images/collaboration.jpg"
+          alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
+        />
+      </figure>
+      <p class="sd-paragraph mt-4">
+        Union Investment is the dedicated asset manager within the German cooperative financial network. All
+        shareholders are also part of the network, which ensures a stable and long-term ownership structure. This allows
+        us to maintain a sustainable business model and develop strong, long-term client relationships.
+      </p>
+    </sd-accordion>
+    <sd-accordion summary="Cooperative financial network">
+      <h3 class="sd-headline sd-headline--size-xl mb-4">
+        Union Investment is the asset manager within the German cooperative financial Network.
+      </h3>
+      <figure class="sd-media">
+        <img
+          class="w-full aspect-ratio"
+          src="./placeholders/images/coins.jpg"
+          alt="Close-up of hands stacking coins into small piles on a table, suggesting financial planning or saving."
+        />
+      </figure>
+    </sd-accordion>
+    <sd-accordion summary="Investment philosophy">
+      <div class="sd-prose">
+        <p>
+          Our investment philosophy is based on our belief that markets are inefficient. Long-term outperformance is,
+          therefore, best achieved through a combination of fundamental research, actively managed security selection
+          and robust risk management. This conviction lies at the heart of all our investment solutions. We offer a
+          transparent investment process, which allows clients to keep track of our investment decisions.
+        </p>
+        <p>
+          We take an integrated approach to portfolio management, with every portfolio manager also acting as a senior
+          research specialist. This structure enhances the team's commitment to the process and helps to ensure
+          accountability for investment performance.
+        </p>
+      </div>
+    </sd-accordion>
+  </sd-accordion-group>
+</div>
+```
+
+## Template: Accordion Group with Primary-100 Background
+
+```html
+<div class="bg-primary-100 p-8">
+  <sd-accordion-group>
+    <sd-accordion summary="Shareholder structure">
+      <figure class="sd-media">
+        <img
+          class="w-full aspect-ratio"
+          src="./placeholders/images/collaboration.jpg"
+          alt="Two men in business attire sitting on a sofa in a modern office, smiling and looking at a laptop screen."
+        />
+      </figure>
+      <p class="sd-paragraph mt-4">
+        Union Investment is the dedicated asset manager within the German cooperative financial network. All
+        shareholders are also part of the network, which ensures a stable and long-term ownership structure. This allows
+        us to maintain a sustainable business model and develop strong, long-term client relationships.
+      </p>
+    </sd-accordion>
+    <sd-accordion summary="Cooperative financial network">
+      <h3 class="sd-headline sd-headline--size-xl mb-4">
+        Union Investment is the asset manager within the German cooperative financial Network.
+      </h3>
+      <figure class="sd-media">
+        <img
+          class="w-full aspect-ratio"
+          src="./placeholders/images/coins.jpg"
+          alt="Close-up of hands stacking coins into small piles on a table, suggesting financial planning or saving."
+        />
+      </figure>
+    </sd-accordion>
+    <sd-accordion summary="Investment philosophy">
+      <div class="sd-prose">
+        <p>
+          Our investment philosophy is based on our belief that markets are inefficient. Long-term outperformance is,
+          therefore, best achieved through a combination of fundamental research, actively managed security selection
+          and robust risk management. This conviction lies at the heart of all our investment solutions. We offer a
+          transparent investment process, which allows clients to keep track of our investment decisions.
+        </p>
+        <p>
+          We take an integrated approach to portfolio management, with every portfolio manager also acting as a senior
+          research specialist. This structure enhances the team's commitment to the process and helps to ensure
+          accountability for investment performance.
+        </p>
+      </div>
+    </sd-accordion>
+  </sd-accordion-group>
+</div>
+```

package/metadata/packages/templates/audio.md

@@ -0,0 +1,194 @@
+---
+name: audio
+title: Audio
+components:
+  - sd-audio
+  - sd-display
+  - sd-display--size-3xl
+  - sd-display--size-xl
+  - sd-icon
+  - sd-icon-size
+  - sd-teaser
+version: 1.0.0
+---
+
+## Template: Audio with Text
+
+```html
+<div class="mb-4">
+  <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>
+```
+
+## Template: Audio with Teaser
+
+```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 bg-slate-50">
+    <sd-icon name="content/music" slot="icon-left" class="teaser-icon primary" color="primary"></sd-icon>
+  </div>
+  <h3 slot="headline">Harmony in the System</h3>
+  <div class="flex flex-col gap-5">
+    <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>
+  <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>
+```
+
+## Template: Audio with Display
+
+```html
+<div class="py-12">
+  <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>
+    <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>
+
+  <div class="sd-display sd-display--size-xl mt-8 text-center">“SDS Song: Harmony in the System”</div>
+</div>
+```