@solid-design-system/components 4.0.0 → 4.0.2

package/dist/solid-components.js

@@ -4,154 +4,154 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTeaser
-} from "./chunks/chunk.LIHVJG34.js";
+} from "./chunks/chunk.TPF3IUIC.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.3MB5BULP.js";
+} from "./chunks/chunk.R3AKTB5D.js";
 import {
   SdTextarea
-} from "./chunks/chunk.FXAD3J2G.js";
+} from "./chunks/chunk.336SOZQ7.js";
 import {
   SdTooltip
-} from "./chunks/chunk.SNEFSXVE.js";
+} from "./chunks/chunk.QEMNNDQN.js";
 import {
   SdVideo
-} from "./chunks/chunk.CWZMGP22.js";
+} from "./chunks/chunk.LBHA2DC4.js";
 import {
   SdSelect
-} from "./chunks/chunk.AFNKNM3P.js";
+} from "./chunks/chunk.QPNM75ZM.js";
 import {
   SdStep
-} from "./chunks/chunk.SWWBX77U.js";
+} from "./chunks/chunk.DQUOULN6.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.V542QHOM.js";
+} from "./chunks/chunk.V3JNM4K3.js";
 import {
   SdSwitch
-} from "./chunks/chunk.ZY536C6C.js";
+} from "./chunks/chunk.EYDGWH4T.js";
 import {
   SdTab
-} from "./chunks/chunk.C3IVTPFT.js";
+} from "./chunks/chunk.5UXE3YAT.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.MEYIIQQC.js";
+} from "./chunks/chunk.2FWAXOB3.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.E5RK2KNC.js";
+} from "./chunks/chunk.Y3F3Y4DX.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.S4MVT4ZE.js";
+} from "./chunks/chunk.UJYVSZ25.js";
 import {
   SdOption
-} from "./chunks/chunk.YQ6ZGCYS.js";
+} from "./chunks/chunk.A7ETNRKR.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.7TH6VN75.js";
+} from "./chunks/chunk.DHEEQPKB.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.JN6UBBKL.js";
+} from "./chunks/chunk.VX3KGPNB.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.WSGE4KVS.js";
+} from "./chunks/chunk.AFZXA6KB.js";
 import {
   SdRadio
-} from "./chunks/chunk.VA4H4TO6.js";
+} from "./chunks/chunk.3IIJI2YI.js";
 import {
   SdScrollable
-} from "./chunks/chunk.ASAXVCVJ.js";
+} from "./chunks/chunk.RGLEFOOR.js";
 import {
   SdInclude
-} from "./chunks/chunk.ZXUJNQSP.js";
+} from "./chunks/chunk.QZF3GDJ6.js";
 import {
   SdInput
-} from "./chunks/chunk.ZYCCX6R7.js";
+} from "./chunks/chunk.7JO5FCU4.js";
 import {
   SdLink
-} from "./chunks/chunk.FTPI46H7.js";
+} from "./chunks/chunk.B2FZCDD2.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.N443KN6M.js";
+} from "./chunks/chunk.47Y6CRA6.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.KCHA5X3N.js";
+} from "./chunks/chunk.YA3KZ3ZS.js";
 import {
   SdNotification
-} from "./chunks/chunk.SX66NTJS.js";
+} from "./chunks/chunk.4LA6375U.js";
 import {
   SdDropdown
-} from "./chunks/chunk.KXWPB4EA.js";
+} from "./chunks/chunk.DID2HIGU.js";
 import {
   SdExpandable
-} from "./chunks/chunk.DWIJB4FE.js";
+} from "./chunks/chunk.5ZWBIPBJ.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.GLFF67DA.js";
+} from "./chunks/chunk.VBMNECRY.js";
 import {
   SdHeader
-} from "./chunks/chunk.SAHCI5Y5.js";
+} from "./chunks/chunk.BTN23KPO.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.EZZY6RYW.js";
+} from "./chunks/chunk.SWDIWUUU.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.S5ODUYDD.js";
+} from "./chunks/chunk.GSDAOG7M.js";
 import {
   SdCombobox
-} from "./chunks/chunk.G4S2CHVG.js";
+} from "./chunks/chunk.GIKKMZ2Q.js";
 import {
   SdTag
-} from "./chunks/chunk.72RQXFUJ.js";
+} from "./chunks/chunk.MFJDLGGR.js";
 import {
   SdPopup
-} from "./chunks/chunk.XW5FWVSL.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.VYFAJUCN.js";
+} from "./chunks/chunk.FAMYJDBN.js";
 import {
   SdDivider
-} from "./chunks/chunk.IJKJEQKZ.js";
+} from "./chunks/chunk.OZXJCMQU.js";
 import {
   SdDrawer
-} from "./chunks/chunk.RJG7FDQN.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.EOK7GTLB.js";
+} from "./chunks/chunk.REUL4QMO.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.BAKEFAQ3.js";
+} from "./chunks/chunk.YFF7OIOH.js";
 import {
   SdButton
-} from "./chunks/chunk.ZDM4363V.js";
+} from "./chunks/chunk.NU62KGCW.js";
 import {
   SdSpinner
-} from "./chunks/chunk.VDF7KHYO.js";
+} from "./chunks/chunk.23WUCVW6.js";
 import "./chunks/chunk.KVKRZJS7.js";
-import "./chunks/chunk.JWJRZKES.js";
+import "./chunks/chunk.WLPV5EZN.js";
 import {
   SdCarousel
-} from "./chunks/chunk.MSBRGBZ3.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.EROZOZSD.js";
+} from "./chunks/chunk.THY5BDBS.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.YMMZA3LC.js";
+} from "./chunks/chunk.XVR2P4CC.js";
 import {
   SdAccordion
-} from "./chunks/chunk.KARKPO6D.js";
+} from "./chunks/chunk.6US5BJNM.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunks/chunk.7A4PCELQ.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.LOHV3SQ7.js";
+} from "./chunks/chunk.BZNIT6S5.js";
 import "./chunks/chunk.X2OQMWGY.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.I4JQIHL5.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.GC3PXZ6M.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.XW5FWVSL.js";
-import "../chunks/chunk.GC3PXZ6M.js";
+import "../chunks/chunk.QDCDOA3O.js";
+import "../chunks/chunk.KGZ3GBGJ.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   setupAutocomplete

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",
+  "version": "4.0.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1371,7 +1371,7 @@
             {
               "name": "max-options-tag-label",
               "description": "Label text shown on tag if max-options-visible is reached.",
-              "value": { "type": "string" }
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
@@ -1589,7 +1589,8 @@
               },
               {
                 "name": "maxOptionsTagLabel",
-                "description": "Label text shown on tag if max-options-visible is reached."
+                "description": "Label text shown on tag if max-options-visible is reached.",
+                "type": "string"
               },
               {
                 "name": "disabled",
@@ -4783,7 +4784,7 @@
             {
               "name": "max-options-tag-label",
               "description": "Label text shown on tag if max-options-visible is reached.",
-              "value": { "type": "string" }
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
@@ -4968,7 +4969,8 @@
               },
               {
                 "name": "maxOptionsTagLabel",
-                "description": "Label text shown on tag if max-options-visible is reached."
+                "description": "Label text shown on tag if max-options-visible is reached.",
+                "type": "string"
               },
               {
                 "name": "disabled",

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-select', { detail: { item } });
+        this.emit('sd-4-0-2-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-divider) {
+  ::slotted(sd-4-0-2-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-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-icon>
+          <sd-4-0-2-icon name="check" library="system" aria-hidden="true"></sd-4-0-2-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-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-icon>
+          <sd-4-0-2-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-2-icon>
         </span>
       </div>
     `;

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

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.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-spinner")
+  customElement("sd-4-0-2-spinner")
 ], SdSpinner);
 
 export {

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

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.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-tab"),
-      customElements.whenDefined("sd-4-0-0-tab-panel")
+      customElements.whenDefined("sd-4-0-2-tab"),
+      customElements.whenDefined("sd-4-0-2-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-tab" : el.tagName.toLowerCase() === "sd-4-0-0-tab" && !el.disabled;
+      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-4-0-2-tab" : el.tagName.toLowerCase() === "sd-4-0-2-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-0-0-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-0-2-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-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-0-tab-group");
+    const tab = target.closest("sd-4-0-2-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-2-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-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-0-tab-group");
+    const tab = target.closest("sd-4-0-2-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-4-0-2-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-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-4-0-2-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-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-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-2-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-2-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-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-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-2-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-2-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-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-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-2-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-2-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-tab-group")
+  customElement("sd-4-0-2-tab-group")
 ], SdTabGroup);
 
 export {

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

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.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-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-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-0-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-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-2-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-2-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-2-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-2-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-textarea")
+  customElement("sd-4-0-2-textarea")
 ], SdTextarea);
 
 export {

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

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.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-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-4-0-2-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-radio")
+  customElement("sd-4-0-2-radio")
 ], SdRadio);
 
 export {

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

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.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-map-marker")
+  customElement("sd-4-0-2-map-marker")
 ], SdMapMarker);
 
 export {

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

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.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-notification") === null) {
+          if (toastStack.querySelector("sd-4-0-2-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-icon name="${{
+    )}"><sd-4-0-2-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-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-0-2-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-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-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-0-0-icon></sd-4-0-0-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-2-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-0-2-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-0-2-icon></sd-4-0-2-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-notification")
+  customElement("sd-4-0-2-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.RJG7FDQN.js → chunk.4NORTB4T.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -206,7 +206,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-0-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-0-0-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-0-0-icon></sd-4-0-0-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-0-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-0-2-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-0-2-icon></sd-4-0-2-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDrawer.styles = [
@@ -247,7 +247,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-4-0-0-drawer")
+  customElement("sd-4-0-2-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.C3IVTPFT.js → chunk.5UXE3YAT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.GC3PXZ6M.js";
+} from "./chunk.KGZ3GBGJ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,7 +21,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-4-0-0-tab-${this.attrId}`;
+    this.componentId = `sd-4-0-2-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
@@ -91,7 +91,7 @@ __decorateClass([
   watch("disabled")
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-4-0-0-tab")
+  customElement("sd-4-0-2-tab")
 ], SdTab);
 
 export {