@solid-design-system/components 4.12.0 → 5.0.1

package/dist/chunks/{chunk.X7IRGFBS.js → chunk.P3M4RPHM.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JNJHWACL.js → chunk.P4BL4RSV.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -144,7 +144,7 @@ var SdCheckbox = class extends SolidElement {
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
         default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;

package/dist/chunks/{chunk.YGRJQZFR.js → chunk.P775L6OS.js}

@@ -2,7 +2,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.7WEXXSFH.js";
+} from "./chunk.OC7IH3HF.js";
 import {
   requestIcon
 } from "./chunk.P52GZVKG.js";
@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VOWE6LHF.js → chunk.PK3XZW2G.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass,
   __spreadValues
@@ -215,10 +215,10 @@ var SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [

package/dist/chunks/{chunk.6V7KPUGO.js → chunk.QDFEG22S.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.4LV4VHB5.js → chunk.QF3WLERT.js}

@@ -20,11 +20,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.25AH7KN2.js";
+} from "./chunk.HQWAKJBV.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.IFJ7LPJV.js → chunk.QHQBGFCN.js}

@@ -25,11 +25,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.25AH7KN2.js";
+} from "./chunk.HQWAKJBV.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -210,7 +210,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-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: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-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button></div></header>` : html`<sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-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: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-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-icon></sd-button></div></header>` : html`<sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-icon></sd-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 = [

package/dist/chunks/{chunk.4UEQEUQ5.js → chunk.QQHF7ENZ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.7VCFYOV5.js → chunk.QZCGIMWI.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -18,7 +18,7 @@ var SdBadge = class extends SolidElement {
     this.inverted = false;
   }
   render() {
-    return html`<span role="status" part="base" aria-labelledby="content" class="${cx(
+    return html`<span part="base" aria-labelledby="content" class="${cx(
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */

package/dist/chunks/{chunk.E73VDVFB.js → chunk.RHQ6U3DB.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.BJSTXBIQ.js";
+} from "./chunk.AH4MJVKG.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.LQKJMBVH.js → chunk.SOAF3TY4.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -89,7 +89,7 @@ var SdStep = class extends SolidElement {
       !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
       this.notInteractive && "text-primary",
       this.size === "lg" ? "text-lg" : "text-sm"
-    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-icon name="status-check" library="system"></sd-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
+    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-icon name="status-check" library="_internal"></sd-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
       this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
       !this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;

package/dist/chunks/{chunk.QTZYBV5A.js → chunk.V5HD2RQH.js}

@@ -35,11 +35,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.25AH7KN2.js";
+} from "./chunk.HQWAKJBV.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -811,14 +811,14 @@ var SdCombobox = class extends SolidElement {
       "flex justify-center",
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
-    )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700", iconSize)}" name="closing-round" library="system"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="right" part="right" class="${cx(
+    )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700", iconSize)}" name="closing-round" library="_internal"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="status-check"></sd-icon>` : ""}<slot name="right" part="right" class="${cx(
       "inline-flex ml-2 leading-[0]",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
     )}">${this.type !== "search" ? html`<sd-icon class="${cx(
       "transition-transform duration-medium ease-in-out",
       this.open ? "rotate-180" : "rotate-0"
-    )}" name="chevron-down" part="chevron" library="system" color="currentColor" label="${this.localize.term("open")}"></sd-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
+    )}" name="chevron-down" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
       this.open && "shadow transition-shadow duration-medium ease-in-out",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"

package/dist/chunks/{chunk.NI45NXZV.js → chunk.WM4AGOIZ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.H36YEYQD.js → chunk.X7HYCD3E.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass,
   __spreadValues
@@ -385,7 +385,7 @@ var SdInput = class extends SolidElement {
       this.size === "sm" ? "h-6" : "h-8",
       textSize
     )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${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-icon class="${cx("text-neutral-700", iconSize)}" library="system" name="closing-round"></sd-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)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-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"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-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-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-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-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${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-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-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)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="status-check" part="valid-icon"></sd-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"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-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-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-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-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**

package/dist/chunks/{chunk.EQRUJQQW.js → chunk.XI3IZCLB.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.XS4QJO4N.js → chunk.YNSZZDYQ.js}

@@ -1,4 +1,4 @@
-// src/components/icon/library.system.ts
+// src/components/icon/library.internal.ts
 var icons = {
   calendar: `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -87,8 +87,8 @@ var icons = {
   <path d="M10.717 4.077a.997.997 0 0 0-1.09.217L5.92 8.001H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.92l3.707 3.707a.997.997 0 0 0 .707.293h.007a.953.953 0 0 0 .382-.079l-.006.002c.365-.154.617-.509.617-.923v-14a1 1 0 0 0-.61-.921l-.007-.002v-.001ZM4 10h1.333v4H4v-4Zm5.333 6.587-2-2V9.414l2-2v9.173Zm9.217-13.48a1 1 0 0 0-.44 1.339l-.003-.006c1.177 2.191 1.876 4.792 1.893 7.555V12a16.365 16.365 0 0 1-1.936 7.638l.043-.088a1.002 1.002 0 0 0 .438 1.331l.006.003c.13.071.285.114.449.117h.001a.999.999 0 0 0 .89-.544l.003-.006c1.312-2.45 2.09-5.357 2.107-8.445v-.005c-.017-3.093-.794-6-2.155-8.549l.048.099a1.001 1.001 0 0 0-1.349-.44l.006-.003-.001-.001Z"/><path d="M14.447 5.167a1 1 0 0 0-.278 1.39l-.002-.004C15.35 8.333 16 10.266 16 12s-.667 3.667-1.833 5.447a1 1 0 0 0 1.664 1.11l.002-.004C17.23 16.45 18 14.12 18 12s-.77-4.45-2.167-6.553a1 1 0 0 0-1.39-.278l.004-.002Z"/></svg>`,
   reload: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M3.697 10.447 5.03 11.78c.1-4.76 3.717-8.447 8.303-8.447a8.667 8.667 0 0 1 0 17.334 1 1 0 0 1 0-2 6.667 6.667 0 0 0 0-13.334C9.8 5.333 7.126 8.076 7 11.753l1.333-1.307a1 1 0 0 1 1.414 1.417l-3.023 3.023a.996.996 0 0 1-1.416 0l-3.023-3.023a1.002 1.002 0 0 1 1.417-1.417l-.005.001Z"/></svg>`
 };
-var systemLibrary = {
-  name: "system",
+var internalLibrary = {
+  name: "_internal",
   resolver: (name) => {
     if (name in icons) {
       return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
@@ -97,9 +97,9 @@ var systemLibrary = {
   },
   mutator: (svg) => svg.setAttribute("fill", "currentColor")
 };
-var library_system_default = systemLibrary;
+var library_internal_default = internalLibrary;
 
 export {
   icons,
-  library_system_default
+  library_internal_default
 };

package/dist/chunks/{chunk.MSSKOOJJ.js → chunk.YTDKF4U7.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.F4UAU4OM.js → chunk.YTDXH4KI.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -119,10 +119,10 @@ var SdNavigationItem = class extends SolidElement {
     )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
       "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px]",
       !slots["description"] && "py-4"
-    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "mr-4 h-6 w-6 transition-all",
       isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-icon></button>` : html`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+    )}"></sd-icon></button>` : html`<sd-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
     )}"></sd-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(

package/dist/chunks/{chunk.C2LS4326.js → chunk.ZAWI6TGO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.OWACJFST.js";
+} from "./chunk.DXLUBAVX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -80,7 +80,7 @@ var SdTag = class extends SolidElement {
         !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.disabled && !isLink && "cursor-not-allowed"
-    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-icon library="system" name="close" label="${this.localize.term("remove")}"></sd-icon></slot></button>` : ""}</${tag}>`;
+    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-icon></slot></button>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [

package/dist/components/accordion/accordion.js

@@ -1,21 +1,21 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.R3PPZNKA.js";
+} from "../../chunks/chunk.BLQFQXCU.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.YGRJQZFR.js";
-import "../../chunks/chunk.7WEXXSFH.js";
+import "../../chunks/chunk.P775L6OS.js";
+import "../../chunks/chunk.OC7IH3HF.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.YNSZZDYQ.js";
 import "../../chunks/chunk.4TPOL3LB.js";
-import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAccordion as default

package/dist/components/accordion-group/accordion-group.js

@@ -1,22 +1,22 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.NI45NXZV.js";
-import "../../chunks/chunk.R3PPZNKA.js";
+} from "../../chunks/chunk.WM4AGOIZ.js";
+import "../../chunks/chunk.BLQFQXCU.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.YGRJQZFR.js";
-import "../../chunks/chunk.7WEXXSFH.js";
+import "../../chunks/chunk.P775L6OS.js";
+import "../../chunks/chunk.OC7IH3HF.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.YNSZZDYQ.js";
 import "../../chunks/chunk.4TPOL3LB.js";
-import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAccordionGroup as default

package/dist/components/animation/animation.js

@@ -1,10 +1,10 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.QEQDPEN2.js";
+} from "../../chunks/chunk.O6YESZHA.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAnimation as default

package/dist/components/audio/audio.js

@@ -1,23 +1,23 @@
 import {
   SdAudio
-} from "../../chunks/chunk.ECH5BTRG.js";
-import "../../chunks/chunk.HEYBJG64.js";
-import "../../chunks/chunk.T5QL4V5F.js";
+} from "../../chunks/chunk.M2VTLBRP.js";
+import "../../chunks/chunk.75VFJ3VZ.js";
+import "../../chunks/chunk.2FRKOJLK.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
-import "../../chunks/chunk.YGRJQZFR.js";
-import "../../chunks/chunk.7WEXXSFH.js";
+import "../../chunks/chunk.P775L6OS.js";
+import "../../chunks/chunk.OC7IH3HF.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.YNSZZDYQ.js";
 import "../../chunks/chunk.4TPOL3LB.js";
-import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/badge/badge.js

@@ -1,8 +1,8 @@
 import {
   SdBadge
-} from "../../chunks/chunk.7VCFYOV5.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+} from "../../chunks/chunk.QZCGIMWI.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdBadge as default

package/dist/components/brandshape/brandshape.js

@@ -1,8 +1,8 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.ERRAXV4M.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+} from "../../chunks/chunk.MBOP4XDK.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdBrandshape as default

package/dist/components/button/button.js

@@ -1,15 +1,15 @@
 import {
   SdButton
-} from "../../chunks/chunk.HEYBJG64.js";
-import "../../chunks/chunk.T5QL4V5F.js";
+} from "../../chunks/chunk.75VFJ3VZ.js";
+import "../../chunks/chunk.2FRKOJLK.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdButton as default

package/dist/components/button-group/button-group.js

@@ -1,8 +1,8 @@
 import {
   SdButtonGroup
-} from "../../chunks/chunk.MSSKOOJJ.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+} from "../../chunks/chunk.YTDKF4U7.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdButtonGroup as default

package/dist/components/carousel/carousel.js

@@ -1,24 +1,24 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.ULQU6P3E.js";
+} from "../../chunks/chunk.F4LWSCE7.js";
 import "../../chunks/chunk.F4VGSDIW.js";
-import "../../chunks/chunk.DLBXYZN6.js";
+import "../../chunks/chunk.FNYEXUNK.js";
 import "../../chunks/chunk.NOWCQZBS.js";
-import "../../chunks/chunk.X7IRGFBS.js";
+import "../../chunks/chunk.P3M4RPHM.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.YGRJQZFR.js";
-import "../../chunks/chunk.7WEXXSFH.js";
+import "../../chunks/chunk.P775L6OS.js";
+import "../../chunks/chunk.OC7IH3HF.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.YNSZZDYQ.js";
 import "../../chunks/chunk.4TPOL3LB.js";
-import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCarousel as default

package/dist/components/carousel/scroll-controller.js

@@ -1,9 +1,9 @@
 import {
   ScrollController
-} from "../../chunks/chunk.DLBXYZN6.js";
+} from "../../chunks/chunk.FNYEXUNK.js";
 import "../../chunks/chunk.NOWCQZBS.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.25AH7KN2.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   ScrollController

package/dist/components/carousel-item/carousel-item.js

@@ -1,8 +1,8 @@
 import {
   SdCarouselItem
-} from "../../chunks/chunk.X7IRGFBS.js";
-import "../../chunks/chunk.OWACJFST.js";
-import "../../chunks/chunk.25AH7KN2.js";
+} from "../../chunks/chunk.P3M4RPHM.js";
+import "../../chunks/chunk.DXLUBAVX.js";
+import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCarouselItem as default