@solid-design-system/components 5.16.2-next.0 → 5.16.2

package/dist/chunks/{chunk.ARM7CJQL.js → chunk.ABLPLQOM.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -226,8 +226,7 @@ var SdNotification = class extends SolidElement {
  */
 SdNotification.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
+  css`:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
 ];
 __decorateClass([
   query('[part~="base"]')

package/dist/chunks/{chunk.2EMJYE7P.js → chunk.ANLMAOKA.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,13 +54,12 @@ var SdHeader = class extends SolidElement {
     }
   }
   render() {
-    return html`<header class="w-full sd-header-color-background relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
+    return html`<header class="w-full bg-white relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
   }
 };
 SdHeader.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:var(--sd-z-index-header,600);display:block}@media (min-height:32rem){:host([fixed]){padding-bottom:var(--sd-header-calculated-height)!important}:host([fixed]) header{position:fixed;top:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);width:100%}:host([fixed]) header::after{position:absolute;top:100%;right:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);height:var(--sd-spacing-2);--tw-content:'';content:var(--tw-content);background:var(--gradient-vertical-black-40-transparent,linear-gradient(0deg,#18181800 50%,#18181866 100%))}}[part=main]{width:var(--sd-header-inner-width);max-width:var(--sd-header-inner-max-width);padding:var(--sd-header-padding,12px 16px)}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+  css`:host{display:block;position:relative;z-index:var(--sd-z-index-header,600)}@media (min-height:32rem){:host([fixed]){padding-bottom:var(--sd-header-calculated-height)!important}:host([fixed]) header{left:var(--sd-spacing-0,0);position:fixed;top:var(--sd-spacing-0,0);width:100%}:host([fixed]) header:after{height:var(--sd-spacing-2,.5rem);left:var(--sd-spacing-0,0);position:absolute;right:var(--sd-spacing-0,0);top:100%;--tw-content:"";background:var(--gradient-vertical-black-40-transparent,linear-gradient(0deg,#18181800 50%,#18181866 100%));content:var(--tw-content)}}[part=main]{max-width:var(--sd-header-inner-max-width);padding:var(--sd-header-padding,12px 16px);width:var(--sd-header-inner-width)}`
 ];
 __decorateClass([
   property({ reflect: true, type: Boolean })

package/dist/chunks/{chunk.4VWYFR7Q.js → chunk.AQI2R5GT.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -134,11 +134,11 @@ var SdAccordion = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<details part="base" class="border-neutral-400"><summary part="header" id="header" class="${cx(
-      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-accordion-padding-block focus-visible:focus-outline sd-accordion-color-text relative group transition-colors ease-in-out duration-fast sd-accordion-color-background hover:bg-neutral-200"
+    return html`<details part="base" class="border-y border-neutral-400"><summary part="header" id="header" class="${cx(
+      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200"
     )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
-      "w-1 sd-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
+      "w-1 bg-accent absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
       this.open && "rotate-180"
@@ -147,8 +147,7 @@ var SdAccordion = class extends SolidElement {
 };
 SdAccordion.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-block-width:var(--sd-accordion-border-width,var(--sd-spacing-0\\.25))}[part=summary-icon]{color:var(--sd-accordion__chevron-color-text)}`
+  css`:host{display:block}[part=header]::-webkit-details-marker{display:none}`
 ];
 __decorateClass([
   query('[part="base"]')

package/dist/chunks/{chunk.4VCWVPDC.js → chunk.AXFVYO5L.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -152,7 +152,7 @@ var SdButton = class extends SolidElement {
     return html`<${tag} part="base" class="${cx(
       `group relative z-10 font-md no-underline
         w-full align-middle inline-flex items-stretch justify-center
-        transition-colors duration-fast ease-in-out
+        transition-colors duration-fast ease-in-out rounded-default
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
@@ -163,47 +163,41 @@ var SdButton = class extends SolidElement {
        * */
       {
         /* sizes, fonts */
-        sm: `text-sm varspacing-8 rounded-default ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "py-[0.344rem] px-4"}`,
-        md: `sd-button--size-md-font-size sd-button--size-md-border-radius varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "sd-button--size-md-padding-block px-4"}`,
-        lg: `sd-button--size-lg-font-size sd-button--size-lg-border-radius varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "sd-button--size-lg-padding-block px-4"}`
+        sm: `text-sm varspacing-8 ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "py-[0.344rem] px-4"}`,
+        md: `text-base varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "py-2 px-4"}`,
+        lg: `text-base varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "py-3 px-4"}`
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `sd-button--primary--default-color-text ${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500" : "sd-button--primary--default-color-background border-transparent hover:text-primary-100 active:sd-button--primary--active-color-text"}
-          disabled:bg-neutral-500` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-button--primary--inverted--default-color-text sd-button--primary--inverted--default-color-background border-white hover:sd-button--primary--inverted--hover-color-text active:sd-button--primary--inverted--active-color-text"}
+        primary: !this.inverted ? `text-white ${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500" : "bg-primary border-transparent hover:text-primary-100 active:text-primary-200"}
+          disabled:bg-neutral-500` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white border-white hover:text-primary-500 active:text-primary-800"}
           disabled:bg-neutral-600 disabled:text-white disabled:border-neutral-600`,
         secondary: !this.inverted ? `border ${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
-          disabled:text-neutral-500 disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:sd-button--secondary--inverted--hover-color-text hover:border-primary-100 active:text-primary-200"}
+          disabled:text-neutral-500 disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:border-primary-100 active:text-primary-200"}
           disabled:text-neutral-600 disabled:border-neutral-600`,
         tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 active:text-primary-800"}
-          disabled:text-neutral-500` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:sd-button--tertiary--inverted--hover-color-text active:text-primary-200"}
+          disabled:text-neutral-500` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 active:text-primary-200"}
           disabled:text-neutral-600`,
         cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500 border-transparent"}
           ${!this.inverted ? "disabled:bg-neutral-500 disabled:border-neutral-500" : "disabled:bg-neutral-600 disabled:border-neutral-600"} disabled:text-white`
       }[this.variant]
     )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
-      "absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
-      (this.disabled || this.visuallyDisabled) && "hidden",
-      {
-        /* sizes, fonts */
-        sm: `rounded-default`,
-        md: `sd-button--size-md-border-radius`,
-        lg: `sd-button--size-lg-border-radius`
-      }[this.size]
+      "absolute inset-0 rounded-default -z-10 overflow-hidden pointer-events-none ",
+      (this.disabled || this.visuallyDisabled) && "hidden"
     )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
       "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
       {
-        primary: !this.inverted ? "sd-button--primary--hover-color-background group-active:bg-primary-800" : "sd-button--primary--inverted--hover-color-background group-active:bg-primary-200",
-        secondary: !this.inverted ? "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-button--secondary--inverted--active-color-background",
-        tertiary: !this.inverted ? "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-button--tertiary--inverted--active-color-background",
+        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
+        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
         cta: "bg-accent-550 group-active:bg-accent-700"
       }[this.variant]
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
       {
-        primary: !this.inverted ? "sd-button--primary--hover-color-background group-active:bg-primary-800" : "sd-button--primary--inverted--hover-color-background group-active:bg-primary-200",
-        secondary: !this.inverted ? "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-button--secondary--inverted--active-color-background",
-        tertiary: !this.inverted ? "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-button--tertiary--inverted--active-color-background",
+        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
+        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
         cta: "bg-accent-550 group-active:bg-accent-700"
       }[this.variant]
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
@@ -236,8 +230,7 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1/2 * 100%)!important;--tw-translate-y:calc(calc(1/2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-icon),sd-loader{font-size:calc(var(--tw-varspacing)/ 2)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}::slotted(sd-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-icon),sd-loader{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")

package/dist/chunks/{chunk.PAHCSY5I.js → chunk.BLKVBNBL.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,8 +53,7 @@ var SdInclude = class extends SolidElement {
 };
 SdInclude.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}`
+  css`:host{display:block}`
 ];
 __decorateClass([
   property({ reflect: true })

package/dist/chunks/{chunk.FO5HZGHW.js → chunk.BWFYNOYR.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -144,8 +144,7 @@ var SdStep = class extends SolidElement {
 };
 SdStep.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{flex:1}:host([no-tail]){flex-grow:0}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
+  css`:host{flex:1 1 0%}:host([no-tail]){flex-grow:0}:host([horizontal-inline]):has([part=description]){flex:1 1 0%;min-width:var(--sd-spacing-0,0)}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.2LWMWEI6.js → chunk.CKLEIUJP.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -398,9 +398,9 @@ var SdRange = class extends SolidElement {
           ariaLabel = this.tooltipFormatter(value);
         }
       }
-      return html`<sd-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
+      return html`<sd-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
         "rounded-full absolute top-0 size-4 hover:cursor-grab after:-inset-2",
-        this.disabled || this.visuallyDisabled ? "outline-none" : "cursor-pointer focus-visible:focus-outline"
+        this.disabled || this.visuallyDisabled ? "bg-neutral-500 outline-none" : "bg-primary hover:bg-primary-500 cursor-pointer focus-visible:focus-outline"
       )}"></div></sd-tooltip>`;
     });
   }
@@ -411,13 +411,15 @@ var SdRange = class extends SolidElement {
     };
     const hasLabel = !!(this.label || slots["label"]);
     const hasHelpText = !!(this.helpText || slots["helpText"]);
-    return html`<div part="form-control" @focusout="${this.onBlur}" class="flex flex-col">${hasLabel ? html`<div class="flex items-center gap-1"><label id="label" part="form-control-label" aria-hidden="${hasLabel ? "false" : "true"}" class="${cx("w-full", hasLabel ? "inline-block" : "hidden")}" @click="${this.focus}"><slot name="label">${this.label}</slot></label></div>` : null} <label id="aria-label-hidden" class="sr-only">(${this._value.map(this.tooltipFormatter).join(" - ")})</label><div part="base" class="${cx("inline-flex w-full", this.visuallyDisabled && "focus-visible:focus-outline")}" tabindex="${ifDefined(this.visuallyDisabled ? "0" : void 0)}"><div part="input-wrapper" class="relative flex-1 mx-2 mb-[10px]"><input id="input" tabindex="-1" hidden @invalid="${this.handleInvalid}"><div part="track-wrapper" role="presentation" @pointerdown="${this.onClickTrack}" class="relative cursor-pointer -mx-2"><div part="track-click-helper" class="absolute -inset-y-2 inset-x-0"></div><div part="track" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" class="${cx("h-1 my-[6px]")}"></div><div part="active-track" hidden="${ifDefined(this.noTrackBar ? true : void 0)}" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" class="${cx("absolute top-0 h-1")}"></div></div>${this.renderThumbs(hasLabel)}<div class="-mt-[10px]" part="scale-ticks" @pointerdown="${this.onClickTrackItem}" role="presentation"><slot name="scale-ticks"></slot></div></div></div><slot></slot><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>`;
+    return html`<div part="form-control" @focusout="${this.onBlur}" class="flex flex-col">${hasLabel ? html`<div class="flex items-center gap-1"><label id="label" part="form-control-label" aria-hidden="${hasLabel ? "false" : "true"}" class="${cx("w-full", hasLabel ? "inline-block" : "hidden")}" @click="${this.focus}"><slot name="label">${this.label}</slot></label></div>` : null} <label id="aria-label-hidden" class="sr-only">(${this._value.map(this.tooltipFormatter).join(" - ")})</label><div part="base" class="${cx("inline-flex w-full", this.visuallyDisabled && "focus-visible:focus-outline")}" tabindex="${ifDefined(this.visuallyDisabled ? "0" : void 0)}"><div part="input-wrapper" class="relative flex-1 mx-2 mb-[10px]"><input id="input" tabindex="-1" hidden @invalid="${this.handleInvalid}"><div part="track-wrapper" role="presentation" @pointerdown="${this.onClickTrack}" class="relative cursor-pointer -mx-2"><div part="track-click-helper" class="absolute -inset-y-2 inset-x-0"></div><div part="track" class="${cx("h-1 my-[6px]", this.disabled || this.visuallyDisabled ? "bg-neutral-500" : "bg-neutral-400")}"></div><div part="active-track" hidden="${ifDefined(this.noTrackBar ? true : void 0)}" class="${cx(
+      "absolute top-0 h-1",
+      this.disabled || this.visuallyDisabled ? "bg-neutral-500" : "bg-primary"
+    )}"></div></div>${this.renderThumbs(hasLabel)}<div class="-mt-[10px]" part="scale-ticks" @pointerdown="${this.onClickTrackItem}" role="presentation"><slot name="scale-ticks"></slot></div></div></div><slot></slot><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>`;
   }
 };
 SdRange.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-[part='base']{touch-action:none;-webkit-touch-callout:none}[part=thumb]{background-color:var(--sd-color-icon-fill-primary,var(--sd-color-primary))}[part=thumb]:hover{background-color:var(--sd-color-icon-fill-primary-500,var(--sd-color-primary-500))}[part=thumb].grabbed{background-color:var(--sd-color-icon-fill-primary-800,var(--sd-color-primary-800))}[part=thumb][data-disabled]{background-color:var(--sd-color-icon-fill-neutral-500,var(--sd-color-neutral-500))}[part=track]{background-color:var(--sd-color-border-neutral-400,var(--sd-color-neutral-400))}[part=track][data-disabled]{background-color:var(--sd-color-background-neutral-500,var(--sd-color-neutral-500))}[part=active-track]{background-color:var(--sd-color-icon-fill-primary,var(--sd-color-primary))}[part=active-track][data-disabled]{background-color:var(--sd-color-icon-fill-neutral-500,var(--sd-color-neutral-500))}`
+  css`[part=base]{touch-action:none;-webkit-touch-callout:none}[part=thumb].grabbed{--tw-bg-opacity:1!important;background-color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-bg-opacity,1))!important}`
 ];
 __decorateClass([
   query("#input")

package/dist/chunks/{chunk.UG7ABG7Q.js → chunk.DKBTK7VW.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -51,8 +51,7 @@ var SdButtonGroup = class extends SolidElement {
 };
 SdButtonGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:inline-block}[part=base]{display:flex;flex-wrap:nowrap}`
+  css`:host{display:inline-block}[part=base]{display:flex;flex-wrap:nowrap}`
 ];
 __decorateClass([
   query("slot")

package/dist/chunks/{chunk.RDTKXRB7.js → chunk.EOLLVTEE.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -35,8 +35,7 @@ var SdSpinner = class extends SolidElement {
  */
 SdSpinner.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:inline-block;width:1em;height:1em}`
+  css`:host{display:inline-block;height:1em;width:1em}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.NXR5NJ4D.js → chunk.ERJOEJ54.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -43,8 +43,7 @@ var SdOptgroup = class extends SolidElement {
 };
 SdOptgroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{--display-divider:block}#divider{display:var(--display-divider)}`
+  css`:host{--display-divider:block}#divider{display:var(--display-divider)}`
 ];
 __decorateClass([
   query("slot:not([name])")

package/dist/chunks/{chunk.MQNVPN2V.js → chunk.FK2BNPQB.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   animateTo,
   stopAnimations
@@ -300,7 +300,7 @@ var SdDropdown = class extends SolidElement {
     return html`<sd-popup part="base" id="dropdown" exportparts="
           popup:base__popup,
         " placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
-      "panel-color-border border shadow bg-white block",
+      "shadow bg-white block",
       this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
     )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-popup>`;
@@ -308,8 +308,7 @@ var SdDropdown = class extends SolidElement {
 };
 SdDropdown.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:inline-block}#dropdown::part(popup){z-index:var(--sd-z-index-dropdown,900)}#dropdown[data-current-placement^=top]::part(popup){transform-origin:bottom}#dropdown[data-current-placement^=bottom]::part(popup){transform-origin:top}#dropdown[data-current-placement^=left]::part(popup){transform-origin:100%}#dropdown[data-current-placement^=right]::part(popup){transform-origin:0}:host(:not([no-auto-size])) ::slotted(:not([slot=trigger])){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`
+  css`:host{display:inline-block}#dropdown::part(popup){z-index:var(--sd-z-index-dropdown,900)}#dropdown[data-current-placement^=top]::part(popup){transform-origin:bottom}#dropdown[data-current-placement^=bottom]::part(popup){transform-origin:top}#dropdown[data-current-placement^=left]::part(popup){transform-origin:right}#dropdown[data-current-placement^=right]::part(popup){transform-origin:left}:host(:not([no-auto-size])) ::slotted(:not([slot=trigger])){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
 ];
 __decorateClass([
   query("#dropdown")

package/dist/chunks/{chunk.MZYFWNJ2.js → chunk.G3JK5J7P.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,8 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-divider[orientation=horizontal]){display:block}:host(sd-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-divider[orientation=horizontal]){display:block}:host(sd-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.B2OI7BBP.js → chunk.G4FXGRRH.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   animateTo,
   stopAnimations
@@ -200,21 +200,20 @@ var SdDrawer = class extends SolidElement {
       "top-0 start-0 w-full h-full pointer-events-none overflow-hidden",
       this.contained ? "absolute" : "fixed"
     )}" aria-label="${this.label}"><div part="overlay" class="${cx(
-      "block top-0 left-0 right-0 bottom-0 overlay-color-background pointer-events-auto",
+      "block top-0 left-0 right-0 bottom-0 bg-neutral-800/75 pointer-events-auto",
       this.contained ? "absolute" : "fixed"
     )}" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
       "absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",
       {
-        end: "top-0 end-0 bottom-auto start-auto w-[var(--width)] h-full",
-        start: "top-0 end-auto bottom-auto start-0 w-[var(--width)] h-full"
+        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: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-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 end-2 z-10"><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 = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{--width:25rem;display:contents}:host([contained]){z-index:initial}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}:host [part=panel]{outline:1px solid var(--sd-panel-color-border,transparent)}`
+  css`:host{--width:25rem;display:contents}:host([contained]){z-index:auto}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}`
 ];
 __decorateClass([
   query("[part=base]")

package/dist/chunks/{chunk.TBWF2AZD.js → chunk.GUZQ4ADZ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,8 +22,7 @@ var SdCarouselItem = class extends SolidElement {
 };
 SdCarouselItem.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
+  css`:host{align-items:center;aspect-ratio:var(--aspect-ratio);display:flex;flex-direction:column;height:100%;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;width:100%}::slotted(img){height:100%;-o-object-fit:cover;object-fit:cover;width:100%}`
 ];
 SdCarouselItem = __decorateClass([
   customElement("sd-carousel-item")

package/dist/chunks/{chunk.AKPL6DO2.js → chunk.JGH3YXMX.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.ZDLONKYZ.js";
+} from "./chunk.VCV7HS44.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -272,8 +272,7 @@ var SdRadioGroup = class extends SolidElement {
  */
 SdRadioGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}:host([orientation=vertical]) ::slotted(sd-radio){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-radio:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-radio){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([required]) #label::after{content:' *'}:host:has(sd-button-group){display:inline-flex}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}:host:has(sd-button-group){display:inline-flex}`
 ];
 __decorateClass([
   query("slot:not([name])")

package/dist/chunks/{chunk.7OG77Q72.js → chunk.LLUTMJ6Y.js}

@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   animateTo,
   stopAnimations
@@ -598,13 +598,13 @@ var SdSelect = class extends SolidElement {
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
-        readonly: "form-control-color-border",
+        readonly: "border-neutral-800",
         activeInvalid: "border-error border-2",
         activeValid: "border-success border-2",
         active: "border-primary border-2",
         invalid: "border-error",
         valid: "border-success",
-        default: "form-control-color-border"
+        default: "border-neutral-800"
       }[selectState],
       this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
     )}"></div><sd-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
@@ -623,7 +623,7 @@ var SdSelect = class extends SolidElement {
         lg: "py-2"
       }[this.size]
     )}"><input name="${this.name}" form="${this.form}" part="display-input" class="${cx(
-      "top-0 left-0 appearance-none outline-none flex-grow bg-transparent flex-1 placeholder:text-neutral-700",
+      "top-0 left-0 appearance-none outline-none flex-grow bg-transparent flex-1 placeholder-neutral-700",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
     )}" type="text" .disabled="${this.disabled}" placeholder="${this.placeholder || this.localize.term("selectDefaultPlaceholder")}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="-1"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""}<div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</div><input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx(
@@ -656,8 +656,7 @@ var SdSelect = class extends SolidElement {
  */
 SdSelect.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;display:block;width:auto}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:var(--sd-color-text-neutral-500)}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:var(--sd-color-text-neutral-500)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}.input-container,[part=combobox]{grid-column:1/1;grid-row:1/1}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-tag::part(base){border-radius:var(--sd-radius);padding-inline:var(--sd-spacing-1)}sd-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-tag[disabled=false]::part(base):hover{background-color:var(--sd-color-background-primary-100)}`
+  css`:host{display:block;position:relative;width:var(--sd-spacing-auto,auto)}: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))}[part=listbox]{max-height:var(--auto-size-available-height,auto)}.input-container,[part=combobox]{grid-column:1/1;grid-row:1/1}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))}`
 ];
 __decorateClass([
   queryAssignedElements({ selector: "sd-option" })

package/dist/chunks/{chunk.X5F5FYN6.js → chunk.O7O2LFXK.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KPOYD3HP.js";
+} from "./chunk.PJJCHCFO.js";
 import {
   __decorateClass,
   __spreadValues
@@ -349,13 +349,13 @@ var SdInput = class extends SolidElement {
     const borderColor = {
       disabled: "border-neutral-500",
       visuallyDisabled: "border-neutral-500",
-      readonly: "form-control-color-border",
+      readonly: "border-neutral-800",
       activeInvalid: "border-error border-2",
       activeValid: "border-success border-2",
       active: "border-primary border-2",
       invalid: "border-error",
       valid: "border-success",
-      default: "form-control-color-border"
+      default: "border-neutral-800"
     }[inputState];
     const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
@@ -381,11 +381,11 @@ 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:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
+      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
       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="_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="confirm-circle" 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 library="_internal" name="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 library="_internal" name="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-1", 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="confirm-circle" 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-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -393,8 +393,7 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | 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]) #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}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-icon{color:var(--sd-color-text-neutral-500)}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #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}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-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
 ];
 __decorateClass([
   query("#input")