@solid-design-system/mcp 6.30.0 → 7.0.0-next.10

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 7.0.0-next.10
+
+## 7.0.0-next.9
+
+## 7.0.0-next.8
+
+### 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.
+
+## 7.0.0-next.7
+
+## 7.0.0-next.6
+
+## 7.0.0-next.5
+
+## 7.0.0-next.4
+
+## 7.0.0-next.3
+
+## 7.0.0-next.2
+
 ## 6.30.0
 
 ### Minor Changes
@@ -16,6 +41,14 @@
 
 - Updated dependencies. See details in the Pull Request _[`#3163`](https://github.com/solid-design-system/solid/pull/3163) [`91ff1c8`](https://github.com/solid-design-system/solid/commit/91ff1c81831fb3522c534306a61b8a5be3562f64) [@rahulsuvarna18](https://github.com/rahulsuvarna18)_
 
+## 7.0.0-next.1
+
+### 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.0
+
 ## 6.28.1
 
 ## 6.28.0

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/docs/usage.md

@@ -94,10 +94,10 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
 
 ```html
 <!-- Don't do this -->
-<sd-spinner />
+<sd-button />
 
 <!-- Always do this -->
-<sd-spinner></sd-spinner>
+<sd-button></sd-button>
 ```
 
 ### Differences from Native Elements
@@ -142,10 +142,10 @@ A way to use this method is to hide the `<body>` with `opacity: 0` and add a cla
   await Promise.allSettled([
     customElements.whenDefined('sd-button'),
     customElements.whenDefined('sd-icon'),
-    customElements.whenDefined('sd-spinner')
+    customElements.whenDefined('sd-loader')
   ]);
 
-  // Button, icon and spinner are registered now! Add
+  // Button, icon and loader are registered now! Add
   // the `ready` class so the UI fades in.
   document.body.classList.add('ready');
 </script>

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

@@ -8,11 +8,6 @@
   tags: ['!dev', 'autodocs'],
   args: overrideArgs([
   {
-  type: 'attribute',
-  name: 'open',
-  value: true
-  },
-  {
   type: 'slot',
   name: 'default',
   value: `<div class="slot slot--border slot--text h-16 w-full">Default slot</div>`
@@ -39,12 +34,19 @@
   };
   export const Default = {
   render: (args: any) => {
-  return html` <div style="height: 40vh;">
+  return html`
+  <sd-button id="open-default-dialog">Open Dialog</sd-button>
   ${generateTemplate({
   args
   })}
 
-</div>`;
+<script>
+document.querySelector('#open-default-dialog').addEventListener('click', () => {
+document.querySelector('sd-dialog').show();
+});
+</script>
+
+`;
 }
 };
 /**
@@ -59,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-drawer/info.md

@@ -19,7 +19,6 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.label: string, default='' — You should always include a relevant label even when using
   `no-header`, as it is required for proper accessibility.
 - prop.placement: 'end'|'start', default='end' — The direction from which the drawer will open.
-- prop.contained: boolean, default=false — By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.
 - prop.noHeader [attr: no-header]: boolean, default=false — Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.
@@ -42,13 +41,13 @@ Use the components tool by passing the args `component` and `example` for any of
 ### CSS Parts
 
 - part.base: The component's base wrapper.
-- part.overlay: The overlay that covers the screen behind the drawer.
 - part.panel: The drawer's panel (where the drawer and its content are rendered).
 - part.header: The drawer's header. This element wraps the title and the close-button.
 - part.title: The drawer's title.
 - part.close-button: The close button, an `<sd-button>`.
 - part.body: The drawer's body.
 - part.footer: The drawer's footer.
+- part.overlay: The overlay that covers the screen behind the drawer.
 
 ## Guidelines
 

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

@@ -8,11 +8,13 @@
 
 Use the components tool by passing the args `component` and `example` for any of these combinations:
 
+- component: sd-header, example: shadow
 - component: sd-header, example: fixed
 
 ### Key Properties
 
-- prop.fixed: boolean, default=false — Determines whether the header is fixed or not. If the header is fixed at the top of the page, a shadow is shown underneath.
+- prop.fixed: boolean, default=false — Determines whether the header is fixed or not. If the header is fixed, it stays at the top of the page while scrolling.
+- prop.shadow: boolean, default=false — Determines whether a drop shadow is shown underneath the header.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.
 
@@ -28,8 +30,8 @@ Use the components tool by passing the args `component` and `example` for any of
 
 ### Use Cases
 
-- Display primary navigation links for easy access to different sections of the website.
 - Showcase the company logo prominently to reinforce brand identity.
+- Display primary navigation links for easy access to different sections of the website.
 - Include links for user account access.
 - Provide a prominent search function to help users quickly find content.
 

package/metadata/packages/components/sd-header/stories/shadow.md

@@ -0,0 +1,9 @@
+Use the `shadow` attribute to show a drop shadow.
+
+```html
+<div style="height: 100px;">
+  <sd-header shadow>
+    <div class="slot slot--border slot--text">Default slot</div>
+  </sd-header>
+</div>
+```

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-input/info.md

@@ -65,6 +65,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.step: number|'any' — Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
   implied, allowing any numeric value. Only applies to date and number input types.
 - prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocorrect: boolean — Indicates whether the browser's autocorrect feature is on or off.
 - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
 - prop.autofocus: boolean — Indicates that the input should receive focus on page load.

package/metadata/packages/components/sd-notification/stories/duration.md

@@ -5,6 +5,11 @@ Use the `duration` attribute to set the duration (in milliseconds) of the notifi
 <sd-notification id="duration-example" variant="info" open duration="5000">
   Notification will self close after 5 seconds
 </sd-notification>
+<style>
+  sd-notification#duration-example::part(base) {
+    margin-top: 0.5rem;
+  }
+</style>
 <script>
   var notificationDuration = document.querySelector('#duration-example');
   notificationDuration.addEventListener('sd-after-hide', () => {

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

@@ -72,4 +72,4 @@ Use the components tool by passing the args `component` and `example` for any of
 
 ### Interactivity
 
-- Tags are interactive elements which trigger an action; to label or categorise items without any interaction use [sd-chip](./?path=/docs/styles-sd-chip--docs) or [sd-flag](./?path=/docs/styles-sd-flag--docs) instead.
+- Tags are interactive elements which trigger an action; to label or categorise items without any interaction use [sd-chip](./?path=/docs/styles-sd-chip--docs) instead.

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

@@ -44,7 +44,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.minlength: number — The minimum length of input that will be considered valid.
 - prop.maxlength: number — The maximum length of input that will be considered valid.
 - prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
-- prop.autocorrect: 'off'|'on' — Indicates whether the browser's autocorrect feature is on or off.
+- prop.autocorrect: boolean — Indicates whether the browser's autocorrect feature is on or off.
 - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
 - prop.autofocus: boolean — Indicates that the input should receive focus on page load.

package/metadata/packages/icons/default/system.json

@@ -79,16 +79,16 @@
     "displayNameDe": "Herz voll",
     "tags": ["Favoriten", "gespeichert", "gemerkt"]
   },
-  {
-    "technicalId": "flash-on",
-    "displayNameDe": "Blitz an",
-    "tags": ["Taschenlampe an", "Foto"]
-  },
   {
     "technicalId": "battery-full",
     "displayNameDe": "Batterie voll\n",
     "tags": ["voll", "Akku", "Ladestatus"]
   },
+  {
+    "technicalId": "flash-on",
+    "displayNameDe": "Blitz an",
+    "tags": ["Taschenlampe an", "Foto"]
+  },
   {
     "technicalId": "sort-down",
     "displayNameDe": "sortieren absteigend",
@@ -314,16 +314,16 @@
     "displayNameDe": "einklappen unten",
     "tags": ["verstecken", "komprimieren", "Seitenleiste"]
   },
-  {
-    "technicalId": "bug",
-    "displayNameDe": "Fehler",
-    "tags": ["Mangel", "Problem"]
-  },
   {
     "technicalId": "shopping-cart",
     "displayNameDe": "Einkaufswagen",
     "tags": ["Onlineshop", "Warenkorb", "Erwerb", "Einkauf"]
   },
+  {
+    "technicalId": "bug",
+    "displayNameDe": "Fehler",
+    "tags": ["Mangel", "Problem"]
+  },
   {
     "technicalId": "eraser",
     "displayNameDe": "Radiergummi",
@@ -614,26 +614,26 @@
     "displayNameDe": "Bildschirm Cursor",
     "tags": ["klicken", "auswählen"]
   },
-  {
-    "technicalId": "layers",
-    "displayNameDe": "Ebenen",
-    "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
-  },
   {
     "technicalId": "file-read-out",
     "displayNameDe": "Dokument vorlesen",
     "tags": ["vorlesen", "Audio", "Lautstärke"]
   },
   {
-    "technicalId": "collapse-left",
-    "displayNameDe": "einklappen links",
-    "tags": ["komprimieren", "verstecken", "Seitenleiste"]
+    "technicalId": "layers",
+    "displayNameDe": "Ebenen",
+    "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
   },
   {
     "technicalId": "file-wai",
     "displayNameDe": "Dokument wAI",
     "tags": ["Dokument", "Datei", "wAI"]
   },
+  {
+    "technicalId": "collapse-left",
+    "displayNameDe": "einklappen links",
+    "tags": ["komprimieren", "verstecken", "Seitenleiste"]
+  },
   {
     "technicalId": "download",
     "displayNameDe": "Download",
@@ -1044,16 +1044,16 @@
     "displayNameDe": "antworten",
     "tags": ["Rückmeldung", "Nachricht", "Kommunikation"]
   },
-  {
-    "technicalId": "password",
-    "displayNameDe": "Passwort",
-    "tags": ["sicherheitsgeschützt", "privat", "verschlüsselt"]
-  },
   {
     "technicalId": "e-mail-send",
     "displayNameDe": "E-Mail abschicken",
     "tags": ["Brief", "E-Mail", "Kommunikation"]
   },
+  {
+    "technicalId": "password",
+    "displayNameDe": "Passwort",
+    "tags": ["sicherheitsgeschützt", "privat", "verschlüsselt"]
+  },
   {
     "technicalId": "e-mail-exclamation",
     "displayNameDe": "E-Mail Ausrufezeichen",

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).