@solid-design-system/mcp 0.0.1

package/metadata/packages/styles/sd-hidden-links/info.md

@@ -0,0 +1,55 @@
+## Overview
+
+`sd-hidden-links` – Used to show links only for keyboard users.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-hidden-links/stack-links
+- sd-hidden-links/multiple-links
+- sd-hidden-links/title-for-multiple-links
+- sd-hidden-links/surrounding-content
+- sd-hidden-links/debug
+
+## Guidelines
+
+### Use Cases
+
+- Provide skip-to-content links for screen readers or keyboard users to bypass repetitive navigation and jump directly to the main content.
+- Boost SEO by creating internal links that help search engines crawl and index content, even if the links aren’t visible to sighted users.
+
+### Rules
+
+### Implementation & Behavior
+
+- Include at least one “Skip to Content” link, visible on first Tab press.
+- Reveal up to three hidden links sequentially as the user tabs through.
+- Use a hidden dropdown if more than three links are needed, auto-focusing the first menu item.
+
+### Focus & Navigation
+
+- Ensure each hidden link is visible on focus and follows a logical tab order.
+- Dismiss the hidden link or menu once a selection is made or the user tabs away.
+
+### Labels & Clarity
+
+- Use concise, descriptive labels (e.g., “Skip to Footer”).
+- Avoid creating duplicate or overlapping hidden links that offer the same navigation outcomes.
+
+### SEO Impact
+
+- Link to relevant content so search engines can still crawl hidden links.
+- Ensure hidden links provide genuine value; empty or misleading links can negatively affect both user experience and SEO.
+
+### Accessibility
+
+- Always include a skip link to meet WCAG 2.2 Level AA compliance.
+
+### Related Templates
+
+- dropdown--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-hidden-links/stories/debug.md

@@ -0,0 +1,12 @@
+Use the `sd-hidden-links--debug` class to always show the links for debugging purposes.
+
+```html
+<div class="relative bg-white w-full h-[256px] p-8">
+  <div class="sd-hidden-links sd-hidden-links--multiple sd-hidden-links--debug">
+    <sd-navigation-item href="#">Search</sd-navigation-item>
+    <sd-navigation-item href="#">Content</sd-navigation-item>
+    <sd-navigation-item href="#">Footer</sd-navigation-item>
+  </div>
+  <p>These links are always visible.</p>
+</div>
+```

package/metadata/packages/styles/sd-hidden-links/stories/multiple-links.md

@@ -0,0 +1,13 @@
+Use the `sd-hidden-links--multiple` class to show multiple `sd-navigation-item` elements.
+**Hint:** Recommended for more than 3 links.
+
+```html
+<div class="relative bg-white w-full h-[256px] p-8 flex">
+  <div class="sd-hidden-links sd-hidden-links--multiple">
+    <sd-navigation-item href="#">Hidden Link 1</sd-navigation-item>
+    <sd-navigation-item href="#">Hidden Link 2</sd-navigation-item>
+    <sd-navigation-item href="#">Hidden Link 3</sd-navigation-item>
+  </div>
+  <p class="self-center">Tab through this area to see multiple links.</p>
+</div>
+```

package/metadata/packages/styles/sd-hidden-links/stories/stack-links.md

@@ -0,0 +1,10 @@
+Stack multiple `sd-hidden-links` by adding multiple of them to the same parent.
+**Hint:** Recommended for maximum of 3 hidden links.
+
+```html
+<div class="relative bg-white w-full h-[256px] p-8 flex">
+  <div class="sd-hidden-links"><sd-button href="#">Skip to search</sd-button></div>
+  <div class="sd-hidden-links"><sd-button href="#">Skip to content</sd-button></div>
+  <p class="self-center">Tab through this area to see buttons one after another.</p>
+</div>
+```

package/metadata/packages/styles/sd-hidden-links/stories/surrounding-content.md

@@ -0,0 +1,54 @@
+The style appends its position relative to the position of the parent container and adds some default padding. It can be used on any element, and the padding is easily overridden via CSS.
+
+```html
+<div style="height: 100px; --sd-header-inner-max-width: 1456px;">
+  <style>
+    .sb-main-padded.sb-show-main {
+      padding: 0;
+    }
+    :root {
+      --sd-header-padding: 8px 16px;
+    }
+
+    sd-header {
+      height: 64px;
+      max-height: 140px;
+    }
+
+    @media (min-width: 376px) {
+      :root {
+        --sd-header-padding: 24px;
+      }
+      sd-header {
+        height: 96px;
+      }
+    }
+
+    @media (min-width: 1025px) {
+      :root {
+        --sd-header-padding: 24px 32px;
+      }
+      sd-header {
+        height: 140px;
+      }
+    }
+
+    @media (min-width: 1440px) {
+      :root {
+        --sd-header-padding: 24px 48px;
+      }
+    }
+  </style>
+  <div class="z-20 sd-hidden-links">
+    <sd-button href="#">Skip to content</sd-button>
+  </div>
+  <sd-header class="z-10" fixed>
+    <div class="flex justify-between items-center">
+      <!-- top-left-area start !-->
+      <a class="flex flex-shrink" href="#">
+        <img class="h-8 md:h-12 lg:h-[56px]" src="images/logo-unioninvestment-lg.svg" alt="Logo" />
+      </a>
+    </div>
+  </sd-header>
+</div>
+```

package/metadata/packages/styles/sd-hidden-links/stories/title-for-multiple-links.md

@@ -0,0 +1,34 @@
+Use the `--sd-hidden-links-title` CSS property to set a title for multiple links.
+German and English are set by default in regard of the document's or elements `lang` attribute.
+
+```html
+<div class="relative bg-white w-full h-[256px] p-8 flex" lang="de">
+  <div class="sd-hidden-links sd-hidden-links--multiple">
+    <sd-navigation-item href="#">Versteckter Link 1</sd-navigation-item>
+    <sd-navigation-item href="#">Versteckter Link 2</sd-navigation-item>
+    <sd-navigation-item href="#">Versteckter Link 3</sd-navigation-item>
+  </div>
+  <p class="self-center">Hier wird eine deutsche Überschrift erscheinen.</p>
+</div>
+<div class="relative bg-white w-full h-[256px] p-8 flex">
+  <div class="sd-hidden-links sd-hidden-links--multiple" lang="en">
+    <sd-navigation-item href="#">Hidden Link 1</sd-navigation-item>
+    <sd-navigation-item href="#">Hidden Link 2</sd-navigation-item>
+    <sd-navigation-item href="#">Hidden Link 3</sd-navigation-item>
+  </div>
+  <p class="self-center">Here you will see an English title.</p>
+</div>
+<div class="relative bg-white w-full h-[256px] p-8 flex">
+  <style>
+    #hidden-link-with-custom-title {
+      --sd-hidden-links-title: 'Jump very fast to';
+    }
+  </style>
+  <div id="hidden-link-with-custom-title" class="sd-hidden-links sd-hidden-links--multiple">
+    <sd-navigation-item href="#">Hidden Link 1</sd-navigation-item>
+    <sd-navigation-item href="#">Hidden Link 2</sd-navigation-item>
+    <sd-navigation-item href="#">Hidden Link 3</sd-navigation-item>
+  </div>
+  <p class="self-center">Here you will see a custom title.</p>
+</div>
+```

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

@@ -0,0 +1,50 @@
+## Overview
+
+`sd-interactive` – Used in interactive elements as a "quartery" button that has no paddings and no background.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-interactive/inverted
+- sd-interactive/disabled
+- sd-interactive/reset
+
+## Guidelines
+
+### Use Cases
+
+- Offer a minimal, “quartery” button style with no padding or background for inline interactions or icon-only triggers.
+- Provide a text-like clickable element without the visual bulk of standard buttons.
+- Create subtle controls within tables (e.g., arrows)
+
+### Rules
+
+### Placement
+
+- Avoid placing interactive elements too close together—users should easily distinguish and activate each link or button.
+- Reserve this style for secondary or low-emphasis actions, rather than critical calls to action.
+
+### Icons
+
+- Display system icons before or after the interactive label, but not both.
+- Use as an icon-only interactive element (e.g. expand and collapse arrows).
+
+### Background and Icons
+
+- Use with light background options of white, neutral-100 and primary-100 or if inverted with background primary.
+
+### Accessibility
+
+- Use a "title" attribute to provide a hint to the user of what the button does.
+- Use the correct semantic element (e.g., <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code>) for each interactive purpose to ensure screen readers announce the function accurately.
+- For icon-only: Include an ARIA label describing its function (e.g., “Expand section”) to ensure the element is accessible to screen readers.
+- Keep enough space around the “quartery” button so users can easily tap or click it, preventing accidental inputs on adjacent elements and ensuring a minimum target size of at least 44×44 px.
+
+### Related Templates
+
+- interactive--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-interactive/stories/disabled.md

@@ -0,0 +1,6 @@
+Use the `sd-interactive--disabled` class to disable an interactive element.
+This works as well when setting an `disabled` attribute on the element.
+
+```html
+<button class="sd-interactive sd-interactive--disabled sd-interactive--reset" title="Disabled button">Disabled</button>
+```

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

@@ -0,0 +1,7 @@
+Use the `sd-interactive--inverted` class when displayed on primary background.
+
+```html
+<div class="bg-primary p-4">
+  <button class="sd-interactive sd-interactive--inverted sd-interactive--reset" title="Action name">Inverted</button>
+</div>
+```

package/metadata/packages/styles/sd-interactive/stories/reset.md

@@ -0,0 +1,30 @@
+Use the `sd-interactive--reset` class to reset the default browser styles of e. g. a button.
+
+```html
+<style>
+  button.sd-interactive:not(.sd-interactive--reset) {
+    background-color: rgb(239, 239, 239);
+    border: 1px solid rgb(204, 204, 204);
+    border-radius: 4px;
+    color: rgb(51, 51, 51);
+    cursor: pointer;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 8px 16px;
+  }
+  button.sd-interactive:not(.sd-interactive--reset):hover {
+    background-color: rgb(230, 230, 230);
+    border-color: rgb(204, 204, 204);
+    color: rgb(51, 51, 51) !important;
+  }
+  button.sd-interactive:not(.sd-interactive--reset):active {
+    background-color: rgb(204, 204, 204);
+  }
+</style>
+<div class="flex flex-row gap-8">
+  <button class="sd-interactive" title="Action name">Default</button>
+  <button class="sd-interactive sd-interactive--reset" title="Action name">Reset</button>
+</div>
+```

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

@@ -0,0 +1,41 @@
+## Overview
+
+`sd-leadtext` – Used for text that should be highlighted and a focal point of the page.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-leadtext/size
+- sd-leadtext/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Provide a short, high-impact introduction to the topic or a brief summary at the top of a page or at the beggining of a new section.
+- Draw attention to a critical statement or focal message that sets the tone for the content below.
+
+### Rules
+
+### Content and Emphasis
+
+- Keep leadtext brief for maximum visual impact; if it grows lengthy, break it into blocks to remain scannable.
+- Use leadtext to highlight key information or a standout idea, rather than duplicating a heading.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Confirm that leadtext is visually distinct from regular text to emphasise its introductory purpose without replacing headings.
+- Avoid using leadtext as a structural heading; maintain proper semantic headings for section organization.
+
+### Related Templates
+
+- mark--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

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

@@ -0,0 +1,11 @@
+Use the `sd-leadtext--inverted` class when displayed on primary background.
+
+```html
+<div class="bg-primary p-4">
+  <div class="sd-leadtext sd-leadtext--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.
+  </div>
+</div>
+```

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

@@ -0,0 +1,19 @@
+Use the `sd-leadtext--size-*` classes for alternative appearances:
+
+- xl is the default size
+- `sd-leadtext--size-lg`
+
+```html
+<div class="flex flex-col gap-6">
+  <div class="sd-leadtext">
+    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.
+  </div>
+  <div class="sd-leadtext sd-leadtext--size-lg">
+    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.
+  </div>
+</div>
+```

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

@@ -0,0 +1,49 @@
+## Overview
+
+`sd-list` – Used to make blocks of text easier to read and to divide information into manageable sections.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-list/variants
+- sd-list/levels
+- sd-list/orientation
+- sd-list/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Arrange content into numbered or bulleted lists to improve readability and help users digest information quickly.
+
+### Rules
+
+### Content and Styling
+
+- Incorporate content icons to visually differentiate list items, but use them sparingly to avoid cognitive load in lengthy lists with a different icons.
+- Use numbered lists when there’s a particular order or hierarchy between its elements.
+- Apply bold text to emphasize essential details or terminology and include hyperlinks where relevant to direct users to external pages or sections.
+
+### Nesting
+
+- Keep nesting to a minimum—excessive levels can overwhelm users and complicate scanning.
+- Break out sub-points into their own list when nesting levels exceed two or three.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Limit nested levels to keep list structure clear and easily manageable for screen readers.
+- Mark decorative icons as aria-hidden="true" if they provide no additional meaning, and ensure descriptive text is provided for icons that convey crucial information.
+
+### Related Templates
+
+- list--docs
+- link--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

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

@@ -0,0 +1,20 @@
+Use the `sd-list--inverted` class when displayed on primary background.
+
+```html
+<div class="bg-primary p-4">
+  <ul class="sd-list--icon sd-list sd-list--inverted">
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Icon list inverted
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Icon list inverted
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Icon list inverted
+    </li>
+  </ul>
+</div>
+```

package/metadata/packages/styles/sd-list/stories/levels.md

@@ -0,0 +1,62 @@
+List items can be nested up to 3 levels.
+
+```html
+<div class="grid grid-cols-2 gap-12">
+  <ul class="sd-list">
+    <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>
+  <ol class="sd-list">
+    <li>
+      Ordered list level 1
+      <ol>
+        <li>
+          Ordered list level 2
+          <ol>
+            <li>Ordered list level 3</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+    <li>Ordered list level 1</li>
+    <li>Ordered list level 1</li>
+  </ol>
+  <ul class="sd-list--icon sd-list">
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Unordered list level 1
+      <ul class="sd-list--icon sd-list">
+        <li>
+          <sd-icon name="content/image"></sd-icon>
+          Unordered list level 2
+          <ul class="sd-list--icon sd-list">
+            <li>
+              <sd-icon name="content/image"></sd-icon>
+              Unordered list level 3
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Unordered list level 1
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Unordered list level 1
+    </li>
+  </ul>
+</div>
+```

package/metadata/packages/styles/sd-list/stories/orientation.md

@@ -0,0 +1,34 @@
+Use the `sd-list--horizontal` class to set the axis of the list displaying content icons to horizontal. Please be aware that this option is only available for the icon variant.
+
+```html
+<div class="flex flex-row justify-around items-center">
+  <ul class="sd-list--icon sd-list">
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Vertical list
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Vertical list
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Vertical list
+    </li>
+  </ul>
+  <ul class="sd-list--icon sd-list--horizontal sd-list">
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Horizontal list
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Horizontal list
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Horizontal list
+    </li>
+  </ul>
+</div>
+```

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

@@ -0,0 +1,34 @@
+Use `sd-list` modifiers for alternative appearances:
+
+- `ul` standard html list element to create an unordered list
+- `ol` standard html list element to create a ordered list
+- `sd-list--icon` class to create an icon list
+
+```html
+<div class="grid grid-cols-3 gap-12">
+  <ul class="sd-list">
+    <li>Unordered list</li>
+    <li>Unordered list</li>
+    <li>Unordered list</li>
+  </ul>
+  <ol class="sd-list">
+    <li>Ordered list</li>
+    <li>Ordered list</li>
+    <li>Ordered list</li>
+  </ol>
+  <ul class="sd-list--icon sd-list">
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Icon list
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Icon list
+    </li>
+    <li>
+      <sd-icon name="content/image"></sd-icon>
+      Icon list
+    </li>
+  </ul>
+</div>
+```

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

@@ -0,0 +1,30 @@
+## Overview
+
+`sd-mark` – Used to highlight text sections in the accent color.
+
+## Guidelines
+
+### Use Cases
+
+- To highlight text sections in a headline or displays.
+
+### Rules
+
+### Styling
+
+- The font weight of the mark is defined by the headline/display styling used.
+- Only use the styling for short text sections or combinations of words.
+
+### Background Color
+
+- Use light background options like white, neutral-100, or primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- For the green accent color in the mark, ensure a minimum font size of 18.67 pixels when bolded and 24 pixels when in regular weight.
+
+### Related Templates
+
+- mark--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

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

@@ -0,0 +1,50 @@
+## Overview
+
+`sd-media` – Used to display an image or video preview.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-media/description
+- sd-media/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Display images, illustrations, animations or videos.
+- Use to populate the media slot in [sd-teaser](./?path=/docs/components-sd-teaser--docs) or the default slot in [sd-carousel](./?path=/docs/components-sd-carousel--docs).
+
+### Rules
+
+### Aspect Ratio
+
+- Use the nested [sd-aspect-ratio](https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=3646-41470&t=cm2c2fYXSZANLiBp-0) helper component to select from predefined aspect ratios.
+
+### Attribution and Description
+
+- Use the html <code>figcaption</code> element to add a description.
+
+### Performance
+
+- Use appropriate formats and compress media files without significant quality loss to optimize loading times and performance.
+- Limit the number of media items on a single page to prevent slowing down page load times.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Provide concise, descriptive alt text for the embedded element.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.
+- Compress media to reduce load times, preventing lengthy loading that might hinder access to other page elements.
+
+### Related Templates
+
+- media--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-media/stories/description.md

@@ -0,0 +1,8 @@
+Use the html `figcaption` element to add a description.
+
+```html
+<figure class="sd-media p-4">
+  <img src="./placeholders/images/architecture.jpg" alt="A generic placeholder jpg" class="aspect-video object-cover" />
+  <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</figcaption>
+</figure>
+```

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

@@ -0,0 +1,14 @@
+Use the `sd-media--inverted` class when displayed on primary background.
+
+```html
+<div class="p-4 bg-primary">
+  <figure class="sd-media sd-media--inverted p-4">
+    <img
+      src="./placeholders/images/architecture.jpg"
+      alt="A generic placeholder jpg"
+      class="aspect-video object-cover"
+    />
+    <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</figcaption>
+  </figure>
+</div>
+```