@solid-design-system/mcp 7.0.0-next.1 → 7.0.0-next.11

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

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

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

@@ -6,33 +6,15 @@ To develop with Solid Design System, you need the following three packages:
 - `@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>
+```bash
+pnpm i @solid-design-system/components @solid-design-system/styles @solid-design-system/tokens
+```
+
+```js
+
+```
+
+For environments without a bundler (e.g. a CMS), see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
 
 Now you are ready to use Solid Design System in your project!
 

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

@@ -1,8 +1,8 @@
 # Installation
 
-You can load Solid via CDN or by installing it locally.
+Solid Styles is installed via npm. For environments without a bundler, see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
 
-<sd-notification type="info" open id="versioning-info">
+<sd-notification variant="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.
@@ -37,38 +37,9 @@ Including version numbers in component names provides more control over updates
   </sd-tab-panel>
 </sd-tab-group>
 
-## CDN Installation
+## 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.
+Install Solid Styles from npm:
 
 ```bash
 npm install @solid-design-system/styles
@@ -99,7 +70,7 @@ 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.
+Cherry picking loads only the styles you need up front, 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.
 
@@ -135,27 +106,8 @@ Here's an example that loads only the mark style that would work in Vite.
 
 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">
+## cdn/ vs dist/
 
-    - `@solid-design-system/styles/cdn-versioned` is for CDN users
-    - `@solid-design-system/styles/dist-versioned` is for npm users
+The package ships both `cdn/` and `dist/` artifacts. The `/cdn` files are already minified. The `/dist` files can be more easily patched and are better suited for bundlers.
 
-  </sd-tab-panel>
-</sd-tab-group>
+Use `/dist` with a bundler (recommended). Use `/cdn` only when hosting on your own CDN without build tooling — see [CDN Hosting](?path=/docs/general-cdn-hosting--docs).

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

@@ -8,13 +8,17 @@
 
 Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
 
-- sd-chip/variants
+- sd-chip/color
+- sd-chip/shade
+- sd-chip/size
+- sd-chip/outlined
+- sd-chip/sharp
 
 ## Guidelines
 
 ### Use Cases
 
-- Display selected items or categories within sd-teaser, such as chosen filters, tags, or interests.
+- Display selected items or categories within [sd-teaser](./?path=/docs/components-sd-teaser--docs), such as chosen filters, tags, or interests.
 - Indicate attributes of items, such as “New,” “Featured,” or “Verified”.
 - Communicate user roles, like “Moderator” or “Admin”.
 
@@ -24,15 +28,15 @@ Use the styles tool (with `style` + `example` args) to retrieve the HTML for any
 
 - 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.
+- Use the “&--color” and “&--shade” properties to apply the color that best works on the background, and “&--outlined” for a border-only style, keeping it consistent throughout the product.
 
-### Chips and Flags
+### Chips and Tags
 
-- 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).
+- Use only as a non-interactive element; for interactive elements (e.g., a dynamic filter), use [sd-tag](./?path=/docs/components-sd-tag--docs) instead.
 
-### Chips and Tags
+### Corner Style
 
-- 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.
+- Use sharp="true" when sd-chip sits directly on top of an image or a container with no padding, so the rounded corners aren’t cut off at the edge. For all other placements, use sharp="true".
 
 ### Accessibility
 
@@ -43,7 +47,7 @@ Use the styles tool (with `style` + `example` args) to retrieve the HTML for any
 ### Related Templates
 
 - chip--docs
-- teaser--docs
+- tab-group--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 → color.md}

@@ -22,19 +22,17 @@ args
 });
 }
 };
-/\*_
-Use the `sd-chip--_` classes for alternative appearances:
+/**
+Use the `&--color-*` classes to switch between color families:
 
-- primary-200 is the default appearance
-- `sd-chip--primary-300`
-- `sd-chip--primary-500`
-- `sd-chip--white`
+- sd-chip--color-primary is the default appearance
+- `sd-chip--color-neutral`
+- `sd-chip--color-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 class="flex gap-12 items-center">
+  <div class="sd-chip sd-chip--color-primary">primary</div>
+  <div class="sd-chip sd-chip--color-neutral">neutral</div>
+  <div class="sd-chip sd-chip--color-white">white</div>
 </div>
 ```

package/metadata/packages/styles/sd-chip/stories/outlined.md

@@ -0,0 +1,8 @@
+Use the `sd-chip--outline` class to switch between a filled or border-only style.
+
+```html
+<div class="flex gap-12 items-center">
+  <div class="sd-chip">filled</div>
+  <div class="sd-chip sd-chip--outline">outlined</div>
+</div>
+```

package/metadata/packages/styles/sd-chip/stories/shade.md

@@ -0,0 +1,17 @@
+Use the `&--shade-*` classes to select an emphasis level within the chosen color:
+
+- sd-chip--shade-subtle is the default appearance
+- `sd-chip--shade-low`
+- `sd-chip--shade-medium`
+- `sd-chip--shade-high`
+- `sd-chip--shade-none` (white only)
+
+```html
+<div class="flex gap-12 items-center">
+  <div class="sd-chip sd-chip--shade-subtle">subtle</div>
+  <div class="sd-chip sd-chip--shade-low">low</div>
+  <div class="sd-chip sd-chip--shade-medium">medium</div>
+  <div class="sd-chip sd-chip--shade-high">high</div>
+  <div class="sd-chip sd-chip--shade-none">none</div>
+</div>
+```