@helixui/library 0.1.0

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

@@ -0,0 +1,753 @@
+import { css as b, LitElement as m, html as h, nothing as n } from "lit";
+import { property as d, state as v, query as _, customElement as y } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { t as w } from "./lit-Dpo7RLp4.js";
+const $ = b`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Field Container ─── */
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
+    position: relative;
+  }
+
+  /* ─── Label ─── */
+
+  .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-select-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Select Wrapper ─── */
+
+  .field__select-wrapper {
+    position: relative;
+    display: block;
+  }
+
+  /* ─── Trigger Button ─── */
+
+  .field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hx-space-2, 0.5rem);
+    width: 100%;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
+    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: left;
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  /* Fallback focus ring for environments where :focus-visible is unavailable */
+  .field__trigger:focus {
+    border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+  }
+
+  /* Enhanced focus ring with opacity via color-mix when :focus-visible is available */
+  .field__trigger:focus-visible {
+    border-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+  }
+
+  @supports (color: color-mix(in srgb, red 50%, blue)) {
+    .field__trigger:focus-visible {
+      box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+        color-mix(
+          in srgb,
+          var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb))
+            calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+          transparent
+        );
+    }
+  }
+
+  .field__trigger[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  /* ─── Trigger size variants ─── */
+
+  .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--md {
+    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
+    font-size: var(--hx-font-size-md, 1rem);
+    padding: var(--hx-space-2, 0.5rem) 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);
+  }
+
+  /* ─── Trigger value ─── */
+
+  .field__trigger-value {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .field__trigger--placeholder .field__trigger-value {
+    color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+  }
+
+  /* ─── Chevron (CSS-drawn) ─── */
+
+  .field__chevron {
+    flex-shrink: 0;
+    width: 12px;
+    height: 8px;
+    position: relative;
+    color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    pointer-events: none;
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .field__chevron::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2px;
+    width: 7px;
+    height: 7px;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(45deg);
+  }
+
+  .field--open .field__chevron {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__chevron {
+      transition: none;
+    }
+  }
+
+  /* ─── Error State (trigger) ─── */
+
+  .field--error .field__trigger {
+    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .field--error .field__trigger:focus {
+    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .field--error .field__trigger:focus-visible {
+    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  @supports (color: color-mix(in srgb, red 50%, blue)) {
+    .field--error .field__trigger:focus-visible {
+      box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+        color-mix(
+          in srgb,
+          var(--hx-select-error-color, var(--hx-color-error-500, #dc3545))
+            calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+          transparent
+        );
+    }
+  }
+
+  /* ─── Listbox Panel ─── */
+
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    right: 0;
+    z-index: var(--hx-z-index-dropdown, 100);
+    background-color: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+    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;
+  }
+
+  /* ─── Options Container ─── */
+
+  .field__options {
+    overflow-y: auto;
+    flex: 1;
+    padding: var(--hx-space-1, 0.25rem) 0;
+  }
+
+  /* ─── Individual Options ─── */
+
+  .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-select-color, var(--hx-color-neutral-800, #212529));
+    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-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  .field__option--selected {
+    background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+
+  .field__option--focused {
+    background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    outline: 2px solid var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: -2px;
+  }
+
+  .field__option--focused.field__option--selected {
+    background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+  }
+
+  .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;
+  }
+
+  /* ─── No Options State ─── */
+
+  .field__no-options {
+    padding: var(--hx-space-3, 0.75rem);
+    text-align: center;
+    color: var(--hx-color-neutral-400, #adb5bd);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Hidden native select (form participation + test compat) ─── */
+
+  .field__select {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  /* ─── Size Variants (mirrored on native select for test compat) ─── */
+
+  .field__select--sm {
+    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .field__select--md {
+    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  .field__select--lg {
+    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__trigger,
+    .field__option {
+      transition: none;
+    }
+  }
+`;
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? O(t, a) : t, s = e.length - 1, f; s >= 0; s--)
+    (f = e[s]) && (i = (r ? f(t, a, i) : f(i)) || i);
+  return r && i && I(t, a, i), i;
+};
+let z = 0, o = class extends m {
+  constructor() {
+    super(), this._selectId = `hx-select-${++z}`, this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.ariaLabel = null, this.open = !1, this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
+      this.open && !e.composedPath().includes(this) && (this.open = !1);
+    }, this._internals = this.attachInternals();
+  }
+  // ─── Computed helpers ───
+  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(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  updated(e) {
+    if (e.has("value") && (this._syncNativeSelect(), this._updateFormValue(), this._updateValidity()), e.has("size")) {
+      const t = ["sm", "md", "lg"];
+      t.includes(this.size) || console.warn(
+        `[hx-select] Invalid size "${this.size}". Expected one of: ${t.join(", ")}.`
+      );
+    }
+  }
+  // ─── Form Integration ───
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  /** Returns the validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Checks whether the select satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.value || null);
+  }
+  _updateValidity() {
+    this.required && !this.value ? this._internals.setValidity(
+      { valueMissing: !0 },
+      this.error || "Please select an option.",
+      this._trigger ?? this._select
+    ) : this._internals.setValidity({});
+  }
+  /** Called by the browser when the owning form resets. */
+  formResetCallback() {
+    this.value = "", this._internals.setFormValue(null);
+  }
+  /** Called when the browser restores form state (e.g., bfcache navigation). */
+  formStateRestoreCallback(e, t) {
+    typeof e == "string" && (this.value = e);
+  }
+  // ─── Native Select Sync ───
+  _syncNativeSelect() {
+    this._select && this.value && (this._select.value = this.value);
+  }
+  // ─── Option Syncing from Slot ───
+  _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.
+   */
+  _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((i) => i.remove());
+    const a = (i) => {
+      if (!this._select) return;
+      const s = i.cloneNode(!0);
+      s.setAttribute("data-cloned", ""), this._select.appendChild(s);
+    };
+    for (const i of e.assignedElements({ flatten: !0 }))
+      if (i instanceof HTMLOptionElement)
+        t.push(this._parseOption(i)), a(i);
+      else if (i instanceof HTMLOptGroupElement)
+        for (const s of Array.from(i.children))
+          s instanceof HTMLOptionElement && (t.push(this._parseOption(s)), a(s));
+    this._options = t, this._select && (this.value ? this._select.value = this.value : !this.placeholder && t.length > 0 && (this.value = this._select.value, this._updateFormValue()));
+  }
+  // ─── Slot Change Handlers ───
+  _handleErrorSlotChange(e) {
+    const t = e.target;
+    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Dropdown Control ───
+  _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 ───
+  _handleKeydown(e) {
+    var a;
+    if (this.disabled) return;
+    const t = this._options.map((r, i) => ({ o: r, i })).filter(({ o: r }) => !r.disabled).map(({ i: r }) => r);
+    switch (e.key) {
+      case "ArrowDown": {
+        if (e.preventDefault(), !this.open) {
+          this.open = !0, this._focusedOptionIndex = t.length > 0 ? t[0] ?? 0 : 0;
+          break;
+        }
+        const r = t.find((i) => i > this._focusedOptionIndex);
+        this._focusedOptionIndex = r !== void 0 ? r : t[0] ?? this._focusedOptionIndex;
+        break;
+      }
+      case "ArrowUp": {
+        if (e.preventDefault(), !this.open) {
+          this.open = !0;
+          const s = t[t.length - 1];
+          this._focusedOptionIndex = s !== void 0 ? s : 0;
+          break;
+        }
+        const r = [...t].reverse().find((s) => s < this._focusedOptionIndex), i = t[t.length - 1];
+        this._focusedOptionIndex = r !== void 0 ? r : i ?? 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 r = t[t.length - 1];
+        this._focusedOptionIndex = r !== void 0 ? r : 0;
+        break;
+      }
+      case "Enter":
+      case " ": {
+        if (e.preventDefault(), !this.open) {
+          this.open = !0;
+          const r = this._options.findIndex((i) => i.value === this.value);
+          this._focusedOptionIndex = r >= 0 ? r : t[0] ?? 0;
+          break;
+        }
+        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {
+          const r = this._options[this._focusedOptionIndex];
+          r && this._selectOption(r);
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault(), this.open = !1, this._focusedOptionIndex = -1, (a = this._trigger) == null || a.focus();
+        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 r = e.key.toLowerCase(), i = this.open ? this._focusedOptionIndex + 1 : 0, s = this._options.map((p, g) => ({ o: p, i: g })).filter(({ o: p }) => !p.disabled && p.label.toLowerCase().startsWith(r)), x = s.find(({ i: p }) => p >= i) ?? s[0];
+          x && (this.open || (this.open = !0), this._focusedOptionIndex = x.i, e.preventDefault());
+        }
+        break;
+      }
+    }
+  }
+  // ─── Selection ───
+  _selectOption(e) {
+    e.disabled || (this.value = e.value, this._dispatchChange(), this.open = !1, this._focusedOptionIndex = -1);
+  }
+  // ─── Event Dispatchers ───
+  _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  _handleNativeChange(e) {
+    this.value = e.target.value, this._dispatchChange();
+  }
+  // ─── Public Methods ───
+  /** Moves focus to the visible trigger button. */
+  focus(e) {
+    var t;
+    (t = this._trigger) == null || t.focus(e);
+  }
+  // ─── Render Helpers ───
+  _optionId(e) {
+    return `hx-select-option-${this._selectId}-${e}`;
+  }
+  _renderOptions() {
+    return this._options.length === 0 ? h`<div class="field__no-options">No options found</div>` : this._options.map((e, t) => {
+      const a = e.value === this.value, r = t === this._focusedOptionIndex;
+      return h`
+        <div
+          id=${this._optionId(t)}
+          part="option"
+          role="option"
+          class=${u({
+        field__option: !0,
+        "field__option--selected": a,
+        "field__option--focused": r,
+        "field__option--disabled": e.disabled
+      })}
+          aria-selected=${a ? "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, t = {
+      field: !0,
+      "field--error": e,
+      "field--disabled": this.disabled,
+      "field--required": this.required,
+      "field--open": this.open
+    }, a = {
+      field__trigger: !0,
+      [`field__trigger--${this.size}`]: !0,
+      "field__trigger--placeholder": !this.value
+    }, r = {
+      field__select: !0,
+      [`field__select--${this.size}`]: !0
+    }, i = [
+      e || this._hasErrorSlot ? this._errorId : null,
+      this.helpText ? this._helpTextId : null
+    ].filter(Boolean).join(" ") || void 0;
+    return h`
+      <div part="field" class=${u(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=${u(a)}
+            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(i)}
+            aria-required=${this.required ? "true" : n}
+            aria-disabled=${this.disabled ? "true" : n}
+            aria-labelledby=${c(this.label ? this._labelId : void 0)}
+            aria-label=${c(this.ariaLabel ?? void 0)}
+            @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.ariaLabel || void 0)}
+            ?hidden=${!this.open}
+          >
+            <div class="field__options">${this._renderOptions()}</div>
+          </div>
+
+          <!-- Hidden native select (form participation + test compat) -->
+          <select
+            part="select"
+            class=${u(r)}
+            tabindex="-1"
+            aria-hidden="true"
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            name=${c(this.name || void 0)}
+            aria-label=${c(this.ariaLabel ?? void 0)}
+            aria-invalid=${e ? "true" : n}
+            aria-describedby=${c(i)}
+            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>
+    `;
+  }
+};
+o.styles = [w, $];
+o.formAssociated = !0;
+l([
+  d({ type: String })
+], o.prototype, "label", 2);
+l([
+  d({ type: String })
+], o.prototype, "placeholder", 2);
+l([
+  d({ type: String, reflect: !0 })
+], o.prototype, "value", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+l([
+  d({ type: String })
+], o.prototype, "name", 2);
+l([
+  d({ type: String })
+], o.prototype, "error", 2);
+l([
+  d({ type: String, attribute: "help-text" })
+], o.prototype, "helpText", 2);
+l([
+  d({ type: String, attribute: "hx-size", reflect: !0 })
+], o.prototype, "size", 2);
+l([
+  d({ type: String, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+l([
+  v()
+], o.prototype, "_options", 2);
+l([
+  v()
+], o.prototype, "_hasErrorSlot", 2);
+l([
+  v()
+], o.prototype, "_focusedOptionIndex", 2);
+l([
+  _(".field__select")
+], o.prototype, "_select", 2);
+l([
+  _(".field__trigger")
+], o.prototype, "_trigger", 2);
+o = l([
+  y("hx-select")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-select-DQks1zLJ.js.map