npm - @solid-design-system/mcp - Versions diffs - 0.0.1 - Mend

@solid-design-system/mcp 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (569) hide show

package/metadata/packages/components/docs/localization.md ADDED Viewed

@@ -0,0 +1,158 @@
+# Localization
+Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Solid components in German.
+```html
+<html lang="de">
+  <head>
+    <script type="module" src="/path/to/solid/dist/translations/de.js"></script>
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+Through the magic of a mutation observer, changing the `lang` attribute will automatically update all localized components to use the new locale.
+Solid ships with German (`de`) and English (`en`) translations, which are both imported per default. The default is English (`en`), which also serves as the fallback locale.
+### Translation Resolution
+The locale set by `<html lang="...">` is the default locale for the document. If a country code is provided, e.g. `en-GB` for British English, the localization library will resolve it like this:
+1. Look for `en-GB`
+2. Look for `en`
+3. Fall back to `en`
+Solid uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
+## Multiple Locales Per Page
+You can use a different locale for an individual component by setting its `lang` and/or `dir` attributes. Here's a contrived example to demonstrate.
+```html
+<html lang="de">
+  ...
+  <body>
+    <sd-button><!-- German --></sd-button>
+    <sd-button lang="en"><!-- English --></sd-button>
+  </body>
+</html>
+```
+For performance reasons, the `lang` and `dir` attributes must be on the component itself, not on an ancestor element.
+```html
+<html lang="de">
+  ...
+  <body>
+    <div lang="en">
+      <sd-button><!-- still in German --></sd-button>
+    </div>
+  </body>
+</html>
+```
+This limitation exists because there's no efficient way to determine the current locale of a given element in a DOM tree. This currently isn't possible in the proposer and [there are a couple properties proposed](https://github.com/whatwg/html/issues/7039) to make this possible.
+## Creating Your Own Translations
+You can provide your own translations if you have specific needs or if you don't want to wait for a translation to land upstream. The easiest way to do this is to copy `src/translations/en.ts` into your own project and translate the terms inside. When your translation is done, you can import it and use it just like a built-in translation.
+Let's create a Spanish translation as an example. The following assumes you're using TypeScript, but you can also create translations with regular JavaScript.
+```js
+const translation: Translation = {
+  $code: 'es',
+  $name: 'Español',
+  $dir: 'ltr',
+  term1: '...',
+  term2: '...',
+  ...
+};
+registerTranslation(translation);
+export default translation;
+```
+Once your translation has been compiled to JavaScript, import it and activate it like this.
+```html
+<html lang="es">
+  <head>
+    <script type="module" src="/path/to/es.js"></script>
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+> If your translation isn't working, make sure you're using the same localize module when importing `registerTranslation`. If you're using a different module, your translation won't be recognized.
+## Custom Localization
+Solid components support custom localization through data attributes or programmatically per component instance. Here’s how to apply custom localizations:
+### Data Attribute
+Use data-custom-localization with a JSON object for custom translations. Components automatically update when data-custom-localization changes.
+```html
+<sd-select lang="de" value="option-1" clearable data-custom-localization='{"clearEntry": "Reset!!"}'>
+  <sd-option value="option-1">Option 1</sd-option>
+</sd-select>
+```
+Components automatically update when data-custom-localization changes.
+```html
+<sd-select lang="de" value="option-1" clearable data-custom-localization='{"clearEntry": "Reset!"}'>
+  <sd-option value="option-1">Option 1</sd-option>
+</sd-select>
+<script>
+  const selectElement = document.querySelector('sd-select');
+  selectElement.setAttribute('data-custom-localization', '{"clearEntry": "Updated!"}');
+</script>
+```
+### Programmatic Localization
+Set custom translations using `setCustomLocalization`.
+```html
+<sd-select value="option-1" clearable>
+  <sd-option value="option-1">Option 1</sd-option>
+</sd-select>
+<script type="module">
+  const selectElement = document.querySelector('sd-select');
+  selectElement.localize.setCustomLocalization({ clearEntry: 'Reset me!' });
+</script>
+```
+This enables to use functions for dynamic translations.
+```html
+<sd-select name="a" value="option-2 option-3" multiple>
+  <sd-option value="option-1">Option 1</sd-option>
+  <sd-option value="option-2">Option 2</sd-option>
+  <sd-option value="option-3">Option 3</sd-option>
+</sd-select>
+<script type="module">
+  const selectElement = document.querySelector('sd-select');
+  selectElement.localize.setCustomLocalization({
+    numOptionsSelected: num => (num === 0 ? '' : `Funds selected (${num})`)
+  });
+</script>
+```

package/metadata/packages/components/docs/usage.md ADDED Viewed

@@ -0,0 +1,182 @@
+# Usage
+Solid Components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
+If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
+### Attributes & Properties
+Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
+```html
+<sd-button size="sm">Click me</sd-button>
+```
+Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.
+```html
+<sd-button disabled>Click me</sd-button>
+```
+If a component requires a property as an array, an object, or a function. This must be done with JavaScript.
+```html
+<sd-prop-component></sd-prop-component>
+<script>
+  const propComponent = document.querySelector('sd-prop-component');
+  propComponent.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
+</script>
+```
+Refer to a component's documentation for a complete list of its properties.
+### Events
+You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.
+As a result, you should almost always listen for custom events instead. For example, instead of listening to `click` to determine when an `<sd-checkbox>` gets toggled, listen to `sd-change`.
+```html
+<sd-checkbox>Check me</sd-checkbox>
+<script>
+  const checkbox = document.querySelector('sd-checkbox');
+  checkbox.addEventListener('sd-change', event => {
+    console.log(event.target.checked ? 'checked' : 'not checked');
+  });
+</script>
+```
+All custom events are prefixed with `sd-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its custom events.
+### Methods
+Some components have methods you can call to trigger various behaviors. For example, you can set focus on a `sd-button` using the `focus()` method.
+```html
+<sd-button></sd-button>
+<script>
+  const button = document.querySelector('sd-button');
+  button.focus();
+</script>
+```
+Refer to a component's documentation for a complete list of its methods and their arguments.
+### Slots
+Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
+For example, a button's default slot is used to populate its label.
+```html
+<sd-button>Click me</sd-button>
+```
+Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="icon-left"` attribute? This tells the component to place the icon into its `icon-left` slot.
+```html
+<sd-button>
+  <sd-icon slot="icon-left" name="picture"></sd-icon>
+  Settings
+</sd-button>
+```
+The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
+Refer to a component's documentation for a complete list of available slots.
+### Don't Use Self-closing Tags
+Custom elements cannot have self-closing tags. Similar to `<script>` and `<textarea>`, you must always include the full closing tag.
+```html
+<!-- Don't do this -->
+<sd-spinner />
+<!-- Always do this -->
+<sd-spinner></sd-spinner>
+```
+### Differences from Native Elements
+You might expect similarly named elements to share the same API as native HTML elements, but this is not always the case. Solid Components **are not** designed to be one-to-one replacements for their HTML counterparts. While they usually share the same API, there may be subtle differences.
+For example, `<button>` and `<sd-button>` both have a `type` attribute, but the native one defaults to `submit` while the Solid Component one defaults to `button` since this is a better default for most users.
+> **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
+### Waiting for Components to Load
+Web components are registered with JavaScript, so depending on how and when you load Solid Component, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
+One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.
+```css
+:not(:defined) {
+  visibility: hidden;
+}
+```
+As soon as a custom element is registered, it will immediately appear with all of its styles, effectively eliminating FOUCE. Note the use of `visibility: hidden` instead of `display: none` to reduce shifting as elements are registered. The drawback to this approach is that custom elements can potentially appear one by one instead of all at the same time.
+Another option is to use [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined), which returns a promise that resolves when the specified element gets registered. You'll probably want to use it with [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) in case an element fails to load for some reason.
+A way to use this method is to hide the `<body>` with `opacity: 0` and add a class that fades it in as soon as all your custom elements are defined.
+```html
+<style>
+  body {
+    opacity: 0;
+  }
+  body.ready {
+    opacity: 1;
+    transition: 0.25s opacity;
+  }
+</style>
+<script type="module">
+  await Promise.allSettled([
+    customElements.whenDefined('sd-button'),
+    customElements.whenDefined('sd-icon'),
+    customElements.whenDefined('sd-spinner')
+  ]);
+  // Button, icon and spinner are registered now! Add
+  // the `ready` class so the UI fades in.
+  document.body.classList.add('ready');
+</script>
+```
+### Component Rendering and Updating
+Solid Components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Solid Component user, here is some helpful information about rendering and updating you should probably be aware of.
+To optimize performance and reduce re-renders, Lit batches component updates. This means changing multiple attributes or properties at the same time will result in just a single re-render. In most cases, this isn't an issue, but there may be times you'll need to wait for the component to update before continuing.
+Consider this example. We're going to change the `checked` property of the checkbox and observe its corresponding `checked` attribute, which happens to reflect.
+```js
+const checkbox = document.querySelector('sd-checkbox');
+checkbox.checked = true;
+console.log(checkbox.hasAttribute('checked')); // false
+```
+Most developers will expect this to be `true` instead of `false`, but the component hasn't had a chance to re-render yet so the attribute doesn't exist when `hasAttribute()` is called. Since changes are batched, we need to wait for the update before proceeding. This can be done using the `updateComplete` property, which is available on all Lit-based components.
+```js
+const checkbox = document.querySelector('sd-checkbox');
+checkbox.checked = true;
+checkbox.updateComplete.then(() => {
+  console.log(checkbox.hasAttribute('checked')); // true
+});
+```
+This time we see an empty string, which means the boolean attribute is now present!
+> Avoid using `setTimeout()` or `requestAnimationFrame()` in situations like this. They might work, but it's far more reliable to use `updateComplete` instead.

package/metadata/packages/components/sd-accordion/info.md ADDED Viewed

@@ -0,0 +1,82 @@
+## Overview
+`<sd-accordion>` — Used to show a brief summary and expands to display additional content.
+## API
+### Examples
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+- component: sd-accordion, example: open
+- component: sd-accordion, example: summary
+### Key Properties
+- prop.open: boolean, default=false — Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you
+  can use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.
+- prop.summary: string — The summary to show in the header. If you need to display HTML, use the `summary` slot instead.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+### Events
+- event.sd-show: Emitted when the accordion opens.
+- event.sd-after-show: Emitted after the accordion opens and all animations are complete.
+- event.sd-hide: Emitted when the accordion closes.
+- event.sd-after-hide: Emitted after the accordion closes and all animations are complete.
+### Slots
+- slot.default: The accordion main content.
+- slot.summary: The accordion summary. Alternatively, you can use the `summary` attribute.
+- slot.expand-icon: Optional expand icon to use instead of the default. Works best with `<sd-icon>`.
+- slot.collapse-icon: Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.
+### CSS Parts
+- part.base: The component's base wrapper.
+- part.header: The header that wraps both the summary and the expand/collapse icon.
+- part.summary: The container that wraps the summary.
+- part.summary-icon: The container that wraps the expand/collapse icons.
+- part.summary-border: The container that wraps the currently active accordions border.
+- part.content: The container that wraps the accordion content slot.
+- part.content\_\_slot: The accordion content slot.
+## Guidelines
+### Use Cases
+- Revealing additional content, such as a detailed description, specifications, or additional options without overwhelming the user with too much content at once.
+- Interactive elements like a single FAQ item, where the user can expand to see the answer.
+- Useful in forms to hide optional sections that the user can expand if needed, keeping the form clean and concise.
+### Rules
+### Slots
+- Use the ”summary” slot to add text to the header.
+- Use the ”default” slot to add content.
+### Header Summary
+- Make sure the header summary clearly describes the content inside.
+- Keep header summaries concise to prevent them from wrapping onto multiple lines.
+### Content
+- Ensure the content is focused and necessary. If the information can be splitted into different meaningful units, consider using [sd-accordion-group](./?path=/docs/components-sd-accordion-group--docs).
+- Avoid using collapsible sections for information that must always be visible.
+### Expandable vs. Accordion
+- The use of sd-accordion is generally recommended over the use of [sd-expandable](./?path=/docs/components-sd-expandable--docs): the former gives the user a quick scan header to decide if the content is relevant to them, offers a cleaner layout and is more accessible as a result.
+### Background
+- Use light background options like white, neutral-100 or primary-100.
+### Accessibility
+- Use only for non-critical information. Hiding content can become a potential barrier, making content more challenging to discover.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.

package/metadata/packages/components/sd-accordion/stories/open.md ADDED Viewed

@@ -0,0 +1,8 @@
+Use the `open` attribute to set the state of the accordion.
+```html
+<div class="grid grid-cols-2 gap-12">
+  <sd-accordion open summary="Open"><p>This text is immediately visible.</p></sd-accordion>
+  <sd-accordion summary="Closed"><p>This text is not immediately visible.</p></sd-accordion>
+</div>
+```

package/metadata/packages/components/sd-accordion/stories/summary.md ADDED Viewed

@@ -0,0 +1,17 @@
+Use `summary` to provide the text in the accordion header.
+**Hint:** The `summary` slot allows you to use custom html.
+```html
+<div class="grid grid-cols-2 gap-12">
+  <sd-accordion>
+    <div slot="summary">
+      <h4>I don't have a telephone number with a German area code. Can I still register?</h4>
+    </div>
+    <p>
+      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>
+</div>
+```

package/metadata/packages/components/sd-accordion-group/info.md ADDED Viewed

@@ -0,0 +1,70 @@
+## Overview
+`<sd-accordion-group>` — Used to group multiple accordions together.
+## API
+### Examples
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+- component: sd-accordion-group, example: close-others
+### Key Properties
+- prop.closeOthers [attr: close-others]: boolean, default=false — Closes other accordions.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+### Slots
+- slot.default: The default slot where `<sd-accordion>` elements are placed.
+### CSS Parts
+- part.base: The component's base wrapper.
+## Guidelines
+### Use Cases
+- Organise content into collapsible sections to save space.
+- Display FAQs where each question can be expanded to reveal its answer.
+- Structure lengthy content into manageable expandable sections.
+- Create navigational menus where each section can be expanded to show sub-items, mainly for small viewports.
+### Rules
+### Slots
+- Use the ”summary” slot to add text to the header.
+- Use the ”default” slot to add content.
+### Content
+- Ensure the content is relevant and necessary; avoid including unrelated information.
+- Avoid using collapsible sections for content that needs to be always visible or is critical for immediate user attention.
+### Header Summary
+- Make sure the header summary clearly describes the content inside.
+- Keep header summaries concise to prevent them from wrapping onto multiple lines.
+### Behaviour
+- Keep only one section open at a time to prevent information overload, unless multiple open sections are necessary.
+- Avoid nesting collapsible sections within each other to prevent a confusing user experience.
+### Expandable vs. Accordion
+- The use of [sd-accordion](./?path=/docs/components-sd-accordion--docs) is generally recommended over the use of [sd-expandable](./?path=/docs/components-sd-expandable--docs): the former gives the user a quick scan header to decide if the content is relevant to them, offers a cleaner layout and is more accessible as a result.
+### Background
+- Use light background options such as white, neutral-100, or primary-100.
+### Accessibility
+- Use only for non-critical information. Hiding content can become a potential barrier, making it more challenging for users to access information.
+- Use “close-others” attribute to keep only one item from the group open at a time, reducing the amount of information displayed at once and therefore reducing the cognitive load on the user.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.

package/metadata/packages/components/sd-accordion-group/stories/close-others.md ADDED Viewed

@@ -0,0 +1,24 @@
+Use the `close-others` attribute to only have one accordion open at a time.
+```html
+<sd-accordion-group close-others>
+  <sd-accordion summary="Accordion 1">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus dui
+      vel id. Velit in sed
+    </p>
+  </sd-accordion>
+  <sd-accordion summary="Accordion 2">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus dui
+      vel id. Velit in sed
+    </p>
+  </sd-accordion>
+  <sd-accordion summary="Accordion 3">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus dui
+      vel id. Velit in sed
+    </p>
+  </sd-accordion>
+</sd-accordion-group>
+```

package/metadata/packages/components/sd-audio/info.md ADDED Viewed

@@ -0,0 +1,80 @@
+## Overview
+`<sd-audio>` — Used to play audio files that are part of the page content.
+## API
+### Examples
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+- component: sd-audio, example: animated
+- component: sd-audio, example: inverted
+- component: sd-audio, example: reverse
+- component: sd-audio, example: speed
+- component: sd-audio, example: no-timestamps
+- component: sd-audio, example: transcript
+### Key Properties
+- prop.reversedLayout [attr: reversed-layout]: boolean, default=false — Reverses the order of the audio controls and timestamps
+- prop.hideTimestamps [attr: hide-timestamps]: boolean, default=false — Hides the timestamps
+- prop.animated: boolean, default=false — Enables the wave animation
+- prop.inverted: boolean, default=false — Inverts the colors of the component
+- prop.speed: number, default=1 — Sets value of the audio element playback rate
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+### Events
+- event.sd-playback-start: Emitted when the audio playback starts.
+- event.sd-playback-end: Emitted when the audio playback ends.
+- event.sd-playback-pause: Emitted when the audio playback pauses.
+- event.sd-playback-mute: Emitted when the audio is muted.
+- event.sd-playback-unmute: Emitted when the audio is unmuted.
+- event.sd-playback-speed: Emitted when the playback speed is changed.
+- event.sd-transcript-click: Emitted when the transcript button is clicked.
+### Slots
+- slot.default: The default slot.
+- slot.play-icon: The play icon.
+- slot.pause-icon: The pause icon.
+- slot.transcript: The transcript.
+### CSS Parts
+- part.base: The component's base wrapper.
+- part.audio-controls: The audio controls.
+- part.playback-speed: The playback speed.
+- part.play-button: The play button.
+- part.volume: The volume button.
+- part.progress-slider: The audio progress slider.
+- part.timestamps: The audio timestamps.
+## Guidelines
+### Use Cases
+- Embed instructional audio to guide users through complex processes or tutorials.
+- Promote new products, services, or events with audio content.
+- Enable visually impaired users to access content through audio narration.
+### Rules
+### Behavior
+- Avoid autoplaying audio as it can be disruptive.
+- Provide controls to allow users to play and pause.
+- Use appropriate formats and sizes to optimize loading times and performance.
+### Background
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+### Accessibility
+- Provide audio descriptions to ensure all users can access the content.
+- Ensure all player controls (play, pause, volume, speed, etc.) are fully operable using only the keyboard.
+- Include an audio transcript to support users who are deaf, hard of hearing, or prefer reading at their own pace.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.

package/metadata/packages/components/sd-audio/stories/animated.md ADDED Viewed

@@ -0,0 +1,34 @@
+Use the `animated` attribute to change the appearance.
+```html
+<sd-audio animated>
+  <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
+  <div slot="transcript">
+    <p>1<br />00:00:00.000 --> 00:00:04.000<br />A bond unbroken, usability</p>
+    <p>2<br />00:00:04.001 --> 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 --> 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 --> 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 --> 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 --> 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>
+```