@editora/ui-core 0.1.24 → 0.2.0

package/dist/combobox.cjs.js

@@ -1,30 +1,34 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./ElementBase-DxbvhLJs.js"),F=require("./control-name-BmoI1m3a.js"),h=require("./collection-qv8A8rq4.js"),$=require("./dismissable-layer-DNfrKA20.js"),E=require("./listbox-CTpRpuF7.js"),D=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const F=require("./ElementBase-DxbvhLJs.js"),x=require("./overlay-motion-B56x1GoY.js"),$=require("./control-name-BmoI1m3a.js"),h=require("./collection-qv8A8rq4.js"),E=require("./dismissable-layer-DNfrKA20.js"),D=require("./listbox-CTpRpuF7.js"),I=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   </svg>
-`,I=`
+`,z=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m5.6 7.6 4.4 4.6 4.4-4.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
 `,B=`
+  ${x.OVERLAY_MOTION_CSS}
+
   :host {
     --ui-combobox-width: var(--ui-width, 100%);
     --ui-combobox-min-width: 248px;
-    --ui-combobox-height: 42px;
-    --ui-combobox-padding-x: 12px;
-    --ui-combobox-radius: var(--ui-radius, 12px);
+    --ui-combobox-action-size: 24px;
+    --ui-combobox-height: var(--ui-control-height-2, 32px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-2, 12px);
+    --ui-combobox-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-combobox-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-combobox-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-combobox-text: var(--ui-color-text, #0f172a);
     --ui-combobox-muted: var(--ui-color-muted, #526175);
-    --ui-combobox-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-combobox-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-combobox-border: 1px solid var(--ui-combobox-border-color);
     --ui-combobox-shadow: none;
     --ui-combobox-shadow-hover: none;
     --ui-combobox-shadow-focus: none;
     --ui-combobox-focus: var(--ui-color-primary, #2563eb);
-    --ui-combobox-panel-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
-    --ui-combobox-panel-border: 1px solid color-mix(in srgb, var(--ui-combobox-border-color) 80%, transparent);
-    --ui-combobox-panel-shadow: none;
+    --ui-combobox-panel-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-combobox-panel-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-combobox-border-color) 80%, transparent));
+    --ui-combobox-panel-shadow: var(--shadow-5, 0 14px 34px rgba(15, 23, 42, 0.16));
     --ui-combobox-panel-z: 1600;
     --ui-combobox-option-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 11%, transparent);
     --ui-combobox-option-active: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, transparent);
@@ -71,6 +75,7 @@
   }
 
   .control {
+    box-sizing: border-box;
     position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto auto;
@@ -95,8 +100,8 @@
   }
 
   .control:hover {
-    border-color: color-mix(in srgb, var(--ui-combobox-focus) 34%, var(--ui-combobox-border-color));
-    box-shadow: var(--ui-combobox-shadow-hover);
+    border-color: var(--ui-color-line-strong, var(--ui-combobox-border-color));
+    box-shadow: none;
   }
 
   input {
@@ -107,23 +112,22 @@
     outline: none;
     background: transparent;
     color: var(--ui-combobox-text);
-    padding: 9px var(--ui-combobox-padding-x);
-    font-size: 14px;
+    padding: 0 var(--ui-combobox-padding-x);
+    font-size: var(--ui-combobox-font-size);
     line-height: 1.4;
     font-family: inherit;
-    min-height: var(--ui-combobox-height);
+    min-height: calc(var(--ui-combobox-height) - 2px);
   }
 
   input::placeholder {
-    color: var(--ui-combobox-muted);
+    color: var(--ui-color-placeholder, var(--ui-combobox-muted));
   }
 
   .control[data-focused="true"] {
-    border-color: color-mix(in srgb, var(--ui-combobox-focus) 72%, var(--ui-combobox-border-color));
-    box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-combobox-focus) 16%, transparent),
-      var(--ui-combobox-shadow-focus);
-    transform: translateY(-1px);
+    border-color: var(--ui-ring-color, var(--ui-combobox-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-combobox-focus));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .icon-btn {
@@ -131,8 +135,9 @@
     border: none;
     background: transparent;
     color: var(--ui-combobox-muted);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-combobox-action-size);
+    block-size: var(--ui-combobox-action-size);
+    margin-block: var(--ui-combobox-action-bleed, 0px);
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
@@ -180,26 +185,17 @@
     left: 0;
     right: 0;
     border: var(--ui-combobox-panel-border);
-    border-radius: calc(var(--ui-combobox-radius) + 2px);
+    border-radius: calc(var(--ui-radius, 6px) + 2px);
     background: var(--ui-combobox-panel-bg);
     box-shadow: var(--ui-combobox-panel-shadow);
     max-height: min(360px, 52vh);
     overflow: auto;
     padding: 6px 6px 8px;
     z-index: var(--ui-combobox-panel-z, 1600);
-    display: none;
-    opacity: 0;
-    transform: translateY(-4px) scale(0.985);
-    transition:
-      opacity var(--ui-combobox-duration) var(--ui-combobox-ease),
-      transform var(--ui-combobox-duration) var(--ui-combobox-ease);
-    backdrop-filter: saturate(1.08) blur(8px);
   }
 
-  .panel[data-open="true"] {
-    display: block;
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  .panel[hidden] {
+    display: none;
   }
 
   .status-row {
@@ -337,12 +333,12 @@
 
   :host([state="error"]) .control {
     border-color: var(--ui-combobox-error);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-combobox-error) 19%, transparent), var(--ui-combobox-shadow);
+    box-shadow: 0 0 0 1px var(--ui-combobox-error), var(--ui-combobox-shadow);
   }
 
   :host([state="success"]) .control {
     border-color: color-mix(in srgb, var(--ui-combobox-success) 72%, var(--ui-combobox-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-combobox-success) 13%, transparent), var(--ui-combobox-shadow);
+    box-shadow: 0 0 0 1px var(--ui-combobox-success), var(--ui-combobox-shadow);
   }
 
   :host([disabled]) .control {
@@ -361,14 +357,21 @@
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-combobox-height: 36px;
-    --ui-combobox-padding-x: 10px;
+    --ui-combobox-action-size: 24px;
+    --ui-combobox-action-bleed: -1px;
+    --ui-combobox-height: var(--ui-control-height-1, 24px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-1, 8px);
+    --ui-combobox-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-combobox-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-combobox-height: 48px;
-    --ui-combobox-padding-x: 13px;
+    --ui-combobox-action-size: 28px;
+    --ui-combobox-height: var(--ui-control-height-3, 40px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-3, 16px);
+    --ui-combobox-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-combobox-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([variant="surface"]) .control {
@@ -398,7 +401,7 @@
 
   :host([validation="error"]) .control {
     border-color: var(--ui-combobox-error);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-combobox-error) 20%, transparent), var(--ui-combobox-shadow);
+    box-shadow: 0 0 0 1px var(--ui-combobox-error), var(--ui-combobox-shadow);
   }
 
   :host([validation="success"]) .control {
@@ -468,7 +471,7 @@
       color: HighlightText;
     }
   }
-`;function n(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function _(d){if(d==null)return!1;const t=String(d).toLowerCase();return t!=="false"&&t!=="0"}class k extends L.ElementBase{constructor(){super(),this._input=null,this._control=null,this._panel=null,this._clearBtn=null,this._toggleBtn=null,this._options=[],this._filtered=[],this._highlightedIndex=-1,this._query="",this._debounceTimer=null,this._observer=null,this._uid=Math.random().toString(36).slice(2,8),this._formUnregister=null,this._isFocused=!1,this._suppressValueSync=!1,this._globalListenersBound=!1,this._dismissableLayer=null,this._nextOpenSource="attribute",this._optionsRefreshFrame=0,this._autofocusFrame=0,this._listStructureFingerprint="",this._panelPointerDown=!1,this._onInput=this._onInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onPanelPointerDown=this._onPanelPointerDown.bind(this),this._onPanelClick=this._onPanelClick.bind(this)}static get observedAttributes(){return["aria-label","aria-description","aria-describedby","value","placeholder","disabled","clearable","debounce","maxlength","readonly","autofocus","name","required","validation","state","state-text","size","variant","radius","label","description","open","headless","empty-text","no-filter","allow-custom"]}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this._scheduleOptionsRefresh()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","label","disabled","data-combobox-option"]}),this._attachFormRegistration()}disconnectedCallback(){this._unbindGlobalListeners(),this._detachDomListeners(),this._dismissableLayer?.destroy(),this._dismissableLayer=null,this._observer&&(this._observer.disconnect(),this._observer=null),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._optionsRefreshFrame&&(cancelAnimationFrame(this._optionsRefreshFrame),this._optionsRefreshFrame=0),this._autofocusFrame&&(cancelAnimationFrame(this._autofocusFrame),this._autofocusFrame=0),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="value"){this._suppressValueSync||this._syncInputFromValue(),this._updateClearButton(),this._renderList();return}if(t==="open"){this._applyOpenState(),e!==i&&this._emitOpenState(i!=null,e!=null,this._nextOpenSource),this._nextOpenSource="attribute";return}if(t==="disabled"){this._isDisabled()&&this.open&&this._setOpen(!1,"attribute"),this.isConnected&&this.requestRender();return}if(t==="state"){this.isConnected&&this.requestRender();return}if(t==="state-text"){this._renderList();return}this.isConnected&&this.requestRender()}}get value(){return this.getAttribute("value")||""}set value(t){const e=t||"";e!==this.value&&this.setAttribute("value",e)}get open(){return this.hasAttribute("open")}set open(t){this._setOpen(t,"api")}_isDisabled(){return _(this.getAttribute("disabled"))}_isReadonly(){return this.hasAttribute("readonly")}_state(){const t=(this.getAttribute("state")||"idle").trim().toLowerCase();return t==="loading"||t==="error"||t==="success"?t:"idle"}_isLoading(){return this._state()==="loading"}_stateText(){const t=this.getAttribute("state-text");if(t)return t;const e=this._state();return e==="loading"?"Syncing results":e==="error"?"Unable to load results":e==="success"?"Results up to date":""}_emitOpenState(t,e,i){const r={open:t,previousOpen:e,source:i};this.dispatchEvent(new CustomEvent(t?"open":"close",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(t?"ui-open":"ui-close",{detail:r,bubbles:!0,composed:!0}))}_attachFormRegistration(){try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:o=>{this.value=o},validate:async()=>{const o=this._isCurrentValueValid();return{valid:o,message:o?void 0:"Please select a value from the list."}},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("data-error",o)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}}))}catch{}}_isCurrentValueValid(){const t=this.hasAttribute("required"),e=this.value;return!t&&!e?!0:t&&!e?!1:this.hasAttribute("allow-custom")?!0:this._options.some(i=>i.value===e)}_readOptions(){const t=Array.from(this.querySelectorAll("option,[data-combobox-option]")),e=new Set;return t.map((i,r)=>{const s=i.tagName.toLowerCase()==="option",o=i,a=s?o.value||o.textContent||"":i.getAttribute("value")||i.getAttribute("data-value")||i.textContent||"",l=s?(o.label||o.textContent||o.value||"").trim():(i.getAttribute("label")||i.textContent||a).trim(),b=(i.getAttribute("description")||i.getAttribute("data-description")||"").trim(),u=s?o.disabled:_(i.getAttribute("disabled")),c=a.trim();if(!c&&!l)return null;const p=`${c}::${l}`;return e.has(p)?null:(e.add(p),{value:c,label:l,description:b,disabled:u,sourceIndex:r})}).filter(i=>!!i)}_findOptionByValue(t){return this._options.find(e=>e.value===t)||null}_findExactOptionByQuery(t){const e=h.normalizeCollectionText(t);return e&&this._options.find(i=>!i.disabled&&(h.normalizeCollectionText(i.label)===e||h.normalizeCollectionText(i.value)===e))||null}_rebuildFiltered(t){const e=h.normalizeCollectionText(this._query),i=this.hasAttribute("no-filter"),r=this._filtered[this._highlightedIndex];if(this._filtered=this._options.filter(o=>i||!e?!0:h.normalizeCollectionText(o.label).includes(e)||h.normalizeCollectionText(o.value).includes(e)),t?.preserveHighlight&&r){const o=this._filtered.findIndex(a=>a.sourceIndex===r.sourceIndex);if(o>=0&&!this._filtered[o].disabled){this._highlightedIndex=o;return}}const s=this._findOptionByValue(this.value);if(s){const o=this._filtered.findIndex(a=>a.sourceIndex===s.sourceIndex);if(o>=0&&!this._filtered[o].disabled){this._highlightedIndex=o;return}}this._highlightedIndex=E.resolveListboxActiveIndex(this._filtered,{getDisabled:o=>o.disabled})}_renderList(){if(!this._panel)return;const t=this._renderStateRow(),e=this.getAttribute("empty-text")||"No matches found",i=[t,e,this._filtered.length===0?"empty":"options",...this._filtered.map(o=>[o.sourceIndex,o.value,o.label,o.description,o.disabled?"1":"0"].join("
"))].join("");if(i===this._listStructureFingerprint&&this._syncRenderedListState())return;if(this._filtered.length===0){this._panel.innerHTML=`${t}<div class="empty" part="empty">${n(e)}</div>`,this._listStructureFingerprint=i,this._panel.refresh(),this._panel.clearActive(),this._syncActiveDescendant();return}const r=this.value,s=this._filtered.map((o,a)=>{const l=o.value===r,b=a===this._highlightedIndex,u=o.disabled;return`
+`;function n(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function _(d){if(d==null)return!1;const t=String(d).toLowerCase();return t!=="false"&&t!=="0"}class L extends F.ElementBase{constructor(){super(),this._input=null,this._control=null,this._panel=null,this._clearBtn=null,this._toggleBtn=null,this._options=[],this._filtered=[],this._highlightedIndex=-1,this._query="",this._debounceTimer=null,this._observer=null,this._uid=Math.random().toString(36).slice(2,8),this._formUnregister=null,this._isFocused=!1,this._suppressValueSync=!1,this._globalListenersBound=!1,this._dismissableLayer=null,this._nextOpenSource="attribute",this._optionsRefreshFrame=0,this._autofocusFrame=0,this._listStructureFingerprint="",this._panelPointerDown=!1,this._onInput=this._onInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onPanelPointerDown=this._onPanelPointerDown.bind(this),this._onPanelClick=this._onPanelClick.bind(this)}static get observedAttributes(){return["aria-label","aria-description","aria-describedby","value","placeholder","disabled","clearable","debounce","maxlength","readonly","autofocus","name","required","validation","state","state-text","size","variant","radius","label","description","open","headless","empty-text","no-filter","allow-custom"]}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this._scheduleOptionsRefresh()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","label","disabled","data-combobox-option"]}),this._attachFormRegistration()}disconnectedCallback(){this._unbindGlobalListeners(),this._detachDomListeners(),this._dismissableLayer?.destroy(),this._dismissableLayer=null,this._observer&&(this._observer.disconnect(),this._observer=null),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._optionsRefreshFrame&&(cancelAnimationFrame(this._optionsRefreshFrame),this._optionsRefreshFrame=0),this._autofocusFrame&&(cancelAnimationFrame(this._autofocusFrame),this._autofocusFrame=0),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="value"){this._suppressValueSync||this._syncInputFromValue(),this._updateClearButton(),this._renderList();return}if(t==="open"){this._applyOpenState(),e!==i&&this._emitOpenState(i!=null,e!=null,this._nextOpenSource),this._nextOpenSource="attribute";return}if(t==="disabled"){this._isDisabled()&&this.open&&this._setOpen(!1,"attribute"),this.isConnected&&this.requestRender();return}if(t==="state"){this.isConnected&&this.requestRender();return}if(t==="state-text"){this._renderList();return}this.isConnected&&this.requestRender()}}get value(){return this.getAttribute("value")||""}set value(t){const e=t||"";e!==this.value&&this.setAttribute("value",e)}get open(){return this.hasAttribute("open")}set open(t){this._setOpen(t,"api")}_isDisabled(){return _(this.getAttribute("disabled"))}_isReadonly(){return this.hasAttribute("readonly")}_state(){const t=(this.getAttribute("state")||"idle").trim().toLowerCase();return t==="loading"||t==="error"||t==="success"?t:"idle"}_isLoading(){return this._state()==="loading"}_stateText(){const t=this.getAttribute("state-text");if(t)return t;const e=this._state();return e==="loading"?"Syncing results":e==="error"?"Unable to load results":e==="success"?"Results up to date":""}_emitOpenState(t,e,i){const s={open:t,previousOpen:e,source:i};this.dispatchEvent(new CustomEvent(t?"open":"close",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(t?"ui-open":"ui-close",{detail:s,bubbles:!0,composed:!0}))}_attachFormRegistration(){try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),r=this.getAttribute("name");s&&typeof s.registerField=="function"&&r&&(this._formUnregister=s.registerField(r,{name:r,getValue:()=>this.value,setValue:o=>{this.value=o},validate:async()=>{const o=this._isCurrentValueValid();return{valid:o,message:o?void 0:"Please select a value from the list."}},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("data-error",o)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}}))}catch{}}_isCurrentValueValid(){const t=this.hasAttribute("required"),e=this.value;return!t&&!e?!0:t&&!e?!1:this.hasAttribute("allow-custom")?!0:this._options.some(i=>i.value===e)}_readOptions(){const t=Array.from(this.querySelectorAll("option,[data-combobox-option]")),e=new Set;return t.map((i,s)=>{const r=i.tagName.toLowerCase()==="option",o=i,a=r?o.value||o.textContent||"":i.getAttribute("value")||i.getAttribute("data-value")||i.textContent||"",l=r?(o.label||o.textContent||o.value||"").trim():(i.getAttribute("label")||i.textContent||a).trim(),b=(i.getAttribute("description")||i.getAttribute("data-description")||"").trim(),u=r?o.disabled:_(i.getAttribute("disabled")),c=a.trim();if(!c&&!l)return null;const p=`${c}::${l}`;return e.has(p)?null:(e.add(p),{value:c,label:l,description:b,disabled:u,sourceIndex:s})}).filter(i=>!!i)}_findOptionByValue(t){return this._options.find(e=>e.value===t)||null}_findExactOptionByQuery(t){const e=h.normalizeCollectionText(t);return e&&this._options.find(i=>!i.disabled&&(h.normalizeCollectionText(i.label)===e||h.normalizeCollectionText(i.value)===e))||null}_rebuildFiltered(t){const e=h.normalizeCollectionText(this._query),i=this.hasAttribute("no-filter"),s=this._filtered[this._highlightedIndex];if(this._filtered=this._options.filter(o=>i||!e?!0:h.normalizeCollectionText(o.label).includes(e)||h.normalizeCollectionText(o.value).includes(e)),t?.preserveHighlight&&s){const o=this._filtered.findIndex(a=>a.sourceIndex===s.sourceIndex);if(o>=0&&!this._filtered[o].disabled){this._highlightedIndex=o;return}}const r=this._findOptionByValue(this.value);if(r){const o=this._filtered.findIndex(a=>a.sourceIndex===r.sourceIndex);if(o>=0&&!this._filtered[o].disabled){this._highlightedIndex=o;return}}this._highlightedIndex=D.resolveListboxActiveIndex(this._filtered,{getDisabled:o=>o.disabled})}_renderList(){if(!this._panel)return;const t=this._renderStateRow(),e=this.getAttribute("empty-text")||"No matches found",i=[t,e,this._filtered.length===0?"empty":"options",...this._filtered.map(o=>[o.sourceIndex,o.value,o.label,o.description,o.disabled?"1":"0"].join("
"))].join("");if(i===this._listStructureFingerprint&&this._syncRenderedListState())return;if(this._filtered.length===0){this._panel.innerHTML=`${t}<div class="empty" part="empty">${n(e)}</div>`,this._listStructureFingerprint=i,this._panel.refresh(),this._panel.clearActive(),this._syncActiveDescendant();return}const s=this.value,r=this._filtered.map((o,a)=>{const l=o.value===s,b=a===this._highlightedIndex,u=o.disabled;return`
           <button
             type="button"
             id="${`${this._uid}-option-${o.sourceIndex}`}"
@@ -486,9 +489,9 @@
             </span>
             <span class="option-check" aria-hidden="true">✓</span>
           </button>
-        `}).join("");this._panel.innerHTML=`${t}${s}`,this._listStructureFingerprint=i,this._panel.refresh(),this._syncActiveDescendant(),this._scrollHighlightedIntoView()}_syncRenderedListState(){if(!this._panel)return!1;if(this._filtered.length===0)return this._panel.querySelector(".empty")?(this._panel.clearActive(),this._syncActiveDescendant(),!0):!1;const t=Array.from(this._panel.querySelectorAll(".option[data-option-index]"));if(t.length!==this._filtered.length)return!1;const e=this.value;return t.forEach((i,r)=>{const s=this._filtered[r];if(!s)return;const o=s.value===e,a=r===this._highlightedIndex;i.setAttribute("aria-selected",o?"true":"false"),i.setAttribute("aria-disabled",s.disabled?"true":"false"),i.setAttribute("data-highlighted",a?"true":"false"),i.setAttribute("data-selected",o?"true":"false"),i.disabled=s.disabled}),this._syncActiveDescendant(),this._scrollHighlightedIntoView(),!0}_renderStateRow(){const t=this._state(),e=this._stateText();return e?`<div class="status-row" part="status" data-state="${n(t)}" aria-live="polite">${n(e)}</div>`:""}_syncInputFromValue(){if(!this._input||this._isFocused&&this.open)return;const t=this._findOptionByValue(this.value);t?(this._query=t.label,this._input.value=t.label):(this._query=this.value,this._input.value=this.value),this._rebuildFiltered({preserveHighlight:!1}),this._renderList()}_syncActiveDescendant(){if(!this._input)return;const t=this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`);if(t&&this._panel){this._panel.setActiveItem(t,{focus:!1,owner:this._input,scroll:!1});return}this._panel?.clearActive(),this._input.removeAttribute("aria-activedescendant")}_scrollHighlightedIntoView(){if(!this._panel||this._highlightedIndex<0)return;const t=this._panel.querySelector(`[data-option-index="${this._highlightedIndex}"]`);this._panel.setActiveItem(t,{focus:!1,owner:this._input,scroll:!0})}_updateClearButton(){if(!this._clearBtn)return;this.hasAttribute("clearable")&&!this._isDisabled()&&!this._isReadonly()&&!this._isLoading()&&(this._query.length>0||this.value.length>0)?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")}_applyOpenState(){if(!this._panel||!this._input||!this._toggleBtn)return;const t=this.open,e=this._isLoading();t?(this._bindGlobalListeners(),this._panel.setAttribute("data-open","true"),this._panel.removeAttribute("hidden"),this._panel.setAttribute("aria-hidden","false"),this._input.setAttribute("aria-expanded","true"),this._toggleBtn.setAttribute("data-open","true"),this._rebuildFiltered({preserveHighlight:!0}),this._renderList(),this._syncDismissableLayer()):(this._unbindGlobalListeners(),this._dismissableLayer?.destroy(),this._dismissableLayer=null,this._panel.setAttribute("hidden",""),this._panel.removeAttribute("data-open"),this._panel.setAttribute("aria-hidden","true"),this._input.setAttribute("aria-expanded","false"),this._toggleBtn.setAttribute("data-open","false")),this._toggleBtn.disabled=this._isDisabled(),this._clearBtn&&(this._clearBtn.disabled=this._isDisabled()||this._isReadonly()),this._input.setAttribute("aria-busy",e?"true":"false"),this._panel.setAttribute("aria-busy",e?"true":"false")}_bindGlobalListeners(){this._globalListenersBound||(this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(this._globalListenersBound=!1)}_syncDismissableLayer(){!this.open||!this._panel||(this._dismissableLayer?.destroy(),this._dismissableLayer=$.createDismissableLayer({node:this._panel,trigger:this._control,closeOnEscape:!1,closeOnPointerOutside:!0,onDismiss:t=>{t==="outside-pointer"&&(this.hasAttribute("allow-custom")?this._commitCustomValue():this._syncInputFromValue(),this._closePanel("outside"))}}))}_setOpen(t,e="api"){t!==this.open&&(t&&this._isDisabled()||(this._nextOpenSource=e,t?this.setAttribute("open",""):this.removeAttribute("open")))}_openPanel(t="api"){this._setOpen(!0,t)}_closePanel(t="api"){this._setOpen(!1,t)}_commitSelection(t){if(this._isDisabled()||this._isReadonly()||t.disabled)return;const e=this.value;this._suppressValueSync=!0,this.value=t.value,this._suppressValueSync=!1,this._input&&(this._input.value=t.label),this._query=t.label,this._rebuildFiltered({preserveHighlight:!1}),this._renderList(),this._updateClearButton(),this._closePanel("selection"),e!==t.value&&this.dispatchEvent(new CustomEvent("change",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("select",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0}))}_commitCustomValue(){if(this._isDisabled()||this._isReadonly()||!this.hasAttribute("allow-custom"))return;const t=this._query.trim(),e=this.value;this._suppressValueSync=!0,this.value=t,this._suppressValueSync=!1,this._updateClearButton(),e!==t&&this.dispatchEvent(new CustomEvent("change",{detail:{value:t,label:t,custom:!0},bubbles:!0,composed:!0}))}_moveHighlight(t){if(this._filtered.length===0)return;const e=this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`),i=this._panel?.move(t>0?1:-1,{current:e,focus:!1,owner:this._input,scroll:!0})||null;if(!i)return;const r=Number(i.getAttribute("data-option-index")||"-1");r<0||(this._highlightedIndex=r,this._renderList())}render(){const t=this.hasAttribute("headless"),e=this.getAttribute("disabled"),i=_(e),r=this._isReadonly(),s=this._state(),o=s==="loading",a=this.getAttribute("placeholder")||"Search...",l=this.getAttribute("maxlength"),b=this.hasAttribute("required"),u=this.getAttribute("label")||"",c=this.getAttribute("description")||"",x=this.getAttribute("data-error")||""||(s==="error"?this._stateText()||"Unable to load options.":""),m=this.getAttribute("validation")==="error"||s==="error"||!!x,f=!!(u||this.querySelector('[slot="label"]')),g=(this.getAttribute("aria-label")||"").trim(),v=!!(c||this.querySelector('[slot="description"]')),y=`${this._uid}-error`,w=F.externalDescriptionMarkup(this,this._uid),A=[v?`${this._uid}-description`:"",m?y:"",w.id].filter(Boolean).join(" ");if(this._options=this._readOptions(),!this._query){const C=this._findOptionByValue(this.value);this._query=C?C.label:this.value}this._rebuildFiltered({preserveHighlight:!1}),this.setContent(`
+        `}).join("");this._panel.innerHTML=`${t}${r}`,this._listStructureFingerprint=i,this._panel.refresh(),this._syncActiveDescendant(),this._scrollHighlightedIntoView()}_syncRenderedListState(){if(!this._panel)return!1;if(this._filtered.length===0)return this._panel.querySelector(".empty")?(this._panel.clearActive(),this._syncActiveDescendant(),!0):!1;const t=Array.from(this._panel.querySelectorAll(".option[data-option-index]"));if(t.length!==this._filtered.length)return!1;const e=this.value;return t.forEach((i,s)=>{const r=this._filtered[s];if(!r)return;const o=r.value===e,a=s===this._highlightedIndex;i.setAttribute("aria-selected",o?"true":"false"),i.setAttribute("aria-disabled",r.disabled?"true":"false"),i.setAttribute("data-highlighted",a?"true":"false"),i.setAttribute("data-selected",o?"true":"false"),i.disabled=r.disabled}),this._syncActiveDescendant(),this._scrollHighlightedIntoView(),!0}_renderStateRow(){const t=this._state(),e=this._stateText();return e?`<div class="status-row" part="status" data-state="${n(t)}" aria-live="polite">${n(e)}</div>`:""}_syncInputFromValue(){if(!this._input||this._isFocused&&this.open)return;const t=this._findOptionByValue(this.value);t?(this._query=t.label,this._input.value=t.label):(this._query=this.value,this._input.value=this.value),this._rebuildFiltered({preserveHighlight:!1}),this._renderList()}_syncActiveDescendant(){if(!this._input)return;const t=this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`);if(t&&this._panel){this._panel.setActiveItem(t,{focus:!1,owner:this._input,scroll:!1});return}this._panel?.clearActive(),this._input.removeAttribute("aria-activedescendant")}_scrollHighlightedIntoView(){if(!this._panel||this._highlightedIndex<0)return;const t=this._panel.querySelector(`[data-option-index="${this._highlightedIndex}"]`);this._panel.setActiveItem(t,{focus:!1,owner:this._input,scroll:!0})}_updateClearButton(){if(!this._clearBtn)return;this.hasAttribute("clearable")&&!this._isDisabled()&&!this._isReadonly()&&!this._isLoading()&&(this._query.length>0||this.value.length>0)?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")}_applyOpenState(){if(!this._panel||!this._input||!this._toggleBtn)return;const t=this.open,e=this._isLoading();t?(this._bindGlobalListeners(),this._panel.setAttribute("data-open","true"),x.setPanelOpen(this._panel,!0,"bottom"),this._panel.setAttribute("aria-hidden","false"),this._input.setAttribute("aria-expanded","true"),this._toggleBtn.setAttribute("data-open","true"),this._rebuildFiltered({preserveHighlight:!0}),this._renderList(),this._syncDismissableLayer()):(this._unbindGlobalListeners(),this._dismissableLayer?.destroy(),this._dismissableLayer=null,x.setPanelOpen(this._panel,!1,"bottom"),this._panel.removeAttribute("data-open"),this._panel.setAttribute("aria-hidden","true"),this._input.setAttribute("aria-expanded","false"),this._toggleBtn.setAttribute("data-open","false")),this._toggleBtn.disabled=this._isDisabled(),this._clearBtn&&(this._clearBtn.disabled=this._isDisabled()||this._isReadonly()),this._input.setAttribute("aria-busy",e?"true":"false"),this._panel.setAttribute("aria-busy",e?"true":"false")}_bindGlobalListeners(){this._globalListenersBound||(this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(this._globalListenersBound=!1)}_syncDismissableLayer(){!this.open||!this._panel||(this._dismissableLayer?.destroy(),this._dismissableLayer=E.createDismissableLayer({node:this._panel,trigger:this._control,closeOnEscape:!1,closeOnPointerOutside:!0,onDismiss:t=>{t==="outside-pointer"&&(this.hasAttribute("allow-custom")?this._commitCustomValue():this._syncInputFromValue(),this._closePanel("outside"))}}))}_setOpen(t,e="api"){t!==this.open&&(t&&this._isDisabled()||(this._nextOpenSource=e,t?this.setAttribute("open",""):this.removeAttribute("open")))}_openPanel(t="api"){this._setOpen(!0,t)}_closePanel(t="api"){this._setOpen(!1,t)}_commitSelection(t){if(this._isDisabled()||this._isReadonly()||t.disabled)return;const e=this.value;this._suppressValueSync=!0,this.value=t.value,this._suppressValueSync=!1,this._input&&(this._input.value=t.label),this._query=t.label,this._rebuildFiltered({preserveHighlight:!1}),this._renderList(),this._updateClearButton(),this._closePanel("selection"),e!==t.value&&this.dispatchEvent(new CustomEvent("change",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("select",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0}))}_commitCustomValue(){if(this._isDisabled()||this._isReadonly()||!this.hasAttribute("allow-custom"))return;const t=this._query.trim(),e=this.value;this._suppressValueSync=!0,this.value=t,this._suppressValueSync=!1,this._updateClearButton(),e!==t&&this.dispatchEvent(new CustomEvent("change",{detail:{value:t,label:t,custom:!0},bubbles:!0,composed:!0}))}_moveHighlight(t){if(this._filtered.length===0)return;const e=this._panel?.querySelector(`[data-option-index="${this._highlightedIndex}"]`),i=this._panel?.move(t>0?1:-1,{current:e,focus:!1,owner:this._input,scroll:!0})||null;if(!i)return;const s=Number(i.getAttribute("data-option-index")||"-1");s<0||(this._highlightedIndex=s,this._renderList())}render(){const t=this.hasAttribute("headless"),e=this.getAttribute("disabled"),i=_(e),s=this._isReadonly(),r=this._state(),o=r==="loading",a=this.getAttribute("placeholder")||"Search...",l=this.getAttribute("maxlength"),b=this.hasAttribute("required"),u=this.getAttribute("label")||"",c=this.getAttribute("description")||"",f=this.getAttribute("data-error")||""||(r==="error"?this._stateText()||"Unable to load options.":""),m=this.getAttribute("validation")==="error"||r==="error"||!!f,v=!!(u||this.querySelector('[slot="label"]')),g=(this.getAttribute("aria-label")||"").trim(),y=!!(c||this.querySelector('[slot="description"]')),w=`${this._uid}-error`,A=$.externalDescriptionMarkup(this,this._uid),C=[y?`${this._uid}-description`:"",m?w:"",A.id].filter(Boolean).join(" ");if(this._options=this._readOptions(),!this._query){const k=this._findOptionByValue(this.value);this._query=k?k.label:this.value}this._rebuildFiltered({preserveHighlight:!1}),this.setContent(`
       ${t?"":`<style>${B}</style>`}
-      ${f||v?`
+      ${v||y?`
         <div class="label-row">
           <label class="label" part="label" id="${this._uid}-label"><slot name="label">${n(u)}</slot></label>
           <div class="description" part="description" id="${this._uid}-description"><slot name="description">${n(c)}</slot></div>
@@ -496,7 +499,7 @@
       `:""}
 
       <div class="root" part="root">
-        <div class="control" part="control" data-focused="${this._isFocused?"true":"false"}" data-state="${n(s)}">
+        <div class="control" part="control" data-focused="${this._isFocused?"true":"false"}" data-state="${n(r)}">
           <input
             id="${this._uid}-input"
             part="input"
@@ -505,23 +508,23 @@
             aria-autocomplete="list"
             aria-expanded="${this.open?"true":"false"}"
             aria-controls="${this._uid}-listbox"
-            ${f?`aria-labelledby="${this._uid}-label"`:g?`aria-label="${n(g)}"`:""}
-            ${A?`aria-describedby="${A}"`:""}
+            ${v?`aria-labelledby="${this._uid}-label"`:g?`aria-label="${n(g)}"`:""}
+            ${C?`aria-describedby="${C}"`:""}
             ${m?'aria-invalid="true"':""}
             aria-busy="${o?"true":"false"}"
             value="${n(this._query)}"
             placeholder="${n(a)}"
             ${i?"disabled":""}
-            ${r?"readonly":""}
+            ${s?"readonly":""}
             ${b?"required":""}
             ${l?`maxlength="${n(l)}"`:""}
           />
-          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${r?"disabled":""}>${D}</button>
-          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open?"true":"false"}" aria-label="Toggle options">${I}</button>
+          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${s?"disabled":""}>${I}</button>
+          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open?"true":"false"}" aria-label="Toggle options">${z}</button>
         </div>
-        <ui-listbox class="panel" id="${this._uid}-listbox" part="panel" role="listbox" item-selector=".option[data-option-index]" item-role="option" active-attribute="data-highlighted" aria-busy="${o?"true":"false"}" data-state="${n(s)}" ${this.open?'data-open="true" aria-hidden="false"':'hidden aria-hidden="true"'}></ui-listbox>
+        <ui-listbox class="panel" id="${this._uid}-listbox" part="panel" role="listbox" item-selector=".option[data-option-index]" item-role="option" active-attribute="data-highlighted" aria-busy="${o?"true":"false"}" data-state="${n(r)}" ${this.open?'data-open="true" aria-hidden="false"':'hidden aria-hidden="true"'}></ui-listbox>
       </div>
       <slot hidden></slot>
-      <div class="error" part="error" id="${y}" ${m?"":"hidden"}>${n(x)}</div>
-      ${w.html}
-    `),this._detachDomListeners(),this._input=this.root.querySelector("input"),this._control=this.root.querySelector(".control"),this._panel=this.root.querySelector("ui-listbox.panel"),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),this._listStructureFingerprint="",this._renderList(),this._updateClearButton(),this._applyOpenState(),this._input&&(this._input.addEventListener("input",this._onInput),this._input.addEventListener("change",this._onNativeChange),this._input.addEventListener("focus",this._onFocusIn),this._input.addEventListener("blur",this._onFocusOut),this._input.addEventListener("keydown",this._onKeyDown),this.hasAttribute("autofocus")&&(this._autofocusFrame&&cancelAnimationFrame(this._autofocusFrame),this._autofocusFrame=requestAnimationFrame(()=>{this._autofocusFrame=0;try{this._input?.focus()}catch{}}))),this._clearBtn&&this._clearBtn.addEventListener("click",this._onClearClick),this._toggleBtn&&this._toggleBtn.addEventListener("click",this._onToggleClick),this._panel&&(this._panel.addEventListener("pointerdown",this._onPanelPointerDown),this._panel.addEventListener("click",this._onPanelClick))}_detachDomListeners(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("change",this._onNativeChange),this._input.removeEventListener("focus",this._onFocusIn),this._input.removeEventListener("blur",this._onFocusOut),this._input.removeEventListener("keydown",this._onKeyDown)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClearClick),this._toggleBtn&&this._toggleBtn.removeEventListener("click",this._onToggleClick),this._panel&&(this._panel.removeEventListener("pointerdown",this._onPanelPointerDown),this._panel.removeEventListener("click",this._onPanelClick))}_onInput(t){if(!this._input||this._isDisabled()||this._isReadonly())return;const e=t.target.value;this._query=e,this._openPanel("keyboard"),this._rebuildFiltered({preserveHighlight:!1}),this._renderList(),this._updateClearButton(),this.dispatchEvent(new CustomEvent("input",{detail:{query:e,value:this.value},bubbles:!0,composed:!0}));const i=Number(this.getAttribute("debounce")||0);this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),i>0?this._debounceTimer=setTimeout(()=>{this.dispatchEvent(new CustomEvent("debounced-input",{detail:{query:e,value:this.value},bubbles:!0,composed:!0}))},i):this.dispatchEvent(new CustomEvent("debounced-input",{detail:{query:e,value:this.value},bubbles:!0,composed:!0}))}_onNativeChange(){this._isDisabled()||this._isReadonly()||this.hasAttribute("allow-custom")&&this._commitCustomValue()}_onFocusIn(){this._isFocused=!0,this._control&&this._control.setAttribute("data-focused","true"),this._isReadonly()||this._openPanel("keyboard")}_onFocusOut(){this._isFocused=!1,this._control&&this._control.setAttribute("data-focused","false"),queueMicrotask(()=>{if(this._panelPointerDown){this._panelPointerDown=!1;return}this.root.activeElement||this.open&&(this.hasAttribute("allow-custom")?this._commitCustomValue():this._syncInputFromValue(),this._closePanel("outside"))})}_refreshOptionsFromDom(){this._options=this._readOptions();const t=this._isFocused&&this.open;if(!t){const e=this._findOptionByValue(this.value),i=e?e.label:this.value;this._query=i,this._input&&(this._input.value=i)}this._rebuildFiltered({preserveHighlight:t}),this._renderList(),this._updateClearButton()}_scheduleOptionsRefresh(){this._optionsRefreshFrame||(this._optionsRefreshFrame=requestAnimationFrame(()=>{this._optionsRefreshFrame=0,this.isConnected&&this._refreshOptionsFromDom()}))}_onKeyDown(t){if(!this._isDisabled()&&this._input){if(t.key==="Home"&&this.open){t.preventDefault();const e=this._panel?.focusBoundary("first",{focus:!1,owner:this._input,scroll:!0})||null;this._highlightedIndex=Number(e?.getAttribute("data-option-index")||"-1"),this._renderList();return}if(t.key==="End"&&this.open){t.preventDefault();const e=this._panel?.focusBoundary("last",{focus:!1,owner:this._input,scroll:!0})||null;this._highlightedIndex=Number(e?.getAttribute("data-option-index")||"-1"),this._renderList();return}if(t.key==="ArrowDown"){t.preventDefault(),this._openPanel("keyboard"),this._moveHighlight(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._openPanel("keyboard"),this._moveHighlight(-1);return}if(t.key==="Enter"){if(this.open&&this._highlightedIndex>=0){t.preventDefault();const e=this._filtered[this._highlightedIndex];e&&this._commitSelection(e)}else if(this.hasAttribute("allow-custom"))t.preventDefault(),this._commitCustomValue(),this._closePanel("keyboard");else if(this.open)t.preventDefault(),this._syncInputFromValue(),this._closePanel("keyboard");else{const e=this._findExactOptionByQuery(this._query);e&&(t.preventDefault(),this._commitSelection(e))}return}if(t.key==="Escape"){this.open&&(t.preventDefault(),this.hasAttribute("allow-custom")||this._syncInputFromValue(),this._closePanel("keyboard"));return}t.key==="Tab"&&(this.hasAttribute("allow-custom")?this._commitCustomValue():this._syncInputFromValue(),this._closePanel("keyboard"))}}_onClearClick(t){t.preventDefault(),this._input&&(this._isDisabled()||this._isReadonly()||(this._query="",this._input.value="",this._suppressValueSync=!0,this.value="",this._suppressValueSync=!1,this._rebuildFiltered({preserveHighlight:!1}),this._renderList(),this._updateClearButton(),this._openPanel("clear"),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{query:"",value:""},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:"",label:""},bubbles:!0,composed:!0}))))}_onToggleClick(t){t.preventDefault(),!this._isDisabled()&&(this.open?this._closePanel("toggle"):this._openPanel("toggle"),this._input?.focus())}_onPanelPointerDown(t){this._isReadonly()||!t.target?.closest("[data-option-index]")||(this._panelPointerDown=!0,t.preventDefault())}_onPanelClick(t){if(this._isReadonly())return;const i=t.target.closest("[data-option-index]");if(!i)return;const r=i.getAttribute("data-option-index"),s=r==null?-1:Number(r);if(!Number.isFinite(s)||s<0)return;const o=this._filtered[s];!o||o.disabled||this._commitSelection(o)}}typeof customElements<"u"&&!customElements.get("ui-combobox")&&customElements.define("ui-combobox",k);exports.UICombobox=k;
+      <div class="error" part="error" id="${w}" ${m?"":"hidden"}>${n(f)}</div>
+      ${A.html}
+    `),this._detachDomListeners(),this._input=this.root.querySelector("input"),this._control=this.root.querySelector(".control"),this._panel=this.root.querySelector("ui-listbox.panel"),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),this._listStructureFingerprint="",this._renderList(),this._updateClearButton(),this._applyOpenState(),this._input&&(this._input.addEventListener("input",this._onInput),this._input.addEventListener("change",this._onNativeChange),this._input.addEventListener("focus",this._onFocusIn),this._input.addEventListener("blur",this._onFocusOut),this._input.addEventListener("keydown",this._onKeyDown),this.hasAttribute("autofocus")&&(this._autofocusFrame&&cancelAnimationFrame(this._autofocusFrame),this._autofocusFrame=requestAnimationFrame(()=>{this._autofocusFrame=0;try{this._input?.focus()}catch{}}))),this._clearBtn&&this._clearBtn.addEventListener("click",this._onClearClick),this._toggleBtn&&this._toggleBtn.addEventListener("click",this._onToggleClick),this._panel&&(this._panel.addEventListener("pointerdown",this._onPanelPointerDown),this._panel.addEventListener("click",this._onPanelClick))}_detachDomListeners(){this._input&&(this._input.removeEventListener("input",this._onInput),this._input.removeEventListener("change",this._onNativeChange),this._input.removeEventListener("focus",this._onFocusIn),this._input.removeEventListener("blur",this._onFocusOut),this._input.removeEventListener("keydown",this._onKeyDown)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClearClick),this._toggleBtn&&this._toggleBtn.removeEventListener("click",this._onToggleClick),this._panel&&(this._panel.removeEventListener("pointerdown",this._onPanelPointerDown),this._panel.removeEventListener("click",this._onPanelClick))}_onInput(t){if(!this._input||this._isDisabled()||this._isReadonly())return;const e=t.target.value;this._query=e,this._openPanel("keyboard"),this._rebuildFiltered({preserveHighlight:!1}),this._renderList(),this._updateClearButton(),this.dispatchEvent(new CustomEvent("input",{detail:{query:e,value:this.value},bubbles:!0,composed:!0}));const i=Number(this.getAttribute("debounce")||0);this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),i>0?this._debounceTimer=setTimeout(()=>{this.dispatchEvent(new CustomEvent("debounced-input",{detail:{query:e,value:this.value},bubbles:!0,composed:!0}))},i):this.dispatchEvent(new CustomEvent("debounced-input",{detail:{query:e,value:this.value},bubbles:!0,composed:!0}))}_onNativeChange(){this._isDisabled()||this._isReadonly()||this.hasAttribute("allow-custom")&&this._commitCustomValue()}_onFocusIn(){this._isFocused=!0,this._control&&this._control.setAttribute("data-focused","true"),this._isReadonly()||this._openPanel("keyboard")}_onFocusOut(){this._isFocused=!1,this._control&&this._control.setAttribute("data-focused","false"),queueMicrotask(()=>{if(this._panelPointerDown){this._panelPointerDown=!1;return}this.root.activeElement||this.open&&(this.hasAttribute("allow-custom")?this._commitCustomValue():this._syncInputFromValue(),this._closePanel("outside"))})}_refreshOptionsFromDom(){this._options=this._readOptions();const t=this._isFocused&&this.open;if(!t){const e=this._findOptionByValue(this.value),i=e?e.label:this.value;this._query=i,this._input&&(this._input.value=i)}this._rebuildFiltered({preserveHighlight:t}),this._renderList(),this._updateClearButton()}_scheduleOptionsRefresh(){this._optionsRefreshFrame||(this._optionsRefreshFrame=requestAnimationFrame(()=>{this._optionsRefreshFrame=0,this.isConnected&&this._refreshOptionsFromDom()}))}_onKeyDown(t){if(!this._isDisabled()&&this._input){if(t.key==="Home"&&this.open){t.preventDefault();const e=this._panel?.focusBoundary("first",{focus:!1,owner:this._input,scroll:!0})||null;this._highlightedIndex=Number(e?.getAttribute("data-option-index")||"-1"),this._renderList();return}if(t.key==="End"&&this.open){t.preventDefault();const e=this._panel?.focusBoundary("last",{focus:!1,owner:this._input,scroll:!0})||null;this._highlightedIndex=Number(e?.getAttribute("data-option-index")||"-1"),this._renderList();return}if(t.key==="ArrowDown"){t.preventDefault(),this._openPanel("keyboard"),this._moveHighlight(1);return}if(t.key==="ArrowUp"){t.preventDefault(),this._openPanel("keyboard"),this._moveHighlight(-1);return}if(t.key==="Enter"){if(this.open&&this._highlightedIndex>=0){t.preventDefault();const e=this._filtered[this._highlightedIndex];e&&this._commitSelection(e)}else if(this.hasAttribute("allow-custom"))t.preventDefault(),this._commitCustomValue(),this._closePanel("keyboard");else if(this.open)t.preventDefault(),this._syncInputFromValue(),this._closePanel("keyboard");else{const e=this._findExactOptionByQuery(this._query);e&&(t.preventDefault(),this._commitSelection(e))}return}if(t.key==="Escape"){this.open&&(t.preventDefault(),this.hasAttribute("allow-custom")||this._syncInputFromValue(),this._closePanel("keyboard"));return}t.key==="Tab"&&(this.hasAttribute("allow-custom")?this._commitCustomValue():this._syncInputFromValue(),this._closePanel("keyboard"))}}_onClearClick(t){t.preventDefault(),this._input&&(this._isDisabled()||this._isReadonly()||(this._query="",this._input.value="",this._suppressValueSync=!0,this.value="",this._suppressValueSync=!1,this._rebuildFiltered({preserveHighlight:!1}),this._renderList(),this._updateClearButton(),this._openPanel("clear"),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{query:"",value:""},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:"",label:""},bubbles:!0,composed:!0}))))}_onToggleClick(t){t.preventDefault(),!this._isDisabled()&&(this.open?this._closePanel("toggle"):this._openPanel("toggle"),this._input?.focus())}_onPanelPointerDown(t){this._isReadonly()||!t.target?.closest("[data-option-index]")||(this._panelPointerDown=!0,t.preventDefault())}_onPanelClick(t){if(this._isReadonly())return;const i=t.target.closest("[data-option-index]");if(!i)return;const s=i.getAttribute("data-option-index"),r=s==null?-1:Number(s);if(!Number.isFinite(r)||r<0)return;const o=this._filtered[r];!o||o.disabled||this._commitSelection(o)}}typeof customElements<"u"&&!customElements.get("ui-combobox")&&customElements.define("ui-combobox",L);exports.UICombobox=L;

package/dist/combobox.esm.js

@@ -1,35 +1,40 @@
-import { E as k } from "./ElementBase-BeZT54Hj.mjs";
-import { e as L } from "./control-name-Bpj7F34X.mjs";
+import { E as L } from "./ElementBase-BeZT54Hj.mjs";
+import { s as k, O as F } from "./overlay-motion-BX3dPLay.mjs";
+import { e as $ } from "./control-name-Bpj7F34X.mjs";
 import { n as h } from "./collection-C7URGjEI.mjs";
-import { c as F } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as $ } from "./listbox-hMVOhKHC.mjs";
-const E = `
+import { c as E } from "./dismissable-layer-BmPIoK80.mjs";
+import { r as D } from "./listbox-hMVOhKHC.mjs";
+const I = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   </svg>
-`, D = `
+`, B = `
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m5.6 7.6 4.4 4.6 4.4-4.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
-`, I = `
+`, S = `
+  ${F}
+
   :host {
     --ui-combobox-width: var(--ui-width, 100%);
     --ui-combobox-min-width: 248px;
-    --ui-combobox-height: 42px;
-    --ui-combobox-padding-x: 12px;
-    --ui-combobox-radius: var(--ui-radius, 12px);
+    --ui-combobox-action-size: 24px;
+    --ui-combobox-height: var(--ui-control-height-2, 32px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-2, 12px);
+    --ui-combobox-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-combobox-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-combobox-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-combobox-text: var(--ui-color-text, #0f172a);
     --ui-combobox-muted: var(--ui-color-muted, #526175);
-    --ui-combobox-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-combobox-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-combobox-border: 1px solid var(--ui-combobox-border-color);
     --ui-combobox-shadow: none;
     --ui-combobox-shadow-hover: none;
     --ui-combobox-shadow-focus: none;
     --ui-combobox-focus: var(--ui-color-primary, #2563eb);
-    --ui-combobox-panel-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
-    --ui-combobox-panel-border: 1px solid color-mix(in srgb, var(--ui-combobox-border-color) 80%, transparent);
-    --ui-combobox-panel-shadow: none;
+    --ui-combobox-panel-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-combobox-panel-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-combobox-border-color) 80%, transparent));
+    --ui-combobox-panel-shadow: var(--shadow-5, 0 14px 34px rgba(15, 23, 42, 0.16));
     --ui-combobox-panel-z: 1600;
     --ui-combobox-option-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 11%, transparent);
     --ui-combobox-option-active: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, transparent);
@@ -76,6 +81,7 @@ const E = `
   }
 
   .control {
+    box-sizing: border-box;
     position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto auto;
@@ -100,8 +106,8 @@ const E = `
   }
 
   .control:hover {
-    border-color: color-mix(in srgb, var(--ui-combobox-focus) 34%, var(--ui-combobox-border-color));
-    box-shadow: var(--ui-combobox-shadow-hover);
+    border-color: var(--ui-color-line-strong, var(--ui-combobox-border-color));
+    box-shadow: none;
   }
 
   input {
@@ -112,23 +118,22 @@ const E = `
     outline: none;
     background: transparent;
     color: var(--ui-combobox-text);
-    padding: 9px var(--ui-combobox-padding-x);
-    font-size: 14px;
+    padding: 0 var(--ui-combobox-padding-x);
+    font-size: var(--ui-combobox-font-size);
     line-height: 1.4;
     font-family: inherit;
-    min-height: var(--ui-combobox-height);
+    min-height: calc(var(--ui-combobox-height) - 2px);
   }
 
   input::placeholder {
-    color: var(--ui-combobox-muted);
+    color: var(--ui-color-placeholder, var(--ui-combobox-muted));
   }
 
   .control[data-focused="true"] {
-    border-color: color-mix(in srgb, var(--ui-combobox-focus) 72%, var(--ui-combobox-border-color));
-    box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-combobox-focus) 16%, transparent),
-      var(--ui-combobox-shadow-focus);
-    transform: translateY(-1px);
+    border-color: var(--ui-ring-color, var(--ui-combobox-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-combobox-focus));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .icon-btn {
@@ -136,8 +141,9 @@ const E = `
     border: none;
     background: transparent;
     color: var(--ui-combobox-muted);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-combobox-action-size);
+    block-size: var(--ui-combobox-action-size);
+    margin-block: var(--ui-combobox-action-bleed, 0px);
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
@@ -185,26 +191,17 @@ const E = `
     left: 0;
     right: 0;
     border: var(--ui-combobox-panel-border);
-    border-radius: calc(var(--ui-combobox-radius) + 2px);
+    border-radius: calc(var(--ui-radius, 6px) + 2px);
     background: var(--ui-combobox-panel-bg);
     box-shadow: var(--ui-combobox-panel-shadow);
     max-height: min(360px, 52vh);
     overflow: auto;
     padding: 6px 6px 8px;
     z-index: var(--ui-combobox-panel-z, 1600);
-    display: none;
-    opacity: 0;
-    transform: translateY(-4px) scale(0.985);
-    transition:
-      opacity var(--ui-combobox-duration) var(--ui-combobox-ease),
-      transform var(--ui-combobox-duration) var(--ui-combobox-ease);
-    backdrop-filter: saturate(1.08) blur(8px);
   }
 
-  .panel[data-open="true"] {
-    display: block;
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  .panel[hidden] {
+    display: none;
   }
 
   .status-row {
@@ -342,12 +339,12 @@ const E = `
 
   :host([state="error"]) .control {
     border-color: var(--ui-combobox-error);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-combobox-error) 19%, transparent), var(--ui-combobox-shadow);
+    box-shadow: 0 0 0 1px var(--ui-combobox-error), var(--ui-combobox-shadow);
   }
 
   :host([state="success"]) .control {
     border-color: color-mix(in srgb, var(--ui-combobox-success) 72%, var(--ui-combobox-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-combobox-success) 13%, transparent), var(--ui-combobox-shadow);
+    box-shadow: 0 0 0 1px var(--ui-combobox-success), var(--ui-combobox-shadow);
   }
 
   :host([disabled]) .control {
@@ -366,14 +363,21 @@ const E = `
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-combobox-height: 36px;
-    --ui-combobox-padding-x: 10px;
+    --ui-combobox-action-size: 24px;
+    --ui-combobox-action-bleed: -1px;
+    --ui-combobox-height: var(--ui-control-height-1, 24px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-1, 8px);
+    --ui-combobox-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-combobox-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-combobox-height: 48px;
-    --ui-combobox-padding-x: 13px;
+    --ui-combobox-action-size: 28px;
+    --ui-combobox-height: var(--ui-control-height-3, 40px);
+    --ui-combobox-padding-x: var(--ui-control-padding-inline-3, 16px);
+    --ui-combobox-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-combobox-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([variant="surface"]) .control {
@@ -403,7 +407,7 @@ const E = `
 
   :host([validation="error"]) .control {
     border-color: var(--ui-combobox-error);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-combobox-error) 20%, transparent), var(--ui-combobox-shadow);
+    box-shadow: 0 0 0 1px var(--ui-combobox-error), var(--ui-combobox-shadow);
   }
 
   :host([validation="success"]) .control {
@@ -482,7 +486,7 @@ function _(d) {
   const t = String(d).toLowerCase();
   return t !== "false" && t !== "0";
 }
-class B extends k {
+class z extends L {
   constructor() {
     super(), this._input = null, this._control = null, this._panel = null, this._clearBtn = null, this._toggleBtn = null, this._options = [], this._filtered = [], this._highlightedIndex = -1, this._query = "", this._debounceTimer = null, this._observer = null, this._uid = Math.random().toString(36).slice(2, 8), this._formUnregister = null, this._isFocused = !1, this._suppressValueSync = !1, this._globalListenersBound = !1, this._dismissableLayer = null, this._nextOpenSource = "attribute", this._optionsRefreshFrame = 0, this._autofocusFrame = 0, this._listStructureFingerprint = "", this._panelPointerDown = !1, this._onInput = this._onInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onToggleClick = this._onToggleClick.bind(this), this._onPanelPointerDown = this._onPanelPointerDown.bind(this), this._onPanelClick = this._onPanelClick.bind(this);
   }
@@ -673,7 +677,7 @@ class B extends k {
         return;
       }
     }
-    this._highlightedIndex = $(this._filtered, {
+    this._highlightedIndex = D(this._filtered, {
       getDisabled: (o) => o.disabled
     });
   }
@@ -775,7 +779,7 @@ class B extends k {
   _applyOpenState() {
     if (!this._panel || !this._input || !this._toggleBtn) return;
     const t = this.open, e = this._isLoading();
-    t ? (this._bindGlobalListeners(), this._panel.setAttribute("data-open", "true"), this._panel.removeAttribute("hidden"), this._panel.setAttribute("aria-hidden", "false"), this._input.setAttribute("aria-expanded", "true"), this._toggleBtn.setAttribute("data-open", "true"), this._rebuildFiltered({ preserveHighlight: !0 }), this._renderList(), this._syncDismissableLayer()) : (this._unbindGlobalListeners(), this._dismissableLayer?.destroy(), this._dismissableLayer = null, this._panel.setAttribute("hidden", ""), this._panel.removeAttribute("data-open"), this._panel.setAttribute("aria-hidden", "true"), this._input.setAttribute("aria-expanded", "false"), this._toggleBtn.setAttribute("data-open", "false")), this._toggleBtn.disabled = this._isDisabled(), this._clearBtn && (this._clearBtn.disabled = this._isDisabled() || this._isReadonly()), this._input.setAttribute("aria-busy", e ? "true" : "false"), this._panel.setAttribute("aria-busy", e ? "true" : "false");
+    t ? (this._bindGlobalListeners(), this._panel.setAttribute("data-open", "true"), k(this._panel, !0, "bottom"), this._panel.setAttribute("aria-hidden", "false"), this._input.setAttribute("aria-expanded", "true"), this._toggleBtn.setAttribute("data-open", "true"), this._rebuildFiltered({ preserveHighlight: !0 }), this._renderList(), this._syncDismissableLayer()) : (this._unbindGlobalListeners(), this._dismissableLayer?.destroy(), this._dismissableLayer = null, k(this._panel, !1, "bottom"), this._panel.removeAttribute("data-open"), this._panel.setAttribute("aria-hidden", "true"), this._input.setAttribute("aria-expanded", "false"), this._toggleBtn.setAttribute("data-open", "false")), this._toggleBtn.disabled = this._isDisabled(), this._clearBtn && (this._clearBtn.disabled = this._isDisabled() || this._isReadonly()), this._input.setAttribute("aria-busy", e ? "true" : "false"), this._panel.setAttribute("aria-busy", e ? "true" : "false");
   }
   _bindGlobalListeners() {
     this._globalListenersBound || (this._globalListenersBound = !0);
@@ -784,7 +788,7 @@ class B extends k {
     this._globalListenersBound && (this._globalListenersBound = !1);
   }
   _syncDismissableLayer() {
-    !this.open || !this._panel || (this._dismissableLayer?.destroy(), this._dismissableLayer = F({
+    !this.open || !this._panel || (this._dismissableLayer?.destroy(), this._dismissableLayer = E({
       node: this._panel,
       trigger: this._control,
       closeOnEscape: !1,
@@ -844,14 +848,14 @@ class B extends k {
     r < 0 || (this._highlightedIndex = r, this._renderList());
   }
   render() {
-    const t = this.hasAttribute("headless"), e = this.getAttribute("disabled"), i = _(e), r = this._isReadonly(), s = this._state(), o = s === "loading", a = this.getAttribute("placeholder") || "Search...", l = this.getAttribute("maxlength"), b = this.hasAttribute("required"), u = this.getAttribute("label") || "", c = this.getAttribute("description") || "", x = this.getAttribute("data-error") || "" || (s === "error" ? this._stateText() || "Unable to load options." : ""), m = this.getAttribute("validation") === "error" || s === "error" || !!x, f = !!(u || this.querySelector('[slot="label"]')), g = (this.getAttribute("aria-label") || "").trim(), v = !!(c || this.querySelector('[slot="description"]')), y = `${this._uid}-error`, w = L(this, this._uid), A = [v ? `${this._uid}-description` : "", m ? y : "", w.id].filter(Boolean).join(" ");
+    const t = this.hasAttribute("headless"), e = this.getAttribute("disabled"), i = _(e), r = this._isReadonly(), s = this._state(), o = s === "loading", a = this.getAttribute("placeholder") || "Search...", l = this.getAttribute("maxlength"), b = this.hasAttribute("required"), u = this.getAttribute("label") || "", c = this.getAttribute("description") || "", x = this.getAttribute("data-error") || "" || (s === "error" ? this._stateText() || "Unable to load options." : ""), m = this.getAttribute("validation") === "error" || s === "error" || !!x, f = !!(u || this.querySelector('[slot="label"]')), v = (this.getAttribute("aria-label") || "").trim(), g = !!(c || this.querySelector('[slot="description"]')), y = `${this._uid}-error`, w = $(this, this._uid), A = [g ? `${this._uid}-description` : "", m ? y : "", w.id].filter(Boolean).join(" ");
     if (this._options = this._readOptions(), !this._query) {
       const C = this._findOptionByValue(this.value);
       this._query = C ? C.label : this.value;
     }
     this._rebuildFiltered({ preserveHighlight: !1 }), this.setContent(`
-      ${t ? "" : `<style>${I}</style>`}
-      ${f || v ? `
+      ${t ? "" : `<style>${S}</style>`}
+      ${f || g ? `
         <div class="label-row">
           <label class="label" part="label" id="${this._uid}-label"><slot name="label">${n(u)}</slot></label>
           <div class="description" part="description" id="${this._uid}-description"><slot name="description">${n(c)}</slot></div>
@@ -868,7 +872,7 @@ class B extends k {
             aria-autocomplete="list"
             aria-expanded="${this.open ? "true" : "false"}"
             aria-controls="${this._uid}-listbox"
-            ${f ? `aria-labelledby="${this._uid}-label"` : g ? `aria-label="${n(g)}"` : ""}
+            ${f ? `aria-labelledby="${this._uid}-label"` : v ? `aria-label="${n(v)}"` : ""}
             ${A ? `aria-describedby="${A}"` : ""}
             ${m ? 'aria-invalid="true"' : ""}
             aria-busy="${o ? "true" : "false"}"
@@ -879,8 +883,8 @@ class B extends k {
             ${b ? "required" : ""}
             ${l ? `maxlength="${n(l)}"` : ""}
           />
-          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${r ? "disabled" : ""}>${E}</button>
-          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open ? "true" : "false"}" aria-label="Toggle options">${D}</button>
+          <button type="button" part="clear" class="icon-btn clear-btn" aria-label="Clear value" hidden ${r ? "disabled" : ""}>${I}</button>
+          <button type="button" part="toggle" class="icon-btn toggle-btn" data-open="${this.open ? "true" : "false"}" aria-label="Toggle options">${B}</button>
         </div>
         <ui-listbox class="panel" id="${this._uid}-listbox" part="panel" role="listbox" item-selector=".option[data-option-index]" item-role="option" active-attribute="data-highlighted" aria-busy="${o ? "true" : "false"}" data-state="${n(s)}" ${this.open ? 'data-open="true" aria-hidden="false"' : 'hidden aria-hidden="true"'}></ui-listbox>
       </div>
@@ -1029,7 +1033,7 @@ class B extends k {
     !o || o.disabled || this._commitSelection(o);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-combobox") && customElements.define("ui-combobox", B);
+typeof customElements < "u" && !customElements.get("ui-combobox") && customElements.define("ui-combobox", z);
 export {
-  B as UICombobox
+  z as UICombobox
 };