@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/hx-select-C8fEHQhC.js

@@ -1,807 +0,0 @@
-import { css as g, html as h, nothing as n } from "lit";
-import { property as d, state as u, query as x, customElement as m } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { repeat as y } from "lit/directives/repeat.js";
-import { F as I } from "./FormMixin-B8PXk5RQ.js";
-import { b as w } from "./forced-colors-CTEDFRGa.js";
-import { d as $ } from "./dev-warn-YlwPHjtX.js";
-import { H as O } from "./helix-element-BNEYeiys.js";
-import { c as k } from "./id-counter-DuX8vsui.js";
-const C = g`
-  /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
-  :host {
-    display: block;
-
-    /* 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 {
-    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-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;
-  }
-
-  .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);
-  }
-
-  .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;
-    }
-
-    .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 z = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? S(t, s) : t, a = e.length - 1, f; a >= 0; a--)
-    (f = e[a]) && (r = (o ? f(t, s, r) : f(r)) || r);
-  return o && r && z(t, s, r), r;
-};
-const T = k("hx-select");
-let i = class extends I(O) {
-  constructor() {
-    super(...arguments), this._selectId = T(), this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.accessibleLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
-      this.open && !e.composedPath().includes(this) && (this.open = !1);
-    };
-  }
-  // ─── 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 ───
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this.open && (this.open = !1, this._focusedOptionIndex = -1);
-  }
-  updated(e) {
-    var t;
-    if (super.updated(e), e.has("open") && (this.open ? document.addEventListener("click", this._handleOutsideClick) : document.removeEventListener("click", this._handleOutsideClick)), e.has("value") && (this._syncNativeSelect(), this._updateFormValue()), e.has("size")) {
-      const s = ["sm", "md", "lg"];
-      s.includes(this.size) || $(
-        "hx-select",
-        `Invalid size "${this.size}". Expected one of: ${s.join(", ")}.`
-      );
-    }
-    if (e.has("error") && this.error) {
-      const s = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
-      if (s) {
-        const o = this.error;
-        requestAnimationFrame(() => {
-          s.textContent = "", requestAnimationFrame(() => {
-            s.textContent = o;
-          });
-        });
-      }
-    }
-  }
-  // ─── 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._trigger ?? this._select
-    ) : this._internals.setValidity({});
-  }
-  // ─── 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 o;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
-    if (!e) return;
-    const t = [];
-    this._select && this._select.querySelectorAll("option[data-cloned]").forEach((r) => r.remove());
-    const s = (r) => {
-      if (!this._select) return;
-      const a = r.cloneNode(!0);
-      a.setAttribute("data-cloned", ""), this._select.appendChild(a);
-    };
-    for (const r of e.assignedElements({ flatten: !0 }))
-      if (r instanceof HTMLOptionElement)
-        t.push(this._parseOption(r)), s(r);
-      else if (r instanceof HTMLOptGroupElement)
-        for (const a of Array.from(r.children))
-          a instanceof HTMLOptionElement && (t.push(this._parseOption(a)), s(a));
-    this._options = t, t.length, this._select && (this.value ? this._select.value = this.value : !this.placeholder && t.length > 0 && (this.value = this._select.value, this._updateFormValue()));
-  }
-  // ─── Slot Change Handlers ───
-  /** @internal */
-  _handleErrorSlotChange(e) {
-    const t = e.target;
-    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  // ─── 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;
-  }
-  // ─── Keyboard Navigation ───
-  /** @internal */
-  _handleKeydown(e) {
-    var s;
-    if (this.disabled) return;
-    const t = this._options.map((o, r) => ({ o, i: r })).filter(({ o }) => !o.disabled).map(({ i: o }) => o);
-    switch (e.key) {
-      case "ArrowDown": {
-        if (e.preventDefault(), !this.open) {
-          this.open = !0, this._focusedOptionIndex = t.length > 0 ? t[0] ?? 0 : 0;
-          break;
-        }
-        const o = t.find((r) => r > this._focusedOptionIndex);
-        this._focusedOptionIndex = o !== void 0 ? o : t[0] ?? this._focusedOptionIndex;
-        break;
-      }
-      case "ArrowUp": {
-        if (e.preventDefault(), !this.open) {
-          this.open = !0;
-          const a = t[t.length - 1];
-          this._focusedOptionIndex = a !== void 0 ? a : 0;
-          break;
-        }
-        const o = [...t].reverse().find((a) => a < this._focusedOptionIndex), r = t[t.length - 1];
-        this._focusedOptionIndex = o !== void 0 ? o : 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 o = t[t.length - 1];
-        this._focusedOptionIndex = o !== void 0 ? o : 0;
-        break;
-      }
-      case "Enter":
-      case " ": {
-        if (e.preventDefault(), !this.open) {
-          this.open = !0;
-          const o = this._options.findIndex((r) => r.value === this.value);
-          this._focusedOptionIndex = o >= 0 ? o : t[0] ?? 0;
-          break;
-        }
-        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {
-          const o = this._options[this._focusedOptionIndex];
-          o && this._selectOption(o);
-        }
-        break;
-      }
-      case "Escape": {
-        e.preventDefault(), this.open = !1, this._focusedOptionIndex = -1, (s = this._trigger) == null || s.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 o = e.key.toLowerCase(), r = this.open ? this._focusedOptionIndex + 1 : 0, a = this._options.map((p, b) => ({ o: p, i: b })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(o)), v = a.find(({ i: p }) => p >= r) ?? a[0];
-          v && (this.open || (this.open = !0), this._focusedOptionIndex = v.i, e.preventDefault());
-        }
-        break;
-      }
-    }
-  }
-  // ─── 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 visible trigger button. */
-  focus(e) {
-    var t;
-    (t = this._trigger) == null || t.focus(e);
-  }
-  // ─── Render Helpers ───
-  /** @internal */
-  _optionId(e) {
-    return `hx-select-option-${this._selectId}-${e}`;
-  }
-  /** @internal */
-  _renderOptions() {
-    return this._options.length === 0 ? h`<div class="field__no-options">${this.labelNoOptions}</div>` : y(
-      this._options,
-      (e) => e.value,
-      (e, t) => {
-        const s = e.value === this.value, o = t === this._focusedOptionIndex;
-        return h`
-          <div
-            id=${this._optionId(t)}
-            part="option"
-            role="option"
-            class=${_({
-          field__option: !0,
-          "field__option--selected": s,
-          "field__option--focused": o,
-          "field__option--disabled": e.disabled
-        })}
-            aria-selected=${s ? "true" : "false"}
-            aria-disabled=${e.disabled ? "true" : n}
-            @click=${() => this._selectOption(e)}
-          >
-            <span class="field__option-label">${e.label}</span>
-          </div>
-        `;
-      }
-    );
-  }
-  // ─── Main Render ───
-  render() {
-    const e = !!this.error || this._hasErrorSlot, t = {
-      field: !0,
-      "field--error": e,
-      "field--disabled": this.disabled,
-      "field--required": this.required,
-      "field--open": this.open
-    }, s = {
-      field__trigger: !0,
-      [`field__trigger--${this.size}`]: !0,
-      "field__trigger--placeholder": !this.value
-    }, o = {
-      field__select: !0,
-      [`field__select--${this.size}`]: !0
-    }, r = [
-      e || this._hasErrorSlot ? this._errorId : null,
-      this.helpText ? this._helpTextId : null
-    ].filter(Boolean).join(" ") || void 0;
-    return h`
-      <div part="field" class=${_(t)}>
-        <!-- Label -->
-        <slot name="label">
-          ${this.label ? h`<label
-                part="label"
-                class="field__label"
-                id=${this._labelId}
-                for=${this._selectId}
-              >
-                ${this.label}
-                ${this.required ? h`<span class="field__required-marker" aria-hidden="true">*</span>` : n}
-              </label>` : n}
-        </slot>
-
-        <!-- Select Wrapper: trigger + listbox -->
-        <div part="select-wrapper" class="field__select-wrapper">
-          <!-- Custom Trigger (combobox — div to avoid native role conflicts per APG) -->
-          <div
-            part="trigger"
-            id=${this._selectId}
-            class=${_(s)}
-            role="combobox"
-            tabindex=${this.disabled ? "-1" : "0"}
-            aria-expanded=${this.open ? "true" : "false"}
-            aria-haspopup="listbox"
-            aria-controls=${this._listboxId}
-            aria-activedescendant=${this.open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : n}
-            aria-invalid=${e ? "true" : n}
-            aria-describedby=${c(r)}
-            aria-required=${this.required ? "true" : n}
-            aria-disabled=${this.disabled ? "true" : n}
-            aria-labelledby=${c(this.label ? this._labelId : void 0)}
-            aria-label=${c(this.accessibleLabel ?? void 0)}
-            @click=${this._toggleDropdown}
-            @keydown=${this._handleKeydown}
-          >
-            <span class="field__trigger-value"
-              >${this._displayValue || this.placeholder || n}</span
-            >
-            <span class="field__chevron" aria-hidden="true"></span>
-          </div>
-
-          <!-- 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=${_(o)}
-            tabindex="-1"
-            aria-hidden="true"
-            ?required=${this.required}
-            ?disabled=${this.disabled}
-            name=${c(this.name || void 0)}
-            aria-label=${c(this.accessibleLabel ?? void 0)}
-            aria-invalid=${e ? "true" : n}
-            aria-describedby=${c(r)}
-            aria-required=${this.required ? "true" : n}
-            @change=${this._handleNativeChange}
-          >
-            ${this.placeholder ? h`<option value="" disabled selected>${this.placeholder}</option>` : n}
-          </select>
-        </div>
-
-        <!-- Hidden slot (options are read from here) -->
-        <slot @slotchange=${this._handleSlotChange} style="display:none;"></slot>
-
-        <!-- Error -->
-        <slot name="error" @slotchange=${this._handleErrorSlotChange}>
-          ${e ? h`<div part="error" class="field__error" id=${this._errorId} role="alert">
-                ${this.error}
-              </div>` : n}
-        </slot>
-
-        <!-- Help Text -->
-        ${this.helpText && !e ? h`
-              <div part="help-text" class="field__help-text" id=${this._helpTextId}>
-                <slot name="help-text">${this.helpText}</slot>
-              </div>
-            ` : n}
-      </div>
-    `;
-  }
-};
-i.styles = [C, w];
-i.formAssociated = !0;
-l([
-  d({ type: String })
-], i.prototype, "label", 2);
-l([
-  d({ type: String })
-], i.prototype, "placeholder", 2);
-l([
-  d({ type: String, reflect: !0 })
-], i.prototype, "value", 2);
-l([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "required", 2);
-l([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-l([
-  d({ type: String, reflect: !0 })
-], i.prototype, "name", 2);
-l([
-  d({ type: String })
-], i.prototype, "error", 2);
-l([
-  d({ type: String, attribute: "help-text" })
-], i.prototype, "helpText", 2);
-l([
-  d({ type: String, attribute: "hx-size", reflect: !0 })
-], i.prototype, "size", 2);
-l([
-  d({ type: String, attribute: "accessible-label" })
-], i.prototype, "accessibleLabel", 2);
-l([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "open", 2);
-l([
-  d({ attribute: "label-required" })
-], i.prototype, "labelRequired", 2);
-l([
-  d({ attribute: "label-no-options" })
-], i.prototype, "labelNoOptions", 2);
-l([
-  u()
-], i.prototype, "_options", 2);
-l([
-  u()
-], i.prototype, "_hasErrorSlot", 2);
-l([
-  u()
-], i.prototype, "_focusedOptionIndex", 2);
-l([
-  x(".field__select")
-], i.prototype, "_select", 2);
-l([
-  x(".field__trigger")
-], i.prototype, "_trigger", 2);
-i = l([
-  m("hx-select")
-], i);
-export {
-  i as H
-};
-//# sourceMappingURL=hx-select-C8fEHQhC.js.map