@solid-design-system/mcp 7.0.0-next.8 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 7.0.0
+
+### Major Changes
+
+- Consolidated `sd-chip` and `sd-flag`: _[`#3267`](https://github.com/solid-design-system/solid/pull/3267) [`12db708`](https://github.com/solid-design-system/solid/commit/12db708ea227bc2ce2a7835d12190ee1ae40f891) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
+
+  - Removed the `sd-flag` style.
+  - Added `sd-chip--color-{primary,neutral,white}`, `sd-chip--shade-{subtle,low,medium,high}`, `sd-chip--size-{sm,lg}`, `sd-chip--outline` and `sd-chip--sharp` classes.
+
+### Patch Changes
+
+- Fix versioned icons to work with next versions. _[`#3186`](https://github.com/solid-design-system/solid/pull/3186) [`30af3ad`](https://github.com/solid-design-system/solid/commit/30af3ad6d2e8daebeaa9d6a863fdd5794a015da9) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
+
+## 7.0.0-next.12
+
+## 7.0.0-next.11
+
+## 7.0.0-next.10
+
+## 7.0.0-next.9
+
 ## 7.0.0-next.8
 
 ### Major Changes

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

@@ -1,8 +1,8 @@
 # Installation
 
-You can load Solid Components via CDN or by installing it locally.
+Solid Components 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.
@@ -40,98 +40,9 @@ Keep the following in mind for nested components:
 - _Slotted components_, which are added by your app or website, are not automatically versioned. You need to version them yourself if necessary.
 - _Nested components_, which are generated by the component itself, are automatically versioned (e.g., `sd-%DASHED-COMPONENTS-VERSION%-button` will generate an `sd-%DASHED-COMPONENTS-VERSION%-spinner` when in the loading state).
 
-## CDN Installation
+## Installation
 
-### Bundle
-
-The bundle registers all Solid Components in a single file. If you're using many Solid Components, this is the most performant way to load and hydrate them. Still, you should ensure that other applications are not loading components with the same tag names via an additional CDN or npm package. This therefore makes most sense in e. g. a CMS context.
-You can use the following script tag to load all components:
-
-<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/components/%COMPONENTS-VERSION%/cdn/solid-components.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
-    />
-    <script
-      type="module"
-      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.bundle.js"
-    ></script>
-    ```
-  </sd-tab-panel>
-  <sd-tab-panel name="versioned">
-    ```html
-    <link
-      rel="stylesheet"
-      href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
-    />
-    <script
-      type="module"
-      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.bundle.js"
-    ></script>
-    ```
-  </sd-tab-panel>
-</sd-tab-group>
-
-### ESM
-
-The CDN loader 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/components/%COMPONENTS-VERSION%/cdn/solid-components.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.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-panel name="versioned">
-    ```html
-    <link
-      rel="stylesheet"
-      href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
-    />
-    <script
-      type="module"
-      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.js"
-    ></script>
-    ```
-  </sd-tab-panel>
-</sd-tab-group>
-
-## npm installation
-
-If you don't want to use the CDN, you can install Solid Components from npm with the following command.
+Install Solid Components from npm:
 
 ```bash
 npm install @solid-design-system/components @solid-design-system/tokens
@@ -166,7 +77,7 @@ Alternatively, [you can use a bundler](#bundling).
 
 ## Cherry Picking
 
-Cherry picking can be done from [the CDN](#cdn-installation) or from [npm](#npm-installation). This approach will load only the components 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 component.
+Cherry picking loads only the components you need up front, limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
 
 Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Solid is in.
 
@@ -209,7 +120,7 @@ You can copy and paste the code to import a component from the "Importing" secti
 
 ## Bundling
 
-Solid Components are distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
+Solid Components are distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. You can optimize your imports with a bundler.
 
 To use Solid with a bundler, first install Solid along with your bundler of choice.
 
@@ -245,27 +156,8 @@ Once your bundler is configured, you'll be able to import Solid components and u
 
 > Component modules include side effects for registration purposes. Because of this, importing directly from `@solid-design-system/components` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.
 
-## The difference between CDN and npm
+## cdn/ vs dist/
 
-CDN links all start with `/cdn/<path>` and npm imports use `/dist/<path>`. The `/cdn` files are bundled separately from the `/dist` files. The `/cdn` files come pre-bundled, which means all dependencies are inlined so you do not need to worry about loading additional libraries. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently deduplicate dependencies, resulting in smaller bundles and optimal code sharing.
+The package ships both `cdn/` and `dist/` artifacts. The `/cdn` files are pre-bundled with all dependencies inlined. The `/dist` files are not pre-bundled, allowing your bundler to deduplicate shared dependencies for a smaller total bundle.
 
-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/components/cdn` is for CDN users
-    - `@solid-design-system/components/dist` is for npm users
-
-  </sd-tab-panel>
-  <sd-tab-panel name="versioned">
-
-    - `@solid-design-system/components/cdn-versioned` is for CDN users
-    - `@solid-design-system/components/dist-versioned` is for npm users
-
-  </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/components/sd-dialog/stories/headline.md

@@ -8,7 +8,9 @@ Use the `headline` attribute to set the headline of the dialog. If you need to u
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
     </p>
-    <sd-button slot="footer">Button</sd-button>
+    <div slot="footer" class="flex sm:justify-end gap-4">
+      <sd-button>Button</sd-button>
+    </div>
   </sd-dialog>
 </div>
 <script type="module">

package/metadata/packages/components/sd-dialog/stories/no-close-button.md

@@ -9,7 +9,9 @@ Use the `no-close-button` attribute to hide the close button in the dialog.
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
     </p>
-    <sd-button class="close-button" slot="footer" variant="primary">Button</sd-button>
+    <div slot="footer" class="flex sm:justify-end gap-4">
+      <sd-button class="close-button" variant="primary">Button</sd-button>
+    </div>
   </sd-dialog>
 </div>
 

package/metadata/packages/components/sd-dialog/stories/open.md

@@ -61,7 +61,9 @@ Use the `open` attribute to show the dialog.
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
     </p>
-    <sd-button slot="footer">Button</sd-button>
+    <div slot="footer" class="flex sm:justify-end gap-4">
+      <sd-button>Button</sd-button>
+    </div>
   </sd-dialog>
 </div>
 <script type="module">

package/metadata/packages/components/sd-icon/stories/custom-libraries.md

@@ -16,7 +16,7 @@ Here's an example that registers an icon library located in the `/assets/icons`
 If you use the IIFE bundle, you have to access the `registerIconLibrary()` function from the `SolidComponents` global.
 
 ```html
-<script src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
+<script src="https://your-cdn.example.com/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
 <script>
   const { registerIconLibrary } = window['SolidComponents'];
   registerIconLibrary('my-icons', {

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

@@ -19,8 +19,8 @@ Solid ships with three public icon libraries, `default`, `sd-status-assets`, and
     <h3 class="sd-headline sd-headline--size-base mb-4">Status Library</h3>
     <div class="flex gap-6">
       <sd-icon color="primary" library="sd-status-assets" name="status-check"></sd-icon>
-      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
       <sd-icon color="primary" library="sd-status-assets" name="status-close"></sd-icon>
+      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
     </div>
   </div>
 

package/metadata/packages/components/sd-menu/stories/grouping.md

@@ -4,7 +4,7 @@ Use dividers to group menu-items in a menu.
 <sd-dropdown distance="4" rounded>
   <sd-button variant="secondary" slot="trigger">
     Menu
-    <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+    <sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
   </sd-button>
   <sd-menu>
     <sd-menu-item>Menu item 1</sd-menu-item>

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

@@ -44,7 +44,7 @@ return html` <div class="h-[350px]">
 <sd-dropdown distance="4" rounded open>
 <sd-button variant="secondary" slot="trigger">
 Menu
-<sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+<sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
 </sd-button>
 ${generateTemplate({
 args

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/templates/chip.md

@@ -3,33 +3,90 @@ name: chip
 title: Chip
 components:
   - sd-chip
-  - sd-chip--primary-200
-  - sd-chip--primary-300
-  - sd-chip--primary-500
-  - sd-chip--white
+  - sd-chip--color-neutral
+  - sd-chip--color-white
+  - sd-chip--outline
+  - sd-chip--shade-high
+  - sd-chip--shade-low
+  - sd-chip--shade-medium
+  - sd-chip--sharp
+  - sd-chip--size-lg
 version: 1.0.0
 ---
 
 ## Template: Background Options
 
 ```html
-<div class="grid grid-cols-2 grid-rows-2">
-  <div class="bg-white p-4 border border-neutral-200">
-    <span class="sd-chip sd-chip--primary-200">primary-200</span>
+<div class="grid grid-col-1 sm:grid-cols-3 gap-px bg-neutral-400 border border-neutral-400">
+  <div class="bg-white py-6 px-8 flex flex-col gap-2 items-start min-h-32">
+    <span class="sd-chip">primary-subtle</span>
+    <span class="sd-chip sd-chip--color-neutral">neutral-subtle</span>
   </div>
-  <div class="bg-primary-100 p-4">
-    <span class=" sd-chip sd-chip--primary-300">primary-300</span>
+  <div class="bg-primary-100 py-6 px-8 min-h-32">
+    <span class="sd-chip sd-chip--shade-low">primary-low</span>
   </div>
-  <div class="bg-primary p-4">
-    <span class="sd-chip sd-chip--primary-500">primary-500</span>
+  <div class="bg-neutral-100 py-6 px-8 min-h-32">
+    <span class="sd-chip sd-chip--color-neutral sd-chip--shade-low">neutral-low</span>
   </div>
-  <div slot="media" class="relative">
+  <div class="bg-primary py-6 px-8 min-h-32">
+    <span class="sd-chip sd-chip--shade-high">primary-high</span>
+  </div>
+  <div class="relative col-span-1 sm:col-span-2 py-6 px-8 min-h-32">
     <img
-      class="aspect-video object-cover"
+      class="absolute inset-0 w-full h-full object-cover"
       src="./placeholders/images/coffeeshop.jpg"
-      alt="A group of people sitting in a coffee shop"
+      alt="Four young people sit around a café table laughing, while one of them looks at a tablet."
     />
-    <span class="absolute top-3 left-4 sd-chip sd-chip--white">white</span>
+    <div class="relative">
+      <span class="sd-chip sd-chip--color-white">white</span>
+    </div>
+  </div>
+</div>
+
+<div class="grid grid-col-1 sm:grid-cols-3 gap-px bg-neutral-400 border border-neutral-400 mt-8">
+  <div class="bg-white py-6 flex flex-col gap-4 items-end min-h-32">
+    <span class="sd-chip sd-chip--shade-low sd-chip--size-lg sd-chip--sharp">primary-low</span>
+    <span class="sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg sd-chip--sharp"> neutral-low </span>
+  </div>
+  <div class="bg-primary-100 py-6 min-h-32 relative">
+    <span class="sd-chip sd-chip--shade-medium sd-chip--size-lg sd-chip--sharp absolute right-0">primary-medium</span>
+  </div>
+  <div class="bg-neutral-100 py-6 min-h-32 relative">
+    <span class="sd-chip sd-chip--color-neutral sd-chip--shade-medium sd-chip--size-lg sd-chip--sharp absolute right-0"
+      >neutral-medium</span
+    >
+  </div>
+  <div class="bg-primary min-h-32 py-6 relative">
+    <span class="sd-chip sd-chip--shade-high sd-chip--size-lg sd-chip--sharp absolute right-0">primary-high</span>
+  </div>
+  <div class="relative col-span-1 sm:col-span-2 py-6 min-h-32">
+    <img
+      class="absolute inset-0 w-full h-full object-cover"
+      src="./placeholders/images/coffeeshop.jpg"
+      alt="Four young people sit around a café table laughing, while one of them looks at a tablet."
+    />
+    <div class="relative">
+      <span class="sd-chip sd-chip--color-neutral sd-chip--size-lg sd-chip--sharp absolute right-0"
+        >neutral-subtle</span
+      >
+    </div>
+  </div>
+</div>
+```
+
+## Template: Background Options Outlined
+
+```html
+<div class="grid grid-col-1 sm:grid-cols-3 gap-px bg-neutral-400 border border-neutral-400 mt-4">
+  <div class="bg-white py-6 px-8 flex flex-col gap-2 items-start min-h-32">
+    <span class="sd-chip sd-chip--shade-medium sd-chip--outline">primary-medium</span>
+    <span class="sd-chip sd-chip--color-neutral sd-chip--shade-medium sd-chip--outline">neutral-medium</span>
+  </div>
+  <div class="bg-primary-100 py-6 px-8 min-h-32">
+    <span class="sd-chip sd-chip--shade-medium sd-chip--outline">primary-medium</span>
+  </div>
+  <div class="bg-neutral-100 py-6 px-8 min-h-32">
+    <span class="sd-chip sd-chip--color-neutral sd-chip--shade-medium sd-chip--outline">neutral-medium</span>
   </div>
 </div>
 ```

package/metadata/packages/templates/dialog.md

@@ -18,16 +18,6 @@ version: 1.0.0
 ## Template: Dialog with Button Group
 
 ```html
-<!-- TODO: remove once this bugfix is addressed: https://github.com/solid-design-system/solid/issues/1325 -->
-<style>
-  @media (min-width: 414px) {
-    sd-dialog::part(footer) {
-      width: 100%;
-      margin: 0;
-    }
-  }
-</style>
-
 <sd-button id="drawer-trigger">Open Dialog</sd-button>
 <sd-dialog id="dialog" open>
   <span slot="headline" class="sd-headline sd-headline--size-3xl">Cancel your subscription?</span>

package/metadata/packages/templates/menu.md

@@ -64,7 +64,7 @@ version: 1.0.0
 <sd-dropdown distance="4" rounded stay-open-on-select>
   <sd-button variant="secondary" slot="trigger">
     Menu
-    <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+    <sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
   </sd-button>
   <sd-menu>
     <sd-menu-item type="checkbox">Account overview</sd-menu-item>

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

@@ -2,7 +2,7 @@
 
 This page guides you through installing and setting up the `@solid-design-system/tokens` package to use themes and/or design tokens in your project.
 
-<sd-notification type="info" open>
+<sd-notification variant="info" open>
   The `components`, `styles`, and `tokens` packages 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.
@@ -23,29 +23,12 @@ npm install @solid-design-system/tokens
 
 ## Import a theme
 
-Load at least one theme — either via NPM import or a CDN `<link>` tag. This only needs to be done **once per document**. Every component and embedded consumer on the page will automatically inherit the theme.
+Load at least one theme via NPM import. This only needs to be done **once per document**. Every component and embedded consumer on the page will automatically inherit the theme.
 
-<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">
 ```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"
-/>
 ```
 
-  </sd-tab-panel>
-</sd-tab-group>
-
 ## Next steps
 
 Depending on the theme, make sure the following page-level concerns are covered.
@@ -304,9 +287,9 @@ That's it — your page is now themed. Head over to the <sd-link href="?path=/do
 
 </sd-accordion>
 
-  </sd-tab-panel>
+</sd-tab-panel>
 
-  <sd-tab-panel name="consumer">
+<sd-tab-panel name="consumer">
 
 <sd-notification variant="warning" open>
   **Do not import or bundle theme CSS.** The Theme Host already provides the theme for the entire page. Bundling it
@@ -386,7 +369,7 @@ extend: {
 }
 };
 
-```
+````
 
   </sd-tab-panel>
 </sd-tab-group>
@@ -396,46 +379,20 @@ That's it — you're ready to build. Head over to the <sd-link href="?path=/docs
   </sd-tab-panel>
 </sd-tab-group>
 
-## ⚠️ Upcoming breaking changes
-
-Breaking changes will be introduced in a future release (date to be announced).
-
-### CSS Variables
-
-Some CSS variables used for custom theming will be removed.
-
-- Deprecated variables are still functional for now
-- All deprecated variables are clearly marked in the documentation
-- Recommended replacements are already provided
+## CSS Variables deprecation
 
-**Where to find deprecated variables**: You can find this information directly on each component’s documentation page.
+CSS variables used for custom theming can become deprecated as token versions are updated.
+These changes will always be communicated properly before breaking changes are applied and are currently listed in the
+<sd-link href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/packages-tokens-installation--docs#css-variables-deprecation">Usage</sd-link> page under "Deprecated CSS variables (tokens)"
 
-Deprecated variables:
+However, if you manage an environment that still requires the use of these variables, you can import the `legacy-variables.css` stylesheet
+as fallback layer:
 
-- `--sd-button--size-lg-border-radius` replace with `--sd-button-border-radius`
-- `--sd-button--size-md-border-radius` replace with `--sd-button-border-radius`
-- `--sd-button--size-sm-border-radius` replace with `--sd-button-border-radius`
-- `--sd-button--secondary--inverted--color-border` replace with `--sd-button-secondary-inverted-color-border`
-- `--sd-form-control-color-icon` replace with `--sd-form-control-color-icon-fill`
-- `--sd-menu-color-icon` replace with `--sd-menu-item-color-icon-fill`
-- `--sd-menu-color-text` replace with `--sd-menu-item-color-text`
-- `--sd-menu--disabled-color-icon` replace with `--sd-menu-item--disabled-color-icon-fill`
-- `--sd-menu--disabled-color-text` replace with `--sd-menu-item--disabled-color-text`
-- `--sd-tag-font-weight` replace with `--sd-choice-control-font-weight`
-- `--sd-tag--disabled-color-border` replace with `--sd-color-border-neutral-500`
-- `--sd-navigation-item--current-color-text` replace with `--sd-navigation-item-color-text`
-- `--sd-option--disabled-color-border` replace with `--sd-color-border-neutral-500`
-- `--sd-audio__timestamp-color-text` replace with `--sd-color-text-neutral-700`
-- `--sd-accordion__chevron-color-text` replace with `--sd-accordion-color-icon-fill`
-
----
-
-### Minimum dependency requirement
+```js
+````
 
-Currently, any version of the **components** and **styles** packages is compatible with any version of the **tokens** package. In a future release:
+## Minimum dependency requirement
 
-- A **minimum dependency requirement** will be introduced
-- The **tokens package version must be equal to or higher than** the components and styles versions
+The installed `@solid-design-system/tokens` version must always be equal to or greater than the versions of the `@solid-design-system/components` and `@solid-design-system/styles` packages.
 
-We recommend reviewing your setup now to ensure that your tokens package is **aligned with (or ahead of)** your components and styles. This will help you avoid compatibility issues once the new requirement is enforced.
-```
+For example, when using version `6.30.0` of components or styles, the minimum supported tokens version is `6.30.0`.

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

@@ -16,17 +16,9 @@ This page covers advanced usage patterns for `@solid-design-system/tokens`. Make
 
 To automatically respect the user's OS-level preference, use the `prefers-color-scheme` media query on your `<link>` tags:
 
-```html
-<link
-  rel="stylesheet"
-  href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
-  media="(prefers-color-scheme: light)"
-/>
-<link
-  rel="stylesheet"
-  href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-dark/ui-dark.css"
-  media="(prefers-color-scheme: dark)"
-/>
+```css
+@import '@solid-design-system/tokens/dist/themes/ui-light/ui-light.css' (prefers-color-scheme: light);
+@import '@solid-design-system/tokens/dist/themes/ui-dark/ui-dark.css' (prefers-color-scheme: dark);
 ```
 
 For further information on how to make this more dynamic, check out [this article](https://pepelsbey.dev/articles/native-light-dark/).
@@ -107,15 +99,19 @@ This will only affect the primary background color inside `sd-button` components
 <sd-notification variant="warning" open>
   Make sure the **theme you load** (from `@solid-design-system/tokens`) is at a version **equal to or higher than** the
   highest `@solid-design-system/components` and `@solid-design-system/styles` version used anywhere on the page —
-  including by any embedded consumers. This will become a hard requirement in a future release — aligning now avoids
-  breakage later.
+  including by any embedded consumers.
 </sd-notification>
 
 ### Deprecated CSS variables (tokens)
 
-The following CSS variables (tokens) are deprecated and will be removed in a future release. Update your custom styles to use the recommended replacements.
+The following CSS variables (tokens) are deprecated. Please update your custom styles to use the recommended replacements.
+If you manage an environment that still requires the use of these variables,
+please refer to the <sd-link href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/packages-tokens-installation--docs#css-variables-deprecation">Installation</sd-link>
+section on loading `legacy-variables.css`.
+
+#### Deprecated variables:
 
-<table>
+<table class="sd-table">
   <tr>
     <th>Deprecated variable</th>
     <th>Replacement</th>
@@ -180,13 +176,91 @@ The following CSS variables (tokens) are deprecated and will be removed in a fut
     <td>`--sd-accordion__chevron-color-text`</td>
     <td>`--sd-accordion-color-icon-fill`</td>
   </tr>
+  <tr>
+    <td>`--sd-chip--primary-200-color-background`</td>
+    <td>`--sd-chip--primary-low-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-200-color-border`</td>
+    <td>`--sd-chip--primary-subtle-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-300-color-background`</td>
+    <td>`--sd-chip--primary-medium-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-300-color-border`</td>
+    <td>`--sd-chip--primary-medium-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-500-color-background`</td>
+    <td>`--sd-chip--primary-high-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-500-color-border`</td>
+    <td>`--sd-chip--primary-high-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-500-color-text`</td>
+    <td>`text-black`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--white-color-border`</td>
+    <td>`--sd-chip--white-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip-font-size`</td>
+    <td>`--sd-marker-font-size`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip-font-weight`</td>
+    <td>`--sd-marker-font-weight`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag-border-radius`</td>
+    <td>`--sd-chip-border-radius`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag-border-width`</td>
+    <td>`--sd-chip-border-width`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-200-color-background`</td>
+    <td>`--sd-chip--neutral-low-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-200-color-border`</td>
+    <td>`--sd-chip--neutral-low-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-300-color-background`</td>
+    <td>`--sd-chip--neutral-medium-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-300-color-border`</td>
+    <td>`--sd-chip--neutral-medium-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-500-color-background`</td>
+    <td>`--sd-chip--neutral-high-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-500-color-border`</td>
+    <td>`--sd-chip--neutral-high-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--white-color-background`</td>
+    <td>`--sd-chip--white-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--white-color-border`</td>
+    <td>`--sd-chip--white-color-filled-border`</td>
+  </tr>
 </table>
 
-You can also find deprecated variables directly on each component's documentation page.
-
-  </sd-tab-panel>
+</sd-tab-panel>
 
-  <sd-tab-panel name="consumer">
+<sd-tab-panel name="consumer">
 
 ## Using tokens
 

package/package.json

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.0-next.8",
-    "@solid-design-system/styles": "7.0.0-next.8",
-    "@solid-design-system/tokens": "7.0.0-next.8"
+    "@solid-design-system/components": "7.0.0",
+    "@solid-design-system/styles": "7.0.0",
+    "@solid-design-system/tokens": "7.0.0"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.0-next.8",
+  "version": "7.0.0",
   "scripts": {
     "build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
     "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",