@solid-design-system/components 6.16.1 → 6.16.2

package/dist-versioned/chunks/{chunk.LQFP4TQA.js → chunk.JID3PBFI.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */
-        blue: !this.inverted ? "text-white  sd-6-16-1-badge--blue-color-background border-white" : "sd-6-16-1-badge--blue--inverted-color-text sd-6-16-1-badge--blue--inverted-color-background sd-6-16-1-badge--inverted-color-border",
-        green: !this.inverted ? "text-white sd-6-16-1-badge--green-color-background border-white" : "sd-6-16-1-badge--green-color--inverted-text sd-6-16-1-badge--green-color--inverted-background sd-6-16-1-badge--inverted-color-border",
-        red: !this.inverted ? "text-white sd-6-16-1-badge--red-color-background border-white" : "sd-6-16-1-badge--red--inverted-text sd-6-16-1-badge--red--inverted-background sd-6-16-1-badge--inverted-color-border"
+        blue: !this.inverted ? "text-white  sd-6-16-2-badge--blue-color-background border-white" : "sd-6-16-2-badge--blue--inverted-color-text sd-6-16-2-badge--blue--inverted-color-background sd-6-16-2-badge--inverted-color-border",
+        green: !this.inverted ? "text-white sd-6-16-2-badge--green-color-background border-white" : "sd-6-16-2-badge--green-color--inverted-text sd-6-16-2-badge--green-color--inverted-background sd-6-16-2-badge--inverted-color-border",
+        red: !this.inverted ? "text-white sd-6-16-2-badge--red-color-background border-white" : "sd-6-16-2-badge--red--inverted-text sd-6-16-2-badge--red--inverted-background sd-6-16-2-badge--inverted-color-border"
       }[this.variant]
     )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
   }
@@ -44,7 +44,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-6-16-1-badge")
+  customElement("sd-6-16-2-badge")
 ], SdBadge);
 
 export {

package/dist-versioned/chunks/{chunk.F4SSJ3OK.js → chunk.JNI3S2KE.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   animateTo,
   stopAnimations
@@ -208,7 +208,7 @@ var SdDrawer = class extends SolidElement {
         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-6-16-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-16-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-16-1-icon></sd-6-16-1-button></div></header>` : html`<sd-6-16-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-16-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-16-1-icon></sd-6-16-1-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-6-16-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-16-2-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-16-2-icon></sd-6-16-2-button></div></header>` : html`<sd-6-16-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-16-2-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-16-2-icon></sd-6-16-2-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 = [
@@ -250,7 +250,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-6-16-1-drawer")
+  customElement("sd-6-16-2-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

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

@@ -48,7 +48,7 @@ var SubmenuController = class {
       if (event.target === this.host) {
         event.preventDefault();
         event.stopPropagation();
-      } else if (event.target instanceof Element && (event.target.tagName === "sd-6-16-1-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-6-16-2-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
         const type = event.target.getAttribute("type");
         if (type !== "checkbox") {
           this.disableSubmenu();
@@ -69,7 +69,7 @@ var SubmenuController = class {
     // Set the safe triangle values for the submenu when the position changes
     this.handlePopupReposition = () => {
       const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
-      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-6-16-1-menu")[0];
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-6-16-2-menu")[0];
       const isRtl = getComputedStyle(this.host).direction === "rtl";
       if (!menu) {
         return;
@@ -141,7 +141,7 @@ var SubmenuController = class {
     }
     let menuItems = null;
     for (const elt of submenuSlot.assignedElements()) {
-      menuItems = elt.querySelectorAll("sd-6-16-1-menu-item, [role^='menuitem']");
+      menuItems = elt.querySelectorAll("sd-6-16-2-menu-item, [role^='menuitem']");
       if (menuItems.length !== 0) {
         break;
       }
@@ -220,7 +220,7 @@ var SubmenuController = class {
     if (!this.isConnected) {
       return html`<slot name="submenu" hidden></slot>`;
     }
-    return html`<sd-6-16-1-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-6-16-1-popup>`;
+    return html`<sd-6-16-2-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-6-16-2-popup>`;
   }
 };
 

package/dist-versioned/chunks/{chunk.7BBBC4LC.js → chunk.L5WQTPWN.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -91,14 +91,14 @@ var SdOption = class extends SolidElement {
       this.disabled && "border-neutral-500 top-1",
       !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 sd-6-16-1-checkbox-border-width rounded-sm h-4 w-4 mr-2",
+      "relative flex flex-shrink-0 items-center justify-center border sd-6-16-2-checkbox-border-width rounded-sm h-4 w-4 mr-2",
       {
         sm: "mt-0.5",
         md: "mt-1",
         lg: "mt-1"
       }[this.size],
-      this.disabled ? "sd-6-16-1-option--disabled-color-border" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
-    )}">${this.selected ? html`<sd-6-16-1-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-16-1-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 ? "sd-6-16-2-option--disabled-color-border" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
+    )}">${this.selected ? html`<sd-6-16-2-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-16-2-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>`;
   }
 };
 /**
@@ -107,7 +107,7 @@ var SdOption = class extends SolidElement {
 SdOption.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;display:block;width:100%;--tw-outline-style:none!important;outline-style:none!important}.focus-outline-offset{outline-offset:-2px}.sd-6-16-1-option--disabled-color-border{border-color:rgb(var(--sd-option--disabled-color-border))}`
+:host{position:relative;display:block;width:100%;--tw-outline-style:none!important;outline-style:none!important}.focus-outline-offset{outline-offset:-2px}.sd-6-16-2-option--disabled-color-border{border-color:rgb(var(--sd-option--disabled-color-border))}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -146,7 +146,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-6-16-1-option")
+  customElement("sd-6-16-2-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.4UDWRELW.js → chunk.MU4ARXB6.js}

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

package/dist-versioned/chunks/{chunk.AFXQPWOT.js → chunk.N74J2PD2.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white/75 rounded-full play-pause-transition group-focus-visible:outline-2 group-focus-visible:outline-offset-2"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-6-16-1-icon id="default-play-icon" library="_internal" name="start"></sd-6-16-1-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-6-16-2-icon id="default-play-icon" library="_internal" name="start"></sd-6-16-2-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,7 +116,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-6-16-1-video")
+  customElement("sd-6-16-2-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.PBISMPN4.js → chunk.NAPTGGU6.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -100,7 +100,7 @@ var SdIcon = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-6-16-1-theme-listener></sd-6-16-1-theme-listener>${unsafeSVG(this.svg)}`;
+    return html`<sd-6-16-2-theme-listener></sd-6-16-2-theme-listener>${unsafeSVG(this.svg)}`;
   }
 };
 SdIcon.styles = [
@@ -133,7 +133,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-6-16-1-icon")
+  customElement("sd-6-16-2-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/{chunk.PIOYH3TM.js → chunk.NNLMYT4Y.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -87,7 +87,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-6-16-1-button part="front-button" size="md" variant="${{
+    )}"></div><sd-6-16-2-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -97,7 +97,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-6-16-1-icon library="_internal" name="reload" label="Flip to Back"></sd-6-16-1-icon></sd-6-16-1-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-6-16-2-icon library="_internal" name="reload" label="Flip to Back"></sd-6-16-2-icon></sd-6-16-2-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -130,7 +130,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-6-16-1-button size="md" part="back-button" variant="${{
+    )}"></div><sd-6-16-2-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -140,7 +140,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-6-16-1-icon library="_internal" name="reload" label="Flip to Front"></sd-6-16-1-icon></sd-6-16-1-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-6-16-2-icon library="_internal" name="reload" label="Flip to Front"></sd-6-16-2-icon></sd-6-16-2-button></div></div>`;
   }
 };
 /**
@@ -176,7 +176,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-6-16-1-flipcard")
+  customElement("sd-6-16-2-flipcard")
 ], SdFlipcard);
 
 export {

package/dist-versioned/chunks/{chunk.SP3UZWV2.js → chunk.NVSTD2DO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -209,7 +209,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-6-16-1-animation")
+  customElement("sd-6-16-2-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.VASBQKR7.js → chunk.O5LCY7TO.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -324,7 +324,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-6-16-1-popup")
+  customElement("sd-6-16-2-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.R6MGPVBY.js → chunk.ONQ4DNCZ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
     this.isTruncated = false;
   }
   get items() {
-    return this.querySelectorAll("sd-6-16-1-breadcrumb-item");
+    return this.querySelectorAll("sd-6-16-2-breadcrumb-item");
   }
   cacheItemPositions() {
     this.items.forEach((item) => {
@@ -67,12 +67,12 @@ var SdBreadcrumb = class extends SolidElement {
   }
   handleMobileChevron() {
     var _a, _b, _c;
-    const icon = document.createElement("sd-6-16-1-icon");
+    const icon = document.createElement("sd-6-16-2-icon");
     icon.setAttribute("slot", "icon-left");
     icon.setAttribute("library", "_internal");
     icon.setAttribute("name", "chevron-left");
     icon.setAttribute("class", "text-base me-1 lg:hidden");
-    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-16-1-link")) == null ? void 0 : _c.appendChild(icon);
+    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-16-2-link")) == null ? void 0 : _c.appendChild(icon);
   }
   handleSlotChange() {
     this.handleMobileChevron();
@@ -87,13 +87,13 @@ var SdBreadcrumb = class extends SolidElement {
     this.resizeObserver.unobserve(this);
   }
   render() {
-    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-16-1-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-16-1-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
+    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-16-2-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-16-2-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
   }
 };
 SdBreadcrumb.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block}::slotted(sd-6-16-1-breadcrumb-item:not(:last-of-type))::after,sd-6-16-1-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-16-1-breadcrumb-item:not(:last-of-type))::after,sd-6-16-1-dropdown::after{display:inline-block}}::slotted(sd-6-16-1-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-16-1-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,rgba(var(--sd-color-accent))))}}::slotted(sd-6-16-1-breadcrumb-item),sd-6-16-1-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-16-1-breadcrumb-item),sd-6-16-1-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{position:relative;display:block}::slotted(sd-6-16-2-breadcrumb-item:not(:last-of-type))::after,sd-6-16-2-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-16-2-breadcrumb-item:not(:last-of-type))::after,sd-6-16-2-dropdown::after{display:inline-block}}::slotted(sd-6-16-2-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-16-2-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,rgba(var(--sd-color-accent))))}}::slotted(sd-6-16-2-breadcrumb-item),sd-6-16-2-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-16-2-breadcrumb-item),sd-6-16-2-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -117,7 +117,7 @@ __decorateClass([
   state()
 ], SdBreadcrumb.prototype, "isTruncated", 2);
 SdBreadcrumb = __decorateClass([
-  customElement("sd-6-16-1-breadcrumb")
+  customElement("sd-6-16-2-breadcrumb")
 ], SdBreadcrumb);
 
 export {

package/dist-versioned/chunks/{chunk.GYT2MOIG.js → chunk.PAAXLQEE.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -102,18 +102,18 @@ var SdMenuItem = class extends SolidElement {
     };
     return html`<div id="anchor" part="base" class="${cx(
       "relative flex items-stretch whitespace-nowrap py-3 px-4 no-wrap !navigable-border-radius",
-      this.disabled ? "outline-none cursor-not-allowed sd-6-16-1-menu--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-6-16-1-menu-color-text hover:bg-neutral-200",
+      this.disabled ? "outline-none cursor-not-allowed sd-6-16-2-menu--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-6-16-2-menu-color-text hover:bg-neutral-200",
       this.isSubmenu() && isSubmenuExpanded && "submenu-expanded"
     )}" .disabled="${this.disabled}" ?aria-haspopup="${this.isSubmenu()}" ?aria-expanded="${isSubmenuExpanded ? true : false}">${this.type === "checkbox" ? html`<span part="checked-icon" class="${cx(
       "flex items-center justify-center grow-0 shrink-0 basis-auto",
       this.checked ? "visible" : "invisible"
-    )}"><sd-6-16-1-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-6-16-1-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-6-16-1-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-6-16-1-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
+    )}"><sd-6-16-2-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-6-16-2-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-6-16-2-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-6-16-2-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
   }
 };
 SdMenuItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-6-16-1-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary));outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary));outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-6-16-1-menu-color-icon variable replacing with sd-6-16-1-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-6-16-1-menu--disabled-color-icon variable replacing with sd-6-16-1-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-6-16-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-6-16-1-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-6-16-1-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-6-16-1-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-6-16-2-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary));outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary));outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-6-16-2-menu-color-icon variable replacing with sd-6-16-2-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-6-16-2-menu--disabled-color-icon variable replacing with sd-6-16-2-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-6-16-2-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-6-16-2-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-6-16-2-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-6-16-2-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -146,7 +146,7 @@ __decorateClass([
   watch("type")
 ], SdMenuItem.prototype, "handleTypeChange", 1);
 SdMenuItem = __decorateClass([
-  customElement("sd-6-16-1-menu-item")
+  customElement("sd-6-16-2-menu-item")
 ], SdMenuItem);
 
 export {

package/dist-versioned/chunks/{chunk.SVQ4W63O.js → chunk.PDVDXT7L.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -57,13 +57,13 @@ var SdTeaser = class extends SolidElement {
       "teaser-has-headline": this.hasSlotController.test("headline")
     };
     return html`<div class="${cx(
-      "flex sd-6-16-1-teaser-border-radius",
+      "flex sd-6-16-2-teaser-border-radius",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-16-1-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-16-1-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-16-2-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-16-2-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-16-1-teaser--primary-100-color-background"
+        "primary-100": "sd-6-16-2-teaser--primary-100-color-background"
       }[this.variant],
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
@@ -105,7 +105,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-6-16-1-teaser")
+  customElement("sd-6-16-2-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.3IATPYUU.js → chunk.Q2LD7K7G.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.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-6-16-1-tab-panel-${this.attrId}`;
+    this.componentId = `sd-6-16-2-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
   }
@@ -49,7 +49,7 @@ __decorateClass([
   watch("active")
 ], SdTabPanel.prototype, "handleActiveChange", 1);
 SdTabPanel = __decorateClass([
-  customElement("sd-6-16-1-tab-panel")
+  customElement("sd-6-16-2-tab-panel")
 ], SdTabPanel);
 
 export {

package/dist-versioned/chunks/{chunk.GGTTE3O5.js → chunk.REB4VPRZ.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.V7PNN6GB.js";
+} from "./chunk.V2SCLPWH.js";
 import {
   __decorateClass,
   __spreadValues
@@ -414,14 +414,14 @@ var SdInput = class extends SolidElement {
       !isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? textSize : "text-xs",
       (this.visuallyDisabled || this.disabled) && "text-neutral-500",
       isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
-    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-16-1-icon class="${cx(
+    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-16-2-icon class="${cx(
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
       iconSize
-    )}" library="_internal" name="closing-round"></sd-6-16-1-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
+    )}" library="_internal" name="closing-round"></sd-6-16-2-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
       "flex items-center sd-interactive",
       iconMarginLeft,
       this.floatingLabel && !isFloatingLabelActive && "hide-password-toggle"
-    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-16-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-6-16-1-icon></slot>` : html`<slot name="hide-password-icon"><sd-6-16-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-6-16-1-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-6-16-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-16-1-icon>` : ""} ${this.type === "time" ? html`<sd-6-16-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-6-16-1-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-6-16-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-16-1-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-16-1-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-16-1-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-16-1-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-16-1-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-6-16-1-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-16-1-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-6-16-1-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-16-1-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
+    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-16-2-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-6-16-2-icon></slot>` : html`<slot name="hide-password-icon"><sd-6-16-2-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-6-16-2-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-6-16-2-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-16-2-icon>` : ""} ${this.type === "time" ? html`<sd-6-16-2-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-6-16-2-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-6-16-2-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-16-2-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-16-2-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-16-2-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-16-2-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-16-2-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-6-16-2-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-16-2-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-6-16-2-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-16-2-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 /**
@@ -430,7 +430,7 @@ var SdInput = class extends SolidElement {
 SdInput.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-16-1-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgb(var(--sd-color-icon-fill-primary))}`
+:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-16-2-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgb(var(--sd-color-icon-fill-primary))}`
 ];
 __decorateClass([
   query("#input")
@@ -569,7 +569,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdInput.prototype, "handleSizeChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-6-16-1-input")
+  customElement("sd-6-16-2-input")
 ], SdInput);
 
 export {