@editora/ui-core 0.2.1 → 0.3.0

package/dist/menubar.esm.js

@@ -1,13 +1,14 @@
-import { E } from "./ElementBase-BeZT54Hj.mjs";
-import { b as k } from "./portal-DeaM1tYY.mjs";
-import { d as L } from "./collection-C7URGjEI.mjs";
-import { c as I } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as g, s as v, f as C, m as y, g as x } from "./roving-focus-group-Dbm1Jko_.mjs";
-import { e as T } from "./positioner-BE8Nbho2.mjs";
-import { O as D, o as z, r as O, a as B } from "./overlay-motion-BX3dPLay.mjs";
+import { E } from "./ElementBase-D5QsC5Vw.mjs";
+import { h as k, r as L } from "./clone-source-BxK2pEVw.mjs";
+import { b as I } from "./portal-DeaM1tYY.mjs";
+import { d as C } from "./collection-C7URGjEI.mjs";
+import { c as T } from "./dismissable-layer-BmPIoK80.mjs";
+import { r as g, s as v, f as D, m as y, g as x } from "./roving-focus-group-Dbm1Jko_.mjs";
+import { e as z } from "./positioner-BE8Nbho2.mjs";
+import { O, o as B, r as F, a as R } from "./overlay-motion-BX3dPLay.mjs";
 import "./listbox-hMVOhKHC.mjs";
-import { c as F } from "./menu-item-styles-CdqxPUuw.mjs";
-const R = ":scope > .submenu", M = [
+import { c as M } from "./menu-item-styles-CdqxPUuw.mjs";
+const $ = ":scope > .submenu", H = [
   "--ui-color-primary",
   "--ui-color-primary-hover",
   "--ui-color-foreground-on-primary",
@@ -42,7 +43,7 @@ const R = ":scope > .submenu", M = [
   "--accent-surface",
   "--accent-indicator",
   "--accent-track"
-], $ = [
+], q = [
   { prefix: "--accent-", from: 1, to: 12 },
   { prefix: "--accent-a", from: 1, to: 12 },
   { prefix: "--gray-", from: 1, to: 12 },
@@ -52,13 +53,13 @@ const R = ":scope > .submenu", M = [
   { prefix: "--shadow-", from: 1, to: 6 },
   { prefix: "--radius-", from: 1, to: 6 }
 ];
-function H(n) {
+function N(n) {
   return n === "sm" || n === "1" || n === "compact" ? "sm" : n === "lg" || n === "3" || n === "comfortable" ? "lg" : "md";
 }
 function S(n) {
   return !n || n === "default" ? null : n === "none" || n === "square" ? "0px" : n === "sm" ? "8px" : n === "md" || n === "soft" ? "12px" : n === "lg" ? "16px" : n === "full" ? "999px" : /^\d+(\.\d+)?$/.test(n) ? `${n}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(n) ? n : null;
 }
-const q = `
+const V = `
   :host {
     --ui-menubar-gap: var(--base-menubar-gap, 6px);
     --ui-menubar-padding: var(--base-menubar-padding, 6px);
@@ -138,7 +139,7 @@ const q = `
     --ui-menubar-item-hover-bg: color-mix(in srgb, #ffffff 16%, transparent);
     --ui-menubar-item-active-bg: color-mix(in srgb, #ffffff 20%, transparent);
     --ui-menubar-item-active-color: #ffffff;
-    --ui-menubar-ring: #93c5fd;
+    --ui-menubar-ring: var(--ui-color-accent-on-dark, #93c5fd);
     border-color: #334155;
   }
 
@@ -264,8 +265,8 @@ const q = `
       border-color: Highlight;
     }
   }
-`, N = `
-  ${D}
+`, K = `
+  ${O}
 
   .ui-menubar-portal {
     position: absolute;
@@ -366,7 +367,7 @@ const q = `
       0 6px 18px rgba(2, 6, 23, 0.14);
   }
 
-  ${F({
+  ${M({
   scopes: [".ui-menubar-portal .content-host"],
   prefix: "--ui-menubar-panel",
   shortcutSelectors: [".shortcut", ".meta"],
@@ -492,11 +493,11 @@ const q = `
     }
   }
 `;
-function V(n) {
+function G(n) {
   return n === "top" || n === "left" || n === "right" ? n : "bottom";
 }
-function K(n) {
-  const e = V(n);
+function U(n) {
+  const e = G(n);
   return e === "top" ? "top" : e === "left" ? "left" : e === "right" ? "right" : "bottom";
 }
 function f(n, e) {
@@ -533,7 +534,7 @@ function m(n) {
 function b(n, e) {
   return n.getAttribute(e) || "";
 }
-class G extends E {
+class j extends E {
   constructor() {
     super(), this._items = [], this._contents = [], this._itemSlot = null, this._contentSlot = null, this._uid = Math.random().toString(36).slice(2, 8), this._ignoreSelected = !1, this._open = !1, this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._positioner = null, this._dismissableLayer = null, this._panelForIndex = -1, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._submenuRaf = null, this._globalListenersBound = !1, this._focusIndex = -1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDocKeyDown = this._onDocKeyDown.bind(this), this._onDocScroll = this._onDocScroll.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onMouseMove = this._onMouseMove.bind(this), this._onPanelPointerOver = this._onPanelPointerOver.bind(this), this._onPanelPointerLeave = this._onPanelPointerLeave.bind(this), this._onPanelFocusIn = this._onPanelFocusIn.bind(this);
   }
@@ -582,7 +583,7 @@ class G extends E {
   render() {
     const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
     this.setContent(`
-      <style>${q}</style>
+      <style>${V}</style>
       <div class="bar" part="bar" role="menubar" aria-orientation="${e}">
         <slot name="item"></slot>
       </div>
@@ -687,7 +688,7 @@ class G extends E {
     this._globalListenersBound && (document.removeEventListener("keydown", this._onDocKeyDown), document.removeEventListener("scroll", this._onDocScroll, !0), this._globalListenersBound = !1);
   }
   _syncStructure() {
-    this._items = this._itemSlot ? this._itemSlot.assignedElements({ flatten: !0 }) : [], this._contents = this._contentSlot ? this._contentSlot.assignedElements({ flatten: !0 }) : [];
+    this._items = this._itemSlot ? this._itemSlot.assignedElements({ flatten: !0 }) : [], this._contents = this._contentSlot ? this._contentSlot.assignedElements({ flatten: !0 }) : [], this._contents.forEach((a) => k(a));
     const e = this._selectedIndex(), t = g(this._items, {
       activeIndex: this._focusIndex,
       selectedIndex: e,
@@ -712,7 +713,7 @@ class G extends E {
     return this._panelListbox()?.queryEnabledItems({ container: e || this._panelListbox() }) || [];
   }
   _submenuFor(e) {
-    return e.querySelector(R);
+    return e.querySelector($);
   }
   _setOpenPanelBranch(e, t) {
     const r = this._panelListbox();
@@ -765,8 +766,8 @@ class G extends E {
       s.removeAttribute("data-submenu-side"), s.removeAttribute("data-submenu-align");
       const o = i.style.display, u = i.style.visibility, c = i.style.pointerEvents, d = i.style.opacity, P = i.style.transform;
       i.style.display = "grid", i.style.visibility = "hidden", i.style.pointerEvents = "none", i.style.opacity = "0", i.style.transform = "none";
-      const p = s.getBoundingClientRect(), h = i.getBoundingClientRect();
-      p.right + 4 + h.width > t - 8 && p.left - 4 - h.width >= 8 && s.setAttribute("data-submenu-side", "left"), p.top + h.height > r - 8 && p.bottom - h.height >= 8 && s.setAttribute("data-submenu-align", "up"), i.style.display = o, i.style.visibility = u, i.style.pointerEvents = c, i.style.opacity = d, i.style.transform = P;
+      const h = s.getBoundingClientRect(), p = i.getBoundingClientRect();
+      h.right + 4 + p.width > t - 8 && h.left - 4 - p.width >= 8 && s.setAttribute("data-submenu-side", "left"), h.top + p.height > r - 8 && h.bottom - p.height >= 8 && s.setAttribute("data-submenu-align", "up"), i.style.display = o, i.style.visibility = u, i.style.pointerEvents = c, i.style.opacity = d, i.style.transform = P;
     });
   }
   _panelListbox() {
@@ -778,7 +779,7 @@ class G extends E {
   _buildPanelContent(e) {
     const t = this._contents[e], r = document.createElement("div");
     r.className = "ui-menubar-portal", r.style.position = "absolute", r.style.pointerEvents = "auto", r.innerHTML = `
-      <style>${N}</style>
+      <style>${K}</style>
       <div class="surface menu-panel" part="menu" role="menu" aria-hidden="false" aria-busy="false" tabindex="-1">
         <div class="state-row" part="state"></div>
         <ui-listbox class="content-host" slot="menu" role="menu" item-selector="${l().replace(/"/g, "&quot;")}" direct-item-selector=":scope > [slot=&quot;menu&quot;] > ${l().replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active"></ui-listbox>
@@ -787,7 +788,7 @@ class G extends E {
     const a = r.querySelector("ui-listbox.content-host"), i = r.querySelector(".surface");
     if (!a || !i) return r;
     if (i.id = t?.id || `ui-menubar-panel-${this._uid}-${e}`, i.setAttribute("aria-labelledby", this._items[e]?.id || ""), this._applyPanelVariantData(r), this._applyPanelTokens(r), t) {
-      const s = t.cloneNode(!0);
+      const s = L(t.cloneNode(!0));
       s.setAttribute("slot", "menu"), a.appendChild(s);
     }
     if (this._hydratePanelItems(a), a.refresh(), !a.querySelector(l())) {
@@ -819,7 +820,7 @@ class G extends E {
     }), r.addEventListener("pointerover", this._onPanelPointerOver), r.addEventListener("pointerleave", this._onPanelPointerLeave), r.addEventListener("focusin", this._onPanelFocusIn), r;
   }
   _applyPanelVariantData(e) {
-    const t = b(this, "variant"), r = H(this.getAttribute("size") || this.getAttribute("density")), a = b(this, "density"), i = this.getAttribute("radius"), s = b(this, "shape"), o = b(this, "elevation"), u = b(this, "tone"), c = t === "default" || t === "" ? "" : t === "glass" ? "soft" : t === "line" ? "outline" : t;
+    const t = b(this, "variant"), r = N(this.getAttribute("size") || this.getAttribute("density")), a = b(this, "density"), i = this.getAttribute("radius"), s = b(this, "shape"), o = b(this, "elevation"), u = b(this, "tone"), c = t === "default" || t === "" ? "" : t === "glass" ? "soft" : t === "line" ? "outline" : t;
     c ? e.setAttribute("data-variant", c) : e.removeAttribute("data-variant"), r !== "md" ? e.setAttribute("data-size", r) : e.removeAttribute("data-size"), a && a !== "default" ? e.setAttribute("data-density", a) : e.removeAttribute("data-density"), i ? e.setAttribute("data-radius", i) : e.removeAttribute("data-radius"), s && s !== "default" ? e.setAttribute("data-shape", s) : e.removeAttribute("data-shape"), o && o !== "default" ? e.setAttribute("data-elevation", o) : e.removeAttribute("data-elevation"), u && u !== "default" && u !== "brand" ? e.setAttribute("data-tone", u) : e.removeAttribute("data-tone"), this._open ? e.setAttribute("data-open", "true") : e.removeAttribute("data-open");
     const d = S(i || s || null);
     d ? (e.style.setProperty("--ui-menubar-panel-radius", d), e.style.setProperty("--ui-menubar-panel-item-radius", d === "999px" ? "999px" : `calc(${d} - 2px)`)) : (e.style.removeProperty("--ui-menubar-panel-radius"), e.style.removeProperty("--ui-menubar-panel-item-radius"));
@@ -884,10 +885,10 @@ class G extends E {
     ].forEach((a) => {
       const i = t.getPropertyValue(a).trim();
       i ? e.style.setProperty(a, i) : e.style.removeProperty(a);
-    }), M.forEach((a) => {
+    }), H.forEach((a) => {
       const i = t.getPropertyValue(a).trim();
       i ? e.style.setProperty(a, i) : e.style.removeProperty(a);
-    }), $.forEach(({ prefix: a, from: i, to: s }) => {
+    }), q.forEach(({ prefix: a, from: i, to: s }) => {
       for (let o = i; o <= s; o += 1) {
         const u = `${a}${o}`, c = t.getPropertyValue(u).trim();
         c ? e.style.setProperty(u, c) : e.style.removeProperty(u);
@@ -913,30 +914,30 @@ class G extends E {
     this._teardownPanel();
     const r = this._buildPanelContent(e);
     this._portalEl = r, this._portalSurfaceEl = r.querySelector(".surface"), this._portalContentHostEl = r.querySelector("ui-listbox.content-host"), this._panelForIndex = e;
-    const a = k();
+    const a = I();
     if (!a) {
       this._portalEl = null, this._panelForIndex = -1;
       return;
     }
-    a.appendChild(r), this._positioner = T({
+    a.appendChild(r), this._positioner = z({
       anchor: t,
       floating: this._panelSurface() || r,
-      placement: K(this.getAttribute("placement")),
+      placement: U(this.getAttribute("placement")),
       offset: 6,
       flip: !0,
       shift: !0,
       fitViewport: !0,
       observeScroll: !1
-    }), this._dismissableLayer = I({
+    }), this._dismissableLayer = T({
       node: this._panelSurface() || r,
       trigger: t,
       closeOnEscape: !0,
       closeOnPointerOutside: !0,
       onDismiss: () => this.close()
-    }), z(this._panelSurface() || r);
+    }), B(this._panelSurface() || r);
   }
   _teardownPanel(e = !1) {
-    this._dismissableLayer?.destroy(), this._dismissableLayer = null, this._positioner?.destroy(), this._positioner = null, e ? O(this._portalEl) : B(this._portalEl), this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._panelForIndex = -1, this._submenuRaf != null && (cancelAnimationFrame(this._submenuRaf), this._submenuRaf = null), this._resetTypeahead();
+    this._dismissableLayer?.destroy(), this._dismissableLayer = null, this._positioner?.destroy(), this._positioner = null, e ? F(this._portalEl) : R(this._portalEl), this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._panelForIndex = -1, this._submenuRaf != null && (cancelAnimationFrame(this._submenuRaf), this._submenuRaf = null), this._resetTypeahead();
   }
   _selectIndex(e, t) {
     const r = this._selectedIndex(), a = A(e, this._items.length);
@@ -949,7 +950,7 @@ class G extends E {
   }
   _focusItem(e) {
     const t = this._items[e];
-    t && (this._focusIndex = e, v(this._items, t, { activeAttribute: null }), C(t));
+    t && (this._focusIndex = e, v(this._items, t, { activeAttribute: null }), D(t));
   }
   _queryPanelItems() {
     return this._queryPanelItemsIn(this._panelListbox());
@@ -982,7 +983,7 @@ class G extends E {
   _typeaheadOnBar(e) {
     if (!this.typeahead || !this._isTypeaheadKey(e)) return !1;
     this._typeaheadBuffer = `${this._typeaheadBuffer}${e.key.toLowerCase()}`.slice(0, 24), this._typeaheadTimer != null && window.clearTimeout(this._typeaheadTimer), this._typeaheadTimer = window.setTimeout(() => this._resetTypeahead(), 420);
-    const t = this._items.findIndex((a) => a === e.target || a.contains(e.target)), r = L(this._items, this._typeaheadBuffer, {
+    const t = this._items.findIndex((a) => a === e.target || a.contains(e.target)), r = C(this._items, this._typeaheadBuffer, {
       startIndex: t,
       getLabel: (a) => a.getAttribute("aria-label") || a.textContent || "",
       getDisabled: m
@@ -1122,7 +1123,7 @@ class G extends E {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-menubar") && customElements.define("ui-menubar", G);
+typeof customElements < "u" && !customElements.get("ui-menubar") && customElements.define("ui-menubar", j);
 export {
-  G as UIMenubar
+  j as UIMenubar
 };

package/dist/meter.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),f=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-CbUsP3D6.js"),f=`
   :host {
     display: block;
     width: 100%;

package/dist/meter.esm.js

@@ -1,4 +1,4 @@
-import { E as h } from "./ElementBase-BeZT54Hj.mjs";
+import { E as h } from "./ElementBase-D5QsC5Vw.mjs";
 const b = `
   :host {
     display: block;

package/dist/multi-select.cjs.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("./ElementBase-DxbvhLJs.js"),O=require("./overlay-motion-B56x1GoY.js"),K=require("./control-name-BmoI1m3a.js"),S=require("./collection-qv8A8rq4.js");require("./listbox-CTpRpuF7.js");let W=0;const j=`
-  ${O.OVERLAY_MOTION_CSS}
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("./ElementBase-CbUsP3D6.js"),O=require("./form-control-B90_3kYN.js"),V=require("./overlay-motion-B56x1GoY.js"),j=require("./control-name-BmoI1m3a.js"),C=require("./collection-qv8A8rq4.js");require("./listbox-CTpRpuF7.js");let H=0;const J=`
+  ${V.OVERLAY_MOTION_CSS}
 
   :host {
     --ui-multi-select-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
@@ -468,8 +468,8 @@
     --ui-multi-select-text: #e2e8f0;
     --ui-multi-select-muted: #93a4bd;
     --ui-multi-select-border-color: #334155;
-    --ui-multi-select-focus: #93c5fd;
-    --ui-multi-select-chip-bg: color-mix(in srgb, #93c5fd 18%, transparent);
+    --ui-multi-select-focus: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 18%, transparent);
     --ui-multi-select-chip-text: #e2e8f0;
   }
 
@@ -535,8 +535,8 @@
     --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
     --ui-multi-select-chip-text: var(--ui-color-danger-text, color-mix(in srgb, var(--ui-color-danger, #dc2626) 82%, #0f172a 18%));
   }
-`;function I(r){if(!r)return[];try{const e=JSON.parse(r);if(!Array.isArray(e))return[];const t=[],s=(l,n)=>{const a=String(l.value??"").trim();a&&t.push({value:a,label:String(l.label??a),description:l.description?String(l.description):void 0,disabled:!!l.disabled,group:n})};return e.forEach(l=>{if(!l||typeof l!="object")return;const n=l;if(Array.isArray(n.options)){const a=String(n.label??"").trim();n.options.forEach(c=>{!c||typeof c!="object"||s(c,a||void 0)});return}s(n)}),t}catch{return[]}}function v(r){if(!r)return[];const e=r.trim();if(!e)return[];if(e.startsWith("["))try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(s=>String(s)).filter(Boolean)}catch{}return e.split(",").map(t=>t.trim()).filter(Boolean)}function L(r){return!r||r==="default"?null:r==="none"||r==="square"?"0px":r==="sm"?"8px":r==="md"||r==="soft"?"12px":r==="lg"?"16px":r==="full"?"999px":/^\d+(\.\d+)?$/.test(r)?`${r}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(r)?r:null}function H(r){return r==="sm"||r==="1"?"sm":r==="lg"||r==="3"?"lg":"md"}class N extends M.ElementBase{constructor(){super(),this._options=[],this._selected=[],this._query="",this._inputEl=null,this._shellEl=null,this._panelEl=null,this._formUnregister=null,this._outsidePointerDown=null,this._activeValue=null,this._uid=`ui-multi-select-${++W}`,this._isSyncingUi=!1,this._needsSyncUi=!1,this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onToggle=this._onToggle.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["options","value","placeholder","label","aria-label","aria-description","aria-describedby","description","data-error","name","required","disabled","readonly","loading","loading-text","clearable","open","max-selections","render-limit","selection-indicator","option-border","variant","tone","density","shape","size","radius","option-radius","elevation"]}get value(){return[...this._selected]}set value(e){const t=Array.isArray(e)?e.map(s=>String(s)).filter(Boolean):v(String(e??""));this._setSelected(t,"api")}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){super.connectedCallback(),this._registerWithForm()}disconnectedCallback(){this._detachOutsideListener(),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(e,t,s){if(t!==s&&(e==="options"&&(this._options=I(s)),e==="value"&&(this._selected=v(s)),e==="name"&&this.isConnected&&this._registerWithForm(),!!this._shellEl)){if(e==="variant"||e==="tone"||e==="density"||e==="shape"||e==="size"||e==="radius"||e==="option-radius"||e==="elevation"){this._syncVisualState(),e==="size"&&this._syncUi();return}this._syncUi()}}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
-      <style>${j}</style>
+`;function N(r){if(!r)return[];try{const e=JSON.parse(r);if(!Array.isArray(e))return[];const t=[],s=(l,n)=>{const a=String(l.value??"").trim();a&&t.push({value:a,label:String(l.label??a),description:l.description?String(l.description):void 0,disabled:!!l.disabled,group:n})};return e.forEach(l=>{if(!l||typeof l!="object")return;const n=l;if(Array.isArray(n.options)){const a=String(n.label??"").trim();n.options.forEach(c=>{!c||typeof c!="object"||s(c,a||void 0)});return}s(n)}),t}catch{return[]}}function v(r){if(!r)return[];const e=r.trim();if(!e)return[];if(e.startsWith("["))try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(s=>String(s)).filter(Boolean)}catch{}return e.split(",").map(t=>t.trim()).filter(Boolean)}function D(r){return!r||r==="default"?null:r==="none"||r==="square"?"0px":r==="sm"?"8px":r==="md"||r==="soft"?"12px":r==="lg"?"16px":r==="full"?"999px":/^\d+(\.\d+)?$/.test(r)?`${r}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(r)?r:null}function G(r){return r==="sm"||r==="1"?"sm":r==="lg"||r==="3"?"lg":"md"}const q=class q extends W.ElementBase{constructor(){super(),this._formControl=new O.FormControl(this,{getValue:()=>this.value,getValidity:()=>({valueMissing:O.isRequired(this)&&this.value.length===0,message:"Please select at least one item.",anchor:this._inputEl}),defaultAttribute:"value"}),this._options=[],this._selected=[],this._query="",this._inputEl=null,this._shellEl=null,this._panelEl=null,this._formUnregister=null,this._outsidePointerDown=null,this._activeValue=null,this._uid=`ui-multi-select-${++H}`,this._isSyncingUi=!1,this._needsSyncUi=!1,this._onInput=this._onInput.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onToggle=this._onToggle.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["options","value","placeholder","label","aria-label","aria-description","aria-describedby","description","data-error","name","required","disabled","readonly","loading","loading-text","clearable","open","max-selections","render-limit","selection-indicator","option-border","variant","tone","density","shape","size","radius","option-radius","elevation"]}get value(){return[...this._selected]}set value(e){const t=Array.isArray(e)?e.map(s=>String(s)).filter(Boolean):v(String(e??""));this._setSelected(t,"api")}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}formResetCallback(){this._formControl.formResetCallback()}formDisabledCallback(e){this._formControl.formDisabledCallback(e)}get form(){return this._formControl.form}connectedCallback(){super.connectedCallback(),this._formControl.connect(),this._registerWithForm()}disconnectedCallback(){this._formControl.disconnect(),this._detachOutsideListener(),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(e,t,s){if(t!==s&&(e==="options"&&(this._options=N(s)),e==="value"&&(this._selected=v(s)),e==="name"&&this.isConnected&&this._registerWithForm(),!!this._shellEl)){if(e==="variant"||e==="tone"||e==="density"||e==="shape"||e==="size"||e==="radius"||e==="option-radius"||e==="elevation"){this._syncVisualState(),e==="size"&&this._syncUi();return}this._syncUi()}}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${J}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
@@ -559,4 +559,4 @@
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `),this._options=I(this.getAttribute("options")),this._selected=v(this.getAttribute("value")),this._shellEl=this.root.querySelector(".shell"),this._inputEl=this.root.querySelector(".input"),this._panelEl=this.root.querySelector(".panel"),this._inputEl?.addEventListener("input",this._onInput),this._inputEl?.addEventListener("keydown",this._onKeyDown),this.root.querySelector(".toggle")?.addEventListener("click",this._onToggle),this.root.querySelector(".clear")?.addEventListener("click",()=>this._clearSelection("clear-button")),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.addEventListener("focusout",this._onFocusOut),this._syncVisualState(),this._syncUi()}_syncVisualState(){const e=L(this.getAttribute("radius")||this.getAttribute("shape"));e?this.style.setProperty("--ui-multi-select-radius",e):this.style.removeProperty("--ui-multi-select-radius");const t=L(this.getAttribute("option-radius"));t?this.style.setProperty("--ui-multi-select-option-radius",t):this.style.removeProperty("--ui-multi-select-option-radius");const s=H(this.getAttribute("size"));this.setAttribute("data-size",s)}_selectionIndicator(){const e=(this.getAttribute("selection-indicator")||"checkbox").trim().toLowerCase();return e==="none"||e==="check"?e:"checkbox"}_isInteractionLocked(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}_attachOutsideListener(){this._outsidePointerDown||typeof document>"u"||(this._outsidePointerDown=e=>{const t=e.composedPath();t.includes(this)||t.includes(this.root)||this._panelEl&&t.includes(this._panelEl)||this._inputEl&&t.includes(this._inputEl)||(this.open=!1,this._syncUi())},document.addEventListener("pointerdown",this._outsidePointerDown))}_detachOutsideListener(){!this._outsidePointerDown||typeof document>"u"||(document.removeEventListener("pointerdown",this._outsidePointerDown),this._outsidePointerDown=null)}_filteredOptions(){const e=S.normalizeCollectionText(this._query);return e?this._options.filter(t=>S.normalizeCollectionText(t.label).includes(e)||S.normalizeCollectionText(t.value).includes(e)):this._options}_renderLimit(){const e=Number(this.getAttribute("render-limit"));return Number.isFinite(e)&&e>0?e:200}_findOptionNode(e){return!e||!this._panelEl?null:Array.from(this._panelEl.querySelectorAll(".option")).find(t=>t.getAttribute("data-value")===e)}_selectedOptionRecords(){return this._selected.map(e=>this._options.find(t=>t.value===e)).filter(Boolean)}_emitChange(e,t){this.dispatchEvent(new CustomEvent("change",{detail:{value:[...this._selected],previousValue:t,selectedItems:this._selectedOptionRecords(),source:e},bubbles:!0,composed:!0}))}_setSelected(e,t){const s=Number(this.getAttribute("max-selections")),l=[];e.forEach(c=>{if(!c)return;const p=l.indexOf(c);p>=0&&l.splice(p,1),l.push(c)});const n=Number.isFinite(s)&&s>0?l.slice(-s):l,a=[...this._selected];if(a.length===n.length&&a.every((c,p)=>c===n[p])){this._syncUi();return}this._selected=n,this._selected.length?this.setAttribute("value",JSON.stringify(this._selected)):this.removeAttribute("value"),this._syncUi(),this._emitChange(t,a)}_toggleValue(e,t){if(this._isInteractionLocked()||this.hasAttribute("loading"))return;const l=this._selected.includes(e)?this._selected.filter(n=>n!==e):[...this._selected,e];this._activeValue=e,this._setSelected(l,t)}_removeChip(e){this._isInteractionLocked()||(this._activeValue===e&&(this._activeValue=null),this._toggleValue(e,"remove-chip"))}_clearSelection(e){if(!(this._isInteractionLocked()||!this._selected.length)){this._activeValue=null,this._setSelected([],e),this._query="",this._inputEl&&(this._inputEl.value="");try{this._inputEl?.focus({preventScroll:!0})}catch{this._inputEl?.focus()}}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const l=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");l&&typeof l.registerField=="function"&&n&&(this._formUnregister=l.registerField(n,{name:n,getValue:()=>[...this._selected],setValue:a=>{Array.isArray(a)?this._setSelected(a.map(c=>String(c)),"form"):this._setSelected(v(String(a??"")),"form")},validate:async()=>this.hasAttribute("required")&&this._selected.length===0?{valid:!1,message:"At least one option is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onInput(e){this._isInteractionLocked()||(this._query=e.target?.value||"",this.open||(this.open=!0),this._syncUi())}_onKeyDown(e){if(!this._isInteractionLocked()){if(e.key==="ArrowDown"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.getActiveItem()?this._panelEl.move(1,{focus:!1,owner:this._inputEl,scroll:!1}):this._panelEl?.focusBoundary("first",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="ArrowUp"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.getActiveItem()?this._panelEl.move(-1,{focus:!1,owner:this._inputEl,scroll:!1}):this._panelEl?.focusBoundary("last",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="Home"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.focusBoundary("first",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="End"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.focusBoundary("last",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="Enter"){const t=this._panelEl?.getActiveItem();if(t){e.preventDefault();const s=t.getAttribute("data-value");s&&(this._activeValue=s,this._toggleValue(s,"keyboard"),this._query="",this._inputEl&&(this._inputEl.value=""),this._inputEl?.focus())}return}if(e.key==="Escape"){e.preventDefault(),this._query?(this._query="",this._inputEl&&(this._inputEl.value="")):this.open=!1,this._syncUi();return}if(e.key==="Tab"){this.open=!1,this._syncUi();return}e.key==="Backspace"&&!this._query&&this._selected.length&&this._removeChip(this._selected[this._selected.length-1])}}_onToggle(){this._isInteractionLocked()||(this.open=!this.open,this._syncUi(),this.open&&this._inputEl?.focus())}_onFocusIn(){this._isInteractionLocked()||(this.open=!0),this._syncUi()}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||(this.open=!1,this._syncUi())}_syncUi(){if(this._isSyncingUi){this._needsSyncUi=!0;return}if(!(!this._shellEl||!this._inputEl||!this._panelEl)){this._isSyncingUi=!0;try{const e=(this.getAttribute("label")||"").trim(),t=(this.getAttribute("description")||"").trim(),s=(this.getAttribute("data-error")||"").trim(),l=this.root.querySelector(".meta"),n=this.root.querySelector(".label"),a=this.root.querySelector(".label-text"),c=this.root.querySelector(".required"),p=this.root.querySelector(".description"),D=this.root.querySelector(".chips"),C=this.root.querySelector(".toggle"),q=this.root.querySelector(".clear"),x=this.root.querySelector(".error"),U=this._selectionIndicator(),_=this.hasAttribute("loading"),V=(this.getAttribute("loading-text")||"Loading options...").trim(),m=this.hasAttribute("disabled"),b=this.hasAttribute("readonly"),F=this.hasAttribute("clearable");if(l.hidden=!e&&!t,n.hidden=!e,a.textContent=e,e)this._inputEl.setAttribute("aria-labelledby",`${this._uid}-label`),this._inputEl.removeAttribute("aria-label");else{this._inputEl.removeAttribute("aria-labelledby");const i=(this.getAttribute("aria-label")||"").trim();i?this._inputEl.setAttribute("aria-label",i):this._inputEl.removeAttribute("aria-label")}c.hidden=!this.hasAttribute("required"),p.hidden=!t,p.textContent=t,x.hidden=!s,x.textContent=s,x.id=`${this._uid}-error`,K.syncControlDescription(this._inputEl,this,this._uid,[t?`${this._uid}-description`:"",s?`${this._uid}-error`:""].filter(Boolean)),this._shellEl.setAttribute("data-open",this.open?"true":"false"),this._shellEl.setAttribute("data-invalid",s?"true":"false"),this._shellEl.setAttribute("data-readonly",b?"true":"false"),m?this._shellEl.setAttribute("aria-disabled","true"):this._shellEl.removeAttribute("aria-disabled"),C.setAttribute("data-open",this.open?"true":"false"),C.disabled=m||b,q.hidden=!F||this._selected.length===0,q.disabled=m||b,this._inputEl.setAttribute("aria-expanded",this.open?"true":"false"),this._inputEl.setAttribute("aria-busy",_?"true":"false"),this._inputEl.placeholder=this._selected.length?"":this.getAttribute("placeholder")||"Select options",this._inputEl.disabled=m,this._inputEl.readOnly=b,this._inputEl.value!==this._query&&(this._inputEl.value=this._query),this.open?this._attachOutsideListener():this._detachOutsideListener(),D.replaceChildren(...this._selectedOptionRecords().map(i=>{const h=document.createElement("span");h.className="chip",h.textContent=i.label;const d=document.createElement("button");return d.type="button",d.className="chip-remove",d.setAttribute("data-value",i.value),d.setAttribute("aria-label",`Remove ${i.label}`),d.textContent="×",d.disabled=this.hasAttribute("disabled"),d.addEventListener("pointerdown",o=>{o.preventDefault()}),d.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation(),this._removeChip(i.value),this._inputEl?.focus()}),h.append(d),h}));const y=this._filteredOptions(),$=this._renderLimit(),E=y.slice(0,$),B=y.length>E.length;if(O.setPanelOpen(this._panelEl,this.open,"bottom"),_?this._panelEl.setAttribute("aria-busy","true"):this._panelEl.removeAttribute("aria-busy"),_){const i=document.createElement("div");i.className="status",i.textContent=V,this._panelEl.replaceChildren(i),this._inputEl.removeAttribute("aria-activedescendant");return}if(!y.length){const i=document.createElement("div");i.className="status",i.setAttribute("role","option"),i.setAttribute("aria-disabled","true"),i.setAttribute("aria-selected","false"),i.textContent="No matching options",this._panelEl.replaceChildren(i),this._inputEl.removeAttribute("aria-activedescendant");return}const P=new Set(this._selected),T=this._panelEl.getActiveItem()?.getAttribute("data-value"),g=[];let A=null;if(E.forEach((i,h)=>{if(i.group&&i.group!==A){const u=document.createElement("div");u.className="group",u.setAttribute("role","presentation"),u.textContent=i.group,g.push(u),A=i.group}else i.group||(A=null);const d=P.has(i.value),o=document.createElement("button");o.className="option",o.type="button",o.id=`${this._uid}-option-${h}`,o.setAttribute("role","option"),o.setAttribute("data-value",i.value),o.setAttribute("data-selected",String(d)),o.setAttribute("data-indicator",U),o.setAttribute("aria-selected",d?"true":"false"),(i.disabled||m||b)&&(o.disabled=!0),o.addEventListener("pointerdown",u=>{u.preventDefault()}),o.addEventListener("click",u=>{u.preventDefault(),!i.disabled&&(this._activeValue=i.value,this._toggleValue(i.value,"option"),this._query="",this._inputEl&&(this._inputEl.value=""),this._inputEl?.focus())});const f=document.createElement("div");f.className="option-text";const z=document.createElement("span");if(z.className="option-label",z.textContent=i.label,f.append(z),i.description){const u=document.createElement("span");u.className="option-description",u.textContent=i.description,f.append(u)}if(U!=="none"){const u=document.createElement("span");u.className="check",u.textContent=d?"✓":"",o.append(u)}o.append(f),g.push(o)}),B){const i=document.createElement("div");i.className="status",i.textContent=`Showing first ${E.length} results. Keep typing to narrow the list.`,g.push(i)}this._panelEl.replaceChildren(...g);const R=T||this._activeValue||this._selected[this._selected.length-1]||null,k=this._findOptionNode(R),w=k&&!k.hasAttribute("disabled")?this._panelEl.setActiveItem(k,{focus:!1,owner:this._inputEl,scroll:!1}):(this._panelEl.clearActive(),null);this._activeValue=w?.getAttribute("data-value")||null,w?.id?this._inputEl.setAttribute("aria-activedescendant",w.id):this._inputEl.removeAttribute("aria-activedescendant")}finally{this._isSyncingUi=!1,this._needsSyncUi&&(this._needsSyncUi=!1,this._syncUi())}}}}typeof customElements<"u"&&!customElements.get("ui-multi-select")&&customElements.define("ui-multi-select",N);exports.UIMultiSelect=N;
+    `),this._options=N(this.getAttribute("options")),this._selected=v(this.getAttribute("value")),this._shellEl=this.root.querySelector(".shell"),this._inputEl=this.root.querySelector(".input"),this._panelEl=this.root.querySelector(".panel"),this._inputEl?.addEventListener("input",this._onInput),this._inputEl?.addEventListener("keydown",this._onKeyDown),this.root.querySelector(".toggle")?.addEventListener("click",this._onToggle),this.root.querySelector(".clear")?.addEventListener("click",()=>this._clearSelection("clear-button")),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.addEventListener("focusout",this._onFocusOut),this._syncVisualState(),this._syncUi()}_syncVisualState(){const e=D(this.getAttribute("radius")||this.getAttribute("shape"));e?this.style.setProperty("--ui-multi-select-radius",e):this.style.removeProperty("--ui-multi-select-radius");const t=D(this.getAttribute("option-radius"));t?this.style.setProperty("--ui-multi-select-option-radius",t):this.style.removeProperty("--ui-multi-select-option-radius");const s=G(this.getAttribute("size"));this.setAttribute("data-size",s)}_selectionIndicator(){const e=(this.getAttribute("selection-indicator")||"checkbox").trim().toLowerCase();return e==="none"||e==="check"?e:"checkbox"}_isInteractionLocked(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}_attachOutsideListener(){this._outsidePointerDown||typeof document>"u"||(this._outsidePointerDown=e=>{const t=e.composedPath();t.includes(this)||t.includes(this.root)||this._panelEl&&t.includes(this._panelEl)||this._inputEl&&t.includes(this._inputEl)||(this.open=!1,this._syncUi())},document.addEventListener("pointerdown",this._outsidePointerDown))}_detachOutsideListener(){!this._outsidePointerDown||typeof document>"u"||(document.removeEventListener("pointerdown",this._outsidePointerDown),this._outsidePointerDown=null)}_filteredOptions(){const e=C.normalizeCollectionText(this._query);return e?this._options.filter(t=>C.normalizeCollectionText(t.label).includes(e)||C.normalizeCollectionText(t.value).includes(e)):this._options}_renderLimit(){const e=Number(this.getAttribute("render-limit"));return Number.isFinite(e)&&e>0?e:200}_findOptionNode(e){return!e||!this._panelEl?null:Array.from(this._panelEl.querySelectorAll(".option")).find(t=>t.getAttribute("data-value")===e)}_selectedOptionRecords(){return this._selected.map(e=>this._options.find(t=>t.value===e)).filter(Boolean)}_emitChange(e,t){this.dispatchEvent(new CustomEvent("change",{detail:{value:[...this._selected],previousValue:t,selectedItems:this._selectedOptionRecords(),source:e},bubbles:!0,composed:!0}))}_setSelected(e,t){const s=Number(this.getAttribute("max-selections")),l=[];e.forEach(c=>{if(!c)return;const p=l.indexOf(c);p>=0&&l.splice(p,1),l.push(c)});const n=Number.isFinite(s)&&s>0?l.slice(-s):l,a=[...this._selected];if(a.length===n.length&&a.every((c,p)=>c===n[p])){this._syncUi();return}this._selected=n,this._selected.length?this.setAttribute("value",JSON.stringify(this._selected)):this.removeAttribute("value"),this._syncUi(),this._emitChange(t,a)}_toggleValue(e,t){if(this._isInteractionLocked()||this.hasAttribute("loading"))return;const l=this._selected.includes(e)?this._selected.filter(n=>n!==e):[...this._selected,e];this._activeValue=e,this._setSelected(l,t)}_removeChip(e){this._isInteractionLocked()||(this._activeValue===e&&(this._activeValue=null),this._toggleValue(e,"remove-chip"))}_clearSelection(e){if(!(this._isInteractionLocked()||!this._selected.length)){this._activeValue=null,this._setSelected([],e),this._query="",this._inputEl&&(this._inputEl.value="");try{this._inputEl?.focus({preventScroll:!0})}catch{this._inputEl?.focus()}}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const l=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");l&&typeof l.registerField=="function"&&n&&(this._formUnregister=l.registerField(n,{name:n,getValue:()=>[...this._selected],setValue:a=>{Array.isArray(a)?this._setSelected(a.map(c=>String(c)),"form"):this._setSelected(v(String(a??"")),"form")},validate:async()=>this.hasAttribute("required")&&this._selected.length===0?{valid:!1,message:"At least one option is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onInput(e){this._isInteractionLocked()||(this._query=e.target?.value||"",this.open||(this.open=!0),this._syncUi())}_onKeyDown(e){if(!this._isInteractionLocked()){if(e.key==="ArrowDown"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.getActiveItem()?this._panelEl.move(1,{focus:!1,owner:this._inputEl,scroll:!1}):this._panelEl?.focusBoundary("first",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="ArrowUp"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.getActiveItem()?this._panelEl.move(-1,{focus:!1,owner:this._inputEl,scroll:!1}):this._panelEl?.focusBoundary("last",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="Home"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.focusBoundary("first",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="End"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),this._panelEl?.focusBoundary("last",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="Enter"){const t=this._panelEl?.getActiveItem();if(t){e.preventDefault();const s=t.getAttribute("data-value");s&&(this._activeValue=s,this._toggleValue(s,"keyboard"),this._query="",this._inputEl&&(this._inputEl.value=""),this._inputEl?.focus())}return}if(e.key==="Escape"){e.preventDefault(),this._query?(this._query="",this._inputEl&&(this._inputEl.value="")):this.open=!1,this._syncUi();return}if(e.key==="Tab"){this.open=!1,this._syncUi();return}e.key==="Backspace"&&!this._query&&this._selected.length&&this._removeChip(this._selected[this._selected.length-1])}}_onToggle(){this._isInteractionLocked()||(this.open=!this.open,this._syncUi(),this.open&&this._inputEl?.focus())}_onFocusIn(){this._isInteractionLocked()||(this.open=!0),this._syncUi()}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||(this.open=!1,this._syncUi())}_syncUi(){if(this._isSyncingUi){this._needsSyncUi=!0;return}if(!(!this._shellEl||!this._inputEl||!this._panelEl)){this._isSyncingUi=!0;try{const e=(this.getAttribute("label")||"").trim(),t=(this.getAttribute("description")||"").trim(),s=(this.getAttribute("data-error")||"").trim(),l=this.root.querySelector(".meta"),n=this.root.querySelector(".label"),a=this.root.querySelector(".label-text"),c=this.root.querySelector(".required"),p=this.root.querySelector(".description"),F=this.root.querySelector(".chips"),U=this.root.querySelector(".toggle"),I=this.root.querySelector(".clear"),_=this.root.querySelector(".error"),L=this._selectionIndicator(),y=this.hasAttribute("loading"),$=(this.getAttribute("loading-text")||"Loading options...").trim(),m=this.hasAttribute("disabled"),b=this.hasAttribute("readonly"),P=this.hasAttribute("clearable");if(l.hidden=!e&&!t,n.hidden=!e,a.textContent=e,e)this._inputEl.setAttribute("aria-labelledby",`${this._uid}-label`),this._inputEl.removeAttribute("aria-label");else{this._inputEl.removeAttribute("aria-labelledby");const i=(this.getAttribute("aria-label")||"").trim();i?this._inputEl.setAttribute("aria-label",i):this._inputEl.removeAttribute("aria-label")}c.hidden=!this.hasAttribute("required"),p.hidden=!t,p.textContent=t,_.hidden=!s,_.textContent=s,_.id=`${this._uid}-error`,j.syncControlDescription(this._inputEl,this,this._uid,[t?`${this._uid}-description`:"",s?`${this._uid}-error`:""].filter(Boolean)),this._shellEl.setAttribute("data-open",this.open?"true":"false"),this._shellEl.setAttribute("data-invalid",s?"true":"false"),this._shellEl.setAttribute("data-readonly",b?"true":"false"),m?this._shellEl.setAttribute("aria-disabled","true"):this._shellEl.removeAttribute("aria-disabled"),U.setAttribute("data-open",this.open?"true":"false"),U.disabled=m||b,I.hidden=!P||this._selected.length===0,I.disabled=m||b,this._inputEl.setAttribute("aria-expanded",this.open?"true":"false"),this._inputEl.setAttribute("aria-busy",y?"true":"false"),this._inputEl.placeholder=this._selected.length?"":this.getAttribute("placeholder")||"Select options",this._inputEl.disabled=m,this._inputEl.readOnly=b,this._inputEl.value!==this._query&&(this._inputEl.value=this._query),this.open?this._attachOutsideListener():this._detachOutsideListener(),F.replaceChildren(...this._selectedOptionRecords().map(i=>{const h=document.createElement("span");h.className="chip",h.textContent=i.label;const d=document.createElement("button");return d.type="button",d.className="chip-remove",d.setAttribute("data-value",i.value),d.setAttribute("aria-label",`Remove ${i.label}`),d.textContent="×",d.disabled=this.hasAttribute("disabled"),d.addEventListener("pointerdown",o=>{o.preventDefault()}),d.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation(),this._removeChip(i.value),this._inputEl?.focus()}),h.append(d),h}));const E=this._filteredOptions(),B=this._renderLimit(),A=E.slice(0,B),T=E.length>A.length;if(V.setPanelOpen(this._panelEl,this.open,"bottom"),y?this._panelEl.setAttribute("aria-busy","true"):this._panelEl.removeAttribute("aria-busy"),y){const i=document.createElement("div");i.className="status",i.textContent=$,this._panelEl.replaceChildren(i),this._inputEl.removeAttribute("aria-activedescendant");return}if(!E.length){const i=document.createElement("div");i.className="status",i.setAttribute("role","option"),i.setAttribute("aria-disabled","true"),i.setAttribute("aria-selected","false"),i.textContent="No matching options",this._panelEl.replaceChildren(i),this._inputEl.removeAttribute("aria-activedescendant");return}const R=new Set(this._selected),M=this._panelEl.getActiveItem()?.getAttribute("data-value"),g=[];let k=null;if(A.forEach((i,h)=>{if(i.group&&i.group!==k){const u=document.createElement("div");u.className="group",u.setAttribute("role","presentation"),u.textContent=i.group,g.push(u),k=i.group}else i.group||(k=null);const d=R.has(i.value),o=document.createElement("button");o.className="option",o.type="button",o.id=`${this._uid}-option-${h}`,o.setAttribute("role","option"),o.setAttribute("data-value",i.value),o.setAttribute("data-selected",String(d)),o.setAttribute("data-indicator",L),o.setAttribute("aria-selected",d?"true":"false"),(i.disabled||m||b)&&(o.disabled=!0),o.addEventListener("pointerdown",u=>{u.preventDefault()}),o.addEventListener("click",u=>{u.preventDefault(),!i.disabled&&(this._activeValue=i.value,this._toggleValue(i.value,"option"),this._query="",this._inputEl&&(this._inputEl.value=""),this._inputEl?.focus())});const f=document.createElement("div");f.className="option-text";const S=document.createElement("span");if(S.className="option-label",S.textContent=i.label,f.append(S),i.description){const u=document.createElement("span");u.className="option-description",u.textContent=i.description,f.append(u)}if(L!=="none"){const u=document.createElement("span");u.className="check",u.textContent=d?"✓":"",o.append(u)}o.append(f),g.push(o)}),T){const i=document.createElement("div");i.className="status",i.textContent=`Showing first ${A.length} results. Keep typing to narrow the list.`,g.push(i)}this._panelEl.replaceChildren(...g);const K=M||this._activeValue||this._selected[this._selected.length-1]||null,w=this._findOptionNode(K),z=w&&!w.hasAttribute("disabled")?this._panelEl.setActiveItem(w,{focus:!1,owner:this._inputEl,scroll:!1}):(this._panelEl.clearActive(),null);this._activeValue=z?.getAttribute("data-value")||null,z?.id?this._inputEl.setAttribute("aria-activedescendant",z.id):this._inputEl.removeAttribute("aria-activedescendant")}finally{this._isSyncingUi=!1,this._needsSyncUi&&(this._needsSyncUi=!1,this._syncUi())}}}};q.formAssociated=!0;let x=q;typeof customElements<"u"&&!customElements.get("ui-multi-select")&&customElements.define("ui-multi-select",x);exports.UIMultiSelect=x;

package/dist/multi-select.esm.js

@@ -1,11 +1,12 @@
-import { E as T } from "./ElementBase-BeZT54Hj.mjs";
-import { O as R, s as K } from "./overlay-motion-BX3dPLay.mjs";
+import { E as K } from "./ElementBase-D5QsC5Vw.mjs";
+import { F as W, i as H } from "./form-control-D9wWUMBl.mjs";
+import { O as j, s as J } from "./overlay-motion-BX3dPLay.mjs";
 import { a as M } from "./control-name-Bpj7F34X.mjs";
 import { n as S } from "./collection-C7URGjEI.mjs";
 import "./listbox-hMVOhKHC.mjs";
-let W = 0;
-const H = `
-  ${R}
+let G = 0;
+const Y = `
+  ${j}
 
   :host {
     --ui-multi-select-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
@@ -474,8 +475,8 @@ const H = `
     --ui-multi-select-text: #e2e8f0;
     --ui-multi-select-muted: #93a4bd;
     --ui-multi-select-border-color: #334155;
-    --ui-multi-select-focus: #93c5fd;
-    --ui-multi-select-chip-bg: color-mix(in srgb, #93c5fd 18%, transparent);
+    --ui-multi-select-focus: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 18%, transparent);
     --ui-multi-select-chip-text: #e2e8f0;
   }
 
@@ -542,7 +543,7 @@ const H = `
     --ui-multi-select-chip-text: var(--ui-color-danger-text, color-mix(in srgb, var(--ui-color-danger, #dc2626) 82%, #0f172a 18%));
   }
 `;
-function q(r) {
+function O(r) {
   if (!r) return [];
   try {
     const e = JSON.parse(r);
@@ -585,15 +586,23 @@ function v(r) {
     }
   return e.split(",").map((t) => t.trim()).filter(Boolean);
 }
-function L(r) {
+function N(r) {
   return !r || r === "default" ? null : r === "none" || r === "square" ? "0px" : r === "sm" ? "8px" : r === "md" || r === "soft" ? "12px" : r === "lg" ? "16px" : r === "full" ? "999px" : /^\d+(\.\d+)?$/.test(r) ? `${r}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(r) ? r : null;
 }
-function j(r) {
+function Q(r) {
   return r === "sm" || r === "1" ? "sm" : r === "lg" || r === "3" ? "lg" : "md";
 }
-class J extends T {
+const q = class q extends K {
   constructor() {
-    super(), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++W}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
+    super(), this._formControl = new W(this, {
+      getValue: () => this.value,
+      getValidity: () => ({
+        valueMissing: H(this) && this.value.length === 0,
+        message: "Please select at least one item.",
+        anchor: this._inputEl
+      }),
+      defaultAttribute: "value"
+    }), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++G}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -641,14 +650,24 @@ class J extends T {
   set open(e) {
     e ? this.setAttribute("open", "") : this.removeAttribute("open");
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(e) {
+    this._formControl.formDisabledCallback(e);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    super.connectedCallback(), this._registerWithForm();
+    super.connectedCallback(), this._formControl.connect(), this._registerWithForm();
   }
   disconnectedCallback() {
-    this._detachOutsideListener(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+    this._formControl.disconnect(), this._detachOutsideListener(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   attributeChangedCallback(e, t, s) {
-    if (t !== s && (e === "options" && (this._options = q(s)), e === "value" && (this._selected = v(s)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
+    if (t !== s && (e === "options" && (this._options = O(s)), e === "value" && (this._selected = v(s)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
       if (e === "variant" || e === "tone" || e === "density" || e === "shape" || e === "size" || e === "radius" || e === "option-radius" || e === "elevation") {
         this._syncVisualState(), e === "size" && this._syncUi();
         return;
@@ -661,7 +680,7 @@ class J extends T {
   }
   render() {
     this.setContent(`
-      <style>${H}</style>
+      <style>${Y}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
@@ -684,14 +703,14 @@ class J extends T {
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `), this._options = q(this.getAttribute("options")), this._selected = v(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), this._inputEl?.addEventListener("input", this._onInput), this._inputEl?.addEventListener("keydown", this._onKeyDown), this.root.querySelector(".toggle")?.addEventListener("click", this._onToggle), this.root.querySelector(".clear")?.addEventListener("click", () => this._clearSelection("clear-button")), this._shellEl?.addEventListener("focusin", this._onFocusIn), this._shellEl?.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
+    `), this._options = O(this.getAttribute("options")), this._selected = v(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), this._inputEl?.addEventListener("input", this._onInput), this._inputEl?.addEventListener("keydown", this._onKeyDown), this.root.querySelector(".toggle")?.addEventListener("click", this._onToggle), this.root.querySelector(".clear")?.addEventListener("click", () => this._clearSelection("clear-button")), this._shellEl?.addEventListener("focusin", this._onFocusIn), this._shellEl?.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
   }
   _syncVisualState() {
-    const e = L(this.getAttribute("radius") || this.getAttribute("shape"));
+    const e = N(this.getAttribute("radius") || this.getAttribute("shape"));
     e ? this.style.setProperty("--ui-multi-select-radius", e) : this.style.removeProperty("--ui-multi-select-radius");
-    const t = L(this.getAttribute("option-radius"));
+    const t = N(this.getAttribute("option-radius"));
     t ? this.style.setProperty("--ui-multi-select-option-radius", t) : this.style.removeProperty("--ui-multi-select-option-radius");
-    const s = j(this.getAttribute("size"));
+    const s = Q(this.getAttribute("size"));
     this.setAttribute("data-size", s);
   }
   _selectionIndicator() {
@@ -846,7 +865,7 @@ class J extends T {
     if (!(!this._shellEl || !this._inputEl || !this._panelEl)) {
       this._isSyncingUi = !0;
       try {
-        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), O = this.root.querySelector(".chips"), C = this.root.querySelector(".toggle"), U = this.root.querySelector(".clear"), x = this.root.querySelector(".error"), I = this._selectionIndicator(), _ = this.hasAttribute("loading"), N = (this.getAttribute("loading-text") || "Loading options...").trim(), m = this.hasAttribute("disabled"), b = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
+        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), D = this.root.querySelector(".chips"), U = this.root.querySelector(".toggle"), I = this.root.querySelector(".clear"), x = this.root.querySelector(".error"), L = this._selectionIndicator(), _ = this.hasAttribute("loading"), V = (this.getAttribute("loading-text") || "Loading options...").trim(), m = this.hasAttribute("disabled"), b = this.hasAttribute("readonly"), F = this.hasAttribute("clearable");
         if (l.hidden = !e && !t, n.hidden = !e, a.textContent = e, e)
           this._inputEl.setAttribute("aria-labelledby", `${this._uid}-label`), this._inputEl.removeAttribute("aria-label");
         else {
@@ -859,7 +878,7 @@ class J extends T {
           this,
           this._uid,
           [t ? `${this._uid}-description` : "", s ? `${this._uid}-error` : ""].filter(Boolean)
-        ), this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", b ? "true" : "false"), m ? this._shellEl.setAttribute("aria-disabled", "true") : this._shellEl.removeAttribute("aria-disabled"), C.setAttribute("data-open", this.open ? "true" : "false"), C.disabled = m || b, U.hidden = !D || this._selected.length === 0, U.disabled = m || b, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", _ ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = m, this._inputEl.readOnly = b, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), O.replaceChildren(...this._selectedOptionRecords().map((i) => {
+        ), this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", b ? "true" : "false"), m ? this._shellEl.setAttribute("aria-disabled", "true") : this._shellEl.removeAttribute("aria-disabled"), U.setAttribute("data-open", this.open ? "true" : "false"), U.disabled = m || b, I.hidden = !F || this._selected.length === 0, I.disabled = m || b, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", _ ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = m, this._inputEl.readOnly = b, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), D.replaceChildren(...this._selectedOptionRecords().map((i) => {
           const h = document.createElement("span");
           h.className = "chip", h.textContent = i.label;
           const d = document.createElement("button");
@@ -869,10 +888,10 @@ class J extends T {
             o.preventDefault(), o.stopPropagation(), this._removeChip(i.value), this._inputEl?.focus();
           }), h.append(d), h;
         }));
-        const y = this._filteredOptions(), V = this._renderLimit(), E = y.slice(0, V), F = y.length > E.length;
-        if (K(this._panelEl, this.open, "bottom"), _ ? this._panelEl.setAttribute("aria-busy", "true") : this._panelEl.removeAttribute("aria-busy"), _) {
+        const y = this._filteredOptions(), $ = this._renderLimit(), E = y.slice(0, $), P = y.length > E.length;
+        if (J(this._panelEl, this.open, "bottom"), _ ? this._panelEl.setAttribute("aria-busy", "true") : this._panelEl.removeAttribute("aria-busy"), _) {
           const i = document.createElement("div");
-          i.className = "status", i.textContent = N, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
+          i.className = "status", i.textContent = V, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
         if (!y.length) {
@@ -880,15 +899,15 @@ class J extends T {
           i.className = "status", i.setAttribute("role", "option"), i.setAttribute("aria-disabled", "true"), i.setAttribute("aria-selected", "false"), i.textContent = "No matching options", this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        const $ = new Set(this._selected), B = this._panelEl.getActiveItem()?.getAttribute("data-value"), g = [];
+        const B = new Set(this._selected), R = this._panelEl.getActiveItem()?.getAttribute("data-value"), g = [];
         let A = null;
         if (E.forEach((i, h) => {
           if (i.group && i.group !== A) {
             const u = document.createElement("div");
             u.className = "group", u.setAttribute("role", "presentation"), u.textContent = i.group, g.push(u), A = i.group;
           } else i.group || (A = null);
-          const d = $.has(i.value), o = document.createElement("button");
-          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", I), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || m || b) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
+          const d = B.has(i.value), o = document.createElement("button");
+          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", L), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || m || b) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
             u.preventDefault();
           }), o.addEventListener("click", (u) => {
             u.preventDefault(), !i.disabled && (this._activeValue = i.value, this._toggleValue(i.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), this._inputEl?.focus());
@@ -900,25 +919,27 @@ class J extends T {
             const u = document.createElement("span");
             u.className = "option-description", u.textContent = i.description, f.append(u);
           }
-          if (I !== "none") {
+          if (L !== "none") {
             const u = document.createElement("span");
             u.className = "check", u.textContent = d ? "✓" : "", o.append(u);
           }
           o.append(f), g.push(o);
-        }), F) {
+        }), P) {
           const i = document.createElement("div");
           i.className = "status", i.textContent = `Showing first ${E.length} results. Keep typing to narrow the list.`, g.push(i);
         }
         this._panelEl.replaceChildren(...g);
-        const P = B || this._activeValue || this._selected[this._selected.length - 1] || null, k = this._findOptionNode(P), w = k && !k.hasAttribute("disabled") ? this._panelEl.setActiveItem(k, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
+        const T = R || this._activeValue || this._selected[this._selected.length - 1] || null, k = this._findOptionNode(T), w = k && !k.hasAttribute("disabled") ? this._panelEl.setActiveItem(k, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
         this._activeValue = w?.getAttribute("data-value") || null, w?.id ? this._inputEl.setAttribute("aria-activedescendant", w.id) : this._inputEl.removeAttribute("aria-activedescendant");
       } finally {
         this._isSyncingUi = !1, this._needsSyncUi && (this._needsSyncUi = !1, this._syncUi());
       }
     }
   }
-}
-typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", J);
+};
+q.formAssociated = !0;
+let C = q;
+typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", C);
 export {
-  J as UIMultiSelect
+  C as UIMultiSelect
 };

package/dist/navigate-CXebafwF.mjs

@@ -0,0 +1,18 @@
+function o(e, t) {
+  if (t && t !== "_self") return !0;
+  if (!e || !("button" in e)) return !1;
+  const n = e;
+  return n.metaKey || n.ctrlKey || n.shiftKey || n.altKey || (n.button ?? 0) !== 0;
+}
+function u(e, t, n, r = "") {
+  if (!t.href || o(n, r.trim())) return !1;
+  const i = new CustomEvent("navigate", { detail: t, bubbles: !0, composed: !0, cancelable: !0 });
+  return !e.dispatchEvent(i) || e.getAttribute("navigation") === "client";
+}
+function s(e, t) {
+  u(e, t) || typeof window < "u" && window.location.assign(t.href);
+}
+export {
+  s as n,
+  u as r
+};

package/dist/navigate-ChJVIIuS.js

@@ -0,0 +1 @@
+"use strict";function o(e,t){if(t&&t!=="_self")return!0;if(!e||!("button"in e))return!1;const n=e;return n.metaKey||n.ctrlKey||n.shiftKey||n.altKey||(n.button??0)!==0}function i(e,t,n,r=""){if(!t.href||o(n,r.trim()))return!1;const u=new CustomEvent("navigate",{detail:t,bubbles:!0,composed:!0,cancelable:!0});return!e.dispatchEvent(u)||e.getAttribute("navigation")==="client"}function a(e,t){i(e,t)||typeof window<"u"&&window.location.assign(t.href)}exports.navigateTo=a;exports.requestNavigate=i;

package/dist/navigation-menu.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-DxbvhLJs.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-CbUsP3D6.js"),_=`
   :host {
     display: block;
     position: relative;