Skip to content

feat: added realistic template for sd-audio #2897

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balco0110 merged 3 commits into from
Apr 14, 2026
Merged

feat: added realistic template for sd-audio #2897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5105a64
feature: added realistic template for sd-audio
balco0110 Apr 10, 2026
eaf446b
chore: fix the headline size
balco0110 Apr 13, 2026
d3b5608
chore: added sd-display as in figma
balco0110 Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thick-singers-jump.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@solid-design-system/docs': minor
---

Added realistic template for ´sd-audio´
3 changes: 1 addition & 2 deletions packages/components/src/components/combobox/combobox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
185 changes: 151 additions & 34 deletions packages/docs/src/stories/templates/audio.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<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>
`
};
Loading