@editora/ui-core 0.1.25 → 0.2.1

package/dist/combobox.esm.js

@@ -1,41 +1,46 @@
-import { E as k } from "./ElementBase-BeZT54Hj.mjs";
-import { e as L } from "./control-name-Bpj7F34X.mjs";
+import { E as L } from "./ElementBase-BeZT54Hj.mjs";
+import { s as k, O as F } from "./overlay-motion-BX3dPLay.mjs";
+import { e as $ } from "./control-name-Bpj7F34X.mjs";
 import { n as h } from "./collection-C7URGjEI.mjs";
-import { c as F } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as $ } from "./listbox-hMVOhKHC.mjs";
-const E = `
+import { c as E } from "./dismissable-layer-BmPIoK80.mjs";
+import { r as D } from "./listbox-hMVOhKHC.mjs";
+const I = `
   <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>
-`, D = `
+`, B = `
   <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>
-`, I = `
+`, S = `
+  ${F}
+
   :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-action-size: 24px;
+    --ui-combobox-height: var(--ui-control-height-2, 32px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-2, 12px);
+    --ui-combobox-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-combobox-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --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, #526175);
-    --ui-combobox-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-combobox-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --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-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-combobox-panel-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-combobox-border-color) 80%, transparent));
+    --ui-combobox-panel-shadow: var(--shadow-5, 0 14px 34px rgba(15, 23, 42, 0.16));
     --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, #15803d);
-    --ui-combobox-warning: var(--ui-color-warning, #b45309);
+    --ui-combobox-error: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-combobox-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
+    --ui-combobox-warning: var(--ui-color-warning-text, var(--ui-color-warning, #b45309));
     --ui-combobox-duration: 150ms;
     --ui-combobox-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
 
@@ -76,6 +81,7 @@ const E = `
   }
 
   .control {
+    box-sizing: border-box;
     position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto auto;
@@ -100,8 +106,8 @@ const E = `
   }
 
   .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);
+    border-color: var(--ui-color-line-strong, var(--ui-combobox-border-color));
+    box-shadow: none;
   }
 
   input {
@@ -112,23 +118,22 @@ const E = `
     outline: none;
     background: transparent;
     color: var(--ui-combobox-text);
-    padding: 9px var(--ui-combobox-padding-x);
-    font-size: 14px;
+    padding: 0 var(--ui-combobox-padding-x);
+    font-size: var(--ui-combobox-font-size);
     line-height: 1.4;
     font-family: inherit;
-    min-height: var(--ui-combobox-height);
+    min-height: calc(var(--ui-combobox-height) - 2px);
   }
 
   input::placeholder {
-    color: var(--ui-combobox-muted);
+    color: var(--ui-color-placeholder, 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);
+    border-color: var(--ui-ring-color, var(--ui-combobox-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-combobox-focus));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .icon-btn {
@@ -136,8 +141,9 @@ const E = `
     border: none;
     background: transparent;
     color: var(--ui-combobox-muted);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-combobox-action-size);
+    block-size: var(--ui-combobox-action-size);
+    margin-block: var(--ui-combobox-action-bleed, 0px);
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
@@ -185,26 +191,17 @@ const E = `
     left: 0;
     right: 0;
     border: var(--ui-combobox-panel-border);
-    border-radius: calc(var(--ui-combobox-radius) + 2px);
+    border-radius: calc(var(--ui-radius, 6px) + 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);
+  .panel[hidden] {
+    display: none;
   }
 
   .status-row {
@@ -342,12 +339,12 @@ const E = `
 
   :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);
+    box-shadow: 0 0 0 1px var(--ui-combobox-error), 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);
+    box-shadow: 0 0 0 1px var(--ui-combobox-success), var(--ui-combobox-shadow);
   }
 
   :host([disabled]) .control {
@@ -366,14 +363,21 @@ const E = `
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-combobox-height: 36px;
-    --ui-combobox-padding-x: 10px;
+    --ui-combobox-action-size: 24px;
+    --ui-combobox-action-bleed: -1px;
+    --ui-combobox-height: var(--ui-control-height-1, 24px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-1, 8px);
+    --ui-combobox-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-combobox-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-combobox-height: 48px;
-    --ui-combobox-padding-x: 13px;
+    --ui-combobox-action-size: 28px;
+    --ui-combobox-height: var(--ui-control-height-3, 40px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-3, 16px);
+    --ui-combobox-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-combobox-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([variant="surface"]) .control {
@@ -403,7 +407,7 @@ const E = `
 
   :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);
+    box-shadow: 0 0 0 1px var(--ui-combobox-error), var(--ui-combobox-shadow);
   }
 
   :host([validation="success"]) .control {
@@ -482,7 +486,7 @@ function _(d) {
   const t = String(d).toLowerCase();
   return t !== "false" && t !== "0";
 }
-class B extends k {
+class z extends L {
   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._optionsRefreshFrame = 0, this._autofocusFrame = 0, this._listStructureFingerprint = "", 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);
   }
@@ -588,16 +592,16 @@ class B extends k {
     return e === "loading" ? "Syncing results" : e === "error" ? "Unable to load results" : e === "success" ? "Results up to date" : "";
   }
   _emitOpenState(t, e, i) {
-    const r = { open: t, previousOpen: e, source: i };
+    const s = { open: t, previousOpen: e, source: i };
     this.dispatchEvent(
       new CustomEvent(t ? "open" : "close", {
-        detail: r,
+        detail: s,
         bubbles: !0,
         composed: !0
       })
     ), this.dispatchEvent(
       new CustomEvent(t ? "ui-open" : "ui-close", {
-        detail: r,
+        detail: s,
         bubbles: !0,
         composed: !0
       })
@@ -605,9 +609,9 @@ class B extends k {
   }
   _attachFormRegistration() {
     try {
-      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,
+      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), r = this.getAttribute("name");
+      s && typeof s.registerField == "function" && r && (this._formUnregister = s.registerField(r, {
+        name: r,
         getValue: () => this.value,
         setValue: (o) => {
           this.value = o;
@@ -634,8 +638,8 @@ class B extends k {
     const t = Array.from(
       this.querySelectorAll("option,[data-combobox-option]")
     ), e = /* @__PURE__ */ new Set();
-    return t.map((i, r) => {
-      const s = i.tagName.toLowerCase() === "option", o = i, a = 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 || a).trim(), b = (i.getAttribute("description") || i.getAttribute("data-description") || "").trim(), u = s ? o.disabled : _(i.getAttribute("disabled")), c = a.trim();
+    return t.map((i, s) => {
+      const r = i.tagName.toLowerCase() === "option", o = i, a = 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 || a).trim(), b = (i.getAttribute("description") || i.getAttribute("data-description") || "").trim(), u = r ? o.disabled : _(i.getAttribute("disabled")), c = a.trim();
       if (!c && !l) return null;
       const p = `${c}::${l}`;
       return e.has(p) ? null : (e.add(p), {
@@ -643,7 +647,7 @@ class B extends k {
         label: l,
         description: b,
         disabled: u,
-        sourceIndex: r
+        sourceIndex: s
       });
     }).filter((i) => !!i);
   }
@@ -657,23 +661,23 @@ class B extends k {
     ) || null;
   }
   _rebuildFiltered(t) {
-    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((a) => a.sourceIndex === r.sourceIndex);
+    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?.preserveHighlight && s) {
+      const o = this._filtered.findIndex((a) => a.sourceIndex === s.sourceIndex);
       if (o >= 0 && !this._filtered[o].disabled) {
         this._highlightedIndex = o;
         return;
       }
     }
-    const s = this._findOptionByValue(this.value);
-    if (s) {
-      const o = this._filtered.findIndex((a) => a.sourceIndex === s.sourceIndex);
+    const r = this._findOptionByValue(this.value);
+    if (r) {
+      const o = this._filtered.findIndex((a) => a.sourceIndex === r.sourceIndex);
       if (o >= 0 && !this._filtered[o].disabled) {
         this._highlightedIndex = o;
         return;
       }
     }
-    this._highlightedIndex = $(this._filtered, {
+    this._highlightedIndex = D(this._filtered, {
       getDisabled: (o) => o.disabled
     });
   }
@@ -699,8 +703,8 @@ class B extends k {
       this._panel.innerHTML = `${t}<div class="empty" part="empty">${n(e)}</div>`, this._listStructureFingerprint = i, this._panel.refresh(), this._panel.clearActive(), this._syncActiveDescendant();
       return;
     }
-    const r = this.value, s = this._filtered.map((o, a) => {
-      const l = o.value === r, b = a === this._highlightedIndex, u = o.disabled;
+    const s = this.value, r = this._filtered.map((o, a) => {
+      const l = o.value === s, b = a === this._highlightedIndex, u = o.disabled;
       return `
           <button
             type="button"
@@ -721,7 +725,7 @@ class B extends k {
           </button>
         `;
     }).join("");
-    this._panel.innerHTML = `${t}${s}`, this._listStructureFingerprint = i, this._panel.refresh(), this._syncActiveDescendant(), this._scrollHighlightedIntoView();
+    this._panel.innerHTML = `${t}${r}`, this._listStructureFingerprint = i, this._panel.refresh(), this._syncActiveDescendant(), this._scrollHighlightedIntoView();
   }
   _syncRenderedListState() {
     if (!this._panel) return !1;
@@ -730,11 +734,11 @@ class B extends k {
     const t = Array.from(this._panel.querySelectorAll(".option[data-option-index]"));
     if (t.length !== this._filtered.length) return !1;
     const e = this.value;
-    return t.forEach((i, r) => {
-      const s = this._filtered[r];
-      if (!s) return;
-      const o = s.value === e, a = r === this._highlightedIndex;
-      i.setAttribute("aria-selected", o ? "true" : "false"), i.setAttribute("aria-disabled", s.disabled ? "true" : "false"), i.setAttribute("data-highlighted", a ? "true" : "false"), i.setAttribute("data-selected", o ? "true" : "false"), i.disabled = s.disabled;
+    return t.forEach((i, s) => {
+      const r = this._filtered[s];
+      if (!r) return;
+      const o = r.value === e, a = s === this._highlightedIndex;
+      i.setAttribute("aria-selected", o ? "true" : "false"), i.setAttribute("aria-disabled", r.disabled ? "true" : "false"), i.setAttribute("data-highlighted", a ? "true" : "false"), i.setAttribute("data-selected", o ? "true" : "false"), i.disabled = r.disabled;
     }), this._syncActiveDescendant(), this._scrollHighlightedIntoView(), !0;
   }
   _renderStateRow() {
@@ -775,7 +779,7 @@ class B extends k {
   _applyOpenState() {
     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(), 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");
+    t ? (this._bindGlobalListeners(), this._panel.setAttribute("data-open", "true"), k(this._panel, !0, "bottom"), 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, k(this._panel, !1, "bottom"), 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);
@@ -784,7 +788,7 @@ class B extends k {
     this._globalListenersBound && (this._globalListenersBound = !1);
   }
   _syncDismissableLayer() {
-    !this.open || !this._panel || (this._dismissableLayer?.destroy(), this._dismissableLayer = F({
+    !this.open || !this._panel || (this._dismissableLayer?.destroy(), this._dismissableLayer = E({
       node: this._panel,
       trigger: this._control,
       closeOnEscape: !1,
@@ -840,18 +844,18 @@ class B extends k {
       scroll: !0
     }) || null;
     if (!i) return;
-    const r = Number(i.getAttribute("data-option-index") || "-1");
-    r < 0 || (this._highlightedIndex = r, this._renderList());
+    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 = _(e), r = this._isReadonly(), s = this._state(), o = s === "loading", a = 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 = (this.getAttribute("aria-label") || "").trim(), v = !!(c || this.querySelector('[slot="description"]')), y = `${this._uid}-error`, w = L(this, this._uid), A = [v ? `${this._uid}-description` : "", m ? y : "", w.id].filter(Boolean).join(" ");
+    const t = this.hasAttribute("headless"), e = this.getAttribute("disabled"), i = _(e), s = this._isReadonly(), r = this._state(), o = r === "loading", a = 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") || "" || (r === "error" ? this._stateText() || "Unable to load options." : ""), m = this.getAttribute("validation") === "error" || r === "error" || !!x, f = !!(u || this.querySelector('[slot="label"]')), v = (this.getAttribute("aria-label") || "").trim(), g = !!(c || this.querySelector('[slot="description"]')), y = `${this._uid}-error`, w = $(this, this._uid), A = [g ? `${this._uid}-description` : "", m ? y : "", w.id].filter(Boolean).join(" ");
     if (this._options = this._readOptions(), !this._query) {
       const C = this._findOptionByValue(this.value);
       this._query = C ? C.label : this.value;
     }
     this._rebuildFiltered({ preserveHighlight: !1 }), this.setContent(`
-      ${t ? "" : `<style>${I}</style>`}
-      ${f || v ? `
+      ${t ? "" : `<style>${S}</style>`}
+      ${f || g ? `
         <div class="label-row">
           <label class="label" part="label" id="${this._uid}-label"><slot name="label">${n(u)}</slot></label>
           <div class="description" part="description" id="${this._uid}-description"><slot name="description">${n(c)}</slot></div>
@@ -859,7 +863,7 @@ class B extends k {
       ` : ""}
 
       <div class="root" part="root">
-        <div class="control" part="control" data-focused="${this._isFocused ? "true" : "false"}" data-state="${n(s)}">
+        <div class="control" part="control" data-focused="${this._isFocused ? "true" : "false"}" data-state="${n(r)}">
           <input
             id="${this._uid}-input"
             part="input"
@@ -868,21 +872,21 @@ class B extends k {
             aria-autocomplete="list"
             aria-expanded="${this.open ? "true" : "false"}"
             aria-controls="${this._uid}-listbox"
-            ${f ? `aria-labelledby="${this._uid}-label"` : g ? `aria-label="${n(g)}"` : ""}
+            ${f ? `aria-labelledby="${this._uid}-label"` : v ? `aria-label="${n(v)}"` : ""}
             ${A ? `aria-describedby="${A}"` : ""}
             ${m ? 'aria-invalid="true"' : ""}
             aria-busy="${o ? "true" : "false"}"
             value="${n(this._query)}"
             placeholder="${n(a)}"
             ${i ? "disabled" : ""}
-            ${r ? "readonly" : ""}
+            ${s ? "readonly" : ""}
             ${b ? "required" : ""}
             ${l ? `maxlength="${n(l)}"` : ""}
           />
-          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${r ? "disabled" : ""}>${E}</button>
-          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open ? "true" : "false"}" aria-label="Toggle options">${D}</button>
+          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${s ? "disabled" : ""}>${I}</button>
+          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open ? "true" : "false"}" aria-label="Toggle options">${B}</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="${n(s)}" ${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="${n(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}" ${m ? "" : "hidden"}>${n(x)}</div>
@@ -1023,13 +1027,13 @@ class B extends k {
     if (this._isReadonly()) return;
     const i = t.target.closest("[data-option-index]");
     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];
+    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", B);
+typeof customElements < "u" && !customElements.get("ui-combobox") && customElements.define("ui-combobox", z);
 export {
-  B as UICombobox
+  z as UICombobox
 };

package/dist/command-palette.cjs.js

@@ -38,6 +38,7 @@
 
   .command {
     max-height: min(76vh, 720px);
+    --ui-command-shadow: var(--shadow-6, 0 24px 60px rgba(2, 6, 23, 0.28));
   }
 
   :host([headless]) .overlay,

package/dist/command-palette.esm.js

@@ -41,6 +41,7 @@ const a = `
 
   .command {
     max-height: min(76vh, 720px);
+    --ui-command-shadow: var(--shadow-6, 0 24px 60px rgba(2, 6, 23, 0.28));
   }
 
   :host([headless]) .overlay,

package/dist/command.cjs.js

@@ -5,13 +5,13 @@
     min-inline-size: 0;
     min-block-size: 0;
     color-scheme: light dark;
-    --ui-command-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-command-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-command-text: var(--ui-color-text, #0f172a);
     --ui-command-muted: var(--ui-color-muted, #526175);
-    --ui-command-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-command-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent));
     --ui-command-accent: var(--ui-color-primary, #2563eb);
     --ui-command-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-command-radius: 16px;
+    --ui-command-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-command-shadow: none;
     border: var(--ui-command-border);
     border-radius: var(--ui-command-radius);
@@ -27,15 +27,15 @@
     background: transparent;
     width: 100%;
     box-sizing: border-box;
-    padding: 14px 16px;
-    font-size: 15px;
-    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
+    padding: 12px 16px;
+    font-size: var(--ui-control-font-size-2, 14px);
+    border-bottom: 1px solid var(--ui-color-line-subtle, rgba(15, 23, 42, 0.1));
     color: inherit;
   }
 
   .search:focus-visible {
-    outline: 2px solid var(--ui-command-focus);
-    outline-offset: -2px;
+    outline: none;
+    box-shadow: inset 0 -2px 0 var(--ui-ring-color, var(--ui-command-focus));
   }
 
   .list {
@@ -48,9 +48,16 @@
 
   ::slotted([slot="command"]) {
     display: block;
-    border-radius: 10px;
-    padding: 10px 10px;
-    font-size: 13px;
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    font-family: inherit;
+    text-align: start;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    padding: 6px 10px;
+    font-size: var(--ui-control-font-size-2, 14px);
     color: var(--ui-command-text);
     line-height: 1.35;
     cursor: pointer;
@@ -62,7 +69,18 @@
   ::slotted([slot="command"]:hover),
   ::slotted([slot="command"]:focus-visible),
   ::slotted([slot="command"][data-active="true"]) {
-    background: color-mix(in srgb, var(--ui-command-accent) 14%, transparent);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-command-accent) 14%, transparent));
+  }
+
+  ::slotted([slot="command"][disabled]),
+  ::slotted([slot="command"][aria-disabled="true"]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  ::slotted([slot="command"][disabled]:hover),
+  ::slotted([slot="command"][aria-disabled="true"]:hover) {
+    background: transparent;
   }
 
   ::slotted([slot="command"][hidden]) {
@@ -120,11 +138,11 @@
       border-color: Highlight;
     }
   }
-`;function n(s){return s.trim().toLowerCase()}function u(s){return n(s.getAttribute("aria-label")||s.getAttribute("data-label")||[s.getAttribute("data-value")||"",s.getAttribute("data-keywords")||"",s.textContent||""].join(" "))}function r(s){if(!s)return[];const t=s.assignedElements({flatten:!0}),e=[];for(const i of t){if(i instanceof HTMLSlotElement){e.push(...r(i));continue}i instanceof HTMLElement&&i.getAttribute("slot")==="command"&&e.push(i)}return e}class a extends l.ElementBase{constructor(){super(),this._commands=[],this._visible=[],this._active=-1,this._input=null,this._listbox=null,this._slot=null,this._query="",this._onSlotChange=this._onSlotChange.bind(this),this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onClick=this._onClick.bind(this)}static get observedAttributes(){return["placeholder","empty-text"]}get query(){return this._query}set query(t){const e=t||"";if(e===this._query)return;const i=this._query;this._query=e,this._input&&(this._input.value=e),this._applyFilter(),this.dispatchEvent(new CustomEvent("query-change",{detail:{value:e,previousValue:i},bubbles:!0,composed:!0}))}focusSearch(){this._input?.focus()}clearQuery(){this.query=""}refreshCommands(){this._collectCommands(),this._applyFilter()}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this._syncSlotListener(),this.refreshCommands()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this._input?.removeEventListener("input",this._onInput),this._input?.removeEventListener("keydown",this._onKeyDown),this._slot&&this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null,this._input=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="placeholder"){this._input&&(this._input.placeholder=i||"Search commands...");return}if(t==="empty-text"){const o=this.root.querySelector(".empty");o&&(o.textContent=i||"No commands found.")}}}render(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("keydown",this._onKeyDown));const t=this.getAttribute("placeholder")||"Search commands...",e=this.getAttribute("empty-text")||"No commands found.";this.setContent(`
+`;function n(o){return o.trim().toLowerCase()}function d(o){return n(o.getAttribute("aria-label")||o.getAttribute("data-label")||[o.getAttribute("data-value")||"",o.getAttribute("data-keywords")||"",o.textContent||""].join(" "))}function r(o){if(!o)return[];const t=o.assignedElements({flatten:!0}),e=[];for(const i of t){if(i instanceof HTMLSlotElement){e.push(...r(i));continue}i instanceof HTMLElement&&i.getAttribute("slot")==="command"&&e.push(i)}return e}class a extends l.ElementBase{constructor(){super(),this._commands=[],this._visible=[],this._active=-1,this._input=null,this._listbox=null,this._slot=null,this._query="",this._onSlotChange=this._onSlotChange.bind(this),this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onClick=this._onClick.bind(this)}static get observedAttributes(){return["placeholder","empty-text"]}get query(){return this._query}set query(t){const e=t||"";if(e===this._query)return;const i=this._query;this._query=e,this._input&&(this._input.value=e),this._applyFilter(),this.dispatchEvent(new CustomEvent("query-change",{detail:{value:e,previousValue:i},bubbles:!0,composed:!0}))}focusSearch(){this._input?.focus()}clearQuery(){this.query=""}refreshCommands(){this._collectCommands(),this._applyFilter()}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this._syncSlotListener(),this.refreshCommands()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this._input?.removeEventListener("input",this._onInput),this._input?.removeEventListener("keydown",this._onKeyDown),this._slot&&this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null,this._input=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="placeholder"){this._input&&(this._input.placeholder=i||"Search commands...");return}if(t==="empty-text"){const s=this.root.querySelector(".empty");s&&(s.textContent=i||"No commands found.")}}}render(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("keydown",this._onKeyDown));const t=this.getAttribute("placeholder")||"Search commands...",e=this.getAttribute("empty-text")||"No commands found.";this.setContent(`
       <style>${c}</style>
       <input class="search" part="search" type="text" placeholder="${t}" />
       <ui-listbox class="list" part="list" role="listbox" aria-label="Command options" item-selector="[slot=&quot;command&quot;]" item-role="option" active-attribute="data-active">
         <slot name="command"></slot>
         <div class="empty" part="empty" hidden>${e}</div>
       </ui-listbox>
-    `),this._input=this.root.querySelector(".search"),this._listbox=this.root.querySelector("ui-listbox"),this._listbox&&(this._listbox.container=this),this._input&&(this._input.value=this._query,this._input.addEventListener("input",this._onInput),this._input.addEventListener("keydown",this._onKeyDown)),this._syncSlotListener(),this.refreshCommands()}_syncSlotListener(){const t=this.root.querySelector('slot[name="command"]');this._slot&&this._slot!==t&&this._slot.removeEventListener("slotchange",this._onSlotChange),t&&this._slot!==t&&t.addEventListener("slotchange",this._onSlotChange),this._slot=t}_onSlotChange(){this.refreshCommands()}_collectCommands(){this._commands=r(this._slot),this._commands.forEach((t,e)=>{t.setAttribute("data-index",String(e))}),this._listbox&&(this._listbox.items=this._commands),this._listbox?.refresh()}_applyFilter(){const t=n(this._query);this._visible=this._commands.filter(i=>!t||u(i).includes(t)),this._commands.forEach(i=>{this._visible.includes(i)?i.removeAttribute("hidden"):i.setAttribute("hidden","")}),this._visible.length>0?(this._active=Math.max(0,Math.min(this._active,this._visible.length-1)),this._listbox?.setActiveItem(this._visible[this._active],{focus:!1,owner:this._input,scroll:!0})):(this._active=-1,this._listbox?.clearActive(),this._input&&this._input.removeAttribute("aria-activedescendant"));const e=this.root.querySelector(".empty");e&&(this._visible.length===0?e.removeAttribute("hidden"):e.setAttribute("hidden",""))}_selectCommand(t){if(!t)return;const e=t.getAttribute("data-index"),i=e==null?-1:Number(e);this.dispatchEvent(new CustomEvent("select",{detail:{index:i,item:t,label:t.getAttribute("data-label")||(t.textContent||"").trim(),value:t.getAttribute("data-value")||void 0},bubbles:!0,composed:!0}))}_move(t){if(this._visible.length===0)return;const e=this._active>=0?this._visible[this._active]:null,i=this._listbox?.move(t,{current:e,focus:!1,owner:this._input,scroll:!0})||null;i&&(this._active=this._visible.indexOf(i))}_onInput(t){this.query=t.target.value||""}_onKeyDown(t){if(t.key==="ArrowDown"){t.preventDefault(),this._move(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._move(-1);return}if(t.key==="Home"){t.preventDefault();const e=this._listbox?.focusBoundary("first",{focus:!1,owner:this._input,scroll:!0})||null;e&&(this._active=this._visible.indexOf(e));return}if(t.key==="End"){t.preventDefault();const e=this._listbox?.focusBoundary("last",{focus:!1,owner:this._input,scroll:!0})||null;e&&(this._active=this._visible.indexOf(e));return}t.key==="Enter"&&(t.preventDefault(),this._selectCommand(this._active>=0?this._visible[this._active]:null))}_onClick(t){const e=t.composedPath(),i=this._commands.find(o=>e.includes(o));!i||i.hasAttribute("hidden")||this._selectCommand(i)}}typeof customElements<"u"&&!customElements.get("ui-command")&&customElements.define("ui-command",a);exports.UICommand=a;
+    `),this._input=this.root.querySelector(".search"),this._listbox=this.root.querySelector("ui-listbox"),this._listbox&&(this._listbox.container=this),this._input&&(this._input.value=this._query,this._input.addEventListener("input",this._onInput),this._input.addEventListener("keydown",this._onKeyDown)),this._syncSlotListener(),this.refreshCommands()}_syncSlotListener(){const t=this.root.querySelector('slot[name="command"]');this._slot&&this._slot!==t&&this._slot.removeEventListener("slotchange",this._onSlotChange),t&&this._slot!==t&&t.addEventListener("slotchange",this._onSlotChange),this._slot=t}_onSlotChange(){this.refreshCommands()}_collectCommands(){this._commands=r(this._slot),this._commands.forEach((t,e)=>{t.setAttribute("data-index",String(e))}),this._listbox&&(this._listbox.items=this._commands),this._listbox?.refresh()}_applyFilter(){const t=n(this._query);this._visible=this._commands.filter(i=>!t||d(i).includes(t)),this._commands.forEach(i=>{this._visible.includes(i)?i.removeAttribute("hidden"):i.setAttribute("hidden","")}),this._visible.length>0?(this._active=Math.max(0,Math.min(this._active,this._visible.length-1)),this._listbox?.setActiveItem(this._visible[this._active],{focus:!1,owner:this._input,scroll:!0})):(this._active=-1,this._listbox?.clearActive(),this._input&&this._input.removeAttribute("aria-activedescendant"));const e=this.root.querySelector(".empty");e&&(this._visible.length===0?e.removeAttribute("hidden"):e.setAttribute("hidden",""))}_selectCommand(t){if(!t)return;const e=t.getAttribute("data-index"),i=e==null?-1:Number(e);this.dispatchEvent(new CustomEvent("select",{detail:{index:i,item:t,label:t.getAttribute("data-label")||(t.textContent||"").trim(),value:t.getAttribute("data-value")||void 0},bubbles:!0,composed:!0}))}_move(t){if(this._visible.length===0)return;const e=this._active>=0?this._visible[this._active]:null,i=this._listbox?.move(t,{current:e,focus:!1,owner:this._input,scroll:!0})||null;i&&(this._active=this._visible.indexOf(i))}_onInput(t){this.query=t.target.value||""}_onKeyDown(t){if(t.key==="ArrowDown"){t.preventDefault(),this._move(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._move(-1);return}if(t.key==="Home"){t.preventDefault();const e=this._listbox?.focusBoundary("first",{focus:!1,owner:this._input,scroll:!0})||null;e&&(this._active=this._visible.indexOf(e));return}if(t.key==="End"){t.preventDefault();const e=this._listbox?.focusBoundary("last",{focus:!1,owner:this._input,scroll:!0})||null;e&&(this._active=this._visible.indexOf(e));return}t.key==="Enter"&&(t.preventDefault(),this._selectCommand(this._active>=0?this._visible[this._active]:null))}_onClick(t){const e=t.composedPath(),i=this._commands.find(s=>e.includes(s));!i||i.hasAttribute("hidden")||this._selectCommand(i)}}typeof customElements<"u"&&!customElements.get("ui-command")&&customElements.define("ui-command",a);exports.UICommand=a;