@editora/ui-core 0.1.9 → 0.1.10

package/dist/combobox.esm.js

@@ -0,0 +1,1023 @@
+import { E as k } from "./ElementBase-909688f3.mjs";
+import { n as h } from "./collection-a1aac0c6.mjs";
+import { c as C } from "./dismissable-layer-9c7e6b58.mjs";
+import { r as A } from "./listbox-308789a0.mjs";
+import "./collection.esm.js";
+const L = `
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </svg>
+`, $ = `
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="m5.6 7.6 4.4 4.6 4.4-4.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, E = `
+  :host {
+    --ui-combobox-width: var(--ui-width, 100%);
+    --ui-combobox-min-width: 248px;
+    --ui-combobox-height: 42px;
+    --ui-combobox-padding-x: 12px;
+    --ui-combobox-radius: var(--ui-radius, 12px);
+    --ui-combobox-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-combobox-text: var(--ui-color-text, #0f172a);
+    --ui-combobox-muted: var(--ui-color-muted, #64748b);
+    --ui-combobox-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-combobox-border: 1px solid var(--ui-combobox-border-color);
+    --ui-combobox-shadow: none;
+    --ui-combobox-shadow-hover: none;
+    --ui-combobox-shadow-focus: none;
+    --ui-combobox-focus: var(--ui-color-primary, #2563eb);
+    --ui-combobox-panel-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
+    --ui-combobox-panel-border: 1px solid color-mix(in srgb, var(--ui-combobox-border-color) 80%, transparent);
+    --ui-combobox-panel-shadow: none;
+    --ui-combobox-panel-z: 1600;
+    --ui-combobox-option-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 11%, transparent);
+    --ui-combobox-option-active: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, transparent);
+    --ui-combobox-error: var(--ui-color-danger, #dc2626);
+    --ui-combobox-success: var(--ui-color-success, #16a34a);
+    --ui-combobox-warning: var(--ui-color-warning, #d97706);
+    --ui-combobox-duration: 150ms;
+    --ui-combobox-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    display: inline-block;
+    width: auto;
+    min-inline-size: min(100%, var(--ui-combobox-min-width));
+    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    color: var(--ui-combobox-text);
+    color-scheme: light dark;
+  }
+
+  .label-row {
+    display: grid;
+    gap: 6px;
+    margin-bottom: 8px;
+  }
+
+  .label {
+    color: var(--ui-combobox-text);
+    font-size: 13px;
+    line-height: 1.3;
+    font-weight: 650;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-combobox-muted);
+    font-size: 12px;
+    line-height: 1.4;
+  }
+
+  .root {
+    position: relative;
+    width: var(--ui-combobox-width);
+    min-width: var(--ui-combobox-min-width);
+    max-width: 100%;
+  }
+
+  .control {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    width: 100%;
+    min-height: var(--ui-combobox-height);
+    border: var(--ui-combobox-border);
+    border-radius: var(--ui-combobox-radius);
+    background: linear-gradient(
+      170deg,
+      color-mix(in srgb, var(--ui-combobox-bg) 90%, #ffffff 10%),
+      var(--ui-combobox-bg)
+    );
+    box-shadow: var(--ui-combobox-shadow);
+    transition:
+      border-color var(--ui-combobox-duration) var(--ui-combobox-ease),
+      box-shadow var(--ui-combobox-duration) var(--ui-combobox-ease),
+      background-color var(--ui-combobox-duration) var(--ui-combobox-ease),
+      transform var(--ui-combobox-duration) var(--ui-combobox-ease);
+    overflow: hidden;
+    backdrop-filter: saturate(1.08) blur(8px);
+  }
+
+  .control:hover {
+    border-color: color-mix(in srgb, var(--ui-combobox-focus) 34%, var(--ui-combobox-border-color));
+    box-shadow: var(--ui-combobox-shadow-hover);
+  }
+
+  input {
+    grid-column: 1 / 2;
+    min-width: 0;
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--ui-combobox-text);
+    padding: 9px var(--ui-combobox-padding-x);
+    font-size: 14px;
+    line-height: 1.4;
+    font-family: inherit;
+    min-height: var(--ui-combobox-height);
+  }
+
+  input::placeholder {
+    color: var(--ui-combobox-muted);
+  }
+
+  .control[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--ui-combobox-focus) 72%, var(--ui-combobox-border-color));
+    box-shadow:
+      0 0 0 4px color-mix(in srgb, var(--ui-combobox-focus) 16%, transparent),
+      var(--ui-combobox-shadow-focus);
+    transform: translateY(-1px);
+  }
+
+  .icon-btn {
+    align-self: center;
+    border: none;
+    background: transparent;
+    color: var(--ui-combobox-muted);
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-inline-end: 2px;
+    transition:
+      background-color var(--ui-combobox-duration) var(--ui-combobox-ease),
+      color var(--ui-combobox-duration) var(--ui-combobox-ease),
+      transform var(--ui-combobox-duration) var(--ui-combobox-ease);
+  }
+
+  .icon-btn svg {
+    inline-size: 14px;
+    block-size: 14px;
+    pointer-events: none;
+  }
+
+  .icon-btn:hover {
+    background: color-mix(in srgb, var(--ui-combobox-text) 8%, transparent);
+    color: var(--ui-combobox-text);
+  }
+
+  .icon-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-combobox-focus) 70%, transparent);
+    outline-offset: 1px;
+  }
+
+  .icon-btn[hidden] {
+    display: none !important;
+  }
+
+  .icon-btn[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .toggle-btn[data-open="true"] {
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    border: var(--ui-combobox-panel-border);
+    border-radius: calc(var(--ui-combobox-radius) + 2px);
+    background: var(--ui-combobox-panel-bg);
+    box-shadow: var(--ui-combobox-panel-shadow);
+    max-height: min(360px, 52vh);
+    overflow: auto;
+    padding: 6px 6px 8px;
+    z-index: var(--ui-combobox-panel-z, 1600);
+    display: none;
+    opacity: 0;
+    transform: translateY(-4px) scale(0.985);
+    transition:
+      opacity var(--ui-combobox-duration) var(--ui-combobox-ease),
+      transform var(--ui-combobox-duration) var(--ui-combobox-ease);
+    backdrop-filter: saturate(1.08) blur(8px);
+  }
+
+  .panel[data-open="true"] {
+    display: block;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .status-row {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    margin: 0 0 6px;
+    padding: 6px 8px;
+    border-radius: 9px;
+    border: 1px solid color-mix(in srgb, var(--ui-combobox-border-color) 82%, transparent);
+    background: color-mix(in srgb, var(--ui-combobox-bg) 95%, transparent);
+    color: var(--ui-combobox-muted);
+    font-size: 11px;
+    line-height: 1.35;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .status-row[data-state="loading"] {
+    border-color: color-mix(in srgb, var(--ui-combobox-warning) 40%, var(--ui-combobox-border-color));
+    color: var(--ui-combobox-warning);
+    background: color-mix(in srgb, var(--ui-combobox-warning) 12%, transparent);
+  }
+
+  .status-row[data-state="error"] {
+    border-color: color-mix(in srgb, var(--ui-combobox-error) 46%, var(--ui-combobox-border-color));
+    color: var(--ui-combobox-error);
+    background: color-mix(in srgb, var(--ui-combobox-error) 11%, transparent);
+  }
+
+  .status-row[data-state="success"] {
+    border-color: color-mix(in srgb, var(--ui-combobox-success) 46%, var(--ui-combobox-border-color));
+    color: var(--ui-combobox-success);
+    background: color-mix(in srgb, var(--ui-combobox-success) 12%, transparent);
+  }
+
+  .status-row[data-state="idle"] {
+    display: none;
+  }
+
+  .option {
+    border: none;
+    background: transparent;
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 10px;
+    padding: 10px 10px;
+    cursor: pointer;
+    color: var(--ui-combobox-text);
+    font-size: 13px;
+    line-height: 1.35;
+    transition:
+      background-color var(--ui-combobox-duration) var(--ui-combobox-ease),
+      color var(--ui-combobox-duration) var(--ui-combobox-ease),
+      transform var(--ui-combobox-duration) var(--ui-combobox-ease);
+  }
+
+  .option:hover {
+    background: var(--ui-combobox-option-hover);
+  }
+
+  .option[data-highlighted="true"] {
+    background: var(--ui-combobox-option-active);
+    transform: translateX(1px);
+  }
+
+  .option-text {
+    min-inline-size: 0;
+    display: grid;
+    gap: 2px;
+    flex: 1 1 auto;
+  }
+
+  .option-label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    line-height: 1.35;
+    font-weight: 560;
+  }
+
+  .option-description {
+    color: var(--ui-combobox-muted);
+    font-size: 11px;
+    line-height: 1.35;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .option-check {
+    inline-size: 14px;
+    text-align: center;
+    font-size: 12px;
+    opacity: 0;
+    color: color-mix(in srgb, var(--ui-combobox-focus) 80%, var(--ui-combobox-text));
+  }
+
+  .option[data-selected="true"] .option-check {
+    opacity: 1;
+  }
+
+  .option[disabled] {
+    opacity: 0.46;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .empty {
+    padding: 14px 10px;
+    color: var(--ui-combobox-muted);
+    font-size: 12px;
+    line-height: 1.45;
+    text-align: center;
+  }
+
+  .error {
+    margin-top: 8px;
+    color: var(--ui-combobox-error);
+    font-size: 12px;
+    line-height: 1.35;
+    min-block-size: 16px;
+  }
+
+  :host([state="loading"]) .control {
+    border-color: color-mix(in srgb, var(--ui-combobox-warning) 52%, var(--ui-combobox-border-color));
+  }
+
+  :host([state="error"]) .control {
+    border-color: var(--ui-combobox-error);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-combobox-error) 19%, transparent), var(--ui-combobox-shadow);
+  }
+
+  :host([state="success"]) .control {
+    border-color: color-mix(in srgb, var(--ui-combobox-success) 72%, var(--ui-combobox-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-combobox-success) 13%, transparent), var(--ui-combobox-shadow);
+  }
+
+  :host([disabled]) .control {
+    opacity: 0.62;
+    pointer-events: none;
+    background: color-mix(in srgb, var(--ui-combobox-muted) 20%, transparent);
+  }
+
+  :host([readonly]) .control {
+    background: color-mix(in srgb, var(--ui-combobox-bg) 88%, var(--ui-combobox-muted) 12%);
+  }
+
+  :host([readonly]) .clear-btn {
+    display: none !important;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-combobox-height: 36px;
+    --ui-combobox-padding-x: 10px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-combobox-height: 48px;
+    --ui-combobox-padding-x: 13px;
+  }
+
+  :host([variant="surface"]) .control {
+    background: var(--ui-color-surface-alt, #f8fafc);
+  }
+
+  :host([variant="soft"]) .control {
+    background: color-mix(in srgb, var(--ui-combobox-text) 4%, transparent);
+    border-color: color-mix(in srgb, var(--ui-combobox-border-color) 70%, transparent);
+  }
+
+  :host([variant="classic"]) .control {
+    border-radius: 10px;
+  }
+
+  :host([radius="none"]) {
+    --ui-combobox-radius: 0;
+  }
+
+  :host([radius="large"]) {
+    --ui-combobox-radius: 16px;
+  }
+
+  :host([radius="full"]) {
+    --ui-combobox-radius: 9999px;
+  }
+
+  :host([validation="error"]) .control {
+    border-color: var(--ui-combobox-error);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-combobox-error) 20%, transparent), var(--ui-combobox-shadow);
+  }
+
+  :host([validation="success"]) .control {
+    border-color: var(--ui-combobox-success);
+  }
+
+  :host([headless]) .control,
+  :host([headless]) .panel,
+  :host([headless]) .label-row,
+  :host([headless]) .error {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control,
+    .panel,
+    .icon-btn,
+    .option {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-combobox-border: 2px solid var(--ui-combobox-border-color);
+      --ui-combobox-panel-border: 2px solid var(--ui-combobox-border-color);
+      --ui-combobox-shadow: none;
+      --ui-combobox-panel-shadow: none;
+      --ui-combobox-option-hover: color-mix(in srgb, var(--ui-color-primary, var(--ui-primary, #2563eb)) 24%, transparent);
+      --ui-combobox-option-active: color-mix(in srgb, var(--ui-color-primary, var(--ui-primary, #2563eb)) 32%, transparent);
+    }
+  }
+
+  @media (max-width: 640px) {
+    :host {
+      --ui-combobox-min-width: 100%;
+    }
+
+    .panel {
+      max-height: min(50vh, 360px);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-combobox-bg: Canvas;
+      --ui-combobox-text: CanvasText;
+      --ui-combobox-border-color: CanvasText;
+      --ui-combobox-panel-bg: Canvas;
+      --ui-combobox-panel-border: 1px solid CanvasText;
+      --ui-combobox-shadow: none;
+      --ui-combobox-panel-shadow: none;
+      --ui-combobox-muted: GrayText;
+      --ui-combobox-focus: Highlight;
+      --ui-combobox-option-hover: Highlight;
+      --ui-combobox-option-active: Highlight;
+    }
+
+    .status-row {
+      border-color: CanvasText;
+      color: CanvasText;
+      background: Canvas;
+    }
+
+    .option[data-highlighted="true"],
+    .option:hover {
+      color: HighlightText;
+    }
+  }
+`;
+function a(d) {
+  return d.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function x(d) {
+  if (d == null)
+    return !1;
+  const t = String(d).toLowerCase();
+  return t !== "false" && t !== "0";
+}
+class D extends k {
+  constructor() {
+    super(), this._input = null, this._control = null, this._panel = null, this._clearBtn = null, this._toggleBtn = null, this._options = [], this._filtered = [], this._highlightedIndex = -1, this._query = "", this._debounceTimer = null, this._observer = null, this._uid = Math.random().toString(36).slice(2, 8), this._formUnregister = null, this._isFocused = !1, this._suppressValueSync = !1, this._globalListenersBound = !1, this._dismissableLayer = null, this._nextOpenSource = "attribute", this._optionsRefreshScheduled = !1, this._panelPointerDown = !1, this._onInput = this._onInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onToggleClick = this._onToggleClick.bind(this), this._onPanelPointerDown = this._onPanelPointerDown.bind(this), this._onPanelClick = this._onPanelClick.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "placeholder",
+      "disabled",
+      "clearable",
+      "debounce",
+      "maxlength",
+      "readonly",
+      "autofocus",
+      "name",
+      "required",
+      "validation",
+      "state",
+      "state-text",
+      "size",
+      "variant",
+      "radius",
+      "label",
+      "description",
+      "open",
+      "headless",
+      "empty-text",
+      "no-filter",
+      "allow-custom"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._observer = new MutationObserver(() => {
+      this._scheduleOptionsRefresh();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0,
+      attributes: !0,
+      attributeFilter: ["value", "label", "disabled", "data-combobox-option"]
+    }), this._attachFormRegistration();
+  }
+  disconnectedCallback() {
+    var t;
+    this._unbindGlobalListeners(), this._detachDomListeners(), (t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = null, this._observer && (this._observer.disconnect(), this._observer = null), this._debounceTimer && (clearTimeout(this._debounceTimer), this._debounceTimer = null), this._optionsRefreshScheduled = !1, this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (t === "value") {
+        this._suppressValueSync || this._syncInputFromValue(), this._updateClearButton(), this._renderList();
+        return;
+      }
+      if (t === "open") {
+        this._applyOpenState(), e !== i && this._emitOpenState(i != null, e != null, this._nextOpenSource), this._nextOpenSource = "attribute";
+        return;
+      }
+      if (t === "disabled") {
+        this._isDisabled() && this.open && this._setOpen(!1, "attribute"), this.isConnected && this.requestRender();
+        return;
+      }
+      if (t === "state") {
+        this.isConnected && this.requestRender();
+        return;
+      }
+      if (t === "state-text") {
+        this._renderList();
+        return;
+      }
+      this.isConnected && this.requestRender();
+    }
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    const e = t || "";
+    e !== this.value && this.setAttribute("value", e);
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    this._setOpen(t, "api");
+  }
+  _isDisabled() {
+    return x(this.getAttribute("disabled"));
+  }
+  _isReadonly() {
+    return this.hasAttribute("readonly");
+  }
+  _state() {
+    const t = (this.getAttribute("state") || "idle").trim().toLowerCase();
+    return t === "loading" || t === "error" || t === "success" ? t : "idle";
+  }
+  _isLoading() {
+    return this._state() === "loading";
+  }
+  _stateText() {
+    const t = this.getAttribute("state-text");
+    if (t)
+      return t;
+    const e = this._state();
+    return e === "loading" ? "Syncing results" : e === "error" ? "Unable to load results" : e === "success" ? "Results up to date" : "";
+  }
+  _emitOpenState(t, e, i) {
+    const s = { open: t, previousOpen: e, source: i };
+    this.dispatchEvent(
+      new CustomEvent(t ? "open" : "close", {
+        detail: s,
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new CustomEvent(t ? "ui-open" : "ui-close", {
+        detail: s,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _attachFormRegistration() {
+    var t;
+    try {
+      const i = this.getRootNode().host, r = ((t = i == null ? void 0 : i.closest) == null ? void 0 : t.call(i, "ui-form")) || null || this.closest("ui-form"), o = this.getAttribute("name");
+      r && typeof r.registerField == "function" && o && (this._formUnregister = r.registerField(o, {
+        name: o,
+        getValue: () => this.value,
+        setValue: (n) => {
+          this.value = n;
+        },
+        validate: async () => {
+          const n = this._isCurrentValueValid();
+          return {
+            valid: n,
+            message: n ? void 0 : "Please select a value from the list."
+          };
+        },
+        setError: (n) => {
+          n ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", n)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
+        }
+      }));
+    } catch {
+    }
+  }
+  _isCurrentValueValid() {
+    const t = this.hasAttribute("required"), e = this.value;
+    return !t && !e ? !0 : t && !e ? !1 : this.hasAttribute("allow-custom") ? !0 : this._options.some((i) => i.value === e);
+  }
+  _readOptions() {
+    const t = Array.from(
+      this.querySelectorAll("option,[data-combobox-option]")
+    ), e = /* @__PURE__ */ new Set();
+    return t.map((i, s) => {
+      const r = i.tagName.toLowerCase() === "option", o = i, n = r ? o.value || o.textContent || "" : i.getAttribute("value") || i.getAttribute("data-value") || i.textContent || "", l = r ? (o.label || o.textContent || o.value || "").trim() : (i.getAttribute("label") || i.textContent || n).trim(), u = (i.getAttribute("description") || i.getAttribute("data-description") || "").trim(), b = r ? o.disabled : x(i.getAttribute("disabled")), c = n.trim();
+      if (!c && !l)
+        return null;
+      const m = `${c}::${l}`;
+      return e.has(m) ? null : (e.add(m), {
+        value: c,
+        label: l,
+        description: u,
+        disabled: b,
+        sourceIndex: s
+      });
+    }).filter((i) => !!i);
+  }
+  _findOptionByValue(t) {
+    return this._options.find((e) => e.value === t) || null;
+  }
+  _findExactOptionByQuery(t) {
+    const e = h(t);
+    return e && this._options.find(
+      (i) => !i.disabled && (h(i.label) === e || h(i.value) === e)
+    ) || null;
+  }
+  _rebuildFiltered(t) {
+    const e = h(this._query), i = this.hasAttribute("no-filter"), s = this._filtered[this._highlightedIndex];
+    if (this._filtered = this._options.filter((o) => i || !e ? !0 : h(o.label).includes(e) || h(o.value).includes(e)), t != null && t.preserveHighlight && s) {
+      const o = this._filtered.findIndex((n) => n.sourceIndex === s.sourceIndex);
+      if (o >= 0 && !this._filtered[o].disabled) {
+        this._highlightedIndex = o;
+        return;
+      }
+    }
+    const r = this._findOptionByValue(this.value);
+    if (r) {
+      const o = this._filtered.findIndex((n) => n.sourceIndex === r.sourceIndex);
+      if (o >= 0 && !this._filtered[o].disabled) {
+        this._highlightedIndex = o;
+        return;
+      }
+    }
+    this._highlightedIndex = A(this._filtered, {
+      getDisabled: (o) => o.disabled
+    });
+  }
+  _renderList() {
+    if (!this._panel)
+      return;
+    const t = this._renderStateRow(), e = this.getAttribute("empty-text") || "No matches found";
+    if (this._filtered.length === 0) {
+      this._panel.innerHTML = `${t}<div class="empty" part="empty">${a(e)}</div>`, this._panel.refresh(), this._panel.clearActive(), this._syncActiveDescendant();
+      return;
+    }
+    const i = this.value, s = this._filtered.map((r, o) => {
+      const n = r.value === i, l = o === this._highlightedIndex, u = r.disabled;
+      return `
+          <button
+            type="button"
+            id="${`${this._uid}-option-${r.sourceIndex}`}"
+            class="option"
+            role="option"
+            aria-selected="${n ? "true" : "false"}"
+            aria-disabled="${u ? "true" : "false"}"
+            data-option-index="${o}"
+            data-highlighted="${l ? "true" : "false"}"
+            data-selected="${n ? "true" : "false"}"
+            ${u ? "disabled" : ""}>
+            <span class="option-text">
+              <span class="option-label">${a(r.label)}</span>
+              ${r.description ? `<span class="option-description">${a(r.description)}</span>` : ""}
+            </span>
+            <span class="option-check" aria-hidden="true">✓</span>
+          </button>
+        `;
+    }).join("");
+    this._panel.innerHTML = `${t}${s}`, this._panel.refresh(), this._syncActiveDescendant(), this._scrollHighlightedIntoView();
+  }
+  _renderStateRow() {
+    const t = this._state(), e = this._stateText();
+    return e ? `<div class="status-row" part="status" data-state="${a(t)}" aria-live="polite">${a(e)}</div>` : "";
+  }
+  _syncInputFromValue() {
+    if (!this._input || this._isFocused && this.open)
+      return;
+    const t = this._findOptionByValue(this.value);
+    t ? (this._query = t.label, this._input.value = t.label) : (this._query = this.value, this._input.value = this.value), this._rebuildFiltered({ preserveHighlight: !1 }), this._renderList();
+  }
+  _syncActiveDescendant() {
+    var e, i;
+    if (!this._input)
+      return;
+    const t = (e = this._panel) == null ? void 0 : e.querySelector(`[data-option-index="${this._highlightedIndex}"]`);
+    if (t && this._panel) {
+      this._panel.setActiveItem(t, {
+        focus: !1,
+        owner: this._input,
+        scroll: !1
+      });
+      return;
+    }
+    (i = this._panel) == null || i.clearActive(), this._input.removeAttribute("aria-activedescendant");
+  }
+  _scrollHighlightedIntoView() {
+    if (!this._panel || this._highlightedIndex < 0)
+      return;
+    const t = this._panel.querySelector(`[data-option-index="${this._highlightedIndex}"]`);
+    this._panel.setActiveItem(t, {
+      focus: !1,
+      owner: this._input,
+      scroll: !0
+    });
+  }
+  _updateClearButton() {
+    if (!this._clearBtn)
+      return;
+    this.hasAttribute("clearable") && !this._isDisabled() && !this._isReadonly() && !this._isLoading() && (this._query.length > 0 || this.value.length > 0) ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", "");
+  }
+  _applyOpenState() {
+    var i;
+    if (!this._panel || !this._input || !this._toggleBtn)
+      return;
+    const t = this.open, e = this._isLoading();
+    t ? (this._bindGlobalListeners(), this._panel.setAttribute("data-open", "true"), this._panel.removeAttribute("hidden"), this._panel.setAttribute("aria-hidden", "false"), this._input.setAttribute("aria-expanded", "true"), this._toggleBtn.setAttribute("data-open", "true"), this._rebuildFiltered({ preserveHighlight: !0 }), this._renderList(), this._syncDismissableLayer()) : (this._unbindGlobalListeners(), (i = this._dismissableLayer) == null || i.destroy(), this._dismissableLayer = null, this._panel.setAttribute("hidden", ""), this._panel.removeAttribute("data-open"), this._panel.setAttribute("aria-hidden", "true"), this._input.setAttribute("aria-expanded", "false"), this._toggleBtn.setAttribute("data-open", "false")), this._toggleBtn.disabled = this._isDisabled(), this._clearBtn && (this._clearBtn.disabled = this._isDisabled() || this._isReadonly()), this._input.setAttribute("aria-busy", e ? "true" : "false"), this._panel.setAttribute("aria-busy", e ? "true" : "false");
+  }
+  _bindGlobalListeners() {
+    this._globalListenersBound || (this._globalListenersBound = !0);
+  }
+  _unbindGlobalListeners() {
+    this._globalListenersBound && (this._globalListenersBound = !1);
+  }
+  _syncDismissableLayer() {
+    var t;
+    !this.open || !this._panel || ((t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = C({
+      node: this._panel,
+      trigger: this._control,
+      closeOnEscape: !1,
+      closeOnPointerOutside: !0,
+      onDismiss: (e) => {
+        e === "outside-pointer" && (this.hasAttribute("allow-custom") ? this._commitCustomValue() : this._syncInputFromValue(), this._closePanel("outside"));
+      }
+    }));
+  }
+  _setOpen(t, e = "api") {
+    t !== this.open && (t && this._isDisabled() || (this._nextOpenSource = e, t ? this.setAttribute("open", "") : this.removeAttribute("open")));
+  }
+  _openPanel(t = "api") {
+    this._setOpen(!0, t);
+  }
+  _closePanel(t = "api") {
+    this._setOpen(!1, t);
+  }
+  _commitSelection(t) {
+    if (this._isDisabled() || this._isReadonly() || t.disabled)
+      return;
+    const e = this.value;
+    this._suppressValueSync = !0, this.value = t.value, this._suppressValueSync = !1, this._input && (this._input.value = t.label), this._query = t.label, this._rebuildFiltered({ preserveHighlight: !1 }), this._renderList(), this._updateClearButton(), this._closePanel("selection"), e !== t.value && this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t.value, label: t.label },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: { value: t.value, label: t.label },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _commitCustomValue() {
+    if (this._isDisabled() || this._isReadonly() || !this.hasAttribute("allow-custom"))
+      return;
+    const t = this._query.trim(), e = this.value;
+    this._suppressValueSync = !0, this.value = t, this._suppressValueSync = !1, this._updateClearButton(), e !== t && this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t, label: t, custom: !0 },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _moveHighlight(t) {
+    var r, o;
+    if (this._filtered.length === 0)
+      return;
+    const e = (r = this._panel) == null ? void 0 : r.querySelector(`[data-option-index="${this._highlightedIndex}"]`), i = ((o = this._panel) == null ? void 0 : o.move(t > 0 ? 1 : -1, {
+      current: e,
+      focus: !1,
+      owner: this._input,
+      scroll: !0
+    })) || null;
+    if (!i)
+      return;
+    const s = Number(i.getAttribute("data-option-index") || "-1");
+    s < 0 || (this._highlightedIndex = s, this._renderList());
+  }
+  render() {
+    const t = this.hasAttribute("headless"), e = this.getAttribute("disabled"), i = x(e), s = this._isReadonly(), r = this._state(), o = r === "loading", n = this.getAttribute("placeholder") || "Search...", l = this.getAttribute("maxlength"), u = this.hasAttribute("required"), b = this.getAttribute("label") || "", c = this.getAttribute("description") || "", v = this.getAttribute("data-error") || "" || (r === "error" ? this._stateText() || "Unable to load options." : ""), _ = this.getAttribute("validation") === "error" || r === "error" || !!v, f = !!(b || this.querySelector('[slot="label"]')), g = !!(c || this.querySelector('[slot="description"]')), y = `${this._uid}-error`, w = [g ? `${this._uid}-description` : "", _ ? y : ""].filter(Boolean).join(" ");
+    if (this._options = this._readOptions(), !this._query) {
+      const p = this._findOptionByValue(this.value);
+      this._query = p ? p.label : this.value;
+    }
+    this._rebuildFiltered({ preserveHighlight: !1 }), this.setContent(`
+      ${t ? "" : `<style>${E}</style>`}
+      ${f || g ? `
+        <div class="label-row">
+          <label class="label" part="label" id="${this._uid}-label"><slot name="label">${a(b)}</slot></label>
+          <div class="description" part="description" id="${this._uid}-description"><slot name="description">${a(c)}</slot></div>
+        </div>
+      ` : ""}
+
+      <div class="root" part="root">
+        <div class="control" part="control" data-focused="${this._isFocused ? "true" : "false"}" data-state="${a(r)}">
+          <input
+            id="${this._uid}-input"
+            part="input"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            aria-expanded="${this.open ? "true" : "false"}"
+            aria-controls="${this._uid}-listbox"
+            ${f ? `aria-labelledby="${this._uid}-label"` : ""}
+            ${w ? `aria-describedby="${w}"` : ""}
+            ${_ ? 'aria-invalid="true"' : ""}
+            aria-busy="${o ? "true" : "false"}"
+            value="${a(this._query)}"
+            placeholder="${a(n)}"
+            ${i ? "disabled" : ""}
+            ${s ? "readonly" : ""}
+            ${u ? "required" : ""}
+            ${l ? `maxlength="${a(l)}"` : ""}
+          />
+          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${s ? "disabled" : ""}>${L}</button>
+          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open ? "true" : "false"}" aria-label="Toggle options">${$}</button>
+        </div>
+        <ui-listbox class="panel" id="${this._uid}-listbox" part="panel" role="listbox" item-selector=".option[data-option-index]" item-role="option" active-attribute="data-highlighted" aria-busy="${o ? "true" : "false"}" data-state="${a(r)}" ${this.open ? 'data-open="true" aria-hidden="false"' : 'hidden aria-hidden="true"'}></ui-listbox>
+      </div>
+      <slot hidden></slot>
+      <div class="error" part="error" id="${y}" ${_ ? "" : "hidden"}>${a(v)}</div>
+    `), this._detachDomListeners(), this._input = this.root.querySelector("input"), this._control = this.root.querySelector(".control"), this._panel = this.root.querySelector("ui-listbox.panel"), this._clearBtn = this.root.querySelector(".clear-btn"), this._toggleBtn = this.root.querySelector(".toggle-btn"), this._renderList(), this._updateClearButton(), this._applyOpenState(), this._input && (this._input.addEventListener("input", this._onInput), this._input.addEventListener("change", this._onNativeChange), this._input.addEventListener("focus", this._onFocusIn), this._input.addEventListener("blur", this._onFocusOut), this._input.addEventListener("keydown", this._onKeyDown), this.hasAttribute("autofocus") && setTimeout(() => {
+      var p;
+      try {
+        (p = this._input) == null || p.focus();
+      } catch {
+      }
+    }, 0)), this._clearBtn && this._clearBtn.addEventListener("click", this._onClearClick), this._toggleBtn && this._toggleBtn.addEventListener("click", this._onToggleClick), this._panel && (this._panel.addEventListener("pointerdown", this._onPanelPointerDown), this._panel.addEventListener("click", this._onPanelClick));
+  }
+  _detachDomListeners() {
+    this._input && (this._input.removeEventListener("input", this._onInput), this._input.removeEventListener("change", this._onNativeChange), this._input.removeEventListener("focus", this._onFocusIn), this._input.removeEventListener("blur", this._onFocusOut), this._input.removeEventListener("keydown", this._onKeyDown)), this._clearBtn && this._clearBtn.removeEventListener("click", this._onClearClick), this._toggleBtn && this._toggleBtn.removeEventListener("click", this._onToggleClick), this._panel && (this._panel.removeEventListener("pointerdown", this._onPanelPointerDown), this._panel.removeEventListener("click", this._onPanelClick));
+  }
+  _onInput(t) {
+    if (!this._input || this._isDisabled() || this._isReadonly())
+      return;
+    const e = t.target.value;
+    this._query = e, this._openPanel("keyboard"), this._rebuildFiltered({ preserveHighlight: !1 }), this._renderList(), this._updateClearButton(), this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { query: e, value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+    const i = Number(this.getAttribute("debounce") || 0);
+    this._debounceTimer && (clearTimeout(this._debounceTimer), this._debounceTimer = null), i > 0 ? this._debounceTimer = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("debounced-input", {
+          detail: { query: e, value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, i) : this.dispatchEvent(
+      new CustomEvent("debounced-input", {
+        detail: { query: e, value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _onNativeChange() {
+    this._isDisabled() || this._isReadonly() || this.hasAttribute("allow-custom") && this._commitCustomValue();
+  }
+  _onFocusIn() {
+    this._isFocused = !0, this._control && this._control.setAttribute("data-focused", "true"), this._isReadonly() || this._openPanel("keyboard");
+  }
+  _onFocusOut() {
+    this._isFocused = !1, this._control && this._control.setAttribute("data-focused", "false"), queueMicrotask(() => {
+      if (this._panelPointerDown) {
+        this._panelPointerDown = !1;
+        return;
+      }
+      this.root.activeElement || this.open && (this.hasAttribute("allow-custom") ? this._commitCustomValue() : this._syncInputFromValue(), this._closePanel("outside"));
+    });
+  }
+  _refreshOptionsFromDom() {
+    this._options = this._readOptions(), this._rebuildFiltered({ preserveHighlight: !1 }), this._renderList(), this._syncInputFromValue();
+  }
+  _scheduleOptionsRefresh() {
+    this._optionsRefreshScheduled || (this._optionsRefreshScheduled = !0, queueMicrotask(() => {
+      this._optionsRefreshScheduled = !1, this.isConnected && this._refreshOptionsFromDom();
+    }));
+  }
+  _onKeyDown(t) {
+    var e, i;
+    if (!this._isDisabled() && this._input) {
+      if (t.key === "Home" && this.open) {
+        t.preventDefault();
+        const s = ((e = this._panel) == null ? void 0 : e.focusBoundary("first", { focus: !1, owner: this._input, scroll: !0 })) || null;
+        this._highlightedIndex = Number((s == null ? void 0 : s.getAttribute("data-option-index")) || "-1"), this._renderList();
+        return;
+      }
+      if (t.key === "End" && this.open) {
+        t.preventDefault();
+        const s = ((i = this._panel) == null ? void 0 : i.focusBoundary("last", { focus: !1, owner: this._input, scroll: !0 })) || null;
+        this._highlightedIndex = Number((s == null ? void 0 : s.getAttribute("data-option-index")) || "-1"), this._renderList();
+        return;
+      }
+      if (t.key === "ArrowDown") {
+        t.preventDefault(), this._openPanel("keyboard"), this._moveHighlight(1);
+        return;
+      }
+      if (t.key === "ArrowUp") {
+        t.preventDefault(), this._openPanel("keyboard"), this._moveHighlight(-1);
+        return;
+      }
+      if (t.key === "Enter") {
+        if (this.open && this._highlightedIndex >= 0) {
+          t.preventDefault();
+          const s = this._filtered[this._highlightedIndex];
+          s && this._commitSelection(s);
+        } else if (this.hasAttribute("allow-custom"))
+          t.preventDefault(), this._commitCustomValue(), this._closePanel("keyboard");
+        else if (this.open)
+          t.preventDefault(), this._syncInputFromValue(), this._closePanel("keyboard");
+        else {
+          const s = this._findExactOptionByQuery(this._query);
+          s && (t.preventDefault(), this._commitSelection(s));
+        }
+        return;
+      }
+      if (t.key === "Escape") {
+        this.open && (t.preventDefault(), this.hasAttribute("allow-custom") || this._syncInputFromValue(), this._closePanel("keyboard"));
+        return;
+      }
+      t.key === "Tab" && (this.hasAttribute("allow-custom") ? this._commitCustomValue() : this._syncInputFromValue(), this._closePanel("keyboard"));
+    }
+  }
+  _onClearClick(t) {
+    t.preventDefault(), this._input && (this._isDisabled() || this._isReadonly() || (this._query = "", this._input.value = "", this._suppressValueSync = !0, this.value = "", this._suppressValueSync = !1, this._rebuildFiltered({ preserveHighlight: !1 }), this._renderList(), this._updateClearButton(), this._openPanel("clear"), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { query: "", value: "" },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: "", label: "" },
+        bubbles: !0,
+        composed: !0
+      })
+    )));
+  }
+  _onToggleClick(t) {
+    var e;
+    t.preventDefault(), !this._isDisabled() && (this.open ? this._closePanel("toggle") : this._openPanel("toggle"), (e = this._input) == null || e.focus());
+  }
+  _onPanelPointerDown(t) {
+    if (this._isReadonly())
+      return;
+    const e = t.target;
+    e != null && e.closest("[data-option-index]") && (this._panelPointerDown = !0, t.preventDefault());
+  }
+  _onPanelClick(t) {
+    if (this._isReadonly())
+      return;
+    const i = t.target.closest("[data-option-index]");
+    if (!i)
+      return;
+    const s = i.getAttribute("data-option-index"), r = s == null ? -1 : Number(s);
+    if (!Number.isFinite(r) || r < 0)
+      return;
+    const o = this._filtered[r];
+    !o || o.disabled || this._commitSelection(o);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-combobox") && customElements.define("ui-combobox", D);
+export {
+  D as UICombobox
+};