@solid-design-system/components 5.16.2-next.1 → 5.17.0

package/dist-versioned/chunks/{chunk.NKPJM2WV.js → chunk.3FCBHDPH.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdDatepicker = class extends SolidElement {
     this.localize = new LocalizeController(this);
     this.hasSlotController = new HasSlotController(this, "label", "help-text", "tooltip");
     this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["sd-blur", "sd-5-16-2-next-1-input"]
+      assumeInteractionOn: ["sd-blur", "sd-5-17-0-input"]
     });
     this.locale = "en-US";
     this.value = null;
@@ -73,7 +73,17 @@ var SdDatepicker = class extends SolidElement {
     this.tabbingIntoGrid = false;
     /** Bump counter ensuring live region text updates are recognized. */
     this.statusBumpCounter = 0;
+    this.onFocusOut = (ev) => {
+      const next = ev.relatedTarget;
+      if (next && this.contains(next)) return;
+      if (this.open) {
+        this.hide();
+        this.emit("sd-datepicker-close");
+      }
+      this.hasFocus = false;
+    };
     this.onFocusIn = (ev) => {
+      if (this.disabled || this.visuallyDisabled) return;
       const path = ev.composedPath();
       const fromHeader = path.some(
         (n) => {
@@ -86,20 +96,20 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.handleInput = (ev) => {
-      var _a, _b, _c;
-      const input = ev.target;
-      const raw = input.value;
-      const oldPos = (_a = input.selectionStart) != null ? _a : raw.length;
-      const isDeleting = (_b = ev.inputType) == null ? void 0 : _b.startsWith("delete");
-      if (this.visuallyDisabled || this.disabled) {
-        ev.preventDefault();
-        ev.stopPropagation();
+      var _a, _b, _c, _d, _e;
+      if (this.disabled || this.visuallyDisabled) {
+        (_a = ev.preventDefault) == null ? void 0 : _a.call(ev);
+        (_b = ev.stopPropagation) == null ? void 0 : _b.call(ev);
         return;
       }
+      const input = ev.target;
+      const raw = input.value;
+      const oldPos = (_c = input.selectionStart) != null ? _c : raw.length;
+      const isDeleting = (_d = ev.inputType) == null ? void 0 : _d.startsWith("delete");
       if (!this.range) {
         const inputEl = input;
         const rawText = inputEl.value;
-        const oldCaret = (_c = inputEl.selectionStart) != null ? _c : rawText.length;
+        const oldCaret = (_e = inputEl.selectionStart) != null ? _e : rawText.length;
         const digits = rawText.replace(/\D/g, "").slice(0, 8);
         const d = digits.slice(0, 2);
         const m = digits.slice(2, 4);
@@ -272,6 +282,10 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.handleInputBlur = () => {
+      if (this.disabled || this.visuallyDisabled) {
+        this.handleBlur();
+        return;
+      }
       const parsed = this.parseInputText(this.inputValue);
       if (!parsed.valid) {
         this.inputValue = this.formatInputValue();
@@ -302,6 +316,11 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.onKeyDown = (ev) => {
+      if (this.disabled || this.visuallyDisabled) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        return;
+      }
       const key = ev.key;
       let handled = true;
       const next = new Date(this.focusedDate);
@@ -368,6 +387,11 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.handleInputKeyDown = (ev) => {
+      if ((this.disabled || this.visuallyDisabled) && ev.key !== "Tab") {
+        ev.preventDefault();
+        ev.stopPropagation();
+        return;
+      }
       if (ev.key === "ArrowLeft" || ev.key === "ArrowRight" || ev.key === "ArrowUp" || ev.key === "ArrowDown" || ev.key === "Home" || ev.key === "End" || ev.key === "PageUp" || ev.key === "PageDown") {
         return;
       }
@@ -388,6 +412,7 @@ var SdDatepicker = class extends SolidElement {
     super.connectedCallback();
     this.syncDisabledDatesSet();
     document.addEventListener("click", this.handleOutsideClick);
+    this.addEventListener("focusout", this.onFocusOut);
     this.updateComplete.then(() => {
       this.formControlController.updateValidity();
     });
@@ -400,7 +425,6 @@ var SdDatepicker = class extends SolidElement {
       this.firstDayOfWeek = 1;
     }
     this.inputValue = this.formatInputValue();
-    this.tabIndex = 0;
     this.setAttribute("role", "group");
     this.setAttribute(
       "aria-label",
@@ -414,6 +438,7 @@ var SdDatepicker = class extends SolidElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("focusin", this.onFocusIn);
+    this.removeEventListener("focusout", this.onFocusOut);
     document.removeEventListener("click", this.handleOutsideClick);
   }
   handleLocaleChange() {
@@ -803,10 +828,9 @@ var SdDatepicker = class extends SolidElement {
   show() {
     if (this.open || this.disabled || this.visuallyDisabled) {
       this.open = false;
-      return void 0;
+      return;
     }
     this.open = true;
-    return void 0;
   }
   hide() {
     if (!this.open || this.disabled) {
@@ -829,9 +853,6 @@ var SdDatepicker = class extends SolidElement {
     this.emit("sd-blur");
   }
   handleFocus() {
-    if (this.visuallyDisabled || this.disabled) {
-      return;
-    }
     this.hasFocus = true;
     if (!this.open && !this.disabled && !this.visuallyDisabled) {
       this.show();
@@ -1068,6 +1089,10 @@ var SdDatepicker = class extends SolidElement {
       }
       weeks.push(row);
     }
+    const isRowOutsideMonth = (row) => row.every((d) => d.getMonth() !== monthRef.getMonth());
+    while (weeks.length > 0 && isRowOutsideMonth(weeks[weeks.length - 1])) {
+      weeks.pop();
+    }
     return { weeks };
   }
   formatMonthYear(d) {
@@ -1132,7 +1157,7 @@ var SdDatepicker = class extends SolidElement {
       return DateUtils.isBetweenInclusive(day, rs, pe);
     };
     const tabTarget = this.getTabTargetDayForCurrentView(weeks);
-    return html`<div part="datepicker" class="w-[284px] z-50 absolute top-full bg-white border-2 border-t-0 border-primary py-3 px-4 ${this.open ? "block rounded-bl-default rounded-br-default" : "hidden"} ${this.alignment === "left" ? "left-0" : "right-0"}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-5-16-2-next-1-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-5-16-2-next-1-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-5-16-2-next-1-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-5-16-2-next-1-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-5-16-2-next-1-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-5-16-2-next-1-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-5-16-2-next-1-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-5-16-2-next-1-icon></button></div></div><sd-5-16-2-next-1-divider></sd-5-16-2-next-1-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
+    return html`<div part="datepicker" class="w-[284px] z-50 absolute top-full bg-white border-2 border-t-0 border-primary py-3 px-4 ${this.open ? "block rounded-bl-default rounded-br-default" : "hidden"} ${this.alignment === "left" ? "left-0" : "right-0"}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-5-17-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-5-17-0-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-5-17-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-5-17-0-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-5-17-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-5-17-0-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-5-17-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-5-17-0-icon></button></div></div><sd-5-17-0-divider></sd-5-17-0-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
       this.tabbingIntoGrid = false;
     }}"><div class="grid-row grid-head grid grid-cols-7 gap-y-[1px]" role="row">${weekdays.map(
       (w, colIndex) => html`<div role="columnheader" aria-colindex="${colIndex + 1}" part="weekday" class="cell head flex items-center justify-center font-bold text-black text-sm leading-none h-8" aria-label="${w}" title="${w}" id="${"col-" + (colIndex + 1)}">${w}</div>`
@@ -1166,7 +1191,7 @@ var SdDatepicker = class extends SolidElement {
           "cell day flex items-center justify-center focus-visible:outline focus:outline-2 focus:outline-primary -outline-offset-2 rounded-md w-[36px]",
           this.size === "sm" ? "text-sm h-6" : "text-base h-8",
           isRangeStart || isRangeEnd ? "hover:bg-primary-500" : "hover:bg-primary-100 hover:text-primary-500",
-          !inMonth ? isWeekendDay ? "out-month weekend-day text-neutral-500" : "out-month text-neutral-700" : this.isInDisabledDates(day) ? "out-month text-neutral-700" : this.disabledWeekends && isWeekendDay ? "weekend-day text-neutral-500" : "in-month text-primary",
+          !inMonth ? this.disabledWeekends && isWeekendDay ? "out-month weekend-day text-neutral-500" : isWeekendDay ? "out-month weekend-day text-neutral-700" : "out-month text-neutral-700" : this.isInDisabledDates(day) ? "out-month text-neutral-500" : this.disabledWeekends && isWeekendDay ? "weekend-day text-neutral-500" : "in-month text-primary",
           isSelectedSingle ? "selected border-primary bg-primary text-white hover:bg-primary-500 hover:text-white" : "",
           isRangeStart ? "bg-primary text-white rounded-l-md rounded-r-none" : "",
           isRangeEnd ? "bg-primary text-white range-end rounded-r-md rounded-l-none" : "",
@@ -1207,7 +1232,11 @@ var SdDatepicker = class extends SolidElement {
       default: "border-neutral-800"
     }[inputState];
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
-    return html`<div part="form-control" class="${cx("w-[370px]", this.open && "z-50", (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(
+    return html`<div part="form-control" class="${cx(
+      "min-w-[284px]",
+      this.open && "z-50",
+      (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"
@@ -1216,23 +1245,22 @@ var SdDatepicker = class extends SolidElement {
       borderColor,
       this.open && this.alignment === "left" ? "rounded-bl-none" : "",
       this.open && this.alignment === "right" ? "rounded-br-none" : ""
-    )}"></div><sd-5-16-2-next-1-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
+    )}"></div><sd-5-17-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast w-full",
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}" slot="anchor"><input id="input" type="text" role="combobox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="dialog" aria-controls="calendar-grid" aria-describedby="${hasHelpText ? "help-text" : void 0}" aria-invalid="${this.showInvalidStyle ? "true" : "false"}" aria-label="${this.range ? "Select date range" : "Select a date"}" class="${cx(
-      "min-w-0 flex-grow focus:outline-none bg-transparent",
-      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
+      "min-w-0 flex-grow focus:outline-none bg-transparent hover:cursor-pointer",
+      this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       textSize
-    )}" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled || this.disabled}" ?readonly="${this.readonly}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-5-16-2-next-1-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-5-16-2-next-1-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-5-16-2-next-1-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-2-next-1-icon>` : ""}<sd-5-16-2-next-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-5-16-2-next-1-icon>${this.renderCalendar()}</div></sd-5-16-2-next-1-popup></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()}`;
+    )}" autocomplete="off" spellcheck="false" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-5-17-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-5-17-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-5-17-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-0-icon>` : ""}<sd-5-17-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-5-17-0-icon>${this.renderCalendar()}</div></sd-5-17-0-popup></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()}`;
   }
 };
 SdDatepicker.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;display:inline-block;--tw-outline-style:none;outline-style:none}:host([required]) #label::after{content:' *'}`
+  css`:host{display:inline-block;outline:2px solid transparent;outline-offset:2px;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -1368,7 +1396,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdDatepicker.prototype, "handleDisabledChange", 1);
 SdDatepicker = __decorateClass([
-  customElement("sd-5-16-2-next-1-datepicker")
+  customElement("sd-5-17-0-datepicker")
 ], SdDatepicker);
 
 export {

package/dist-versioned/chunks/{chunk.YBIM4TC7.js → chunk.4D5SPJ27.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.RZLBIMEH.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 })
@@ -69,7 +68,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-5-16-2-next-1-include")
+  customElement("sd-5-17-0-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.QHUH3UZT.js → chunk.4VSYGWIQ.js}

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

package/dist-versioned/chunks/{chunk.WTFF4KWO.js → chunk.5L52M55A.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -189,13 +189,13 @@ var SdTextarea = 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"
       }[textareaState]
     )}"></div><div part="base" class="${cx(
       "textarea h-full flex items-top rounded-default group transition-colors duration-medium hover:duration-fast ease-in-out",
@@ -208,7 +208,7 @@ var SdTextarea = class extends SolidElement {
       this.readonly ? "bg-neutral-100" : "bg-white",
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-5-16-2-next-1-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-5-17-0-icon]:pe-8",
       {
         sm: "py-1",
         md: "py-1",
@@ -216,7 +216,7 @@ var SdTextarea = class extends SolidElement {
       }[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-5-16-2-next-1-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-16-2-next-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-16-2-next-1-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-2-next-1-icon>` : ""}</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 ? "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-5-17-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-17-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-17-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-0-icon>` : ""}</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 ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -224,8 +224,7 @@ var SdTextarea = class extends SolidElement {
  */
 SdTextarea.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block;height:100%}:host textarea{scrollbar-gutter:stable}: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)}: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")
@@ -331,7 +330,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-5-16-2-next-1-textarea")
+  customElement("sd-5-17-0-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.VN6V46I7.js → chunk.63D5DO3S.js}

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

package/dist-versioned/chunks/chunk.6DKXZWRN.js

@@ -0,0 +1,69 @@
+// src/utilities/autocomplete-config.ts
+function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoView } = {
+  setValueOnSelection: true,
+  scrollSelectionIntoView: true
+}) {
+  const sdInput = !selector ? document.querySelector("#autoComplete") : typeof selector === "string" ? document.querySelector(selector) : selector;
+  const input = sdInput.shadowRoot.querySelector("input");
+  const css = (string) => string[0];
+  input.addEventListener("init", () => {
+    var _a, _b;
+    const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
+    ul == null ? void 0 : ul.setAttribute("part", "listbox");
+    const popup = document.createElement("sd-5-17-0-popup");
+    popup.appendChild(ul);
+    (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
+    popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
+    if (popup) {
+      popup.active = false;
+      popup.autoSize = "vertical";
+      popup.autoSizePadding = 16;
+      popup.placement = "bottom-start";
+      popup.anchor = sdInput;
+      popup.sync = "width";
+    }
+    const styles = css`sd-5-17-0-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-17-0-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-5-17-0-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-5-17-0-popup li{list-style-type:""}sd-5-17-0-popup li mark{background-color:transparent;font-weight:700}sd-5-17-0-popup li:not(:has(sd-5-17-0-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-5-17-0-popup li:not(:has(sd-5-17-0-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-5-17-0-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(styles);
+    sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
+  });
+  if (setValueOnSelection) {
+    input.addEventListener("selection", (event) => {
+      var _a;
+      sdInput.value = (_a = event == null ? void 0 : event.detail) == null ? void 0 : _a.selection.value;
+    });
+  }
+  input.addEventListener("open", () => {
+    var _a, _b, _c, _d, _e, _f;
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-17-0-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
+    (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
+  });
+  input.addEventListener("close", () => {
+    var _a, _b, _c, _d, _e, _f;
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-17-0-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
+    (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
+  });
+  if (scrollSelectionIntoView) {
+    input.addEventListener("navigate", () => {
+      const selected = sdInput.shadowRoot.querySelector('[aria-selected="true"]');
+      selected == null ? void 0 : selected.scrollIntoView({ block: "nearest" });
+    });
+  }
+  return {
+    config: {
+      selector: () => {
+        return input;
+      },
+      resultsList: {
+        tag: "ul"
+      },
+      wrapper: false
+    }
+  };
+}
+
+export {
+  setupAutocomplete
+};

package/dist-versioned/chunks/{chunk.WSRHW32L.js → chunk.6KCL3YWT.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,17 +41,16 @@ var SdAccordionGroup = class extends SolidElement {
 };
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(sd-5-16-2-next-1-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-5-17-0-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-16-2-next-1-accordion" })
+  queryAssignedElements({ selector: "sd-5-17-0-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-5-16-2-next-1-accordion-group")
+  customElement("sd-5-17-0-accordion-group")
 ], SdAccordionGroup);
 
 export {

package/dist-versioned/chunks/{chunk.ANYT6TR4.js → chunk.6OGLZOU3.js}

@@ -4,13 +4,13 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/range-tick/range-tick.ts
-import { css, html } from "lit";
+import { html } from "lit";
 import { property } from "lit/decorators.js";
 import cx from "classix";
 var SdRangeTick = class extends SolidElement {
@@ -20,19 +20,15 @@ var SdRangeTick = class extends SolidElement {
     this.subtick = false;
   }
   render() {
-    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm"><slot></slot></div></div>`;
+    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx("bg-neutral-500", this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm"><slot></slot></div></div>`;
   }
 };
-SdRangeTick.styles = [
-  ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-[part='line']{background-color:var(--sd-color-border-neutral-400,var(--sd-color-neutral-400))}`
-];
+SdRangeTick.styles = SolidElement.styles;
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRangeTick.prototype, "subtick", 2);
 SdRangeTick = __decorateClass([
-  customElement("sd-5-16-2-next-1-range-tick")
+  customElement("sd-5-17-0-range-tick")
 ], SdRangeTick);
 
 export {

package/{dist/chunks/chunk.KPAQRMCC.js → dist-versioned/chunks/chunk.7VPFFNHR.js}

@@ -26,10 +26,10 @@ var defaultLibrary = {
       strokedElement.setAttribute("stroke", "currentColor");
     });
     recoloredElements.greenFills.forEach((filledElement) => {
-      filledElement.setAttribute("fill", "var(--sd-color-accent, 45 157 0)");
+      filledElement.setAttribute("fill", "rgb(var(--sd-color-accent, 45 157 0) / var(--tw-bg-opacity, 1))");
     });
     recoloredElements.greenStrokes.forEach((strokedElement) => {
-      strokedElement.setAttribute("stroke", "var(--sd-color-accent, 45 157 0)");
+      strokedElement.setAttribute("stroke", "rgb(var(--sd-color-accent, 45 157 0) / var(--tw-bg-opacity, 1))");
     });
     return svg;
   }