@solid-design-system/components 5.15.12 → 5.16.0-next.0

package/dist-versioned/chunks/{chunk.PPVX563E.js → chunk.32E2WNUE.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-5-15-12-tab-panel-${this.attrId}`;
+    this.componentId = `sd-5-16-0-next-0-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
   }
@@ -36,7 +36,7 @@ var SdTabPanel = class extends SolidElement {
 };
 SdTabPanel.styles = [
   ...SolidElement.styles,
-  css`:host{--padding:0;display:none}:host([active]){display:block}::part(base){padding:var(--padding)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{--padding:0;display:none}:host([active]){display:block}::part(base){padding:var(--padding)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -48,7 +48,7 @@ __decorateClass([
   watch("active")
 ], SdTabPanel.prototype, "handleActiveChange", 1);
 SdTabPanel = __decorateClass([
-  customElement("sd-5-15-12-tab-panel")
+  customElement("sd-5-16-0-next-0-tab-panel")
 ], SdTabPanel);
 
 export {

package/dist-versioned/chunks/{chunk.PRTWW2BW.js → chunk.4ILI3XGP.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -35,13 +35,13 @@ var SdSpinner = class extends SolidElement {
  */
 SdSpinner.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block;height:1em;width:1em}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:inline-block;width:1em;height:1em}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-5-15-12-spinner")
+  customElement("sd-5-16-0-next-0-spinner")
 ], SdSpinner);
 
 export {

package/dist-versioned/chunks/{chunk.HP7WJYO4.js → chunk.574X7EC7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,7 +54,7 @@ var SdTag = class extends SolidElement {
   async hide() {
     this.emit("sd-hide");
     this.style.opacity = "0";
-    await new Promise((resolve) => setTimeout(resolve, this.token("sd-duration-fast", 150)));
+    await new Promise((resolve) => setTimeout(resolve, this.token("--sd-duration-fast", 150)));
     this.hidden = true;
     this.emit("sd-after-hide");
   }
@@ -77,15 +77,15 @@ var SdTag = class extends SolidElement {
       /* colors */
       !this.selected ? cx(
         "border-primary text-primary disabled:border-neutral-500 disabled:text-neutral-500",
-        !this.removable ? "hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500" : "has-[button:hover]:border-primary-500 has-[button:hover]:bg-neutral-100 has-[button:hover]:text-primary-500"
-      ) : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
+        !this.removable ? "hover:border-primary-500 hover:text-primary-500" : "has-[button:hover]:border-primary-500 has-[button:hover]:text-primary-500"
+      ) : "sd-5-16-0-next-0-tag--selected--default-color-background border-primary sd-5-16-0-next-0-tag--selected--default-color-text hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
       this.disabled && !isLink && "cursor-not-allowed"
-    )}"><slot id="content" part="content"></slot>${this.removable && !isLink ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-5-15-12-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-5-15-12-icon></slot></button>` : ""}</${tag}>`;
+    )}"><slot id="content" part="content"></slot>${this.removable && !isLink ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-5-16-0-next-0-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-5-16-0-next-0-icon></slot></button>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block;transition-duration:.15s;transition-duration:var(--sd-duration-fast,.15s);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([size=lg])::part(removable-indicator){font-size:var(--sd-font-size-base,1rem)}:host([size=sm])::part(removable-indicator){font-size:.75rem}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:inline-block;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host([size=lg])::part(removable-indicator){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=sm])::part(removable-indicator){font-size:.75rem}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query("a, button, div")
@@ -115,7 +115,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-5-15-12-tag")
+  customElement("sd-5-16-0-next-0-tag")
 ], SdTag);
 
 export {

package/dist-versioned/chunks/{chunk.5FANE6X5.js → chunk.6LDBZ4S7.js}

@@ -1,9 +1,9 @@
 import {
   library_default_default
-} from "./chunk.7VPFFNHR.js";
+} from "./chunk.KPAQRMCC.js";
 import {
   library_internal_default
-} from "./chunk.5SNCWTQU.js";
+} from "./chunk.H2ALVYPG.js";
 import {
   library_status_default
 } from "./chunk.4TPOL3LB.js";

package/dist-versioned/chunks/{chunk.KVLD4JWK.js → chunk.AAMFU5FW.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
     this.helpText = "";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-5-15-12-checkbox")];
+    return [...this.querySelectorAll("sd-5-16-0-next-0-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
     );
   }
   syncCheckboxes() {
-    if (customElements.get("sd-5-15-12-checkbox")) {
+    if (customElements.get("sd-5-16-0-next-0-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-5-15-12-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-5-16-0-next-0-checkbox").then(() => this.syncCheckboxes());
     }
   }
   handleSizeChange() {
@@ -79,7 +79,7 @@ var SdCheckboxGroup = class extends SolidElement {
  */
 SdCheckboxGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-5-15-12-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-5-15-12-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-5-15-12-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-5-15-12-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-15-12-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-15-12-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block}:host([orientation=vertical]) ::slotted(sd-5-16-0-next-0-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-5-16-0-next-0-checkbox:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-5-16-0-next-0-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-5-16-0-next-0-checkbox:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-16-0-next-0-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-16-0-next-0-checkbox:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -100,7 +100,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-5-15-12-checkbox-group")
+  customElement("sd-5-16-0-next-0-checkbox-group")
 ], SdCheckboxGroup);
 
 export {

package/dist-versioned/chunks/{chunk.IUS3S54L.js → chunk.ACNKTEJM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-5-15-12-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-5-16-0-next-0-radio group flex items-center text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -81,7 +81,7 @@ var SdRadio = class extends SolidElement {
       }[this.size]
     )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
       "flex-initial shrink-0 relative inline-flex items-center justify-center border rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
-      this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
+      this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}"><span part="checked" class="${cx(
       "rounded-full inline-flex text-white bg-accent h-2.5 w-2.5 transition-[transform, colors] duration-medium ease-in-out",
       this.checked ? "scale-100" : "scale-0",
@@ -97,7 +97,7 @@ var SdRadio = class extends SolidElement {
  */
 SdRadio.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){--tw-outline-style:none;outline-style:none}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--sd-border-color-primary,var(--sd-color-primary))}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   state()
@@ -127,7 +127,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-5-15-12-radio")
+  customElement("sd-5-16-0-next-0-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.TMWT3ROD.js → chunk.APBFYE35.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   animateTo,
   stopAnimations
@@ -200,20 +200,20 @@ var SdDrawer = class extends SolidElement {
       "top-0 start-0 w-full h-full pointer-events-none overflow-hidden",
       this.contained ? "absolute" : "fixed"
     )}" aria-label="${this.label}"><div part="overlay" class="${cx(
-      "block top-0 left-0 right-0 bottom-0 bg-neutral-800/75 pointer-events-auto",
+      "block top-0 left-0 right-0 bottom-0 overlay-color-background pointer-events-auto",
       this.contained ? "absolute" : "fixed"
     )}" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
       "absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",
       {
-        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"
+        end: "top-0 end-0 bottom-auto start-auto w-[var(--width)] h-full",
+        start: "top-0 end-auto bottom-auto start-0 w-[var(--width)] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:64px"><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 ms-4 absolute top-2 end-2"><sd-5-15-12-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-5-15-12-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-15-12-icon></sd-5-15-12-button></div></header>` : html`<sd-5-15-12-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-5-15-12-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-15-12-icon></sd-5-15-12-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" 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-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:64px"><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 ms-4 absolute top-2 end-2"><sd-5-16-0-next-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-5-16-0-next-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-16-0-next-0-icon></sd-5-16-0-next-0-button></div></header>` : html`<sd-5-16-0-next-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-5-16-0-next-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-16-0-next-0-icon></sd-5-16-0-next-0-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" 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 = [
   ...SolidElement.styles,
-  css`:host{--width:25rem;display:contents}:host([contained]){z-index:auto}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{--width:25rem;display:contents}:host([contained]){z-index:initial}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}:host [part=panel]{outline:1px solid var(--sd-panel-color-border,transparent)}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -249,7 +249,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-5-15-12-drawer")
+  customElement("sd-5-16-0-next-0-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.7UTPAUSQ.js → chunk.B4UN2MRL.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -94,7 +94,7 @@ var SdExpandable = class extends SolidElement {
     )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}"><span part="toggle-icon" class="${cx(
       "flex items-center mr-2 transition-transform duration-medium ease-in-out",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-15-12-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-15-12-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-15-12-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-15-12-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-16-0-next-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-16-0-next-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-16-0-next-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-16-0-next-0-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -113,7 +113,11 @@ var SdExpandable = class extends SolidElement {
 };
 SdExpandable.styles = [
   ...SolidElement.styles,
-  css`:host{--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(--gradient-color-start,hsla(0,0%,100%,0)) 0%,var(--gradient-color-end,#fff) 80%,var(--gradient-color-end,#fff) 100%;display:inline-block;position:relative;width:100%}.toggle::-moz-focus-inner{border-style:none;padding:var(--sd-spacing-0,0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content,:host:has(.transitioning) .content{max-block-size:var(--max-height-pixel,1000vh)}.content:after{background:linear-gradient(180deg,var(--gradient));bottom:var(--sd-spacing-0,0);content:" ";display:block;height:var(--gradient-height);left:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);position:absolute;transition-duration:.15s;transition-duration:var(--sd-duration-medium,.3s);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}:host([inverted]){--color-primary-rgb:0,53,142;--gradient-color-start:rgba(var(--color-primary-rgb),0);--gradient-color-end:rgba(var(--color-primary-rgb),1)}:host([inverted]) .content:after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,var(--gradient)))}:host(:not([open])) .content:after{opacity:var(--sd-opacity-100,1)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(
+              --gradient-color-start,
+              transparent,
+              var(--gradient-color-end, var(--sd-color-background-white, var(--sd-color-white)))
+            ) 80%,var(--gradient-color-end, var(--sd-color-background-white, var(--sd-color-white))) 100%;position:relative;display:inline-block;width:100%}.toggle::-moz-focus-inner{--tw-border-style:none;border-style:none;padding:calc(var(--sd-spacing-1) * 0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content,:host:has(.transitioning) .content{max-block-size:var(--max-height-pixel,1000vh)}.content::after{position:absolute;bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);display:block;width:100%;opacity:var(--sd-opacity-0);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));content:' ';height:var(--gradient-height);background:linear-gradient(180deg,var(--gradient))}:host([inverted]){--color-primary-rgb:0,53,142;--gradient-color-start:rgba(var(--color-primary-rgb), 0);--gradient-color-end:rgba(var(--color-primary-rgb), 1)}:host([inverted]) .content::after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,var(--gradient)))}:host(:not([open])) .content::after{opacity:var(--sd-opacity-100)}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query(".content-preview")
@@ -134,7 +138,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-5-15-12-expandable")
+  customElement("sd-5-16-0-next-0-expandable")
 ], SdExpandable);
 setDefaultAnimation("expandable.show", {
   keyframes: [{ height: "var(--component-expandable-max-block-size, 90px)" }, { height: "auto" }],

package/dist-versioned/chunks/{chunk.I7VRBYGO.js → chunk.BV5PXCAM.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -66,7 +66,7 @@ var SdRadioButton = class extends SolidElement {
     return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
       "relative text-center rounded-full transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline",
       this.size === "sm" ? "text-sm" : "text-base",
-      this.checked && !this.disabled && !this.visuallyDisabled ? "bg-primary text-white hover:bg-primary-500" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent text-primary border-primary hover:text-primary-500 cursor-pointer",
+      this.checked && !this.disabled && !this.visuallyDisabled ? "sd-5-16-0-next-0-button--primary--default-color-background sd-5-16-0-next-0-button--primary--default-color-text hover:sd-5-16-0-next-0-button--primary--hover-color-background" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent text-primary border-primary hover:text-primary-500 cursor-pointer",
       hasDefaultSlot && {
         sm: "px-3",
         md: "px-4",
@@ -88,7 +88,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{padding-left:var(--sd-spacing-5,1.25rem);padding-right:var(--sd-spacing-5,1.25rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{padding-left:var(--sd-spacing-3,.75rem);padding-right:var(--sd-spacing-3,.75rem)}:host([size=lg].sd-5-15-12-button-group__button:not(.sd-5-15-12-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3,.75rem)*-1)}:host([size=md].sd-5-15-12-button-group__button:not(.sd-5-15-12-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2,.5rem)*-1)}:host([size=sm].sd-5-15-12-button-group__button:not(.sd-5-15-12-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1,.25rem)*-1)}:host(.sd-5-15-12-button-group__button--hover){z-index:20}:host(.sd-5-15-12-button-group__button--focus),:host(.sd-5-15-12-button-group__button[checked]){z-index:10}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:calc(var(--sd-spacing-1) * 0);z-index:calc(10 * -1);opacity:var(--sd-opacity-0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--sd-border-color-error,var(--sd-color-error));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:var(--sd-spacing-12)}.lg-no-label{height:var(--sd-spacing-12);padding-inline:calc(var(--sd-spacing-1) * 5)}.md-label{height:var(--sd-spacing-10)}.md-no-label{height:var(--sd-spacing-10);padding-inline:var(--sd-spacing-4)}.sm-label{height:var(--sd-spacing-8)}.sm-no-label{height:var(--sd-spacing-8);padding-inline:var(--sd-spacing-3)}:host([size=lg].sd-5-16-0-next-0-button-group__button:not(.sd-5-16-0-next-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3) * -1)}:host([size=md].sd-5-16-0-next-0-button-group__button:not(.sd-5-16-0-next-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2) * -1)}:host([size=sm].sd-5-16-0-next-0-button-group__button:not(.sd-5-16-0-next-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1) * -1)}:host(.sd-5-16-0-next-0-button-group__button--hover){z-index:20}:host(.sd-5-16-0-next-0-button-group__button--focus),:host(.sd-5-16-0-next-0-button-group__button[checked]){z-index:10}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query(".button")
@@ -118,7 +118,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-5-15-12-radio-button")
+  customElement("sd-5-16-0-next-0-radio-button")
 ], SdRadioButton);
 
 export {

package/dist-versioned/chunks/{chunk.HYPCYXQP.js → chunk.CNNLNYSJ.js}

@@ -2,7 +2,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.5FANE6X5.js";
+} from "./chunk.6LDBZ4S7.js";
 import {
   requestIcon
 } from "./chunk.P52GZVKG.js";
@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,9 +41,16 @@ var SdIcon = class extends SolidElement {
     super.disconnectedCallback();
     unwatchIcon(this);
   }
+  onThemeChange(theme) {
+    this.theme = theme;
+    this.setIcon();
+  }
   getUrl() {
     const library = getIconLibrary(this.library);
     if (this.name && library) {
+      if (library.name === "_internal" && this.theme) {
+        return library.resolver(`${this.theme}--${this.name}`);
+      }
       return library.resolver(this.name);
     }
     return this.src;
@@ -99,7 +106,7 @@ var SdIcon = class extends SolidElement {
 };
 SdIcon.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:content-box!important;display:inline-block;height:1em;width:1em}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity,1))}:host([color=white]) svg{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity,1))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{width:1em;height:1em;box-sizing:content-box!important;display:inline-block}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{color:var(--sd-color-text-primary,var(--sd-color-primary))}:host([color=white]) svg{color:var(--sd-color-text-white,var(--sd-color-white))}`
 ];
 __decorateClass([
   state()
@@ -119,14 +126,17 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], SdIcon.prototype, "color", 2);
+__decorateClass([
+  state()
+], SdIcon.prototype, "theme", 2);
 __decorateClass([
   watch("label")
 ], SdIcon.prototype, "handleLabelChange", 1);
 __decorateClass([
-  watch(["name", "src", "library"])
+  watch(["name", "src", "library", "theme"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-5-15-12-icon")
+  customElement("sd-5-16-0-next-0-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/{chunk.JOYITBGJ.js → chunk.CP4YEFPU.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -55,7 +55,7 @@ var SdStepGroup = class extends SolidElement {
     });
   }
   getAllSteps() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-15-12-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-16-0-next-0-step");
   }
   /**
    * Sets the active step.
@@ -90,7 +90,7 @@ var SdStepGroup = class extends SolidElement {
 };
 SdStepGroup.styles = [
   ...SolidElement.styles,
-  css`:host{width:-moz-max-content;width:max-content}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{width:-moz-max-content;width:max-content}`
 ];
 __decorateClass([
   query("[part=body]")
@@ -120,7 +120,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-5-15-12-step-group")
+  customElement("sd-5-16-0-next-0-step-group")
 ], SdStepGroup);
 
 export {

package/dist-versioned/chunks/{chunk.DQ6G3W3V.js → chunk.CWHFEZQY.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -75,13 +75,13 @@ var SdOption = class extends SolidElement {
       right: this.hasSlotController.test("right")
     };
     return html`<div part="base" class="${cx(
-      "px-4 flex items-center w-full transition-colors duration-fast ease-in-out text-left text-base relative text-black",
+      "px-4 flex items-center w-full transition-colors duration-fast ease-in-out text-left text-base relative",
       {
         sm: "text-sm py-1",
         md: "text-base py-2",
         lg: "text-base py-3"
       }[this.size],
-      this.disabled ? "text-neutral-700 cursor-not-allowed" : "cursor-pointer",
+      this.disabled ? "text-neutral-500 cursor-not-allowed" : "text-black cursor-pointer",
       this.hasHover && !this.disabled ? "bg-neutral-200" : "",
       this.isKeyboardFocus ? "focus-outline focus-outline-offset" : "",
       this.current && "bg-neutral-200"
@@ -92,8 +92,8 @@ var SdOption = class extends SolidElement {
       !this.disabled && this.hasHover ? "h-full top-0" : "top-1"
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
-      this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "bg-white border-neutral-800"
-    )}">${this.selected ? html`<sd-5-15-12-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-15-12-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+      this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
+    )}">${this.selected ? html`<sd-5-16-0-next-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-16-0-next-0-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 /**
@@ -101,7 +101,7 @@ var SdOption = class extends SolidElement {
  */
 SdOption.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;outline:2px solid transparent!important;outline-offset:2px!important;position:relative;width:100%}.focus-outline-offset{outline-offset:-2px}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{position:relative;display:block;width:100%;--tw-outline-style:none!important;outline-style:none!important}.focus-outline-offset{outline-offset:-2px}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -140,7 +140,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-5-15-12-option")
+  customElement("sd-5-16-0-next-0-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.23KFQ6DK.js → chunk.D3JBFWTU.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   animateTo,
   stopAnimations
@@ -180,15 +180,15 @@ var SdDialog = class extends SolidElement {
     return html`<div part="base" class="${cx(
       "flex items-center justify-center fixed inset-0 z-dialog",
       this.hasSlotController.test("footer") && "dialog--has-footer"
-    )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
-      "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
+    )}"><div part="overlay" class="fixed inset-0 overlay-color-background opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
+      "panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-5-15-12-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-5-15-12-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-15-12-icon></sd-5-15-12-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-5-16-0-next-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-5-16-0-next-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-16-0-next-0-icon></sd-5-16-0-next-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
   ...SolidElement.styles,
-  css`:host{--width:662px}[part=panel]{max-height:80vh;width:var(--width)}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{--width:662px}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -212,7 +212,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-5-15-12-dialog")
+  customElement("sd-5-16-0-next-0-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [