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

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/styles/sd-hidden-links/stories/surrounding-content.md

@@ -42,7 +42,7 @@ The style appends its position relative to the position of the parent container
   <div class="z-20 sd-hidden-links">
     <sd-button href="#">Skip to content</sd-button>
   </div>
-  <sd-header class="z-10" fixed>
+  <sd-header class="z-10" fixed shadow>
     <div class="flex justify-between items-center">
       <!-- top-left-area start !-->
       <a class="flex flex-shrink" href="#">

package/metadata/packages/templates/badge.md

@@ -86,7 +86,7 @@ version: 1.0.0
   }
 </style>
 
-<sd-header class="max-w-[650px]" fixed>
+<sd-header class="max-w-[650px]" fixed shadow>
   <div class="flex justify-between items-center">
     <a class="flex flex-shrink" href="#">
       <img class="h-8 w-auto object-contain" src="${currentTheme.logoLg}" alt="${currentTheme.alt}" />

package/metadata/packages/templates/bottom-navigation.md

@@ -124,10 +124,8 @@ version: 1.0.0
                 alt="A parent and child reading a book together on the couch."
               />
             </div>
-            <h3 slot="headline">
-              <span class="sd-headline sd-headline--size-base">
-                Steuerliche und rechtliche Basics beim Sparen fürs Kind</span
-              >
+            <h3 slot="headline" class="sd-headline sd-headline--size-base">
+              Steuerliche und rechtliche Basics beim Sparen fürs Kind
             </h3>
             <p class="sd-paragraph">
               Beim Sparen fürs Kind gibt es neben der Finanzplanung auch wichtige steuerliche und rechtliche Punkte zu

package/metadata/packages/templates/breadcrumb.md

@@ -31,7 +31,7 @@ version: 1.0.0
   }
 </style>
 
-<sd-header id="horizontal" fixed>
+<sd-header id="horizontal" fixed shadow>
   <div class="flex justify-between items-center my-0 lg:my-3">
     <a class="inline-flex sd-interactive" href="#">
       <img class="h-8 md:h-12 lg:h-14 w-auto object-contain" src="${currentTheme.logoLg}" alt="${currentTheme.alt}" />

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/header-navigation.md

@@ -63,7 +63,7 @@ version: 1.0.0
   }
 </style>
 
-<sd-header id="horizontal" fixed>
+<sd-header id="horizontal" fixed shadow>
   <div class="flex justify-between items-center my-0 lg:my-3">
     <a class="inline-flex sd-interactive" href="#">
       <img class="h-8 md:h-12 lg:h-14 w-auto object-contain" src="${currentTheme.logoLg}" alt="${currentTheme.alt}" />
@@ -776,7 +776,7 @@ version: 1.0.0
 ## Template: Header Sample A-01
 
 ```html
-<sd-header id="sample-a-header" fixed>
+<sd-header id="sample-a-header" fixed shadow>
   <div class="flex justify-between items-center">
     <!-- top-left-area start !-->
     <a class="flex flex-shrink" href="#">
@@ -923,7 +923,7 @@ version: 1.0.0
 ## Template: Header Sample A-02
 
 ```html
-<sd-header id="sample-a02-header" fixed>
+<sd-header id="sample-a02-header" fixed shadow>
   <div class="flex justify-between items-center">
     <!-- top-left-area start !-->
     <a class="flex flex-shrink" href="#">
@@ -1094,7 +1094,7 @@ version: 1.0.0
   }
 </style>
 <div class="min-h-screen grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]">
-  <sd-header id="vertical" fixed class="col-span-2">
+  <sd-header id="vertical" fixed shadow class="col-span-2">
     <div class="flex justify-between items-center">
       <a class="inline-flex sd-interactive" href="#">
         <img class="h-8 md:h-12 w-auto object-contain" src="${currentTheme.logoLg}" alt="${currentTheme.alt}" />
@@ -1373,7 +1373,7 @@ version: 1.0.0
 ## Template: Header Variant B-01
 
 ```html
-<sd-header id="sample-b-01-header" fixed>
+<sd-header id="sample-b-01-header" fixed shadow>
   <div class="flex justify-between items-center">
     <!-- top-left-area: logo + 2nd sender -->
     <div class="flex items-center lg:justify-between lg:w-full">
@@ -1509,7 +1509,7 @@ version: 1.0.0
 ## Template: Header Variant B-02
 
 ```html
-<sd-header id="sample-b-02-header" fixed>
+<sd-header id="sample-b-02-header" fixed shadow>
   <div class="flex justify-between items-center">
     <div class="flex items-center lg:justify-between lg:w-full">
       <div class="flex px-2 py-4 items-center justify-center bg-neutral-100 text-primary text-sm">2nd Sender</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/tokens": "6.30.0",
-    "@solid-design-system/components": "6.30.0",
-    "@solid-design-system/styles": "6.30.0"
+    "@solid-design-system/components": "7.0.0-next.10",
+    "@solid-design-system/styles": "7.0.0-next.10",
+    "@solid-design-system/tokens": "7.0.0-next.10"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "6.30.0",
+  "version": "7.0.0-next.10",
   "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/components/sd-spinner/info.md

@@ -1,53 +0,0 @@
-## Overview
-
-`<sd-spinner>` — Used as a visual indicator with a looping animation that shows loading is in process.
-
-## API
-
-### Examples
-
-Use the components tool by passing the args `component` and `example` for any of these combinations:
-
-- component: sd-spinner, example: variants
-- component: sd-spinner, example: size
-
-### Key Properties
-
-- prop.color: 'primary'|'white'|'currentColor', default='currentColor' — The color color of the spinner.
-- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
-- prop.lang: string — The element's language.
-
-## Guidelines
-
-### Use Cases
-
-- Indicate that content is being loaded, such as when fetching data from a server or loading a new page.
-- Show ongoing background processes, like file uploads or data processing tasks.
-- Used within buttons or interactive elements to indicate that an action is being processed.
-- Apply to sections of a page that are loading independently, such as widgets or panels.
-- Display when a form is being submitted to show that the submission is in progress.
-
-### Rules
-
-### Content
-
-- Include a label or message to provide context about what is being loaded, especially if the loading time is long.
-
-### Behavior and Placement
-
-- Use for processes that take a short amount of time (typically under 4 seconds).
-- Apply within specific sections rather than blocking the entire page, unless absolutely necessary.
-- Place in a consistent location relative to the content it is loading.
-
-### Styling
-
-- Maintain consistency in size and style; avoid using spinners of varying sizes on the same page.
-
-### Background
-
-- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
-
-### Accessibility
-
-- Assign role="status" or use a live region (e.g., aria-live="polite") to inform screen reader users of ongoing loading.
-- A spinner shouldn’t itself be focusable or interactive, nor prevent from navigating to other parts of the page while loading continues.

package/metadata/packages/components/sd-spinner/stories/size.md

@@ -1,15 +0,0 @@
-Use the CSS property `font-size` to scale the spinner proportionally.
-
-```html
-<div class="flex flex-row gap-12">
-  <div style="font-size: inherit">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-  <div style="font-size: 2rem">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-  <div style="font-size: 4rem">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-</div>
-```

package/metadata/packages/components/sd-spinner/stories/variants.md

@@ -1,43 +0,0 @@
-<sd-notification variant="warning" open class="mb-4">**Warning:** The `sd-spinner` will be deprecated in the future. Please use the `sd-loader` component instead.</sd-notification>
-**Known browser issues:**
-
-- The 'sd-spinner' component may experience spinner animation issues in Safari, causing them to appear wobbly.
-  /
-  export default {
-  title: 'Components/sd-spinner',
-  component: 'sd-spinner',
-  tags: ['!dev', 'autodocs'],
-  args: overrideArgs({ type: 'attribute', name: 'color', value: 'primary' }),
-  argTypes,
-  parameters: {
-  ...parameters,
-  design: {
-  type: 'figma',
-  url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2115-17681&node-type=section&t=5PpAC3TA3kYF7ufX-0'
-  }
-  }
-  };
-  export const Default = {
-  render: (args: any) => {
-  return generateTemplate({ args });
-  }
-  };
-  /**
-  Use the `color` attribute to set the spinner's color:
-- `currentColor` (default): used to inherit the `text-color` from the parent element
-- `primary`: used on light backgrounds
-- `white`: used on primary backgrounds
-
-```html
-<div class="flex flex-row items-center gap-12">
-  <div class="p-4">
-    <sd-spinner color="currentColor"></sd-spinner>
-  </div>
-  <div class="p-4">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-  <div class="bg-primary p-4">
-    <sd-spinner color="white"></sd-spinner>
-  </div>
-</div>
-```

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.