@solid-design-system/mcp 0.0.1

package/metadata/packages/icons/sd-multi-theming/content.json

@@ -0,0 +1,27 @@
+[
+  {
+    "technicalId": "calculator",
+    "displayNameDe": "calculator",
+    "tags": []
+  },
+  {
+    "technicalId": "image",
+    "displayNameDe": "image",
+    "tags": []
+  },
+  {
+    "technicalId": "person-newspaper",
+    "displayNameDe": "person newspaper",
+    "tags": []
+  },
+  {
+    "technicalId": "podcast",
+    "displayNameDe": "podcast",
+    "tags": []
+  },
+  {
+    "technicalId": "video",
+    "displayNameDe": "video",
+    "tags": []
+  }
+]

package/metadata/packages/icons/sd-multi-theming/system.json

@@ -0,0 +1,307 @@
+[
+  {
+    "technicalId": "anchor-link",
+    "displayNameDe": "anchor link",
+    "tags": []
+  },
+  {
+    "technicalId": "arrow-left",
+    "displayNameDe": "arrow left",
+    "tags": []
+  },
+  {
+    "technicalId": "arrow-right",
+    "displayNameDe": "arrow right",
+    "tags": []
+  },
+  {
+    "technicalId": "calendar",
+    "displayNameDe": "calendar",
+    "tags": []
+  },
+  {
+    "technicalId": "shopping-cart",
+    "displayNameDe": "shopping cart",
+    "tags": []
+  },
+  {
+    "technicalId": "chevron-bottom",
+    "displayNameDe": "chevron bottom",
+    "tags": []
+  },
+  {
+    "technicalId": "chevron-left",
+    "displayNameDe": "chevron left",
+    "tags": []
+  },
+  {
+    "technicalId": "chevron-right",
+    "displayNameDe": "chevron right",
+    "tags": []
+  },
+  {
+    "technicalId": "chevron-small-left",
+    "displayNameDe": "chevron small left",
+    "tags": []
+  },
+  {
+    "technicalId": "chevron-small-right",
+    "displayNameDe": "chevron small right",
+    "tags": []
+  },
+  {
+    "technicalId": "chevron-top",
+    "displayNameDe": "chevron top",
+    "tags": []
+  },
+  {
+    "technicalId": "chevrons-small-left",
+    "displayNameDe": "chevrons small left",
+    "tags": []
+  },
+  {
+    "technicalId": "chevrons-small-right",
+    "displayNameDe": "chevrons small right",
+    "tags": []
+  },
+  {
+    "technicalId": "clock",
+    "displayNameDe": "clock",
+    "tags": []
+  },
+  {
+    "technicalId": "close-circle",
+    "displayNameDe": "close circle",
+    "tags": []
+  },
+  {
+    "technicalId": "close",
+    "displayNameDe": "close",
+    "tags": []
+  },
+  {
+    "technicalId": "confirm-circle",
+    "displayNameDe": "confirm circle",
+    "tags": []
+  },
+  {
+    "technicalId": "dashboard",
+    "displayNameDe": "dashboard",
+    "tags": []
+  },
+  {
+    "technicalId": "download",
+    "displayNameDe": "download",
+    "tags": []
+  },
+  {
+    "technicalId": "e-mail",
+    "displayNameDe": "e mail",
+    "tags": []
+  },
+  {
+    "technicalId": "exclamation-circle",
+    "displayNameDe": "exclamation circle",
+    "tags": []
+  },
+  {
+    "technicalId": "external-link",
+    "displayNameDe": "external link",
+    "tags": []
+  },
+  {
+    "technicalId": "eye-crossed-out",
+    "displayNameDe": "eye crossed out",
+    "tags": []
+  },
+  {
+    "technicalId": "eye-open",
+    "displayNameDe": "eye-open",
+    "tags": []
+  },
+  {
+    "technicalId": "file-pdf",
+    "displayNameDe": "file pdf",
+    "tags": []
+  },
+  {
+    "technicalId": "slider",
+    "displayNameDe": "slider",
+    "tags": []
+  },
+  {
+    "technicalId": "folder",
+    "displayNameDe": "folder",
+    "tags": []
+  },
+  {
+    "technicalId": "globe",
+    "displayNameDe": "globe",
+    "tags": []
+  },
+  {
+    "technicalId": "highlighter",
+    "displayNameDe": "highlighter",
+    "tags": []
+  },
+  {
+    "technicalId": "home",
+    "displayNameDe": "home",
+    "tags": []
+  },
+  {
+    "technicalId": "image",
+    "displayNameDe": "image",
+    "tags": []
+  },
+  {
+    "technicalId": "info-circle",
+    "displayNameDe": "info circle",
+    "tags": []
+  },
+  {
+    "technicalId": "list",
+    "displayNameDe": "list",
+    "tags": []
+  },
+  {
+    "technicalId": "lock-open",
+    "displayNameDe": "lock open",
+    "tags": []
+  },
+  {
+    "technicalId": "lock-locked",
+    "displayNameDe": "lock locked",
+    "tags": []
+  },
+  {
+    "technicalId": "log-out",
+    "displayNameDe": "log out",
+    "tags": []
+  },
+  {
+    "technicalId": "magnifying-glass",
+    "displayNameDe": "magnifying glass",
+    "tags": []
+  },
+  {
+    "technicalId": "menu",
+    "displayNameDe": "menu",
+    "tags": []
+  },
+  {
+    "technicalId": "minus-circle",
+    "displayNameDe": "minus circle",
+    "tags": []
+  },
+  {
+    "technicalId": "minus",
+    "displayNameDe": "minus",
+    "tags": []
+  },
+  {
+    "technicalId": "more-functions",
+    "displayNameDe": "more functions",
+    "tags": []
+  },
+  {
+    "technicalId": "mute",
+    "displayNameDe": "mute",
+    "tags": []
+  },
+  {
+    "technicalId": "pause",
+    "displayNameDe": "pause",
+    "tags": []
+  },
+  {
+    "technicalId": "pen",
+    "displayNameDe": "pen",
+    "tags": []
+  },
+  {
+    "technicalId": "phone",
+    "displayNameDe": "phone",
+    "tags": []
+  },
+  {
+    "technicalId": "play",
+    "displayNameDe": "play",
+    "tags": []
+  },
+  {
+    "technicalId": "plus-circle",
+    "displayNameDe": "plus circle",
+    "tags": []
+  },
+  {
+    "technicalId": "position",
+    "displayNameDe": "position",
+    "tags": []
+  },
+  {
+    "technicalId": "print",
+    "displayNameDe": "print",
+    "tags": []
+  },
+  {
+    "technicalId": "reload",
+    "displayNameDe": "reload",
+    "tags": []
+  },
+  {
+    "technicalId": "risk",
+    "displayNameDe": "risk",
+    "tags": []
+  },
+  {
+    "technicalId": "share",
+    "displayNameDe": "share",
+    "tags": []
+  },
+  {
+    "technicalId": "shopping-cart-crossed-out",
+    "displayNameDe": "shopping cart crossed out",
+    "tags": []
+  },
+  {
+    "technicalId": "star-empty",
+    "displayNameDe": "star empty",
+    "tags": []
+  },
+  {
+    "technicalId": "star-filled",
+    "displayNameDe": "star filled",
+    "tags": []
+  },
+  {
+    "technicalId": "table",
+    "displayNameDe": "table",
+    "tags": []
+  },
+  {
+    "technicalId": "transcript",
+    "displayNameDe": "transcript",
+    "tags": []
+  },
+  {
+    "technicalId": "user",
+    "displayNameDe": "user",
+    "tags": []
+  },
+  {
+    "technicalId": "volume",
+    "displayNameDe": "volume",
+    "tags": []
+  },
+  {
+    "technicalId": "warning",
+    "displayNameDe": "warning",
+    "tags": []
+  },
+  {
+    "technicalId": "website",
+    "displayNameDe": "website",
+    "tags": []
+  }
+]

package/metadata/packages/icons/sd-status-assets/status.json

@@ -0,0 +1,37 @@
+[
+  {
+    "technicalId": "status-check",
+    "displayNameDe": "Check",
+    "tags": []
+  },
+  {
+    "technicalId": "status-exclamation",
+    "displayNameDe": "Exclamation",
+    "tags": []
+  },
+  {
+    "technicalId": "status-close",
+    "displayNameDe": "Close",
+    "tags": []
+  },
+  {
+    "technicalId": "status-info",
+    "displayNameDe": "Info",
+    "tags": []
+  },
+  {
+    "technicalId": "status-clock",
+    "displayNameDe": "Clock",
+    "tags": []
+  },
+  {
+    "technicalId": "status-minus",
+    "displayNameDe": "Minus",
+    "tags": []
+  },
+  {
+    "technicalId": "status-questionmark",
+    "displayNameDe": "Questionmark",
+    "tags": []
+  }
+]

package/metadata/packages/quickstart/docs/quickstart.md

@@ -0,0 +1,50 @@
+# Quickstart
+
+To develop with Solid Design System, you need the following three packages:
+
+- `@solid-design-system/components`: Component library with web components.
+- `@solid-design-system/styles`: Smaller components built with CSS.
+- `@solid-design-system/tokens`: Tokens and themes for consistent design.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="npm" variant="container"> NPM </sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="cdn" variant="container"> CDN </sd-tab>
+  <sd-tab-panel name="npm">
+    ```bash
+    pnpm i @solid-design-system/components @solid-design-system/styles @solid-design-system/tokens
+    ```
+
+    ```js
+    import '@solid-design-system/tokens/dist/themes/ui-light/ui-light.css';
+    import '@solid-design-system/styles/dist/solid-styles.css';
+    import '@solid-design-system/components/dist/solid-components.css';
+    import '@solid-design-system/components/dist/solid-components.js';
+    ```
+
+  </sd-tab-panel>
+  <sd-tab-panel name="cdn">
+    ```html
+    <link rel="stylesheet" href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css" />
+    <link rel="stylesheet" href="https://solid-design-system.fe.union-investment.de/styles/%STYLES-VERSION%/cdn/solid-styles.css" />
+    <link rel="stylesheet" href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.css" />
+    <script type="module" src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.js"></script>
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+Now you are ready to use Solid Design System in your project!
+
+```html
+<div class="sd-prose">
+  <h2>Welcome to Solid Design System!</h2>
+  <sd-button variant="primary">Click me!</sd-button>
+</div>
+```
+
+Ensure to check out the installation docs for tokens, styles, and components to get more details on prerequisites, multi-theming, versioning, setup and usage:
+
+- [Tokens Installation](?path=/docs/packages-tokens-installation--docs)
+- [Styles Installation](?path=/docs/packages-styles-installation--docs)
+- [Components Installation](?path=/docs/packages-components-installation--docs)

package/metadata/packages/styles/docs/installation.md

@@ -0,0 +1,161 @@
+# Installation
+
+You can load Solid via CDN or by installing it locally.
+
+<sd-notification type="info" open id="versioning-info">
+  The `components`, `styles`, and `tokens` packages now always share the same version. We use fixed versioning to keep
+  them fully in sync, so every release updates all three packages, even if only one of them changed. Make sure to
+  install or update them using the same version number.
+</sd-notification>
+
+## Prerequisites
+
+### Theme
+
+Solid Styles come without any theme or font by default. Ensure to follow the installation guidelines from [@solid-design-system/tokens](?path=/docs/packages-tokens-installation--docs) to include a fitting theme in your project.
+
+### Versioned vs. unversioned styles
+
+When using styles from Solid Design System in microfrontends, versioned components can be used. While their are strongly recommended for `@solid-design-system/styles`,
+versioning is less important for `@solid-design-system/styles` due to the lightweight approach and given encapsulation in ShadowDOMs.
+Including version numbers in component names provides more control over updates and prevents collisions when different versions of the same component are used simultaneously.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned"> Unversioned </sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned"> Versioned </sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <mark class="sd-mark">Lorem ipsum</mark>
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <mark class="sd-%DASHED-STYLES-VERSION%-mark">Lorem ipsum</mark>
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+## CDN Installation
+
+### Bundle
+
+The CDN Bundle registers all Solid elements up front. Note that, if you're only using a handful of components, it could be more efficient [cherry pick](#cherry-picking) components if you want to load specific ones up front.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/styles/%STYLES-VERSION%/cdn/solid-styles.css"
+    />
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/styles/%STYLES-VERSION%/cdn-versioned/solid-styles.css"
+    />
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+## npm installation
+
+If you don't want to use the CDN, you can install Solid Styles from npm with the following command.
+
+```bash
+npm install @solid-design-system/styles
+```
+
+It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/solid` that serves static files from `node_modules/@solid-design-system/styles`.
+
+Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <link rel="stylesheet" href="/solid/dist/solid-styles.css" />
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <link rel="stylesheet" href="/solid/dist-versioned/solid-styles.css" />
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+Alternatively, you can use a bundler.
+
+## Cherry Picking
+
+Cherry picking can be done from [the CDN](#cdn-installation) or from [npm](#npm-installation). This approach will load only the styles you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual style.
+
+Here's an example that loads only the mark style that would work in Vite.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+  ```html
+  <script type="module">
+    import '@solid-design-system/styles/dist/modules/mark.css';
+
+    // .sd-mark is ready to use!
+
+  </script>
+  ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+  ```html
+  <script type="module">
+
+    import '@solid-design-system/styles/dist-versioned/modules/mark.css';
+
+    // .sd-%DASHED-COMPONENTS-VERSION%-mark is ready to use!
+
+  </script>
+  ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+### Prose
+
+tbd.
+
+## The difference between CDN and npm
+
+CDN links all start with `/cdn/<path>` and npm imports use `/dist/<path>`. The `/cdn` files are already minified, while `npm` can be easily patched.
+
+TL;DR:
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+
+    - `@solid-design-system/styles/cdn` is for CDN users
+    - `@solid-design-system/styles/dist` is for npm users
+
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+
+    - `@solid-design-system/styles/cdn-versioned` is for CDN users
+    - `@solid-design-system/styles/dist-versioned` is for npm users
+
+  </sd-tab-panel>
+</sd-tab-group>

package/metadata/packages/styles/docs/usage.md

@@ -0,0 +1,11 @@
+# Usage
+
+We provide a set of CSS classes that can be used to style your application. They follow the [BEM](http://getbem.com/) methodology and are mainly used when building a full-fledged component would be way too much or could harm a11y.
+
+You can use them as any other CSS class:
+
+```html
+<span class="sd-meta sd-meta--pipe sd-meta--size-sm">Lorem Ipsum</span>
+```
+
+Have in mind that we're using BEM methodology – therefore modifiers (like `sd-meta--pipe` and `sd-meta--size-sm`) always need the base class (like `sd-meta`).

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

@@ -0,0 +1,49 @@
+## Overview
+
+`sd-chip` – Used as a small, non-interactive label that represents a status, property or meta-data.
+
+## API
+
+### Examples
+
+Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
+
+- sd-chip/variants
+
+## Guidelines
+
+### Use Cases
+
+- Display selected items or categories within sd-teaser, such as chosen filters, tags, or interests.
+- Indicate attributes of items, such as “New,” “Featured,” or “Verified”.
+- Communicate user roles, like “Moderator” or “Admin”.
+
+### Rules
+
+### Label and Styling
+
+- Keep chip text short and easily scannable. Long text disrupts layouts and diminishes the chip’s visual impact.
+- Avoid overuse. Too many chips in one area can create visual clutter.
+- 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 and [sd-flag](./?path=/docs/styles-sd-flag--docs) 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
+
+- Since chips are non-interactive, ensure they are marked in a way that prevents them from receiving focus.
+- If the chip text is already conveyed in the teaser body, consider hiding the chip from screen readers using aria-hidden="true" to prevent repeating the same information.
+- If the chip adds unique context, it should be part of the teaser’s overall accessible description.
+
+### Related Templates
+
+- chip--docs
+- teaser--docs
+- status-badge--docs
+
+Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-chip/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-chip',
+component: 'sd-chip',
+tags: ['!dev', 'autodocs'],
+args: overrideArgs({ type: 'slot', name: 'default', value: 'Chip' }),
+parameters: {
+...parameters,
+design: {
+type: 'figma',
+url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2106-26033&t=yS054qhxgjorbMDv-4'
+}
+},
+argTypes
+};
+export const Default = {
+render: (args: any) => {
+return generateTemplate({
+options: { templateContent: '<span class="%CLASSES%">%SLOT%</span>' },
+args
+});
+}
+};
+/\*_
+Use the `sd-chip--_` classes for alternative appearances:
+
+- primary-200 is the default appearance
+- `sd-chip--primary-300`
+- `sd-chip--primary-500`
+- `sd-chip--white`
+
+```html
+<div class="flex gap-12">
+  <div class="sd-chip">primary-200</div>
+  <div class="sd-chip sd-chip--primary-300">primary-300</div>
+  <div class="sd-chip sd-chip--primary-500">primary-500</div>
+  <div class="sd-chip sd-chip--white">white</div>
+</div>
+```