@solid-design-system/mcp 0.0.1

package/metadata/packages/components/sd-audio/stories/inverted.md

@@ -0,0 +1,36 @@
+Use the `inverted` attribute to set the audio’s variant up side down.
+
+```html
+<div class="bg-primary p-12">
+  <sd-audio inverted>
+    <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>
+</div>
+```

package/metadata/packages/components/sd-audio/stories/no-timestamps.md

@@ -0,0 +1,34 @@
+Use the `hide-timestamps` attribute to hide the timestamps.
+
+```html
+<sd-audio hide-timestamps>
+  <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>
+```

package/metadata/packages/components/sd-audio/stories/reverse.md

@@ -0,0 +1,35 @@
+Use the `reversed-layout` attribute to set the audio’s variant up side down.
+For both variants the layout can be reversed for versatile positioning combinations.
+
+```html
+<sd-audio reversed-layout>
+  <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>
+```

package/metadata/packages/components/sd-audio/stories/speed.md

@@ -0,0 +1,38 @@
+Use the `speed` attribute to change the playback rate of the audio player:
+
+- 1x (default)
+- 1.25x
+- 1.5x
+
+```html
+<sd-audio speed="1.5">
+  <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>
+```

package/metadata/packages/components/sd-audio/stories/transcript.md

@@ -0,0 +1,36 @@
+Use the `transcript` slot to display the text transcript.
+Clicking the transcript button opens “sd-drawer” displaying the text transcript.
+**Hint:** If the slot does not exist the transcript button is not displayed
+
+```html
+<sd-audio>
+  <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>
+```

package/metadata/packages/components/sd-badge/info.md

@@ -0,0 +1,69 @@
+## Overview
+
+`<sd-badge>` — Used to draw attention to a particular element and display statuses or counts.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-badge, example: variant
+- component: sd-badge, example: size
+- component: sd-badge, example: inverted
+- component: sd-badge, example: overflow
+
+### Key Properties
+
+- prop.size: 'lg'|'md'|'sm', default='lg' — The badge's size.
+- prop.variant: 'blue'|'green'|'red', default='blue' — The badge's variant.
+- prop.inverted: boolean, default=false — Inverts the badge.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The badge's content.
+
+### CSS Parts
+
+- part.base: The badge's base wrapper.
+- part.content: The badge's main content.
+
+## Guidelines
+
+### Use Cases
+
+- Indicate the number of items selected, such as when using a filter.
+- Show the count of newly added items.
+- Display the number of messages received or tasks still pending.
+- Present the quantity of items collected, like those in a shopping cart.
+
+### Rules
+
+### Content
+
+- Use only numbers as content and a “+” for overflow, which is set by the application.
+
+### Colour Variants
+
+- Consistently apply one of the provided colour choices for a cohesive look.
+- Use default variants for standard notifications to ensure consistency with the overall design.
+- Select blue, green, or red notifications depending on the emphasis you desire. Blue notifications integrate smoothly with the overall design, green notifications attract more attention, and red notifications make notifications stand out the most. Don’t associate colour variants with success or error states.
+
+### Placement and Formatting
+
+- Place where it preserves relation to the element to which it is assigned, while remaining easy to see.
+- Make sure it doesn’t cover any informative element or text.
+- Refrain from altering the formatting of the number to prevent usability or accessibility issues.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Avoid using badges for purely decorative purposes.
+- Make sure the badge is appropriately sized and placed so it does not obscure other important content or controls.
+- If the badge conveys critical information, such as the number of items in a cart, ensure that this data is also provided in text elsewhere — such as in the cart details — to guarantee accessibility.
+- If the badge content changes dynamically (e.g., a notification count), use ”aria-live” to announce these changes to screen reader users.

package/metadata/packages/components/sd-badge/stories/inverted.md

@@ -0,0 +1,9 @@
+Use the `inverted` attribute when displayed on primary background.
+
+```html
+<div class="flex gap-12 bg-primary p-4">
+  <sd-badge inverted>8</sd-badge>
+  <sd-badge variant="green" inverted>8</sd-badge>
+  <sd-badge variant="red" inverted>8</sd-badge>
+</div>
+```

package/metadata/packages/components/sd-badge/stories/overflow.md

@@ -0,0 +1,11 @@
+The max value is defined by the application.
+A `+` should be used to show overflow.
+
+```html
+<div class="flex gap-12 p-4">
+  <sd-badge>99</sd-badge>
+  <sd-badge>99+</sd-badge>
+  <sd-badge>999</sd-badge>
+  <sd-badge>999+</sd-badge>
+</div>
+```

package/metadata/packages/components/sd-badge/stories/size.md

@@ -0,0 +1,13 @@
+Use the `size` attribute to set the badge’s size:
+
+- `lg` (default)
+- `md`
+- `sm`
+
+```html
+<div class="flex gap-12">
+  <sd-badge size="lg">8</sd-badge>
+  <sd-badge size="md">8</sd-badge>
+  <sd-badge size="sm">8</sd-badge>
+</div>
+```

package/metadata/packages/components/sd-badge/stories/variant.md

@@ -0,0 +1,40 @@
+**Known browser issues:**
+
+- When the `sd-badge` with `role="status"` is placed inside a `sd-button`, Safari is not announcing any update
+  and, in cases where there is multiple elements inside the `sd-badge`, Firefox is only announcing the content
+  of the element that has updates.
+  /
+  export default {
+  title: 'Components/sd-badge',
+  component: 'sd-badge',
+  tags: ['!dev', 'autodocs'],
+  parameters: {
+  ...parameters,
+  design: {
+  type: 'figma',
+  url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2116-4927&node-type=section&t=5PpAC3TA3kYF7ufX-0'
+  }
+  },
+  args: overrideArgs([{ type: 'slot', name: 'default', value: '8' }]),
+  argTypes
+  };
+  export const Default = {
+  name: 'Default',
+  render: (args: any) => {
+  return generateTemplate({ args });
+  }
+  };
+  /\*\*
+  Use the `variant` attribute to set the badge’s variant:
+- `blue`
+- `green`
+- `red`
+  **Hint:** Select blue, green, or red notifications depending on the emphasis you desire. Blue notifications integrate smoothly with the overall design, green notifications attract more attention, and red notifications make notifications stand out the most. Don’t associate colour variants with success or error states.
+
+```html
+<div class="flex gap-12">
+  <sd-badge variant="blue">8</sd-badge>
+  <sd-badge variant="green">8</sd-badge>
+  <sd-badge variant="red">8</sd-badge>
+</div>
+```

package/metadata/packages/components/sd-brandshape/info.md

@@ -0,0 +1,65 @@
+## Overview
+
+`<sd-brandshape>` — Used as a container with brand character that visually emphasizes the content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-brandshape, example: variant
+- component: sd-brandshape, example: transparent-variants
+- component: sd-brandshape, example: shapes
+- component: sd-brandshape, example: image-translate-y
+
+### Key Properties
+
+- prop.variant: |'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
+- prop.shapes: ('top'|'middle'|'bottom')[], default=['top', 'middle', 'bottom'] — Defines which shapes of the brandshape should be displayed.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The content inside the brandshape.
+- slot.image: The image slot for the 'image' variant.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.content: Middle content wrapper.
+- part.shape-top: Top shape.
+- part.shape-middle: Middle shape.
+- part.shape-bottom: Bottom shape.
+- part.stylized-container: Container for border and image variant.
+
+## Guidelines
+
+### Use Cases
+
+- As a core visual element, it conveys the company’s identity across various media and touchpoints. Visit the [Corporate-Toolbox](https://cd.union-investment.de/grundlagen/Basiselemente/Markenform#) to discover further details on its use.
+- Highlight a headline, create a callout inside an article or provide a container for an action and its context while reinforcing brand recognition.
+- Use over [sd-media](./?path=/docs/styles-sd-media--docs) to add visual support to the brandshape’s content.
+
+### Rules
+
+### Slot
+
+- Use the “default” slot to add content. Ensure this content is meaningful and avoid using brandshape purely for decoration.
+
+### Usage
+
+- Limit the number of brandshapes on a page to maintain their visual impact.
+- Use transparent variants only when displayed on image backgrounds.
+
+### Background
+
+- Use light background options like white, neutral-100, or primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Ensure sufficient colour contrast for the content displayed on the brandshape background.
+- Verify that users can navigate to and interact with action elements within the brandshape using the keyboard.
+- Check that accessibility features are maintained across different breakpoints and zoom levels.
+- 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-brandshape/stories/image-translate-y.md

@@ -0,0 +1,13 @@
+Use the `object-position` CSS property to adjust the focal point of the image.
+
+```html
+<sd-brandshape variant="image">
+  <div class="h-8"></div>
+  <img
+    slot="image"
+    src="./placeholders/images/architecture.jpg"
+    style="object-position: top right"
+    alt="Modern, waved architecture with blue sky in background"
+  />
+</sd-brandshape>
+```

package/metadata/packages/components/sd-brandshape/stories/shapes.md

@@ -0,0 +1,22 @@
+Use the `shapes` attribute to only display specific parts of the brandshape.
+The `border-primary`, `border-white`, and `image` variants are **supported only in the default shape** where all three shapes (`top`, `middle`, and `bottom`) are shown simultaneously.
+
+```html
+<div class="space-y-5">
+  <sd-brandshape shapes='["top", "middle", "bottom"]'>
+    <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape shapes='["top"]'>
+    <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape shapes='["top", "middle"]'>
+    <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape shapes='["middle", "bottom"]'>
+    <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+  </sd-brandshape>
+</div>
+```

package/metadata/packages/components/sd-brandshape/stories/transparent-variants.md

@@ -0,0 +1,24 @@
+Use the `variant` attribute to set a transparent color variant:
+
+- `primary|80`: Used on image backgrounds
+- `white|80`: Used on image backgrounds
+
+```html
+<style>
+  .transparent-variants {
+    background: url('./placeholders/images/architecture.jpg');
+    background-size: cover;
+    background-position: center;
+    width: 100%;
+  }
+</style>
+<div class="space-y-5 transparent-variants">
+  <sd-brandshape variant="primary|80">
+    <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape variant="white|80">
+    <div class="slot slot--border slot--text h-8 w-full">Default slot</div>
+  </sd-brandshape>
+</div>
+```

package/metadata/packages/components/sd-brandshape/stories/variant.md

@@ -0,0 +1,95 @@
+<sd-notification variant="info" open class="mb-4">Please notice that this component is only available for themes UI Light and UI Dark</sd-notification>
+/
+export default {
+title: 'Components/sd-brandshape',
+tags: ['!dev', 'autodocs'],
+component: 'sd-brandshape',
+parameters: {
+...parameters,
+design: {
+type: 'figma',
+url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2059-1578&node-type=section&t=5PpAC3TA3kYF7ufX-0'
+}
+},
+args: overrideArgs([
+{
+type: 'slot',
+name: 'default',
+value: '<div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>'
+},
+{
+type: 'slot',
+name: 'image',
+value: `<img slot="image" src="./placeholders/images/generic.jpg" alt="" />`
+},
+{ type: 'attribute', name: 'shapes', value: '["top", "middle", "bottom"]' }
+]),
+argTypes: {
+...argTypes,
+shapes: {
+...argTypes['shapes'],
+options: shapes
+}
+},
+decorators: [
+(story: () => typeof html) => html`
+
+<style>
+body:not(:has(.sd-theme-ui-light, .sd-theme-ui-dark)) .slot {
+display: none;
+}
+body:not(:has(.sd-theme-ui-light, .sd-theme-ui-dark)) .inverted-wrapper {
+background-color: transparent;
+}
+</style>
+
+${story()}
+`]
+};
+export const Default = {
+name: 'Default',
+render: (args: any) => {
+return generateTemplate({ args });
+}
+};
+/**
+Use the`variant` attribute to set the color variant:
+
+- `primary` (default): Used on light backgrounds
+- `neutral-100`
+- `border-primary`: Used on light backgrounds
+  <br>Change the fill color to match the background color
+- `image`: Used to show an image without additional content
+- `white`: Used on primary, primary-100 and neutral-100 backgrounds
+- `border-white`: Used on primary background
+
+```html
+<div class="space-y-5">
+  <sd-brandshape variant="primary">
+    <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape variant="neutral-100">
+    <div class="slot slot--border slot--text h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape variant="border-primary">
+    <div class="slot slot--border slot--text h-8 w-full">Default slot</div>
+  </sd-brandshape>
+
+  <sd-brandshape variant="image">
+    <div class="h-8"></div>
+    <img slot="image" src="./placeholders/images/generic.jpg" alt="" />
+  </sd-brandshape>
+
+  <div class="bg-primary inverted-wrapper">
+    <sd-brandshape variant="white">
+      <div class="slot slot--border slot--text h-8 w-full">Default slot</div>
+    </sd-brandshape>
+
+    <sd-brandshape variant="border-white">
+      <div class="slot slot--border slot--text slot--inverted h-8 w-full">Default slot</div>
+    </sd-brandshape>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-breadcrumb/info.md

@@ -0,0 +1,57 @@
+## Overview
+
+`<sd-breadcrumb>` — Used to visualize a page's location within the site's hierarchy (breadcrumb) and provide easy navigation to previous sections.
+
+## API
+
+### Key Properties
+
+- prop.label: string, default='' — The breadcrumbs' label. Required for proper accessibility.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: `sd-breadcrumb-item` elements to display in the breadcrumb.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.list: The list containing the slotted elements.
+- part.truncated: The truncated wrapper.
+- part.truncated-dropdown: The truncated dropdown containing the truncated breadcrumbs.
+
+## Guidelines
+
+### Use Cases
+
+- Clarify user location within the website or app hierarchy, improving orientation.
+- Allow easy navigation back to previous pages or higher-level sections.
+- Enhance discoverability by displaying category paths or product hierarchy levels.
+- Simplify backtracking from filtered or search result pages to broader content areas.
+
+### Rules
+
+### Content and Labeling
+
+- Use clear and descriptive labels that accurately represent each page or section in the navigation path.
+- Keep breadcrumb trails short and easy to read to avoid overwhelming users.
+- The final breadcrumb item should be non-clickable, as it represents the current page or location.
+
+### Placement and Consistency
+
+- Ensure breadcrumbs are placed consistently across pages to align with user expectations.
+- Use breadcrumbs primarily in structured, multi-level navigation contexts. Avoid implementing them for non-hierarchical or dynamically generated paths, where they may confuse rather than assist users.
+
+### Responsiveness
+
+- On mobile devices breadcrumb is shortened to only provide a link to the higher-level page.
+
+### Background
+
+- Use light background options like white, neutral-100 or primary-100.
+
+### Accessibility
+
+- Dynamically update breadcrumbs and announce changes with aria-live for screen readers.
+- Provide clear labels for breadcrumb items to ensure screen readers convey the navigation path effectively.

package/metadata/packages/components/sd-breadcrumb-item/info.md

@@ -0,0 +1,42 @@
+## Overview
+
+`<sd-breadcrumb-item>` — Used within `sd-breadcrumb` as individual item.
+
+## API
+
+### Key Properties
+
+- prop.href: string, default='' — When not set, the breadcrumb will render as disabled.
+- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is present.
+- prop.current: boolean, default=false — When set, the attribute `aria-current="page"` will be applied.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The breadcrumb label.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+
+## Guidelines
+
+### Use Cases
+
+- Populate an <sd-link href="/?path=/docs/components-sd-breadcrumb--docs">sd-breadcrumb</sd-link> navigation helping users easily access different pages.
+
+### Rules
+
+### Content and Labeling
+
+- Use clear and descriptive labels that accurately represent each page or section in the navigation path.
+
+### Background
+
+- Use light background options like white, neutral-100 or primary-100.
+
+### Accessibility
+
+- Dynamically update breadcrumbs and announce changes with aria-live for screen readers.
+- Provide clear labels for breadcrumb items to ensure screen readers convey the navigation path effectively.