@helixui/library 3.3.1-next.115 → 3.3.1-next.118

package/dist/shared/hx-select-DrcS-YRJ.js

@@ -0,0 +1,1089 @@
+import { css as F, html as b, nothing as _ } from "lit";
+import { property as n, state as c, query as D, customElement as W } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { ifDefined as C } from "lit/directives/if-defined.js";
+import { repeat as V } from "lit/directives/repeat.js";
+import { F as j } from "./FormMixin-B8PXk5RQ.js";
+import { d as U } from "./dev-warn-YlwPHjtX.js";
+import { s as G, i as K, r as A } from "./aria-idref-Q0yiSR3p.js";
+import { H as P } from "./helix-element-BNEYeiys.js";
+import { c as X } from "./id-counter-DuX8vsui.js";
+const J = F`
+  /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
+  :host {
+    display: block;
+    /* Round-3 finding 1: host is the canonical combobox surface, so it owns
+       keyboard focus. Suppress the UA default outline; the custom focus ring
+       is painted on the inner trigger via :host(:focus-visible)
+       .field__trigger so visual feedback follows the host's focus state. */
+    outline: none;
+
+    /* Background & foreground */
+    --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
+    --_color: var(--hx-select-color, var(--hx-color-text-strong, #202b39));
+    --_placeholder-color: var(
+      --hx-select-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
+
+    /* Label */
+    --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
+
+    /* Border */
+    --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #66787b));
+    --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+
+    /* Focus ring */
+    --_focus-ring-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+
+    /* Error */
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #e5493e));
+
+    /* Chevron */
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #4a5362));
+    --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
+
+    /* Listbox */
+    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
+    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+    --_option-selected-bg: var(
+      --hx-select-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
+
+    /* Typography */
+    --_font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--_font-family);
+    position: relative;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--_label-color);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  .field__select-wrapper {
+    position: relative;
+    display: block;
+  }
+
+  .field__trigger {
+    /* Round-3 finding 1 / CodeRabbit F1: trigger is a <button type="button">
+       (labelable) so native <label for> click activation works for mouse
+       users. Reset native button chrome before applying field styles. */
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hx-space-2, 0.5rem);
+    width: 100%;
+    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
+    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    background-color: var(--_bg);
+    color: var(--_color);
+    font: inherit;
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    cursor: pointer;
+    text-align: start;
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  /* Round-3 finding 1: host is the canonical focusable surface. Both the
+     :host(:focus-visible) descendant selector AND the legacy
+     .field__trigger:focus-visible (kept for forced-colors regression test
+     parity) paint the focus ring on the visual trigger. */
+  :host(:focus-visible) .field__trigger,
+  .field__trigger:focus-visible {
+    border-color: var(--_focus-ring-color);
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--_focus-ring-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  .field__trigger[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  .field__trigger--sm {
+    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
+  }
+
+  .field__trigger--lg {
+    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+  }
+
+  .field__trigger-value {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .field__trigger--placeholder .field__trigger-value {
+    color: var(--_placeholder-color);
+  }
+
+  .field__chevron {
+    flex-shrink: 0;
+    width: calc(var(--_chevron-size) * 1.5);
+    height: var(--_chevron-size);
+    position: relative;
+    color: var(--_chevron-color);
+    pointer-events: none;
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .field__chevron::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: var(--hx-space-px, 2px);
+    width: var(--_chevron-size);
+    height: var(--_chevron-size);
+    border-inline-end: var(--hx-border-width-thin, 1.5px) solid currentColor;
+    border-bottom: var(--hx-border-width-thin, 1.5px) solid currentColor;
+    transform: rotate(45deg);
+  }
+
+  .field--open .field__chevron {
+    transform: rotate(180deg);
+  }
+
+  .field--error .field__trigger {
+    border-color: var(--_error-color);
+  }
+
+  :host(:focus-visible) .field--error .field__trigger,
+  .field--error .field__trigger:focus-visible {
+    border-color: var(--_error-color);
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--_error-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    right: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    background-color: var(--_listbox-bg);
+    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    box-shadow: var(
+      --hx-select-listbox-shadow,
+      0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))
+    );
+    max-height: var(--hx-select-listbox-max-height, 16rem);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .field__listbox[hidden] {
+    display: none;
+  }
+
+  .field__options {
+    overflow-y: auto;
+    flex: 1;
+    padding: var(--hx-space-1, 0.25rem) 0;
+  }
+
+  .field__option {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--_color);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .field__option:hover {
+    background-color: var(--_option-hover-bg);
+  }
+
+  .field__option--selected {
+    background-color: var(--_option-selected-bg);
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+
+  .field__option--focused {
+    background-color: var(--_option-hover-bg);
+    outline: var(--hx-focus-ring-width, 2px) solid var(--_focus-ring-color);
+    outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
+  }
+
+  .field__option--focused.field__option--selected {
+    background-color: var(--_option-selected-bg);
+  }
+
+  .field__option--disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .field__option-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .field__no-options {
+    padding: var(--hx-space-3, 0.75rem);
+    text-align: center;
+    color: var(--_placeholder-color);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .field__select {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__help-text {
+    color: var(--hx-color-text-muted, #4a5362);
+  }
+
+  .field__error {
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__trigger,
+    .field__chevron,
+    .field__option {
+      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;
+    }
+
+    :host(:focus-visible) .field__trigger,
+    .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 Q = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? Y(t, i) : t, a = e.length - 1, h; a >= 0; a--)
+    (h = e[a]) && (s = (r ? h(t, i, s) : h(s)) || s);
+  return r && s && Q(t, i, s), s;
+};
+function $(e) {
+  const t = e.querySelector("slot");
+  if (t) {
+    const i = t.assignedNodes({ flatten: !0 });
+    if (i.length > 0)
+      return i.map((r) => r.textContent ?? "").join("").trim();
+  }
+  return (e.textContent ?? "").trim();
+}
+const Z = X("hx-select");
+let o = class extends j(P) {
+  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.accessibleLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._hasLabelSlot = !1, this._labelSource = "none", this._labelSlotText = "", this._hasHelpSlot = !1, this._slottedLabelEl = null, this._focusedOptionIndex = -1, this._supportsIdrefRefs = !0, this._announcedError = "", this._invalid = !1, this._ariaMirror = null, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._hostDescribedByObserver = null, this._lastWrittenLabelledBy = null, this._lastWrittenDescribedBy = null, this._lastWrittenAriaLabel = null, this._consumerLabelledBy = null, this._consumerDescribedBy = null, this._handleHostClick = (e) => {
+      var s, a;
+      const t = e.composedPath(), i = ((s = this.shadowRoot) == null ? void 0 : s.querySelector(".field__listbox")) ?? null;
+      if (i && t.includes(i))
+        return;
+      const r = this._trigger ?? ((a = this.shadowRoot) == null ? void 0 : a.querySelector(".field__trigger")) ?? null;
+      !r || !t.includes(r) || this._toggleDropdown();
+    }, this._handleKeydown = (e) => {
+      if (this.disabled) return;
+      const t = this._options.map((i, r) => ({ o: i, i: r })).filter(({ o: i }) => !i.disabled).map(({ i }) => i);
+      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;
+          break;
+        }
+        case "ArrowUp": {
+          if (e.preventDefault(), !this.open) {
+            this.open = !0;
+            const s = t[t.length - 1];
+            this._focusedOptionIndex = s !== void 0 ? s : 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;
+          break;
+        }
+        case "Home": {
+          e.preventDefault(), this.open || (this.open = !0), this._focusedOptionIndex = t.length > 0 ? t[0] ?? 0 : 0;
+          break;
+        }
+        case "End": {
+          e.preventDefault(), this.open || (this.open = !0);
+          const i = t[t.length - 1];
+          this._focusedOptionIndex = i !== void 0 ? i : 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;
+            break;
+          }
+          if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {
+            const i = this._options[this._focusedOptionIndex];
+            i && this._selectOption(i);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault(), this.open = !1, this._focusedOptionIndex = -1, this.focus();
+          break;
+        }
+        case "Tab": {
+          this.open && (this.open = !1, this._focusedOptionIndex = -1);
+          break;
+        }
+        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((d, v) => ({ o: d, i: v })).filter(({ o: d }) => !d.disabled && d.label.toLowerCase().startsWith(i)), h = s.find(({ i: d }) => d >= r) ?? s[0];
+            h && (this.open || (this.open = !0), this._focusedOptionIndex = h.i, e.preventDefault());
+          }
+          break;
+        }
+      }
+    }, this._handleOutsideClick = (e) => {
+      this.open && !e.composedPath().includes(this) && (this.open = !1);
+    };
+  }
+  // ─── Computed helpers ───
+  /** @internal */
+  get _displayValue() {
+    if (!this.value) return "";
+    const e = this._options.find((t) => t.value === this.value);
+    return e ? e.label : this.value;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : G(this._internals), this.addEventListener("click", this._handleHostClick), this.addEventListener("keydown", this._handleKeydown), this._hostDescribedByObserver = new MutationObserver((t) => {
+      let i = !1;
+      for (const r of t) {
+        if (r.attributeName !== "aria-describedby") continue;
+        const s = r.oldValue, a = this.getAttribute("aria-describedby");
+        s !== null && a === null && (this._consumerDescribedBy = null, i = !0);
+      }
+      i && this._syncHostAriaSemantics();
+    }), this._hostDescribedByObserver.observe(this, {
+      attributes: !0,
+      attributeFilter: ["aria-describedby"],
+      attributeOldValue: !0
+    }), this._syncHostAriaSemantics(), this._ariaMirror = K(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e, t, i, r;
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this.removeEventListener("click", this._handleHostClick), this.removeEventListener("keydown", this._handleKeydown), this.open && (this.open = !1, this._focusedOptionIndex = -1), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._helpSlotTextObserver) == null || t.disconnect(), this._helpSlotTextObserver = null, (i = this._errorSlotTextObserver) == null || i.disconnect(), this._errorSlotTextObserver = null, (r = this._hostDescribedByObserver) == null || r.disconnect(), this._hostDescribedByObserver = null;
+  }
+  updated(e) {
+    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("label") && this._refreshLabelSource(), e.has("size")) {
+      const t = ["sm", "md", "lg"];
+      t.includes(this.size) || U(
+        "hx-select",
+        `Invalid size "${this.size}". Expected one of: ${t.join(", ")}.`
+      );
+    }
+    this._syncHostAriaSemantics(), e.has("error") && (e.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error;
+    })) : this._announcedError = this.error);
+  }
+  firstUpdated(e) {
+    var r;
+    super.firstUpdated(e);
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="label"]'), i = t ? this._readLabelSlotState(t).hasUsefulName : !1;
+    !this.label && !this.accessibleLabel && !i && !this.getAttribute("aria-label") && this.getAttribute("aria-labelledby");
+  }
+  /**
+   * Reads the label slot's assigned nodes and computes the discriminated
+   * naming state. Round-3 finding 3 + 5 + 8: an empty whitespace-only slot
+   * does NOT count as a useful name; the first labellable element is
+   * captured by reference (no consumer-DOM mutation); the result drives a
+   * discriminated `_labelSource` rather than a magic `'*slotted*'` string.
+   * @internal
+   */
+  _readLabelSlotState(e) {
+    const t = e.assignedNodes({ flatten: !0 });
+    let i = null, r = "";
+    for (const a of t)
+      a.nodeType === Node.ELEMENT_NODE && !i ? i = a : a.nodeType === Node.TEXT_NODE && (r += a.textContent ?? "");
+    const s = r.trim();
+    return {
+      hasUsefulName: i !== null || s.length > 0,
+      element: i,
+      text: s
+    };
+  }
+  // ─── Host-canonical ARIA sync ───
+  /**
+   * Mirrors combobox semantics onto the host via ElementInternals so that the
+   * host IS the canonical announced surface on BOTH the modern (IDL element
+   * references) and fallback paths. Round-3 finding 1: codex round-2
+   * demonstrated that putting `role="combobox"` on the host on fallback while
+   * leaving focus/click/keyboard/validity anchored to the inner trigger
+   * created a "named surface ≠ focused surface" gap. Round-3 collapses both
+   * paths to the host-canonical model used by Group 2's `hx-radio-group` /
+   * `hx-checkbox-group` (PR #1625):
+   *
+   * - `internals.role = 'combobox'` so AT advertises the combobox role.
+   * - Host attribute `role="combobox"` mirror so legacy engines, axe-core,
+   *   and `getAttribute('role')` agree with the internals default.
+   * - Host attribute `tabindex="0"` so the host is the focusable surface.
+   * - Host attributes `aria-expanded`, `aria-haspopup`, `aria-controls`,
+   *   `aria-activedescendant`, `aria-required`, `aria-invalid`,
+   *   `aria-disabled` so AT walking the host's attribute graph sees the
+   *   combobox state without depending on internals defaults.
+   * - Modern path additionally sets `internals.ariaLabelledByElements` /
+   *   `internals.ariaDescribedByElements` so consumer light-DOM IDREFs cross
+   *   the shadow boundary into the host's accessible node.
+   * - Fallback path mirrors consumer label/desc tokens onto the host
+   *   attribute and text-mirrors shadow help/error wrappers via
+   *   `internals.ariaDescription`.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var L, O, E, T, k;
+    const e = this._internals;
+    e.role = "combobox", e.ariaRequired = this.required ? "true" : "false";
+    const t = !e.validity.valid;
+    this._invalid = t, e.ariaInvalid = t ? "true" : "false", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaExpanded = this.open ? "true" : "false", e.ariaHasPopup = "listbox";
+    const i = this.getAttribute("aria-label"), r = i !== null && i !== this._lastWrittenAriaLabel && i.trim() || "", s = ((L = this.shadowRoot) == null ? void 0 : L.getElementById(this._labelId)) ?? null, a = this._slottedLabelEl, h = ((O = this.shadowRoot) == null ? void 0 : O.getElementById(this._helpTextId)) ?? null, d = ((E = this.shadowRoot) == null ? void 0 : E.getElementById(this._errorId)) ?? null, v = this.getAttribute("aria-labelledby");
+    v !== this._lastWrittenLabelledBy && (this._consumerLabelledBy = v);
+    const w = this.getAttribute("aria-describedby");
+    w !== this._lastWrittenDescribedBy && (this._consumerDescribedBy = w);
+    const B = this._consumerLabelledBy, I = this._consumerDescribedBy, u = A(this, B), S = u.length > 0;
+    r ? e.ariaLabel = r : S ? e.ariaLabel = null : this._labelSource === "slot" ? a ? e.ariaLabel = null : e.ariaLabel = this._labelSlotText || this.accessibleLabel || null : this._labelSource === "string" ? e.ariaLabel = this.label || this.accessibleLabel || null : e.ariaLabel = this.accessibleLabel || null, !S && !r && (this._labelSource === "slot" && a ? u.push(a) : this._labelSource === "string" && s && u.push(s));
+    const g = A(this, I), x = !!(this.error || this._hasErrorSlot);
+    if (h && !x && (this.helpText || this._hasHelpSlot) && g.push(h), d && x && g.push(d), this._supportsIdrefRefs) {
+      const p = e;
+      p.ariaLabelledByElements = u.length > 0 ? u : null, p.ariaDescribedByElements = g.length > 0 ? g : null, e.ariaDescription = null;
+    } else {
+      const p = e;
+      p.ariaLabelledByElements = null, p.ariaDescribedByElements = null;
+      const z = u.map((f) => f.id).filter((f) => !!f), m = S ? z.join(" ") : "", H = this.getAttribute("aria-labelledby");
+      m ? (H !== m && this.setAttribute("aria-labelledby", m), this._lastWrittenLabelledBy = m) : H !== null && (this.removeAttribute("aria-labelledby"), this._lastWrittenLabelledBy = null), this.hasAttribute("aria-describedby") && ((T = this._hostDescribedByObserver) == null || T.disconnect(), this.removeAttribute("aria-describedby"), (k = this._hostDescribedByObserver) == null || k.observe(this, {
+        attributes: !0,
+        attributeFilter: ["aria-describedby"],
+        attributeOldValue: !0
+      })), this._lastWrittenDescribedBy = null;
+      const R = A(this, I).map((f) => (f.textContent ?? "").trim()).filter(Boolean).join(" "), q = h && !x && (this.helpText || this._hasHelpSlot) ? $(h) : "", N = d && x ? $(d) : "", M = [R, q, N].filter(Boolean).join(" ").trim();
+      e.ariaDescription = M || null, this._writeHostAttributeMirror({ hostAriaLabel: r, isInvalid: t });
+    }
+    this._writeHostRoleAndTabindex(), this._writeHostComboboxStateAttributes();
+  }
+  /**
+   * Writes host `role="combobox"` and `tabindex` so the host is the
+   * focusable, AT-visible canonical surface. Round-3 finding 1.
+   * @internal
+   */
+  _writeHostRoleAndTabindex() {
+    this.getAttribute("role") !== "combobox" && this.setAttribute("role", "combobox");
+    const e = this.disabled ? "-1" : "0";
+    this.getAttribute("tabindex") !== e && this.setAttribute("tabindex", e);
+  }
+  /**
+   * Writes the host's combobox state attributes (`aria-expanded`,
+   * `aria-haspopup`, `aria-controls`, `aria-activedescendant`,
+   * `aria-required`, `aria-invalid`, `aria-disabled`) on every sync. CSS
+   * selectors and AT inspecting the live attribute graph read these — the
+   * `internals.aria*` defaults are invisible. Round-3 finding 1.
+   * @internal
+   */
+  _writeHostComboboxStateAttributes() {
+    this.getAttribute("aria-haspopup") !== "listbox" && this.setAttribute("aria-haspopup", "listbox"), this.getAttribute("aria-controls") !== this._listboxId && this.setAttribute("aria-controls", this._listboxId);
+    const e = this.open ? "true" : "false";
+    this.getAttribute("aria-expanded") !== e && this.setAttribute("aria-expanded", e);
+    const t = this.open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : null;
+    t ? this.getAttribute("aria-activedescendant") !== t && this.setAttribute("aria-activedescendant", t) : this.hasAttribute("aria-activedescendant") && this.removeAttribute("aria-activedescendant"), this.required ? this.getAttribute("aria-required") !== "true" && this.setAttribute("aria-required", "true") : this.hasAttribute("aria-required") && this.removeAttribute("aria-required"), this._invalid ? this.getAttribute("aria-invalid") !== "true" && this.setAttribute("aria-invalid", "true") : this.hasAttribute("aria-invalid") && this.removeAttribute("aria-invalid"), this.disabled ? this.getAttribute("aria-disabled") !== "true" && this.setAttribute("aria-disabled", "true") : this.hasAttribute("aria-disabled") && this.removeAttribute("aria-disabled");
+  }
+  /**
+   * Writes a host `aria-label` attribute mirror on the fallback path so AT
+   * inspecting the live attribute graph sees the resolved name even when
+   * the platform lacks IDL element references. Skip when an effective
+   * `aria-labelledby` is already set on the host (labelledby > label by
+   * ARIA priority). Round-3 finding 1 + round-2 finding 5.
+   * @internal
+   */
+  _writeHostAttributeMirror(e) {
+    const { hostAriaLabel: t } = e;
+    if (t) {
+      this._lastWrittenAriaLabel = null;
+      return;
+    }
+    const i = this.accessibleLabel || this.label || (this._labelSource === "slot" ? this._labelSlotText : "") || "", r = this.hasAttribute("aria-labelledby"), s = this.getAttribute("aria-label");
+    !r && i ? (s !== i && this.setAttribute("aria-label", i), this._lastWrittenAriaLabel = i) : s !== null && s === this._lastWrittenAriaLabel ? (this.removeAttribute("aria-label"), this._lastWrittenAriaLabel = null) : this.hasAttribute("aria-label") && !(s != null && s.trim()) ? (this.removeAttribute("aria-label"), this._lastWrittenAriaLabel = null) : this.hasAttribute("aria-label") || (this._lastWrittenAriaLabel = null);
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of assigned
+   * help-text-slot nodes. Aligned with Group 2 round-23 P2 (Finding C).
+   * @internal
+   */
+  _installHelpSlotTextObserver(e) {
+    var i;
+    if ((i = this._helpSlotTextObserver) == null || i.disconnect(), !e) {
+      this._helpSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((r) => {
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0
+      });
+    }), this._helpSlotTextObserver = t;
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of assigned
+   * error-slot nodes. Aligned with Group 2 round-23 P2 (Finding C).
+   * @internal
+   */
+  _installErrorSlotTextObserver(e) {
+    var i;
+    if ((i = this._errorSlotTextObserver) == null || i.disconnect(), !e) {
+      this._errorSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((r) => {
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0
+      });
+    }), this._errorSlotTextObserver = t;
+  }
+  // ─── Form Integration ───
+  /** @internal */
+  _updateFormValue() {
+    this._internals.setFormValue(this.value || null);
+  }
+  /** @internal */
+  _updateValidity() {
+    this.required && !this.value ? this._internals.setValidity({ valueMissing: !0 }, this.error || this.labelRequired, this) : this._internals.setValidity({}), this._syncHostAriaSemantics();
+  }
+  // ─── Form Lifecycle Hooks ───
+  _onFormReset() {
+    this.value = "", this._internals.setFormValue(null), this._resetInteractionState();
+  }
+  _onFormStateRestore(e, t) {
+    typeof e == "string" && (this.value = e);
+  }
+  _onFormDisabled(e) {
+    this.disabled = e;
+  }
+  // ─── Native Select Sync ───
+  /** @internal */
+  _syncNativeSelect() {
+    this._select && this.value && (this._select.value = this.value);
+  }
+  // ─── Option Syncing from Slot ───
+  /** @internal */
+  _parseOption(e) {
+    var t;
+    return { value: e.value, label: ((t = e.textContent) == null ? void 0 : t.trim()) ?? e.value, disabled: e.disabled };
+  }
+  /**
+   * Single-pass slot handler: reads options into _options for the custom
+   * listbox AND clones them into the native <select> for form participation.
+   * Handles both top-level <option> and <optgroup> children.
+   */
+  /** @internal */
+  _handleSlotChange() {
+    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((s) => s.remove());
+    const i = (s) => {
+      if (!this._select) return;
+      const a = s.cloneNode(!0);
+      a.setAttribute("data-cloned", ""), this._select.appendChild(a);
+    };
+    for (const s of e.assignedElements({ flatten: !0 }))
+      if (s instanceof HTMLOptionElement)
+        t.push(this._parseOption(s)), i(s);
+      else if (s instanceof HTMLOptGroupElement)
+        for (const a of Array.from(s.children))
+          a instanceof HTMLOptionElement && (t.push(this._parseOption(a)), i(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 ───
+  /**
+   * Tracks the slotted label so projected `<span slot="label">` content joins
+   * the accessible-name chain without forcing the consumer to also pass the
+   * `label` property.
+   *
+   * Round-3 findings 3, 5, 6, 8:
+   * - 3: count whitespace-only text as "no useful name" (devWarn must fire).
+   * - 5: hold the slotted element by direct reference instead of mutating
+   *   consumer light DOM with a tracked id.
+   * - 6: lookup is by reference, so it survives nested shadow roots without
+   *   the fragile `getElementById` chain.
+   * - 8: discriminated `_labelSource` replaces the magic `'*slotted*'`
+   *   sentinel string.
+   * @internal
+   */
+  _handleLabelSlotChange(e) {
+    if (!(e.target instanceof HTMLSlotElement)) return;
+    const t = this._readLabelSlotState(e.target);
+    this._hasLabelSlot = t.hasUsefulName, this._slottedLabelEl = t.element, this._labelSlotText = t.text, this._refreshLabelSource(), this._syncHostAriaSemantics();
+  }
+  /**
+   * Recomputes the discriminated label source. Round-3 finding 8.
+   *
+   * CodeRabbit F2: slotted label wins over the `label` prop. When a
+   * consumer provides BOTH a `<span slot="label">` AND a `label="..."`
+   * attribute the visible label is the slotted node (rendered by the
+   * named slot's default content branch never firing). Preferring the
+   * string form here would route the accessible name through the prop
+   * and diverge from the rendered text. The slot is the canonical
+   * source whenever it has useful content.
+   * @internal
+   */
+  _refreshLabelSource() {
+    this._hasLabelSlot ? this._labelSource = "slot" : this.label ? this._labelSource = "string" : this._labelSource = "none";
+  }
+  /** @internal */
+  _handleErrorSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasErrorSlot = e.target.assignedNodes({ flatten: !0 }).length > 0, this._installErrorSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  /** @internal */
+  _handleHelpSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasHelpSlot = e.target.assignedNodes({ flatten: !0 }).length > 0, this._installHelpSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  // ─── Dropdown Control ───
+  /** @internal */
+  _toggleDropdown() {
+    if (!this.disabled)
+      if (this.open = !this.open, this.open) {
+        const e = this._options.findIndex((t) => t.value === this.value);
+        this._focusedOptionIndex = e >= 0 ? e : 0;
+      } else
+        this._focusedOptionIndex = -1;
+  }
+  // ─── Selection ───
+  /** @internal */
+  _selectOption(e) {
+    e.disabled || (this.value = e.value, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange(), this.open = !1, this._focusedOptionIndex = -1);
+  }
+  // ─── Event Dispatchers ───
+  /** @internal */
+  _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  /** @internal */
+  _handleNativeChange(e) {
+    this.value = e.target.value, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange();
+  }
+  // ─── Public Methods ───
+  /**
+   * Moves focus to the host. Round-3 finding 1: the host is the canonical
+   * combobox surface (`role="combobox"`, `tabindex="0"`), so programmatic
+   * focus must land there to match where AT routes focus and where
+   * `setValidity()` anchors recovery.
+   */
+  focus(e) {
+    HTMLElement.prototype.focus.call(this, e);
+  }
+  // ─── Render Helpers ───
+  /** @internal */
+  _optionId(e) {
+    return `hx-select-option-${this._selectId}-${e}`;
+  }
+  /** @internal */
+  _renderOptions() {
+    return this._options.length === 0 ? b`<div class="field__no-options">${this.labelNoOptions}</div>` : V(
+      this._options,
+      (e) => e.value,
+      (e, t) => {
+        const i = e.value === this.value, r = t === this._focusedOptionIndex;
+        return b`
+          <div
+            id=${this._optionId(t)}
+            part="option"
+            role="option"
+            class=${y({
+          field__option: !0,
+          "field__option--selected": i,
+          "field__option--focused": r,
+          "field__option--disabled": e.disabled
+        })}
+            aria-selected=${i ? "true" : "false"}
+            aria-disabled=${e.disabled ? "true" : _}
+            @click=${() => this._selectOption(e)}
+          >
+            <span class="field__option-label">${e.label}</span>
+          </div>
+        `;
+      }
+    );
+  }
+  // ─── Main Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpSlot, i = {
+      field: !0,
+      "field--error": e,
+      "field--disabled": this.disabled,
+      "field--required": this.required,
+      "field--open": this.open
+    }, r = {
+      field__trigger: !0,
+      [`field__trigger--${this.size}`]: !0,
+      "field__trigger--placeholder": !this.value
+    }, s = {
+      field__select: !0,
+      [`field__select--${this.size}`]: !0
+    };
+    return b`
+      <div part="field" class=${y(i)}>
+        <!-- Label -->
+        <slot name="label" @slotchange=${this._handleLabelSlotChange}>
+          ${this.label ? b`<label
+                part="label"
+                class="field__label"
+                id=${this._labelId}
+                for=${this._selectId}
+              >
+                ${this.label}
+                ${this.required ? b`<span class="field__required-marker" aria-hidden="true">*</span>` : _}
+              </label>` : _}
+        </slot>
+
+        <!-- Select Wrapper: trigger + listbox -->
+        <div part="select-wrapper" class="field__select-wrapper">
+          <!--
+            Visual trigger surface. Round-3 finding 1: role, tabindex,
+            and combobox ARIA all live on the host so AT sees a single
+            announced + focused surface. The trigger is rendered as a
+            <button type="button"> (a labelable element) so the visible
+            label[for=selectId] performs native click activation —
+            mouse users clicking the label focus the trigger which
+            bubbles to the host click handler and toggles the dropdown.
+            type="button" prevents implicit form submission. The trigger
+            has no role and no ARIA, so AT walks its subtree text as
+            the combobox's value content (host carries the real
+            association via internals.ariaLabel*).
+          -->
+          <button
+            type="button"
+            part="trigger"
+            id=${this._selectId}
+            class=${y(r)}
+          >
+            <span class="field__trigger-value"
+              >${this._displayValue || this.placeholder || _}</span
+            >
+            <span class="field__chevron" aria-hidden="true"></span>
+          </button>
+
+          <!-- Custom Listbox Panel -->
+          <div
+            part="listbox"
+            role="listbox"
+            id=${this._listboxId}
+            class="field__listbox"
+            aria-label=${C(this.label || this.accessibleLabel || void 0)}
+            ?hidden=${!this.open}
+          >
+            <div class="field__options">${this._renderOptions()}</div>
+          </div>
+
+          <!-- Hidden native select (form participation + test compat) -->
+          <select
+            part="select"
+            class=${y(s)}
+            tabindex="-1"
+            aria-hidden="true"
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            name=${C(this.name || void 0)}
+            @change=${this._handleNativeChange}
+          >
+            ${this.placeholder ? b`<option value="" disabled selected>${this.placeholder}</option>` : _}
+          </select>
+        </div>
+
+        <!-- Hidden slot (options are read from here) -->
+        <slot @slotchange=${this._handleSlotChange} style="display:none;"></slot>
+
+        <!--
+          Persistent error live region. role="alert" is set from first paint
+          so the WAI-ARIA contract for live updates is honoured: content
+          changes in place rather than the container being toggled. Aligned
+          with Group 2 round-1 finding #10.
+        -->
+        <div
+          part="error"
+          class="field__error"
+          id=${this._errorId}
+          role="alert"
+          ?hidden=${!e}
+        >
+          <slot name="error" @slotchange=${this._handleErrorSlotChange}
+            >${this._announcedError}</slot
+          >
+        </div>
+
+        <!--
+          Persistent help-text container. Rendered whenever the property OR
+          the slot has content; hidden when an error is present so guidance
+          does not compete with validation feedback. Always in the shadow
+          tree so the host's aria-describedby chain is stable.
+        -->
+        <div
+          part="help-text"
+          class="field__help-text"
+          id=${this._helpTextId}
+          ?hidden=${!t || e}
+        >
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = J;
+o.formAssociated = !0;
+o.__testSupportsIdrefRefsOverride = null;
+l([
+  n({ type: String })
+], o.prototype, "label", 2);
+l([
+  n({ type: String })
+], o.prototype, "placeholder", 2);
+l([
+  n({ type: String, reflect: !0 })
+], o.prototype, "value", 2);
+l([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+l([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+l([
+  n({ type: String, reflect: !0 })
+], o.prototype, "name", 2);
+l([
+  n({ type: String })
+], o.prototype, "error", 2);
+l([
+  n({ type: String, attribute: "help-text" })
+], o.prototype, "helpText", 2);
+l([
+  n({ type: String, attribute: "hx-size", reflect: !0 })
+], o.prototype, "size", 2);
+l([
+  n({ type: String, attribute: "accessible-label" })
+], o.prototype, "accessibleLabel", 2);
+l([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+l([
+  n({ attribute: "label-required" })
+], o.prototype, "labelRequired", 2);
+l([
+  n({ attribute: "label-no-options" })
+], o.prototype, "labelNoOptions", 2);
+l([
+  c()
+], o.prototype, "_options", 2);
+l([
+  c()
+], o.prototype, "_hasErrorSlot", 2);
+l([
+  c()
+], o.prototype, "_hasLabelSlot", 2);
+l([
+  c()
+], o.prototype, "_labelSource", 2);
+l([
+  c()
+], o.prototype, "_labelSlotText", 2);
+l([
+  c()
+], o.prototype, "_hasHelpSlot", 2);
+l([
+  c()
+], o.prototype, "_focusedOptionIndex", 2);
+l([
+  c()
+], o.prototype, "_supportsIdrefRefs", 2);
+l([
+  c()
+], o.prototype, "_announcedError", 2);
+l([
+  c()
+], o.prototype, "_invalid", 2);
+l([
+  D(".field__select")
+], o.prototype, "_select", 2);
+l([
+  D(".field__trigger")
+], o.prototype, "_trigger", 2);
+o = l([
+  W("hx-select")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-select-DrcS-YRJ.js.map