@editora/ui-core 0.1.18 → 0.1.20

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-1b301e7f.js"),f=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-EV6mVBUV.js"),f=`
   :host {
     display: block;
     width: 100%;
@@ -202,7 +202,7 @@
   :host([data-meter-state="high"]:not([tone])) {
     --ui-meter-fill: #2563eb;
   }
-`;function s(i,e){if(i==null||i==="")return e;const t=Number(i);return Number.isFinite(t)?t:e}function o(i,e,t){return i<e?e:i>t?t:i}function g(i,e,t,r){return r==null?i<e?"low":i>t?"high":"optimum":r<e?i<=e?"optimum":i<=t?"suboptimum":"high":r>t?i>=t?"optimum":i>=e?"suboptimum":"low":i<e?"low":i>t?"high":"optimum"}class p extends b.ElementBase{constructor(){super(...arguments),this._lastChangeKey=""}static get observedAttributes(){return["value","min","max","low","high","optimum","label","show-label","format","precision","size","variant","tone","shape","mode"]}get metrics(){let e=s(this.getAttribute("min"),0),t=s(this.getAttribute("max"),1);t<=e&&(t=e+1);const r=o(s(this.getAttribute("value"),e),e,t),l=o(s(this.getAttribute("low"),e+(t-e)*.25),e,t),n=o(s(this.getAttribute("high"),e+(t-e)*.75),e,t),a=Math.min(l,n),c=Math.max(l,n),u=this.getAttribute("optimum"),m=u==null?null:o(s(u,r),e,t),d=(r-e)/(t-e)*100,h=g(r,a,c,m);return{value:r,min:e,max:t,low:a,high:c,optimum:m,percent:d,state:h,text:this._formatValue(r,e,t,d)}}_formatValue(e,t,r,l){const n=this.getAttribute("format")||"value",a=Math.max(0,Math.floor(s(this.getAttribute("precision"),0)));return n==="percent"?`${l.toFixed(a)}%`:n==="fraction"?`${e.toFixed(a)} / ${r.toFixed(a)}`:t===0&&r===1?e.toFixed(Math.max(a,2)):e.toFixed(a)}_emitChange(e){const t=[e.value,e.min,e.max,e.low,e.high,e.optimum??"",e.percent.toFixed(3),e.state].join("|");t!==this._lastChangeKey&&(this._lastChangeKey=t,this.dispatchEvent(new CustomEvent("change",{detail:{value:e.value,min:e.min,max:e.max,low:e.low,high:e.high,optimum:e.optimum,percent:e.percent,state:e.state},bubbles:!0,composed:!0})))}render(){const e=this.metrics,t=this.getAttribute("label")||"",r=this.hasAttribute("show-label")||!!t;this.setAttribute("data-meter-state",e.state),this.style.setProperty("--ui-meter-percent",e.percent.toFixed(3)),this.setContent(`
+`;function s(i,e){if(i==null||i==="")return e;const t=Number(i);return Number.isFinite(t)?t:e}function o(i,e,t){return i<e?e:i>t?t:i}function g(i,e,t,r){return r==null?i<e?"low":i>t?"high":"optimum":r<e?i<=e?"optimum":i<=t?"suboptimum":"high":r>t?i>=t?"optimum":i>=e?"suboptimum":"low":i<e?"low":i>t?"high":"optimum"}class p extends b.ElementBase{constructor(){super(...arguments),this._lastChangeKey=""}static get observedAttributes(){return["value","min","max","low","high","optimum","label","show-label","format","precision","size","variant","tone","shape","mode"]}get metrics(){const e=s(this.getAttribute("min"),0);let t=s(this.getAttribute("max"),1);t<=e&&(t=e+1);const r=o(s(this.getAttribute("value"),e),e,t),l=o(s(this.getAttribute("low"),e+(t-e)*.25),e,t),n=o(s(this.getAttribute("high"),e+(t-e)*.75),e,t),a=Math.min(l,n),c=Math.max(l,n),u=this.getAttribute("optimum"),m=u==null?null:o(s(u,r),e,t),d=(r-e)/(t-e)*100,h=g(r,a,c,m);return{value:r,min:e,max:t,low:a,high:c,optimum:m,percent:d,state:h,text:this._formatValue(r,e,t,d)}}_formatValue(e,t,r,l){const n=this.getAttribute("format")||"value",a=Math.max(0,Math.floor(s(this.getAttribute("precision"),0)));return n==="percent"?`${l.toFixed(a)}%`:n==="fraction"?`${e.toFixed(a)} / ${r.toFixed(a)}`:t===0&&r===1?e.toFixed(Math.max(a,2)):e.toFixed(a)}_emitChange(e){const t=[e.value,e.min,e.max,e.low,e.high,e.optimum??"",e.percent.toFixed(3),e.state].join("|");t!==this._lastChangeKey&&(this._lastChangeKey=t,this.dispatchEvent(new CustomEvent("change",{detail:{value:e.value,min:e.min,max:e.max,low:e.low,high:e.high,optimum:e.optimum,percent:e.percent,state:e.state},bubbles:!0,composed:!0})))}render(){const e=this.metrics,t=this.getAttribute("label")||"",r=this.hasAttribute("show-label")||!!t;this.setAttribute("data-meter-state",e.state),this.style.setProperty("--ui-meter-percent",e.percent.toFixed(3)),this.setContent(`
       <style>${f}</style>
       <div class="root">
         ${r?`

package/dist/meter.esm.js

@@ -1,4 +1,4 @@
-import { E as h } from "./ElementBase-909688f3.mjs";
+import { E as h } from "./ElementBase-YlTLMsGk.mjs";
 const b = `
   :host {
     display: block;
@@ -205,8 +205,7 @@ const b = `
   }
 `;
 function s(i, e) {
-  if (i == null || i === "")
-    return e;
+  if (i == null || i === "") return e;
   const t = Number(i);
   return Number.isFinite(t) ? t : e;
 }
@@ -240,7 +239,8 @@ class g extends h {
     ];
   }
   get metrics() {
-    let e = s(this.getAttribute("min"), 0), t = s(this.getAttribute("max"), 1);
+    const e = s(this.getAttribute("min"), 0);
+    let t = s(this.getAttribute("max"), 1);
     t <= e && (t = e + 1);
     const r = o(s(this.getAttribute("value"), e), e, t), l = o(s(this.getAttribute("low"), e + (t - e) * 0.25), e, t), n = o(s(this.getAttribute("high"), e + (t - e) * 0.75), e, t), a = Math.min(l, n), c = Math.max(l, n), u = this.getAttribute("optimum"), m = u == null ? null : o(s(u, r), e, t), d = (r - e) / (t - e) * 100, p = f(r, a, c, m);
     return {

package/dist/multi-select.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("./ElementBase-1b301e7f.js"),U=require("./collection-a2969ad2.js");require("./listbox-ef2f708e.js");require("./collection.cjs.js");let W=0;const j=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("./ElementBase-EV6mVBUV.js"),w=require("./collection-qv8A8rq4.js");require("./listbox-B6QgECax.js");let M=0;const K=`
   :host {
     --ui-multi-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 82%, transparent);
     --ui-multi-select-border: var(--base-multi-select-border, 1px solid var(--ui-multi-select-border-color));
@@ -522,8 +522,8 @@
     --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
     --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 82%, #0f172a 18%);
   }
-`;function N(l){if(!l)return[];try{const e=JSON.parse(l);if(!Array.isArray(e))return[];const t=[],i=(r,o)=>{const n=String(r.value??"").trim();n&&t.push({value:n,label:String(r.label??n),description:r.description?String(r.description):void 0,disabled:!!r.disabled,group:o})};return e.forEach(r=>{if(!r||typeof r!="object")return;const o=r;if(Array.isArray(o.options)){const n=String(o.label??"").trim();o.options.forEach(a=>{!a||typeof a!="object"||i(a,n||void 0)});return}i(o)}),t}catch{return[]}}function E(l){if(!l)return[];const e=l.trim();if(!e)return[];if(e.startsWith("["))try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(i=>String(i)).filter(Boolean)}catch{}return e.split(",").map(t=>t.trim()).filter(Boolean)}function D(l){return!l||l==="default"?null:l==="none"||l==="square"?"0px":l==="sm"?"8px":l==="md"||l==="soft"?"12px":l==="lg"?"16px":l==="full"?"999px":/^\d+(\.\d+)?$/.test(l)?`${l}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(l)?l:null}function H(l){return l==="sm"||l==="1"?"sm":l==="lg"||l==="3"?"lg":"md"}class F extends K.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","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(i=>String(i)).filter(Boolean):E(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,i){if(t!==i&&(e==="options"&&(this._options=N(i)),e==="value"&&(this._selected=E(i)),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(){var e,t,i,r,o,n;this.setContent(`
-      <style>${j}</style>
+`;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(u=>{!u||typeof u!="object"||s(u,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 W(r){return r==="sm"||r==="1"?"sm":r==="lg"||r==="3"?"lg":"md"}class O extends R.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-${++M}`,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","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>${K}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
@@ -546,4 +546,4 @@
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `),this._options=N(this.getAttribute("options")),this._selected=E(this.getAttribute("value")),this._shellEl=this.root.querySelector(".shell"),this._inputEl=this.root.querySelector(".input"),this._panelEl=this.root.querySelector(".panel"),(e=this._inputEl)==null||e.addEventListener("input",this._onInput),(t=this._inputEl)==null||t.addEventListener("keydown",this._onKeyDown),(i=this.root.querySelector(".toggle"))==null||i.addEventListener("click",this._onToggle),(r=this.root.querySelector(".clear"))==null||r.addEventListener("click",()=>this._clearSelection("clear-button")),(o=this._shellEl)==null||o.addEventListener("focusin",this._onFocusIn),(n=this._shellEl)==null||n.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 i=H(this.getAttribute("size"));this.setAttribute("data-size",i)}_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=U.normalizeCollectionText(this._query);return e?this._options.filter(t=>U.normalizeCollectionText(t.label).includes(e)||U.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 i=Number(this.getAttribute("max-selections")),r=[];e.forEach(a=>{if(!a)return;const p=r.indexOf(a);p>=0&&r.splice(p,1),r.push(a)});const o=Number.isFinite(i)&&i>0?r.slice(-i):r,n=[...this._selected];if(n.length===o.length&&n.every((a,p)=>a===o[p])){this._syncUi();return}this._selected=o,this._selected.length?this.setAttribute("value",JSON.stringify(this._selected)):this.removeAttribute("value"),this._syncUi(),this._emitChange(t,n)}_toggleValue(e,t){if(this._isInteractionLocked()||this.hasAttribute("loading"))return;const r=this._selected.includes(e)?this._selected.filter(o=>o!==e):[...this._selected,e];this._activeValue=e,this._setSelected(r,t)}_removeChip(e){this._isInteractionLocked()||(this._activeValue===e&&(this._activeValue=null),this._toggleValue(e,"remove-chip"))}_clearSelection(e){var t,i;if(!(this._isInteractionLocked()||!this._selected.length)){this._activeValue=null,this._setSelected([],e),this._query="",this._inputEl&&(this._inputEl.value="");try{(t=this._inputEl)==null||t.focus({preventScroll:!0})}catch{(i=this._inputEl)==null||i.focus()}}}_registerWithForm(){var e;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const i=this.getRootNode().host,o=((e=i==null?void 0:i.closest)==null?void 0:e.call(i,"ui-form"))||null||this.closest("ui-form"),n=this.getAttribute("name");o&&typeof o.registerField=="function"&&n&&(this._formUnregister=o.registerField(n,{name:n,getValue:()=>[...this._selected],setValue:a=>{Array.isArray(a)?this._setSelected(a.map(p=>String(p)),"form"):this._setSelected(E(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){var t;this._isInteractionLocked()||(this._query=((t=e.target)==null?void 0:t.value)||"",this.open||(this.open=!0),this._syncUi())}_onKeyDown(e){var t,i,r,o,n,a,p,f;if(!this._isInteractionLocked()){if(e.key==="ArrowDown"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),(t=this._panelEl)!=null&&t.getActiveItem()?this._panelEl.move(1,{focus:!1,owner:this._inputEl,scroll:!1}):(i=this._panelEl)==null||i.focusBoundary("first",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="ArrowUp"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),(r=this._panelEl)!=null&&r.getActiveItem()?this._panelEl.move(-1,{focus:!1,owner:this._inputEl,scroll:!1}):(o=this._panelEl)==null||o.focusBoundary("last",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="Home"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),(n=this._panelEl)==null||n.focusBoundary("first",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="End"){e.preventDefault(),this.open||(this.open=!0),this._syncUi(),(a=this._panelEl)==null||a.focusBoundary("last",{focus:!1,owner:this._inputEl,scroll:!1});return}if(e.key==="Enter"){const v=(p=this._panelEl)==null?void 0:p.getActiveItem();if(v){e.preventDefault();const g=v.getAttribute("data-value");g&&(this._activeValue=g,this._toggleValue(g,"keyboard"),this._query="",this._inputEl&&(this._inputEl.value=""),(f=this._inputEl)==null||f.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(){var e;this._isInteractionLocked()||(this.open=!this.open,this._syncUi(),this.open&&((e=this._inputEl)==null||e.focus()))}_onFocusIn(){this._isInteractionLocked()||(this.open=!0),this._syncUi()}_onFocusOut(e){var t;(t=this._shellEl)!=null&&t.contains(e.relatedTarget)||(this.open=!1,this._syncUi())}_syncUi(){var e;if(this._isSyncingUi){this._needsSyncUi=!0;return}if(!(!this._shellEl||!this._inputEl||!this._panelEl)){this._isSyncingUi=!0;try{const t=(this.getAttribute("label")||"").trim(),i=(this.getAttribute("description")||"").trim(),r=(this.getAttribute("data-error")||"").trim(),o=this.root.querySelector(".meta"),n=this.root.querySelector(".label"),a=this.root.querySelector(".label-text"),p=this.root.querySelector(".required"),f=this.root.querySelector(".description"),v=this.root.querySelector(".chips"),g=this.root.querySelector(".toggle"),q=this.root.querySelector(".clear"),C=this.root.querySelector(".error"),I=this._selectionIndicator(),L=this.hasAttribute("loading"),V=(this.getAttribute("loading-text")||"Loading options...").trim(),_=this.hasAttribute("disabled"),x=this.hasAttribute("readonly"),B=this.hasAttribute("clearable");o.hidden=!t&&!i,n.hidden=!t,a.textContent=t,p.hidden=!this.hasAttribute("required"),f.hidden=!i,f.textContent=i,C.hidden=!r,C.textContent=r,this._shellEl.setAttribute("data-open",this.open?"true":"false"),this._shellEl.setAttribute("data-invalid",r?"true":"false"),this._shellEl.setAttribute("data-readonly",x?"true":"false"),g.setAttribute("data-open",this.open?"true":"false"),g.disabled=_||x,q.hidden=!B||this._selected.length===0,q.disabled=_||x,this._inputEl.setAttribute("aria-expanded",this.open?"true":"false"),this._inputEl.setAttribute("aria-busy",L?"true":"false"),this._inputEl.placeholder=this._selected.length?"":this.getAttribute("placeholder")||"Select options",this._inputEl.disabled=_,this._inputEl.readOnly=x,this._inputEl.value!==this._query&&(this._inputEl.value=this._query),this.open?this._attachOutsideListener():this._detachOutsideListener(),v.replaceChildren(...this._selectedOptionRecords().map(s=>{const b=document.createElement("span");b.className="chip",b.textContent=s.label;const d=document.createElement("button");return d.type="button",d.className="chip-remove",d.setAttribute("data-value",s.value),d.setAttribute("aria-label",`Remove ${s.label}`),d.textContent="×",d.disabled=this.hasAttribute("disabled"),d.addEventListener("pointerdown",u=>{u.preventDefault()}),d.addEventListener("click",u=>{var m;u.preventDefault(),u.stopPropagation(),this._removeChip(s.value),(m=this._inputEl)==null||m.focus()}),b.append(d),b}));const A=this._filteredOptions(),P=this._renderLimit(),k=A.slice(0,P),T=A.length>k.length;if(this._panelEl.hidden=!this.open,L){const s=document.createElement("div");s.className="status",s.textContent=V,this._panelEl.replaceChildren(s),this._inputEl.removeAttribute("aria-activedescendant");return}if(!A.length){const s=document.createElement("div");s.className="status",s.textContent="No matching options",this._panelEl.replaceChildren(s),this._inputEl.removeAttribute("aria-activedescendant");return}const $=new Set(this._selected),R=(e=this._panelEl.getActiveItem())==null?void 0:e.getAttribute("data-value"),y=[];let w=null;if(k.forEach((s,b)=>{if(s.group&&s.group!==w){const c=document.createElement("div");c.className="group",c.setAttribute("role","presentation"),c.textContent=s.group,y.push(c),w=s.group}else s.group||(w=null);const d=$.has(s.value),u=document.createElement("button");u.className="option",u.type="button",u.id=`${this._uid}-option-${b}`,u.setAttribute("role","option"),u.setAttribute("data-value",s.value),u.setAttribute("data-selected",String(d)),u.setAttribute("data-indicator",I),u.setAttribute("aria-selected",d?"true":"false"),(s.disabled||_||x)&&(u.disabled=!0),u.addEventListener("pointerdown",c=>{c.preventDefault()}),u.addEventListener("click",c=>{var O;c.preventDefault(),!s.disabled&&(this._activeValue=s.value,this._toggleValue(s.value,"option"),this._query="",this._inputEl&&(this._inputEl.value=""),(O=this._inputEl)==null||O.focus())});const m=document.createElement("div");m.className="option-text";const S=document.createElement("span");if(S.className="option-label",S.textContent=s.label,m.append(S),s.description){const c=document.createElement("span");c.className="option-description",c.textContent=s.description,m.append(c)}if(I!=="none"){const c=document.createElement("span");c.className="check",c.textContent=d?"✓":"",u.append(c)}u.append(m),y.push(u)}),T){const s=document.createElement("div");s.className="status",s.textContent=`Showing first ${k.length} results. Keep typing to narrow the list.`,y.push(s)}this._panelEl.replaceChildren(...y);const M=R||this._activeValue||this._selected[this._selected.length-1]||null,z=this._findOptionNode(M),h=z&&!z.hasAttribute("disabled")?this._panelEl.setActiveItem(z,{focus:!1,owner:this._inputEl,scroll:!1}):(this._panelEl.clearActive(),null);this._activeValue=(h==null?void 0:h.getAttribute("data-value"))||null,h!=null&&h.id?this._inputEl.setAttribute("aria-activedescendant",h.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",F);exports.UIMultiSelect=F;
+    `),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=W(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=w.normalizeCollectionText(this._query);return e?this._options.filter(t=>w.normalizeCollectionText(t.label).includes(e)||w.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(u=>{if(!u)return;const p=l.indexOf(u);p>=0&&l.splice(p,1),l.push(u)});const n=Number.isFinite(s)&&s>0?l.slice(-s):l,a=[...this._selected];if(a.length===n.length&&a.every((u,p)=>u===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(u=>String(u)),"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"),u=this.root.querySelector(".required"),p=this.root.querySelector(".description"),N=this.root.querySelector(".chips"),z=this.root.querySelector(".toggle"),S=this.root.querySelector(".clear"),U=this.root.querySelector(".error"),C=this._selectionIndicator(),q=this.hasAttribute("loading"),D=(this.getAttribute("loading-text")||"Loading options...").trim(),g=this.hasAttribute("disabled"),m=this.hasAttribute("readonly"),F=this.hasAttribute("clearable");l.hidden=!e&&!t,n.hidden=!e,a.textContent=e,u.hidden=!this.hasAttribute("required"),p.hidden=!t,p.textContent=t,U.hidden=!s,U.textContent=s,this._shellEl.setAttribute("data-open",this.open?"true":"false"),this._shellEl.setAttribute("data-invalid",s?"true":"false"),this._shellEl.setAttribute("data-readonly",m?"true":"false"),z.setAttribute("data-open",this.open?"true":"false"),z.disabled=g||m,S.hidden=!F||this._selected.length===0,S.disabled=g||m,this._inputEl.setAttribute("aria-expanded",this.open?"true":"false"),this._inputEl.setAttribute("aria-busy",q?"true":"false"),this._inputEl.placeholder=this._selected.length?"":this.getAttribute("placeholder")||"Select options",this._inputEl.disabled=g,this._inputEl.readOnly=m,this._inputEl.value!==this._query&&(this._inputEl.value=this._query),this.open?this._attachOutsideListener():this._detachOutsideListener(),N.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 x=this._filteredOptions(),V=this._renderLimit(),_=x.slice(0,V),B=x.length>_.length;if(this._panelEl.hidden=!this.open,q){const i=document.createElement("div");i.className="status",i.textContent=D,this._panelEl.replaceChildren(i),this._inputEl.removeAttribute("aria-activedescendant");return}if(!x.length){const i=document.createElement("div");i.className="status",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"),b=[];let y=null;if(_.forEach((i,h)=>{if(i.group&&i.group!==y){const c=document.createElement("div");c.className="group",c.setAttribute("role","presentation"),c.textContent=i.group,b.push(c),y=i.group}else i.group||(y=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",C),o.setAttribute("aria-selected",d?"true":"false"),(i.disabled||g||m)&&(o.disabled=!0),o.addEventListener("pointerdown",c=>{c.preventDefault()}),o.addEventListener("click",c=>{c.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 k=document.createElement("span");if(k.className="option-label",k.textContent=i.label,f.append(k),i.description){const c=document.createElement("span");c.className="option-description",c.textContent=i.description,f.append(c)}if(C!=="none"){const c=document.createElement("span");c.className="check",c.textContent=d?"✓":"",o.append(c)}o.append(f),b.push(o)}),B){const i=document.createElement("div");i.className="status",i.textContent=`Showing first ${_.length} results. Keep typing to narrow the list.`,b.push(i)}this._panelEl.replaceChildren(...b);const $=T||this._activeValue||this._selected[this._selected.length-1]||null,E=this._findOptionNode($),A=E&&!E.hasAttribute("disabled")?this._panelEl.setActiveItem(E,{focus:!1,owner:this._inputEl,scroll:!1}):(this._panelEl.clearActive(),null);this._activeValue=A?.getAttribute("data-value")||null,A?.id?this._inputEl.setAttribute("aria-activedescendant",A.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",O);exports.UIMultiSelect=O;

package/dist/multi-select.esm.js

@@ -1,9 +1,8 @@
-import { E as K } from "./ElementBase-909688f3.mjs";
-import { n as U } from "./collection-a1aac0c6.mjs";
-import "./listbox-308789a0.mjs";
-import "./collection.esm.js";
-let W = 0;
-const H = `
+import { E as T } from "./ElementBase-YlTLMsGk.mjs";
+import { n as w } from "./collection-C7URGjEI.mjs";
+import "./listbox-DJamVeFj.mjs";
+let R = 0;
+const K = `
   :host {
     --ui-multi-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 82%, transparent);
     --ui-multi-select-border: var(--base-multi-select-border, 1px solid var(--ui-multi-select-border-color));
@@ -528,64 +527,58 @@ const H = `
     --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 82%, #0f172a 18%);
   }
 `;
-function O(l) {
-  if (!l)
-    return [];
+function I(r) {
+  if (!r) return [];
   try {
-    const e = JSON.parse(l);
-    if (!Array.isArray(e))
-      return [];
-    const t = [], i = (r, o) => {
-      const n = String(r.value ?? "").trim();
-      n && t.push({
-        value: n,
-        label: String(r.label ?? n),
-        description: r.description ? String(r.description) : void 0,
-        disabled: !!r.disabled,
-        group: o
+    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((r) => {
-      if (!r || typeof r != "object")
-        return;
-      const o = r;
-      if (Array.isArray(o.options)) {
-        const n = String(o.label ?? "").trim();
-        o.options.forEach((a) => {
-          !a || typeof a != "object" || i(a, n || void 0);
+    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((u) => {
+          !u || typeof u != "object" || s(u, a || void 0);
         });
         return;
       }
-      i(o);
+      s(n);
     }), t;
   } catch {
     return [];
   }
 }
-function E(l) {
-  if (!l)
-    return [];
-  const e = l.trim();
-  if (!e)
-    return [];
+function x(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((i) => String(i)).filter(Boolean);
+      if (Array.isArray(t)) return t.map((s) => String(s)).filter(Boolean);
     } catch {
     }
   return e.split(",").map((t) => t.trim()).filter(Boolean);
 }
-function D(l) {
-  return !l || l === "default" ? null : l === "none" || l === "square" ? "0px" : l === "sm" ? "8px" : l === "md" || l === "soft" ? "12px" : l === "lg" ? "16px" : l === "full" ? "999px" : /^\d+(\.\d+)?$/.test(l) ? `${l}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(l) ? l : null;
+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 M(l) {
-  return l === "sm" || l === "1" ? "sm" : l === "lg" || l === "3" ? "lg" : "md";
+function W(r) {
+  return r === "sm" || r === "1" ? "sm" : r === "lg" || r === "3" ? "lg" : "md";
 }
-class j extends K {
+class H extends T {
   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._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-${++R}`, 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 [
@@ -621,7 +614,7 @@ class j extends K {
     return [...this._selected];
   }
   set value(e) {
-    const t = Array.isArray(e) ? e.map((i) => String(i)).filter(Boolean) : E(String(e ?? ""));
+    const t = Array.isArray(e) ? e.map((s) => String(s)).filter(Boolean) : x(String(e ?? ""));
     this._setSelected(t, "api");
   }
   get open() {
@@ -636,8 +629,8 @@ class j extends K {
   disconnectedCallback() {
     this._detachOutsideListener(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i && (e === "options" && (this._options = O(i)), e === "value" && (this._selected = E(i)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
+  attributeChangedCallback(e, t, s) {
+    if (t !== s && (e === "options" && (this._options = I(s)), e === "value" && (this._selected = x(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;
@@ -649,9 +642,8 @@ class j extends K {
     return !1;
   }
   render() {
-    var e, t, i, r, o, n;
     this.setContent(`
-      <style>${H}</style>
+      <style>${K}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
@@ -674,15 +666,15 @@ class j extends K {
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `), this._options = O(this.getAttribute("options")), this._selected = E(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), (e = this._inputEl) == null || e.addEventListener("input", this._onInput), (t = this._inputEl) == null || t.addEventListener("keydown", this._onKeyDown), (i = this.root.querySelector(".toggle")) == null || i.addEventListener("click", this._onToggle), (r = this.root.querySelector(".clear")) == null || r.addEventListener("click", () => this._clearSelection("clear-button")), (o = this._shellEl) == null || o.addEventListener("focusin", this._onFocusIn), (n = this._shellEl) == null || n.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
+    `), this._options = I(this.getAttribute("options")), this._selected = x(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"));
+    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 = D(this.getAttribute("option-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 i = M(this.getAttribute("size"));
-    this.setAttribute("data-size", i);
+    const s = W(this.getAttribute("size"));
+    this.setAttribute("data-size", s);
   }
   _selectionIndicator() {
     const e = (this.getAttribute("selection-indicator") || "checkbox").trim().toLowerCase();
@@ -701,8 +693,8 @@ class j extends K {
     !this._outsidePointerDown || typeof document > "u" || (document.removeEventListener("pointerdown", this._outsidePointerDown), this._outsidePointerDown = null);
   }
   _filteredOptions() {
-    const e = U(this._query);
-    return e ? this._options.filter((t) => U(t.label).includes(e) || U(t.value).includes(e)) : this._options;
+    const e = w(this._query);
+    return e ? this._options.filter((t) => w(t.label).includes(e) || w(t.value).includes(e)) : this._options;
   }
   _renderLimit() {
     const e = Number(this.getAttribute("render-limit"));
@@ -729,50 +721,46 @@ class j extends K {
     );
   }
   _setSelected(e, t) {
-    const i = Number(this.getAttribute("max-selections")), r = [];
-    e.forEach((a) => {
-      if (!a)
-        return;
-      const p = r.indexOf(a);
-      p >= 0 && r.splice(p, 1), r.push(a);
+    const s = Number(this.getAttribute("max-selections")), l = [];
+    e.forEach((u) => {
+      if (!u) return;
+      const p = l.indexOf(u);
+      p >= 0 && l.splice(p, 1), l.push(u);
     });
-    const o = Number.isFinite(i) && i > 0 ? r.slice(-i) : r, n = [...this._selected];
-    if (n.length === o.length && n.every((a, p) => a === o[p])) {
+    const n = Number.isFinite(s) && s > 0 ? l.slice(-s) : l, a = [...this._selected];
+    if (a.length === n.length && a.every((u, p) => u === n[p])) {
       this._syncUi();
       return;
     }
-    this._selected = o, this._selected.length ? this.setAttribute("value", JSON.stringify(this._selected)) : this.removeAttribute("value"), this._syncUi(), this._emitChange(t, n);
+    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 r = this._selected.includes(e) ? this._selected.filter((o) => o !== e) : [...this._selected, e];
-    this._activeValue = e, this._setSelected(r, 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) {
-    var t, i;
     if (!(this._isInteractionLocked() || !this._selected.length)) {
       this._activeValue = null, this._setSelected([], e), this._query = "", this._inputEl && (this._inputEl.value = "");
       try {
-        (t = this._inputEl) == null || t.focus({ preventScroll: !0 });
+        this._inputEl?.focus({ preventScroll: !0 });
       } catch {
-        (i = this._inputEl) == null || i.focus();
+        this._inputEl?.focus();
       }
     }
   }
   _registerWithForm() {
-    var e;
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const i = this.getRootNode().host, o = ((e = i == null ? void 0 : i.closest) == null ? void 0 : e.call(i, "ui-form")) || null || this.closest("ui-form"), n = this.getAttribute("name");
-      o && typeof o.registerField == "function" && n && (this._formUnregister = o.registerField(n, {
+      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((p) => String(p)), "form") : this._setSelected(E(String(a ?? "")), "form");
+          Array.isArray(a) ? this._setSelected(a.map((u) => String(u)), "form") : this._setSelected(x(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) => {
@@ -783,34 +771,32 @@ class j extends K {
     }
   }
   _onInput(e) {
-    var t;
-    this._isInteractionLocked() || (this._query = ((t = e.target) == null ? void 0 : t.value) || "", this.open || (this.open = !0), this._syncUi());
+    this._isInteractionLocked() || (this._query = e.target?.value || "", this.open || (this.open = !0), this._syncUi());
   }
   _onKeyDown(e) {
-    var t, i, r, o, n, a, p, f;
     if (!this._isInteractionLocked()) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), this.open || (this.open = !0), this._syncUi(), (t = this._panelEl) != null && t.getActiveItem() ? this._panelEl.move(1, { focus: !1, owner: this._inputEl, scroll: !1 }) : (i = this._panelEl) == null || i.focusBoundary("first", { focus: !1, owner: this._inputEl, scroll: !1 });
+        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(), (r = this._panelEl) != null && r.getActiveItem() ? this._panelEl.move(-1, { focus: !1, owner: this._inputEl, scroll: !1 }) : (o = this._panelEl) == null || o.focusBoundary("last", { focus: !1, owner: this._inputEl, scroll: !1 });
+        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(), (n = this._panelEl) == null || n.focusBoundary("first", { focus: !1, owner: this._inputEl, scroll: !1 });
+        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(), (a = this._panelEl) == null || a.focusBoundary("last", { focus: !1, owner: this._inputEl, scroll: !1 });
+        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 v = (p = this._panelEl) == null ? void 0 : p.getActiveItem();
-        if (v) {
+        const t = this._panelEl?.getActiveItem();
+        if (t) {
           e.preventDefault();
-          const g = v.getAttribute("data-value");
-          g && (this._activeValue = g, this._toggleValue(g, "keyboard"), this._query = "", this._inputEl && (this._inputEl.value = ""), (f = this._inputEl) == null || f.focus());
+          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;
       }
@@ -826,18 +812,15 @@ class j extends K {
     }
   }
   _onToggle() {
-    var e;
-    this._isInteractionLocked() || (this.open = !this.open, this._syncUi(), this.open && ((e = this._inputEl) == null || e.focus()));
+    this._isInteractionLocked() || (this.open = !this.open, this._syncUi(), this.open && this._inputEl?.focus());
   }
   _onFocusIn() {
     this._isInteractionLocked() || (this.open = !0), this._syncUi();
   }
   _onFocusOut(e) {
-    var t;
-    (t = this._shellEl) != null && t.contains(e.relatedTarget) || (this.open = !1, this._syncUi());
+    this._shellEl?.contains(e.relatedTarget) || (this.open = !1, this._syncUi());
   }
   _syncUi() {
-    var e;
     if (this._isSyncingUi) {
       this._needsSyncUi = !0;
       return;
@@ -845,70 +828,67 @@ class j extends K {
     if (!(!this._shellEl || !this._inputEl || !this._panelEl)) {
       this._isSyncingUi = !0;
       try {
-        const t = (this.getAttribute("label") || "").trim(), i = (this.getAttribute("description") || "").trim(), r = (this.getAttribute("data-error") || "").trim(), o = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), p = this.root.querySelector(".required"), f = this.root.querySelector(".description"), v = this.root.querySelector(".chips"), g = this.root.querySelector(".toggle"), C = this.root.querySelector(".clear"), q = this.root.querySelector(".error"), I = this._selectionIndicator(), L = this.hasAttribute("loading"), F = (this.getAttribute("loading-text") || "Loading options...").trim(), _ = this.hasAttribute("disabled"), x = this.hasAttribute("readonly"), V = this.hasAttribute("clearable");
-        o.hidden = !t && !i, n.hidden = !t, a.textContent = t, p.hidden = !this.hasAttribute("required"), f.hidden = !i, f.textContent = i, q.hidden = !r, q.textContent = r, this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", r ? "true" : "false"), this._shellEl.setAttribute("data-readonly", x ? "true" : "false"), g.setAttribute("data-open", this.open ? "true" : "false"), g.disabled = _ || x, C.hidden = !V || this._selected.length === 0, C.disabled = _ || x, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", L ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = _, this._inputEl.readOnly = x, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), v.replaceChildren(...this._selectedOptionRecords().map((s) => {
-          const b = document.createElement("span");
-          b.className = "chip", b.textContent = s.label;
+        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"), u = this.root.querySelector(".required"), p = this.root.querySelector(".description"), N = this.root.querySelector(".chips"), z = this.root.querySelector(".toggle"), S = this.root.querySelector(".clear"), U = this.root.querySelector(".error"), C = this._selectionIndicator(), q = this.hasAttribute("loading"), O = (this.getAttribute("loading-text") || "Loading options...").trim(), g = this.hasAttribute("disabled"), m = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
+        l.hidden = !e && !t, n.hidden = !e, a.textContent = e, u.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, U.hidden = !s, U.textContent = s, this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", m ? "true" : "false"), z.setAttribute("data-open", this.open ? "true" : "false"), z.disabled = g || m, S.hidden = !D || this._selected.length === 0, S.disabled = g || m, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", q ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = g, this._inputEl.readOnly = m, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), N.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", s.value), d.setAttribute("aria-label", `Remove ${s.label}`), d.textContent = "×", d.disabled = this.hasAttribute("disabled"), d.addEventListener("pointerdown", (c) => {
-            c.preventDefault();
-          }), d.addEventListener("click", (c) => {
-            var m;
-            c.preventDefault(), c.stopPropagation(), this._removeChip(s.value), (m = this._inputEl) == null || m.focus();
-          }), b.append(d), b;
+          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 A = this._filteredOptions(), B = this._renderLimit(), k = A.slice(0, B), P = A.length > k.length;
-        if (this._panelEl.hidden = !this.open, L) {
-          const s = document.createElement("div");
-          s.className = "status", s.textContent = F, this._panelEl.replaceChildren(s), this._inputEl.removeAttribute("aria-activedescendant");
+        const v = this._filteredOptions(), F = this._renderLimit(), _ = v.slice(0, F), V = v.length > _.length;
+        if (this._panelEl.hidden = !this.open, q) {
+          const i = document.createElement("div");
+          i.className = "status", i.textContent = O, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        if (!A.length) {
-          const s = document.createElement("div");
-          s.className = "status", s.textContent = "No matching options", this._panelEl.replaceChildren(s), this._inputEl.removeAttribute("aria-activedescendant");
+        if (!v.length) {
+          const i = document.createElement("div");
+          i.className = "status", i.textContent = "No matching options", this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        const $ = new Set(this._selected), T = (e = this._panelEl.getActiveItem()) == null ? void 0 : e.getAttribute("data-value"), y = [];
-        let w = null;
-        if (k.forEach((s, b) => {
-          if (s.group && s.group !== w) {
-            const u = document.createElement("div");
-            u.className = "group", u.setAttribute("role", "presentation"), u.textContent = s.group, y.push(u), w = s.group;
-          } else
-            s.group || (w = null);
-          const d = $.has(s.value), c = document.createElement("button");
-          c.className = "option", c.type = "button", c.id = `${this._uid}-option-${b}`, c.setAttribute("role", "option"), c.setAttribute("data-value", s.value), c.setAttribute("data-selected", String(d)), c.setAttribute("data-indicator", I), c.setAttribute("aria-selected", d ? "true" : "false"), (s.disabled || _ || x) && (c.disabled = !0), c.addEventListener("pointerdown", (u) => {
-            u.preventDefault();
-          }), c.addEventListener("click", (u) => {
-            var N;
-            u.preventDefault(), !s.disabled && (this._activeValue = s.value, this._toggleValue(s.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), (N = this._inputEl) == null || N.focus());
+        const B = new Set(this._selected), P = this._panelEl.getActiveItem()?.getAttribute("data-value"), b = [];
+        let y = null;
+        if (_.forEach((i, h) => {
+          if (i.group && i.group !== y) {
+            const c = document.createElement("div");
+            c.className = "group", c.setAttribute("role", "presentation"), c.textContent = i.group, b.push(c), y = i.group;
+          } else i.group || (y = null);
+          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", C), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || g || m) && (o.disabled = !0), o.addEventListener("pointerdown", (c) => {
+            c.preventDefault();
+          }), o.addEventListener("click", (c) => {
+            c.preventDefault(), !i.disabled && (this._activeValue = i.value, this._toggleValue(i.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), this._inputEl?.focus());
           });
-          const m = document.createElement("div");
-          m.className = "option-text";
-          const S = document.createElement("span");
-          if (S.className = "option-label", S.textContent = s.label, m.append(S), s.description) {
-            const u = document.createElement("span");
-            u.className = "option-description", u.textContent = s.description, m.append(u);
+          const f = document.createElement("div");
+          f.className = "option-text";
+          const k = document.createElement("span");
+          if (k.className = "option-label", k.textContent = i.label, f.append(k), i.description) {
+            const c = document.createElement("span");
+            c.className = "option-description", c.textContent = i.description, f.append(c);
           }
-          if (I !== "none") {
-            const u = document.createElement("span");
-            u.className = "check", u.textContent = d ? "✓" : "", c.append(u);
+          if (C !== "none") {
+            const c = document.createElement("span");
+            c.className = "check", c.textContent = d ? "✓" : "", o.append(c);
           }
-          c.append(m), y.push(c);
-        }), P) {
-          const s = document.createElement("div");
-          s.className = "status", s.textContent = `Showing first ${k.length} results. Keep typing to narrow the list.`, y.push(s);
+          o.append(f), b.push(o);
+        }), V) {
+          const i = document.createElement("div");
+          i.className = "status", i.textContent = `Showing first ${_.length} results. Keep typing to narrow the list.`, b.push(i);
         }
-        this._panelEl.replaceChildren(...y);
-        const R = T || this._activeValue || this._selected[this._selected.length - 1] || null, z = this._findOptionNode(R), h = z && !z.hasAttribute("disabled") ? this._panelEl.setActiveItem(z, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
-        this._activeValue = (h == null ? void 0 : h.getAttribute("data-value")) || null, h != null && h.id ? this._inputEl.setAttribute("aria-activedescendant", h.id) : this._inputEl.removeAttribute("aria-activedescendant");
+        this._panelEl.replaceChildren(...b);
+        const $ = P || this._activeValue || this._selected[this._selected.length - 1] || null, E = this._findOptionNode($), A = E && !E.hasAttribute("disabled") ? this._panelEl.setActiveItem(E, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
+        this._activeValue = A?.getAttribute("data-value") || null, A?.id ? this._inputEl.setAttribute("aria-activedescendant", A.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);
+typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", H);
 export {
-  j as UIMultiSelect
+  H as UIMultiSelect
 };