@helixui/library 0.1.0

package/dist/shared/hx-combobox-De4-pDn0.js

@@ -0,0 +1,871 @@
+import { css as v, LitElement as m, html as h, nothing as n } from "lit";
+import { property as l, state as u, query as g, customElement as y } from "lit/decorators.js";
+import { classMap as x } 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 $ = v`
+  :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-combobox-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-combobox-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Input Wrapper ─── */
+
+  .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-neutral-300, #ced4da));
+    border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #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, #2563eb));
+    /* P2-7: Solid fallback for browsers without color-mix() (Chrome <111, Safari <16.2) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(--hx-overlay-primary-25, rgba(37, 99, 235, 0.25));
+    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, #2563eb))
+          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, #dc3545));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));
+    /* P2-7: Solid fallback for browsers without color-mix() */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(--hx-overlay-error-25, rgba(220, 53, 69, 0.25));
+    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, #dc3545))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Prefix / Suffix Slots ─── */
+
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--hx-space-2, 0.5rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+    flex-shrink: 0;
+  }
+
+  /* ─── Text Input ─── */
+
+  .field__input {
+    flex: 1;
+    min-width: 0;
+    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-neutral-800, #212529));
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  /* ─── Input size variants ─── */
+
+  .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--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__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);
+  }
+
+  /* ─── Clear Button ─── */
+
+  .field__clear-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-inline-end: var(--hx-space-2, 0.5rem);
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    color: var(--hx-color-neutral-400, #adb5bd);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    transition: color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .field__clear-button:hover {
+    color: var(--hx-color-neutral-700, #343a40);
+  }
+
+  .field__clear-button:focus-visible {
+    outline: 2px solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: 1px;
+  }
+
+  /* ─── Loading Indicator ─── */
+
+  .field__loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin-inline-end: var(--hx-space-2, 0.5rem);
+    flex-shrink: 0;
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  .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;
+    }
+  }
+
+  /* ─── 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-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
+    /* P2-7: Solid fallback for browsers without color-mix() */
+    box-shadow: 0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12));
+    box-shadow: var(
+      --hx-combobox-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent)
+    );
+    max-height: var(--hx-combobox-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-combobox-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-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  .field__option--selected {
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+
+  .field__option--focused {
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    outline: 2px solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: -2px;
+  }
+
+  .field__option--focused.field__option--selected {
+    background-color: var(--hx-combobox-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 / Empty 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);
+  }
+
+  /* ─── 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-combobox-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__input-wrapper,
+    .field__option {
+      transition: none;
+    }
+  }
+
+  /* ─── Multiple Selection / Chips (P0-1) ─── */
+
+  :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, #dbeafe));
+    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));
+    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, #bfdbfe));
+  }
+
+  .field__chip-remove:focus-visible {
+    outline: 2px solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: 1px;
+    opacity: 1;
+  }
+`;
+var k = Object.defineProperty, I = Object.getOwnPropertyDescriptor, a = (e, t, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? I(t, i) : t, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (s = (o ? p(t, i, s) : p(s)) || s);
+  return o && s && k(t, i, s), s;
+};
+let O = 0, r = class extends m {
+  constructor() {
+    super(), this._id = `hx-combobox-${++O}`, this._listboxId = `${this._id}-listbox`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`, 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.ariaLabel = null, this._options = [], this._filterText = "", this._open = !1, this._focusedOptionIndex = -1, this._hasErrorSlot = !1, this._debounceTimer = null, this._handleOutsideClick = (e) => {
+      this._open && !e.composedPath().includes(this) && this._closeDropdown();
+    }, this._internals = this.attachInternals();
+  }
+  // ─── Multiple Selection ───
+  // P0-1: Derive selected values Set from the comma-separated value property
+  get _selectedValuesSet() {
+    return !this.multiple || !this.value ? /* @__PURE__ */ new Set() : new Set(this.value.split(",").filter(Boolean));
+  }
+  // ─── Filtered options ───
+  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(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._debounceTimer !== null && clearTimeout(this._debounceTimer);
+  }
+  updated(e) {
+    e.has("value") && (this._updateFormValue(), this._updateValidity());
+  }
+  // ─── 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 combobox 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._input
+    ) : this._internals.setValidity({});
+  }
+  /** Called by the browser when the owning form resets. */
+  formResetCallback() {
+    this.value = "", this._filterText = "", this._internals.setFormValue(null);
+  }
+  /** Called when the browser restores form state (e.g., bfcache navigation). */
+  // P1-6: Correct signature per WHATWG spec — includes mode param and all state types
+  formStateRestoreCallback(e, t) {
+    typeof e == "string" && (this.value = e);
+  }
+  // ─── Option Syncing from Slot ───
+  _handleSlotChange() {
+    this._readOptions();
+  }
+  _parseOption(e) {
+    var t;
+    return { value: e.value, label: ((t = e.textContent) == null ? void 0 : t.trim()) ?? e.value, disabled: e.disabled };
+  }
+  _readOptions() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="option"]');
+    if (!e) return;
+    const t = [];
+    for (const o of e.assignedElements({ flatten: !0 }))
+      if (o instanceof HTMLOptionElement)
+        t.push(this._parseOption(o));
+      else if (o instanceof HTMLOptGroupElement)
+        for (const s of Array.from(o.children))
+          s instanceof HTMLOptionElement && t.push(this._parseOption(s));
+    this._options = t;
+  }
+  // ─── Slot Change Handlers ───
+  _handleErrorSlotChange(e) {
+    const t = e.target;
+    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Dropdown Control ───
+  _openDropdown() {
+    this.disabled || this._open || (this._open = !0, this._focusedOptionIndex = -1, this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })));
+  }
+  _closeDropdown() {
+    this._open && (this._open = !1, this._focusedOptionIndex = -1, this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })));
+  }
+  // ─── Input Handling ───
+  _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.filterDebounce)) : this._emitInput();
+  }
+  _emitInput() {
+    this.dispatchEvent(
+      new CustomEvent("hx-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this._filterText }
+      })
+    );
+  }
+  _handleFocus() {
+    this._openDropdown();
+  }
+  // ─── Keyboard Navigation ───
+  _handleKeydown(e) {
+    if (this.disabled) return;
+    const t = this._filteredOptions, i = t.map((o, s) => ({ o, i: s })).filter(({ o }) => !o.disabled).map(({ i: o }) => o);
+    switch (e.key) {
+      case "ArrowDown": {
+        if (e.preventDefault(), !this._open) {
+          this._openDropdown(), this._focusedOptionIndex = i.length > 0 ? i[0] ?? 0 : -1;
+          break;
+        }
+        const o = i.find((s) => s > this._focusedOptionIndex);
+        this._focusedOptionIndex = o !== void 0 ? o : i[0] ?? this._focusedOptionIndex;
+        break;
+      }
+      case "ArrowUp": {
+        if (e.preventDefault(), !this._open) {
+          this._openDropdown();
+          const d = i[i.length - 1];
+          this._focusedOptionIndex = d !== void 0 ? d : -1;
+          break;
+        }
+        const o = [...i].reverse().find((d) => d < this._focusedOptionIndex), s = i[i.length - 1];
+        this._focusedOptionIndex = o !== void 0 ? o : s ?? this._focusedOptionIndex;
+        break;
+      }
+      case "Enter": {
+        if (e.preventDefault(), !this._open) {
+          this._openDropdown();
+          break;
+        }
+        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < t.length) {
+          const o = t[this._focusedOptionIndex];
+          o && this._selectOption(o);
+        }
+        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
+  _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._filterText = "", this._input && (this._input.value = ""), this._dispatchChange();
+    }
+  }
+  // P0-1: Remove a single value from multi-selection
+  _removeValue(e) {
+    const t = this._selectedValuesSet;
+    t.delete(e), this.value = [...t].join(","), this._dispatchChange();
+  }
+  // ─── Clear ───
+  _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 ───
+  _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  // ─── Public Methods ───
+  /** Moves focus to the text input. */
+  focus(e) {
+    var t;
+    (t = this._input) == null || t.focus(e);
+  }
+  // ─── Render Helpers ───
+  _optionId(e) {
+    return `${this._id}-option-${e}`;
+  }
+  get _displayValue() {
+    if (this.multiple || !this.value) return "";
+    const e = this._options.find((t) => t.value === this.value);
+    return e ? e.label : this.value;
+  }
+  _renderOptions() {
+    const e = this._filteredOptions;
+    return e.length === 0 ? h`
+        <slot name="empty-label">
+          <div class="field__no-options">No options found</div>
+        </slot>
+      ` : e.map((t, i) => {
+      const o = this.multiple ? this._selectedValuesSet.has(t.value) : t.value === this.value, s = i === this._focusedOptionIndex;
+      return h`
+        <div
+          id=${this._optionId(i)}
+          part="option"
+          role="option"
+          class=${x({
+        field__option: !0,
+        "field__option--selected": o,
+        "field__option--focused": s,
+        "field__option--disabled": t.disabled
+      })}
+          aria-selected=${o ? "true" : "false"}
+          aria-disabled=${t.disabled ? "true" : n}
+          @click=${() => this._selectOption(t)}
+        >
+          <span class="field__option-label">${t.label}</span>
+        </div>
+      `;
+    });
+  }
+  // ─── Main Render ───
+  render() {
+    const e = !!this.error, t = this.clearable && !!this.value && !this.disabled, i = {
+      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
+    }, s = [
+      e || this._hasErrorSlot ? this._errorId : null,
+      this.helpText ? this._helpTextId : null
+    ].filter(Boolean).join(" ") || void 0, d = this._open && this._focusedOptionIndex >= 0 ? this._optionId(this._focusedOptionIndex) : void 0;
+    return h`
+      <div part="field" class=${x(i)}>
+        <!-- Label -->
+        <slot name="label">
+          ${this.label ? h`<label id=${this._labelId} part="label" class="field__label">
+                ${this.label}
+                ${this.required ? h`<span class="field__required-marker" aria-hidden="true">*</span>` : n}
+              </label>` : n}
+        </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((p) => {
+      const b = this._options.find((f) => f.value === p), _ = b ? b.label : p;
+      return h`
+                  <span class="field__chip">
+                    <span class="field__chip-label">${_}</span>
+                    <button
+                      type="button"
+                      class="field__chip-remove"
+                      aria-label="Remove ${_}"
+                      @click=${(f) => {
+        f.stopPropagation(), this._removeValue(p);
+      }}
+                    >
+                      <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>
+                `;
+    }) : n}
+
+          <!-- Text Input (combobox role) -->
+          <input
+            part="input"
+            type="text"
+            id=${this._id}
+            class=${x(o)}
+            role="combobox"
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-autocomplete="list"
+            aria-controls=${this._listboxId}
+            aria-activedescendant=${c(d)}
+            aria-invalid=${e ? "true" : n}
+            aria-describedby=${c(s)}
+            aria-required=${this.required ? "true" : n}
+            aria-label=${c(this.ariaLabel || void 0)}
+            aria-labelledby=${c(this.label && !this.ariaLabel ? this._labelId : void 0)}
+            aria-busy=${this.loading ? "true" : n}
+            .value=${this._filterText || (this._open ? "" : this._displayValue)}
+            placeholder=${c(this.placeholder || void 0)}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${c(this.name || void 0)}
+            autocomplete="off"
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @keydown=${this._handleKeydown}
+          />
+
+          <!-- Loading Indicator -->
+          ${this.loading ? h`
+                <div part="loading-indicator" class="field__loading-indicator" aria-hidden="true">
+                  <div class="field__loading-spinner"></div>
+                </div>
+              ` : n}
+
+          <!-- Clear Button -->
+          ${t ? h`
+                <button
+                  part="clear-button"
+                  type="button"
+                  class="field__clear-button"
+                  aria-label="Clear"
+                  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>
+              ` : n}
+
+          <!-- Suffix Slot -->
+          <slot name="suffix" class="field__suffix"></slot>
+        </div>
+
+        <!-- Listbox -->
+        <div
+          part="listbox"
+          role="listbox"
+          id=${this._listboxId}
+          class="field__listbox"
+          aria-label=${c(this.label || this.ariaLabel || void 0)}
+          aria-multiselectable=${this.multiple ? "true" : n}
+          ?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>
+
+        <!-- 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>
+    `;
+  }
+};
+r.styles = [w, $];
+r.formAssociated = !0;
+a([
+  l({ type: String })
+], r.prototype, "label", 2);
+a([
+  l({ type: String })
+], r.prototype, "placeholder", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+a([
+  l({ type: String })
+], r.prototype, "name", 2);
+a([
+  l({ type: String })
+], r.prototype, "error", 2);
+a([
+  l({ type: String, attribute: "help-text" })
+], r.prototype, "helpText", 2);
+a([
+  l({ type: String, attribute: "hx-size", reflect: !0 })
+], r.prototype, "size", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "multiple", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "clearable", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+a([
+  l({ type: Number, attribute: "filter-debounce" })
+], r.prototype, "filterDebounce", 2);
+a([
+  l({ type: String, attribute: "aria-label" })
+], r.prototype, "ariaLabel", 2);
+a([
+  u()
+], r.prototype, "_options", 2);
+a([
+  u()
+], r.prototype, "_filterText", 2);
+a([
+  u()
+], r.prototype, "_open", 2);
+a([
+  u()
+], r.prototype, "_focusedOptionIndex", 2);
+a([
+  u()
+], r.prototype, "_hasErrorSlot", 2);
+a([
+  g(".field__input")
+], r.prototype, "_input", 2);
+r = a([
+  y("hx-combobox")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-combobox-De4-pDn0.js.map