@editora/ui-core 0.1.25 → 0.2.1

package/dist/meter.cjs.js

@@ -4,15 +4,10 @@
     width: 100%;
     --ui-meter-bg: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 44%, transparent);
     --ui-meter-fill: var(--ui-color-primary, #2563eb);
-    --ui-meter-fill-soft:
-      linear-gradient(
-        90deg,
-        color-mix(in srgb, var(--ui-meter-fill, #2563eb) 84%, white 16%),
-        var(--ui-meter-fill, #2563eb)
-      );
+    --ui-meter-fill-soft: var(--ui-meter-fill, #2563eb);
     --ui-meter-text: var(--ui-color-text, #0f172a);
     --ui-meter-muted: var(--ui-color-muted, #526175);
-    --ui-meter-height: 12px;
+    --ui-meter-height: 6px;
     --ui-meter-radius: 999px;
     --ui-meter-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-meter-circle-size: 76px;
@@ -77,7 +72,7 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 60%);
+    background: none;
     pointer-events: none;
   }
 
@@ -202,7 +197,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(){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(`
+`;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 v(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=v(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

@@ -5,15 +5,10 @@ const b = `
     width: 100%;
     --ui-meter-bg: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 44%, transparent);
     --ui-meter-fill: var(--ui-color-primary, #2563eb);
-    --ui-meter-fill-soft:
-      linear-gradient(
-        90deg,
-        color-mix(in srgb, var(--ui-meter-fill, #2563eb) 84%, white 16%),
-        var(--ui-meter-fill, #2563eb)
-      );
+    --ui-meter-fill-soft: var(--ui-meter-fill, #2563eb);
     --ui-meter-text: var(--ui-color-text, #0f172a);
     --ui-meter-muted: var(--ui-color-muted, #526175);
-    --ui-meter-height: 12px;
+    --ui-meter-height: 6px;
     --ui-meter-radius: 999px;
     --ui-meter-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-meter-circle-size: 76px;
@@ -78,7 +73,7 @@ const b = `
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 60%);
+    background: none;
     pointer-events: none;
   }
 
@@ -215,7 +210,7 @@ function o(i, e, t) {
 function f(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 g extends h {
+class x extends h {
   constructor() {
     super(...arguments), this._lastChangeKey = "";
   }
@@ -328,7 +323,7 @@ class g extends h {
     `), this._emitChange(e);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-meter") && customElements.define("ui-meter", g);
+typeof customElements < "u" && !customElements.get("ui-meter") && customElements.define("ui-meter", x);
 export {
-  g as UIMeter
+  x as UIMeter
 };

package/dist/multi-select.cjs.js

@@ -1,26 +1,30 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("./ElementBase-DxbvhLJs.js"),M=require("./control-name-BmoI1m3a.js"),z=require("./collection-qv8A8rq4.js");require("./listbox-CTpRpuF7.js");let K=0;const W=`
+"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}
+
   :host {
-    --ui-multi-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 82%, transparent);
+    --ui-multi-select-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-multi-select-border: var(--base-multi-select-border, 1px solid var(--ui-multi-select-border-color));
-    --ui-multi-select-radius: var(--base-multi-select-radius, var(--ui-radius, 4px));
+    --ui-multi-select-radius: var(--base-multi-select-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
     --ui-multi-select-bg: var(--base-multi-select-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-multi-select-text: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-multi-select-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-multi-select-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-multi-select-danger: var(--ui-color-danger, #dc2626);
+    --ui-multi-select-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     --ui-multi-select-accent: var(--ui-color-primary, #2563eb);
     --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
-    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-multi-select-panel-bg: var(--base-multi-select-panel-bg, color-mix(in srgb, var(--ui-multi-select-bg) 98%, transparent));
     --ui-multi-select-panel-border: var(--base-multi-select-panel-border, 1px solid color-mix(in srgb, var(--ui-multi-select-border-color) 84%, transparent));
     --ui-multi-select-panel-shadow: var(--base-multi-select-panel-shadow, var(--shadow-4, 0 20px 34px rgba(2, 6, 23, 0.16)));
-    --ui-multi-select-height: var(--base-multi-select-height-md, 44px);
-    --ui-multi-select-padding-x: var(--base-multi-select-padding-x, 10px);
-    --ui-multi-select-padding-y: var(--base-multi-select-padding-y, 8px);
+    --ui-multi-select-action-size: 24px;
+    --ui-multi-select-height: var(--base-multi-select-height-md, var(--ui-control-height-2, 32px));
+    --ui-multi-select-padding-x: var(--base-multi-select-padding-x, calc(var(--ui-control-padding-inline-2, 12px) - 1px));
+    --ui-multi-select-padding-y: var(--base-multi-select-padding-y, 3px);
+    --ui-multi-select-font-size: var(--ui-control-font-size-2, 14px);
     --ui-multi-select-chip-radius: var(--base-multi-select-chip-radius, 999px);
     --ui-multi-select-chip-gap: var(--base-multi-select-chip-gap, 6px);
     --ui-multi-select-chip-padding-x: var(--base-multi-select-chip-padding-x, 10px);
-    --ui-multi-select-chip-padding-y: var(--base-multi-select-chip-padding-y, 6px);
+    --ui-multi-select-chip-padding-y: var(--base-multi-select-chip-padding-y, 2px);
     --ui-multi-select-option-radius: var(--base-multi-select-option-radius, 10px);
     --ui-multi-select-option-gap: var(--base-multi-select-option-gap, 10px);
     --ui-multi-select-option-padding-x: var(--base-multi-select-option-padding-x, 10px);
@@ -95,13 +99,19 @@
     align-items: center;
     align-self: center;
     gap: 4px;
-    min-block-size: 28px;
+    min-block-size: var(--ui-multi-select-action-size);
+    margin-block: var(--ui-multi-select-action-bleed, 0px);
   }
 
   .shell[data-open="true"],
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-multi-select-focus) 58%, var(--ui-multi-select-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-multi-select-focus) 22%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-multi-select-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-multi-select-focus));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not(:focus-within):not([data-open="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-multi-select-border-color));
   }
 
   .shell[data-readonly="true"] {
@@ -110,7 +120,7 @@
 
   .shell[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-multi-select-danger) 62%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-multi-select-danger) 18%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-multi-select-danger);
   }
 
   .chip {
@@ -149,21 +159,22 @@
     background: transparent;
     color: inherit;
     outline: none;
-    font: 500 14px/1.4 var(--ui-font-family, "Inter", sans-serif);
-    padding: 4px 2px;
+    font: 500 var(--ui-multi-select-font-size)/1.4 var(--ui-font-family, "Inter", sans-serif);
+    padding: 2px 2px;
     margin: 0;
   }
 
   .input::placeholder {
-    color: color-mix(in srgb, var(--ui-multi-select-text) 42%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-multi-select-text) 62%, transparent));
   }
 
   .toggle {
     border: none;
     background: transparent;
     color: color-mix(in srgb, var(--ui-multi-select-text) 64%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-multi-select-action-size);
+    block-size: var(--ui-multi-select-action-size);
+    margin-block: var(--ui-multi-select-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -188,8 +199,9 @@
     border: none;
     background: transparent;
     color: color-mix(in srgb, var(--ui-multi-select-text) 64%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-multi-select-action-size);
+    block-size: var(--ui-multi-select-action-size);
+    margin-block: var(--ui-multi-select-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -344,38 +356,39 @@
     opacity: 0.6;
   }
 
-  :host([size="sm"]) {
-    --ui-multi-select-height: var(--base-multi-select-height-sm, 38px);
-  }
-
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-multi-select-height: var(--base-multi-select-height-sm, 38px);
-    --ui-multi-select-padding-x: 8px;
-    --ui-multi-select-padding-y: 6px;
+    --ui-multi-select-action-size: 24px;
+    --ui-multi-select-action-bleed: -1px;
+    --ui-multi-select-height: var(--base-multi-select-height-sm, var(--ui-control-height-1, 24px));
+    --ui-multi-select-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-multi-select-padding-y: 0px;
+    --ui-multi-select-chip-padding-y: 0px;
+    --ui-multi-select-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-multi-select-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-multi-select-option-padding-x: 8px;
     --ui-multi-select-option-padding-y: 8px;
   }
 
-  :host([size="sm"]) .input,
   :host([size="sm"]) .option-label,
-  :host([size="1"]) .input,
   :host([size="1"]) .option-label {
     font-size: 12px;
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-multi-select-height: var(--base-multi-select-height-lg, 48px);
-    --ui-multi-select-padding-x: 12px;
-    --ui-multi-select-padding-y: 10px;
+    --ui-multi-select-action-size: 28px;
+    --ui-multi-select-height: var(--base-multi-select-height-lg, var(--ui-control-height-3, 40px));
+    --ui-multi-select-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-multi-select-padding-y: 5px;
+    --ui-multi-select-chip-padding-y: 4px;
+    --ui-multi-select-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-multi-select-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-multi-select-option-padding-x: 12px;
     --ui-multi-select-option-padding-y: 12px;
   }
 
-  :host([size="lg"]) .input,
   :host([size="lg"]) .option-label,
-  :host([size="3"]) .input,
   :host([size="3"]) .option-label {
     font-size: 15px;
   }
@@ -506,24 +519,24 @@
     --ui-multi-select-accent: var(--ui-color-success, #15803d);
     --ui-multi-select-focus: var(--ui-color-success, #15803d);
     --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
-    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-success, #15803d) 82%, #0f172a 18%);
+    --ui-multi-select-chip-text: var(--ui-color-success-text, color-mix(in srgb, var(--ui-color-success, #15803d) 82%, #0f172a 18%));
   }
 
   :host([tone="warning"]) {
     --ui-multi-select-accent: var(--ui-color-warning, #b45309);
     --ui-multi-select-focus: var(--ui-color-warning, #b45309);
     --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 12%, transparent);
-    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-warning, #b45309) 82%, #0f172a 18%);
+    --ui-multi-select-chip-text: var(--ui-color-warning-text, color-mix(in srgb, var(--ui-color-warning, #b45309) 82%, #0f172a 18%));
   }
 
   :host([tone="danger"]) {
     --ui-multi-select-accent: var(--ui-color-danger, #dc2626);
     --ui-multi-select-focus: var(--ui-color-danger, #dc2626);
     --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%);
+    --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 j(r){return r==="sm"||r==="1"?"sm":r==="lg"||r==="3"?"lg":"md"}class N 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-${++K}`,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>${W}</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(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>
       <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>
@@ -546,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=j(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=z.normalizeCollectionText(this._query);return e?this._options.filter(t=>z.normalizeCollectionText(t.label).includes(e)||z.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"),O=this.root.querySelector(".chips"),S=this.root.querySelector(".toggle"),C=this.root.querySelector(".clear"),x=this.root.querySelector(".error"),U=this._selectionIndicator(),q=this.hasAttribute("loading"),D=(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`,M.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"),S.setAttribute("data-open",this.open?"true":"false"),S.disabled=m||b,C.hidden=!F||this._selected.length===0,C.disabled=m||b,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=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=>{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 _=this._filteredOptions(),V=this._renderLimit(),y=_.slice(0,V),$=_.length>y.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(!_.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 B=new Set(this._selected),P=this._panelEl.getActiveItem()?.getAttribute("data-value"),g=[];let E=null;if(y.forEach((i,h)=>{if(i.group&&i.group!==E){const u=document.createElement("div");u.className="group",u.setAttribute("role","presentation"),u.textContent=i.group,g.push(u),E=i.group}else i.group||(E=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",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 w=document.createElement("span");if(w.className="option-label",w.textContent=i.label,f.append(w),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)}),$){const i=document.createElement("div");i.className="status",i.textContent=`Showing first ${y.length} results. Keep typing to narrow the list.`,g.push(i)}this._panelEl.replaceChildren(...g);const T=P||this._activeValue||this._selected[this._selected.length-1]||null,A=this._findOptionNode(T),k=A&&!A.hasAttribute("disabled")?this._panelEl.setActiveItem(A,{focus:!1,owner:this._inputEl,scroll:!1}):(this._panelEl.clearActive(),null);this._activeValue=k?.getAttribute("data-value")||null,k?.id?this._inputEl.setAttribute("aria-activedescendant",k.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=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;