@helixui/library 2.1.2 → 3.0.0

package/dist/shared/{hx-select-B5wq9Swh.js → hx-select-CixTo7jp.js}

@@ -1,26 +1,27 @@
 import { css as g, html as h, nothing as n } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
 import { property as d, state as u, query as x, customElement as m } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
 import { repeat as y } from "lit/directives/repeat.js";
-import { d as $ } from "./dev-warn-YlwPHjtX.js";
-import { H as I, c as w } from "./id-counter-JhvVCnjh.js";
-const O = g`
+import { F as I } from "./FormMixin-B8PXk5RQ.js";
+import { d as w } from "./dev-warn-YlwPHjtX.js";
+import { H as $ } from "./helix-element-BNEYeiys.js";
+import { c as O } from "./id-counter-DuX8vsui.js";
+const k = g`
   /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
   :host {
     display: block;
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
+    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
@@ -30,10 +31,10 @@ const O = g`
     );
 
     /* Error */
-    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
 
     /* Chevron */
-    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
@@ -108,7 +109,6 @@ const O = g`
     outline: none;
   }
 
-  .field__trigger:focus,
   .field__trigger:focus-visible {
     border-color: var(--_focus-ring-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -177,7 +177,6 @@ const O = g`
     border-color: var(--_error-color);
   }
 
-  .field--error .field__trigger:focus,
   .field--error .field__trigger:focus-visible {
     border-color: var(--_error-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -287,7 +286,7 @@ const O = g`
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .field__error {
@@ -301,16 +300,98 @@ const O = g`
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .field__trigger {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+
+    .field__trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+
+    .field__trigger[aria-disabled='true'] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    .field__trigger--placeholder .field__trigger-value {
+      color: GrayText;
+    }
+
+    .field__chevron::after {
+      border-color: FieldText;
+    }
+
+    .field__listbox {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+      box-shadow: none;
+    }
+
+    .field__option {
+      color: CanvasText;
+    }
+
+    .field__option:hover {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .field__option--selected {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .field__option--focused {
+      outline-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .field__option--disabled {
+      color: GrayText;
+      opacity: 1;
+    }
+
+    .field--error .field__trigger {
+      border-color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .field__label {
+      color: CanvasText;
+    }
+
+    .field__help-text {
+      color: GrayText;
+    }
+
+    .field__error {
+      color: LinkText;
+    }
+  }
 `;
-var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, s = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? z(t, a) : t, l = e.length - 1, f; l >= 0; l--)
-    (f = e[l]) && (r = (i ? f(t, a, r) : f(r)) || r);
-  return i && r && k(t, a, r), r;
+var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? z(t, s) : t, a = e.length - 1, f; a >= 0; a--)
+    (f = e[a]) && (o = (r ? f(t, s, o) : f(o)) || o);
+  return r && o && C(t, s, o), o;
 };
-const C = w("hx-select");
-let o = class extends I {
+const S = O("hx-select");
+let i = class extends I($) {
   constructor() {
-    super(...arguments), this._selectId = C(), this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.ariaLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
+    super(...arguments), this._selectId = S(), this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.accessibleLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
       this.open && !e.composedPath().includes(this) && (this.open = !1);
     };
   }
@@ -322,42 +403,31 @@ let o = class extends I {
     return e ? e.label : this.value;
   }
   // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback();
-  }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this.open && (this.open = !1, this._focusedOptionIndex = -1);
   }
   updated(e) {
-    if (e.has("open") && (this.open ? document.addEventListener("click", this._handleOutsideClick) : document.removeEventListener("click", this._handleOutsideClick)), e.has("value") && (this._syncNativeSelect(), this._updateFormValue(), this._updateValidity()), e.has("size")) {
-      const t = ["sm", "md", "lg"];
-      t.includes(this.size) || $(
+    var t;
+    if (super.updated(e), e.has("open") && (this.open ? document.addEventListener("click", this._handleOutsideClick) : document.removeEventListener("click", this._handleOutsideClick)), e.has("value") && (this._syncNativeSelect(), this._updateFormValue()), e.has("size")) {
+      const s = ["sm", "md", "lg"];
+      s.includes(this.size) || w(
         "hx-select",
-        `Invalid size "${this.size}". Expected one of: ${t.join(", ")}.`
+        `Invalid size "${this.size}". Expected one of: ${s.join(", ")}.`
       );
     }
+    if (e.has("error") && this.error) {
+      const s = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
+      if (s) {
+        const r = this.error;
+        requestAnimationFrame(() => {
+          s.textContent = "", requestAnimationFrame(() => {
+            s.textContent = r;
+          });
+        });
+      }
+    }
   }
   // ─── Form Integration ───
-  /** Returns the associated form element, if any. */
-  get form() {
-    return this._internals.form;
-  }
-  /** Returns the validation message. */
-  get validationMessage() {
-    return this._internals.validationMessage;
-  }
-  /** Returns the ValidityState object. */
-  get validity() {
-    return this._internals.validity;
-  }
-  /** Checks whether the select satisfies its constraints. */
-  checkValidity() {
-    return this._internals.checkValidity();
-  }
-  /** Reports validity and shows the browser's constraint validation UI. */
-  reportValidity() {
-    return this._internals.reportValidity();
-  }
   /** @internal */
   _updateFormValue() {
     this._internals.setFormValue(this.value || null);
@@ -372,7 +442,7 @@ let o = class extends I {
   }
   // ─── Form Lifecycle Hooks ───
   _onFormReset() {
-    this.value = "", this._internals.setFormValue(null);
+    this.value = "", this._internals.setFormValue(null), this._resetInteractionState();
   }
   _onFormStateRestore(e, t) {
     typeof e == "string" && (this.value = e);
@@ -398,22 +468,22 @@ let o = class extends I {
    */
   /** @internal */
   _handleSlotChange() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
+    var r;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
     if (!e) return;
     const t = [];
-    this._select && this._select.querySelectorAll("option[data-cloned]").forEach((r) => r.remove());
-    const a = (r) => {
+    this._select && this._select.querySelectorAll("option[data-cloned]").forEach((o) => o.remove());
+    const s = (o) => {
       if (!this._select) return;
-      const l = r.cloneNode(!0);
-      l.setAttribute("data-cloned", ""), this._select.appendChild(l);
+      const a = o.cloneNode(!0);
+      a.setAttribute("data-cloned", ""), this._select.appendChild(a);
     };
-    for (const r of e.assignedElements({ flatten: !0 }))
-      if (r instanceof HTMLOptionElement)
-        t.push(this._parseOption(r)), a(r);
-      else if (r instanceof HTMLOptGroupElement)
-        for (const l of Array.from(r.children))
-          l instanceof HTMLOptionElement && (t.push(this._parseOption(l)), a(l));
+    for (const o of e.assignedElements({ flatten: !0 }))
+      if (o instanceof HTMLOptionElement)
+        t.push(this._parseOption(o)), s(o);
+      else if (o instanceof HTMLOptGroupElement)
+        for (const a of Array.from(o.children))
+          a instanceof HTMLOptionElement && (t.push(this._parseOption(a)), s(a));
     this._options = t, t.length, this._select && (this.value ? this._select.value = this.value : !this.placeholder && t.length > 0 && (this.value = this._select.value, this._updateFormValue()));
   }
   // ─── Slot Change Handlers ───
@@ -435,28 +505,28 @@ let o = class extends I {
   // ─── Keyboard Navigation ───
   /** @internal */
   _handleKeydown(e) {
-    var a;
+    var s;
     if (this.disabled) return;
-    const t = this._options.map((i, r) => ({ o: i, i: r })).filter(({ o: i }) => !i.disabled).map(({ i }) => i);
+    const t = this._options.map((r, o) => ({ o: r, i: o })).filter(({ o: r }) => !r.disabled).map(({ i: r }) => r);
     switch (e.key) {
       case "ArrowDown": {
         if (e.preventDefault(), !this.open) {
           this.open = !0, this._focusedOptionIndex = t.length > 0 ? t[0] ?? 0 : 0;
           break;
         }
-        const i = t.find((r) => r > this._focusedOptionIndex);
-        this._focusedOptionIndex = i !== void 0 ? i : t[0] ?? this._focusedOptionIndex;
+        const r = t.find((o) => o > this._focusedOptionIndex);
+        this._focusedOptionIndex = r !== void 0 ? r : t[0] ?? this._focusedOptionIndex;
         break;
       }
       case "ArrowUp": {
         if (e.preventDefault(), !this.open) {
           this.open = !0;
-          const l = t[t.length - 1];
-          this._focusedOptionIndex = l !== void 0 ? l : 0;
+          const a = t[t.length - 1];
+          this._focusedOptionIndex = a !== void 0 ? a : 0;
           break;
         }
-        const i = [...t].reverse().find((l) => l < this._focusedOptionIndex), r = t[t.length - 1];
-        this._focusedOptionIndex = i !== void 0 ? i : r ?? this._focusedOptionIndex;
+        const r = [...t].reverse().find((a) => a < this._focusedOptionIndex), o = t[t.length - 1];
+        this._focusedOptionIndex = r !== void 0 ? r : o ?? this._focusedOptionIndex;
         break;
       }
       case "Home": {
@@ -465,26 +535,26 @@ let o = class extends I {
       }
       case "End": {
         e.preventDefault(), this.open || (this.open = !0);
-        const i = t[t.length - 1];
-        this._focusedOptionIndex = i !== void 0 ? i : 0;
+        const r = t[t.length - 1];
+        this._focusedOptionIndex = r !== void 0 ? r : 0;
         break;
       }
       case "Enter":
       case " ": {
         if (e.preventDefault(), !this.open) {
           this.open = !0;
-          const i = this._options.findIndex((r) => r.value === this.value);
-          this._focusedOptionIndex = i >= 0 ? i : t[0] ?? 0;
+          const r = this._options.findIndex((o) => o.value === this.value);
+          this._focusedOptionIndex = r >= 0 ? r : t[0] ?? 0;
           break;
         }
         if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {
-          const i = this._options[this._focusedOptionIndex];
-          i && this._selectOption(i);
+          const r = this._options[this._focusedOptionIndex];
+          r && this._selectOption(r);
         }
         break;
       }
       case "Escape": {
-        e.preventDefault(), this.open = !1, this._focusedOptionIndex = -1, (a = this._trigger) == null || a.focus();
+        e.preventDefault(), this.open = !1, this._focusedOptionIndex = -1, (s = this._trigger) == null || s.focus();
         break;
       }
       case "Tab": {
@@ -493,7 +563,7 @@ let o = class extends I {
       }
       default: {
         if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
-          const i = e.key.toLowerCase(), r = this.open ? this._focusedOptionIndex + 1 : 0, l = this._options.map((p, b) => ({ o: p, i: b })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(i)), v = l.find(({ i: p }) => p >= r) ?? l[0];
+          const r = e.key.toLowerCase(), o = this.open ? this._focusedOptionIndex + 1 : 0, a = this._options.map((p, b) => ({ o: p, i: b })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(r)), v = a.find(({ i: p }) => p >= o) ?? a[0];
           v && (this.open || (this.open = !0), this._focusedOptionIndex = v.i, e.preventDefault());
         }
         break;
@@ -503,7 +573,7 @@ let o = class extends I {
   // ─── Selection ───
   /** @internal */
   _selectOption(e) {
-    e.disabled || (this.value = e.value, this._dispatchChange(), this.open = !1, this._focusedOptionIndex = -1);
+    e.disabled || (this.value = e.value, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange(), this.open = !1, this._focusedOptionIndex = -1);
   }
   // ─── Event Dispatchers ───
   /** @internal */
@@ -518,7 +588,7 @@ let o = class extends I {
   }
   /** @internal */
   _handleNativeChange(e) {
-    this.value = e.target.value, this._dispatchChange();
+    this.value = e.target.value, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange();
   }
   // ─── Public Methods ───
   /** Moves focus to the visible trigger button. */
@@ -537,7 +607,7 @@ let o = class extends I {
       this._options,
       (e) => e.value,
       (e, t) => {
-        const a = e.value === this.value, i = t === this._focusedOptionIndex;
+        const s = e.value === this.value, r = t === this._focusedOptionIndex;
         return h`
           <div
             id=${this._optionId(t)}
@@ -545,11 +615,11 @@ let o = class extends I {
             role="option"
             class=${_({
           field__option: !0,
-          "field__option--selected": a,
-          "field__option--focused": i,
+          "field__option--selected": s,
+          "field__option--focused": r,
           "field__option--disabled": e.disabled
         })}
-            aria-selected=${a ? "true" : n}
+            aria-selected=${s ? "true" : "false"}
             aria-disabled=${e.disabled ? "true" : n}
             @click=${() => this._selectOption(e)}
           >
@@ -567,14 +637,14 @@ let o = class extends I {
       "field--disabled": this.disabled,
       "field--required": this.required,
       "field--open": this.open
-    }, a = {
+    }, s = {
       field__trigger: !0,
       [`field__trigger--${this.size}`]: !0,
       "field__trigger--placeholder": !this.value
-    }, i = {
+    }, r = {
       field__select: !0,
       [`field__select--${this.size}`]: !0
-    }, r = [
+    }, o = [
       e || this._hasErrorSlot ? this._errorId : null,
       this.helpText ? this._helpTextId : null
     ].filter(Boolean).join(" ") || void 0;
@@ -599,7 +669,7 @@ let o = class extends I {
           <div
             part="trigger"
             id=${this._selectId}
-            class=${_(a)}
+            class=${_(s)}
             role="combobox"
             tabindex=${this.disabled ? "-1" : "0"}
             aria-expanded=${this.open ? "true" : "false"}
@@ -607,11 +677,11 @@ let o = class extends I {
             aria-controls=${this._listboxId}
             aria-activedescendant=${this.open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : n}
             aria-invalid=${e ? "true" : n}
-            aria-describedby=${c(r)}
+            aria-describedby=${c(o)}
             aria-required=${this.required ? "true" : n}
             aria-disabled=${this.disabled ? "true" : n}
             aria-labelledby=${c(this.label ? this._labelId : void 0)}
-            aria-label=${c(this.ariaLabel ?? void 0)}
+            aria-label=${c(this.accessibleLabel ?? void 0)}
             @click=${this._toggleDropdown}
             @keydown=${this._handleKeydown}
           >
@@ -627,7 +697,7 @@ let o = class extends I {
             role="listbox"
             id=${this._listboxId}
             class="field__listbox"
-            aria-label=${c(this.label || this.ariaLabel || void 0)}
+            aria-label=${c(this.label || this.accessibleLabel || void 0)}
             ?hidden=${!this.open}
           >
             <div class="field__options">${this._renderOptions()}</div>
@@ -636,15 +706,15 @@ let o = class extends I {
           <!-- Hidden native select (form participation + test compat) -->
           <select
             part="select"
-            class=${_(i)}
+            class=${_(r)}
             tabindex="-1"
             aria-hidden="true"
             ?required=${this.required}
             ?disabled=${this.disabled}
             name=${c(this.name || void 0)}
-            aria-label=${c(this.ariaLabel ?? void 0)}
+            aria-label=${c(this.accessibleLabel ?? void 0)}
             aria-invalid=${e ? "true" : n}
-            aria-describedby=${c(r)}
+            aria-describedby=${c(o)}
             aria-required=${this.required ? "true" : n}
             @change=${this._handleNativeChange}
           >
@@ -672,66 +742,66 @@ let o = class extends I {
     `;
   }
 };
-o.styles = [O];
-o.formAssociated = !0;
-s([
+i.styles = [k];
+i.formAssociated = !0;
+l([
   d({ type: String })
-], o.prototype, "label", 2);
-s([
+], i.prototype, "label", 2);
+l([
   d({ type: String })
-], o.prototype, "placeholder", 2);
-s([
+], i.prototype, "placeholder", 2);
+l([
   d({ type: String, reflect: !0 })
-], o.prototype, "value", 2);
-s([
+], i.prototype, "value", 2);
+l([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "required", 2);
-s([
+], i.prototype, "required", 2);
+l([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-s([
-  d({ type: String })
-], o.prototype, "name", 2);
-s([
+], i.prototype, "disabled", 2);
+l([
+  d({ type: String, reflect: !0 })
+], i.prototype, "name", 2);
+l([
   d({ type: String })
-], o.prototype, "error", 2);
-s([
+], i.prototype, "error", 2);
+l([
   d({ type: String, attribute: "help-text" })
-], o.prototype, "helpText", 2);
-s([
+], i.prototype, "helpText", 2);
+l([
   d({ type: String, attribute: "hx-size", reflect: !0 })
-], o.prototype, "size", 2);
-s([
-  d({ type: String, attribute: "aria-label" })
-], o.prototype, "ariaLabel", 2);
-s([
+], i.prototype, "size", 2);
+l([
+  d({ type: String, attribute: "accessible-label" })
+], i.prototype, "accessibleLabel", 2);
+l([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
-s([
+], i.prototype, "open", 2);
+l([
   d({ attribute: "label-required" })
-], o.prototype, "labelRequired", 2);
-s([
+], i.prototype, "labelRequired", 2);
+l([
   d({ attribute: "label-no-options" })
-], o.prototype, "labelNoOptions", 2);
-s([
+], i.prototype, "labelNoOptions", 2);
+l([
   u()
-], o.prototype, "_options", 2);
-s([
+], i.prototype, "_options", 2);
+l([
   u()
-], o.prototype, "_hasErrorSlot", 2);
-s([
+], i.prototype, "_hasErrorSlot", 2);
+l([
   u()
-], o.prototype, "_focusedOptionIndex", 2);
-s([
+], i.prototype, "_focusedOptionIndex", 2);
+l([
   x(".field__select")
-], o.prototype, "_select", 2);
-s([
+], i.prototype, "_select", 2);
+l([
   x(".field__trigger")
-], o.prototype, "_trigger", 2);
-o = s([
+], i.prototype, "_trigger", 2);
+i = l([
   m("hx-select")
-], o);
+], i);
 export {
-  o as H
+  i as H
 };
-//# sourceMappingURL=hx-select-B5wq9Swh.js.map
+//# sourceMappingURL=hx-select-CixTo7jp.js.map