@solid-design-system/components 4.6.15 → 4.6.17

package/dist/chunks/{chunk.GG5P2ME5.js → chunk.O7I7F6Q2.js}

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

package/dist/chunks/{chunk.L62PLKYH.js → chunk.PVLYUNK7.js}

@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.RPVPT3AZ.js → chunk.R55MBA6F.js}

@@ -39,7 +39,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -760,7 +760,7 @@ var SdCombobox = class extends SolidElement {
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.visuallyDisabled;
-    const selectState = this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
+    const selectState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "visuallyDisabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const cursorStyles = this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-pointer";
     const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
@@ -824,7 +824,7 @@ var SdCombobox = class extends SolidElement {
 };
 SdCombobox.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([size=sm]) .combobox-button{height:var(--sd-spacing-4,1rem);right:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem)}:host([size=md]) .combobox-button{height:var(--sd-spacing-6,1.5rem);right:.85rem;width:var(--sd-spacing-6,1.5rem)}:host([size=lg]) .combobox-button{height:var(--sd-spacing-8,2rem);right:var(--sd-spacing-3,.75rem);width:var(--sd-spacing-8,2rem)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity,1))}[part=filtered-listbox] sd-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;color:inherit;font-weight:700}`
+  css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{height:var(--sd-spacing-4,1rem);right:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem)}:host([size=md]) .combobox-button{height:var(--sd-spacing-6,1.5rem);right:.85rem;width:var(--sd-spacing-6,1.5rem)}:host([size=lg]) .combobox-button{height:var(--sd-spacing-8,2rem);right:var(--sd-spacing-3,.75rem);width:var(--sd-spacing-8,2rem)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity,1))}[part=filtered-listbox] sd-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;color:inherit;font-weight:700}`
 ];
 __decorateClass([
   query("sd-popup")

package/dist/chunks/{chunk.Z6IS4T3X.js → chunk.S4EWMXGX.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.M3L4O32M.js → chunk.SIDHPKLE.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";

package/dist/chunks/{chunk.3TYIEBZZ.js → chunk.SLGJ34KM.js}

@@ -29,7 +29,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TJBZYHFX.js → chunk.SOC7MXFP.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.NEOGXWHS.js → chunk.STR7Q2AE.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass,
   __spreadValues
@@ -344,7 +344,7 @@ var SdInput = class extends SolidElement {
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
     const hasTooltip = !!slots["tooltip"];
-    const inputState = this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
+    const inputState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "visuallyDisabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const borderColor = {
       disabled: "border-neutral-500",
@@ -364,7 +364,11 @@ var SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx(this.disabled && "pointer-events-none", this.visuallyDisabled && "cursor-not-allowed")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full", this.visuallyDisabled && "cursor-not-allowed")}"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
+    return html`<div part="form-control" class="${cx((this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
+      "relative w-full",
+      this.disabled && "pointer-events-none",
+      this.visuallyDisabled && "cursor-not-allowed"
+    )}"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-all",
       // Vertical Padding
       this.size === "lg" ? "py-2" : "py-1",
@@ -374,10 +378,9 @@ var SdInput = class extends SolidElement {
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}">${slots["left"] ? html`<slot name="left" part="left" class="${cx("inline-flex", this.size === "sm" ? "mr-1" : "mr-2", iconColor, iconSize)}"></slot>` : ""} <input part="input" id="input" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent",
-      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500" : "placeholder-neutral-700",
+      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
-      textSize,
-      this.visuallyDisabled && "cursor-not-allowed"
+      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("icon-fill-neutral-800", 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()}`;
   }

package/dist/chunks/{chunk.N4DLX7CI.js → chunk.TECYWP64.js}

@@ -1,9 +1,9 @@
 import {
   SdRadio
-} from "./chunk.RXJBEWFC.js";
+} from "./chunk.FUTSGCSR.js";
 import {
   SdButtonGroup
-} from "./chunk.4ZXREC6Z.js";
+} from "./chunk.H7LBUXAT.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.SML76IW6.js → chunk.TG3K5WND.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.P77O564Q.js → chunk.TQJ46AIM.js}

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

package/dist/chunks/{chunk.45FVZ6XJ.js → chunk.V3OFS667.js}

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

package/dist/chunks/{chunk.W4FP3L5S.js → chunk.V5S3KO2G.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -177,12 +177,12 @@ var SdTextarea = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasTooltip = !!slots["tooltip"];
-    const textareaState = this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus && !this.visuallyDisabled ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
+    const textareaState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "visuallyDisabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
-    const iconSizeMarginLeft = {
-      sm: "text-base ml-1",
-      md: "text-lg ml-2",
-      lg: "text-xl ml-2"
+    const iconSize = {
+      sm: "text-base top-1",
+      md: "text-lg top-2",
+      lg: "text-xl top-2"
     }[this.size];
     return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
       "absolute w-full h-full pointer-events-none border rounded-default",
@@ -198,20 +198,31 @@ var SdTextarea = class extends SolidElement {
         default: "border-neutral-800"
       }[textareaState]
     )}"></div><div part="base" class="${cx(
-      "textarea h-full px-4 flex items-top rounded-default group",
+      "textarea h-full flex items-top rounded-default group",
       {
-        sm: "textarea-sm py-1",
-        md: "textarea-md py-1",
-        lg: "textarea-lg py-2"
+        sm: "textarea-sm",
+        md: "textarea-md",
+        lg: "textarea-lg"
       }[this.size],
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-icon]:pe-8",
+      {
+        sm: "py-1",
+        md: "py-1",
+        lg: "py-2"
+      }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx(
+      "text-error absolute right-4 bg-white pointer-events-none group-hover:bg-neutral-200",
+      iconSize
+    )}" library="system" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx(
+      "text-success absolute right-4 bg-white pointer-events-none group-hover:bg-neutral-200",
+      iconSize
+    )}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -219,7 +230,7 @@ var SdTextarea = class extends SolidElement {
  */
 SdTextarea.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;height:100%}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([required]) #label:after{content:" *"}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
+  css`:host{display:block;height:100%}:host textarea{scrollbar-gutter:stable}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([required]) #label:after{content:" *"}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
 ];
 __decorateClass([
   query("#input")

package/dist/chunks/{chunk.YS5DNYIN.js → chunk.VGPSQWRX.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BSCYCJVQ.js → chunk.VL533T34.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.CBB3P3NX.js";
+} from "./chunk.GFSU4Q7M.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.XKASXMF7.js → chunk.W5O6ZSSQ.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.L62PLKYH.js";
+} from "./chunk.PVLYUNK7.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HHUBCDJ6.js → chunk.YDCALUT4.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DVFLNKVT.js → chunk.YEECK5EL.js}

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

package/dist/chunks/{chunk.4YLFAOXI.js → chunk.ZCYYTGMW.js}

@@ -29,7 +29,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2CQBUBXE.js → chunk.ZOBNVT2R.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PTSJHOIB.js";
+} from "./chunk.5TWLYNWT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/components/accordion/accordion.js

@@ -1,10 +1,10 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.L62PLKYH.js";
+} from "../../chunks/chunk.PVLYUNK7.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAccordion as default

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

@@ -1,11 +1,11 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.74CY6CLD.js";
-import "../../chunks/chunk.L62PLKYH.js";
+} from "../../chunks/chunk.B6IKQ26W.js";
+import "../../chunks/chunk.PVLYUNK7.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -16,7 +16,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAccordionGroup as default

package/dist/components/animation/animation.js

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.V2ON3YL6.js";
+} from "../../chunks/chunk.HYV22M4U.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAnimation as default

package/dist/components/audio/audio.js

@@ -1,11 +1,11 @@
 import {
   SdAudio
-} from "../../chunks/chunk.M3L4O32M.js";
-import "../../chunks/chunk.CFJLB3HN.js";
-import "../../chunks/chunk.NXP37WVQ.js";
+} from "../../chunks/chunk.SIDHPKLE.js";
+import "../../chunks/chunk.EEICCCWB.js";
+import "../../chunks/chunk.3FCEMGCI.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -16,7 +16,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.SZP6EUOZ.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+} from "../../chunks/chunk.5EBZIKYH.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdBadge as default

package/dist/components/brandshape/brandshape.js

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.GG5P2ME5.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+} from "../../chunks/chunk.O7I7F6Q2.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdBrandshape as default

package/dist/components/button/button.js

@@ -1,14 +1,14 @@
 import {
   SdButton
-} from "../../chunks/chunk.CFJLB3HN.js";
-import "../../chunks/chunk.NXP37WVQ.js";
+} from "../../chunks/chunk.EEICCCWB.js";
+import "../../chunks/chunk.3FCEMGCI.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.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdButton as default

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

@@ -1,7 +1,7 @@
 import {
   SdButtonGroup
-} from "../../chunks/chunk.4ZXREC6Z.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+} from "../../chunks/chunk.H7LBUXAT.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdButtonGroup as default

package/dist/components/carousel/carousel.js

@@ -1,13 +1,13 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.2A3BDUSF.js";
+} from "../../chunks/chunk.6WYL4JXU.js";
 import "../../chunks/chunk.F4VGSDIW.js";
 import "../../chunks/chunk.2LMWBUBT.js";
 import "../../chunks/chunk.NOWCQZBS.js";
-import "../../chunks/chunk.63XS65LQ.js";
+import "../../chunks/chunk.F3R45NNC.js";
 import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -18,7 +18,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCarousel as default

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

@@ -1,7 +1,7 @@
 import {
   SdCarouselItem
-} from "../../chunks/chunk.63XS65LQ.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+} from "../../chunks/chunk.F3R45NNC.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCarouselItem as default

package/dist/components/checkbox/checkbox.js

@@ -1,9 +1,9 @@
 import {
   SdCheckbox
-} from "../../chunks/chunk.LNAF5CEF.js";
+} from "../../chunks/chunk.4RFDH3SL.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -11,7 +11,7 @@ import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCheckbox as default

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

@@ -1,8 +1,8 @@
 import {
   SdCheckboxGroup
-} from "../../chunks/chunk.Z6IS4T3X.js";
+} from "../../chunks/chunk.S4EWMXGX.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -10,7 +10,7 @@ import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCheckboxGroup as default

package/dist/components/combobox/combobox.js

@@ -1,7 +1,7 @@
 import {
   SdCombobox
-} from "../../chunks/chunk.RPVPT3AZ.js";
-import "../../chunks/chunk.6DPDPTTQ.js";
+} from "../../chunks/chunk.R55MBA6F.js";
+import "../../chunks/chunk.EBWV7WLX.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.WBJBQ4QI.js";
 import "../../chunks/chunk.UIQBHPD3.js";
@@ -11,7 +11,7 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
-import "../../chunks/chunk.SML76IW6.js";
+import "../../chunks/chunk.TG3K5WND.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -22,7 +22,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.WEDOS4Q6.js";
 import "../../chunks/chunk.CVCJY3ME.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PTSJHOIB.js";
+import "../../chunks/chunk.5TWLYNWT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCombobox as default