@helixui/library 3.3.0 → 3.3.1-next.117

package/dist/shared/hx-combobox-DvlezcDV.js

@@ -0,0 +1,1359 @@
+import { css as P, html as f, nothing as u } from "lit";
+import { property as h, state as c, query as U, customElement as G } from "lit/decorators.js";
+import { F as W } from "./FormMixin-B8PXk5RQ.js";
+import { classMap as H } from "lit/directives/class-map.js";
+import { ifDefined as L } from "lit/directives/if-defined.js";
+import { repeat as X } from "lit/directives/repeat.js";
+import { b as K } from "./forced-colors-CTEDFRGa.js";
+import { s as J, i as Q, r as z } from "./aria-idref-Q0yiSR3p.js";
+import { H as Y } from "./helix-element-BNEYeiys.js";
+import { c as Z } from "./id-counter-DuX8vsui.js";
+const ee = P`
+  :host {
+    display: block;
+  }
+  :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(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));
+    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(--hx-combobox-label-color, var(--hx-color-text-strong, #202b39));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__required-marker {
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+  .field__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
+    border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+  }
+  .field__input-wrapper:focus-within {
+    border-color: var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
+  }
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--hx-space-2, 0.5rem);
+    color: var(--hx-color-text-muted, #4a5362);
+    flex-shrink: 0;
+  }
+  .field__input {
+    flex: 1;
+    min-width: 0;
+    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+  }
+  .field__input::placeholder {
+    color: var(--hx-color-text-placeholder, #66787b);
+  }
+  .field__input--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__input--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__clear-button,
+  .field__loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-end: var(--hx-space-2, 0.5rem);
+    flex-shrink: 0;
+    color: var(--hx-color-text-placeholder, #66787b);
+  }
+  .field__clear-button {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    transition: color var(--hx-transition-fast, 150ms ease);
+  }
+  .field__clear-button:hover {
+    color: var(--hx-color-text-strong, #202b39);
+  }
+  .field__clear-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+  .field__loading-indicator {
+    width: 1rem;
+    height: 1rem;
+  }
+  .field__loading-spinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: hx-spin 0.7s linear infinite;
+  }
+  @keyframes hx-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__loading-spinner {
+      animation: none;
+    }
+  }
+  .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(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
+    border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-combobox-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 12%, transparent)
+    );
+    max-height: var(--hx-combobox-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(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+  .field__option:hover {
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+  }
+  .field__option--selected {
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+  .field__option--focused {
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
+  }
+  .field__option--focused.field__option--selected {
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
+  }
+  .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(--hx-color-text-placeholder, #66787b);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+  .field__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 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-combobox-error-color, var(--hx-color-error-text, #c92a2a));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper,
+    .field__option,
+    .field__clear-button,
+    .field__chip-remove {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .field__input-wrapper {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+    .field__input {
+      color: FieldText;
+    }
+    .field__input::placeholder {
+      color: GrayText;
+    }
+    .field__input-wrapper:focus-within {
+      border-color: Highlight;
+      box-shadow: none;
+    }
+    .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__chip {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+      border: 1px solid HighlightText;
+    }
+    .field__chip-remove:focus-visible {
+      outline-color: Highlight;
+    }
+    .field__clear-button:focus-visible {
+      outline-color: Highlight;
+    }
+    .field--error .field__input-wrapper {
+      border-color: LinkText;
+    }
+    :host([disabled]) {
+      opacity: 1;
+    }
+    :host([disabled]) .field__input-wrapper {
+      border-color: GrayText;
+      color: GrayText;
+    }
+    :host([disabled]) .field__input {
+      color: GrayText;
+    }
+    .field__label {
+      color: CanvasText;
+    }
+    .field__help-text {
+      color: GrayText;
+    }
+    .field__error {
+      color: LinkText;
+    }
+  }
+  :host([multiple]) .field__input-wrapper {
+    flex-wrap: wrap;
+    padding: var(--hx-space-1, 0.25rem);
+    gap: var(--hx-space-1, 0.25rem);
+    align-items: center;
+  }
+  :host([multiple]) .field__input {
+    min-width: 8rem;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    flex-shrink: 1;
+  }
+  .field__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
+    height: 1.5rem;
+    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbf0f0));
+    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #07494a));
+    border-radius: var(--hx-border-radius-full, 9999px);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    white-space: nowrap;
+    max-width: 12rem;
+    flex-shrink: 0;
+  }
+  .field__chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 8rem;
+  }
+  .field__chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
+    line-height: 1;
+    transition: opacity var(--hx-transition-fast, 150ms ease);
+  }
+  .field__chip-remove:hover {
+    opacity: 1;
+    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bce1e1));
+  }
+  .field__chip-remove:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    opacity: 1;
+  }
+`;
+var te = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var o = r > 1 ? void 0 : r ? ie(t, i) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (o = (r ? n(t, i, o) : n(o)) || o);
+  return r && o && te(t, i, o), o;
+};
+const re = Z("hx-combobox");
+function y(e) {
+  if (e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden"))
+    return "";
+  let t = "";
+  const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+    acceptNode(o) {
+      if (o.nodeType === Node.ELEMENT_NODE) {
+        const a = o;
+        return a.getAttribute("aria-hidden") === "true" || a.hasAttribute("hidden") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_SKIP;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  let r = i.nextNode();
+  for (; r; )
+    t += r.textContent ?? "", r = i.nextNode();
+  return t.replace(/\s+/g, " ").trim();
+}
+let s = class extends W(Y) {
+  constructor() {
+    super(...arguments), this._id = re(), this._listboxId = `${this._id}-listbox`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`, this._liveRegionId = `${this._id}-live`, this._consumerDescId = `${this._id}-consumer-desc`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.multiple = !1, this.clearable = !1, this.loading = !1, this.filterDebounce = 0, this.accessibleLabel = null, this.labelNoOptions = "No options found", this.labelRequired = "Please select an option.", this.labelRemoveOption = (e) => `Remove ${e}`, this._options = [], this._filterText = "", this._open = !1, this._focusedOptionIndex = -1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._filterAnnouncement = "", this._labelSource = "none", this._labelSlotText = "", this._hasLabelSlot = !1, this._supportsIdrefRefs = !0, this._invalid = !1, this._announcedError = "", this._debounceTimer = null, this._ariaMirror = null, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._hostDescribedByObserver = null, this._consumerLabelledBy = null, this._consumerDescribedBy = null, this._slottedLabelEls = [], this._labelSlotTextObserver = null, this._externalRefsObserver = null, this._handleOutsideClick = (e) => {
+      this._open && !e.composedPath().includes(this) && this._closeDropdown();
+    };
+  }
+  // ─── Multiple Selection ───
+  // P0-1: Derive selected values Set from the comma-separated value property
+  /** @internal */
+  get _selectedValuesSet() {
+    return !this.multiple || !this.value ? /* @__PURE__ */ new Set() : new Set(this.value.split(",").filter(Boolean));
+  }
+  // ─── Filtered options ───
+  /** @internal */
+  get _filteredOptions() {
+    if (!this._filterText) return this._options;
+    const e = this._filterText.toLowerCase();
+    return this._options.filter((t) => t.label.toLowerCase().includes(e));
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : J(this._internals), this._hostDescribedByObserver = new MutationObserver((t) => {
+      let i = !1;
+      for (const r of t) {
+        if (r.attributeName !== "aria-describedby") continue;
+        const o = r.oldValue, a = this.getAttribute("aria-describedby");
+        o !== 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 = Q(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e, t, i, r, o, a;
+    super.disconnectedCallback(), typeof document < "u" && document.removeEventListener("click", this._handleOutsideClick), this._debounceTimer !== null && clearTimeout(this._debounceTimer), this._open && (this._open = !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._labelSlotTextObserver) == null || r.disconnect(), this._labelSlotTextObserver = null, (o = this._hostDescribedByObserver) == null || o.disconnect(), this._hostDescribedByObserver = null, (a = this._externalRefsObserver) == null || a.disconnect(), this._externalRefsObserver = null;
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && this._updateFormValue(), e.has("label") && this._refreshLabelSource(), this._syncHostAriaSemantics(), e.has("error") && (e.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error;
+    })) : this._announcedError = this.error);
+  }
+  willUpdate(e) {
+    super.willUpdate(e), (e.has("error") || !this.hasUpdated) && (this._announcedError = this.error ?? "");
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._seedSlotStateSync(), !this.label && !this.accessibleLabel && !this._hasLabelSlot && !this.getAttribute("aria-label") && this.getAttribute("aria-labelledby");
+  }
+  /**
+   * Round-5 F2 (P2): synchronous slot-state seed. Mirrors the side effects of
+   * the three `_handle*SlotChange` handlers (label / help-text / error) but
+   * is driven by direct `slot.assignedNodes()` reads so we can populate the
+   * state BEFORE the microtask `slotchange` events fire after the first
+   * render. Idempotent — calling it later is a no-op when state already
+   * matches the slot contents.
+   *
+   * Also installs the label slot text observer so consumer in-place text
+   * mutations on slotted label nodes are tracked even if the slotchange
+   * event has not yet fired.
+   * @internal
+   */
+  _seedSlotStateSync() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.querySelector('slot[name="label"]');
+    if (t) {
+      const o = this._readLabelSlotState(t);
+      this._hasLabelSlot = o.hasUsefulName, this._slottedLabelEls = o.elements, this._labelSlotText = o.text, this._installLabelSlotTextObserver(o.elements), this._refreshLabelSource();
+    }
+    const i = e.querySelector('slot[name="help-text"]');
+    i && (this._hasHelpSlot = this._readHelpSlotStateSync(i), this._installHelpSlotTextObserver(i));
+    const r = e.querySelector('slot[name="error"]');
+    r && (this._hasErrorSlot = this._readErrorSlotStateSync(r), this._installErrorSlotTextObserver(r));
+  }
+  /**
+   * Reads the label slot's assigned nodes and computes the discriminated
+   * naming state. An empty whitespace-only slot does NOT count as a useful
+   * name.
+   *
+   * Round-4 F1 (P2): aggregates ALL assigned elements (not just the first) and
+   * concatenates `textContent` from every assigned node — element OR text —
+   * trimmed and space-joined per AccName 1.2 text-flatten rules. This preserves
+   * composed labels such as
+   * `<svg slot="label" aria-hidden="true">…</svg><span slot="label">Patient</span>`
+   * or `<span slot="label">First</span><span slot="label">name</span>` on both
+   * the modern (`internals.ariaLabelledByElements`) path and the no-IDL-ref
+   * fallback (`aria-label`) path.
+   *
+   * Round-6 F2 (P2): per AccName 1.2 §4.3.10, `aria-hidden="true"` elements
+   * contribute zero to the accessible name. They are still tracked in
+   * `elements` (so the modern `internals.ariaLabelledByElements` path projects
+   * the FULL visible label — icon + text — for AT that walks IDL refs), but
+   * they are skipped during text flattening. `hasUsefulName` is gated on the
+   * flattened text length, so a slot containing ONLY decorative elements (or
+   * empty wrappers) is NOT considered usable: `_labelSource` falls through to
+   * the next naming source and the firstUpdated() devWarn fires for unnamed
+   * controls. A composed `<svg aria-hidden><span>Patient</span>` slot still
+   * resolves: text = "Patient" → usable; both elements still project on the
+   * modern path.
+   * @internal
+   */
+  _readLabelSlotState(e) {
+    const t = e.assignedNodes({ flatten: !0 }), i = [], r = [];
+    for (const a of t)
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const n = a;
+        if (i.push(n), n.getAttribute("aria-hidden") === "true") continue;
+        const p = y(n);
+        p && r.push(p);
+      } else if (a.nodeType === Node.TEXT_NODE) {
+        const n = (a.textContent ?? "").trim();
+        n && r.push(n);
+      }
+    const o = r.join(" ").replace(/\s+/g, " ").trim();
+    return {
+      // Round-6 F2 (P2): gate on flattened TEXT, not element presence. A slot
+      // with only decorative/aria-hidden elements (or empty wrappers) yields
+      // text === '' and is NOT a usable name.
+      hasUsefulName: o.length > 0,
+      elements: i,
+      text: o
+    };
+  }
+  /**
+   * Round-6 F1 (P2): re-evaluate the help-text slot's "has meaningful content"
+   * state from its current effective text. Mirrors the slotchange-handler
+   * logic but is invocable from the in-place mutation observer so that
+   * clearing `textContent` on the same slotted node flips `_hasHelpSlot`
+   * back to `false` (without this, the help wrapper stays visible, the help
+   * id stays in the inner input's `aria-describedby`, and AT keeps announcing
+   * stale guidance).
+   * @internal
+   */
+  _readHelpSlotStateSync(e) {
+    const t = e.assignedNodes({ flatten: !0 });
+    for (const i of t)
+      if (i.nodeType === Node.TEXT_NODE) {
+        if ((i.textContent ?? "").trim().length > 0) return !0;
+      } else if (i.nodeType === Node.ELEMENT_NODE && y(i).length > 0)
+        return !0;
+    return !1;
+  }
+  /**
+   * Round-6 F1 (P2): re-evaluate the error slot's "has meaningful content"
+   * state from its current effective text. Mirrors the slotchange-handler
+   * logic but is invocable from the in-place mutation observer so that
+   * clearing `textContent` on the same slotted node flips `_hasErrorSlot`
+   * back to `false` (without this, the combobox stays in its error state
+   * indefinitely: `aria-invalid` stays `true`, the error id stays in
+   * `aria-describedby`, and help text stays hidden).
+   * @internal
+   */
+  _readErrorSlotStateSync(e) {
+    const t = e.assignedNodes({ flatten: !0 });
+    for (const i of t)
+      if (i.nodeType === Node.TEXT_NODE) {
+        if ((i.textContent ?? "").trim().length > 0) return !0;
+      } else if (i.nodeType === Node.ELEMENT_NODE && y(i).length > 0)
+        return !0;
+    return !1;
+  }
+  // ─── Inner-input ARIA sync (W3C APG editable combobox) ───
+  /**
+   * Resolves consumer-supplied label/description IDREFs on the host and
+   * writes the canonical combobox ARIA onto the **inner `<input>`** per W3C
+   * APG editable combobox pattern. The inner input owns `role="combobox"`
+   * (replacing its implicit textbox role) and all combobox state ARIA so
+   * AT sees a single announced + focused surface.
+   *
+   * Cross-shadow naming uses a belt-and-suspenders strategy:
+   *
+   *   1. **Modern path** (`_supportsIdrefRefs === true`): consumer-resolved
+   *      label/description elements are written onto
+   *      `internals.ariaLabelledByElements` / `internals.ariaDescribedByElements`
+   *      on the host. AT that walks up from the focused inner input for naming
+   *      finds them through ElementInternals. Host-level `aria-labelledby` /
+   *      `aria-describedby` attributes are LEFT IN PLACE so AT walking up the
+   *      DOM also sees them. The text content of the resolved elements is also
+   *      flattened onto the inner input as `aria-label` / `aria-description`
+   *      so AT that does not walk up still announces the right name.
+   *
+   *   2. **Legacy fallback** (`_supportsIdrefRefs === false`): host attrs are
+   *      stripped (AccName precedence cleanup) and the resolved-element text
+   *      is flattened onto the inner input as `aria-label` /
+   *      `aria-description`. Live updates to the consumer-referenced elements
+   *      do not propagate, but the initial accessible name resolves on every
+   *      AT — closing the cross-shadow naming gap that broke this on engines
+   *      without IDL element references.
+   *
+   * Writing `aria-labelledby="<light-DOM id>"` directly on the shadow-DOM
+   * inner input is INTENTIONALLY avoided: light-DOM ids do not resolve from
+   * inside a shadow root, so that pattern leaves the control AT-anonymous.
+   * Internal label ids (in the same shadow root) ARE written via
+   * `aria-labelledby`.
+   * @internal
+   */
+  /**
+   * Round-7 F1 (P2): (re)install a `MutationObserver` against the deduped
+   * union of consumer-resolved label/description elements. Watches
+   * `characterData`, `childList`, and `subtree` so any in-place text
+   * mutation on the referenced light-DOM nodes triggers a fresh sync —
+   * keeping the inner input's flattened `aria-label` and the synthesized
+   * description span aligned with the live consumer text. Blanket
+   * disconnect-and-reinstall on every sync; if the consumer retracts both
+   * IDREF chains the union is empty and the observer is disconnected.
+   * @internal
+   */
+  _installExternalRefsObserver(e) {
+    if (this._externalRefsObserver && (this._externalRefsObserver.disconnect(), this._externalRefsObserver = null), e.length === 0) return;
+    const t = new Set(e), i = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    for (const r of t)
+      i.observe(r, {
+        characterData: !0,
+        subtree: !0,
+        childList: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._externalRefsObserver = i;
+  }
+  _syncHostAriaSemantics() {
+    var R, F, B, M;
+    const e = this._internals, t = this._input;
+    if (!t) {
+      const d = !e.validity.valid || !!(this.error || this._hasErrorSlot);
+      this._invalid = d;
+      return;
+    }
+    const i = this.getAttribute("aria-label"), r = i !== null && i.trim() || "", o = ((R = this.shadowRoot) == null ? void 0 : R.getElementById(this._labelId)) ?? null, a = this._slottedLabelEls, n = ((F = this.shadowRoot) == null ? void 0 : F.getElementById(this._helpTextId)) ?? null, p = ((B = this.shadowRoot) == null ? void 0 : B.getElementById(this._errorId)) ?? null, S = this.getAttribute("aria-labelledby");
+    this._consumerLabelledBy = S;
+    const x = this.getAttribute("aria-describedby");
+    this._consumerDescribedBy = x;
+    const V = this._consumerLabelledBy, q = this._consumerDescribedBy, T = z(this, V), N = T.length > 0, A = z(this, q);
+    this._installExternalRefsObserver([...T, ...A]);
+    const m = !!(this.error || this._hasErrorSlot), j = !e.validity.valid || m;
+    this._invalid = j;
+    const _ = typeof this.accessibleLabel == "string" && this.accessibleLabel.trim().length > 0 ? this.accessibleLabel : null, w = (d) => d.getAttribute("aria-hidden") !== "true" && !d.hasAttribute("hidden"), v = [];
+    _ || (v.push(...T.filter(w)), !N && !r && (this._labelSource === "slot" && a.length > 0 ? v.push(...a.filter(w)) : this._labelSource === "string" && o && v.push(o)));
+    const E = [...A.filter(w)];
+    if (n && !m && (this.helpText || this._hasHelpSlot) && E.push(n), p && m && E.push(p), this._supportsIdrefRefs) {
+      const d = e;
+      d.ariaLabelledByElements = v.length > 0 ? v : null, d.ariaDescribedByElements = E.length > 0 ? E : null, _ ? e.ariaLabel = _ : e.ariaLabel = null;
+    }
+    const $ = (d) => d.filter(w).map((C) => y(C)).filter((C) => C.length > 0).join(" ");
+    let b = null, O = null, D = "";
+    if (!_ && N && (D = $(T)), _)
+      b = _;
+    else if (D)
+      b = D;
+    else if (r)
+      b = r;
+    else if (this._labelSource === "slot") {
+      if (this._labelSlotText)
+        b = this._labelSlotText;
+      else if (a.length > 0) {
+        const d = $(a);
+        d && (b = d);
+      }
+    } else this._labelSource === "string" && (o != null && o.id ? O = o.id : this.label && (b = this.label));
+    O ? (t.getAttribute("aria-labelledby") !== O && t.setAttribute("aria-labelledby", O), t.hasAttribute("aria-label") && t.removeAttribute("aria-label")) : b ? (t.getAttribute("aria-label") !== b && t.setAttribute("aria-label", b), t.hasAttribute("aria-labelledby") && t.removeAttribute("aria-labelledby")) : (t.hasAttribute("aria-label") && t.removeAttribute("aria-label"), t.hasAttribute("aria-labelledby") && t.removeAttribute("aria-labelledby"));
+    const I = ((M = this.shadowRoot) == null ? void 0 : M.getElementById(this._consumerDescId)) ?? null, k = $(A);
+    I && I.textContent !== k && (I.textContent = k);
+    const g = [];
+    if (k && I && g.push(this._consumerDescId), n && !m && (this.helpText || this._hasHelpSlot) && g.push(this._helpTextId), p && m && g.push(this._errorId), g.length > 0) {
+      const d = g.join(" ");
+      t.getAttribute("aria-describedby") !== d && t.setAttribute("aria-describedby", d);
+    } else t.hasAttribute("aria-describedby") && t.removeAttribute("aria-describedby");
+    t.hasAttribute("aria-description") && t.removeAttribute("aria-description");
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of assigned
+   * help-text-slot nodes.
+   * @internal
+   */
+  _installHelpSlotTextObserver(e) {
+    var i;
+    if ((i = this._helpSlotTextObserver) == null || i.disconnect(), !e) {
+      this._helpSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._hasHelpSlot = this._readHelpSlotStateSync(e), this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((r) => {
+      if (r.nodeType !== Node.ELEMENT_NODE) {
+        t.observe(r, {
+          characterData: !0,
+          childList: !0,
+          subtree: !0
+        });
+        return;
+      }
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._helpSlotTextObserver = t;
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of assigned
+   * error-slot nodes.
+   * @internal
+   */
+  _installErrorSlotTextObserver(e) {
+    var i;
+    if ((i = this._errorSlotTextObserver) == null || i.disconnect(), !e) {
+      this._errorSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._hasErrorSlot = this._readErrorSlotStateSync(e), this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((r) => {
+      if (r.nodeType !== Node.ELEMENT_NODE) {
+        t.observe(r, {
+          characterData: !0,
+          childList: !0,
+          subtree: !0
+        });
+        return;
+      }
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), 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._input
+    ) : this._internals.setValidity({}), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _onFormReset() {
+    this.value = "", this._filterText = "", this._internals.setFormValue(null), this._resetInteractionState();
+  }
+  /** @internal */
+  // P1-6: Correct signature per WHATWG spec — includes mode param and all state types
+  _onFormStateRestore(e, t) {
+    typeof e == "string" && (this.value = e);
+  }
+  /** @internal */
+  _onFormDisabled(e) {
+    this.disabled = e;
+  }
+  // ─── Option Syncing from Slot ───
+  /** @internal */
+  _handleSlotChange() {
+    this._readOptions();
+  }
+  /** @internal */
+  _parseOption(e) {
+    var t;
+    return { value: e.value, label: ((t = e.textContent) == null ? void 0 : t.trim()) ?? e.value, disabled: e.disabled };
+  }
+  /** @internal */
+  _readOptions() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="option"]');
+    if (!e) return;
+    const t = [];
+    for (const r of e.assignedElements({ flatten: !0 }))
+      if (r instanceof HTMLOptionElement)
+        t.push(this._parseOption(r));
+      else if (r instanceof HTMLOptGroupElement)
+        for (const o of Array.from(r.children))
+          o instanceof HTMLOptionElement && t.push(this._parseOption(o));
+    this._options = t;
+  }
+  // ─── Slot Change Handlers ───
+  /**
+   * Tracks the slotted label so projected `<span slot="label">` content joins
+   * the accessible-name chain.
+   * @internal
+   */
+  _handleLabelSlotChange(e) {
+    if (!(e.target instanceof HTMLSlotElement)) return;
+    const t = this._readLabelSlotState(e.target);
+    this._hasLabelSlot = t.hasUsefulName, this._slottedLabelEls = t.elements, this._labelSlotText = t.text, this._installLabelSlotTextObserver(t.elements), this._refreshLabelSource(), this._syncHostAriaSemantics();
+  }
+  /**
+   * (Re-)installs the mutation observer over the current set of slotted label
+   * elements. Round-4 F2 (P2): mirrors the round-23 P2 pattern from
+   * `_helpSlotTextObserver` / `_errorSlotTextObserver`. On any descendant text
+   * change we re-read the slot state (to refresh `_labelSlotText` and the
+   * element list) and re-sync host ARIA so the inner input's `aria-label`
+   * tracks the live label text.
+   * @internal
+   */
+  _installLabelSlotTextObserver(e) {
+    var i;
+    if ((i = this._labelSlotTextObserver) == null || i.disconnect(), e.length === 0) {
+      this._labelSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      const r = [];
+      for (const a of e) {
+        if (a.getAttribute("aria-hidden") === "true") continue;
+        const n = y(a);
+        n && r.push(n);
+      }
+      const o = r.join(" ").replace(/\s+/g, " ").trim();
+      this._labelSlotText = o, this._hasLabelSlot = o.length > 0, this._refreshLabelSource(), this._syncHostAriaSemantics();
+    });
+    for (const r of e)
+      t.observe(r, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._labelSlotTextObserver = t;
+  }
+  /**
+   * Recomputes the discriminated label source.
+   * @internal
+   */
+  _refreshLabelSource() {
+    this.label ? this._labelSource = "string" : this._hasLabelSlot ? this._labelSource = "slot" : this._labelSource = "none";
+  }
+  /** @internal */
+  _handleErrorSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasErrorSlot = this._readErrorSlotStateSync(e.target), this._installErrorSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  /** @internal */
+  _handleHelpSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasHelpSlot = this._readHelpSlotStateSync(e.target), this._installHelpSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  // ─── Dropdown Control ───
+  /** @internal */
+  _openDropdown() {
+    this.disabled || this._open || (this._open = !0, this._focusedOptionIndex = -1, typeof document < "u" && document.addEventListener("click", this._handleOutsideClick), this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })));
+  }
+  /** @internal */
+  _closeDropdown() {
+    this._open && (this._open = !1, this._focusedOptionIndex = -1, this._handleInteractionBlur(), typeof document < "u" && document.removeEventListener("click", this._handleOutsideClick), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })));
+  }
+  // ─── Input Handling ───
+  /** @internal */
+  _handleInput(e) {
+    const t = e.target;
+    this._filterText = t.value, this._open || this._openDropdown(), this._focusedOptionIndex = -1, this.filterDebounce > 0 ? (this._debounceTimer !== null && clearTimeout(this._debounceTimer), this._debounceTimer = setTimeout(() => {
+      this._emitInput(), this._announceFilterResults();
+    }, this.filterDebounce)) : (this._emitInput(), this._announceFilterResults());
+  }
+  /** @internal */
+  _announceFilterResults() {
+    const e = this._filteredOptions.length;
+    this._filterAnnouncement = e === 0 ? "No matching options" : `${e} ${e === 1 ? "option" : "options"} available`;
+  }
+  /** @internal */
+  _emitInput() {
+    this.dispatchEvent(
+      new CustomEvent("hx-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this._filterText }
+      })
+    );
+  }
+  /** @internal */
+  _handleFocus() {
+    this._openDropdown();
+  }
+  // ─── Keyboard Navigation ───
+  /** @internal */
+  _handleKeydown(e) {
+    if (this.disabled) return;
+    const t = this._filteredOptions, i = t.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._openDropdown(), this._focusedOptionIndex = i.length > 0 ? i[0] ?? 0 : -1;
+          break;
+        }
+        const r = i.find((o) => o > this._focusedOptionIndex);
+        this._focusedOptionIndex = r !== void 0 ? r : i[0] ?? this._focusedOptionIndex;
+        break;
+      }
+      case "ArrowUp": {
+        if (e.preventDefault(), !this._open) {
+          this._openDropdown();
+          const a = i[i.length - 1];
+          this._focusedOptionIndex = a !== void 0 ? a : -1;
+          break;
+        }
+        const r = [...i].reverse().find((a) => a < this._focusedOptionIndex), o = i[i.length - 1];
+        this._focusedOptionIndex = r !== void 0 ? r : o ?? this._focusedOptionIndex;
+        break;
+      }
+      case "Enter": {
+        if (e.preventDefault(), !this._open) {
+          this._openDropdown();
+          break;
+        }
+        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < t.length) {
+          const r = t[this._focusedOptionIndex];
+          r && this._selectOption(r);
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault(), this._closeDropdown(), this._filterText = "", this._input && (this._input.value = "");
+        break;
+      }
+      case "Tab": {
+        this._closeDropdown();
+        break;
+      }
+      // P1-1: Home/End keyboard navigation for option list
+      case "Home": {
+        e.preventDefault(), this._open || this._openDropdown(), this._focusedOptionIndex = i.length > 0 ? i[0] ?? -1 : -1;
+        break;
+      }
+      case "End": {
+        e.preventDefault(), this._open || this._openDropdown(), this._focusedOptionIndex = i.length > 0 ? i[i.length - 1] ?? -1 : -1;
+        break;
+      }
+    }
+  }
+  // ─── Selection ───
+  // P0-1: Handle both single and multiple selection modes
+  /** @internal */
+  _selectOption(e) {
+    if (!e.disabled) {
+      if (this.multiple) {
+        const t = this._selectedValuesSet, i = new Set(t);
+        i.has(e.value) ? i.delete(e.value) : i.add(e.value), this.value = [...i].join(",");
+      } else
+        this.value = e.value, this._closeDropdown();
+      this._handleInteractionInput(), this._filterText = "", this._input && (this._input.value = ""), this._dispatchChange();
+    }
+  }
+  // P0-1: Remove a single value from multi-selection
+  /** @internal */
+  _removeValue(e) {
+    const t = this._selectedValuesSet;
+    t.delete(e), this.value = [...t].join(","), this._dispatchChange();
+  }
+  // ─── Clear ───
+  /** @internal */
+  _handleClear(e) {
+    e.stopPropagation(), this.value = "", this._filterText = "", this._input && (this._input.value = "", this._input.focus()), this._internals.setFormValue(null), this._updateValidity(), this.dispatchEvent(new CustomEvent("hx-clear", { bubbles: !0, composed: !0 }));
+  }
+  // ─── Event Dispatchers ───
+  /** @internal */
+  _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  // ─── Public Methods ───
+  /**
+   * Routes programmatic focus to the inner text input. Per W3C APG editable
+   * combobox pattern, the inner `<input>` carries `role="combobox"` (replacing
+   * its implicit textbox role) so it IS the canonical announced + focused
+   * surface. Shadow DOM focus causes `document.activeElement` to report the
+   * host externally, but the input retains focus inside the shadow root and
+   * AT announces its role/state.
+   */
+  focus(e) {
+    var t;
+    (t = this._input) == null || t.focus(e);
+  }
+  // ─── Render Helpers ───
+  /** @internal */
+  _optionId(e) {
+    return `${this._id}-option-${e}`;
+  }
+  /** @internal */
+  get _displayValue() {
+    if (this.multiple || !this.value) return "";
+    const e = this._options.find((t) => t.value === this.value);
+    return e ? e.label : this.value;
+  }
+  /** @internal */
+  _renderOptions() {
+    const e = this._filteredOptions;
+    return e.length === 0 ? f`
+        <slot name="empty-label">
+          <div class="field__no-options">${this.labelNoOptions}</div>
+        </slot>
+      ` : X(
+      e,
+      (t) => t.value,
+      (t, i) => {
+        const r = this.multiple ? this._selectedValuesSet.has(t.value) : t.value === this.value, o = i === this._focusedOptionIndex;
+        return f`
+          <div
+            id=${this._optionId(i)}
+            part="option"
+            role="option"
+            class=${H({
+          field__option: !0,
+          "field__option--selected": r,
+          "field__option--focused": o,
+          "field__option--disabled": t.disabled
+        })}
+            aria-selected=${this.multiple ? r ? "true" : "false" : r ? "true" : u}
+            aria-disabled=${t.disabled ? "true" : u}
+            @click=${() => this._selectOption(t)}
+          >
+            <span class="field__option-label">${t.label}</span>
+          </div>
+        `;
+      }
+    );
+  }
+  // ─── Main Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpSlot, i = this.clearable && !!this.value && !this.disabled, r = {
+      field: !0,
+      "field--error": e,
+      "field--disabled": this.disabled,
+      "field--required": this.required,
+      "field--open": this._open
+    }, o = {
+      field__input: !0,
+      [`field__input--${this.size}`]: !0
+    }, a = this._open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : "";
+    return f`
+      <div part="field" class=${H(r)}>
+        <!-- Label -->
+        <slot name="label" @slotchange=${this._handleLabelSlotChange}>
+          ${this.label ? f`<label id=${this._labelId} for=${this._id} part="label" class="field__label">
+                ${this.label}
+                ${this.required ? f`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+              </label>` : u}
+        </slot>
+
+        <!-- Input Wrapper -->
+        <div part="trigger" class="field__input-wrapper">
+          <!-- Prefix Slot -->
+          <slot name="prefix" class="field__prefix"></slot>
+
+          <!-- P0-1: Selected value chips for multiple mode -->
+          ${this.multiple && this._selectedValuesSet.size > 0 ? [...this._selectedValuesSet].map((n) => {
+      const p = this._options.find((x) => x.value === n), S = p ? p.label : n;
+      return f`
+                  <span class="field__chip">
+                    <span class="field__chip-label">${S}</span>
+                    <button
+                      type="button"
+                      class="field__chip-remove"
+                      aria-label=${this.labelRemoveOption(S)}
+                      @click=${(x) => {
+        x.stopPropagation(), this._removeValue(n);
+      }}
+                    >
+                      <svg
+                        width="8"
+                        height="8"
+                        viewBox="0 0 8 8"
+                        fill="none"
+                        aria-hidden="true"
+                        focusable="false"
+                      >
+                        <path
+                          d="M1 1L7 7M7 1L1 7"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                    </button>
+                  </span>
+                `;
+    }) : u}
+
+          <!--
+            Text input — W3C APG editable combobox (option I).
+            role="combobox" REPLACES the implicit textbox role; all combobox
+            state ARIA lives here so AT sees one canonical surface.
+            aria-label / aria-labelledby / aria-describedby are written
+            imperatively by _syncHostAriaSemantics after consumer IDREF
+            resolution and are not bound here.
+          -->
+          <input
+            part="input"
+            type="text"
+            id=${this._id}
+            role="combobox"
+            class=${H(o)}
+            .value=${this._filterText || (this._open ? "" : this._displayValue)}
+            placeholder=${L(this.placeholder || void 0)}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${L(this.name || void 0)}
+            autocomplete="off"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            aria-controls=${this._listboxId}
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-activedescendant=${L(a || void 0)}
+            aria-required=${this.required ? "true" : "false"}
+            aria-invalid=${this._invalid ? "true" : "false"}
+            aria-busy=${this.loading ? "true" : u}
+            aria-disabled=${this.disabled ? "true" : u}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @keydown=${this._handleKeydown}
+          />
+
+          <!-- Loading Indicator -->
+          ${this.loading ? f`
+                <div part="loading-indicator" class="field__loading-indicator" aria-hidden="true">
+                  <div class="field__loading-spinner"></div>
+                </div>
+              ` : u}
+
+          <!-- Clear Button -->
+          ${i ? f`
+                <button
+                  part="clear-button"
+                  type="button"
+                  class="field__clear-button"
+                  aria-label=${`Clear ${this.label || this.accessibleLabel || "selection"}`}
+                  tabindex="0"
+                  @click=${this._handleClear}
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    aria-hidden="true"
+                    focusable="false"
+                  >
+                    <path
+                      d="M1 1L11 11M11 1L1 11"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
+              ` : u}
+
+          <!-- Suffix Slot -->
+          <slot name="suffix" class="field__suffix"></slot>
+        </div>
+
+        <!-- Listbox -->
+        <div
+          part="listbox"
+          role="listbox"
+          id=${this._listboxId}
+          class="field__listbox"
+          aria-label=${L(this.label || this.accessibleLabel || void 0)}
+          aria-multiselectable=${this.multiple ? "true" : u}
+          ?hidden=${!this._open}
+        >
+          <div class="field__options">${this._renderOptions()}</div>
+        </div>
+
+        <!-- Hidden slot (options read from here) -->
+        <slot name="option" @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.
+        -->
+        <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.
+        -->
+        <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>
+
+        <!-- Filter results live region -->
+        <div id=${this._liveRegionId} aria-live="polite" aria-atomic="true" class="field__sr-only">
+          ${this._filterAnnouncement}
+        </div>
+
+        <!--
+          Round-5 F1 (P1): synthesized in-shadow mirror of the consumer-
+          resolved description text. Its id is appended to the inner input's
+          aria-describedby chain so AT picks the consumer description up
+          through the standard described-by channel without needing
+          aria-description (which W3C AccName drops whenever
+          aria-describedby is also present). Same-root id resolves from
+          inside the shadow tree; consumer light-DOM ids do not. The text
+          content is updated by _syncHostAriaSemantics on every sync.
+        -->
+        <span id=${this._consumerDescId} class="field__sr-only" aria-hidden="false"></span>
+      </div>
+    `;
+  }
+};
+s.styles = [ee, K];
+s.formAssociated = !0;
+s.__testSupportsIdrefRefsOverride = null;
+l([
+  h({ type: String })
+], s.prototype, "label", 2);
+l([
+  h({ type: String })
+], s.prototype, "placeholder", 2);
+l([
+  h({ type: String, reflect: !0 })
+], s.prototype, "value", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "required", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+l([
+  h({ type: String, reflect: !0 })
+], s.prototype, "name", 2);
+l([
+  h({ type: String })
+], s.prototype, "error", 2);
+l([
+  h({ type: String, attribute: "help-text" })
+], s.prototype, "helpText", 2);
+l([
+  h({ type: String, attribute: "hx-size", reflect: !0 })
+], s.prototype, "size", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "multiple", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "clearable", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "loading", 2);
+l([
+  h({ type: Number, attribute: "filter-debounce" })
+], s.prototype, "filterDebounce", 2);
+l([
+  h({ type: String, attribute: "accessible-label" })
+], s.prototype, "accessibleLabel", 2);
+l([
+  h({ type: String, attribute: "label-no-options" })
+], s.prototype, "labelNoOptions", 2);
+l([
+  h({ type: String, attribute: "label-required" })
+], s.prototype, "labelRequired", 2);
+l([
+  h({ attribute: !1 })
+], s.prototype, "labelRemoveOption", 2);
+l([
+  c()
+], s.prototype, "_options", 2);
+l([
+  c()
+], s.prototype, "_filterText", 2);
+l([
+  c()
+], s.prototype, "_open", 2);
+l([
+  c()
+], s.prototype, "_focusedOptionIndex", 2);
+l([
+  c()
+], s.prototype, "_hasErrorSlot", 2);
+l([
+  c()
+], s.prototype, "_hasHelpSlot", 2);
+l([
+  c()
+], s.prototype, "_filterAnnouncement", 2);
+l([
+  c()
+], s.prototype, "_labelSource", 2);
+l([
+  c()
+], s.prototype, "_labelSlotText", 2);
+l([
+  c()
+], s.prototype, "_hasLabelSlot", 2);
+l([
+  c()
+], s.prototype, "_supportsIdrefRefs", 2);
+l([
+  c()
+], s.prototype, "_invalid", 2);
+l([
+  c()
+], s.prototype, "_announcedError", 2);
+l([
+  U(".field__input")
+], s.prototype, "_input", 2);
+s = l([
+  G("hx-combobox")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-combobox-DvlezcDV.js.map