@helixui/library 2.1.2-next.52 → 2.1.2-next.54

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

@@ -1,544 +0,0 @@
-import { css as v, LitElement as m, html as h, nothing as n } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as a, state as u, query as g, customElement as y } 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 w } from "lit/directives/repeat.js";
-const $ = v`:host{display:block}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .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, .25rem);font-size:var(--hx-font-size-sm, .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)}.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, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));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, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .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));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, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);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-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .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, .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, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.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, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));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 .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, .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, .375rem));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}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .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, .15s 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:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));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, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .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, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .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, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .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, .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:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s 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:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}`;
-var k = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? O(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 I = 0, r = class extends m {
-  constructor() {
-    super(), this._id = `hx-combobox-${++I}`, 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.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.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._filterAnnouncement = "", 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
-  /** @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();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), typeof document < "u" && document.removeEventListener("click", this._handleOutsideClick), this._debounceTimer !== null && clearTimeout(this._debounceTimer), this._open && (this._open = !1);
-  }
-  updated(e) {
-    super.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();
-  }
-  /** @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({});
-  }
-  /** @internal */
-  formResetCallback() {
-    this.value = "", this._filterText = "", this._internals.setFormValue(null);
-  }
-  /** @internal */
-  // P1-6: Correct signature per WHATWG spec — includes mode param and all state types
-  formStateRestoreCallback(e, t) {
-    typeof e == "string" && (this.value = e);
-  }
-  /** @internal */
-  formDisabledCallback(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 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 ───
-  /** @internal */
-  _handleErrorSlotChange(e) {
-    const t = e.target;
-    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  // ─── 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, 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((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
-  /** @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._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 ───
-  /** Moves focus to the text input. */
-  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 ? h`
-        <slot name="empty-label">
-          <div class="field__no-options">${this.labelNoOptions}</div>
-        </slot>
-      ` : w(
-      e,
-      (t) => t.value,
-      (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=${_({
-          field__option: !0,
-          "field__option--selected": o,
-          "field__option--focused": s,
-          "field__option--disabled": t.disabled
-        })}
-            aria-selected=${this.multiple ? o ? "true" : "false" : o ? "true" : n}
-            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=${_(i)}>
-        <!-- Label -->
-        <slot name="label">
-          ${this.label ? h`<label id=${this._labelId} for=${this._id} 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), x = b ? b.label : p;
-      return h`
-                  <span class="field__chip">
-                    <span class="field__chip-label">${x}</span>
-                    <button
-                      type="button"
-                      class="field__chip-remove"
-                      aria-label=${this.labelRemoveOption(x)}
-                      @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=${_(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 ${this.label || this.ariaLabel || "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>
-              ` : 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}
-
-        <!-- Filter results live region -->
-        <div id=${this._liveRegionId} aria-live="polite" aria-atomic="true" class="field__sr-only">
-          ${this._filterAnnouncement}
-        </div>
-      </div>
-    `;
-  }
-};
-r.styles = [$];
-r.formAssociated = !0;
-l([
-  a({ type: String })
-], r.prototype, "label", 2);
-l([
-  a({ type: String })
-], r.prototype, "placeholder", 2);
-l([
-  a({ type: String, reflect: !0 })
-], r.prototype, "value", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "required", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-l([
-  a({ type: String })
-], r.prototype, "name", 2);
-l([
-  a({ type: String })
-], r.prototype, "error", 2);
-l([
-  a({ type: String, attribute: "help-text" })
-], r.prototype, "helpText", 2);
-l([
-  a({ type: String, attribute: "hx-size", reflect: !0 })
-], r.prototype, "size", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "multiple", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "clearable", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "loading", 2);
-l([
-  a({ type: Number, attribute: "filter-debounce" })
-], r.prototype, "filterDebounce", 2);
-l([
-  a({ type: String, attribute: "aria-label" })
-], r.prototype, "ariaLabel", 2);
-l([
-  a({ type: String, attribute: "label-no-options" })
-], r.prototype, "labelNoOptions", 2);
-l([
-  a({ type: String, attribute: "label-required" })
-], r.prototype, "labelRequired", 2);
-l([
-  a({ attribute: !1 })
-], r.prototype, "labelRemoveOption", 2);
-l([
-  u()
-], r.prototype, "_options", 2);
-l([
-  u()
-], r.prototype, "_filterText", 2);
-l([
-  u()
-], r.prototype, "_open", 2);
-l([
-  u()
-], r.prototype, "_focusedOptionIndex", 2);
-l([
-  u()
-], r.prototype, "_hasErrorSlot", 2);
-l([
-  u()
-], r.prototype, "_filterAnnouncement", 2);
-l([
-  g(".field__input")
-], r.prototype, "_input", 2);
-r = l([
-  y("hx-combobox")
-], r);
-export {
-  r as H
-};
-//# sourceMappingURL=hx-combobox-BJ4lQocO.js.map