@solid-design-system/components 4.0.0-next.9 → 4.0.1

package/dist/solid-components.js

@@ -4,154 +4,154 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTeaser
-} from "./chunks/chunk.76ZNNLGN.js";
+} from "./chunks/chunk.TPF3IUIC.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.7OHSCBBX.js";
+} from "./chunks/chunk.R3AKTB5D.js";
 import {
   SdTextarea
-} from "./chunks/chunk.VHGHICFG.js";
+} from "./chunks/chunk.336SOZQ7.js";
 import {
   SdTooltip
-} from "./chunks/chunk.XVFJS7VS.js";
+} from "./chunks/chunk.QEMNNDQN.js";
 import {
   SdVideo
-} from "./chunks/chunk.SPBPHTSS.js";
+} from "./chunks/chunk.LBHA2DC4.js";
 import {
   SdSelect
-} from "./chunks/chunk.O3ZFWYJW.js";
+} from "./chunks/chunk.XW3H7TX7.js";
 import {
   SdStep
-} from "./chunks/chunk.3LGDUVS4.js";
+} from "./chunks/chunk.DQUOULN6.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.PIR4YJUS.js";
+} from "./chunks/chunk.V3JNM4K3.js";
 import {
   SdSwitch
-} from "./chunks/chunk.2IBVAXOX.js";
+} from "./chunks/chunk.EYDGWH4T.js";
 import {
   SdTab
-} from "./chunks/chunk.743FPQRN.js";
+} from "./chunks/chunk.5UXE3YAT.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.BG3M5FUP.js";
+} from "./chunks/chunk.2FWAXOB3.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.6CUAQSFA.js";
+} from "./chunks/chunk.Y3F3Y4DX.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.EKFRFDTB.js";
+} from "./chunks/chunk.UJYVSZ25.js";
 import {
   SdOption
-} from "./chunks/chunk.SSH6ATRK.js";
+} from "./chunks/chunk.A7ETNRKR.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.4JZQQD4L.js";
+} from "./chunks/chunk.DHEEQPKB.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.MTSAWJLV.js";
+} from "./chunks/chunk.VX3KGPNB.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.BVC5FY4L.js";
+} from "./chunks/chunk.AFZXA6KB.js";
 import {
   SdRadio
-} from "./chunks/chunk.J7MMF6WJ.js";
+} from "./chunks/chunk.3IIJI2YI.js";
 import {
   SdScrollable
-} from "./chunks/chunk.DQPVSTUQ.js";
+} from "./chunks/chunk.RGLEFOOR.js";
 import {
   SdInclude
-} from "./chunks/chunk.PDRECIYA.js";
+} from "./chunks/chunk.QZF3GDJ6.js";
 import {
   SdInput
-} from "./chunks/chunk.QP3SM2LZ.js";
+} from "./chunks/chunk.7JO5FCU4.js";
 import {
   SdLink
-} from "./chunks/chunk.U5NFPAOX.js";
+} from "./chunks/chunk.B2FZCDD2.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.R4BETATX.js";
+} from "./chunks/chunk.47Y6CRA6.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.BXB5WF23.js";
+} from "./chunks/chunk.YA3KZ3ZS.js";
 import {
   SdNotification
-} from "./chunks/chunk.ZGPGFEVP.js";
+} from "./chunks/chunk.4LA6375U.js";
 import {
   SdDropdown
-} from "./chunks/chunk.PGZ5AWZ2.js";
+} from "./chunks/chunk.DID2HIGU.js";
 import {
   SdExpandable
-} from "./chunks/chunk.J2XBUIBC.js";
+} from "./chunks/chunk.5ZWBIPBJ.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.KTJRTRDJ.js";
+} from "./chunks/chunk.VBMNECRY.js";
 import {
   SdHeader
-} from "./chunks/chunk.Z2UY62T2.js";
+} from "./chunks/chunk.BTN23KPO.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.HPR3PWAE.js";
+} from "./chunks/chunk.SWDIWUUU.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.65BWRJEA.js";
+} from "./chunks/chunk.GSDAOG7M.js";
 import {
   SdCombobox
-} from "./chunks/chunk.4XDHTC3C.js";
+} from "./chunks/chunk.G6LYMXKT.js";
 import {
   SdTag
-} from "./chunks/chunk.NM6QP6RJ.js";
+} from "./chunks/chunk.MFJDLGGR.js";
 import {
   SdPopup
-} from "./chunks/chunk.V7TQ6VJU.js";
+} from "./chunks/chunk.QDCDOA3O.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
-import {
-  SdDialog
-} from "./chunks/chunk.727ERQ4F.js";
 import {
   SdDivider
-} from "./chunks/chunk.4RGGPCD5.js";
+} from "./chunks/chunk.OZXJCMQU.js";
+import {
+  SdDialog
+} from "./chunks/chunk.FAMYJDBN.js";
 import {
   SdDrawer
-} from "./chunks/chunk.U6RY25TF.js";
+} from "./chunks/chunk.4NORTB4T.js";
 import "./chunks/chunk.VBQLCQSN.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdBadge
-} from "./chunks/chunk.RIKFGIMH.js";
+} from "./chunks/chunk.REUL4QMO.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.H655M7FD.js";
+} from "./chunks/chunk.YFF7OIOH.js";
 import {
   SdButton
-} from "./chunks/chunk.4QKRGAOL.js";
+} from "./chunks/chunk.NU62KGCW.js";
 import {
   SdSpinner
-} from "./chunks/chunk.D6JZ4IKM.js";
+} from "./chunks/chunk.23WUCVW6.js";
 import "./chunks/chunk.KVKRZJS7.js";
-import "./chunks/chunk.ZWJI7SLE.js";
+import "./chunks/chunk.WLPV5EZN.js";
 import {
   SdCarousel
-} from "./chunks/chunk.QCICV36Z.js";
+} from "./chunks/chunk.GMOZ5YXA.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import "./chunks/chunk.2LMWBUBT.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.RNSJAVQE.js";
+} from "./chunks/chunk.THY5BDBS.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.IN3GJ5QL.js";
+} from "./chunks/chunk.XVR2P4CC.js";
 import {
   SdAccordion
-} from "./chunks/chunk.TWXYFPBS.js";
+} from "./chunks/chunk.6US5BJNM.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunks/chunk.3IT4HBTI.js";
+} from "./chunks/chunk.GWYRJFJU.js";
 import "./chunks/chunk.P52GZVKG.js";
 import "./chunks/chunk.RPB53XXV.js";
 import {
@@ -164,19 +164,19 @@ import "./chunks/chunk.EY4JPJJQ.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdAnimation
-} from "./chunks/chunk.UC5E3AEF.js";
+} from "./chunks/chunk.BZNIT6S5.js";
 import "./chunks/chunk.X2OQMWGY.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.QAZYUCBK.js";
+} from "./chunks/chunk.NEZVEG7K.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
 import "./chunks/chunk.MNYQWRJE.js";
 import "./chunks/chunk.2S2CNWKY.js";
-import "./chunks/chunk.UDZYWRPT.js";
+import "./chunks/chunk.KGZ3GBGJ.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.V7TQ6VJU.js";
-import "../chunks/chunk.UDZYWRPT.js";
+import "../chunks/chunk.QDCDOA3O.js";
+import "../chunks/chunk.KGZ3GBGJ.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   setupAutocomplete

package/dist/vscode.html-custom-data.json

@@ -935,7 +935,7 @@
     },
     {
       "name": "sd-expandable",
-      "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
+      "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
       "attributes": [
         {
           "name": "open",
@@ -2851,16 +2851,11 @@
     },
     {
       "name": "sd-video",
-      "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.\n- **overlay** - The `<div>` element styled as an absolutely positioned transparent overlay.",
+      "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
       "attributes": [
         {
           "name": "playing",
-          "description": "Set to `true` to hide the play icon and the overlay.",
-          "values": []
-        },
-        {
-          "name": "overlay",
-          "description": "Set to `true` to show a dark overlay. Only used when `playing` is `false`.",
+          "description": "Set to `true` to hide the play icon.",
           "values": []
         },
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.0.0-next.9",
+  "version": "4.0.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2248,7 +2248,7 @@
         },
         {
           "name": "sd-expandable",
-          "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
+          "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
           "doc-url": "",
           "attributes": [
             {
@@ -6503,17 +6503,12 @@
         },
         {
           "name": "sd-video",
-          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.\n- **overlay** - The `<div>` element styled as an absolutely positioned transparent overlay.",
+          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
           "doc-url": "",
           "attributes": [
             {
               "name": "playing",
-              "description": "Set to `true` to hide the play icon and the overlay.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "overlay",
-              "description": "Set to `true` to show a dark overlay. Only used when `playing` is `false`.",
+              "description": "Set to `true` to hide the play icon.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -6553,12 +6548,7 @@
             "properties": [
               {
                 "name": "playing",
-                "description": "Set to `true` to hide the play icon and the overlay.",
-                "type": "boolean"
-              },
-              {
-                "name": "overlay",
-                "description": "Set to `true` to show a dark overlay. Only used when `playing` is `false`.",
+                "description": "Set to `true` to hide the play icon.",
                 "type": "boolean"
               },
               {

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-0-0-next-9-select', { detail: { item } });
+        this.emit('sd-4-0-1-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-0-0-next-9-divider) {
+  ::slotted(sd-4-0-1-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-0-0-next-9-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-9-icon>
+          <sd-4-0-1-icon name="check" library="system" aria-hidden="true"></sd-4-0-1-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-0-0-next-9-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-9-icon>
+          <sd-4-0-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-1-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/{chunk.D6JZ4IKM.js → chunk.23WUCVW6.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,7 +41,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-4-0-0-next-9-spinner")
+  customElement("sd-4-0-1-spinner")
 ], SdSpinner);
 
 export {

package/dist-versioned/chunks/{chunk.BG3M5FUP.js → chunk.2FWAXOB3.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass,
   __spreadValues
@@ -29,8 +29,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-4-0-0-next-9-tab"),
-      customElements.whenDefined("sd-4-0-0-next-9-tab-panel")
+      customElements.whenDefined("sd-4-0-1-tab"),
+      customElements.whenDefined("sd-4-0-1-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -71,19 +71,19 @@ var SdTabGroup = class extends SolidElement {
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
     return [...slot.assignedElements()].filter((el) => {
-      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-4-0-0-next-9-tab" : el.tagName.toLowerCase() === "sd-4-0-0-next-9-tab" && !el.disabled;
+      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-4-0-1-tab" : el.tagName.toLowerCase() === "sd-4-0-1-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-0-0-next-9-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-0-1-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-4-0-0-next-9-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-0-next-9-tab-group");
+    const tab = target.closest("sd-4-0-1-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-1-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -93,8 +93,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-4-0-0-next-9-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-0-next-9-tab-group");
+    const tab = target.closest("sd-4-0-1-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-1-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -119,7 +119,7 @@ var SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-4-0-0-next-9-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-4-0-1-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -215,15 +215,15 @@ var SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-4-0-0-next-9-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-4-0-0-next-9-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-4-0-1-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-4-0-1-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-4-0-0-next-9-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-4-0-0-next-9-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-4-0-1-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-4-0-1-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-4-0-0-next-9-tab-panel){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}::slotted(sd-4-0-0-next-9-tab-panel){--padding:1rem 0}`
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-4-0-1-tab-panel){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}::slotted(sd-4-0-1-tab-panel){--padding:1rem 0}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -244,7 +244,7 @@ __decorateClass([
   property()
 ], SdTabGroup.prototype, "activation", 2);
 SdTabGroup = __decorateClass([
-  customElement("sd-4-0-0-next-9-tab-group")
+  customElement("sd-4-0-1-tab-group")
 ], SdTabGroup);
 
 export {

package/dist-versioned/chunks/{chunk.VHGHICFG.js → chunk.336SOZQ7.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -203,7 +203,7 @@ var SdTextarea = class extends SolidElement {
       "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-0-0-next-9-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-0-0-next-9-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-0-next-9-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-0-0-next-9-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-0-1-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-0-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-1-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-0-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -314,7 +314,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-4-0-0-next-9-textarea")
+  customElement("sd-4-0-1-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.J7MMF6WJ.js → chunk.3IIJI2YI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -70,7 +70,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-4-0-0-next-9-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-4-0-1-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       this.disabled && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -122,7 +122,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-4-0-0-next-9-radio")
+  customElement("sd-4-0-1-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.R4BETATX.js → chunk.47Y6CRA6.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -88,7 +88,7 @@ __decorateClass([
   property()
 ], SdMapMarker.prototype, "target", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-4-0-0-next-9-map-marker")
+  customElement("sd-4-0-1-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.ZGPGFEVP.js → chunk.4LA6375U.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -136,7 +136,7 @@ var SdNotification = class extends SolidElement {
         () => {
           toastStack.removeChild(this);
           resolve();
-          if (toastStack.querySelector("sd-4-0-0-next-9-notification") === null) {
+          if (toastStack.querySelector("sd-4-0-1-notification") === null) {
             toastStack.remove();
           }
         },
@@ -153,15 +153,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-4-0-0-next-9-icon name="${{
+    )}"><sd-4-0-1-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-0-0-next-9-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-0-1-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot part="message" class="block w-full pl-3 py-2" aria-live="polite"></slot>${this.closable ? html`<sd-4-0-0-next-9-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-0-0-next-9-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-0-0-next-9-icon></sd-4-0-0-next-9-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
+    )}"><slot part="message" class="block w-full pl-3 py-2" aria-live="polite"></slot>${this.closable ? html`<sd-4-0-1-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-0-1-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-0-1-icon></sd-4-0-1-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
   }
 };
 /**
@@ -199,7 +199,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-4-0-0-next-9-notification")
+  customElement("sd-4-0-1-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [