@editora/ui-core 0.1.18 → 0.1.20

package/dist/combobox.esm.js

@@ -1,8 +1,7 @@
-import { E as A } from "./ElementBase-909688f3.mjs";
-import { n as h } from "./collection-a1aac0c6.mjs";
-import { c as C } from "./dismissable-layer-9c7e6b58.mjs";
-import { r as k } from "./listbox-308789a0.mjs";
-import "./collection.esm.js";
+import { E as A } from "./ElementBase-YlTLMsGk.mjs";
+import { n as h } from "./collection-C7URGjEI.mjs";
+import { c as C } from "./dismissable-layer-BmPIoK80.mjs";
+import { r as k } from "./listbox-DJamVeFj.mjs";
 const F = `
   <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"/>
@@ -476,9 +475,8 @@ const F = `
 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;
+function _(d) {
+  if (d == null) return !1;
   const t = String(d).toLowerCase();
   return t !== "false" && t !== "0";
 }
@@ -525,8 +523,7 @@ class E extends A {
     }), 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._optionsRefreshFrame && (cancelAnimationFrame(this._optionsRefreshFrame), this._optionsRefreshFrame = 0), this._autofocusFrame && (cancelAnimationFrame(this._autofocusFrame), this._autofocusFrame = 0), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+    this._unbindGlobalListeners(), this._detachDomListeners(), this._dismissableLayer?.destroy(), this._dismissableLayer = null, this._observer && (this._observer.disconnect(), this._observer = null), this._debounceTimer && (clearTimeout(this._debounceTimer), this._debounceTimer = null), this._optionsRefreshFrame && (cancelAnimationFrame(this._optionsRefreshFrame), this._optionsRefreshFrame = 0), this._autofocusFrame && (cancelAnimationFrame(this._autofocusFrame), this._autofocusFrame = 0), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, i) {
     if (e !== i) {
@@ -567,7 +564,7 @@ class E extends A {
     this._setOpen(t, "api");
   }
   _isDisabled() {
-    return x(this.getAttribute("disabled"));
+    return _(this.getAttribute("disabled"));
   }
   _isReadonly() {
     return this.hasAttribute("readonly");
@@ -581,46 +578,44 @@ class E extends A {
   }
   _stateText() {
     const t = this.getAttribute("state-text");
-    if (t)
-      return t;
+    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 };
+    const r = { open: t, previousOpen: e, source: i };
     this.dispatchEvent(
       new CustomEvent(t ? "open" : "close", {
-        detail: s,
+        detail: r,
         bubbles: !0,
         composed: !0
       })
     ), this.dispatchEvent(
       new CustomEvent(t ? "ui-open" : "ui-close", {
-        detail: s,
+        detail: r,
         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,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), s = this.getAttribute("name");
+      r && typeof r.registerField == "function" && s && (this._formUnregister = r.registerField(s, {
+        name: s,
         getValue: () => this.value,
-        setValue: (n) => {
-          this.value = n;
+        setValue: (o) => {
+          this.value = o;
         },
         validate: async () => {
-          const n = this._isCurrentValueValid();
+          const o = this._isCurrentValueValid();
           return {
-            valid: n,
-            message: n ? void 0 : "Please select a value from the list."
+            valid: o,
+            message: o ? 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"));
+        setError: (o) => {
+          o ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", o)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
         }
       }));
     } catch {
@@ -634,17 +629,16 @@ class E extends A {
     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(), b = (i.getAttribute("description") || i.getAttribute("data-description") || "").trim(), u = 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), {
+    return t.map((i, r) => {
+      const s = i.tagName.toLowerCase() === "option", o = i, n = s ? o.value || o.textContent || "" : i.getAttribute("value") || i.getAttribute("data-value") || i.textContent || "", l = s ? (o.label || o.textContent || o.value || "").trim() : (i.getAttribute("label") || i.textContent || n).trim(), b = (i.getAttribute("description") || i.getAttribute("data-description") || "").trim(), u = s ? o.disabled : _(i.getAttribute("disabled")), c = n.trim();
+      if (!c && !l) return null;
+      const p = `${c}::${l}`;
+      return e.has(p) ? null : (e.add(p), {
         value: c,
         label: l,
         description: b,
         disabled: u,
-        sourceIndex: s
+        sourceIndex: r
       });
     }).filter((i) => !!i);
   }
@@ -658,17 +652,17 @@ class E extends A {
     ) || 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);
+    const e = h(this._query), i = this.hasAttribute("no-filter"), r = 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?.preserveHighlight && r) {
+      const o = this._filtered.findIndex((n) => n.sourceIndex === r.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);
+    const s = this._findOptionByValue(this.value);
+    if (s) {
+      const o = this._filtered.findIndex((n) => n.sourceIndex === s.sourceIndex);
       if (o >= 0 && !this._filtered[o].disabled) {
         this._highlightedIndex = o;
         return;
@@ -679,8 +673,7 @@ class E extends A {
     });
   }
   _renderList() {
-    if (!this._panel)
-      return;
+    if (!this._panel) return;
     const t = this._renderStateRow(), e = this.getAttribute("empty-text") || "No matches found", i = [
       t,
       e,
@@ -701,8 +694,8 @@ class E extends A {
       this._panel.innerHTML = `${t}<div class="empty" part="empty">${a(e)}</div>`, this._listStructureFingerprint = i, this._panel.refresh(), this._panel.clearActive(), this._syncActiveDescendant();
       return;
     }
-    const s = this.value, r = this._filtered.map((o, n) => {
-      const l = o.value === s, b = n === this._highlightedIndex, u = o.disabled;
+    const r = this.value, s = this._filtered.map((o, n) => {
+      const l = o.value === r, b = n === this._highlightedIndex, u = o.disabled;
       return `
           <button
             type="button"
@@ -723,23 +716,20 @@ class E extends A {
           </button>
         `;
     }).join("");
-    this._panel.innerHTML = `${t}${r}`, this._listStructureFingerprint = i, this._panel.refresh(), this._syncActiveDescendant(), this._scrollHighlightedIntoView();
+    this._panel.innerHTML = `${t}${s}`, this._listStructureFingerprint = i, this._panel.refresh(), this._syncActiveDescendant(), this._scrollHighlightedIntoView();
   }
   _syncRenderedListState() {
-    if (!this._panel)
-      return !1;
+    if (!this._panel) return !1;
     if (this._filtered.length === 0)
       return this._panel.querySelector(".empty") ? (this._panel.clearActive(), this._syncActiveDescendant(), !0) : !1;
     const t = Array.from(this._panel.querySelectorAll(".option[data-option-index]"));
-    if (t.length !== this._filtered.length)
-      return !1;
+    if (t.length !== this._filtered.length) return !1;
     const e = this.value;
-    return t.forEach((i, s) => {
-      const r = this._filtered[s];
-      if (!r)
-        return;
-      const o = r.value === e, n = s === this._highlightedIndex;
-      i.setAttribute("aria-selected", o ? "true" : "false"), i.setAttribute("aria-disabled", r.disabled ? "true" : "false"), i.setAttribute("data-highlighted", n ? "true" : "false"), i.setAttribute("data-selected", o ? "true" : "false"), i.disabled = r.disabled;
+    return t.forEach((i, r) => {
+      const s = this._filtered[r];
+      if (!s) return;
+      const o = s.value === e, n = r === this._highlightedIndex;
+      i.setAttribute("aria-selected", o ? "true" : "false"), i.setAttribute("aria-disabled", s.disabled ? "true" : "false"), i.setAttribute("data-highlighted", n ? "true" : "false"), i.setAttribute("data-selected", o ? "true" : "false"), i.disabled = s.disabled;
     }), this._syncActiveDescendant(), this._scrollHighlightedIntoView(), !0;
   }
   _renderStateRow() {
@@ -747,16 +737,13 @@ class E extends A {
     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;
+    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 (!this._input) return;
+    const t = this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`);
     if (t && this._panel) {
       this._panel.setActiveItem(t, {
         focus: !1,
@@ -765,11 +752,10 @@ class E extends A {
       });
       return;
     }
-    (i = this._panel) == null || i.clearActive(), this._input.removeAttribute("aria-activedescendant");
+    this._panel?.clearActive(), this._input.removeAttribute("aria-activedescendant");
   }
   _scrollHighlightedIntoView() {
-    if (!this._panel || this._highlightedIndex < 0)
-      return;
+    if (!this._panel || this._highlightedIndex < 0) return;
     const t = this._panel.querySelector(`[data-option-index="${this._highlightedIndex}"]`);
     this._panel.setActiveItem(t, {
       focus: !1,
@@ -778,16 +764,13 @@ class E extends A {
     });
   }
   _updateClearButton() {
-    if (!this._clearBtn)
-      return;
+    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;
+    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");
+    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(), this._dismissableLayer?.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);
@@ -796,14 +779,13 @@ class E extends A {
     this._globalListenersBound && (this._globalListenersBound = !1);
   }
   _syncDismissableLayer() {
-    var t;
-    !this.open || !this._panel || ((t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = C({
+    !this.open || !this._panel || (this._dismissableLayer?.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"));
+      onDismiss: (t) => {
+        t === "outside-pointer" && (this.hasAttribute("allow-custom") ? this._commitCustomValue() : this._syncInputFromValue(), this._closePanel("outside"));
       }
     }));
   }
@@ -817,8 +799,7 @@ class E extends A {
     this._setOpen(!1, t);
   }
   _commitSelection(t) {
-    if (this._isDisabled() || this._isReadonly() || t.disabled)
-      return;
+    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", {
@@ -835,8 +816,7 @@ class E extends A {
     );
   }
   _commitCustomValue() {
-    if (this._isDisabled() || this._isReadonly() || !this.hasAttribute("allow-custom"))
-      return;
+    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", {
@@ -847,29 +827,26 @@ class E extends A {
     );
   }
   _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, {
+    if (this._filtered.length === 0) return;
+    const e = this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`), i = this._panel?.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());
+    }) || null;
+    if (!i) return;
+    const r = Number(i.getAttribute("data-option-index") || "-1");
+    r < 0 || (this._highlightedIndex = r, 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"), b = this.hasAttribute("required"), u = this.getAttribute("label") || "", c = this.getAttribute("description") || "", f = this.getAttribute("data-error") || "" || (r === "error" ? this._stateText() || "Unable to load options." : ""), _ = this.getAttribute("validation") === "error" || r === "error" || !!f, v = !!(u || this.querySelector('[slot="label"]')), g = !!(c || this.querySelector('[slot="description"]')), y = `${this._uid}-error`, w = [g ? `${this._uid}-description` : "", _ ? y : ""].filter(Boolean).join(" ");
+    const t = this.hasAttribute("headless"), e = this.getAttribute("disabled"), i = _(e), r = this._isReadonly(), s = this._state(), o = s === "loading", n = this.getAttribute("placeholder") || "Search...", l = this.getAttribute("maxlength"), b = this.hasAttribute("required"), u = this.getAttribute("label") || "", c = this.getAttribute("description") || "", x = this.getAttribute("data-error") || "" || (s === "error" ? this._stateText() || "Unable to load options." : ""), m = this.getAttribute("validation") === "error" || s === "error" || !!x, f = !!(u || this.querySelector('[slot="label"]')), g = !!(c || this.querySelector('[slot="description"]')), v = `${this._uid}-error`, y = [g ? `${this._uid}-description` : "", m ? v : ""].filter(Boolean).join(" ");
     if (this._options = this._readOptions(), !this._query) {
-      const p = this._findOptionByValue(this.value);
-      this._query = p ? p.label : this.value;
+      const w = this._findOptionByValue(this.value);
+      this._query = w ? w.label : this.value;
     }
     this._rebuildFiltered({ preserveHighlight: !1 }), this.setContent(`
       ${t ? "" : `<style>${$}</style>`}
-      ${v || g ? `
+      ${f || g ? `
         <div class="label-row">
           <label class="label" part="label" id="${this._uid}-label"><slot name="label">${a(u)}</slot></label>
           <div class="description" part="description" id="${this._uid}-description"><slot name="description">${a(c)}</slot></div>
@@ -877,7 +854,7 @@ class E extends A {
       ` : ""}
 
       <div class="root" part="root">
-        <div class="control" part="control" data-focused="${this._isFocused ? "true" : "false"}" data-state="${a(r)}">
+        <div class="control" part="control" data-focused="${this._isFocused ? "true" : "false"}" data-state="${a(s)}">
           <input
             id="${this._uid}-input"
             part="input"
@@ -886,29 +863,28 @@ class E extends A {
             aria-autocomplete="list"
             aria-expanded="${this.open ? "true" : "false"}"
             aria-controls="${this._uid}-listbox"
-            ${v ? `aria-labelledby="${this._uid}-label"` : ""}
-            ${w ? `aria-describedby="${w}"` : ""}
-            ${_ ? 'aria-invalid="true"' : ""}
+            ${f ? `aria-labelledby="${this._uid}-label"` : ""}
+            ${y ? `aria-describedby="${y}"` : ""}
+            ${m ? 'aria-invalid="true"' : ""}
             aria-busy="${o ? "true" : "false"}"
             value="${a(this._query)}"
             placeholder="${a(n)}"
             ${i ? "disabled" : ""}
-            ${s ? "readonly" : ""}
+            ${r ? "readonly" : ""}
             ${b ? "required" : ""}
             ${l ? `maxlength="${a(l)}"` : ""}
           />
-          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${s ? "disabled" : ""}>${F}</button>
+          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${r ? "disabled" : ""}>${F}</button>
           <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open ? "true" : "false"}" aria-label="Toggle options">${L}</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>
+        <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(s)}" ${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(f)}</div>
+      <div class="error" part="error" id="${v}" ${m ? "" : "hidden"}>${a(x)}</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._listStructureFingerprint = "", 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") && (this._autofocusFrame && cancelAnimationFrame(this._autofocusFrame), this._autofocusFrame = requestAnimationFrame(() => {
-      var p;
       this._autofocusFrame = 0;
       try {
-        (p = this._input) == null || p.focus();
+        this._input?.focus();
       } catch {
       }
     }))), 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));
@@ -917,8 +893,7 @@ class E extends A {
     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;
+    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", {
@@ -974,18 +949,17 @@ class E extends A {
     }));
   }
   _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();
+        const e = this._panel?.focusBoundary("first", { focus: !1, owner: this._input, scroll: !0 }) || null;
+        this._highlightedIndex = Number(e?.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();
+        const e = this._panel?.focusBoundary("last", { focus: !1, owner: this._input, scroll: !0 }) || null;
+        this._highlightedIndex = Number(e?.getAttribute("data-option-index") || "-1"), this._renderList();
         return;
       }
       if (t.key === "ArrowDown") {
@@ -999,15 +973,15 @@ class E extends A {
       if (t.key === "Enter") {
         if (this.open && this._highlightedIndex >= 0) {
           t.preventDefault();
-          const s = this._filtered[this._highlightedIndex];
-          s && this._commitSelection(s);
+          const e = this._filtered[this._highlightedIndex];
+          e && this._commitSelection(e);
         } 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));
+          const e = this._findExactOptionByQuery(this._query);
+          e && (t.preventDefault(), this._commitSelection(e));
         }
         return;
       }
@@ -1034,25 +1008,18 @@ class E extends A {
     )));
   }
   _onToggleClick(t) {
-    var e;
-    t.preventDefault(), !this._isDisabled() && (this.open ? this._closePanel("toggle") : this._openPanel("toggle"), (e = this._input) == null || e.focus());
+    t.preventDefault(), !this._isDisabled() && (this.open ? this._closePanel("toggle") : this._openPanel("toggle"), this._input?.focus());
   }
   _onPanelPointerDown(t) {
-    if (this._isReadonly())
-      return;
-    const e = t.target;
-    e != null && e.closest("[data-option-index]") && (this._panelPointerDown = !0, t.preventDefault());
+    this._isReadonly() || !t.target?.closest("[data-option-index]") || (this._panelPointerDown = !0, t.preventDefault());
   }
   _onPanelClick(t) {
-    if (this._isReadonly())
-      return;
+    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];
+    if (!i) return;
+    const r = i.getAttribute("data-option-index"), s = r == null ? -1 : Number(r);
+    if (!Number.isFinite(s) || s < 0) return;
+    const o = this._filtered[s];
     !o || o.disabled || this._commitSelection(o);
   }
 }

package/dist/command-palette.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./ElementBase-1b301e7f.js"),n=require("./overlayManager-0eda4e08.js");require("./command.cjs.js");require("./scroll-lock-d7b0df21.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const r=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./ElementBase-EV6mVBUV.js"),n=require("./overlayManager-CSy3fJmJ.js");require("./command.cjs.js");const r=`
   :host {
     position: fixed;
     inset: 0;
@@ -56,7 +56,7 @@
       --ui-command-backdrop: rgba(0, 0, 0, 0.72);
     }
   }
-`;class o extends a.ElementBase{constructor(){super(),this._command=null,this._globalListenersBound=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onSelect=this._onSelect.bind(this)}static get observedAttributes(){return["open","headless","placeholder","empty-text","query"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this._syncOpenState()}disconnectedCallback(){var e;this.root.removeEventListener("click",this._onClick),(e=this._command)==null||e.removeEventListener("select",this._onSelect),this._unbindGlobalListeners();try{n.OverlayManager.unregister(this),n.OverlayManager.releaseLock()}catch{}super.disconnectedCallback()}attributeChangedCallback(e,t,s){if(t!==s){if(e==="open"){this._syncOpenState(),this.dispatchEvent(new CustomEvent(s!=null?"open":"close",{bubbles:!0}));return}if(e==="placeholder"||e==="empty-text"){this.isConnected&&this.requestRender();return}if(e==="query"){const i=s||"";this._command&&this._command.query!==i&&(this._command.query=i);return}e==="headless"&&this.isConnected&&this.requestRender()}}openPalette(){this.setAttribute("open","")}closePalette(){this.removeAttribute("open")}get query(){var t;const e=this.getAttribute("query");return typeof e=="string"?e:((t=this._command)==null?void 0:t.query)??""}set query(e){const t=e||"";t?this.setAttribute("query",t):this.removeAttribute("query"),this._command&&this._command.query!==t&&(this._command.query=t)}focusSearch(){var e;(e=this._command)==null||e.focusSearch()}clearQuery(){this.query=""}_syncOpenState(){var e;if(this.hasAttribute("open")){this._bindGlobalListeners();try{n.OverlayManager.register(this),n.OverlayManager.acquireLock()}catch{}setTimeout(()=>{var t;(t=this._command)==null||t.focusSearch()},0)}else{this._unbindGlobalListeners(),(e=this._command)==null||e.clearQuery();try{n.OverlayManager.unregister(this),n.OverlayManager.releaseLock()}catch{}}}render(){var i;const e=this.getAttribute("placeholder")||"Search commands...",t=this.getAttribute("empty-text")||"No commands found.";this.setContent(`
+`;class o extends a.ElementBase{constructor(){super(),this._command=null,this._globalListenersBound=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onSelect=this._onSelect.bind(this)}static get observedAttributes(){return["open","headless","placeholder","empty-text","query"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this._command?.removeEventListener("select",this._onSelect),this._unbindGlobalListeners();try{n.OverlayManager.unregister(this),n.OverlayManager.releaseLock()}catch{}super.disconnectedCallback()}attributeChangedCallback(e,t,s){if(t!==s){if(e==="open"){this._syncOpenState(),this.dispatchEvent(new CustomEvent(s!=null?"open":"close",{bubbles:!0}));return}if(e==="placeholder"||e==="empty-text"){this.isConnected&&this.requestRender();return}if(e==="query"){const i=s||"";this._command&&this._command.query!==i&&(this._command.query=i);return}e==="headless"&&this.isConnected&&this.requestRender()}}openPalette(){this.setAttribute("open","")}closePalette(){this.removeAttribute("open")}get query(){const e=this.getAttribute("query");return typeof e=="string"?e:this._command?.query??""}set query(e){const t=e||"";t?this.setAttribute("query",t):this.removeAttribute("query"),this._command&&this._command.query!==t&&(this._command.query=t)}focusSearch(){this._command?.focusSearch()}clearQuery(){this.query=""}_syncOpenState(){if(this.hasAttribute("open")){this._bindGlobalListeners();try{n.OverlayManager.register(this),n.OverlayManager.acquireLock()}catch{}setTimeout(()=>{this._command?.focusSearch()},0)}else{this._unbindGlobalListeners(),this._command?.clearQuery();try{n.OverlayManager.unregister(this),n.OverlayManager.releaseLock()}catch{}}}render(){const e=this.getAttribute("placeholder")||"Search commands...",t=this.getAttribute("empty-text")||"No commands found.";this.setContent(`
       <style>${r}</style>
       <div class="overlay" part="overlay"></div>
       <section class="panel" part="panel" role="dialog" aria-modal="true" aria-label="Command palette">
@@ -64,4 +64,4 @@
           <slot slot="command" name="command"></slot>
         </ui-command>
       </section>
-    `);const s=this.root.querySelector("ui-command");this._command&&this._command!==s&&this._command.removeEventListener("select",this._onSelect),this._command=s,(i=this._command)==null||i.addEventListener("select",this._onSelect),this._command&&this._command.query!==this.query&&(this._command.query=this.query)}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onKeyDown),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onKeyDown),this._globalListenersBound=!1)}_onClick(e){const t=e.target;t!=null&&t.classList.contains("overlay")&&this.closePalette()}_onSelect(e){this.closePalette()}_onKeyDown(e){this.hasAttribute("open")&&e.key==="Escape"&&(e.preventDefault(),this.closePalette())}}typeof customElements<"u"&&!customElements.get("ui-command-palette")&&customElements.define("ui-command-palette",o);exports.UICommandPalette=o;
+    `);const s=this.root.querySelector("ui-command");this._command&&this._command!==s&&this._command.removeEventListener("select",this._onSelect),this._command=s,this._command?.addEventListener("select",this._onSelect),this._command&&this._command.query!==this.query&&(this._command.query=this.query)}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onKeyDown),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onKeyDown),this._globalListenersBound=!1)}_onClick(e){e.target?.classList.contains("overlay")&&this.closePalette()}_onSelect(e){this.closePalette()}_onKeyDown(e){this.hasAttribute("open")&&e.key==="Escape"&&(e.preventDefault(),this.closePalette())}}typeof customElements<"u"&&!customElements.get("ui-command-palette")&&customElements.define("ui-command-palette",o);exports.UICommandPalette=o;

package/dist/command-palette.esm.js

@@ -1,11 +1,7 @@
-import { E as o } from "./ElementBase-909688f3.mjs";
-import { O as i } from "./overlayManager-5bbd4dc3.mjs";
+import { E as o } from "./ElementBase-YlTLMsGk.mjs";
+import { O as n } from "./overlayManager-BJjU1VA8.mjs";
 import "./command.esm.js";
-import "./scroll-lock-31da444f.mjs";
-import "./listbox-308789a0.mjs";
-import "./collection-a1aac0c6.mjs";
-import "./collection.esm.js";
-const r = `
+const a = `
   :host {
     position: fixed;
     inset: 0;
@@ -64,7 +60,7 @@ const r = `
     }
   }
 `;
-class a extends o {
+class r extends o {
   constructor() {
     super(), this._command = null, this._globalListenersBound = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onSelect = this._onSelect.bind(this);
   }
@@ -75,10 +71,9 @@ class a extends o {
     super.connectedCallback(), this.root.addEventListener("click", this._onClick), this._syncOpenState();
   }
   disconnectedCallback() {
-    var e;
-    this.root.removeEventListener("click", this._onClick), (e = this._command) == null || e.removeEventListener("select", this._onSelect), this._unbindGlobalListeners();
+    this.root.removeEventListener("click", this._onClick), this._command?.removeEventListener("select", this._onSelect), this._unbindGlobalListeners();
     try {
-      i.unregister(this), i.releaseLock();
+      n.unregister(this), n.releaseLock();
     } catch {
     }
     super.disconnectedCallback();
@@ -94,8 +89,8 @@ class a extends o {
         return;
       }
       if (e === "query") {
-        const n = s || "";
-        this._command && this._command.query !== n && (this._command.query = n);
+        const i = s || "";
+        this._command && this._command.query !== i && (this._command.query = i);
         return;
       }
       e === "headless" && this.isConnected && this.requestRender();
@@ -108,46 +103,41 @@ class a extends o {
     this.removeAttribute("open");
   }
   get query() {
-    var t;
     const e = this.getAttribute("query");
-    return typeof e == "string" ? e : ((t = this._command) == null ? void 0 : t.query) ?? "";
+    return typeof e == "string" ? e : this._command?.query ?? "";
   }
   set query(e) {
     const t = e || "";
     t ? this.setAttribute("query", t) : this.removeAttribute("query"), this._command && this._command.query !== t && (this._command.query = t);
   }
   focusSearch() {
-    var e;
-    (e = this._command) == null || e.focusSearch();
+    this._command?.focusSearch();
   }
   clearQuery() {
     this.query = "";
   }
   _syncOpenState() {
-    var e;
     if (this.hasAttribute("open")) {
       this._bindGlobalListeners();
       try {
-        i.register(this), i.acquireLock();
+        n.register(this), n.acquireLock();
       } catch {
       }
       setTimeout(() => {
-        var t;
-        (t = this._command) == null || t.focusSearch();
+        this._command?.focusSearch();
       }, 0);
     } else {
-      this._unbindGlobalListeners(), (e = this._command) == null || e.clearQuery();
+      this._unbindGlobalListeners(), this._command?.clearQuery();
       try {
-        i.unregister(this), i.releaseLock();
+        n.unregister(this), n.releaseLock();
       } catch {
       }
     }
   }
   render() {
-    var n;
     const e = this.getAttribute("placeholder") || "Search commands...", t = this.getAttribute("empty-text") || "No commands found.";
     this.setContent(`
-      <style>${r}</style>
+      <style>${a}</style>
       <div class="overlay" part="overlay"></div>
       <section class="panel" part="panel" role="dialog" aria-modal="true" aria-label="Command palette">
         <ui-command class="command" part="command" placeholder="${e}" empty-text="${t}">
@@ -156,7 +146,7 @@ class a extends o {
       </section>
     `);
     const s = this.root.querySelector("ui-command");
-    this._command && this._command !== s && this._command.removeEventListener("select", this._onSelect), this._command = s, (n = this._command) == null || n.addEventListener("select", this._onSelect), this._command && this._command.query !== this.query && (this._command.query = this.query);
+    this._command && this._command !== s && this._command.removeEventListener("select", this._onSelect), this._command = s, this._command?.addEventListener("select", this._onSelect), this._command && this._command.query !== this.query && (this._command.query = this.query);
   }
   _bindGlobalListeners() {
     this._globalListenersBound || (document.addEventListener("keydown", this._onKeyDown), this._globalListenersBound = !0);
@@ -165,8 +155,7 @@ class a extends o {
     this._globalListenersBound && (document.removeEventListener("keydown", this._onKeyDown), this._globalListenersBound = !1);
   }
   _onClick(e) {
-    const t = e.target;
-    t != null && t.classList.contains("overlay") && this.closePalette();
+    e.target?.classList.contains("overlay") && this.closePalette();
   }
   _onSelect(e) {
     this.closePalette();
@@ -175,7 +164,7 @@ class a extends o {
     this.hasAttribute("open") && e.key === "Escape" && (e.preventDefault(), this.closePalette());
   }
 }
-typeof customElements < "u" && !customElements.get("ui-command-palette") && customElements.define("ui-command-palette", a);
+typeof customElements < "u" && !customElements.get("ui-command-palette") && customElements.define("ui-command-palette", r);
 export {
-  a as UICommandPalette
+  r as UICommandPalette
 };