@solid-design-system/mcp 0.0.1

package/metadata/packages/components/sd-input/stories/type.md

@@ -0,0 +1,80 @@
+Use the `type` attribute to control the type of input the browser renders.
+
+```html
+<div class="grid grid-cols-2 gap-12 content-end">
+  <sd-input type="text" placeholder="Lorem ipsum" label="Text (default)" help-text="Default type" spellcheck></sd-input>
+
+  <sd-input type="search" placeholder="Search term" label="Search" help-text="Use search format" spellcheck></sd-input>
+
+  <sd-input
+    type="date"
+    label="Date"
+    value="2025-03-01"
+    help-text="Value is restricted to date format"
+    spellcheck
+  ></sd-input>
+
+  <sd-input
+    type="datetime-local"
+    label="Date time"
+    value="2025-03-01T10:30"
+    help-text="Value is restricted to datetime format"
+    spellcheck
+  ></sd-input>
+
+  <sd-input type="time" label="Time" value="10:30" help-text="Value is restricted to time format" spellcheck></sd-input>
+
+  <sd-input
+    type="number"
+    placeholder="123456"
+    label="Number"
+    help-text="Value is restricted to numbers"
+    spin-buttons
+    spellcheck
+  ></sd-input>
+
+  <sd-input
+    type="email"
+    placeholder="someone@example.com"
+    label="Email"
+    help-text="Validate with email address format"
+    spellcheck
+  ></sd-input>
+
+  <sd-input
+    type="tel"
+    placeholder="+49 1234 567891"
+    label="Tel"
+    help-text="Shows optimized keyboard on touch devices or similar"
+    spellcheck
+  ></sd-input>
+
+  <sd-input
+    type="password"
+    label="Password"
+    value="8SyW4jNDdrIDe2L"
+    help-text="Use password display format"
+    password-toggle
+    spellcheck
+  ></sd-input>
+
+  <sd-input
+    type="password"
+    label="Password"
+    value="8SyW4jNDdrIDe2L"
+    help-text="Use password display format"
+    password-toggle
+    password-visible
+    spellcheck
+  ></sd-input>
+
+  <sd-input
+    type="url"
+    placeholder="https://www.union-investment.de/"
+    label="URL"
+    help-text="Validate with url format"
+    name="url field"
+    spellcheck
+  ></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/valid.md

@@ -0,0 +1,15 @@
+The component gets `valid` state when the input is valid.
+Use the `style-on-valid` attribute to automatically indicate and show a valid state.
+
+```html
+<form id="valid-form">
+  <sd-input id="valid-input" class="w-[250px]" label="Label" style-on-valid value="Input text here"></sd-input>
+</form>
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-input')]).then(() => {
+    const input = document.getElementById('valid-input');
+    input.setCustomValidity(''); // Clear custom validity
+    input.reportValidity();
+  });
+</script>
+```

package/metadata/packages/components/sd-input/stories/value.md

@@ -0,0 +1,7 @@
+Use the `value` attribute to set the value.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Label" value="Value example"> </sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/visually-disabled.md

@@ -0,0 +1,11 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers.
+**Hint:** When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip.
+**Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
+
+```html
+<div class="w-[250px] h-[200px] pt-12">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
+    <sd-input label="Label" value="Visually disabled" visually-disabled></sd-input>
+  </sd-tooltip>
+</div>
+```

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

@@ -0,0 +1,80 @@
+## Overview
+
+`<sd-link>` — Used to allow users to navigate to another location or perform actions like downloading files.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-link, example: size
+- component: sd-link, example: as-link
+- component: sd-link, example: icon
+- component: sd-link, example: standalone
+- component: sd-link, example: disabled
+- component: sd-link, example: visually-disabled
+- component: sd-link, example: inverted
+
+### Key Properties
+
+- prop.standalone: boolean, default=false — Control the layout of icon and text within the component and the component's positioning.
+- prop.size: 'inherit'|'lg'|'sm', default='inherit' — The link's size.
+- prop.inverted: boolean, default=false — Inverts the link.
+- prop.href: string, default='' — When not set, the link will render as disabled.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the link as if it was disabled and enables aria-disabled
+- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is present.
+- prop.download: string|undefined — Tells the browser to download the linked file as this filename. Only used when `href` is present.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the link loses focus.
+- event.sd-focus: Emitted when the link gains focus.
+
+### Slots
+
+- slot.default: The default slot.
+- slot.icon-left: The icon to display on the left side of the link.
+- slot.icon-right: The icon to display on the right side of the link.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.icon-left: The container that wraps the left icon area.
+- part.label: The link's label.
+- part.icon-right: The container that wraps the right icon area.
+
+## Guidelines
+
+### Use Cases
+
+- Navigate to other pages or sections within the same page.
+- Link to external websites or resources, such as file downloads.
+- Include links within text blocks for references or citations.
+- Link to emails or phone numbers.
+
+### Rules
+
+### Link Text and Label
+
+- Be specific and use descriptive and concise link text that indicates the destination or action. For example, instead of "Click here for more information", use "Learn more about our services".
+- Avoid generic phrases like "Click here".
+- Display system icons before or after the link label when an action is actively executed as a result, such as opening a new window.
+
+### Behavior and Interaction
+
+- Do not use links for actions that should be performed by buttons (e.g., submitting forms, triggering modals).
+- Do not open links in new tabs without informing the user.
+- Avoid placing too many links close together to make sure they’re easy to click or tap.
+
+### Backgrounds
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Use descriptive link text that clearly conveys its purpose to screen reader users out of context.
+- Avoid having multiple links that point to the same URL within the same context, as this can be confusing for users.
+- Use the "visually disabled" attribute to keep disabled elements focusable, hoverable, and able to show tooltips, as they’re otherwise removed from the tab order and inaccessible to screen readers.

package/metadata/packages/components/sd-link/stories/as-link.md

@@ -0,0 +1,12 @@
+- Use the `href` attribute to make it a link instead of a button.
+- Use the `target` attribute to specify where to open the link.
+- Use the `download` attribute to tell the browser to download the linked file as this filename.
+
+```html
+<div class="flex gap-12">
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+    >Link</sd-link
+  ><sd-link href="https://union-investment.com" target="_blank">New Window</sd-link
+  ><sd-link href="./placeholders/src/images/collaboration.jpg" download>Download</sd-link>
+</div>
+```

package/metadata/packages/components/sd-link/stories/disabled.md

@@ -0,0 +1,7 @@
+Remove the `href` to disable the link.
+
+```html
+<div class="flex gap-12">
+  <sd-link>Disabled</sd-link>
+</div>
+```

package/metadata/packages/components/sd-link/stories/icon.md

@@ -0,0 +1,14 @@
+Use the `icon-left` and `icon-right` slots to add system icons to each side of the link. They automatically adapt the size.
+
+```html
+<div class="flex gap-12">
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" standalone>
+    <sd-icon name="system/image" slot="icon-left"></sd-icon>
+    Icon Left
+  </sd-link>
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" standalone>
+    Icon Right
+    <sd-icon name="system/image" slot="icon-right"></sd-icon>
+  </sd-link>
+</div>
+```

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

@@ -0,0 +1,7 @@
+Use the `inverted` attribute when displayed on primary background.
+
+```html
+<div class="flex gap-12 bg-primary p-4">
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" inverted>Inverted</sd-link>
+</div>
+```

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

@@ -0,0 +1,13 @@
+Use the `size` attribute to adjust the size of the link:
+
+- `inherit`(default): to adapt to the surrounding text
+- `lg`
+- `sm`
+
+```html
+<div class="flex gap-12">
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/">Inherit</sd-link>
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" size="lg">Large</sd-link>
+  <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" size="sm">Small</sd-link>
+</div>
+```

package/metadata/packages/components/sd-link/stories/standalone.md

@@ -0,0 +1,29 @@
+Use the `standalone` attribute to control the layout of the icon and text within the component.
+If true, the icon and text will be displayed side by side, each occupying its own column.
+If false or not provided, the icon will be displayed inline within the text.
+
+```html
+<div class="flex gap-12">
+  <div class="sd-prose">
+    <ul>
+      <li>
+        <sd-link href="http://union-investment.com" standalone>
+          <sd-icon name="system/home" slot="icon-left"></sd-icon>
+          Union Investment
+        </sd-link>
+      </li>
+      <li>
+        <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" standalone>
+          <sd-icon name="system/pen" slot="icon-left"></sd-icon>
+          Solid Design System
+        </sd-link>
+      </li>
+    </ul>
+
+    <p>
+      While the list above shows standalone links, we now will link to the
+      <sd-link href="https://cd.union-investment.de">CD Toolbox</sd-link> inside a paragraph.
+    </p>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-link/stories/visually-disabled.md

@@ -0,0 +1,17 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers.
+**Hint:** When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip.
+**Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
+
+```html
+<div class="flex gap-12 h-[100px] pt-12">
+  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm">
+    <sd-link
+      size="lg"
+      href="https://solid-design-system.fe.union-investment.de/docs/"
+      visually-disabled
+      class="visually-disabled-link"
+      >Visually Disabled</sd-link
+    >
+  </sd-tooltip>
+</div>
+```

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

@@ -0,0 +1,54 @@
+## Overview
+
+`<sd-loader>` — Used as a visual indicator with an animation that shows loading is in process.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-loader, example: default
+- component: sd-loader, example: variants
+- component: sd-loader, example: size
+
+### Key Properties
+
+- prop.color: 'primary'|'white'|'currentColor', default='currentColor' — The color of the loader.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+## Guidelines
+
+### Use Cases
+
+- Indicate that content is being loaded, such as when fetching data from a server or loading a new page.
+- Show ongoing background processes, like file uploads or data processing tasks.
+- Used within buttons or interactive elements to indicate that an action is being processed.
+- Apply to sections of a page that are loading independently, such as widgets or panels.
+- Display when a form is being submitted to show that the submission is in progress.
+
+### Rules
+
+### Content
+
+- Include a label or message to provide context about what is being loaded, especially if the loading time is long.
+
+### Behavior and Placement
+
+- Use for processes that take a short amount of time (typically under 4 seconds).
+- Apply within specific sections rather than blocking the entire page, unless absolutely necessary.
+- Place in a consistent location relative to the content it is loading.
+
+### Styling
+
+- Maintain consistency in size and style; avoid using loaders of varying sizes on the same page.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Assign role="status" or use a live region (e.g., aria-live="polite") to inform screen reader users of ongoing loading.
+- A loader shouldn’t itself be focusable or interactive, nor prevent from navigating to other parts of the page while loading continues.

package/metadata/packages/components/sd-loader/stories/default.md

@@ -0,0 +1,5 @@
+```html
+<div class="text-xl">
+  <sd-loader color="primary"></sd-loader>
+</div>
+```

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

@@ -0,0 +1,15 @@
+Use the CSS property `font-size` to scale the loader proportionally.
+
+```html
+<div class="flex gap-12 items-center">
+  <div style="font-size: 4rem">
+    <sd-loader color="primary"></sd-loader>
+  </div>
+  <div style="font-size: 2rem">
+    <sd-loader color="primary"></sd-loader>
+  </div>
+  <div style="font-size: inherit">
+    <sd-loader color="primary"></sd-loader>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-loader/stories/variants.md

@@ -0,0 +1,19 @@
+Use the `color` attribute to set the loader's color:
+
+- `currentColor` (default): used to inherit the `text-color` from the parent element
+- `primary`: used on light backgrounds
+- `white`: used on primary backgrounds
+
+```html
+<div class="flex items-center gap-12">
+  <div class="inline-flex text-xl text-neutral-500">
+    <sd-loader color="currentColor"></sd-loader>
+  </div>
+  <div class="inline-flex text-xl">
+    <sd-loader color="primary"></sd-loader>
+  </div>
+  <div class="inline-flex bg-primary p-12 text-xl">
+    <sd-loader color="white"></sd-loader>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-map-marker/info.md

@@ -0,0 +1,74 @@
+## Overview
+
+`<sd-map-marker>` — Used to show a location or a cluster of locations on a map.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-map-marker, example: variant
+- component: sd-map-marker, example: state
+- component: sd-map-marker, example: animated
+- component: sd-map-marker, example: slot
+- component: sd-map-marker, example: not-interactive
+- component: sd-map-marker, example: as-link
+
+### Key Properties
+
+- prop.variant: 'cluster'|'main'|'place', default='main' — The map-marker's variant.
+- prop.state: 'default'|'hover'|'active', default='default' — The map-marker's state.
+- prop.animated: boolean, default=false — The map-marker's is animated when displayed.
+- prop.notInteractive [attr: not-interactive]: boolean, default=false — Determines if the map-marker is interactive.
+- prop.href: string, default='' — When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is present.
+- prop.label: string, default='' — Only relevant when map-marker is interactive.
+  When set, it will be used to announce the name of the map-marker to screenreaders,
+  otherwise, screenreaders will announce the content inside the default slot.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the map marker loses focus.
+- event.sd-focus: Emitted when the map marker is focused.
+
+### Slots
+
+- slot.default: The marker's content.\
+
+### CSS Parts
+
+- part.base: The components' base wrapper.
+- part.marker: The markers' svg wrapper.
+- part.content: The container that wraps the default slot.
+- part.motion-wrapper: The container that wraps the motion animation.
+
+## Guidelines
+
+### Use Cases
+
+- Indicate individual locations on a map, such as offices, venues, or other points of interest.
+- Group individual locations into clusters at higher zoom levels, displaying the number of locations in the cluster.
+
+### Rules
+
+### Styling and Icons
+
+- Use logos or icons for place pins that can be easily identified.
+- Avoid using overly complex logos or icons that might confuse users.
+- Limit the variety of icons to prevent confusion about the meaning of markers.
+
+### Behavior and Interaction
+
+- Keep the main marker for the current or preset location visible at all times.
+- Ensure that only one main marker is active at any given moment.
+- Use clustering for high-density areas to enhance map readability.
+- Regularly update the marker data to reflect current information.
+
+### Accessibility
+
+- If interactive, provide an accessible name by adding a descriptive text to the ”default” slot and visually hide it if needed.
+- Offer alternative interactions or text-based listings of markers for users who cannot easily manipulate or see the map.
+- 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-map-marker/stories/animated.md

@@ -0,0 +1,13 @@
+Use the `animated` attribute to animate the marker.
+
+```html
+<div class="flex items-center gap-12">
+  <sd-map-marker class="animated-example" variant="main" state="default" animated="" not-interactive></sd-map-marker>
+</div>
+<script>
+  const marker = document.querySelector('.animated-example');
+  setInterval(() => {
+    marker.animated = !marker.animated;
+  }, 2000);
+</script>
+```

package/metadata/packages/components/sd-map-marker/stories/as-link.md

@@ -0,0 +1,13 @@
+- Use the `href` attribute to enable the link.
+- Use the `target` attribute to specify where to open the link.
+
+```html
+<div class="flex items-center gap-12">
+  <sd-map-marker
+    href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+    target="_blank"
+  >
+    <span class="sr-only">Solid Design System by Union Investment</span>
+  </sd-map-marker>
+</div>
+```

package/metadata/packages/components/sd-map-marker/stories/not-interactive.md

@@ -0,0 +1,11 @@
+Use the `not-interactive` attribute to render a marker that is not interactive.
+
+```html
+<div class="flex items-center gap-12">
+  <sd-map-marker not-interactive></sd-map-marker>
+  <sd-map-marker variant="place" not-interactive>
+    <sd-icon name="content/image"></sd-icon>
+  </sd-map-marker>
+  <sd-map-marker variant="cluster" not-interactive> 88 </sd-map-marker>
+</div>
+```

package/metadata/packages/components/sd-map-marker/stories/slot.md

@@ -0,0 +1,8 @@
+Use the `default` slot to include content in the marker.
+
+```html
+<sd-map-marker variant="place" class="slot-example">
+  <span class="slot slot--border h-8 w-8 -mt-2"></span>
+  <div class="sr-only">Pinned Place with slot</div>
+</sd-map-marker>
+```

package/metadata/packages/components/sd-map-marker/stories/state.md

@@ -0,0 +1,47 @@
+Use the `state` attribute to change the appearance of the marker:
+
+- `default`
+- `hover`: When the marker is hovered
+- `active`: When the marker is active
+
+```html
+<div class="flex gap-12">
+  <div class="flex flex-col space-y-5">
+    <sd-map-marker state="default">
+      <span class="sr-only">Pinned location with default state</span>
+    </sd-map-marker>
+    <sd-map-marker state="hover">
+      <span class="sr-only">Pinned location with hover state</span>
+    </sd-map-marker>
+    <sd-map-marker state="active">
+      <span class="sr-only">Pinned location with active state</span>
+    </sd-map-marker>
+  </div>
+
+  <div class="flex flex-col space-y-5">
+    <sd-map-marker state="default" variant="place">
+      <sd-icon name="content/image"></sd-icon>
+      <span class="sr-only">Pinned place with default state</span>
+    </sd-map-marker>
+    <sd-map-marker state="hover" variant="place">
+      <sd-icon name="content/image"></sd-icon>
+      <span class="sr-only">Pinned place with hover state</span>
+    </sd-map-marker>
+    <sd-map-marker state="active" variant="place">
+      <sd-icon name="content/image"></sd-icon>
+      <span class="sr-only">Pinned place with active state</span>
+    </sd-map-marker>
+  </div>
+
+  <div class="flex flex-col space-y-5">
+    <sd-map-marker state="default" variant="cluster">
+      <span class="sr-only">Cluster of locations</span>
+      88
+    </sd-map-marker>
+    <sd-map-marker state="hover" variant="cluster">
+      <span class="sr-only">Hovered Cluster of locations</span>
+      88
+    </sd-map-marker>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-map-marker/stories/variant.md

@@ -0,0 +1,21 @@
+Use the `variant` attribute to change the appearance of the marker:
+
+- `main` (default)
+- `place`: Used to show a location on the map
+- `cluster`: Used to show multiple locations on the map
+
+```html
+<div class="flex items-center gap-12">
+  <sd-map-marker>
+    <span class="sr-only">Pinned Location</span>
+  </sd-map-marker>
+  <sd-map-marker variant="place">
+    <sd-icon name="content/image"></sd-icon>
+    <span class="sr-only">Pinned Place</span>
+  </sd-map-marker>
+  <sd-map-marker variant="cluster">
+    88
+    <span class="sr-only">Locations</span>
+  </sd-map-marker>
+</div>
+```