@helixui/library 2.1.2-next.53 → 2.1.2-next.54

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

@@ -1,27 +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 w } from "./helix-element-BJh1Ffvi.js";
-import { c as I } from "./id-counter-PTgF-zcG.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 */
@@ -31,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 */
@@ -286,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 {
@@ -383,15 +383,15 @@ const O = g`
     }
   }
 `;
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? C(t, a) : t, s = e.length - 1, f; s >= 0; s--)
-    (f = e[s]) && (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 z = I("hx-select");
-let o = class extends w {
+const S = O("hx-select");
+let i = class extends I($) {
   constructor() {
-    super(...arguments), this._selectId = z(), 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);
     };
   }
@@ -403,42 +403,31 @@ let o = class extends w {
     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);
@@ -453,7 +442,7 @@ let o = class extends w {
   }
   // ─── 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);
@@ -479,22 +468,22 @@ let o = class extends w {
    */
   /** @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 s = r.cloneNode(!0);
-      s.setAttribute("data-cloned", ""), this._select.appendChild(s);
+      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 s of Array.from(r.children))
-          s instanceof HTMLOptionElement && (t.push(this._parseOption(s)), a(s));
+    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 ───
@@ -516,28 +505,28 @@ let o = class extends w {
   // ─── 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 s = t[t.length - 1];
-          this._focusedOptionIndex = s !== void 0 ? s : 0;
+          const a = t[t.length - 1];
+          this._focusedOptionIndex = a !== void 0 ? a : 0;
           break;
         }
-        const i = [...t].reverse().find((s) => s < 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": {
@@ -546,26 +535,26 @@ let o = class extends w {
       }
       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": {
@@ -574,7 +563,7 @@ let o = class extends w {
       }
       default: {
         if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
-          const i = e.key.toLowerCase(), r = this.open ? this._focusedOptionIndex + 1 : 0, s = this._options.map((p, b) => ({ o: p, i: b })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(i)), v = s.find(({ i: p }) => p >= r) ?? s[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;
@@ -584,7 +573,7 @@ let o = class extends w {
   // ─── 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 */
@@ -599,7 +588,7 @@ let o = class extends w {
   }
   /** @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. */
@@ -618,7 +607,7 @@ let o = class extends w {
       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)}
@@ -626,11 +615,11 @@ let o = class extends w {
             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)}
           >
@@ -648,14 +637,14 @@ let o = class extends w {
       "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;
@@ -680,7 +669,7 @@ let o = class extends w {
           <div
             part="trigger"
             id=${this._selectId}
-            class=${_(a)}
+            class=${_(s)}
             role="combobox"
             tabindex=${this.disabled ? "-1" : "0"}
             aria-expanded=${this.open ? "true" : "false"}
@@ -688,11 +677,11 @@ let o = class extends w {
             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}
           >
@@ -708,7 +697,7 @@ let o = class extends w {
             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>
@@ -717,15 +706,15 @@ let o = class extends w {
           <!-- 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}
           >
@@ -753,66 +742,66 @@ let o = class extends w {
     `;
   }
 };
-o.styles = [O];
-o.formAssociated = !0;
+i.styles = [k];
+i.formAssociated = !0;
 l([
   d({ type: String })
-], o.prototype, "label", 2);
+], i.prototype, "label", 2);
 l([
   d({ type: String })
-], o.prototype, "placeholder", 2);
+], i.prototype, "placeholder", 2);
 l([
   d({ type: String, reflect: !0 })
-], o.prototype, "value", 2);
+], i.prototype, "value", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "required", 2);
+], i.prototype, "required", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
+], i.prototype, "disabled", 2);
 l([
   d({ type: String, reflect: !0 })
-], o.prototype, "name", 2);
+], i.prototype, "name", 2);
 l([
   d({ type: String })
-], o.prototype, "error", 2);
+], i.prototype, "error", 2);
 l([
   d({ type: String, attribute: "help-text" })
-], o.prototype, "helpText", 2);
+], i.prototype, "helpText", 2);
 l([
   d({ type: String, attribute: "hx-size", reflect: !0 })
-], o.prototype, "size", 2);
+], i.prototype, "size", 2);
 l([
-  d({ type: String, attribute: "aria-label" })
-], o.prototype, "ariaLabel", 2);
+  d({ type: String, attribute: "accessible-label" })
+], i.prototype, "accessibleLabel", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
+], i.prototype, "open", 2);
 l([
   d({ attribute: "label-required" })
-], o.prototype, "labelRequired", 2);
+], i.prototype, "labelRequired", 2);
 l([
   d({ attribute: "label-no-options" })
-], o.prototype, "labelNoOptions", 2);
+], i.prototype, "labelNoOptions", 2);
 l([
   u()
-], o.prototype, "_options", 2);
+], i.prototype, "_options", 2);
 l([
   u()
-], o.prototype, "_hasErrorSlot", 2);
+], i.prototype, "_hasErrorSlot", 2);
 l([
   u()
-], o.prototype, "_focusedOptionIndex", 2);
+], i.prototype, "_focusedOptionIndex", 2);
 l([
   x(".field__select")
-], o.prototype, "_select", 2);
+], i.prototype, "_select", 2);
 l([
   x(".field__trigger")
-], o.prototype, "_trigger", 2);
-o = l([
+], i.prototype, "_trigger", 2);
+i = l([
   m("hx-select")
-], o);
+], i);
 export {
-  o as H
+  i as H
 };
-//# sourceMappingURL=hx-select-DZ7wfcJx.js.map
+//# sourceMappingURL=hx-select-CixTo7jp.js.map

package/dist/shared/hx-select-CixTo7jp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-select-CixTo7jp.js","sources":["../../src/components/hx-select/hx-select.styles.ts","../../src/components/hx-select/hx-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSelectStyles = css`\n  /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */\n  :host {\n    display: block;\n\n    /* Background & foreground */\n    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));\n    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));\n    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));\n\n    /* Label */\n    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));\n\n    /* Border */\n    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));\n    --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\n\n    /* Focus ring */\n    --_focus-ring-color: var(\n      --hx-select-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n    );\n\n    /* Error */\n    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));\n\n    /* Chevron */\n    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));\n    --_chevron-size: var(--hx-select-chevron-size, 0.5rem);\n\n    /* Listbox */\n    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));\n    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n    --_option-selected-bg: var(\n      --hx-select-option-selected-bg,\n      var(--hx-color-primary-100, #dbeafe)\n    );\n\n    /* Typography */\n    --_font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--_font-family);\n    position: relative;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--_label-color);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  .field__select-wrapper {\n    position: relative;\n    display: block;\n  }\n\n  .field__trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-space-2, 0.5rem);\n    width: 100%;\n    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n    border-radius: var(--_border-radius);\n    background-color: var(--_bg);\n    color: var(--_color);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    cursor: pointer;\n    text-align: start;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    outline: none;\n  }\n\n  .field__trigger:focus-visible {\n    border-color: var(--_focus-ring-color);\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--_focus-ring-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  .field__trigger[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  .field__trigger--sm {\n    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n  }\n\n  .field__trigger--lg {\n    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n  }\n\n  .field__trigger-value {\n    flex: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .field__trigger--placeholder .field__trigger-value {\n    color: var(--_placeholder-color);\n  }\n\n  .field__chevron {\n    flex-shrink: 0;\n    width: calc(var(--_chevron-size) * 1.5);\n    height: var(--_chevron-size);\n    position: relative;\n    color: var(--_chevron-color);\n    pointer-events: none;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .field__chevron::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: var(--hx-space-px, 2px);\n    width: var(--_chevron-size);\n    height: var(--_chevron-size);\n    border-inline-end: var(--hx-border-width-thin, 1.5px) solid currentColor;\n    border-bottom: var(--hx-border-width-thin, 1.5px) solid currentColor;\n    transform: rotate(45deg);\n  }\n\n  .field--open .field__chevron {\n    transform: rotate(180deg);\n  }\n\n  .field--error .field__trigger {\n    border-color: var(--_error-color);\n  }\n\n  .field--error .field__trigger:focus-visible {\n    border-color: var(--_error-color);\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--_error-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  .field__listbox {\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    left: 0;\n    right: 0;\n    z-index: var(--hx-z-index-dropdown, 1000);\n    background-color: var(--_listbox-bg);\n    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n    border-radius: var(--_border-radius);\n    box-shadow: var(\n      --hx-select-listbox-shadow,\n      0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))\n    );\n    max-height: var(--hx-select-listbox-max-height, 16rem);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .field__listbox[hidden] {\n    display: none;\n  }\n\n  .field__options {\n    overflow-y: auto;\n    flex: 1;\n    padding: var(--hx-space-1, 0.25rem) 0;\n  }\n\n  .field__option {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--_color);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .field__option:hover {\n    background-color: var(--_option-hover-bg);\n  }\n\n  .field__option--selected {\n    background-color: var(--_option-selected-bg);\n    font-weight: var(--hx-font-weight-medium, 500);\n  }\n\n  .field__option--focused {\n    background-color: var(--_option-hover-bg);\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--_focus-ring-color, var(--hx-color-primary-500));\n    outline-offset: var(--hx-select-option-focus-ring-offset, -2px);\n  }\n\n  .field__option--focused.field__option--selected {\n    background-color: var(--_option-selected-bg);\n  }\n\n  .field__option--disabled {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .field__option-label {\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .field__no-options {\n    padding: var(--hx-space-3, 0.75rem);\n    text-align: center;\n    color: var(--_placeholder-color);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .field__select {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    opacity: 0;\n    pointer-events: none;\n    clip: rect(0, 0, 0, 0);\n  }\n\n  .field__help-text,\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__help-text {\n    color: var(--hx-color-neutral-500, #64748b);\n  }\n\n  .field__error {\n    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .field__trigger,\n    .field__chevron,\n    .field__option {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .field__trigger {\n      forced-color-adjust: none;\n      background-color: Field;\n      color: FieldText;\n      border: 2px solid ButtonText;\n    }\n\n    .field__trigger:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n\n    .field__trigger[aria-disabled='true'] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    .field__trigger--placeholder .field__trigger-value {\n      color: GrayText;\n    }\n\n    .field__chevron::after {\n      border-color: FieldText;\n    }\n\n    .field__listbox {\n      forced-color-adjust: none;\n      background-color: Canvas;\n      border: 2px solid CanvasText;\n      box-shadow: none;\n    }\n\n    .field__option {\n      color: CanvasText;\n    }\n\n    .field__option:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__option--selected {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__option--focused {\n      outline-color: Highlight;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__option--disabled {\n      color: GrayText;\n      opacity: 1;\n    }\n\n    .field--error .field__trigger {\n      border-color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .field__label {\n      color: CanvasText;\n    }\n\n    .field__help-text {\n      color: GrayText;\n    }\n\n    .field__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixSelectStyles } from './hx-select.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// PERF: hx-select exceeds 5KB budget (6.31kb gzipped) -- custom listbox, keyboard navigation, grouped options\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nconst _nextSelectId = createIdCounter('hx-select');\n\n// ─── Internal option model ───\n\ninterface SelectOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\n/** Detail for the hx-change event dispatched by hx-select. */\nexport interface HxSelectChangeDetail {\n  value: string;\n}\n\n/**\n * A form-associated select component with custom styling, label, error, and\n * help text. Options are provided via slotted `<option>` (and `<optgroup>`)\n * elements in the light DOM. The component wraps a hidden native `<select>`\n * for form participation and provides a combobox trigger for consistent\n * cross-browser styling.\n *\n * @remarks Multi-select is intentionally not supported. This component\n * implements a single-value select (combobox) pattern only. For multi-value\n * selection use a separate multi-select component.\n *\n * @remarks The listbox panel uses `position: absolute` and may be clipped by\n * ancestor elements with `overflow: hidden` or `overflow: auto`. This is a\n * known limitation when embedding the component inside cards, tables, or\n * dialogs. Use the CSS custom property `--hx-select-listbox-shadow` or\n * restructure the containing layout to avoid clipping.\n *\n * @summary Form-associated custom select with label, error, and help text.\n *\n * @tag hx-select\n *\n * @slot - Default slot for `<option>` and `<optgroup>` elements.\n * @slot label - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected option changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart select-wrapper - The wrapper containing the trigger and listbox.\n * @csspart select - The hidden native select element (kept for form participation).\n * @csspart trigger - The button that opens/closes the dropdown.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart option - Individual option items in the listbox.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-select-bg=var(--hx-color-neutral-0)] - Select background color.\n * @cssprop [--hx-select-color=var(--hx-color-neutral-800)] - Select text color.\n * @cssprop [--hx-select-border-color=var(--hx-color-neutral-300)] - Select border color.\n * @cssprop [--hx-select-border-radius=var(--hx-border-radius-md)] - Select border radius.\n * @cssprop [--hx-select-font-family=var(--hx-font-family-sans)] - Select font family.\n * @cssprop [--hx-select-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-select-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-select-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-select-chevron-color=var(--hx-color-neutral-500)] - Chevron indicator color.\n * @cssprop [--hx-select-chevron-size=0.5rem] - Chevron indicator size (width/height base unit).\n * @cssprop [--hx-select-listbox-bg=var(--hx-color-neutral-0)] - Listbox panel background color.\n * @cssprop [--hx-select-option-hover-bg=var(--hx-color-primary-50)] - Option hover background color.\n * @cssprop [--hx-select-option-selected-bg=var(--hx-color-primary-100)] - Selected option background color.\n * @cssprop [--hx-select-placeholder-color=var(--hx-color-neutral-400)] - Placeholder text color.\n */\n@customElement('hx-select')\nexport class HelixSelect extends FormMixin(HelixElement) {\n  static override styles = [helixSelectStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private _selectId = _nextSelectId();\n  /** @internal */\n  private _listboxId = `${this._selectId}-listbox`;\n  /** @internal */\n  private _labelId = `${this._selectId}-label`;\n  /** @internal */\n  private _helpTextId = `${this._selectId}-help`;\n  /** @internal */\n  private _errorId = `${this._selectId}-error`;\n\n  // ─── Public Properties ───\n\n  /**\n   * The visible label text for the select.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown in the trigger when no option is selected.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the select.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * Whether the select is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the select is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The name used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the select for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Size variant of the select trigger.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * Uses `accessible-label` attribute instead of `aria-label` to avoid\n   * ARIAMixin shadowing on the host element.\n   *\n   * Note: `mixinDelegatesAria` is not applied to this component because form\n   * inputs with associated labels delegate accessible naming via `<label>`\n   * association and `aria-labelledby`, not host-level ARIA delegation. The\n   * `accessible-label` attribute is a fallback for label-free usage. The value is forwarded to the\n   * internal trigger button's `aria-label`.\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string | null = null;\n\n  /**\n   * Controls whether the dropdown listbox is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Validation message when no option is selected. Override for i18n.\n   * @attr label-required\n   */\n  @property({ attribute: 'label-required' }) labelRequired = 'Please select an option.';\n\n  /**\n   * Label shown when no options are available. Override for i18n.\n   * @attr label-no-options\n   */\n  @property({ attribute: 'label-no-options' }) labelNoOptions = 'No options found';\n\n  // ─── Internal State ───\n\n  /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n  @state() private _options: SelectOption[] = [];\n  /** Whether the named error slot contains projected content. @internal */\n  @state() private _hasErrorSlot = false;\n  /** Zero-based index of the keyboard-focused option in the listbox; -1 means none. @internal */\n  @state() private _focusedOptionIndex = -1;\n\n  // ─── Queries ───\n\n  /** Reference to the hidden native select element used for form participation. @internal */\n  @query('.field__select')\n  private _select: HTMLSelectElement | undefined;\n\n  /** Reference to the visible combobox trigger element that receives keyboard focus. @internal */\n  @query('.field__trigger')\n  private _trigger: HTMLElement | undefined;\n\n  // ─── Computed helpers ───\n\n  /** @internal */\n  private get _displayValue(): string {\n    if (!this.value) return '';\n    const opt = this._options.find((o) => o.value === this.value);\n    return opt ? opt.label : this.value;\n  }\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Safety net: remove listener if component is removed while dropdown is open\n    document.removeEventListener('click', this._handleOutsideClick);\n    // Reset open state to prevent persisted open state on reconnect\n    if (this.open) {\n      this.open = false;\n      this._focusedOptionIndex = -1;\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        document.addEventListener('click', this._handleOutsideClick);\n      } else {\n        document.removeEventListener('click', this._handleOutsideClick);\n      }\n    }\n    if (changedProperties.has('value')) {\n      this._syncNativeSelect();\n      this._updateFormValue();\n    }\n    if (changedProperties.has('size')) {\n      const validSizes: string[] = ['sm', 'md', 'lg'];\n      if (!validSizes.includes(this.size)) {\n        devWarn(\n          'hx-select',\n          `Invalid size \"${this.size}\". Expected one of: ${validSizes.join(', ')}.`,\n        );\n      }\n    }\n    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  private _updateFormValue(): void {\n    this._internals.setFormValue(this.value || null);\n  }\n\n  /** @internal */\n  override _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.labelRequired,\n        this._trigger ?? this._select,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Form Lifecycle Hooks ───\n\n  protected override _onFormReset(): void {\n    this.value = '';\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Native Select Sync ───\n\n  /** @internal */\n  private _syncNativeSelect(): void {\n    if (!this._select) return;\n    if (this.value) {\n      this._select.value = this.value;\n    }\n  }\n\n  // ─── Option Syncing from Slot ───\n\n  /** @internal */\n  private _parseOption(el: HTMLOptionElement): SelectOption {\n    return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n  }\n\n  /**\n   * Single-pass slot handler: reads options into _options for the custom\n   * listbox AND clones them into the native <select> for form participation.\n   * Handles both top-level <option> and <optgroup> children.\n   */\n  /** @internal */\n  private _handleSlotChange(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return;\n\n    const parsed: SelectOption[] = [];\n\n    // Remove previously cloned options from native select\n    if (this._select) {\n      this._select.querySelectorAll('option[data-cloned]').forEach((opt) => opt.remove());\n    }\n\n    const cloneIntoSelect = (optEl: HTMLOptionElement): void => {\n      if (!this._select) return;\n      const clone = optEl.cloneNode(true) as HTMLOptionElement;\n      clone.setAttribute('data-cloned', '');\n      this._select.appendChild(clone);\n    };\n\n    for (const el of slot.assignedElements({ flatten: true })) {\n      if (el instanceof HTMLOptionElement) {\n        parsed.push(this._parseOption(el));\n        cloneIntoSelect(el);\n      } else if (el instanceof HTMLOptGroupElement) {\n        for (const child of Array.from(el.children)) {\n          if (child instanceof HTMLOptionElement) {\n            parsed.push(this._parseOption(child));\n            cloneIntoSelect(child);\n          }\n        }\n      }\n    }\n\n    this._options = parsed;\n\n    if (parsed.length === 0) {\n      devWarn(\n        'hx-select',\n        'hx-select has no options — add <option> or <optgroup> elements as children.',\n      );\n    }\n\n    if (this._select) {\n      if (this.value) {\n        this._select.value = this.value;\n      } else if (!this.placeholder && parsed.length > 0) {\n        this.value = this._select.value;\n        this._updateFormValue();\n      }\n    }\n  }\n\n  // ─── Slot Change Handlers ───\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Dropdown Control ───\n\n  /** @internal */\n  private _toggleDropdown(): void {\n    if (!this.disabled) {\n      this.open = !this.open;\n      if (this.open) {\n        // Pre-focus the currently selected option (or first enabled) when opening\n        const selectedIndex = this._options.findIndex((o) => o.value === this.value);\n        this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n      } else {\n        this._focusedOptionIndex = -1;\n      }\n    }\n  }\n\n  // ─── Keyboard Navigation ───\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    const enabledIndices = this._options\n      .map((o, i) => ({ o, i }))\n      .filter(({ o }) => !o.disabled)\n      .map(({ i }) => i);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n          break;\n        }\n        const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n        this._focusedOptionIndex =\n          nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          const lastEnabled = enabledIndices[enabledIndices.length - 1];\n          this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n          break;\n        }\n        const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n        const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n        this._focusedOptionIndex =\n          prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n        }\n        this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n        }\n        const lastEnabled = enabledIndices[enabledIndices.length - 1];\n        this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          const selIdx = this._options.findIndex((o) => o.value === this.value);\n          this._focusedOptionIndex = selIdx >= 0 ? selIdx : (enabledIndices[0] ?? 0);\n          break;\n        }\n        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {\n          const opt = this._options[this._focusedOptionIndex];\n          if (opt) this._selectOption(opt);\n        }\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this.open = false;\n        this._focusedOptionIndex = -1;\n        this._trigger?.focus();\n        break;\n      }\n      case 'Tab': {\n        // Close the dropdown but allow Tab to move focus naturally\n        if (this.open) {\n          this.open = false;\n          this._focusedOptionIndex = -1;\n        }\n        break;\n      }\n      default: {\n        // Typeahead: single printable character jumps to first matching option\n        if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {\n          const char = e.key.toLowerCase();\n          const startIndex = this.open ? this._focusedOptionIndex + 1 : 0;\n          const matching = this._options\n            .map((o, i) => ({ o, i }))\n            .filter(({ o }) => !o.disabled && o.label.toLowerCase().startsWith(char));\n          const afterCurrent = matching.find(({ i }) => i >= startIndex);\n          const target = afterCurrent ?? matching[0];\n          if (target) {\n            if (!this.open) {\n              this.open = true;\n            }\n            this._focusedOptionIndex = target.i;\n            e.preventDefault();\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  // ─── Selection ───\n\n  /** @internal */\n  private _selectOption(option: SelectOption): void {\n    if (option.disabled) return;\n    this.value = option.value; // triggers updated() → sync + formValue + validity\n    this._handleInteractionInput();\n    this._handleInteractionBlur();\n    this._dispatchChange();\n    this.open = false;\n    this._focusedOptionIndex = -1;\n  }\n\n  // ─── Event Dispatchers ───\n\n  /** @internal */\n  private _dispatchChange(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleNativeChange(e: Event): void {\n    this.value = (e.target as HTMLSelectElement).value; // triggers updated()\n    this._handleInteractionInput();\n    this._handleInteractionBlur();\n    this._dispatchChange();\n  }\n\n  // ─── Outside Click Handler ───\n\n  /** @internal */\n  private _handleOutsideClick = (e: MouseEvent): void => {\n    if (this.open && !e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  };\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the visible trigger button. */\n  override focus(options?: FocusOptions): void {\n    this._trigger?.focus(options);\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _optionId(index: number): string {\n    return `hx-select-option-${this._selectId}-${index}`;\n  }\n\n  /** @internal */\n  private _renderOptions() {\n    if (this._options.length === 0) {\n      return html`<div class=\"field__no-options\">${this.labelNoOptions}</div>`;\n    }\n\n    return repeat(\n      this._options,\n      (opt) => opt.value,\n      (opt, index) => {\n        const isSelected = opt.value === this.value;\n        const isFocused = index === this._focusedOptionIndex;\n\n        return html`\n          <div\n            id=${this._optionId(index)}\n            part=\"option\"\n            role=\"option\"\n            class=${classMap({\n              field__option: true,\n              'field__option--selected': isSelected,\n              'field__option--focused': isFocused,\n              'field__option--disabled': opt.disabled,\n            })}\n            aria-selected=${isSelected ? 'true' : 'false'}\n            aria-disabled=${opt.disabled ? 'true' : nothing}\n            @click=${() => this._selectOption(opt)}\n          >\n            <span class=\"field__option-label\">${opt.label}</span>\n          </div>\n        `;\n      },\n    );\n  }\n\n  // ─── Main Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--open': this.open,\n    };\n\n    const triggerClasses = {\n      field__trigger: true,\n      [`field__trigger--${this.size}`]: true,\n      'field__trigger--placeholder': !this.value,\n    };\n\n    const selectClasses = {\n      field__select: true,\n      [`field__select--${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError || this._hasErrorSlot ? this._errorId : null,\n        this.helpText ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <slot name=\"label\">\n          ${this.label\n            ? html`<label\n                part=\"label\"\n                class=\"field__label\"\n                id=${this._labelId}\n                for=${this._selectId}\n              >\n                ${this.label}\n                ${this.required\n                  ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                  : nothing}\n              </label>`\n            : nothing}\n        </slot>\n\n        <!-- Select Wrapper: trigger + listbox -->\n        <div part=\"select-wrapper\" class=\"field__select-wrapper\">\n          <!-- Custom Trigger (combobox — div to avoid native role conflicts per APG) -->\n          <div\n            part=\"trigger\"\n            id=${this._selectId}\n            class=${classMap(triggerClasses)}\n            role=\"combobox\"\n            tabindex=${this.disabled ? '-1' : '0'}\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-haspopup=\"listbox\"\n            aria-controls=${this._listboxId}\n            aria-activedescendant=${this.open && this._focusedOptionIndex >= 0\n              ? this._optionId(this._focusedOptionIndex)\n              : nothing}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-required=${this.required ? 'true' : nothing}\n            aria-disabled=${this.disabled ? 'true' : nothing}\n            aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n            aria-label=${ifDefined(this.accessibleLabel ?? undefined)}\n            @click=${this._toggleDropdown}\n            @keydown=${this._handleKeydown}\n          >\n            <span class=\"field__trigger-value\"\n              >${this._displayValue || this.placeholder || nothing}</span\n            >\n            <span class=\"field__chevron\" aria-hidden=\"true\"></span>\n          </div>\n\n          <!-- Custom Listbox Panel -->\n          <div\n            part=\"listbox\"\n            role=\"listbox\"\n            id=${this._listboxId}\n            class=\"field__listbox\"\n            aria-label=${ifDefined(this.label || this.accessibleLabel || undefined)}\n            ?hidden=${!this.open}\n          >\n            <div class=\"field__options\">${this._renderOptions()}</div>\n          </div>\n\n          <!-- Hidden native select (form participation + test compat) -->\n          <select\n            part=\"select\"\n            class=${classMap(selectClasses)}\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            name=${ifDefined(this.name || undefined)}\n            aria-label=${ifDefined(this.accessibleLabel ?? undefined)}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-required=${this.required ? 'true' : nothing}\n            @change=${this._handleNativeChange}\n          >\n            ${this.placeholder\n              ? html`<option value=\"\" disabled selected>${this.placeholder}</option>`\n              : nothing}\n          </select>\n        </div>\n\n        <!-- Hidden slot (options are read from here) -->\n        <slot @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${hasError\n            ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>`\n            : nothing}\n        </slot>\n\n        <!-- Help Text -->\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/**\n * Per-component event map for type-safe addEventListener on hx-select.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n */\nexport interface HxSelectEventMap {\n  'hx-change': CustomEvent<{ value: string }>;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-select': HelixSelect;\n  }\n}\n\nexport type { HelixSelect as HxSelect };\n"],"names":["helixSelectStyles","css","_nextSelectId","createIdCounter","HelixSelect","FormMixin","HelixElement","opt","o","changedProperties","validSizes","devWarn","errorEl","_a","msg","state","_mode","disabled","el","slot","parsed","cloneIntoSelect","optEl","clone","child","selectedIndex","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","selIdx","char","startIndex","matching","target","option","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","fieldClasses","triggerClasses","selectClasses","describedBy","ifDefined","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACYjC,MAAMC,IAAgBC,EAAgB,WAAW;AAqE1C,IAAMC,IAAN,cAA0BC,EAAUC,CAAY,EAAE;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAWL,KAAQ,YAAYJ,EAAA,GAEpB,KAAQ,aAAa,GAAG,KAAK,SAAS,YAEtC,KAAQ,WAAW,GAAG,KAAK,SAAS,UAEpC,KAAQ,cAAc,GAAG,KAAK,SAAS,SAEvC,KAAQ,WAAW,GAAG,KAAK,SAAS,UASpC,KAAA,QAAQ,IAOR,KAAA,cAAc,IAOd,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,OAAO,IAOP,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAA2B,MAe3B,KAAA,kBAAiC,MAOjC,KAAA,OAAO,IAMoC,KAAA,gBAAgB,4BAMd,KAAA,iBAAiB,oBAKrD,KAAQ,WAA2B,CAAA,GAEnC,KAAQ,gBAAgB,IAExB,KAAQ,sBAAsB,IAmWvC,KAAQ,sBAAsB,CAAC,MAAwB;AACrD,MAAI,KAAK,QAAQ,CAAC,EAAE,eAAe,SAAS,IAAI,MAC9C,KAAK,OAAO;AAAA,IAEhB;AAAA,EAAA;AAAA;AAAA;AAAA,EAxVA,IAAY,gBAAwB;AAClC,QAAI,CAAC,KAAK,MAAO,QAAO;AACxB,UAAMK,IAAM,KAAK,SAAS,KAAK,CAACC,MAAMA,EAAE,UAAU,KAAK,KAAK;AAC5D,WAAOD,IAAMA,EAAI,QAAQ,KAAK;AAAA,EAChC;AAAA;AAAA,EAIS,uBAA6B;AACpC,UAAM,qBAAA,GAEN,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAE1D,KAAK,SACP,KAAK,OAAO,IACZ,KAAK,sBAAsB;AAAA,EAE/B;AAAA,EAES,QAAQE,GAA+C;;AAa9D,QAZA,MAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,SAAS,iBAAiB,SAAS,KAAK,mBAAmB,IAE3D,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,IAG9DA,EAAkB,IAAI,OAAO,MAC/B,KAAK,kBAAA,GACL,KAAK,iBAAA,IAEHA,EAAkB,IAAI,MAAM,GAAG;AACjC,YAAMC,IAAuB,CAAC,MAAM,MAAM,IAAI;AAC9C,MAAKA,EAAW,SAAS,KAAK,IAAI,KAChCC;AAAA,QACE;AAAA,QACA,iBAAiB,KAAK,IAAI,uBAAuBD,EAAW,KAAK,IAAI,CAAC;AAAA,MAAA;AAAA,IAG5E;AAEA,QAAID,EAAkB,IAAI,OAAO,KAAK,KAAK,OAAO;AAChD,YAAMG,KAAUC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC/C,UAAID,GAAS;AACX,cAAME,IAAM,KAAK;AACjB,8BAAsB,MAAM;AAC1B,UAAAF,EAAQ,cAAc,IACtB,sBAAsB,MAAM;AAC1B,YAAAA,EAAQ,cAAcE;AAAA,UACxB,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA,EAKQ,mBAAyB;AAC/B,SAAK,WAAW,aAAa,KAAK,SAAS,IAAI;AAAA,EACjD;AAAA;AAAA,EAGS,kBAAwB;AAC/B,IAAI,KAAK,YAAY,CAAC,KAAK,QACzB,KAAK,WAAW;AAAA,MACd,EAAE,cAAc,GAAA;AAAA,MAChB,KAAK,SAAS,KAAK;AAAA,MACnB,KAAK,YAAY,KAAK;AAAA,IAAA,IAGxB,KAAK,WAAW,YAAY,EAAE;AAAA,EAElC;AAAA;AAAA,EAImB,eAAqB;AACtC,SAAK,QAAQ,IACb,KAAK,WAAW,aAAa,IAAI,GACjC,KAAK,uBAAA;AAAA,EACP;AAAA,EAEmB,oBACjBC,GACAC,GACM;AACN,IAAI,OAAOD,KAAU,aACnB,KAAK,QAAQA;AAAAA,EAEjB;AAAA,EAEmB,gBAAgBE,GAAyB;AAC1D,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,oBAA0B;AAChC,IAAK,KAAK,WACN,KAAK,UACP,KAAK,QAAQ,QAAQ,KAAK;AAAA,EAE9B;AAAA;AAAA;AAAA,EAKQ,aAAaC,GAAqC;;AACxD,WAAO,EAAE,OAAOA,EAAG,OAAO,SAAOL,IAAAK,EAAG,gBAAH,gBAAAL,EAAgB,WAAUK,EAAG,OAAO,UAAUA,EAAG,SAAA;AAAA,EACpF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,oBAA0B;;AAChC,UAAMC,KAAON,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,QAAI,CAACM,EAAM;AAEX,UAAMC,IAAyB,CAAA;AAG/B,IAAI,KAAK,WACP,KAAK,QAAQ,iBAAiB,qBAAqB,EAAE,QAAQ,CAACb,MAAQA,EAAI,QAAQ;AAGpF,UAAMc,IAAkB,CAACC,MAAmC;AAC1D,UAAI,CAAC,KAAK,QAAS;AACnB,YAAMC,IAAQD,EAAM,UAAU,EAAI;AAClC,MAAAC,EAAM,aAAa,eAAe,EAAE,GACpC,KAAK,QAAQ,YAAYA,CAAK;AAAA,IAChC;AAEA,eAAWL,KAAMC,EAAK,iBAAiB,EAAE,SAAS,GAAA,CAAM;AACtD,UAAID,aAAc;AAChB,QAAAE,EAAO,KAAK,KAAK,aAAaF,CAAE,CAAC,GACjCG,EAAgBH,CAAE;AAAA,eACTA,aAAc;AACvB,mBAAWM,KAAS,MAAM,KAAKN,EAAG,QAAQ;AACxC,UAAIM,aAAiB,sBACnBJ,EAAO,KAAK,KAAK,aAAaI,CAAK,CAAC,GACpCH,EAAgBG,CAAK;AAM7B,SAAK,WAAWJ,GAEZA,EAAO,QAOP,KAAK,YACH,KAAK,QACP,KAAK,QAAQ,QAAQ,KAAK,QACjB,CAAC,KAAK,eAAeA,EAAO,SAAS,MAC9C,KAAK,QAAQ,KAAK,QAAQ,OAC1B,KAAK,iBAAA;AAAA,EAGX;AAAA;AAAA;AAAA,EAKQ,uBAAuB,GAAgB;AAC7C,UAAMD,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACtE;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,QAAI,CAAC,KAAK;AAER,UADA,KAAK,OAAO,CAAC,KAAK,MACd,KAAK,MAAM;AAEb,cAAMM,IAAgB,KAAK,SAAS,UAAU,CAACjB,MAAMA,EAAE,UAAU,KAAK,KAAK;AAC3E,aAAK,sBAAsBiB,KAAiB,IAAIA,IAAgB;AAAA,MAClE;AACE,aAAK,sBAAsB;AAAA,EAGjC;AAAA;AAAA;AAAA,EAKQ,eAAe,GAAwB;;AAC7C,QAAI,KAAK,SAAU;AAEnB,UAAMC,IAAiB,KAAK,SACzB,IAAI,CAAClB,GAAGmB,OAAO,EAAE,GAAAnB,GAAG,GAAAmB,IAAI,EACxB,OAAO,CAAC,EAAE,GAAAnB,QAAQ,CAACA,EAAE,QAAQ,EAC7B,IAAI,CAAC,EAAE,GAAAmB,EAAA,MAAQA,CAAC;AAEnB,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAEhB,YADA,EAAE,eAAA,GACE,CAAC,KAAK,MAAM;AACd,eAAK,OAAO,IACZ,KAAK,sBAAsBD,EAAe,SAAS,IAAKA,EAAe,CAAC,KAAK,IAAK;AAClF;AAAA,QACF;AACA,cAAME,IAAWF,EAAe,KAAK,CAACC,MAAMA,IAAI,KAAK,mBAAmB;AACxE,aAAK,sBACHC,MAAa,SAAYA,IAAYF,EAAe,CAAC,KAAK,KAAK;AACjE;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AAEd,YADA,EAAE,eAAA,GACE,CAAC,KAAK,MAAM;AACd,eAAK,OAAO;AACZ,gBAAMG,IAAcH,EAAeA,EAAe,SAAS,CAAC;AAC5D,eAAK,sBAAsBG,MAAgB,SAAYA,IAAc;AACrE;AAAA,QACF;AACA,cAAMC,IAAS,CAAC,GAAGJ,CAAc,EAAE,QAAA,EAAU,KAAK,CAACC,MAAMA,IAAI,KAAK,mBAAmB,GAC/EI,IAAgBL,EAAeA,EAAe,SAAS,CAAC;AAC9D,aAAK,sBACHI,MAAW,SAAYA,IAAUC,KAAiB,KAAK;AACzD;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,UAAE,eAAA,GACG,KAAK,SACR,KAAK,OAAO,KAEd,KAAK,sBAAsBL,EAAe,SAAS,IAAKA,EAAe,CAAC,KAAK,IAAK;AAClF;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,UAAE,eAAA,GACG,KAAK,SACR,KAAK,OAAO;AAEd,cAAMG,IAAcH,EAAeA,EAAe,SAAS,CAAC;AAC5D,aAAK,sBAAsBG,MAAgB,SAAYA,IAAc;AACrE;AAAA,MACF;AAAA,MACA,KAAK;AAAA,MACL,KAAK,KAAK;AAER,YADA,EAAE,eAAA,GACE,CAAC,KAAK,MAAM;AACd,eAAK,OAAO;AACZ,gBAAMG,IAAS,KAAK,SAAS,UAAU,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK;AACpE,eAAK,sBAAsBA,KAAU,IAAIA,IAAUN,EAAe,CAAC,KAAK;AACxE;AAAA,QACF;AACA,YAAI,KAAK,uBAAuB,KAAK,KAAK,sBAAsB,KAAK,SAAS,QAAQ;AACpF,gBAAMnB,IAAM,KAAK,SAAS,KAAK,mBAAmB;AAClD,UAAIA,KAAK,KAAK,cAAcA,CAAG;AAAA,QACjC;AACA;AAAA,MACF;AAAA,MACA,KAAK,UAAU;AACb,UAAE,eAAA,GACF,KAAK,OAAO,IACZ,KAAK,sBAAsB,KAC3BM,IAAA,KAAK,aAAL,QAAAA,EAAe;AACf;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AAEV,QAAI,KAAK,SACP,KAAK,OAAO,IACZ,KAAK,sBAAsB;AAE7B;AAAA,MACF;AAAA,MACA,SAAS;AAEP,YAAI,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,IAAI,WAAW,GAAG;AAC/D,gBAAMoB,IAAO,EAAE,IAAI,YAAA,GACbC,IAAa,KAAK,OAAO,KAAK,sBAAsB,IAAI,GACxDC,IAAW,KAAK,SACnB,IAAI,CAAC3B,GAAGmB,OAAO,EAAE,GAAAnB,GAAG,GAAAmB,EAAA,EAAI,EACxB,OAAO,CAAC,EAAE,GAAAnB,EAAA,MAAQ,CAACA,EAAE,YAAYA,EAAE,MAAM,YAAA,EAAc,WAAWyB,CAAI,CAAC,GAEpEG,IADeD,EAAS,KAAK,CAAC,EAAE,GAAAR,EAAA,MAAQA,KAAKO,CAAU,KAC9BC,EAAS,CAAC;AACzC,UAAIC,MACG,KAAK,SACR,KAAK,OAAO,KAEd,KAAK,sBAAsBA,EAAO,GAClC,EAAE,eAAA;AAAA,QAEN;AACA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA,EAKQ,cAAcC,GAA4B;AAChD,IAAIA,EAAO,aACX,KAAK,QAAQA,EAAO,OACpB,KAAK,wBAAA,GACL,KAAK,uBAAA,GACL,KAAK,gBAAA,GACL,KAAK,OAAO,IACZ,KAAK,sBAAsB;AAAA,EAC7B;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,SAAK;AAAA,MACH,IAAI,YAA+B,aAAa;AAAA,QAC9C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,oBAAoB,GAAgB;AAC1C,SAAK,QAAS,EAAE,OAA6B,OAC7C,KAAK,wBAAA,GACL,KAAK,uBAAA,GACL,KAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAcS,MAAMC,GAA8B;;AAC3C,KAAAzB,IAAA,KAAK,aAAL,QAAAA,EAAe,MAAMyB;AAAA,EACvB;AAAA;AAAA;AAAA,EAKQ,UAAUC,GAAuB;AACvC,WAAO,oBAAoB,KAAK,SAAS,IAAIA,CAAK;AAAA,EACpD;AAAA;AAAA,EAGQ,iBAAiB;AACvB,WAAI,KAAK,SAAS,WAAW,IACpBC,mCAAsC,KAAK,cAAc,WAG3DC;AAAA,MACL,KAAK;AAAA,MACL,CAAClC,MAAQA,EAAI;AAAA,MACb,CAACA,GAAKgC,MAAU;AACd,cAAMG,IAAanC,EAAI,UAAU,KAAK,OAChCoC,IAAYJ,MAAU,KAAK;AAEjC,eAAOC;AAAA;AAAA,iBAEE,KAAK,UAAUD,CAAK,CAAC;AAAA;AAAA;AAAA,oBAGlBK,EAAS;AAAA,UACf,eAAe;AAAA,UACf,2BAA2BF;AAAA,UAC3B,0BAA0BC;AAAA,UAC1B,2BAA2BpC,EAAI;AAAA,QAAA,CAChC,CAAC;AAAA,4BACcmC,IAAa,SAAS,OAAO;AAAA,4BAC7BnC,EAAI,WAAW,SAASsC,CAAO;AAAA,qBACtC,MAAM,KAAK,cAActC,CAAG,CAAC;AAAA;AAAA,gDAEFA,EAAI,KAAK;AAAA;AAAA;AAAA,MAGnD;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMuC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAEhCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBD;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,eAAe,KAAK;AAAA,IAAA,GAGhBE,IAAiB;AAAA,MACrB,gBAAgB;AAAA,MAChB,CAAC,mBAAmB,KAAK,IAAI,EAAE,GAAG;AAAA,MAClC,+BAA+B,CAAC,KAAK;AAAA,IAAA,GAGjCC,IAAgB;AAAA,MACpB,eAAe;AAAA,MACf,CAAC,kBAAkB,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAG7BC,IACJ;AAAA,MACEJ,KAAY,KAAK,gBAAgB,KAAK,WAAW;AAAA,MACjD,KAAK,WAAW,KAAK,cAAc;AAAA,IAAA,EAElC,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,WAAON;AAAA,gCACqBI,EAASG,CAAY,CAAC;AAAA;AAAA;AAAA,YAG1C,KAAK,QACHP;AAAA;AAAA;AAAA,qBAGO,KAAK,QAAQ;AAAA,sBACZ,KAAK,SAAS;AAAA;AAAA,kBAElB,KAAK,KAAK;AAAA,kBACV,KAAK,WACHA,sEACAK,CAAO;AAAA,0BAEbA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQJ,KAAK,SAAS;AAAA,oBACXD,EAASI,CAAc,CAAC;AAAA;AAAA,uBAErB,KAAK,WAAW,OAAO,GAAG;AAAA,4BACrB,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,4BAE5B,KAAK,UAAU;AAAA,oCACP,KAAK,QAAQ,KAAK,uBAAuB,IAC7D,KAAK,UAAU,KAAK,mBAAmB,IACvCH,CAAO;AAAA,2BACIC,IAAW,SAASD,CAAO;AAAA,+BACvBM,EAAUD,CAAW,CAAC;AAAA,4BACzB,KAAK,WAAW,SAASL,CAAO;AAAA,4BAChC,KAAK,WAAW,SAASA,CAAO;AAAA,8BAC9BM,EAAU,KAAK,QAAQ,KAAK,WAAW,MAAS,CAAC;AAAA,yBACtDA,EAAU,KAAK,mBAAmB,MAAS,CAAC;AAAA,qBAChD,KAAK,eAAe;AAAA,uBAClB,KAAK,cAAc;AAAA;AAAA;AAAA,iBAGzB,KAAK,iBAAiB,KAAK,eAAeN,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASjD,KAAK,UAAU;AAAA;AAAA,yBAEPM,EAAU,KAAK,SAAS,KAAK,mBAAmB,MAAS,CAAC;AAAA,sBAC7D,CAAC,KAAK,IAAI;AAAA;AAAA,0CAEU,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAM3CP,EAASK,CAAa,CAAC;AAAA;AAAA;AAAA,wBAGnB,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBE,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,yBAC3BA,EAAU,KAAK,mBAAmB,MAAS,CAAC;AAAA,2BAC1CL,IAAW,SAASD,CAAO;AAAA,+BACvBM,EAAUD,CAAW,CAAC;AAAA,4BACzB,KAAK,WAAW,SAASL,CAAO;AAAA,sBACtC,KAAK,mBAAmB;AAAA;AAAA,cAEhC,KAAK,cACHL,uCAA0C,KAAK,WAAW,cAC1DK,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKK,KAAK,iBAAiB;AAAA;AAAA;AAAA,yCAGT,KAAK,sBAAsB;AAAA,YACxDC,IACEN,8CAAiD,KAAK,QAAQ;AAAA,kBAC1D,KAAK,KAAK;AAAA,wBAEdK,CAAO;AAAA;AAAA;AAAA;AAAA,UAIX,KAAK,YAAY,CAACC,IAChBN;AAAA,kEACsD,KAAK,WAAW;AAAA,yCACzC,KAAK,QAAQ;AAAA;AAAA,gBAG1CK,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAlqBazC,EACK,SAAS,CAACJ,CAAiB;AADhCI,EAMK,iBAAiB;AAsBjCgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3BfjD,EA4BX,WAAA,SAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfjD,EAmCX,WAAA,eAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzC9BjD,EA0CX,WAAA,SAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhD/BjD,EAiDX,WAAA,YAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvD/BjD,EAwDX,WAAA,YAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9D9BjD,EA+DX,WAAA,QAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArEfjD,EAsEX,WAAA,SAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA5EvCjD,EA6EX,WAAA,YAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,SAAS,IAAM;AAAA,GAnFpDjD,EAoFX,WAAA,QAAA,CAAA;AAeAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAlG9CjD,EAmGX,WAAA,mBAAA,CAAA;AAOAgD,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzG/BjD,EA0GX,WAAA,QAAA,CAAA;AAM2CgD,EAAA;AAAA,EAA1CC,EAAS,EAAE,WAAW,iBAAA,CAAkB;AAAA,GAhH9BjD,EAgHgC,WAAA,iBAAA,CAAA;AAMEgD,EAAA;AAAA,EAA5CC,EAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GAtHhCjD,EAsHkC,WAAA,kBAAA,CAAA;AAK5BgD,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GA3HIX,EA2HM,WAAA,YAAA,CAAA;AAEAgD,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GA7HIX,EA6HM,WAAA,iBAAA,CAAA;AAEAgD,EAAA;AAAA,EAAhBrC,EAAA;AAAM,GA/HIX,EA+HM,WAAA,uBAAA,CAAA;AAMTgD,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GApIZlD,EAqIH,WAAA,WAAA,CAAA;AAIAgD,EAAA;AAAA,EADPE,EAAM,iBAAiB;AAAA,GAxIblD,EAyIH,WAAA,YAAA,CAAA;AAzIGA,IAANgD,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbnD,CAAA;"}