@editora/ui-core 0.1.21 → 0.1.23

package/dist/color-picker.esm.js

@@ -1,9 +1,9 @@
-import { E as q } from "./ElementBase-YlTLMsGk.mjs";
-import { r as O, e as F, l as U, i as A, s as N, c as V } from "./date-time-utils-y1N2gvG2.mjs";
+import { E as q } from "./ElementBase-BeZT54Hj.mjs";
+import { r as O, e as F, l as U, i as A, s as N, c as V } from "./date-time-utils-BTlxnz5j.mjs";
 function g(s, t, e) {
   return Math.max(t, Math.min(e, s));
 }
-function _(s, t = 3) {
+function m(s, t = 3) {
   const e = 10 ** t;
   return Math.round(s * e) / e;
 }
@@ -20,7 +20,7 @@ function D(s) {
   const e = Number(t);
   return Number.isFinite(e) ? g(e, 0, 1) : null;
 }
-function P(s) {
+function C(s) {
   const t = s.trim();
   if (!t) return null;
   if (t.endsWith("%")) {
@@ -98,7 +98,7 @@ function G(s) {
   if (!t) return null;
   const e = T(t[1]);
   if (!e || e.channels.length < 3) return null;
-  const r = P(e.channels[0]), i = P(e.channels[1]), a = P(e.channels[2]);
+  const r = C(e.channels[0]), i = C(e.channels[1]), a = C(e.channels[2]);
   if (r == null || i == null || a == null) return null;
   const n = e.alpha != null ? D(e.alpha) : 1;
   return n == null ? null : b({ r, g: i, b: a, a: n });
@@ -118,7 +118,7 @@ function b(s) {
     r: S(s.r),
     g: S(s.g),
     b: S(s.b),
-    a: _(g(s.a, 0, 1), 4)
+    a: m(g(s.a, 0, 1), 4)
   };
 }
 function f(s) {
@@ -131,21 +131,21 @@ function Y(s, t = !1) {
 }
 function j(s, t = !0) {
   const e = b(s);
-  return !t || e.a >= 1 ? `rgb(${e.r} ${e.g} ${e.b})` : `rgb(${e.r} ${e.g} ${e.b} / ${_(e.a, 3)})`;
+  return !t || e.a >= 1 ? `rgb(${e.r} ${e.g} ${e.b})` : `rgb(${e.r} ${e.g} ${e.b} / ${m(e.a, 3)})`;
 }
 function J(s, t = !0) {
-  const e = Math.round(y(s.h)), r = Math.round(g(s.s, 0, 100)), i = Math.round(g(s.l, 0, 100)), a = _(g(s.a, 0, 1), 3);
+  const e = Math.round(y(s.h)), r = Math.round(g(s.s, 0, 100)), i = Math.round(g(s.l, 0, 100)), a = m(g(s.a, 0, 1), 3);
   return !t || a >= 1 ? `hsl(${e} ${r}% ${i}%)` : `hsl(${e} ${r}% ${i}% / ${a})`;
 }
 function z(s) {
   const t = b(s), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), o = a - n;
   let l = 0;
   o !== 0 && (a === e ? l = (r - i) / o % 6 : a === r ? l = (i - e) / o + 2 : l = (e - r) / o + 4, l *= 60, l < 0 && (l += 360));
-  const c = a === 0 ? 0 : o / a * 100, d = a * 100;
+  const c = a === 0 ? 0 : o / a * 100, p = a * 100;
   return {
-    h: _(l, 3),
-    s: _(c, 3),
-    v: _(d, 3),
+    h: m(l, 3),
+    s: m(c, 3),
+    v: m(p, 3),
     a: t.a
   };
 }
@@ -159,13 +159,13 @@ function Q(s) {
     a: s.a
   });
 }
-function I(s) {
+function M(s) {
   const t = b(s), e = t.r / 255, r = t.g / 255, i = t.b / 255, a = Math.max(e, r, i), n = Math.min(e, r, i), o = a - n, l = (a + n) / 2;
-  let c = 0, d = 0;
-  return o !== 0 && (d = o / (1 - Math.abs(2 * l - 1)), a === e ? c = (r - i) / o % 6 : a === r ? c = (i - e) / o + 2 : c = (e - r) / o + 4, c *= 60, c < 0 && (c += 360)), {
-    h: _(c, 3),
-    s: _(d * 100, 3),
-    l: _(l * 100, 3),
+  let c = 0, p = 0;
+  return o !== 0 && (p = o / (1 - Math.abs(2 * l - 1)), a === e ? c = (r - i) / o % 6 : a === r ? c = (i - e) / o + 2 : c = (e - r) / o + 4, c *= 60, c < 0 && (c += 360)), {
+    h: m(c, 3),
+    s: m(p * 100, 3),
+    l: m(l * 100, 3),
     a: t.a
   };
 }
@@ -179,16 +179,16 @@ function $(s) {
     a: s.a
   });
 }
-function m(s, t) {
+function _(s, t) {
   return Y(s, t).toUpperCase();
 }
 function w(s, t) {
   return j(s, t);
 }
 function Z(s, t) {
-  return J(I(s), t);
+  return J(M(s), t);
 }
-const C = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
+const I = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
   <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>
@@ -197,10 +197,10 @@ const C = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     --ui-cp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-cp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-cp-text: var(--ui-color-text, #0f172a);
-    --ui-cp-muted: var(--ui-color-muted, #64748b);
+    --ui-cp-muted: var(--ui-color-muted, #526175);
     --ui-cp-accent: var(--ui-color-primary, #2563eb);
-    --ui-cp-success: var(--ui-color-success, #16a34a);
-    --ui-cp-warning: var(--ui-color-warning, #d97706);
+    --ui-cp-success: var(--ui-color-success, #15803d);
+    --ui-cp-warning: var(--ui-color-warning, #b45309);
     --ui-cp-danger: var(--ui-color-danger, #dc2626);
     --ui-cp-radius: 14px;
     --ui-cp-shadow: none;
@@ -509,11 +509,15 @@ const C = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
   }
 
   .sv:focus-visible,
-  .slider:focus-visible {
+  .slider:focus-visible::after {
     outline: 2px solid color-mix(in srgb, var(--ui-cp-accent) 64%, transparent);
     outline-offset: 1px;
   }
 
+  .slider:focus-visible {
+    outline: none;
+  }
+
   .thumb {
     position: absolute;
     inline-size: 12px;
@@ -528,19 +532,35 @@ const C = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
     transform: translate3d(0, 0, 0);
   }
 
+  /* The track is 12px, but the element is 24px tall (WCAG 2.5.8): the padding is the extra hit area,
+     the track is painted in the content box and the ring is drawn by ::after over just the track. */
   .slider {
     position: relative;
+    box-sizing: content-box;
     block-size: 12px;
+    padding-block: 6px;
     border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
+    background-clip: content-box;
+    background-origin: content-box;
     cursor: pointer;
     touch-action: none;
     overflow: visible;
+  }
+
+  .slider::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    inset-block: 6px;
+    box-sizing: border-box;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-cp-border) 82%, transparent);
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-cp-border) 40%, transparent);
+    pointer-events: none;
   }
 
   .slider.hue {
-    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+    background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
   }
 
   .slider.alpha {
@@ -888,7 +908,7 @@ function k(s) {
 }
 class rt extends q {
   constructor() {
-    super(), this._syncing = !1, this._initialized = !1, this._rgba = b(f(C) || { r: 37, g: 99, b: 235, a: 1 }), this._hsva = z(this._rgba), this._format = "hex", this._open = !1, this._error = "", this._presets = [], this._recentColors = [], this._panelCache = /* @__PURE__ */ new WeakMap(), this._overlay = null, this._overlayRoot = null, this._releaseScrollLock = null, this._restoreFocusEl = null, this._isSheetOpen = !1, this._dragTarget = null, this._dragPointerId = -1, this._dragRect = null, this._dragX = 0, this._dragY = 0, this._dragRaf = 0, this._dragChanged = !1, this._dragSource = "drag", this._renderingSwatches = !1, this._scheduleOverlayPosition = O(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onPanelClick(t, "root"), this._onRootInputBound = (t) => this._onPanelInput(t, "root"), this._onRootChangeBound = (t) => this._onPanelChange(t, "root"), this._onRootKeyDownBound = (t) => this._onPanelKeyDown(t, "root"), this._onRootPointerDownBound = (t) => this._onPanelPointerDown(t, "root"), this._onRootPointerMoveBound = (t) => this._onPanelPointerMove(t), this._onRootPointerUpBound = (t) => this._onPanelPointerUp(t), this._onRootPointerCancelBound = (t) => this._onPanelPointerCancel(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._scheduleOverlayPosition.run(), this._onWindowScrollBound = (t) => {
+    super(), this._syncing = !1, this._initialized = !1, this._rgba = b(f(I) || { r: 37, g: 99, b: 235, a: 1 }), this._hsva = z(this._rgba), this._format = "hex", this._open = !1, this._error = "", this._presets = [], this._recentColors = [], this._panelCache = /* @__PURE__ */ new WeakMap(), this._overlay = null, this._overlayRoot = null, this._releaseScrollLock = null, this._restoreFocusEl = null, this._isSheetOpen = !1, this._dragTarget = null, this._dragPointerId = -1, this._dragRect = null, this._dragX = 0, this._dragY = 0, this._dragRaf = 0, this._dragChanged = !1, this._dragSource = "drag", this._renderingSwatches = !1, this._scheduleOverlayPosition = O(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onPanelClick(t, "root"), this._onRootInputBound = (t) => this._onPanelInput(t, "root"), this._onRootChangeBound = (t) => this._onPanelChange(t, "root"), this._onRootKeyDownBound = (t) => this._onPanelKeyDown(t, "root"), this._onRootPointerDownBound = (t) => this._onPanelPointerDown(t, "root"), this._onRootPointerMoveBound = (t) => this._onPanelPointerMove(t), this._onRootPointerUpBound = (t) => this._onPanelPointerUp(t), this._onRootPointerCancelBound = (t) => this._onPanelPointerCancel(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._scheduleOverlayPosition.run(), this._onWindowScrollBound = (t) => {
       F(t, [this._overlay]) || this._scheduleOverlayPosition.run();
     }, this._applyValueAttribute(!1), this._applyFormatAttribute(), this._open = this.hasAttribute("open"), this._parsePresetsAttribute();
   }
@@ -984,7 +1004,7 @@ class rt extends q {
   getColor() {
     const t = b(this._rgba);
     return {
-      hex: m(t, this._alphaEnabled()),
+      hex: _(t, this._alphaEnabled()),
       rgba: t,
       hsva: { ...this._hsva }
     };
@@ -1198,7 +1218,7 @@ class rt extends q {
   _applyValueAttribute(t) {
     const e = this.getAttribute("value");
     if (!e) {
-      this._applyRgba(f(C) || this._rgba, !1);
+      this._applyRgba(f(I) || this._rgba, !1);
       return;
     }
     const r = f(e);
@@ -1225,7 +1245,7 @@ class rt extends q {
         if (typeof i != "string") continue;
         const a = f(i);
         if (!a) continue;
-        const n = m(this._normalizeByAlpha(a), this._alphaEnabled());
+        const n = _(this._normalizeByAlpha(a), this._alphaEnabled());
         r.includes(n) || r.push(n);
       }
       this._presets = r;
@@ -1244,7 +1264,7 @@ class rt extends q {
         if (!t) return;
         const e = JSON.parse(t);
         if (!Array.isArray(e)) return;
-        this._recentColors = e.filter((r) => typeof r == "string").map((r) => f(r)).filter((r) => !!r).map((r) => m(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
+        this._recentColors = e.filter((r) => typeof r == "string").map((r) => f(r)).filter((r) => !!r).map((r) => _(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
       } catch {
         this._recentColors = [];
       }
@@ -1269,17 +1289,17 @@ class rt extends q {
     };
   }
   _serializeValue(t = this._format) {
-    return t === "rgb" ? w(this._rgba, this._alphaEnabled()) : t === "hsl" ? Z(this._rgba, this._alphaEnabled()) : m(this._rgba, this._alphaEnabled());
+    return t === "rgb" ? w(this._rgba, this._alphaEnabled()) : t === "hsl" ? Z(this._rgba, this._alphaEnabled()) : _(this._rgba, this._alphaEnabled());
   }
   _currentHex() {
-    return m(this._rgba, this._alphaEnabled());
+    return _(this._rgba, this._alphaEnabled());
   }
   _eventDetail(t) {
     return {
       value: this._serializeValue(),
       hex: this._currentHex(),
       rgba: { ...this._rgba },
-      hsla: I(this._rgba),
+      hsla: M(this._rgba),
       source: t
     };
   }
@@ -1459,18 +1479,18 @@ class rt extends q {
     return this._isPopoverMode() && this._open && this._overlayRoot ? this._overlayRoot.querySelector('[data-cp-panel="overlay"]') : this.root.querySelector('[data-cp-panel="inline"]');
   }
   _updateUI(t, e = !1) {
-    const r = this.root.querySelector('[data-role="trigger-wrap"]'), i = this.root.querySelector(".trigger"), a = this.root.querySelector('[data-role="trigger-value"]'), n = this.root.querySelector('[data-role="trigger-preview"]'), o = this.root.querySelector('[data-role="inline-panel"]'), l = this._isPopoverMode(), c = this._state(), d = this._tone(), v = c === "loading", h = this._isDisabled(), x = this._isReadonly(), M = this._serializeValue() || this._placeholder();
-    r && (r.hidden = !l), i && (i.disabled = h || v, i.dataset.state = c, i.dataset.tone = d, i.setAttribute("aria-expanded", l && this._open ? "true" : "false"), this._applyAria(i)), a && (a.textContent = M), n && (n.style.background = w(this._rgba, !0)), o && (o.hidden = l), this._forEachPanel((p) => this._updatePanel(p, { skipSwatches: t, disabled: h, readonly: x, loading: v, state: c, tone: d, modePopover: l, liveOnly: e }));
+    const r = this.root.querySelector('[data-role="trigger-wrap"]'), i = this.root.querySelector(".trigger"), a = this.root.querySelector('[data-role="trigger-value"]'), n = this.root.querySelector('[data-role="trigger-preview"]'), o = this.root.querySelector('[data-role="inline-panel"]'), l = this._isPopoverMode(), c = this._state(), p = this._tone(), v = c === "loading", h = this._isDisabled(), x = this._isReadonly(), R = this._serializeValue() || this._placeholder();
+    r && (r.hidden = !l), i && (i.disabled = h || v, i.dataset.state = c, i.dataset.tone = p, i.setAttribute("aria-expanded", l && this._open ? "true" : "false"), this._applyAria(i, R)), a && (a.textContent = R), n && (n.style.background = w(this._rgba, !0)), o && (o.hidden = l), this._forEachPanel((d) => this._updatePanel(d, { skipSwatches: t, disabled: h, readonly: x, loading: v, state: c, tone: p, modePopover: l, liveOnly: e }));
   }
   _updatePanel(t, e) {
-    const r = this._rgba, i = I(r), a = this._hsva, n = `hsl(${Math.round(a.h)} 100% 50%)`, o = t.panel.getAttribute("data-cp-panel") === "overlay", l = !!this._error || e.state === "error", c = e.disabled || e.readonly || e.loading;
+    const r = this._rgba, i = M(r), a = this._hsva, n = `hsl(${Math.round(a.h)} 100% 50%)`, o = t.panel.getAttribute("data-cp-panel") === "overlay", l = !!this._error || e.state === "error", c = e.disabled || e.readonly || e.loading;
     if (this._applyAria(t.panel), t.panel.dataset.state = l ? "error" : e.state, t.panel.dataset.tone = e.tone, t.panel.setAttribute("aria-busy", e.loading ? "true" : "false"), o && e.modePopover ? (t.panel.setAttribute("role", "dialog"), t.panel.setAttribute("aria-modal", "true"), t.panel.tabIndex = -1) : (t.panel.removeAttribute("role"), t.panel.removeAttribute("aria-modal"), t.panel.removeAttribute("tabindex")), t.label && (t.label.textContent = this._labelText()), t.valueText && (t.valueText.textContent = this._serializeValue()), t.preview && (t.preview.style.background = w(r, !0)), t.status) {
-      let p = "";
-      l ? p = "Error" : e.state === "loading" ? p = "Syncing" : e.state === "success" && (p = "Saved"), t.status.hidden = !p, t.status.textContent = p, t.status.dataset.tone = e.tone;
+      let d = "";
+      l ? d = "Error" : e.state === "loading" ? d = "Syncing" : e.state === "success" && (d = "Saved"), t.status.hidden = !d, t.status.textContent = d, t.status.dataset.tone = e.tone;
     }
     if (t.sv && (t.sv.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${n})`, t.sv.setAttribute("aria-valuetext", `Saturation ${Math.round(a.s)}%, Value ${Math.round(a.v)}%`), t.sv.setAttribute("aria-disabled", c ? "true" : "false"), t.sv.tabIndex = c ? -1 : 0), t.svThumb) {
-      const p = u(a.s, 1, 99), R = u(100 - a.v, 1, 99);
-      t.svThumb.style.left = `${p}%`, t.svThumb.style.top = `${R}%`;
+      const d = u(a.s, 1, 99), P = u(100 - a.v, 1, 99);
+      t.svThumb.style.left = `${d}%`, t.svThumb.style.top = `${P}%`;
     }
     t.hue && (t.hue.setAttribute("aria-valuemin", "0"), t.hue.setAttribute("aria-valuemax", "360"), t.hue.setAttribute("aria-valuenow", String(Math.round(a.h))), t.hue.setAttribute("aria-disabled", c ? "true" : "false"), t.hue.tabIndex = c ? -1 : 0), t.hueThumb && (t.hueThumb.style.left = `${u(a.h / 360 * 100, 1, 99)}%`), t.alphaRow && (t.alphaRow.hidden = !this._alphaEnabled()), t.alpha && (t.alpha.setAttribute("aria-valuemin", "0"), t.alpha.setAttribute("aria-valuemax", "100"), t.alpha.setAttribute("aria-valuenow", String(Math.round(a.a * 100))), t.alpha.setAttribute("aria-disabled", c || !this._alphaEnabled() ? "true" : "false"), t.alpha.tabIndex = c ? -1 : 0, t.alpha.style.backgroundImage = `
         linear-gradient(45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
@@ -1479,20 +1499,20 @@ class rt extends q {
         linear-gradient(-45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
         linear-gradient(to right, rgba(${r.r}, ${r.g}, ${r.b}, 0), rgba(${r.r}, ${r.g}, ${r.b}, 1))
       `), t.alphaThumb && (t.alphaThumb.style.left = `${u(a.a * 100, 1, 99)}%`);
-    const d = t.panel.getRootNode(), v = d instanceof ShadowRoot ? d.activeElement : t.panel.ownerDocument.activeElement, h = v && t.panel.contains(v) ? v.getAttribute("data-input") : null;
-    if (t.inputHex && h !== "hex" && (t.inputHex.value = m(r, this._alphaEnabled())), t.inputR && h !== "r" && (t.inputR.value = String(r.r)), t.inputG && h !== "g" && (t.inputG.value = String(r.g)), t.inputB && h !== "b" && (t.inputB.value = String(r.b)), t.inputA1 && h !== "a1" && (t.inputA1.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), t.inputH && h !== "h" && (t.inputH.value = String(Math.round(i.h))), t.inputS && h !== "s" && (t.inputS.value = String(Math.round(i.s))), t.inputL && h !== "l" && (t.inputL.value = String(Math.round(i.l))), t.inputA2 && h !== "a2" && (t.inputA2.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), e.liveOnly) return;
+    const p = t.panel.getRootNode(), v = p instanceof ShadowRoot ? p.activeElement : t.panel.ownerDocument.activeElement, h = v && t.panel.contains(v) ? v.getAttribute("data-input") : null;
+    if (t.inputHex && h !== "hex" && (t.inputHex.value = _(r, this._alphaEnabled())), t.inputR && h !== "r" && (t.inputR.value = String(r.r)), t.inputG && h !== "g" && (t.inputG.value = String(r.g)), t.inputB && h !== "b" && (t.inputB.value = String(r.b)), t.inputA1 && h !== "a1" && (t.inputA1.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), t.inputH && h !== "h" && (t.inputH.value = String(Math.round(i.h))), t.inputS && h !== "s" && (t.inputS.value = String(Math.round(i.s))), t.inputL && h !== "l" && (t.inputL.value = String(Math.round(i.l))), t.inputA2 && h !== "a2" && (t.inputA2.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), e.liveOnly) return;
     if (t.tabHex && (t.tabHex.dataset.active = String(this._format === "hex")), t.tabRgb && (t.tabRgb.dataset.active = String(this._format === "rgb")), t.tabHsl && (t.tabHsl.dataset.active = String(this._format === "hsl")), t.groupHex && (t.groupHex.hidden = this._format !== "hex"), t.groupRgb && (t.groupRgb.hidden = this._format !== "rgb"), t.groupHsl && (t.groupHsl.hidden = this._format !== "hsl"), t.inputA1 && (t.inputA1.disabled = !this._alphaEnabled() || c), t.inputA2 && (t.inputA2.disabled = !this._alphaEnabled() || c), t.error) {
-      const p = this._error || (e.state === "error" ? "Unable to validate current color value." : "");
-      t.error.hidden = !p, t.error.textContent = p;
+      const d = this._error || (e.state === "error" ? "Unable to validate current color value." : "");
+      t.error.hidden = !d, t.error.textContent = d;
     }
     const x = c;
     if (t.copyHex && (t.copyHex.disabled = e.disabled || e.loading), t.copyRgb && (t.copyRgb.disabled = e.disabled || e.loading), t.eyedropper) {
-      const p = typeof window < "u" && typeof window.EyeDropper == "function";
-      t.eyedropper.hidden = !p, t.eyedropper.disabled = x || !p;
+      const d = typeof window < "u" && typeof window.EyeDropper == "function";
+      t.eyedropper.hidden = !d, t.eyedropper.disabled = x || !d;
     }
-    if (t.clear && (t.clear.disabled = x), t.apply && (t.apply.hidden = !e.modePopover, t.apply.disabled = x), t.panel.querySelectorAll(".input").forEach((p) => {
-      const R = p;
-      R.disabled = x;
+    if (t.clear && (t.clear.disabled = x), t.apply && (t.apply.hidden = !e.modePopover, t.apply.disabled = x), t.panel.querySelectorAll(".input").forEach((d) => {
+      const P = d;
+      P.disabled = x;
     }), !e.skipSwatches && !this._renderingSwatches) {
       this._renderingSwatches = !0;
       try {
@@ -1507,12 +1527,12 @@ class rt extends q {
     t.presets && (t.presets.innerHTML = this._presets.map((r) => {
       const i = f(r);
       if (!i) return "";
-      const a = m(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
+      const a = _(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
       return `<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${k(a)}"${n} title="${k(a)}" style="background:${k(w(i, !0))}"></button>`;
     }).join("")), t.recentTitle && (t.recentTitle.hidden = !this._recentEnabled() || this._recentColors.length === 0), t.recent && (t.recent.hidden = !this._recentEnabled() || this._recentColors.length === 0, t.recent.innerHTML = this._recentColors.map((r) => {
       const i = f(r);
       if (!i) return "";
-      const a = m(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
+      const a = _(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
       return `<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${k(a)}"${n} title="${k(a)}" style="background:${k(w(i, !0))}"></button>`;
     }).join(""));
   }
@@ -1552,7 +1572,7 @@ class rt extends q {
       }
       if (a === "clear") {
         if (this._isReadonly()) return;
-        const n = f(C);
+        const n = f(I);
         n && (this._applyRgba(n, !1), this._error = "", this._syncValueAttribute(), this._emitInput("text"), this._emitChange("text"), this._pushRecent(this._currentHex()), this._updateUI(!1));
         return;
       }
@@ -1629,12 +1649,12 @@ class rt extends q {
     if (!t) return null;
     const e = this._panelRefs(t);
     if (this._format === "hex") {
-      const l = e.inputHex?.value || "", c = l.trim().startsWith("#") ? l.trim() : `#${l.trim()}`, d = f(c);
-      return d ? this._normalizeByAlpha(d) : null;
+      const l = e.inputHex?.value || "", c = l.trim().startsWith("#") ? l.trim() : `#${l.trim()}`, p = f(c);
+      return p ? this._normalizeByAlpha(p) : null;
     }
     if (this._format === "rgb") {
-      const l = Number(e.inputR?.value ?? ""), c = Number(e.inputG?.value ?? ""), d = Number(e.inputB?.value ?? ""), v = this._alphaEnabled() ? Number(e.inputA1?.value ?? "") : 1;
-      return [l, c, d, v].every((h) => Number.isFinite(h)) ? this._normalizeByAlpha({ r: l, g: c, b: d, a: v }) : null;
+      const l = Number(e.inputR?.value ?? ""), c = Number(e.inputG?.value ?? ""), p = Number(e.inputB?.value ?? ""), v = this._alphaEnabled() ? Number(e.inputA1?.value ?? "") : 1;
+      return [l, c, p, v].every((h) => Number.isFinite(h)) ? this._normalizeByAlpha({ r: l, g: c, b: p, a: v }) : null;
     }
     const r = Number(e.inputH?.value ?? ""), i = Number(e.inputS?.value ?? ""), a = Number(e.inputL?.value ?? ""), n = this._alphaEnabled() ? Number(e.inputA2?.value ?? "") : 1;
     if (![r, i, a, n].every((l) => Number.isFinite(l))) return null;
@@ -1744,12 +1764,14 @@ class rt extends q {
     else
       this.dispatchEvent(new CustomEvent("toast", { detail: { message: r }, bubbles: !0, composed: !0 }));
   }
-  _applyAria(t) {
-    const e = this.getAttribute("aria-labelledby"), r = this.getAttribute("aria-describedby"), i = this.getAttribute("aria-label");
-    e ? t.setAttribute("aria-labelledby", e) : t.removeAttribute("aria-labelledby"), r ? t.setAttribute("aria-describedby", r) : t.removeAttribute("aria-describedby"), i ? t.setAttribute("aria-label", i) : e || t.setAttribute("aria-label", "Color picker");
+  _applyAria(t, e = "") {
+    const r = this.getAttribute("aria-labelledby"), i = this.getAttribute("aria-describedby"), a = this.getAttribute("aria-label"), n = this.getRootNode(), o = r ? r.split(/\s+/).map((p) => n.getElementById?.(p)?.textContent?.trim() || "").filter(Boolean).join(" ") : "";
+    t.removeAttribute("aria-labelledby"), i ? t.setAttribute("aria-describedby", i) : t.removeAttribute("aria-describedby");
+    const l = o || a || "Color picker", c = e && !l.includes(e) ? `${l}, ${e}` : l;
+    t.setAttribute("aria-label", c);
   }
 }
-customElements.get("ui-color-picker") || customElements.define("ui-color-picker", rt);
+typeof customElements < "u" && !customElements.get("ui-color-picker") && customElements.define("ui-color-picker", rt);
 export {
   rt as UIColorPicker
 };

package/dist/combobox.cjs.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-EV6mVBUV.js"),h=require("./collection-qv8A8rq4.js"),k=require("./dismissable-layer-DNfrKA20.js"),L=require("./listbox-B6QgECax.js"),F=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./ElementBase-DxbvhLJs.js"),F=require("./control-name-BmoI1m3a.js"),h=require("./collection-qv8A8rq4.js"),$=require("./dismissable-layer-DNfrKA20.js"),E=require("./listbox-CTpRpuF7.js"),D=`
   <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>
-`,$=`
+`,I=`
   <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=`
+`,B=`
   :host {
     --ui-combobox-width: var(--ui-width, 100%);
     --ui-combobox-min-width: 248px;
@@ -15,7 +15,7 @@
     --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-muted: var(--ui-color-muted, #526175);
     --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;
@@ -29,8 +29,8 @@
     --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-success: var(--ui-color-success, #15803d);
+    --ui-combobox-warning: var(--ui-color-warning, #b45309);
     --ui-combobox-duration: 150ms;
     --ui-combobox-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
 
@@ -65,7 +65,8 @@
   .root {
     position: relative;
     width: var(--ui-combobox-width);
-    min-width: var(--ui-combobox-min-width);
+    /* The host already clamps its minimum to its container; the control inside has to as well. */
+    min-width: min(100%, var(--ui-combobox-min-width));
     max-width: 100%;
   }
 
@@ -467,7 +468,7 @@
       color: HighlightText;
     }
   }
-`;function a(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function _(d){if(d==null)return!1;const t=String(d).toLowerCase();return t!=="false"&&t!=="0"}class A extends C.ElementBase{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)}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(){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){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 _(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 r={open:t,previousOpen:e,source:i};this.dispatchEvent(new CustomEvent(t?"open":"close",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(t?"ui-open":"ui-close",{detail:r,bubbles:!0,composed:!0}))}_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,getValue:()=>this.value,setValue:o=>{this.value=o},validate:async()=>{const o=this._isCurrentValueValid();return{valid:o,message:o?void 0:"Please select a value from the list."}},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("data-error",o)):(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=new Set;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:r})}).filter(i=>!!i)}_findOptionByValue(t){return this._options.find(e=>e.value===t)||null}_findExactOptionByQuery(t){const e=h.normalizeCollectionText(t);return e&&this._options.find(i=>!i.disabled&&(h.normalizeCollectionText(i.label)===e||h.normalizeCollectionText(i.value)===e))||null}_rebuildFiltered(t){const e=h.normalizeCollectionText(this._query),i=this.hasAttribute("no-filter"),r=this._filtered[this._highlightedIndex];if(this._filtered=this._options.filter(o=>i||!e?!0:h.normalizeCollectionText(o.label).includes(e)||h.normalizeCollectionText(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 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}}this._highlightedIndex=L.resolveListboxActiveIndex(this._filtered,{getDisabled:o=>o.disabled})}_renderList(){if(!this._panel)return;const t=this._renderStateRow(),e=this.getAttribute("empty-text")||"No matches found",i=[t,e,this._filtered.length===0?"empty":"options",...this._filtered.map(o=>[o.sourceIndex,o.value,o.label,o.description,o.disabled?"1":"0"].join("
"))].join("");if(i===this._listStructureFingerprint&&this._syncRenderedListState())return;if(this._filtered.length===0){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 r=this.value,s=this._filtered.map((o,n)=>{const l=o.value===r,b=n===this._highlightedIndex,u=o.disabled;return`
+`;function n(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function _(d){if(d==null)return!1;const t=String(d).toLowerCase();return t!=="false"&&t!=="0"}class k extends L.ElementBase{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)}static get observedAttributes(){return["aria-label","aria-description","aria-describedby","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(){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){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 _(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 r={open:t,previousOpen:e,source:i};this.dispatchEvent(new CustomEvent(t?"open":"close",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(t?"ui-open":"ui-close",{detail:r,bubbles:!0,composed:!0}))}_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,getValue:()=>this.value,setValue:o=>{this.value=o},validate:async()=>{const o=this._isCurrentValueValid();return{valid:o,message:o?void 0:"Please select a value from the list."}},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("data-error",o)):(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=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();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:r})}).filter(i=>!!i)}_findOptionByValue(t){return this._options.find(e=>e.value===t)||null}_findExactOptionByQuery(t){const e=h.normalizeCollectionText(t);return e&&this._options.find(i=>!i.disabled&&(h.normalizeCollectionText(i.label)===e||h.normalizeCollectionText(i.value)===e))||null}_rebuildFiltered(t){const e=h.normalizeCollectionText(this._query),i=this.hasAttribute("no-filter"),r=this._filtered[this._highlightedIndex];if(this._filtered=this._options.filter(o=>i||!e?!0:h.normalizeCollectionText(o.label).includes(e)||h.normalizeCollectionText(o.value).includes(e)),t?.preserveHighlight&&r){const o=this._filtered.findIndex(a=>a.sourceIndex===r.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);if(o>=0&&!this._filtered[o].disabled){this._highlightedIndex=o;return}}this._highlightedIndex=E.resolveListboxActiveIndex(this._filtered,{getDisabled:o=>o.disabled})}_renderList(){if(!this._panel)return;const t=this._renderStateRow(),e=this.getAttribute("empty-text")||"No matches found",i=[t,e,this._filtered.length===0?"empty":"options",...this._filtered.map(o=>[o.sourceIndex,o.value,o.label,o.description,o.disabled?"1":"0"].join("
"))].join("");if(i===this._listStructureFingerprint&&this._syncRenderedListState())return;if(this._filtered.length===0){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;return`
           <button
             type="button"
             id="${`${this._uid}-option-${o.sourceIndex}`}"
@@ -475,27 +476,27 @@
             role="option"
             aria-selected="${l?"true":"false"}"
             aria-disabled="${u?"true":"false"}"
-            data-option-index="${n}"
+            data-option-index="${a}"
             data-highlighted="${b?"true":"false"}"
             data-selected="${l?"true":"false"}"
             ${u?"disabled":""}>
             <span class="option-text">
-              <span class="option-label">${a(o.label)}</span>
-              ${o.description?`<span class="option-description">${a(o.description)}</span>`:""}
+              <span class="option-label">${n(o.label)}</span>
+              ${o.description?`<span class="option-description">${n(o.description)}</span>`:""}
             </span>
             <span class="option-check" aria-hidden="true">✓</span>
           </button>
-        `}).join("");this._panel.innerHTML=`${t}${s}`,this._listStructureFingerprint=i,this._panel.refresh(),this._syncActiveDescendant(),this._scrollHighlightedIntoView()}_syncRenderedListState(){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;const e=this.value;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(){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(){if(!this._input)return;const t=this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`);if(t&&this._panel){this._panel.setActiveItem(t,{focus:!1,owner:this._input,scroll:!1});return}this._panel?.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(){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")}_bindGlobalListeners(){this._globalListenersBound||(this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(this._globalListenersBound=!1)}_syncDismissableLayer(){!this.open||!this._panel||(this._dismissableLayer?.destroy(),this._dismissableLayer=k.createDismissableLayer({node:this._panel,trigger:this._control,closeOnEscape:!1,closeOnPointerOutside:!0,onDismiss:t=>{t==="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){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 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=_(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 w=this._findOptionByValue(this.value);this._query=w?w.label:this.value}this._rebuildFiltered({preserveHighlight:!1}),this.setContent(`
-      ${t?"":`<style>${E}</style>`}
-      ${f||g?`
+        `}).join("");this._panel.innerHTML=`${t}${s}`,this._listStructureFingerprint=i,this._panel.refresh(),this._syncActiveDescendant(),this._scrollHighlightedIntoView()}_syncRenderedListState(){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;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}),this._syncActiveDescendant(),this._scrollHighlightedIntoView(),!0}_renderStateRow(){const t=this._state(),e=this._stateText();return e?`<div class="status-row" part="status" data-state="${n(t)}" aria-live="polite">${n(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(){if(!this._input)return;const t=this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`);if(t&&this._panel){this._panel.setActiveItem(t,{focus:!1,owner:this._input,scroll:!1});return}this._panel?.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(){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")}_bindGlobalListeners(){this._globalListenersBound||(this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(this._globalListenersBound=!1)}_syncDismissableLayer(){!this.open||!this._panel||(this._dismissableLayer?.destroy(),this._dismissableLayer=$.createDismissableLayer({node:this._panel,trigger:this._control,closeOnEscape:!1,closeOnPointerOutside:!0,onDismiss:t=>{t==="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){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 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=_(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=F.externalDescriptionMarkup(this,this._uid),A=[v?`${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>${B}</style>`}
+      ${f||v?`
         <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>
+          <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>
         </div>
       `:""}
 
       <div class="root" part="root">
-        <div class="control" part="control" data-focused="${this._isFocused?"true":"false"}" data-state="${a(s)}">
+        <div class="control" part="control" data-focused="${this._isFocused?"true":"false"}" data-state="${n(s)}">
           <input
             id="${this._uid}-input"
             part="input"
@@ -504,22 +505,23 @@
             aria-autocomplete="list"
             aria-expanded="${this.open?"true":"false"}"
             aria-controls="${this._uid}-listbox"
-            ${f?`aria-labelledby="${this._uid}-label"`:""}
-            ${y?`aria-describedby="${y}"`:""}
+            ${f?`aria-labelledby="${this._uid}-label"`:g?`aria-label="${n(g)}"`:""}
+            ${A?`aria-describedby="${A}"`:""}
             ${m?'aria-invalid="true"':""}
             aria-busy="${o?"true":"false"}"
-            value="${a(this._query)}"
-            placeholder="${a(n)}"
+            value="${n(this._query)}"
+            placeholder="${n(a)}"
             ${i?"disabled":""}
             ${r?"readonly":""}
             ${b?"required":""}
-            ${l?`maxlength="${a(l)}"`:""}
+            ${l?`maxlength="${n(l)}"`:""}
           />
-          <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">${$}</button>
+          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${r?"disabled":""}>${D}</button>
+          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open?"true":"false"}" aria-label="Toggle options">${I}</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(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(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="${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(()=>{this._autofocusFrame=0;try{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))}_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();const t=this._isFocused&&this.open;if(!t){const e=this._findOptionByValue(this.value),i=e?e.label:this.value;this._query=i,this._input&&(this._input.value=i)}this._rebuildFiltered({preserveHighlight:t}),this._renderList(),this._updateClearButton()}_scheduleOptionsRefresh(){this._optionsRefreshFrame||(this._optionsRefreshFrame=requestAnimationFrame(()=>{this._optionsRefreshFrame=0,this.isConnected&&this._refreshOptionsFromDom()}))}_onKeyDown(t){if(!this._isDisabled()&&this._input){if(t.key==="Home"&&this.open){t.preventDefault();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 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"){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 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 e=this._findExactOptionByQuery(this._query);e&&(t.preventDefault(),this._commitSelection(e))}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){t.preventDefault(),!this._isDisabled()&&(this.open?this._closePanel("toggle"):this._openPanel("toggle"),this._input?.focus())}_onPanelPointerDown(t){this._isReadonly()||!t.target?.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 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)}}typeof customElements<"u"&&!customElements.get("ui-combobox")&&customElements.define("ui-combobox",A);exports.UICombobox=A;
+      <div class="error" part="error" id="${y}" ${m?"":"hidden"}>${n(x)}</div>
+      ${w.html}
+    `),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(()=>{this._autofocusFrame=0;try{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))}_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();const t=this._isFocused&&this.open;if(!t){const e=this._findOptionByValue(this.value),i=e?e.label:this.value;this._query=i,this._input&&(this._input.value=i)}this._rebuildFiltered({preserveHighlight:t}),this._renderList(),this._updateClearButton()}_scheduleOptionsRefresh(){this._optionsRefreshFrame||(this._optionsRefreshFrame=requestAnimationFrame(()=>{this._optionsRefreshFrame=0,this.isConnected&&this._refreshOptionsFromDom()}))}_onKeyDown(t){if(!this._isDisabled()&&this._input){if(t.key==="Home"&&this.open){t.preventDefault();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 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"){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 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 e=this._findExactOptionByQuery(this._query);e&&(t.preventDefault(),this._commitSelection(e))}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){t.preventDefault(),!this._isDisabled()&&(this.open?this._closePanel("toggle"):this._openPanel("toggle"),this._input?.focus())}_onPanelPointerDown(t){this._isReadonly()||!t.target?.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 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)}}typeof customElements<"u"&&!customElements.get("ui-combobox")&&customElements.define("ui-combobox",k);exports.UICombobox=k;