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

package/metadata/packages/icons/sd-multi-theming/system.json

@@ -1,307 +1,297 @@
 [
   {
-    "technicalId": "anchor-link",
-    "displayNameDe": "anchor link",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "arrow-left",
-    "displayNameDe": "arrow left",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "arrow-right",
-    "displayNameDe": "arrow right",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "calendar",
-    "displayNameDe": "calendar",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "shopping-cart",
-    "displayNameDe": "shopping cart",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevron-bottom",
-    "displayNameDe": "chevron bottom",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevron-left",
-    "displayNameDe": "chevron left",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevron-right",
-    "displayNameDe": "chevron right",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevron-small-left",
-    "displayNameDe": "chevron small left",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevron-small-right",
-    "displayNameDe": "chevron small right",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevron-top",
-    "displayNameDe": "chevron top",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevrons-small-left",
-    "displayNameDe": "chevrons small left",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "chevrons-small-right",
-    "displayNameDe": "chevrons small right",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "clock",
-    "displayNameDe": "clock",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "close-circle",
-    "displayNameDe": "close circle",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "close",
-    "displayNameDe": "close",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "confirm-circle",
-    "displayNameDe": "confirm circle",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "dashboard",
-    "displayNameDe": "dashboard",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "download",
-    "displayNameDe": "download",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "e-mail",
-    "displayNameDe": "e mail",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "exclamation-circle",
-    "displayNameDe": "exclamation circle",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "external-link",
-    "displayNameDe": "external link",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "eye-crossed-out",
-    "displayNameDe": "eye crossed out",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "eye-open",
-    "displayNameDe": "eye-open",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "file-pdf",
-    "displayNameDe": "file pdf",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "slider",
-    "displayNameDe": "slider",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "folder",
-    "displayNameDe": "folder",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "globe",
-    "displayNameDe": "globe",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "highlighter",
-    "displayNameDe": "highlighter",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "home",
-    "displayNameDe": "home",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "image",
-    "displayNameDe": "image",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "info-circle",
-    "displayNameDe": "info circle",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "list",
-    "displayNameDe": "list",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "lock-open",
-    "displayNameDe": "lock open",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "lock-locked",
-    "displayNameDe": "lock locked",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "log-out",
-    "displayNameDe": "log out",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "magnifying-glass",
-    "displayNameDe": "magnifying glass",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "menu",
-    "displayNameDe": "menu",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "minus-circle",
-    "displayNameDe": "minus circle",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "minus",
-    "displayNameDe": "minus",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "more-functions",
-    "displayNameDe": "more functions",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "mute",
-    "displayNameDe": "mute",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "pause",
-    "displayNameDe": "pause",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "pen",
-    "displayNameDe": "pen",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "phone",
-    "displayNameDe": "phone",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "play",
-    "displayNameDe": "play",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "plus-circle",
-    "displayNameDe": "plus circle",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "position",
-    "displayNameDe": "position",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "print",
-    "displayNameDe": "print",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "reload",
-    "displayNameDe": "reload",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "risk",
-    "displayNameDe": "risk",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "share",
-    "displayNameDe": "share",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "shopping-cart-crossed-out",
-    "displayNameDe": "shopping cart crossed out",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "star-empty",
-    "displayNameDe": "star empty",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "star-filled",
-    "displayNameDe": "star filled",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "table",
-    "displayNameDe": "table",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "transcript",
-    "displayNameDe": "transcript",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "user",
-    "displayNameDe": "user",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   },
   {
-    "technicalId": "volume",
-    "displayNameDe": "volume",
-    "tags": []
-  },
-  {
-    "technicalId": "warning",
-    "displayNameDe": "warning",
-    "tags": []
-  },
-  {
-    "technicalId": "website",
-    "displayNameDe": "website",
+    "technicalId": "",
+    "displayNameDe": "",
     "tags": []
   }
 ]

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