@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,39 @@
+## Overview
+
+`sd-container` – Used to enclose and highlight specific parts of content on a page.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-container/variants
+- sd-container/padding
+- sd-container/custom-padding
+- sd-container/triangle-position
+- sd-container/triangle-border
+- sd-container/triangle-color
+
+## Guidelines
+
+### Use Cases
+
+- Group related content together, such as text, images, or interactive elements, to create a cohesive visual layout.
+- Isolate content for special emphasis, such as promotional banners, alerts, or highlighted features.
+
+### Rules
+
+### Placement
+
+- Use containers sparingly in order to keep their emphasis.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- If the container forms a distinct section (e.g., a highlighted block), ensure a heading or aria-label is added so screen readers recognize it as a standalone region.
+- Headers play a crucial role in visually organizing information within the user interface as they act as guides, helping users navigate content more effectively by quickly identifying different sections.
+- 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/styles/sd-container/stories/custom-padding.md

@@ -0,0 +1,7 @@
+You can override the default padding values via CSS.
+
+```html
+<div class="sd-container" style="padding:4rem;">
+  <div class="slot slot--border slot--text h-12">Default slot</div>
+</div>
+```

package/metadata/packages/styles/sd-container/stories/padding.md

@@ -0,0 +1,7 @@
+Use the `sd-container--padding-sm` class to adapt the container to smaller component widths.
+
+```html
+<div class="sd-container sd-container--padding-sm">
+  <div class="slot slot--border slot--text h-12">Default slot</div>
+</div>
+```

package/metadata/packages/styles/sd-container/stories/triangle-border.md

@@ -0,0 +1,26 @@
+Use the `sd-container--triangle-*-border` classes to create a triangle with a border when using the variant `sd-container--variant-border-neutral-400`:
+
+- `sd-container--triangle-top-border`
+- `sd-container--triangle-right-border`
+- `sd-container--triangle-bottom-border`
+- `sd-container--triangle-left-border`
+
+```html
+<div class="grid grid-cols-2 gap-4">
+  <div class="sd-container sd-container--variant-border-neutral-400 sd-container--triangle-top-border">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-border-neutral-400 sd-container--triangle-right-border">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-border-neutral-400 sd-container--triangle-bottom-border">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-border-neutral-400 sd-container--triangle-left-border">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+</div>
+```

package/metadata/packages/styles/sd-container/stories/triangle-color.md

@@ -0,0 +1,12 @@
+Use the `--triangle-background` CSS property to set the triangle cut-out color.
+
+```html
+<div class="bg-primary p-4">
+  <div
+    style="--triangle-background: rgba(var(--sd-color-background-primary));"
+    class="sd-container sd-container--variant-white sd-container--triangle-top sd-container--padding-sm"
+  >
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+</div>
+```

package/metadata/packages/styles/sd-container/stories/triangle-position.md

@@ -0,0 +1,27 @@
+Use the `sd-container--triangle-*` classes to add a triangle indentation to the container:
+
+- `sd-container--triangle-top`
+- `sd-container--triangle-right`
+- `sd-container--triangle-bottom`
+- `sd-container--triangle-left`
+  **Hint:** Default background option is white and can be overridden if desired.
+
+```html
+<div class="grid grid-cols-2 gap-4">
+  <div class="sd-container sd-container--variant-primary sd-container--triangle-top">
+    <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-primary sd-container--triangle-right">
+    <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-primary sd-container--triangle-bottom">
+    <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-primary sd-container--triangle-left">
+    <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+  </div>
+</div>
+```

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

@@ -0,0 +1,36 @@
+Use the `sd-container--variant-*` classes for alternative appearances:
+
+- neutral-100 is the default appearance
+- `sd-container--variant-primary-100`
+- `sd-container--variant-primary`
+- `sd-container--variant-primary-800`
+- `sd-container--variant-border-neutral-400`
+- `sd-container--variant-white`
+
+```html
+<div class="grid grid-cols-2 gap-4">
+  <div class="sd-container">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-primary-100">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-primary">
+    <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-primary-800">
+    <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-border-neutral-400">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+
+  <div class="sd-container sd-container--variant-white">
+    <div class="slot slot--border slot--text h-12">Default slot</div>
+  </div>
+</div>
+```

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

@@ -0,0 +1,41 @@
+## Overview
+
+`sd-copyright` – Used to display copyright information for a media element.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-copyright/variants
+- sd-copyright/no-shadow
+- sd-copyright/orientation
+- sd-copyright/placement
+
+## Guidelines
+
+### Use Cases
+
+- Indicate the legal rights or usage terms for creative assets or articles.
+
+### Rules
+
+### Content and Readability
+
+- Keep the text concise (ideally one line) and limit it to the name of the rights owner.
+- Use the “&--shadow” property to ensure readability over images, videos or other visually complex backgrounds.
+
+### Accessibility
+
+- Choose the white variant with shadow for image backgrounds, and black or white for simpler or high-contrast backgrounds, or images with gradient overlays to ensure readability.
+- Use the top placement when displayed in a video.
+
+### Related Templates
+
+- brandshape--docs
+- media--docs
+- video--docs
+- teaser-media--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-copyright/stories/no-shadow.md

@@ -0,0 +1,13 @@
+Use the `sd-copyright--no-shadow` class to remove the shadow.
+**Hint:** the class `sd-copyright--color-black` automaticaly removes the shadow.
+
+```html
+<div class="flex">
+  <div class="sd-copyright sd-copyright--no-shadow flex-1" style="--copyright: '© Union Investment 2025';">
+    <div class="px-12 py-8 bg-primary h-full"></div>
+  </div>
+  <div class="sd-copyright sd-copyright--color-black flex-1" style="--copyright: '© Union Investment 2025';">
+    <div class="sd-container sd-container--variant-border-neutral-400 h-full"></div>
+  </div>
+</div>
+```

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

@@ -0,0 +1,16 @@
+Use the `sd-copyright--orientation-*` classes to set the axis of a copyright:
+
+- horizontal is the default orientation
+- `sd-copyright--orientation-vertical`
+
+```html
+<div class="grid grid-cols-2 gap-4">
+  <div class="sd-copyright max-w-xl" style="--copyright: '© Union Investment 2025';">
+    <img src="./placeholders/images/generic.jpg" alt="" class="aspect-video object-cover" />
+  </div>
+
+  <div class="sd-copyright sd-copyright--orientation-vertical max-w-xl" style="--copyright: '© Union Investment 2025';">
+    <img src="./placeholders/images/generic.jpg" alt="" class="aspect-video object-cover" />
+  </div>
+</div>
+```

package/metadata/packages/styles/sd-copyright/stories/placement.md

@@ -0,0 +1,21 @@
+Use the `sd-copyright--placement-*` class to set the copyright placement:
+
+- bottom is the default placement
+- `sd-copyright--placement-top`
+
+```html
+<style>
+  .sd-copyright::after {
+    z-index: 10;
+  }
+</style>
+<div class="grid grid-cols-2 gap-4">
+  <div class="sd-copyright max-w-xl" style="--copyright: '© Union Investment 2025';">
+    <img src="./placeholders/images/generic.jpg" alt="" class="aspect-video object-cover h-full" />
+  </div>
+
+  <sd-video class="sd-copyright sd-copyright--placement-top max-w-xl" style="--copyright: '© Union Investment 2025';">
+    <img class="aspect-video object-cover" alt src="./placeholders/images/generic.jpg" />
+  </sd-video>
+</div>
+```

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

@@ -0,0 +1,15 @@
+Use the `sd-copyright--color-*` class for alternative appearances:
+
+- white is the default color
+- `sd-copyright--color-black`
+
+```html
+<div class="flex">
+  <div class="sd-copyright flex-1" style="--copyright: '© Union Investment 2025';">
+    <div class="sd-container sd-container--variant-primary h-full"></div>
+  </div>
+  <div class="sd-copyright sd-copyright--color-black flex-1" style="--copyright: '© Union Investment 2025';">
+    <div class="sd-container sd-container--variant-border-neutral-400 h-full"></div>
+  </div>
+</div>
+```

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

@@ -0,0 +1,42 @@
+## Overview
+
+`sd-display` – Used to provide larger text sizes that are not used as headlines.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-display/size
+- sd-display/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Provide an oversized introductory line without displacing the headline’s structural role.
+- Present short marketing slogans, taglines, or key promotional messages.
+
+### Rules
+
+### Hierarchy and Content
+
+- Don’t use display text to replace actual headings, which remain the primary tools for structuring and labeling content.
+- Keep display text short—often a line or two—so that large formatting remains readable and doesn’t overwhelm the layout.
+
+### Background and Styling
+
+- Use with light background options of white, neutral-100 and primary-100 or if inverted with background primary.
+- Make use of the different sizes for a versatile styling of text elements.
+
+### Accessibility
+
+- Verify that the heading hierarchy is logical and consistent throughout the page for better accessibility.
+- Retain proper heading tags (<code>&lt;h1&gt;, &lt;h2&gt;</code>) for page structure. Large display text should not replace actual headings to ensure screen readers can navigate content effectively.
+
+### 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-display/stories/inverted.md

@@ -0,0 +1,7 @@
+Use the `sd-display--inverted` class when displayed on primary background.
+
+```html
+<div class="p-4 bg-primary">
+  <div class="sd-display sd-display--inverted">Lorem Ipsum</div>
+</div>
+```

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

@@ -0,0 +1,13 @@
+Use the `sd-display--size-*` classes for alternative appearances.
+
+- `sd-display` (default)
+- `sd-display--size-3xl`
+- `sd-display--size-xl`
+
+```html
+<div class="flex flex-col gap-6">
+  <div class="sd-display">Lorem ipsum</div>
+  <div class="sd-display sd-display--size-3xl">Lorem ipsum</div>
+  <div class="sd-display sd-display--size-xl">Lorem ipsum</div>
+</div>
+```

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

@@ -0,0 +1,45 @@
+## Overview
+
+`sd-flag` – Used as a small, non-interactive label that represents a category.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-flag/variants
+
+## Guidelines
+
+### Use Cases
+
+- Indicate the status of items with visual labels, such as “New,” “Featured,” “Expired,” or “Limited Stock”.
+- Label content type, like “Video,” “Article,” or “Podcast” to help users quickly identify the nature of the content.
+
+### Rules
+
+### Label and Styling
+
+- Keep flag text short and easily scannable. Long text disrupts layouts and diminishes the flag’s visual impact.
+- Use the “&--variant” property to apply the color variant that best works on the background, keeping it consistent throughout the product.
+
+### Chips and Flags
+
+- [sd-chip](./?path=/docs/styles-sd-chip--docs) and sd-flag can be used for similar purposes. Use them consistently throughout your product and, if both are needed, be sure to define which categories each should be used for (e.g. a chip on an article teaser informs about its subject, the flag about the type of article).
+
+### Chips and Tags
+
+- Use only as a non-interactive element; for interactive elements (e.g., a dynamic filter), use [sd-tag](./?path=/docs/styles-sd-tag--docs) instead.
+
+### Accessibility
+
+- Present flags as static labels (no focus or click behavior) to ensure screen readers don’t treat them as actionable elements.
+- If the flag conveys crucial information (e.g., “Expired”), include that text in the accessible name or description for the surrounding context.
+
+### Related Templates
+
+- flag--docs
+- teaser--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

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

@@ -0,0 +1,40 @@
+<sd-notification variant="info" open class="only-theme-kid mb-4">Add "shadow-sm" manually with css property box-shadow.</sd-notification>
+/
+export default {
+title: 'Styles/sd-flag',
+tags: ['!dev', 'autodocs'],
+component: 'sd-flag',
+parameters: {
+...parameters,
+design: {
+type: 'figma',
+url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2106-34451&t=ohgrgpEVGgKzqMzU-4'
+}
+},
+args: overrideArgs([{ type: 'slot', name: 'default', value: 'Flag' }]),
+argTypes
+};
+export const Default = {
+render: (args: any) => {
+return generateTemplate({
+options: { templateContent: '<span class="%CLASSES%">%SLOT%</span>' },
+args
+});
+}
+};
+/\*_
+Use the `sd-flag--_` classes for alternative appearances:
+
+- neutral-200 is the default appearance
+- `sd-flag--neutral-300`
+- `sd-flag--neutral-500`
+- `sd-flag--white`
+
+```html
+<div class="flex gap-4 bg-neutral-100 p-8">
+  <div class="sd-flag">Default</div>
+  <div class="sd-flag sd-flag--neutral-300">Neutral 300</div>
+  <div class="sd-flag sd-flag--neutral-500">Neutral 500</div>
+  <div class="sd-flag sd-flag--white">White</div>
+</div>
+```

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

@@ -0,0 +1,49 @@
+## Overview
+
+`sd-footnotes` – Used to add additional information/sources related to the content.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-footnotes/variants
+- sd-footnotes/inverted
+
+## Guidelines
+
+### Use Cases
+
+- Provide additional context or clarification for terms, concepts, or data mentioned in the main text.
+- Cite sources and references for quotes, statistics, or research findings, ensuring proper attribution and credibility.
+- Link to related content or further reading.
+
+### Rules
+
+### Content & Labeling
+
+- Keep footnotes concise—use them to offer extra details or citations without cluttering the main content. If a longer explanation is required, consider linking to the source instead.
+- Number each footnote consistently (e.g., [1], [2], [3]) to ensure clarity when multiple notes are present.
+
+### Return Points
+
+- Use the footnote [number] itself for a direct “back” navigation, allowing users to quickly return to the original reading position.
+- If the same footnote is referenced from multiple places, use the “Multiple” attribute and provide distinct links labeled “a”, “b”, “c” to guide users back to each relevant section.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Set links to jump between footnote marker and footnote.
+- Include meaningful text for the “back” links (e.g., “Return to content”), to ensure users can quickly navigate to the originating text.
+- Ensure that the footnote markers are included in the document's natural tab order, allowing users to navigate to them using the Tab key.
+- Allow users to navigate between footnotes within the footnote section using the arrow keys.
+
+### Related Templates
+
+- footnotes--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

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

@@ -0,0 +1,11 @@
+Use the `sd-footnotes--inverted` class when displayed on primary background.
+
+```html
+<div class="px-12 py-8 bg-primary">
+  <ol class="sd-footnotes sd-footnotes--inverted">
+    <li>Lorem ipsum dolor sit amet.</li>
+    <li>Sed diam nonumy eirmod tempor invidunt ut labore.</li>
+    <li>Dolore magna aliq erat, sed diam voluptua.</li>
+  </ol>
+</div>
+```

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

@@ -0,0 +1,19 @@
+Use the standard html list elements for alternative appearances:
+
+- ordered: use an `ol` element to create a numbered list.<br />Use the html `start` attribute to set the starting number of the list, the default value is '1'.
+- unordered: use an `ul` element to create an unnumbered list.
+
+```html
+<div class="flex flex-col gap-12">
+  <ol class="sd-footnotes">
+    <li>Lorem ipsum dolor sit amet.</li>
+    <li>Sed diam nonumy eirmod tempor invidunt ut labore.</li>
+    <li>Dolore magna aliq erat, sed diam voluptua.</li>
+  </ol>
+  <ul class="sd-footnotes">
+    <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+    <li>Sed diam nonumy eirmod tempor invidunt ut labore.</li>
+    <li>Dolore magna aliq erat, sed diam voluptua.</li>
+  </ul>
+</div>
+```

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

@@ -0,0 +1,56 @@
+## Overview
+
+`sd-headline` – Used to display primary or section titles, highlighting key messages to create clear visual hierarchy.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-headline/sizes
+- sd-headline/inverted
+- sd-headline/inline
+
+## Guidelines
+
+### Use Cases
+
+- Differentiate content sections on a webpage or platform.
+- Draw readers into the content, such as articles, blog posts, or marketing materials.
+- Improve search engine optimization (SEO) by using targeted keywords in headlines to increase visibility and ranking.
+- Support call-to-action (CTA) elements by making key messages more engaging and compelling (e.g., “Start Your Free Trial Today”).
+
+### Rules
+
+### Hierarchy and Sizing
+
+- Maintain consistent usage of headline sizes to ensure clear hierarchy and accessibility.
+- Decouple headline sizes from semantic H-tagging; the CMS or content page sets the actual heading tags.
+
+### Icons
+
+- Accompany a headline with an icon, either to the left or inline with the text for added visual context.
+
+### Color and Appearance
+
+- Use text/primary color to differentiate hierarchy between headlines.
+- Display desktop headlines (4xl, 3xl) and mobile headlines in primary color unless inverted.
+- Optionally highlight text in green accent color at a minimum font size of 18.67px to maintain accessibility.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Always use proper HTML heading tags for logical structure in the document, even if style classes decouple font size from H-tags, to ensure consistent design, accessibility, and flexibility across use cases. H-tags are applied in the CMS following semantic headline order.
+- Pair any icon usage with a clear text label to ensure the visual meaning is also conveyed to users who cannot see icons. If the icon is purely decorative, mark it with aria-hidden="true".
+- Ensure accent-colored text meets the 18.67px minimum font size to maintain accessibility.
+
+### Related Templates
+
+- headline--docs
+- mark--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-headline/stories/inline.md

@@ -0,0 +1,14 @@
+Use the `sd-headline--inline` class to maintain inline positioning when used together with an icon or other components.
+
+```html
+<div class="flex flex-col gap-12">
+  <h4 class="sd-headline">
+    <sd-icon name="content/image"></sd-icon>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.
+  </h4>
+  <h4 class="sd-headline sd-headline--inline">
+    <sd-icon name="content/image"></sd-icon>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.
+  </h4>
+</div>
+```

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

@@ -0,0 +1,7 @@
+Use the `sd-headline--inverted` class when displayed on primary background.
+
+```html
+<div class="bg-primary p-4">
+  <h4 class="sd-headline sd-headline--inverted">Lorem ipsum sic semper</h4>
+</div>
+```

package/metadata/packages/styles/sd-headline/stories/sizes.md

@@ -0,0 +1,21 @@
+Use the `sd-headline--size-*` classes for alternative appearances:
+
+- 4xl is the default size
+- `sd-headline--size-3xl`
+- `sd-headline--size-xl`
+- `sd-headline--size-lg`
+- `sd-headline--size-base`
+  **Accessibility Information:**
+  Separating semantics from styles allows developers to use appropriate tags (e.g, h1 to h6 or p) for structure,
+  ensuring consistent design, accessibility, and flexibility across use cases.
+  H-tags are applied in the CMS following semantic headline order.
+
+```html
+<div class="flex flex-col gap-12">
+  <p class="sd-headline">Lorem ipsum sic semper</p>
+  <p class="sd-headline sd-headline--size-3xl">Lorem ipsum sic semper</p>
+  <p class="sd-headline sd-headline--size-xl">Lorem ipsum sic semper</p>
+  <p class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</p>
+  <p class="sd-headline sd-headline--size-base">Lorem ipsum sic semper</p>
+</div>
+```