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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 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
@@ -12,6 +23,14 @@
 
 ## 7.0.0-next.2
 
+## 6.30.0
+
+### Minor Changes
+
+- Add `sd-file-selector` component. _[`#3237`](https://github.com/solid-design-system/solid/pull/3237) [`cdab3e1`](https://github.com/solid-design-system/solid/commit/cdab3e1c704558ad4d437d9d19d5ad8db5062547) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
+
+## 6.29.1
+
 ## 6.29.0
 
 ## 6.28.2

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

@@ -0,0 +1,139 @@
+## Overview
+
+`<sd-file-selector>` — Used to select a file by clicking or dragging a file into a drop-area.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-file-selector, example: variant
+- component: sd-file-selector, example: sizes
+- component: sd-file-selector, example: label
+- component: sd-file-selector, example: disabled
+- component: sd-file-selector, example: visually-disabled
+- component: sd-file-selector, example: help-text
+- component: sd-file-selector, example: multiple-files
+- component: sd-file-selector, example: hide-value
+- component: sd-file-selector, example: required
+- component: sd-file-selector, example: invalid
+- component: sd-file-selector, example: directory
+
+### Key Properties
+
+- prop.files: — The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of
+  selected files via its `length` property.
+- prop.name: string, default='' — The name of the file selector, submitted as a name/value pair with form data.
+- prop.title: string, default='' — The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.
+- prop.value: — The value of the file selector contains a string that represents the path of the selected file. If multiple
+  files are selected, the value represents the first file in the list. The only valid value when setting a file
+  input is an empty string.
+- prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
+- prop.size: 'sm'|'md'|'lg', default='lg' — The file selector's size.
+- prop.label: string, default='' — The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.
+- prop.showLabel [attr: show-label]: boolean, default=false — Visually displays the file selector's label.
+- prop.helpText [attr: help-text]: string, default='' — The file selector's help text. If you need to display HTML, use the `help-text` slot instead.
+- prop.disabled: boolean, default=false — Disables the file selector.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the input as if it was disabled and enables aria-disabled
+- prop.droparea [attr: drop-area]: boolean, default=false — Draw the file selector as a drop area.
+- prop.accept: string, default='' — Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).
+- prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
+- prop.capture: 'user'|'environment' — Specifies which camera to use for capture of image or video data. Works only when not using a droparea.
+- prop.multiple: boolean, default=false — Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.
+- prop.webkitdirectory: boolean, default=false — Indicates that the file selector should let the user select directories instead of files. Non-standard, but
+  supported by all major browsers.
+- prop.form: string, default='' — By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+  to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+  the same document or shadow root for this to work.
+- prop.required: boolean, default=false — Makes the input a required field.
+- prop.hideValue [attr: hide-value]: boolean, default=false — Suppresses the value from being displayed in the file selector.
+- prop.validity: — Gets the validity state object.
+- prop.validationMessage: — Gets the validation message.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the control loses focus.
+- event.sd-change: Emitted when an alteration to the control's value is committed by the user.
+- event.sd-error: Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
+- event.sd-focus: Emitted when the control gains focus.
+- event.sd-input: Emitted when the control receives input.
+
+### Slots
+
+- slot.label: The file selector's label. Alternatively, you can use the `label` attribute.
+- slot.help-text: Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute.
+
+### CSS Parts
+
+- part.form-control: The form control that wraps the label, input, and help text.
+- part.form-control-label: The label's wrapper.
+- part.form-control-input: The input's wrapper.
+- part.form-control-help-text: The help text's wrapper.
+- part.button-wrapper: The wrapper around the button and text value.
+- part.button: The sd-button acting as a file input trigger.
+- part.value: The chosen files or placeholder text for the file input.
+- part.droparea: The element wrapping the drop zone.
+- part.droparea-background: The background of the drop zone.
+- part.droparea-icon: The container that wraps the icon for the drop zone.
+- part.droparea-value: The text for the drop zone.
+- part.invalid-icon-message: The container that wraps the invalid icon and message.
+- part.invalid-icon: The invalid icon.
+- part.invalid-message: The invalid message.
+
+## Guidelines
+
+### Use Cases
+
+- Select files or documents as part of a form submission.
+- Attach supporting files in profile or account settings.
+- Replace or update assets in content management workflows.
+- Handle single or multiple file selections within any form or multi-step forms.
+
+#### Default
+
+Use the `default` variant when the select action is secondary to other form fields, or when space is limited.
+
+- Inline file selector in dense or compact forms.
+- Single-file selection where minimal visual weight is needed.
+- Flows where the selection action sits alongside other inputs.
+
+#### Drop Area
+
+Use the `drop-area` variant when file selector is the primary action on the page or step.
+
+- Dedicated selector steps in multi-step flows.
+- Scenarios where drag-and-drop is a likely or preferred interaction.
+- Select flows that support multiple files at once.
+
+### Rules
+
+<b>Do not mix both variants within the same form or flow.</b>
+
+### Label and Help Text
+
+- Always provide a descriptive label (e.g., "Select file", "Signed contract").
+- Use help text to communicate accepted file types and size limits
+- Do not rely on the drop-area copy alone to convey constraints.
+
+### Error Handling
+
+- Use error-text to surface validation errors: below the component (default variant) or next to each individual file selector when the "show selected files" attribute is active (drop-area variant).
+- Write error text in plain language with a clear solution (e.g., "The file is too large. Maximum allowed size is 5 MB.").
+
+### Per-error-type copy guidance
+
+- Provide distinct error messages for each failure scenario rather than a generic fallback — for example: wrong file type, file too large, empty file, too many files, or selection failure.
+
+### Background
+
+- Use light background options such as white, neutral-100, or primary-100.
+
+### Accessibility
+
+- Use `visually-disabled` to keep disabled elements focusable and tooltip-accessible.
+- Associate error text via `aria-describedby` so they are announced on focus.
+- Use the `visually-disabled` attribute to keep disabled elements focusable, hoverable, and able to show tooltips, as they’re otherwise removed from the tab order and inaccessible to screen readers.
+- A label must always be provided, even when it is visually hidden. The label is used to provide an accessible name for the file selector, ensuring that screen reader users can identify the purpose of the control.

package/metadata/packages/components/sd-file-selector/stories/directory.md

@@ -0,0 +1,6 @@
+Use the `webkitdirectory` attribute to allow directory selection.
+**Note:** As it is a non-standard attribute, browser support may vary. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#webkitdirectory) for more information.
+
+```html
+<sd-file-selector label="Select a directory to upload" show-label webkitdirectory></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/disabled.md

@@ -0,0 +1,5 @@
+Use the `disabled` attribute to disable the file selector.
+
+```html
+<sd-file-selector label="Select a file to upload" disabled></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/help-text.md

@@ -0,0 +1,19 @@
+Use the `help-text` attribute to provide additional context or instructions as:
+
+- file size restrictions
+- file format requirements
+- file selection limit
+  For help-text that contain HTML, use the help-text slot instead.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector
+    label="Select a file to upload"
+    help-text="Max file size is 3 MB. Only PDF, JPG and PNG files are supported."
+  >
+  </sd-file-selector>
+  <sd-file-selector label="Select a file to upload">
+    <div slot="help-text" class="text-lg">Max file size is 3 MB. Only PDF, JPG and PNG files are supported.</div>
+  </sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/hide-value.md

@@ -0,0 +1,5 @@
+Use the `hide-value` attribute where you don’t want to show the selected value.
+
+```html
+<sd-file-selector label="Select a file to upload" hide-value></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/invalid.md

@@ -0,0 +1,14 @@
+The component gets `invalid` state when the form is not valid.
+
+```html
+<form id="invalid-form">
+  <sd-file-selector id="invalid-file-selector" label="Select a file to upload" show-label> </sd-file-selector>
+</form>
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-file-selector')]).then(() => {
+    const fileSelector = document.getElementById('invalid-file-selector');
+    fileSelector.setCustomValidity('Please select a file.');
+    fileSelector.reportValidity();
+  });
+</script>
+```

package/metadata/packages/components/sd-file-selector/stories/label.md

@@ -0,0 +1,13 @@
+Use the `label` attribute to add an accessible label to the file selector.
+For labels that contain HTML, use the label slot instead.
+This label is visually hidden by default, to display it, use the `show-label` attribute.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector label="Select a file to upload"></sd-file-selector>
+  <sd-file-selector label="Select a file to upload" show-label></sd-file-selector>
+  <sd-file-selector label="Select a file to upload" show-label>
+    <div slot="label" class="text-lg">Label slot</div>
+  </sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/multiple-files.md

@@ -0,0 +1,5 @@
+Use the `multiple` attribute to allow multiple files selection.
+
+```html
+<sd-file-selector label="Select a file to upload" multiple></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/required.md

@@ -0,0 +1,6 @@
+Use the `required` attribute to make the file selector a required field. This can be used for form validation purposes.
+**Note:** For accessibility reasons, required fields must always display a visible label and value.
+
+```html
+<sd-file-selector label="Required" show-label required></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/sizes.md

@@ -0,0 +1,14 @@
+Use the `size` attribute to change the size:
+
+- `lg` (default)
+- `md`
+- `sm`
+  On drop-area variant “md” and “sm” sizes are not available.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector size="lg" label="sd-file-selector large size"></sd-file-selector>
+  <sd-file-selector size="md" label="sd-file-selector medium size"></sd-file-selector>
+  <sd-file-selector size="sm" label="sd-file-selector small size"></sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/variant.md

@@ -0,0 +1,8 @@
+Use the `drop-area` attribute to switch to a drop area appearance.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector label="sd-file-selector default variant"></sd-file-selector>
+  <sd-file-selector drop-area label="sd-file-selector drop area variant"></sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/visually-disabled.md

@@ -0,0 +1,9 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers. When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip. Disabling elements is not recommended for accessibility reasons.
+
+```html
+<div class="w-[250px] pt-12">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
+    <sd-file-selector value="Visually disabled" label="Select a file to upload" visually-disabled></sd-file-selector
+  ></sd-tooltip>
+</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-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/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).

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}

@@ -23,18 +23,16 @@ 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>
+```

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

@@ -0,0 +1,8 @@
+Use the `sd-chip--sharp` class to switch the corner style.
+
+```html
+<div class="flex gap-12 items-center">
+  <div class="sd-chip">rounded</div>
+  <div class="sd-chip sd-chip--sharp">sharp</div>
+</div>
+```

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

@@ -0,0 +1,8 @@
+Use the `sd-chip--size-lg` class to have a larger chip.
+
+```html
+<div class="flex gap-12 items-center">
+  <div class="sd-chip">sm</div>
+  <div class="sd-chip sd-chip--size-lg">lg</div>
+</div>
+```

package/metadata/packages/templates/status-badge.md

@@ -4,7 +4,7 @@ title: Status Badge
 components:
   - sd-button
   - sd-chip
-  - sd-chip--primary-200
+  - sd-chip--shade-low
   - sd-container
   - sd-container--variant-neutral-100
   - sd-headline
@@ -131,7 +131,7 @@ version: 1.0.0
             Available
           </div>
         </div>
-        <span class="sd-chip sd-chip--primary-200">Authorized for telephone information</span>
+        <span class="sd-chip sd-chip--shade-low">Authorized for telephone information</span>
       </div>
 
       <sd-button class="edit-button" variant="secondary">
@@ -179,7 +179,7 @@ version: 1.0.0
             Be right back
           </div>
         </div>
-        <span class="sd-chip sd-chip--primary-200">Not authorized for telephone information</span>
+        <span class="sd-chip sd-chip--shade-low">Not authorized for telephone information</span>
       </div>
 
       <sd-button class="edit-button" variant="secondary">

package/metadata/packages/templates/teaser.md

@@ -4,13 +4,11 @@ title: Teaser
 components:
   - sd-button
   - sd-chip
-  - sd-chip--primary-200
-  - sd-chip--primary-500
-  - sd-chip--white
-  - sd-flag
-  - sd-flag--neutral-200
-  - sd-flag--neutral-300
-  - sd-flag--white
+  - sd-chip--color-neutral
+  - sd-chip--color-white
+  - sd-chip--shade-low
+  - sd-chip--sharp
+  - sd-chip--size-lg
   - sd-headline
   - sd-headline--inverted
   - sd-headline--size-3xl
@@ -165,7 +163,7 @@ version: 1.0.0
 </div>
 ```
 
-## Template: Teaser with Chip and Flag
+## Template: Teaser with Chip
 
 ```html
 <div class="flex flex-col gap-8">
@@ -179,8 +177,10 @@ version: 1.0.0
         alt="Colleagues in a casual office meeting, smiling and interacting, symbolizing collaboration and the value of office spaces."
         class="aspect-video object-cover"
       />
-      <span class="absolute top-3 left-4 sd-chip sd-chip--primary-500">Remote Work</span>
-      <span class="absolute top-2 right-0 sd-flag sd-flag--white">Research</span>
+      <span class="absolute top-3 left-4 sd-chip sd-chip--color-white">Remote Work</span>
+      <span class="absolute top-3 right-0 sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg"
+        >Research</span
+      >
     </div>
     <div slot="meta" class="meta-info">
       <span class="sd-meta sd-meta--inverted sd-meta--light sd-meta--size-sm sd-meta--pipe">05.06.2024</span>
@@ -200,8 +200,11 @@ version: 1.0.0
     <h3 slot="headline" class="sd-headline sd-headline--size-lg">
       ECB interest rate cut: a trend reversal on the real estate markets?
     </h3>
-    <span class="absolute top-3 left-4 sd-chip sd-chip--primary-200">Investment</span>
-    <span class="absolute top-2 right-0 sd-flag sd-flag--neutral-200">Trends</span>
+    <span class="absolute top-3 left-4 sd-chip">Investment</span>
+    <span
+      class="absolute top-3 right-0 sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg sd-chip--sharp"
+      >Trends</span
+    >
     <div slot="media" class="flex flex-wrap h-[189px] content-center justify-center">
       <sd-icon class="text-[96px]" name="content/house-percent" color="primary"></sd-icon>
     </div>
@@ -232,8 +235,11 @@ version: 1.0.0
         alt="City skyline, highlighting growth in real estate transactions."
         class="aspect-video sm:aspect-[3/4] md:aspect-[16/9] object-cover w-full"
       />
-      <span class="absolute top-3 left-4 sd-chip sd-chip--white">Real Estate</span>
-      <span class="absolute top-2 right-0 sd-flag sd-flag--neutral-300">Analytics</span>
+      <span class="absolute top-3 left-4 sd-chip sd-chip--color-white">Real Estate</span>
+      <span
+        class="absolute top-3 right-0 sd-chip sd-chip--color-neutral sd-chip--shade-low sd-chip--size-lg sd-chip--sharp"
+        >Analytics</span
+      >
     </div>
   </sd-teaser>
 </div>

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.
@@ -416,10 +399,6 @@ Deprecated variables:
 - `--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-chip-font-size` replace with `--sd-marker-font-size`
-- `--sd-chip-border-width` replace with `--sd-marker-border-width`
-- `--sd-chip-font-weight` replace with `--sd-marker-font-weight`
-- `--sd-flag-border-width` replace with `--sd-marker-border-width`
 - `--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`

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/).
@@ -136,22 +128,6 @@ The following CSS variables (tokens) are deprecated and will be removed in a fut
     <td>`--sd-button--secondary--inverted--color-border`</td>
     <td>`--sd-button-secondary-inverted-color-border`</td>
   </tr>
-  <tr>
-    <td>`--sd-chip-font-size`</td>
-    <td>`--sd-marker-font-size`</td>
-  </tr>
-  <tr>
-    <td>`--sd-chip-border-width`</td>
-    <td>`--sd-marker-border-width`</td>
-  </tr>
-  <tr>
-    <td>`--sd-chip-font-weight`</td>
-    <td>`--sd-marker-font-weight`</td>
-  </tr>
-  <tr>
-    <td>`--sd-flag-border-width`</td>
-    <td>`--sd-marker-border-width`</td>
-  </tr>
   <tr>
     <td>`--sd-form-control-color-icon`</td>
     <td>`--sd-form-control-color-icon-fill`</td>

package/metadata/packages/tokens/tokens.json

@@ -32,6 +32,8 @@
     "--background-color-neutral-500",
     "--background-color-neutral-600",
     "--background-color-neutral-800",
+    "--background-color-neutral-blue",
+    "--background-color-neutral-grey",
     "--background-color-primary-100",
     "--background-color-primary-200",
     "--background-color-primary-300",
@@ -40,6 +42,7 @@
     "--background-color-primary",
     "--background-color-success",
     "--background-color-warning",
+    "--background-color-white-translucent",
     "--background-color-white",
     "--border-color-accent-550",
     "--border-color-accent",
@@ -49,6 +52,7 @@
     "--border-color-neutral-500",
     "--border-color-neutral-600",
     "--border-color-neutral-800",
+    "--border-color-neutral-blue",
     "--border-color-primary-100",
     "--border-color-primary-200",
     "--border-color-primary-400",

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.7",
-    "@solid-design-system/styles": "7.0.0-next.7",
-    "@solid-design-system/tokens": "7.0.0-next.7"
+    "@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"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.0-next.7",
+  "version": "7.0.0-next.9",
   "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",

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

@@ -1,45 +0,0 @@
-## Overview
-
-`sd-flag` – Used as a small, non-interactive label that represents a category.
-
-## API
-
-### Examples
-
-Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:
-
-- sd-flag/variants
-
-## Guidelines
-
-### Use Cases
-
-- Indicate the status of items with visual labels, such as “New,” “Featured,” “Expired,” or “Limited Stock”.
-- Label content type, like “Video,” “Article,” or “Podcast” to help users quickly identify the nature of the content.
-
-### Rules
-
-### Label and Styling
-
-- Keep flag text short and easily scannable. Long text disrupts layouts and diminishes the flag’s visual impact.
-- Use the “&--variant” property to apply the color variant that best works on the background, keeping it consistent throughout the product.
-
-### Chips and Flags
-
-- [sd-chip](./?path=/docs/styles-sd-chip--docs) and sd-flag can be used for similar purposes. Use them consistently throughout your product and, if both are needed, be sure to define which categories each should be used for (e.g. a chip on an article teaser informs about its subject, the flag about the type of article).
-
-### Chips and Tags
-
-- Use only as a non-interactive element; for interactive elements (e.g., a dynamic filter), use [sd-tag](./?path=/docs/styles-sd-tag--docs) instead.
-
-### Accessibility
-
-- Present flags as static labels (no focus or click behavior) to ensure screen readers don’t treat them as actionable elements.
-- If the flag conveys crucial information (e.g., “Expired”), include that text in the accessible name or description for the surrounding context.
-
-### Related Templates
-
-- flag--docs
-- teaser--docs
-
-Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.

package/metadata/packages/styles/sd-flag/stories/variants.md

@@ -1,40 +0,0 @@
-<sd-notification variant="info" open class="only-theme-kid mb-4">Add "shadow-sm" manually with css property box-shadow.</sd-notification>
-/
-export default {
-title: 'Styles/sd-flag',
-tags: ['!dev', 'autodocs'],
-component: 'sd-flag',
-parameters: {
-...parameters,
-design: {
-type: 'figma',
-url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2106-34451&t=ohgrgpEVGgKzqMzU-4'
-}
-},
-args: overrideArgs([{ type: 'slot', name: 'default', value: 'Flag' }]),
-argTypes
-};
-export const Default = {
-render: (args: any) => {
-return generateTemplate({
-options: { templateContent: '<span class="%CLASSES%">%SLOT%</span>' },
-args
-});
-}
-};
-/**
-Use the `sd-flag--*` classes for alternative appearances:
-
-- neutral-200 is the default appearance
-- `sd-flag--neutral-300`
-- `sd-flag--neutral-500`
-- `sd-flag--white`
-
-```html
-<div class="flex gap-4 bg-neutral-100 p-8">
-  <div class="sd-flag">Default</div>
-  <div class="sd-flag sd-flag--neutral-300">Neutral 300</div>
-  <div class="sd-flag sd-flag--neutral-500">Neutral 500</div>
-  <div class="sd-flag sd-flag--white">White</div>
-</div>
-```

package/metadata/packages/templates/flag.md

@@ -1,38 +0,0 @@
----
-name: flag
-title: Flag
-components:
-  - sd-flag
-  - sd-flag--neutral-200
-  - sd-flag--neutral-300
-  - sd-flag--neutral-500
-  - sd-flag--white
-version: 1.0.0
----
-
-## Template: Background Options
-
-```html
-<div class="grid grid-cols-2 grid-rows-3">
-  <div class="bg-white pt-[32px] flex justify-end border border-neutral-200">
-    <div class="sd-flag sd-flag--neutral-200">neutral-200</div>
-  </div>
-  <div class="bg-neutral-100 pt-[32px] flex justify-end">
-    <div class=" sd-flag sd-flag--neutral-300">neutral-300</div>
-  </div>
-  <div class="bg-primary-100 pt-[32px] flex justify-end">
-    <div class="sd-flag sd-flag--neutral-500">neutral-500</div>
-  </div>
-  <div class="bg-primary pt-[32px] flex justify-end">
-    <div class="sd-flag sd-flag--white">white</div>
-  </div>
-  <div slot="media" class="relative">
-    <img
-      class="aspect-video object-cover"
-      src="./placeholders/images/coffeeshop.jpg"
-      alt="A group of people sitting in a coffee shop"
-    />
-    <div class="absolute top-[32px] right-0 sd-flag sd-flag--white">white</div>
-  </div>
-</div>
-```