@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,38 @@
+## Overview
+
+`sd-meta` – Used to display meta information like file size, date or other.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-meta/variants
+- sd-meta/size
+- sd-meta/inverted
+- sd-meta/pipe
+
+## Guidelines
+
+### Use Cases
+
+- Provide relevant data points about files, media or articles such as file size, upload or publish date, user or author info.
+
+### Rules
+
+### Clarity & Consistency
+
+- Use concise, standard formats for common meta elements and implement them consistently across the product.
+- Maintain a logical order—date or time-related information often comes first, followed by file sizes or user details.
+
+### Background and Emphasis
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+- Use Primary-400 to de-emphasize text content
+
+### Accessibility
+
+- If meta information includes dates, file sizes, or user details, ensure they are labeled in a way that screen readers can recognize (e.g., “Published on July 10, 2025” rather than “07/10/25”). If a shorter version is needed due to space constraints, ensure the full label is provided over the accessible aria label.
+- Avoid abbreviations or unclear shorthand unless they are commonly understood.
+- Group or label meta items if multiple data points appear together (e.g., file size, date, author) so they’re perceived as related information.

package/metadata/packages/styles/sd-meta/stories/inverted.md

@@ -0,0 +1,11 @@
+Use the `sd-meta--inverted` class when displayed on primary background.
+
+- White is the default
+- `sd-meta--light`: Primary-400
+
+```html
+<div class="p-4 bg-primary flex flex-row gap-12">
+  <span class="sd-meta sd-meta--inverted">Default</span>
+  <span class="sd-meta sd-meta--inverted sd-meta--light">Light</span>
+</div>
+```

package/metadata/packages/styles/sd-meta/stories/pipe.md

@@ -0,0 +1,7 @@
+Use the `sd-meta--pipe` class to separate meta information with a pipe.
+
+```html
+<span class="sd-meta sd-meta--pipe">With Pipe</span>
+<span class="sd-meta sd-meta--pipe">With Pipe</span>
+<span class="sd-meta">With Pipe</span>
+```

package/metadata/packages/styles/sd-meta/stories/size.md

@@ -0,0 +1,11 @@
+Use `sd-meta--size-*` classes for alternative appearances:
+
+- Base is the default size
+- `sd-meta--size-sm`
+
+```html
+<div class="flex flex-row gap-12">
+  <span class="sd-meta">Base</span>
+  <span class="sd-meta sd-meta--size-sm">Small</span>
+</div>
+```

package/metadata/packages/styles/sd-meta/stories/variants.md

@@ -0,0 +1,11 @@
+Use the `sd-meta--*` classes for alternative appearances:
+
+- Black is the default color
+- `sd-meta--light`: Neutral-700
+
+```html
+<div class="flex flex-row gap-12">
+  <span class="sd-meta">Default</span>
+  <span class="sd-meta sd-meta--light">Light</span>
+</div>
+```

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

@@ -0,0 +1,60 @@
+## Overview
+
+`sd-pagination` – Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-pagination/variants
+- sd-pagination/truncation
+- sd-pagination/inverted
+- sd-pagination/hidden-headline
+
+## Guidelines
+
+### Use Cases
+
+- Divide large sets of articles, search results, or product listings into manageable pages.
+- Allow users to paginate through pages of search results or filtered content.
+- Enable users to browse products without overwhelming them with too much information at once.
+
+### Rules
+
+### Context and Navigation
+
+- Use pagination consistently across similar content sections to establish predictable user behavior, and place it in easy-to-find locations.
+- Avoid pagination when fewer than two or three pages are present; users benefit from simpler controls or scrolling instead.
+- Clearly indicate the currently active page to orient users within the paginated content.
+
+### Truncation
+
+- Display a maximum of 7 items. Items can be pages or truncation ellipses.
+- If there are seven or fewer pages, ensure all pages are shown without truncation.
+- For more than seven pages, always display the first and last, current, previous, and next pages.
+- If the current page falls within the first or last four pages, display five pages at that respective end. (e.g., if the user is currently on page 3—within the first four pages—, display pages 1 to 5, truncation, and last page)
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Verify that pagination is fully navigable via keyboard (e.g., Tab to focus, Enter to select).
+  Ensure pagination controls have descriptive labels (e.g., “Previous page,” “Next page,” “Page 3”) rather than relying on numeric or symbolic indicators alone.
+- Make each pagination button (including page numbers and arrows) sufficiently large to click or tap comfortably with a minimum target size of at least 44×44 px.
+
+#### Aria Attributes
+
+- Use aria-role="navigation" for the pagination container to indicate its purpose.
+- Label the component with aria-label="pagination".
+- Use aria-current="page" on the active page number to help screen readers announce the current page.
+- If page numbers or content update dynamically (e.g., "next" or "previous" page), use aria-live="polite" to announce changes.
+
+### Related Templates
+
+- pagination--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-pagination/stories/hidden-headline.md

@@ -0,0 +1,37 @@
+Provides an accessible hidden headline for pagination navigation.
+
+```html
+<div class="p-4">
+  <nav class="sd-pagination" aria-labelledby="pagination--hidden-headline">
+    <h4 id="pagination--hidden-headline">Pagination</h4>
+    <ul>
+      <li>
+        <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Previous"></sd-icon></a>
+      </li>
+      <li><a aria-current="page">1</a></li>
+      <li><a href="/?page=2">2</a></li>
+      <li><a href="/?page=3">3</a></li>
+      <li><a href="/?page=4">4</a></li>
+      <li><a href="/?page=5">5</a></li>
+      <li><a href="/?page=6">6</a></li>
+      <li><a href="/?page=7">7</a></li>
+      <li><a href="/?page=8">8</a></li>
+      <li><a href="/?page=9">9</a></li>
+      <li><a href="/?page=10">10</a></li>
+      <li><a href="/?page=11">11</a></li>
+      <li><a href="/?page=12">12</a></li>
+      <li><a href="/?page=13">13</a></li>
+      <li><a href="/?page=14">14</a></li>
+      <li><a href="/?page=15">15</a></li>
+      <li><a href="/?page=16">16</a></li>
+      <li><a href="/?page=17">17</a></li>
+      <li><a href="/?page=18">18</a></li>
+      <li><a href="/?page=19">19</a></li>
+      <li><a href="/?page=20">20</a></li>
+      <li>
+        <a href="/?page=2"><sd-icon name="system/chevron-right" label="Next"></sd-icon></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+```

package/metadata/packages/styles/sd-pagination/stories/inverted.md

@@ -0,0 +1,36 @@
+Use the `sd-pagination--inverted` attribute when displayed on primary background.
+
+```html
+<div class="bg-primary p-4">
+  <nav class="sd-pagination sd-pagination--inverted" aria-label="Inverted pagination">
+    <ul>
+      <li>
+        <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Previous"></sd-icon></a>
+      </li>
+      <li><a aria-current="page">1</a></li>
+      <li><a href="/?page=2">2</a></li>
+      <li><a href="/?page=3">3</a></li>
+      <li><a href="/?page=4">4</a></li>
+      <li><a href="/?page=5">5</a></li>
+      <li><a href="/?page=6">6</a></li>
+      <li><a href="/?page=7">7</a></li>
+      <li><a href="/?page=8">8</a></li>
+      <li><a href="/?page=9">9</a></li>
+      <li><a href="/?page=10">10</a></li>
+      <li><a href="/?page=11">11</a></li>
+      <li><a href="/?page=12">12</a></li>
+      <li><a href="/?page=13">13</a></li>
+      <li><a href="/?page=14">14</a></li>
+      <li><a href="/?page=15">15</a></li>
+      <li><a href="/?page=16">16</a></li>
+      <li><a href="/?page=17">17</a></li>
+      <li><a href="/?page=18">18</a></li>
+      <li><a href="/?page=19">19</a></li>
+      <li><a href="/?page=20">20</a></li>
+      <li>
+        <a href="/?page=2"><sd-icon name="system/chevron-right" label="Next"></sd-icon></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+```

package/metadata/packages/styles/sd-pagination/stories/truncation.md

@@ -0,0 +1,34 @@
+Automatically truncated on default appearance.
+
+```html
+<nav class="sd-pagination" aria-label="Truncated pagination">
+  <ul>
+    <li>
+      <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Previous"></sd-icon></a>
+    </li>
+    <li><a href="/?page=1">1</a></li>
+    <li><a href="/?page=2">2</a></li>
+    <li><a href="/?page=3">3</a></li>
+    <li><a href="/?page=4">4</a></li>
+    <li><a aria-current="page">5</a></li>
+    <li><a href="/?page=6">6</a></li>
+    <li><a href="/?page=7">7</a></li>
+    <li><a href="/?page=8">8</a></li>
+    <li><a href="/?page=9">9</a></li>
+    <li><a href="/?page=10">10</a></li>
+    <li><a href="/?page=11">11</a></li>
+    <li><a href="/?page=12">12</a></li>
+    <li><a href="/?page=13">13</a></li>
+    <li><a href="/?page=14">14</a></li>
+    <li><a href="/?page=15">15</a></li>
+    <li><a href="/?page=16">16</a></li>
+    <li><a href="/?page=17">17</a></li>
+    <li><a href="/?page=18">18</a></li>
+    <li><a href="/?page=19">19</a></li>
+    <li><a href="/?page=20">20</a></li>
+    <li>
+      <a href="/?page=2"><sd-icon name="system/chevron-right" label="Next"></sd-icon></a>
+    </li>
+  </ul>
+</nav>
+```

package/metadata/packages/styles/sd-pagination/stories/variants.md

@@ -0,0 +1,51 @@
+Use the `sd-pagination--*` classes for alternative appearances:
+
+- number is the default appearance
+- `simple`
+
+```html
+<div class="flex gap-10">
+  <nav class="sd-pagination" aria-label="Default variant pagination">
+    <ul>
+      <li>
+        <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Previous"></sd-icon></a>
+      </li>
+      <li><a aria-current="page">1</a></li>
+      <li><a href="/?page=2">2</a></li>
+      <li><a href="/?page=3">3</a></li>
+      <li><a href="/?page=4">4</a></li>
+      <li><a href="/?page=5">5</a></li>
+      <li><a href="/?page=6">6</a></li>
+      <li><a href="/?page=7">7</a></li>
+      <li><a href="/?page=8">8</a></li>
+      <li><a href="/?page=9">9</a></li>
+      <li><a href="/?page=10">10</a></li>
+      <li><a href="/?page=11">11</a></li>
+      <li><a href="/?page=12">12</a></li>
+      <li><a href="/?page=13">13</a></li>
+      <li><a href="/?page=14">14</a></li>
+      <li><a href="/?page=15">15</a></li>
+      <li><a href="/?page=16">16</a></li>
+      <li><a href="/?page=17">17</a></li>
+      <li><a href="/?page=18">18</a></li>
+      <li><a href="/?page=19">19</a></li>
+      <li><a href="/?page=20">20</a></li>
+      <li>
+        <a href="/?page=2"><sd-icon name="system/chevron-right" label="Next"></sd-icon></a>
+      </li>
+    </ul>
+  </nav>
+  <nav class="sd-pagination sd-pagination--simple" aria-label="Simple variant pagination">
+    <ul>
+      <li>
+        <a aria-hidden="true"><sd-icon name="system/chevron-left" label="Previous"></sd-icon></a>
+      </li>
+      <li>1</li>
+      <li>20</li>
+      <li>
+        <a href="/?page=2"><sd-icon name="system/chevron-right" label="Next"></sd-icon></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+```

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

@@ -0,0 +1,39 @@
+## Overview
+
+`sd-paragraph` – Used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-paragraph/size
+- sd-paragraph/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Organize content into digestible sections: Break down long blocks of text into smaller, more manageable paragraphs to improve readability and flow.
+
+### Rules
+
+### Emphasis and Styling
+
+- Use [sd-link](./?path=/docs/components-sd-link--docs) to connect paragraphs to external or internal resources.
+- Apply bold text to emphasize important concepts, but do so sparingly to maintain impact.
+
+### Layout
+
+- Keep paragraphs concise to improve scanning and comprehension.
+- Limit line length to roughly 60–80 characters for optimal readability.
+- Ensure paragraphs are properly spaced to enhance readability and provide a clear visual separation between ideas.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Avoid redundant links that point to the same destination if they appear in close proximity. For instance, if a text link in a paragraph is followed by a logo link to the same page, delete one to avoid confusing users.

package/metadata/packages/styles/sd-paragraph/stories/inverted.md

@@ -0,0 +1,11 @@
+Use the `sd-paragraph--inverted` class when displayed on primary background.
+
+```html
+<div class="p-4 bg-primary">
+  <p class="sd-paragraph sd-paragraph--inverted">
+    Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
+    dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+    integer hendrerit tortor.
+  </p>
+</div>
+```

package/metadata/packages/styles/sd-paragraph/stories/size.md

@@ -0,0 +1,19 @@
+Use the `sd-paragraph--size-*` classes for alternative appearances:
+
+- lg is the default size
+- `sd-paragraph--size-sm`
+
+```html
+<div class="flex flex-col gap-6">
+  <p class="sd-paragraph">
+    Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
+    dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+    integer hendrerit tortor.
+  </p>
+  <p class="sd-paragraph sd-paragraph--size-sm">
+    Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
+    dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+    integer hendrerit tortor.
+  </p>
+</div>
+```

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

@@ -0,0 +1,49 @@
+## Overview
+
+`sd-prose` – Used as a set of "prose" classes to choose from in a richtext-editor.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-prose/styling-options
+- sd-prose/full-width
+- sd-prose/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Create visually engaging and dynamic content by incorporating various text styles, formatting options, and image embeds.
+- Enhance readability by structuring content with headings, lists, and block quotes to guide the reader through complex information.
+- Apply a consistent look to long-form or mixed-format content in a rich text editor (e.g., articles, blog posts, documentation).
+
+### Rules
+
+### Layout and Consistency
+
+- Choose between full-width or non-full-width settings based on the overall page design and readability requirements.
+- Be aware of the preset spacing, which applies a 16px vertical gap between elements and removes top padding from the first element.
+- Limit the number of custom overrides—frequent manual changes undermine the benefit of a unified “sd-prose” setup.
+
+### Readability
+
+- Keep line lengths within recommended ranges (roughly 60–80 characters) for paragraphs, especially at full width.
+- Use headings and subheadings judiciously to break up large content into scannable sections.
+- Incorporate bullet points and numbered lists to present information clearly and concisely.
+- Utilize ample white space to prevent content from feeling cramped and to improve overall readability.
+- Add media elements such as images, videos, or infographics to make the content more engaging and break up large blocks of text.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted. Note that tables are not compatible with primary.
+
+### Accessibility
+
+- Avoid skipping heading levels, such as from <code>&lt;h2&gt;</code> to <code>&lt;h4&gt;</code>, going down the page. Assistive technologies rely on heading tags to convey a logical structure.
+- Within sd-prose, heading tags are always bound to specific font sizes and styles. Layout flexibility is achieved when CMS modules employ sd-headline (which supports h-tagging) together with sd-prose.
+- Provide descriptive alt text or captions for images, infographics, and other media embeds, ensuring that screen readers can convey the same information.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.
+- Adhere to the recommended line length (60–80 characters) and maintain adequate spacing between elements, aiding users with low vision or reading difficulties.

package/metadata/packages/styles/sd-prose/stories/full-width.md

@@ -0,0 +1,22 @@
+Use the `sd-prose--full-width` class to make the prose full width.
+
+```html
+<div class="flex flex-col space-y-8">
+  <div class="sd-prose">
+    <h4>Default width</h4>
+    <p class="sd-paragraph">
+      Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+      phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique.
+      Facilisis commodo integer hendrerit tortor.
+    </p>
+  </div>
+  <div class="sd-prose sd-prose--full-width">
+    <h4>Full width</h4>
+    <p class="sd-paragraph">
+      Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+      phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique.
+      Facilisis commodo integer hendrerit tortor.
+    </p>
+  </div>
+</div>
+```

package/metadata/packages/styles/sd-prose/stories/inverted.md

@@ -0,0 +1,11 @@
+Use the `sd-prose--inverted` class when displayed on primary background.
+
+```html
+<div class="bg-primary p-4 sd-prose sd-prose--inverted">
+  <p class="sd-paragraph">
+    Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie phasellus
+    dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis commodo
+    integer hendrerit tortor.
+  </p>
+</div>
+```

package/metadata/packages/styles/sd-prose/stories/styling-options.md

@@ -0,0 +1,108 @@
+Use the `sd-prose` to set a style for a group of elements:
+
+- `<h1>`: H1, hidden in cms-modules to make sure H1 is only used once on a page
+- `<h2>, <h3>, <h4> and <h5>`: H2, H3, H4 and H5
+- `<p> and <p> <strong>`: Paragraph and Paragraph bold
+- `<sd-leadtext>`: Leadtext
+- `<blockquote>`: Quote
+- `<hr>`: Divider
+- `<a href>`: Inline Link (text only - no icon before/after)
+- `<a href> <strong>`: Inline Link bold (text only - no icon before/after)
+- `<ul> <li> / <ol> <li>`: List (unordered/ordered)
+- `<figure>`: Image (full-width only – no text wrapping)
+- `<figcaption>`: Image description
+- `<table>`: Table
+  **Spacing**
+  Certain combinations have a specific vertical spacing in between:
+- Headlines after any other element than a headline have a spacing of 32px to the top instead of 16px.
+- Headlines after a headline have a spacing of 8px to the top instead of 16px.
+- Figcaption has an additional 8px at the bottom.
+- Media has an additional 8px at the bottom if followed by any other element than figcaption.
+
+```html
+<div class="sd-prose sd-prose--full-width flex flex-col gap-8">
+  <h1 class="sd-headline">H1 - Nisi eu excepteur anim esse</h1>
+  <h2 class="sd-headline sd-headline--size-3xl">H2 - Nisi eu excepteur anim esse</h2>
+  <sd-divider></sd-divider>
+  <h3 class="sd-headline sd-headline--size-xl">H3 - Nisi eu excepteur anim esse</h3>
+  <h4 class="sd-headline sd-headline--size-lg">H4 - Nisi eu excepteur anim esse</h4>
+  <h5 class="sd-headline sd-headline--size-base">H5 - Nisi eu excepteur anim esse</h5>
+  <p class="sd-paragraph">
+    Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+    phasellus dui vel id.
+  </p>
+  <p class="sd-paragraph">
+    <strong>
+      Paragraph Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor
+      molestie phasellus dui vel id.
+    </strong>
+  </p>
+  <p class="sd-leadtext">
+    Leadtext - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullamcorper odio tempor molestie
+    phasellus dui vel id. Velit in sed non orci pellentesque vivamus nunc. At non tortor, sit neque tristique. Facilisis
+    commodo integer hendrerit tortor.
+  </p>
+  <blockquote>Blockquote - Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</blockquote>
+  <sd-divider></sd-divider>
+  <sd-link href="https://www.union-investment.de/">Inline link</sd-link>
+  <sd-link href="https://www.union-investment.de/"><strong>Inline link strong</strong></sd-link>
+  <ul>
+    <li>
+      Unordered list level 1
+      <ul>
+        <li>
+          Unordered list level 2
+          <ul>
+            <li>Unordered list level 3</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Unordered list level 1</li>
+    <li>Unordered list level 1</li>
+  </ul>
+  <figure class="sd-media p-4">
+    <img src="./placeholders/images/generic.jpg" alt="A generic placeholder jpg" class="aspect-video object-cover" />
+    <figcaption>
+      Figcaption - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
+    </figcaption>
+  </figure>
+  <table class="sd-table">
+    <thead>
+      <tr>
+        <th class="sd-table-cell">Header</th>
+        <th class="sd-table-cell">Header</th>
+        <th class="sd-table-cell">Header</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+      </tr>
+      <tr>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+        <td class="sd-table-cell">Cell Content</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```

package/metadata/packages/styles/sd-status-badge/info.md

@@ -0,0 +1,44 @@
+## Overview
+
+`sd-status-badge` – Used as a visual, non-interactive indicator of a status related to a particular element.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-status-badge/variants
+
+## Guidelines
+
+### Use Cases
+
+- Provide a quick, non-interactive indicator of an element’s status (e.g., info, success, error, warning).
+- Indicate the current stage or progress of a process or workflow, such as "in progress" or "completed".
+- Show the availability status of resources or personnel, like "online" or "offline."
+- Label items in lists, dashboards, or summaries with clear visual cues.
+
+### Rules
+
+### Variants and Placement
+
+- Match the badge’s color and icon to the wording or message of the associated element so users instantly recognize the status (blue for info, green for success, red for error, yellow for warning).
+- Ensure the badge is clearly visible and doesn’t overlap critical content or interactive elements.
+
+### Background
+
+- Use light background options like white, neutral-100 or primary-100.
+
+### Accessibility
+
+- We recommend to combine a badge with text to reinforce the message.
+- Integrate the status badge’s information into the accessible name or description of the related element to ensure that its meaning is programmatically connected to the item it describes.
+- Make sure that the badge icon is hidden from screen readers, as the information is already conveyed by the badge label.
+
+### Related Templates
+
+- status-badge--docs
+- badge--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-status-badge/stories/variants.md

@@ -0,0 +1,27 @@
+Use the `sd-status-badge--*` classes for alternative appearances:
+
+- `sd-status-badge--success`
+- `sd-status-badge--warning`
+- `sd-status-badge--error`
+- `sd-status-badge--info`
+
+```html
+<div class="flex flex-col items-start gap-4">
+  <div class="sd-status-badge sd-status-badge--success">
+    <sd-icon name="status-check" library="sd-status-assets"></sd-icon>
+    Active
+  </div>
+  <div class="sd-status-badge sd-status-badge--warning">
+    <sd-icon name="status-exclamation" library="sd-status-assets"></sd-icon>
+    Degraded
+  </div>
+  <div class="sd-status-badge sd-status-badge--error">
+    <sd-icon name="status-close" library="sd-status-assets"></sd-icon>
+    Canceled
+  </div>
+  <div class="sd-status-badge sd-status-badge--info">
+    <sd-icon name="status-info" library="sd-status-assets"></sd-icon>
+    Status Info
+  </div>
+</div>
+```