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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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

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/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/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

@@ -287,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
@@ -369,7 +369,7 @@ extend: {
 }
 };
 
-```
+````
 
   </sd-tab-panel>
 </sd-tab-group>
@@ -379,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.
+## CSS Variables deprecation
 
-- Deprecated variables are still functional for now
-- All deprecated variables are clearly marked in the documentation
-- Recommended replacements are already provided
+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)"
 
-**Where to find deprecated variables**: You can find this information directly on each component’s documentation page.
+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:
 
-Deprecated variables:
-
-- `--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

@@ -99,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`.
 
-<table>
+#### Deprecated variables:
+
+<table class="sd-table">
   <tr>
     <th>Deprecated variable</th>
     <th>Replacement</th>
@@ -172,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.9",
-    "@solid-design-system/styles": "7.0.0-next.9",
-    "@solid-design-system/tokens": "7.0.0-next.9"
+    "@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.9",
+  "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",