@solid-design-system/components 4.5.3 → 4.6.0

package/dist-versioned/chunks/{chunk.IAJPZG3C.js → chunk.GJ5ZL7G4.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.G37Y7IVD.js";
+} from "./chunk.E34LORFJ.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -9,7 +9,7 @@ import {
 } from "./chunk.KVKRZJS7.js";
 import {
   SdButtonGroup
-} from "./chunk.XMUDNUDW.js";
+} from "./chunk.2IOIJOEY.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -77,10 +77,10 @@ var SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    return [...this.querySelectorAll("sd-4-5-3-radio, sd-4-5-3-radio-button")];
+    return [...this.querySelectorAll("sd-4-6-0-radio, sd-4-6-0-radio-button")];
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-4-5-3-radio, sd-4-5-3-radio-button");
+    const target = event.target.closest("sd-4-6-0-radio, sd-4-6-0-radio-button");
     const radios = this.getAllRadios();
     const oldValue = this.value;
     if (target.disabled) {
@@ -157,7 +157,7 @@ var SdRadioGroup = class extends SolidElement {
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-5-3-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-6-0-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -169,26 +169,26 @@ var SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-5-3-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-6-0-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-4-5-3-radio") && customElements.get("sd-4-5-3-radio-button")) {
+    if (customElements.get("sd-4-6-0-radio") && customElements.get("sd-4-6-0-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-4-5-3-radio")) {
+    if (customElements.get("sd-4-6-0-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-4-5-3-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-4-6-0-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-4-5-3-radio-button")) {
+    if (customElements.get("sd-4-6-0-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-4-5-3-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-4-6-0-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -267,16 +267,16 @@ var SdRadioGroup = class extends SolidElement {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-5-3-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-4-5-3-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-6-0-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-4-6-0-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
   }
 };
-SdRadioGroup.dependencies = { "sd-4-5-3-button-group": SdButtonGroup };
+SdRadioGroup.dependencies = { "sd-4-6-0-button-group": SdButtonGroup };
 /**
  * Inherits Tailwind classes and includes additional styling.
  */
 SdRadioGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-5-3-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-5-3-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-5-3-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-5-3-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-5-3-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-5-3-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-0-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-6-0-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-6-0-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-6-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-0-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -333,7 +333,7 @@ __decorateClass([
   watch("value")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-4-5-3-radio-group")
+  customElement("sd-4-6-0-radio-group")
 ], SdRadioGroup);
 
 export {

package/dist-versioned/chunks/{chunk.V7WU4CMK.js → chunk.IM5JZDS3.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -211,7 +211,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}" ?visually-disabled="${this.visuallyDisabled}" 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}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-5-3-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-5-3-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-5-3-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-5-3-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", 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}" ?visually-disabled="${this.visuallyDisabled}" 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}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-6-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-6-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-6-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-6-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -325,7 +325,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-4-5-3-textarea")
+  customElement("sd-4-6-0-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.4KQX3YKY.js → chunk.ITN656DK.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -68,7 +68,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-4-5-3-include")
+  customElement("sd-4-6-0-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.7VNCOUWO.js → chunk.J6PAMLVK.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -323,7 +323,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-4-5-3-popup")
+  customElement("sd-4-6-0-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.JE7PBXXX.js → chunk.JFU6G72P.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -209,7 +209,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-labelledby="label" tabindex="0"><p class="sr-only" id="label">${this.label}</p>${!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-5-3-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-5-3-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-5-3-icon></sd-4-5-3-button></div></header>` : html`<sd-4-5-3-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-4-5-3-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-5-3-icon></sd-4-5-3-button>`}<div part="body" class="flex-auto block px-4" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
+    )}" role="dialog" aria-modal="true" aria-labelledby="label" tabindex="0"><p class="sr-only" id="label">${this.label}</p>${!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-6-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-6-0-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-6-0-icon></sd-4-6-0-button></div></header>` : html`<sd-4-6-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-4-6-0-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-6-0-icon></sd-4-6-0-button>`}<div part="body" class="flex-auto block px-4" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
   }
 };
 SdDrawer.styles = [
@@ -250,7 +250,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-4-5-3-drawer")
+  customElement("sd-4-6-0-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/chunk.KVKRZJS7.js

@@ -15,7 +15,7 @@ var FormControlController = class {
       const disabled = this.options.disabled(this.host);
       const name = this.options.name(this.host);
       const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-4-5-3-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-4-6-0-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -40,7 +40,7 @@ var FormControlController = class {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-4-5-3-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-4-6-0-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;
@@ -88,7 +88,7 @@ var FormControlController = class {
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-4-5-3-input"]
+      assumeInteractionOn: ["sd-4-6-0-input"]
     }, options);
   }
   hostConnected() {

package/dist-versioned/chunks/{chunk.SEAUN4X5.js → chunk.LC3D4URT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -85,7 +85,7 @@ var SdRadioButton = class extends SolidElement {
 };
 SdRadioButton.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-5-3-button-group__button--first:not(.sd-4-5-3-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-4-5-3-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-4-5-3-button-group__button--last:not(.sd-4-5-3-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-4-5-3-button-group__button:not(.sd-4-5-3-button-group__button--first)){margin-inline-start:-1px}:host(.sd-4-5-3-button-group__button--hover){z-index:10}:host(.sd-4-5-3-button-group__button--focus),:host(.sd-4-5-3-button-group__button[checked]){z-index:20}`
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-6-0-button-group__button--first:not(.sd-4-6-0-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-0-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-0-button-group__button--last:not(.sd-4-6-0-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-0-button-group__button:not(.sd-4-6-0-button-group__button--first)){margin-inline-start:-1px}:host(.sd-4-6-0-button-group__button--hover){z-index:10}:host(.sd-4-6-0-button-group__button--focus),:host(.sd-4-6-0-button-group__button[checked]){z-index:20}`
 ];
 __decorateClass([
   query(".button")
@@ -115,7 +115,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-4-5-3-radio-button")
+  customElement("sd-4-6-0-radio-button")
 ], SdRadioButton);
 
 export {

package/dist-versioned/chunks/{chunk.VFC3SCSY.js → chunk.M5FMORVS.js}

@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -142,7 +142,7 @@ var SdAccordion = class extends SolidElement {
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-0-icon library="system" name="chevron-down"></sd-4-6-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-0-icon library="system" name="chevron-down"></sd-4-6-0-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -168,7 +168,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-4-5-3-accordion")
+  customElement("sd-4-6-0-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.WQ4TYFW3.js → chunk.MQ6ICGPI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-5-3-teaser")
+  customElement("sd-4-6-0-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.JIG7HDOK.js → chunk.MVNSX2YV.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.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-5-3-tab-${this.attrId}`;
+    this.componentId = `sd-4-6-0-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-5-3-tab")
+  customElement("sd-4-6-0-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.EON7Z22N.js → chunk.NEKLPVFO.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -154,7 +154,6 @@ var SdButton = class extends SolidElement {
         border transition-colors duration-200 ease-in-out rounded-default
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
-      this.visuallyDisabled && "focus-visible:outline-none",
       this.loading && "relative cursor-wait",
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
       slots["icon-only"] && "px-0 w-varspacing",
@@ -202,7 +201,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-4-5-3-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-5-3-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-4-6-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-6-0-spinner>` : ""}</${tag}>`;
   }
 };
 /**
@@ -210,13 +209,13 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-5-3-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-5-3-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-5-3-icon),sd-4-5-3-spinner{font-size:calc(var(--tw-varspacing)/2)}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-6-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-6-0-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-6-0-icon),sd-4-6-0-spinner{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-5-3-icon" })
+  queryAssignedElements({ selector: "sd-4-6-0-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -282,7 +281,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-4-5-3-button")
+  customElement("sd-4-6-0-button")
 ], SdButton);
 
 export {

package/dist-versioned/chunks/{chunk.6S3CCHLZ.js → chunk.OJPRPWQ6.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-4-5-3-animation")
+  customElement("sd-4-6-0-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.QWZA3TLI.js → chunk.OL2UOEVU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-5-3-divider[orientation=horizontal]){display:block}:host(sd-4-5-3-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-0-divider[orientation=horizontal]){display:block}:host(sd-4-6-0-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-4-5-3-divider")
+  customElement("sd-4-6-0-divider")
 ], SdDivider);
 
 export {

package/dist-versioned/chunks/{chunk.SH45GYZL.js → chunk.OXBXUGWH.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-4-5-3-icon")
+  customElement("sd-4-6-0-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/{chunk.HJ3ZUH4A.js → chunk.R5NZJWEY.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -90,7 +90,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "onResize", 1);
 SdHeader = __decorateClass([
-  customElement("sd-4-5-3-header")
+  customElement("sd-4-6-0-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.NF4TXS55.js → chunk.R5XFXSJX.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -92,7 +92,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-4-5-3-map-marker")
+  customElement("sd-4-6-0-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.KSYD4JIL.js → chunk.ROZOXNYF.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.VFC3SCSY.js";
+} from "./chunk.M5FMORVS.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,10 +64,10 @@ var SdQuickfact = class extends SdAccordion {
       !this.expandable && "hidden"
     )}
             ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
-              <sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon>
+              <sd-4-6-0-icon library="system" name="chevron-down"></sd-4-6-0-icon>
             </slot>
             <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
-              <sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon> </slot
+              <sd-4-6-0-icon library="system" name="chevron-down"></sd-4-6-0-icon> </slot
           ></span>
         </${header}>
         <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
@@ -85,7 +85,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-4-5-3-quickfact")
+  customElement("sd-4-6-0-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.AVS4VJXO.js → chunk.RTCWEXYZ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`::slotted(sd-4-5-3-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-4-5-3-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-4-5-3-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
+  css`::slotted(sd-4-6-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-4-6-0-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-4-6-0-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-4-5-3-link")
+  customElement("sd-4-6-0-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.7JAL5UCT.js → chunk.S6S34HGU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.5O6BWTAZ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -168,7 +168,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-4-5-3-switch")
+  customElement("sd-4-6-0-switch")
 ], SdSwitch);
 
 export {