@editora/ui-core 0.1.25 → 0.2.0

package/dist/select.cjs.js

@@ -1,16 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./ElementBase-DxbvhLJs.js"),$=require("./control-name-BmoI1m3a.js"),_=require("./collection-qv8A8rq4.js"),L=require("./listbox-CTpRpuF7.js"),F=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("./ElementBase-DxbvhLJs.js"),I=require("./overlay-motion-B56x1GoY.js"),L=require("./control-name-BmoI1m3a.js"),_=require("./collection-qv8A8rq4.js"),F=require("./listbox-CTpRpuF7.js"),D=`
+  ${I.OVERLAY_MOTION_CSS}
+
   :host {
     --ui-select-width: var(--ui-width, min(340px, 100%));
-    --ui-select-min-height: var(--base-select-height-md, 42px);
-    --ui-select-radius: var(--base-select-radius, var(--ui-radius, 4px));
-    --ui-select-padding-x: var(--base-select-padding-x, 12px);
+    --ui-select-min-height: var(--base-select-height-md, var(--ui-control-height-2, 32px));
+    --ui-select-radius: var(--base-select-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
+    --ui-select-padding-x: var(--base-select-padding-x, var(--ui-control-padding-inline-2, 12px));
+    --ui-select-font-size: var(--ui-control-font-size-2, 14px);
 
     --ui-select-bg: var(--base-select-bg, var(--ui-color-surface, #ffffff));
-    --ui-select-border: var(--base-select-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
+    --ui-select-border: var(--base-select-border, 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1)));
     --ui-select-border-color: color-mix(in srgb, var(--ui-select-border) 100%, transparent);
     --ui-select-text: var(--ui-color-text, #0f172a);
     --ui-select-muted: var(--ui-color-muted, #526175);
-    --ui-select-placeholder: color-mix(in srgb, var(--ui-select-text) 44%, transparent);
+    --ui-select-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-select-text) 62%, transparent));
     --ui-select-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-select-accent: var(--ui-color-primary, #2563eb);
     --ui-select-success: var(--ui-color-success, #15803d);
@@ -19,14 +22,12 @@
 
     --ui-select-shadow: var(--base-select-shadow, none);
     --ui-select-elevation: var(--ui-select-shadow);
-    --ui-select-menu-bg: var(--base-select-menu-bg, color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent));
+    --ui-select-menu-bg: var(--base-select-menu-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-select-menu-color: var(--base-select-menu-color, var(--ui-select-text));
-    --ui-select-menu-border-color: color-mix(in srgb, var(--ui-select-border-color) 82%, transparent);
+    --ui-select-menu-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-select-border-color) 82%, transparent));
     --ui-select-menu-border: 1px solid var(--ui-select-menu-border-color);
-    --ui-select-menu-radius: var(--base-select-menu-radius, var(--ui-select-radius));
-    --ui-select-menu-shadow:
-      0 14px 34px rgba(15, 23, 42, 0.16),
-      0 3px 10px rgba(15, 23, 42, 0.08);
+    --ui-select-menu-radius: var(--base-select-menu-radius, calc(var(--ui-radius, 6px) + 2px));
+    --ui-select-menu-shadow: var(--shadow-5, 0 14px 34px rgba(15, 23, 42, 0.16));
     --ui-select-menu-padding: 0px;
     --ui-select-menu-gap: 8px;
     --ui-select-menu-max-height: min(320px, var(--ui-select-available-height, 320px));
@@ -98,6 +99,7 @@
   }
 
   .control {
+    box-sizing: border-box;
     min-inline-size: 0;
     position: relative;
     display: block;
@@ -117,10 +119,14 @@
 
   .control[data-open="true"],
   .control:focus-within {
-    border-color: color-mix(in srgb, var(--ui-select-focus) 62%, var(--ui-select-border-color));
-    box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-select-focus) 18%, transparent),
-      var(--ui-select-elevation);
+    border-color: var(--ui-ring-color, var(--ui-select-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-select-focus));
+    outline-offset: -1px;
+    box-shadow: var(--ui-select-elevation);
+  }
+
+  .control:hover:not(:focus-within):not([data-open="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-select-border-color));
   }
 
   .leading,
@@ -159,6 +165,7 @@
   }
 
   .trigger {
+    display: block;
     inline-size: 100%;
     min-inline-size: 0;
     block-size: calc(var(--ui-select-min-height) - 2px);
@@ -167,8 +174,8 @@
     outline: none;
     background: transparent;
     color: var(--ui-select-text);
-    font: 500 14px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    padding: 8px calc(var(--ui-select-padding-x) + 24px) 8px var(--ui-select-padding-x);
+    font: 500 var(--ui-select-font-size)/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 0 calc(var(--ui-select-padding-x) + 24px) 0 var(--ui-select-padding-x);
     margin: 0;
     cursor: pointer;
     text-align: left;
@@ -270,9 +277,7 @@
     overflow-x: hidden;
     border: var(--ui-select-menu-border);
     border-radius: var(--ui-select-menu-radius);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--ui-select-accent) 3%, transparent) 0%, transparent 100%),
-      var(--ui-select-menu-bg);
+    background: var(--ui-select-menu-bg);
     color: var(--ui-select-menu-color);
     box-shadow: var(--ui-select-menu-shadow);
     padding: var(--ui-select-menu-padding);
@@ -301,16 +306,6 @@
     background-clip: padding-box;
   }
 
-  .panel[data-placement="top"] .menu {
-    transform-origin: bottom center;
-    animation: ui-select-menu-enter-top 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-
-  .panel[data-placement="bottom"] .menu {
-    transform-origin: top center;
-    animation: ui-select-menu-enter-bottom 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-
   .menu-group {
     color: color-mix(in srgb, var(--ui-select-muted) 88%, transparent);
     font: 700 11px/1.3 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -475,17 +470,14 @@
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-select-min-height: 34px;
-    --ui-select-padding-x: 10px;
+    --ui-select-min-height: var(--base-select-height-sm, var(--ui-control-height-1, 24px));
+    --ui-select-padding-x: var(--ui-control-padding-inline-1, 8px);
+    --ui-select-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-select-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-select-menu-gap: 6px;
     --ui-select-menu-item-height: 34px;
   }
 
-  :host([size="sm"]) .trigger,
-  :host([size="1"]) .trigger {
-    font-size: 12px;
-  }
-
   :host([size="sm"]) .menu-item,
   :host([size="1"]) .menu-item {
     font-size: 12px;
@@ -494,17 +486,14 @@
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-select-min-height: 46px;
-    --ui-select-padding-x: 13px;
+    --ui-select-min-height: var(--base-select-height-lg, var(--ui-control-height-3, 40px));
+    --ui-select-padding-x: var(--ui-control-padding-inline-3, 16px);
+    --ui-select-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-select-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-select-menu-gap: 10px;
     --ui-select-menu-item-height: 42px;
   }
 
-  :host([size="lg"]) .trigger,
-  :host([size="3"]) .trigger {
-    font-size: 15px;
-  }
-
   :host([size="lg"]) .menu-item,
   :host([size="3"]) .menu-item {
     font-size: 14px;
@@ -655,7 +644,7 @@
   :host([invalid]) .control,
   :host([data-invalid="true"]) .control {
     box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-select-error) 18%, transparent),
+      0 0 0 1px var(--ui-select-error),
       var(--ui-select-elevation);
   }
 
@@ -669,28 +658,6 @@
     }
   }
 
-  @keyframes ui-select-menu-enter-bottom {
-    from {
-      opacity: 0;
-      transform: translateY(-4px) scale(0.985);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes ui-select-menu-enter-top {
-    from {
-      opacity: 0;
-      transform: translateY(4px) scale(0.985);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .control,
     .indicator,
@@ -742,8 +709,8 @@
       border-bottom-color: CanvasText;
     }
   }
-`;function h(p){if(p==null)return!1;const e=String(p).toLowerCase();return e!=="false"&&e!=="0"}function v(p){return String(p).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function D(p){if(!p)return null;const e=String(p).trim();return e?e==="none"?"4px":e==="full"?"999px":e==="large"?"16px":/^-?\\d+(\\.\\d+)?$/.test(e)?`${e}px`:e:null}const C=new Set(["value","disabled","loading","required","placeholder","name","tabindex","headless","size","variant","tone","density","radius","shape","elevation","option-border","show-check","check-placement","label","description","error","aria-label","validation","invalid","data-invalid","data-valid","close-on-scroll"]);class I extends q.ElementBase{constructor(){super(),this._controlEl=null,this._triggerEl=null,this._valueEl=null,this._panelEl=null,this._menuEl=null,this._observer=null,this._formUnregister=null,this._optionsSyncRaf=0,this._panelPlacementRaf=0,this._uid=Math.random().toString(36).slice(2,8),this._options=[],this._menuItems=[],this._optionsFingerprint="",this._menuRenderFingerprint="",this._open=!1,this._activeIndex=-1,this._placement="bottom",this._onRootClick=this._onRootClick.bind(this),this._onRootKeyDown=this._onRootKeyDown.bind(this),this._onRootPointerDown=this._onRootPointerDown.bind(this),this._onRootPointerMove=this._onRootPointerMove.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onWindowResize=this._onWindowResize.bind(this),this._onWindowScroll=this._onWindowScroll.bind(this)}static get observedAttributes(){return["aria-description","aria-describedby","value","disabled","loading","required","placeholder","name","tabindex","headless","size","variant","tone","density","radius","shape","elevation","option-border","show-check","check-placement","label","description","error","aria-label","validation","invalid","data-invalid","data-valid","close-on-scroll"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("keydown",this._onRootKeyDown),this.root.addEventListener("pointerdown",this._onRootPointerDown),this.root.addEventListener("pointermove",this._onRootPointerMove,{passive:!0}),this.root.addEventListener("slotchange",this._onSlotChange),this._observer=new MutationObserver(e=>{e.some(i=>{if(!(i.target instanceof HTMLElement)||i.target===this)return i.type==="childList";const s=i.target.tagName.toLowerCase();return s==="option"||s==="optgroup"})&&this._scheduleOptionsSync()}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","selected","disabled","label","slot"]}),this._attachFormRegistration()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("keydown",this._onRootKeyDown),this.root.removeEventListener("pointerdown",this._onRootPointerDown),this.root.removeEventListener("pointermove",this._onRootPointerMove),this.root.removeEventListener("slotchange",this._onSlotChange),this._teardownOpenListeners(),this._observer&&(this._observer.disconnect(),this._observer=null),this._cancelOptionsSync(),this._cancelPanelPlacement(),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return!C.has(e)}attributeChangedCallback(e,t,i){if(t!==i){if(e==="name"&&this._attachFormRegistration(),this._triggerEl&&C.has(e)){(e==="value"||e==="placeholder"||e==="required")&&(this._syncOptionsData(),this._open&&this._renderMenu()),(e==="show-check"||e==="check-placement")&&this._open&&this._renderMenu(),this._syncControlState(),this.disabled&&this._open&&this._closeMenu({restoreFocus:!1});return}super.attributeChangedCallback(e,t,i)}}get value(){return this.getAttribute("value")||""}set value(e){const t=String(e||"");t!==this.value&&this.setAttribute("value",t)}get disabled(){return h(this.getAttribute("disabled"))||h(this.getAttribute("loading"))}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get closeOnScroll(){return h(this.getAttribute("close-on-scroll"))||!this.hasAttribute("close-on-scroll")}set closeOnScroll(e){this.setAttribute("close-on-scroll",e?"true":"false")}get showCheck(){return h(this.getAttribute("show-check"))}set showCheck(e){e?this.setAttribute("show-check","true"):this.removeAttribute("show-check")}focus(e){if(this._triggerEl){this._triggerEl.focus(e);return}super.focus(e)}blur(){if(this._triggerEl){this._triggerEl.blur();return}super.blur()}_onSlotChange(){this.requestRender()}_onRootPointerDown(e){const t=e.target;t&&t.closest(".menu-item")&&e.preventDefault()}_onRootPointerMove(e){if(!this._open)return;const i=e.target?.closest(".menu-item[data-index]");if(!i)return;const s=Number(i.dataset.index||"-1"),o=this._options[s];!o||o.disabled||s===this._activeIndex||this._setActiveIndex(s)}_onRootClick(e){const t=e.target;if(!t)return;if(t.closest(".trigger")){if(this.disabled)return;this._open?this._closeMenu({restoreFocus:!1}):this._openMenu();return}const i=t.closest(".menu-item[data-index]");if(!i)return;const s=Number(i.dataset.index||"-1"),o=this._options[s];!o||o.disabled||(this._applyValueFromUser(o.value),this._closeMenu())}_onRootKeyDown(e){const t=e.target;if(!(!t||t!==this._triggerEl&&!t.closest(".menu"))&&!this.disabled)switch(e.key){case"ArrowDown":e.preventDefault(),this._open?this._moveActive(1):this._openMenu();break;case"ArrowUp":e.preventDefault(),this._open?this._moveActive(-1):this._openMenu();break;case"Home":if(!this._open)return;e.preventDefault(),this._setActiveIndex(this._firstEnabledIndex());break;case"End":if(!this._open)return;e.preventDefault(),this._setActiveIndex(this._lastEnabledIndex());break;case"Enter":case" ":{if(e.preventDefault(),!this._open){this._openMenu();return}this._selectActiveOption();break}case"Escape":if(!this._open)return;e.preventDefault(),this._closeMenu();break;case"Tab":this._open&&this._closeMenu({restoreFocus:!1});break}}_onDocumentPointerDown(e){if(!this._open)return;const t=typeof e.composedPath=="function"?e.composedPath():[];t.includes(this)||t.includes(this.root)||this._closeMenu({restoreFocus:!1})}_isInternalEvent(e){const t=e.target,i=typeof e.composedPath=="function"?e.composedPath():[];return i.includes(this)||i.includes(this.root)||t instanceof Node&&(t===this||this.root.contains(t)||this._controlEl?.contains(t)||this._panelEl?.contains(t)||this._menuEl?.contains(t))?!0:!!(this._controlEl&&i.includes(this._controlEl)||this._triggerEl&&i.includes(this._triggerEl)||this._panelEl&&i.includes(this._panelEl)||this._menuEl&&i.includes(this._menuEl))}_onWindowResize(){this._open&&this._schedulePanelPlacement()}_onWindowScroll(e){if(this._open&&!this._isInternalEvent(e)){if(this.closeOnScroll){this._closeMenu({restoreFocus:!1});return}this._schedulePanelPlacement()}}_attachOpenListeners(){document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("scroll",this._onWindowScroll,{passive:!0,capture:!0})}_teardownOpenListeners(){document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("scroll",this._onWindowScroll,!0)}_scheduleOptionsSync(){this._optionsSyncRaf||(this._optionsSyncRaf=requestAnimationFrame(()=>{this._optionsSyncRaf=0,this._syncOptionsData()&&this._open?this._renderMenu():this._syncControlState()}))}_cancelOptionsSync(){this._optionsSyncRaf&&(cancelAnimationFrame(this._optionsSyncRaf),this._optionsSyncRaf=0)}_schedulePanelPlacement(){this._panelPlacementRaf||(this._panelPlacementRaf=requestAnimationFrame(()=>{this._panelPlacementRaf=0,this._syncPanelPlacement()}))}_cancelPanelPlacement(){this._panelPlacementRaf&&(cancelAnimationFrame(this._panelPlacementRaf),this._panelPlacementRaf=0)}_emitValue(e,t){this.dispatchEvent(new CustomEvent(e,{detail:{value:t},bubbles:!0,composed:!0}))}_applyValueFromUser(e){(this.getAttribute("value")||"")!==e&&(this.setAttribute("value",e),this._emitValue("input",e),this._emitValue("change",e))}_attachFormRegistration(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);const e=this.getAttribute("name");if(!e)return;const t=this.getRootNode(),s=(t instanceof ShadowRoot?t.host:null)?.closest?.("ui-form")||this.closest("ui-form");!s||typeof s.registerField!="function"||(this._formUnregister=s.registerField(e,{name:e,getValue:()=>this.value,setValue:o=>{this.value=o},validate:async()=>{if(!(h(this.getAttribute("required"))||this.hasAttribute("required")))return{valid:!0};const l=this.value.trim().length>0;return{valid:l,message:l?void 0:"This field is required."}},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("error",o)):(this.getAttribute("validation")==="error"&&this.removeAttribute("validation"),this.removeAttribute("error"))}}))}_hasSlotContent(e){return!!this.querySelector(`[slot="${e}"]`)}_setValueAttr(e){const t=String(e??"");this.getAttribute("value")!==t&&this.setAttribute("value",t)}_buildOptionsFromChildren(){const e=[],t=(r,u)=>{const n=(r.label||r.textContent||r.value||"").trim(),a=String(r.value??"");e.push({value:a,label:n||a,disabled:!!r.disabled,group:u})};Array.from(this.children).filter(r=>r instanceof HTMLElement?!r.hasAttribute("slot"):!1).forEach(r=>{const u=r.tagName.toLowerCase();if(u==="option"){t(r,"");return}if(u==="optgroup"){const n=r,a=(n.label||"").trim();Array.from(n.children).forEach(c=>{c instanceof HTMLOptionElement&&e.push({value:String(c.value??""),label:(c.label||c.textContent||c.value||"").trim()||String(c.value??""),disabled:!!c.disabled||!!n.disabled,group:a})})}});const s=(this.getAttribute("placeholder")||"").trim(),o=h(this.getAttribute("required"))||this.hasAttribute("required"),l=e.some(r=>r.value==="");return s&&!o&&!l&&e.unshift({value:"",label:s,disabled:!1,group:""}),e}_computeOptionsFingerprint(e){return e.map(t=>`${t.value}
${t.label}
${t.disabled?"1":"0"}
${t.group}`).join("")}_firstEnabledIndex(){return _.findFirstEnabledIndex(this._options,e=>e.disabled)}_lastEnabledIndex(){return _.findLastEnabledIndex(this._options,e=>e.disabled)}_selectedIndex(){return _.findIndexByValue(this._options,this.value,e=>e.value)}_checkPlacement(){return this.getAttribute("check-placement")==="start"?"start":"end"}_syncOptionsData(){const e=this._buildOptionsFromChildren(),t=this._computeOptionsFingerprint(e),i=t!==this._optionsFingerprint;this._options=e,this._optionsFingerprint=t;const s=this.getAttribute("value")||"",o=this.hasAttribute("value"),l=this._options.some(a=>a.value===s),r=h(this.getAttribute("required"))||this.hasAttribute("required"),u=this._options.find(a=>!a.disabled)?.value||"",n=!r&&this._options.some(a=>a.value==="")?"":u;return o?l||this._setValueAttr(n):this._setValueAttr(n),i}_currentDisplayText(){const e=this.value,t=(this.getAttribute("placeholder")||"").trim();return e===""&&t?t:this._options.find(s=>s.value===e)?.label||e}_setActiveIndex(e){if(!this._menuEl||e===this._activeIndex)return;this._activeIndex=e;const t=e>=0&&this._menuItems[e]||null;this._menuEl.setActiveItem(t,{focus:!1,owner:this._triggerEl,scroll:!0})}_moveActive(e){if(!this._menuEl||!this._options.length)return;const t=this._activeIndex>=0?this._menuItems[this._activeIndex]:null,i=this._menuEl.move(e,{current:t,focus:!1,owner:this._triggerEl,scroll:!0});if(!i)return;const s=Number(i.dataset.index||"-1");s>=0&&(this._activeIndex=s)}_selectActiveOption(){if(this._activeIndex<0)return;const e=this._options[this._activeIndex];!e||e.disabled||(this._applyValueFromUser(e.value),this._closeMenu())}_renderMenu(){const e=this._menuEl;if(!e)return;const t=`${this._optionsFingerprint}
${this.showCheck?"1":"0"}
${this._checkPlacement()}`;if(this._menuItems.length>0&&t===this._menuRenderFingerprint&&this._menuItems.length===this._options.length){this._syncMenuSelectionState(),this._schedulePanelPlacement();return}if(e.replaceChildren(),this._menuItems=[],!this._options.length){const r=document.createElement("p");r.className="menu-empty",r.textContent="No options available",e.appendChild(r),this._menuRenderFingerprint=t,e.refresh();return}let s="__none__";this._options.forEach((r,u)=>{if(r.group&&r.group!==s){const d=document.createElement("div");d.className="menu-group",d.setAttribute("role","presentation"),d.textContent=r.group,e.appendChild(d),s=r.group}r.group||(s="__none__");const n=document.createElement("button");n.type="button",n.className="menu-item",n.id=`${this._uid}-opt-${u}`,n.setAttribute("role","option"),n.setAttribute("data-index",String(u)),n.setAttribute("data-value",r.value),n.setAttribute("aria-selected",r.value===this.value?"true":"false"),n.setAttribute("aria-disabled",r.disabled?"true":"false"),n.tabIndex=-1,r.disabled&&(n.disabled=!0);const a=document.createElement("span");a.className="menu-item-label",a.textContent=r.label;const c=document.createElement("span");c.className="menu-item-check",c.setAttribute("aria-hidden","true");const b=this.showCheck,m=this._checkPlacement();c.hidden=!b,n.setAttribute("data-check-placement",m),b&&m==="start"?n.append(c,a):n.append(a,c),e.appendChild(n),this._menuItems.push(n)});const o=this._menuItems[0]||null,l=this._menuItems[this._menuItems.length-1]||null;o&&o.setAttribute("data-edge-start","true"),l&&l.setAttribute("data-edge-end","true"),e.refresh(),this._menuRenderFingerprint=t,this._syncMenuSelectionState(),this._schedulePanelPlacement()}_syncMenuSelectionState(){if(!this._menuEl)return;const e=this._selectedIndex();this._menuItems.forEach(i=>{const s=Number(i.dataset.index||"-1");i.setAttribute("aria-selected",s===e?"true":"false")}),this._activeIndex=L.resolveListboxActiveIndex(this._options,{selectedIndex:e,getDisabled:i=>i.disabled});const t=this._activeIndex>=0&&this._menuItems[this._activeIndex]||null;this._menuEl.setActiveItem(t,{focus:!1,owner:this._triggerEl,scroll:!0})}_syncPanelPlacement(){const e=this._panelEl,t=this._controlEl,i=this._menuEl;if(!e||!t||!i||!this._open)return;const s=t.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight||0,l=Math.max(0,o-s.bottom-12),r=Math.max(0,s.top-12),u=Math.min(Math.max(i.scrollHeight,i.offsetHeight)+4,320),n=l<u&&r>l;this._placement=n?"top":"bottom",e.setAttribute("data-placement",this._placement),e.style.setProperty("--ui-select-available-height",`${Math.floor(n?r:l)}px`)}_openMenu(){this._open||this.disabled||(this._cancelPanelPlacement(),this._syncOptionsData(),this._open=!0,this._syncControlState(),this._renderMenu(),this._attachOpenListeners())}_closeMenu(e={}){if(this._open&&(this._open=!1,this._activeIndex=-1,this._cancelPanelPlacement(),this._teardownOpenListeners(),this._syncControlState(),e.restoreFocus!==!1))try{this._triggerEl?.focus({preventScroll:!0})}catch{this._triggerEl?.focus()}}_syncControlState(){const e=this._triggerEl,t=this._controlEl,i=this._valueEl,s=this._panelEl;if(!e||!t||!i||!s)return;const o=this.getAttribute("label")||"",l=this.getAttribute("description")||"",r=this.getAttribute("error")||"",u=this.getAttribute("aria-label")||o||"Select",n=h(this.getAttribute("loading")),a=h(this.getAttribute("required"))||this.hasAttribute("required"),c=this.getAttribute("tabindex"),b=this.hasAttribute("validation")&&this.getAttribute("validation")==="error"||this.hasAttribute("invalid")||this.getAttribute("data-invalid")==="true",m=D(this.getAttribute("radius")),d=this.root.querySelector(".label"),x=this.root.querySelector(".label-text"),g=this.root.querySelector(".description"),f=this.root.querySelector(".description-text"),y=this.root.querySelector(".error"),w=this.root.querySelector(".error-text"),A=this.root.querySelector(".meta"),E=this.root.querySelector(".required"),k=!!o||this._hasSlotContent("label"),S=!!l||this._hasSlotContent("description"),z=!!r||this._hasSlotContent("error"),P=this._hasSlotContent("leading"),M=this._hasSlotContent("trailing"),R=!!(this.getAttribute("placeholder")||"").trim()&&this.value==="";x&&(x.textContent=o),f&&(f.textContent=l),w&&(w.textContent=r),d&&(d.hidden=!k),g&&(g.hidden=!S),y&&(y.hidden=!z),A&&(A.hidden=!k&&!S),E&&(E.hidden=!a),i.textContent=this._currentDisplayText(),t.setAttribute("data-open",this._open?"true":"false"),t.setAttribute("data-placeholder-shown",R?"true":"false"),t.setAttribute("data-has-leading",String(P)),t.setAttribute("data-has-trailing",String(M)),e.disabled=this.disabled,e.setAttribute("aria-label",u),e.setAttribute("aria-expanded",this._open?"true":"false"),e.setAttribute("aria-busy",n?"true":"false"),e.setAttribute("aria-required",a?"true":"false"),b?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid"),c!=null&&!this.disabled?e.setAttribute("tabindex",c):this.disabled?e.setAttribute("tabindex","-1"):e.setAttribute("tabindex","0"),s.hidden=!this._open,s.setAttribute("data-placement",this._placement),this._open?e.setAttribute("aria-controls",`${this._uid}-listbox`):e.removeAttribute("aria-controls"),m&&!["none","full","large"].includes(this.getAttribute("radius")||"")?this.style.setProperty("--ui-select-radius",m):this.style.removeProperty("--ui-select-radius"),this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.setAttribute("aria-busy",n?"true":"false"),this.toggleAttribute("open",this._open),this._open&&this._schedulePanelPlacement()}render(){const e=this.getAttribute("label")||"",t=this.getAttribute("description")||"",i=this.getAttribute("error")||"",s=h(this.getAttribute("required"))||this.hasAttribute("required"),o=this.getAttribute("aria-label")||e||"Select",l=!!e||this._hasSlotContent("label"),r=!!t||this._hasSlotContent("description"),u=!!i||this._hasSlotContent("error"),n=this._hasSlotContent("leading"),a=this._hasSlotContent("trailing"),c=`${this._uid}-label`,b=`${this._uid}-description`,m=`${this._uid}-error`,d=`${this._uid}-trigger`,x=`${this._uid}-listbox`,g=$.externalDescriptionMarkup(this,this._uid),f=[r?b:"",u?m:"",g.id].filter(Boolean).join(" ");this.setContent(`
-      <style>${F}</style>
+`;function h(p){if(p==null)return!1;const e=String(p).toLowerCase();return e!=="false"&&e!=="0"}function v(p){return String(p).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function O(p){if(!p)return null;const e=String(p).trim();return e?e==="none"?"4px":e==="full"?"999px":e==="large"?"16px":/^-?\\d+(\\.\\d+)?$/.test(e)?`${e}px`:e:null}const C=new Set(["value","disabled","loading","required","placeholder","name","tabindex","headless","size","variant","tone","density","radius","shape","elevation","option-border","show-check","check-placement","label","description","error","aria-label","validation","invalid","data-invalid","data-valid","close-on-scroll"]);class z extends $.ElementBase{constructor(){super(),this._controlEl=null,this._triggerEl=null,this._valueEl=null,this._panelEl=null,this._menuEl=null,this._observer=null,this._formUnregister=null,this._optionsSyncRaf=0,this._panelPlacementRaf=0,this._uid=Math.random().toString(36).slice(2,8),this._options=[],this._menuItems=[],this._optionsFingerprint="",this._menuRenderFingerprint="",this._open=!1,this._activeIndex=-1,this._placement="bottom",this._onRootClick=this._onRootClick.bind(this),this._onRootKeyDown=this._onRootKeyDown.bind(this),this._onRootPointerDown=this._onRootPointerDown.bind(this),this._onRootPointerMove=this._onRootPointerMove.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onWindowResize=this._onWindowResize.bind(this),this._onWindowScroll=this._onWindowScroll.bind(this)}static get observedAttributes(){return["aria-description","aria-describedby","value","disabled","loading","required","placeholder","name","tabindex","headless","size","variant","tone","density","radius","shape","elevation","option-border","show-check","check-placement","label","description","error","aria-label","validation","invalid","data-invalid","data-valid","close-on-scroll"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("keydown",this._onRootKeyDown),this.root.addEventListener("pointerdown",this._onRootPointerDown),this.root.addEventListener("pointermove",this._onRootPointerMove,{passive:!0}),this.root.addEventListener("slotchange",this._onSlotChange),this._observer=new MutationObserver(e=>{e.some(i=>{if(!(i.target instanceof HTMLElement)||i.target===this)return i.type==="childList";const s=i.target.tagName.toLowerCase();return s==="option"||s==="optgroup"})&&this._scheduleOptionsSync()}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","selected","disabled","label","slot"]}),this._attachFormRegistration()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("keydown",this._onRootKeyDown),this.root.removeEventListener("pointerdown",this._onRootPointerDown),this.root.removeEventListener("pointermove",this._onRootPointerMove),this.root.removeEventListener("slotchange",this._onSlotChange),this._teardownOpenListeners(),this._observer&&(this._observer.disconnect(),this._observer=null),this._cancelOptionsSync(),this._cancelPanelPlacement(),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return!C.has(e)}attributeChangedCallback(e,t,i){if(t!==i){if(e==="name"&&this._attachFormRegistration(),this._triggerEl&&C.has(e)){(e==="value"||e==="placeholder"||e==="required")&&(this._syncOptionsData(),this._open&&this._renderMenu()),(e==="show-check"||e==="check-placement")&&this._open&&this._renderMenu(),this._syncControlState(),this.disabled&&this._open&&this._closeMenu({restoreFocus:!1});return}super.attributeChangedCallback(e,t,i)}}get value(){return this.getAttribute("value")||""}set value(e){const t=String(e||"");t!==this.value&&this.setAttribute("value",t)}get disabled(){return h(this.getAttribute("disabled"))||h(this.getAttribute("loading"))}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get closeOnScroll(){return h(this.getAttribute("close-on-scroll"))||!this.hasAttribute("close-on-scroll")}set closeOnScroll(e){this.setAttribute("close-on-scroll",e?"true":"false")}get showCheck(){return h(this.getAttribute("show-check"))}set showCheck(e){e?this.setAttribute("show-check","true"):this.removeAttribute("show-check")}focus(e){if(this._triggerEl){this._triggerEl.focus(e);return}super.focus(e)}blur(){if(this._triggerEl){this._triggerEl.blur();return}super.blur()}_onSlotChange(){this.requestRender()}_onRootPointerDown(e){const t=e.target;t&&t.closest(".menu-item")&&e.preventDefault()}_onRootPointerMove(e){if(!this._open)return;const i=e.target?.closest(".menu-item[data-index]");if(!i)return;const s=Number(i.dataset.index||"-1"),o=this._options[s];!o||o.disabled||s===this._activeIndex||this._setActiveIndex(s)}_onRootClick(e){const t=e.target;if(!t)return;if(t.closest(".trigger")){if(this.disabled)return;this._open?this._closeMenu({restoreFocus:!1}):this._openMenu();return}const i=t.closest(".menu-item[data-index]");if(!i)return;const s=Number(i.dataset.index||"-1"),o=this._options[s];!o||o.disabled||(this._applyValueFromUser(o.value),this._closeMenu())}_onRootKeyDown(e){const t=e.target;if(!(!t||t!==this._triggerEl&&!t.closest(".menu"))&&!this.disabled)switch(e.key){case"ArrowDown":e.preventDefault(),this._open?this._moveActive(1):this._openMenu();break;case"ArrowUp":e.preventDefault(),this._open?this._moveActive(-1):this._openMenu();break;case"Home":if(!this._open)return;e.preventDefault(),this._setActiveIndex(this._firstEnabledIndex());break;case"End":if(!this._open)return;e.preventDefault(),this._setActiveIndex(this._lastEnabledIndex());break;case"Enter":case" ":{if(e.preventDefault(),!this._open){this._openMenu();return}this._selectActiveOption();break}case"Escape":if(!this._open)return;e.preventDefault(),this._closeMenu();break;case"Tab":this._open&&this._closeMenu({restoreFocus:!1});break}}_onDocumentPointerDown(e){if(!this._open)return;const t=typeof e.composedPath=="function"?e.composedPath():[];t.includes(this)||t.includes(this.root)||this._closeMenu({restoreFocus:!1})}_isInternalEvent(e){const t=e.target,i=typeof e.composedPath=="function"?e.composedPath():[];return i.includes(this)||i.includes(this.root)||t instanceof Node&&(t===this||this.root.contains(t)||this._controlEl?.contains(t)||this._panelEl?.contains(t)||this._menuEl?.contains(t))?!0:!!(this._controlEl&&i.includes(this._controlEl)||this._triggerEl&&i.includes(this._triggerEl)||this._panelEl&&i.includes(this._panelEl)||this._menuEl&&i.includes(this._menuEl))}_onWindowResize(){this._open&&this._schedulePanelPlacement()}_onWindowScroll(e){if(this._open&&!this._isInternalEvent(e)){if(this.closeOnScroll){this._closeMenu({restoreFocus:!1});return}this._schedulePanelPlacement()}}_attachOpenListeners(){document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("scroll",this._onWindowScroll,{passive:!0,capture:!0})}_teardownOpenListeners(){document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("scroll",this._onWindowScroll,!0)}_scheduleOptionsSync(){this._optionsSyncRaf||(this._optionsSyncRaf=requestAnimationFrame(()=>{this._optionsSyncRaf=0,this._syncOptionsData()&&this._open?this._renderMenu():this._syncControlState()}))}_cancelOptionsSync(){this._optionsSyncRaf&&(cancelAnimationFrame(this._optionsSyncRaf),this._optionsSyncRaf=0)}_schedulePanelPlacement(){this._panelPlacementRaf||(this._panelPlacementRaf=requestAnimationFrame(()=>{this._panelPlacementRaf=0,this._syncPanelPlacement()}))}_cancelPanelPlacement(){this._panelPlacementRaf&&(cancelAnimationFrame(this._panelPlacementRaf),this._panelPlacementRaf=0)}_emitValue(e,t){this.dispatchEvent(new CustomEvent(e,{detail:{value:t},bubbles:!0,composed:!0}))}_applyValueFromUser(e){(this.getAttribute("value")||"")!==e&&(this.setAttribute("value",e),this._emitValue("input",e),this._emitValue("change",e))}_attachFormRegistration(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);const e=this.getAttribute("name");if(!e)return;const t=this.getRootNode(),s=(t instanceof ShadowRoot?t.host:null)?.closest?.("ui-form")||this.closest("ui-form");!s||typeof s.registerField!="function"||(this._formUnregister=s.registerField(e,{name:e,getValue:()=>this.value,setValue:o=>{this.value=o},validate:async()=>{if(!(h(this.getAttribute("required"))||this.hasAttribute("required")))return{valid:!0};const l=this.value.trim().length>0;return{valid:l,message:l?void 0:"This field is required."}},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("error",o)):(this.getAttribute("validation")==="error"&&this.removeAttribute("validation"),this.removeAttribute("error"))}}))}_hasSlotContent(e){return!!this.querySelector(`[slot="${e}"]`)}_setValueAttr(e){const t=String(e??"");this.getAttribute("value")!==t&&this.setAttribute("value",t)}_buildOptionsFromChildren(){const e=[],t=(r,u)=>{const n=(r.label||r.textContent||r.value||"").trim(),a=String(r.value??"");e.push({value:a,label:n||a,disabled:!!r.disabled,group:u})};Array.from(this.children).filter(r=>r instanceof HTMLElement?!r.hasAttribute("slot"):!1).forEach(r=>{const u=r.tagName.toLowerCase();if(u==="option"){t(r,"");return}if(u==="optgroup"){const n=r,a=(n.label||"").trim();Array.from(n.children).forEach(c=>{c instanceof HTMLOptionElement&&e.push({value:String(c.value??""),label:(c.label||c.textContent||c.value||"").trim()||String(c.value??""),disabled:!!c.disabled||!!n.disabled,group:a})})}});const s=(this.getAttribute("placeholder")||"").trim(),o=h(this.getAttribute("required"))||this.hasAttribute("required"),l=e.some(r=>r.value==="");return s&&!o&&!l&&e.unshift({value:"",label:s,disabled:!1,group:""}),e}_computeOptionsFingerprint(e){return e.map(t=>`${t.value}
${t.label}
${t.disabled?"1":"0"}
${t.group}`).join("")}_firstEnabledIndex(){return _.findFirstEnabledIndex(this._options,e=>e.disabled)}_lastEnabledIndex(){return _.findLastEnabledIndex(this._options,e=>e.disabled)}_selectedIndex(){return _.findIndexByValue(this._options,this.value,e=>e.value)}_checkPlacement(){return this.getAttribute("check-placement")==="start"?"start":"end"}_syncOptionsData(){const e=this._buildOptionsFromChildren(),t=this._computeOptionsFingerprint(e),i=t!==this._optionsFingerprint;this._options=e,this._optionsFingerprint=t;const s=this.getAttribute("value")||"",o=this.hasAttribute("value"),l=this._options.some(a=>a.value===s),r=h(this.getAttribute("required"))||this.hasAttribute("required"),u=this._options.find(a=>!a.disabled)?.value||"",n=!r&&this._options.some(a=>a.value==="")?"":u;return o?l||this._setValueAttr(n):this._setValueAttr(n),i}_currentDisplayText(){const e=this.value,t=(this.getAttribute("placeholder")||"").trim();return e===""&&t?t:this._options.find(s=>s.value===e)?.label||e}_setActiveIndex(e){if(!this._menuEl||e===this._activeIndex)return;this._activeIndex=e;const t=e>=0&&this._menuItems[e]||null;this._menuEl.setActiveItem(t,{focus:!1,owner:this._triggerEl,scroll:!0})}_moveActive(e){if(!this._menuEl||!this._options.length)return;const t=this._activeIndex>=0?this._menuItems[this._activeIndex]:null,i=this._menuEl.move(e,{current:t,focus:!1,owner:this._triggerEl,scroll:!0});if(!i)return;const s=Number(i.dataset.index||"-1");s>=0&&(this._activeIndex=s)}_selectActiveOption(){if(this._activeIndex<0)return;const e=this._options[this._activeIndex];!e||e.disabled||(this._applyValueFromUser(e.value),this._closeMenu())}_renderMenu(){const e=this._menuEl;if(!e)return;const t=`${this._optionsFingerprint}
${this.showCheck?"1":"0"}
${this._checkPlacement()}`;if(this._menuItems.length>0&&t===this._menuRenderFingerprint&&this._menuItems.length===this._options.length){this._syncMenuSelectionState(),this._schedulePanelPlacement();return}if(e.replaceChildren(),this._menuItems=[],!this._options.length){const r=document.createElement("p");r.className="menu-empty",r.textContent="No options available",e.appendChild(r),this._menuRenderFingerprint=t,e.refresh();return}let s="__none__";this._options.forEach((r,u)=>{if(r.group&&r.group!==s){const d=document.createElement("div");d.className="menu-group",d.setAttribute("role","presentation"),d.textContent=r.group,e.appendChild(d),s=r.group}r.group||(s="__none__");const n=document.createElement("button");n.type="button",n.className="menu-item",n.id=`${this._uid}-opt-${u}`,n.setAttribute("role","option"),n.setAttribute("data-index",String(u)),n.setAttribute("data-value",r.value),n.setAttribute("aria-selected",r.value===this.value?"true":"false"),n.setAttribute("aria-disabled",r.disabled?"true":"false"),n.tabIndex=-1,r.disabled&&(n.disabled=!0);const a=document.createElement("span");a.className="menu-item-label",a.textContent=r.label;const c=document.createElement("span");c.className="menu-item-check",c.setAttribute("aria-hidden","true");const m=this.showCheck,b=this._checkPlacement();c.hidden=!m,n.setAttribute("data-check-placement",b),m&&b==="start"?n.append(c,a):n.append(a,c),e.appendChild(n),this._menuItems.push(n)});const o=this._menuItems[0]||null,l=this._menuItems[this._menuItems.length-1]||null;o&&o.setAttribute("data-edge-start","true"),l&&l.setAttribute("data-edge-end","true"),e.refresh(),this._menuRenderFingerprint=t,this._syncMenuSelectionState(),this._schedulePanelPlacement()}_syncMenuSelectionState(){if(!this._menuEl)return;const e=this._selectedIndex();this._menuItems.forEach(i=>{const s=Number(i.dataset.index||"-1");i.setAttribute("aria-selected",s===e?"true":"false")}),this._activeIndex=F.resolveListboxActiveIndex(this._options,{selectedIndex:e,getDisabled:i=>i.disabled});const t=this._activeIndex>=0&&this._menuItems[this._activeIndex]||null;this._menuEl.setActiveItem(t,{focus:!1,owner:this._triggerEl,scroll:!0})}_syncPanelPlacement(){const e=this._panelEl,t=this._controlEl,i=this._menuEl;if(!e||!t||!i||!this._open)return;const s=t.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight||0,l=Math.max(0,o-s.bottom-12),r=Math.max(0,s.top-12),u=Math.min(Math.max(i.scrollHeight,i.offsetHeight)+4,320),n=l<u&&r>l;this._placement=n?"top":"bottom",e.setAttribute("data-placement",this._placement),e.style.setProperty("--ui-select-available-height",`${Math.floor(n?r:l)}px`)}_openMenu(){this._open||this.disabled||(this._cancelPanelPlacement(),this._syncOptionsData(),this._open=!0,this._syncControlState(),this._renderMenu(),this._attachOpenListeners())}_closeMenu(e={}){if(this._open&&(this._open=!1,this._activeIndex=-1,this._cancelPanelPlacement(),this._teardownOpenListeners(),this._syncControlState(),e.restoreFocus!==!1))try{this._triggerEl?.focus({preventScroll:!0})}catch{this._triggerEl?.focus()}}_syncControlState(){const e=this._triggerEl,t=this._controlEl,i=this._valueEl,s=this._panelEl;if(!e||!t||!i||!s)return;const o=this.getAttribute("label")||"",l=this.getAttribute("description")||"",r=this.getAttribute("error")||"",u=this.getAttribute("aria-label")||o||"Select",n=h(this.getAttribute("loading")),a=h(this.getAttribute("required"))||this.hasAttribute("required"),c=this.getAttribute("tabindex"),m=this.hasAttribute("validation")&&this.getAttribute("validation")==="error"||this.hasAttribute("invalid")||this.getAttribute("data-invalid")==="true",b=O(this.getAttribute("radius")),d=this.root.querySelector(".label"),x=this.root.querySelector(".label-text"),g=this.root.querySelector(".description"),f=this.root.querySelector(".description-text"),y=this.root.querySelector(".error"),w=this.root.querySelector(".error-text"),A=this.root.querySelector(".meta"),E=this.root.querySelector(".required"),k=!!o||this._hasSlotContent("label"),S=!!l||this._hasSlotContent("description"),P=!!r||this._hasSlotContent("error"),M=this._hasSlotContent("leading"),R=this._hasSlotContent("trailing"),q=!!(this.getAttribute("placeholder")||"").trim()&&this.value==="";x&&(x.textContent=o),f&&(f.textContent=l),w&&(w.textContent=r),d&&(d.hidden=!k),g&&(g.hidden=!S),y&&(y.hidden=!P),A&&(A.hidden=!k&&!S),E&&(E.hidden=!a),i.textContent=this._currentDisplayText(),t.setAttribute("data-open",this._open?"true":"false"),t.setAttribute("data-placeholder-shown",q?"true":"false"),t.setAttribute("data-has-leading",String(M)),t.setAttribute("data-has-trailing",String(R)),e.disabled=this.disabled,e.setAttribute("aria-label",u),e.setAttribute("aria-expanded",this._open?"true":"false"),e.setAttribute("aria-busy",n?"true":"false"),e.setAttribute("aria-required",a?"true":"false"),m?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid"),c!=null&&!this.disabled?e.setAttribute("tabindex",c):this.disabled?e.setAttribute("tabindex","-1"):e.setAttribute("tabindex","0"),s.setAttribute("data-placement",this._placement),I.setPanelOpen(s,this._open,String(this._placement).split("-")[0]),this._open?e.setAttribute("aria-controls",`${this._uid}-listbox`):e.removeAttribute("aria-controls"),b&&!["none","full","large"].includes(this.getAttribute("radius")||"")?this.style.setProperty("--ui-select-radius",b):this.style.removeProperty("--ui-select-radius"),this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.setAttribute("aria-busy",n?"true":"false"),this.toggleAttribute("open",this._open),this._open&&this._schedulePanelPlacement()}render(){const e=this.getAttribute("label")||"",t=this.getAttribute("description")||"",i=this.getAttribute("error")||"",s=h(this.getAttribute("required"))||this.hasAttribute("required"),o=this.getAttribute("aria-label")||e||"Select",l=!!e||this._hasSlotContent("label"),r=!!t||this._hasSlotContent("description"),u=!!i||this._hasSlotContent("error"),n=this._hasSlotContent("leading"),a=this._hasSlotContent("trailing"),c=`${this._uid}-label`,m=`${this._uid}-description`,b=`${this._uid}-error`,d=`${this._uid}-trigger`,x=`${this._uid}-listbox`,g=L.externalDescriptionMarkup(this,this._uid),f=[r?m:"",u?b:"",g.id].filter(Boolean).join(" ");this.setContent(`
+      <style>${D}</style>
       <slot class="content-slot"></slot>
       <div class="root" part="root">
         <div class="meta" part="meta" ${l||r?"":"hidden"}>
@@ -751,7 +718,7 @@
             <slot name="label"><span class="label-text">${v(e)}</span></slot>
             <span class="required" aria-hidden="true" ${s?"":"hidden"}>*</span>
           </label>
-          <p class="description" part="description" id="${b}" ${r?"":"hidden"}>
+          <p class="description" part="description" id="${m}" ${r?"":"hidden"}>
             <slot name="description"><span class="description-text">${v(t)}</span></slot>
           </p>
         </div>
@@ -791,9 +758,9 @@
             ></ui-listbox>
           </div>
         </div>
-        <p class="error" part="error" id="${m}" ${u?"":"hidden"}>
+        <p class="error" part="error" id="${b}" ${u?"":"hidden"}>
           <slot name="error"><span class="error-text">${v(i)}</span></slot>
         </p>
         ${g.html}
       </div>
-    `),this._controlEl=this.root.querySelector(".control"),this._triggerEl=this.root.querySelector(".trigger"),this._valueEl=this.root.querySelector(".value"),this._panelEl=this.root.querySelector(".panel"),this._menuEl=this.root.querySelector(".menu"),this._menuItems=[],this._menuRenderFingerprint="",this._syncOptionsData(),this._renderMenu(),!this._open&&this._panelEl&&(this._panelEl.hidden=!0),this._syncControlState()}}typeof customElements<"u"&&!customElements.get("ui-select")&&customElements.define("ui-select",I);exports.UISelect=I;
+    `),this._controlEl=this.root.querySelector(".control"),this._triggerEl=this.root.querySelector(".trigger"),this._valueEl=this.root.querySelector(".value"),this._panelEl=this.root.querySelector(".panel"),this._menuEl=this.root.querySelector(".menu"),this._menuItems=[],this._menuRenderFingerprint="",this._syncOptionsData(),this._renderMenu(),!this._open&&this._panelEl&&(this._panelEl.hidden=!0),this._syncControlState()}}typeof customElements<"u"&&!customElements.get("ui-select")&&customElements.define("ui-select",z);exports.UISelect=z;

package/dist/select.esm.js

@@ -1,20 +1,24 @@
 import { E as R } from "./ElementBase-BeZT54Hj.mjs";
-import { e as M } from "./control-name-Bpj7F34X.mjs";
-import { f as q, b as $, a as L } from "./collection-C7URGjEI.mjs";
-import { r as F } from "./listbox-hMVOhKHC.mjs";
-const D = `
+import { s as M, O as $ } from "./overlay-motion-BX3dPLay.mjs";
+import { e as q } from "./control-name-Bpj7F34X.mjs";
+import { f as L, b as F, a as D } from "./collection-C7URGjEI.mjs";
+import { r as O } from "./listbox-hMVOhKHC.mjs";
+const T = `
+  ${$}
+
   :host {
     --ui-select-width: var(--ui-width, min(340px, 100%));
-    --ui-select-min-height: var(--base-select-height-md, 42px);
-    --ui-select-radius: var(--base-select-radius, var(--ui-radius, 4px));
-    --ui-select-padding-x: var(--base-select-padding-x, 12px);
+    --ui-select-min-height: var(--base-select-height-md, var(--ui-control-height-2, 32px));
+    --ui-select-radius: var(--base-select-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
+    --ui-select-padding-x: var(--base-select-padding-x, var(--ui-control-padding-inline-2, 12px));
+    --ui-select-font-size: var(--ui-control-font-size-2, 14px);
 
     --ui-select-bg: var(--base-select-bg, var(--ui-color-surface, #ffffff));
-    --ui-select-border: var(--base-select-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
+    --ui-select-border: var(--base-select-border, 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1)));
     --ui-select-border-color: color-mix(in srgb, var(--ui-select-border) 100%, transparent);
     --ui-select-text: var(--ui-color-text, #0f172a);
     --ui-select-muted: var(--ui-color-muted, #526175);
-    --ui-select-placeholder: color-mix(in srgb, var(--ui-select-text) 44%, transparent);
+    --ui-select-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-select-text) 62%, transparent));
     --ui-select-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-select-accent: var(--ui-color-primary, #2563eb);
     --ui-select-success: var(--ui-color-success, #15803d);
@@ -23,14 +27,12 @@ const D = `
 
     --ui-select-shadow: var(--base-select-shadow, none);
     --ui-select-elevation: var(--ui-select-shadow);
-    --ui-select-menu-bg: var(--base-select-menu-bg, color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent));
+    --ui-select-menu-bg: var(--base-select-menu-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-select-menu-color: var(--base-select-menu-color, var(--ui-select-text));
-    --ui-select-menu-border-color: color-mix(in srgb, var(--ui-select-border-color) 82%, transparent);
+    --ui-select-menu-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-select-border-color) 82%, transparent));
     --ui-select-menu-border: 1px solid var(--ui-select-menu-border-color);
-    --ui-select-menu-radius: var(--base-select-menu-radius, var(--ui-select-radius));
-    --ui-select-menu-shadow:
-      0 14px 34px rgba(15, 23, 42, 0.16),
-      0 3px 10px rgba(15, 23, 42, 0.08);
+    --ui-select-menu-radius: var(--base-select-menu-radius, calc(var(--ui-radius, 6px) + 2px));
+    --ui-select-menu-shadow: var(--shadow-5, 0 14px 34px rgba(15, 23, 42, 0.16));
     --ui-select-menu-padding: 0px;
     --ui-select-menu-gap: 8px;
     --ui-select-menu-max-height: min(320px, var(--ui-select-available-height, 320px));
@@ -102,6 +104,7 @@ const D = `
   }
 
   .control {
+    box-sizing: border-box;
     min-inline-size: 0;
     position: relative;
     display: block;
@@ -121,10 +124,14 @@ const D = `
 
   .control[data-open="true"],
   .control:focus-within {
-    border-color: color-mix(in srgb, var(--ui-select-focus) 62%, var(--ui-select-border-color));
-    box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-select-focus) 18%, transparent),
-      var(--ui-select-elevation);
+    border-color: var(--ui-ring-color, var(--ui-select-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-select-focus));
+    outline-offset: -1px;
+    box-shadow: var(--ui-select-elevation);
+  }
+
+  .control:hover:not(:focus-within):not([data-open="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-select-border-color));
   }
 
   .leading,
@@ -163,6 +170,7 @@ const D = `
   }
 
   .trigger {
+    display: block;
     inline-size: 100%;
     min-inline-size: 0;
     block-size: calc(var(--ui-select-min-height) - 2px);
@@ -171,8 +179,8 @@ const D = `
     outline: none;
     background: transparent;
     color: var(--ui-select-text);
-    font: 500 14px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    padding: 8px calc(var(--ui-select-padding-x) + 24px) 8px var(--ui-select-padding-x);
+    font: 500 var(--ui-select-font-size)/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 0 calc(var(--ui-select-padding-x) + 24px) 0 var(--ui-select-padding-x);
     margin: 0;
     cursor: pointer;
     text-align: left;
@@ -274,9 +282,7 @@ const D = `
     overflow-x: hidden;
     border: var(--ui-select-menu-border);
     border-radius: var(--ui-select-menu-radius);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--ui-select-accent) 3%, transparent) 0%, transparent 100%),
-      var(--ui-select-menu-bg);
+    background: var(--ui-select-menu-bg);
     color: var(--ui-select-menu-color);
     box-shadow: var(--ui-select-menu-shadow);
     padding: var(--ui-select-menu-padding);
@@ -305,16 +311,6 @@ const D = `
     background-clip: padding-box;
   }
 
-  .panel[data-placement="top"] .menu {
-    transform-origin: bottom center;
-    animation: ui-select-menu-enter-top 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-
-  .panel[data-placement="bottom"] .menu {
-    transform-origin: top center;
-    animation: ui-select-menu-enter-bottom 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-
   .menu-group {
     color: color-mix(in srgb, var(--ui-select-muted) 88%, transparent);
     font: 700 11px/1.3 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -479,17 +475,14 @@ const D = `
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-select-min-height: 34px;
-    --ui-select-padding-x: 10px;
+    --ui-select-min-height: var(--base-select-height-sm, var(--ui-control-height-1, 24px));
+    --ui-select-padding-x: var(--ui-control-padding-inline-1, 8px);
+    --ui-select-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-select-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-select-menu-gap: 6px;
     --ui-select-menu-item-height: 34px;
   }
 
-  :host([size="sm"]) .trigger,
-  :host([size="1"]) .trigger {
-    font-size: 12px;
-  }
-
   :host([size="sm"]) .menu-item,
   :host([size="1"]) .menu-item {
     font-size: 12px;
@@ -498,17 +491,14 @@ const D = `
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-select-min-height: 46px;
-    --ui-select-padding-x: 13px;
+    --ui-select-min-height: var(--base-select-height-lg, var(--ui-control-height-3, 40px));
+    --ui-select-padding-x: var(--ui-control-padding-inline-3, 16px);
+    --ui-select-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-select-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-select-menu-gap: 10px;
     --ui-select-menu-item-height: 42px;
   }
 
-  :host([size="lg"]) .trigger,
-  :host([size="3"]) .trigger {
-    font-size: 15px;
-  }
-
   :host([size="lg"]) .menu-item,
   :host([size="3"]) .menu-item {
     font-size: 14px;
@@ -659,7 +649,7 @@ const D = `
   :host([invalid]) .control,
   :host([data-invalid="true"]) .control {
     box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-select-error) 18%, transparent),
+      0 0 0 1px var(--ui-select-error),
       var(--ui-select-elevation);
   }
 
@@ -673,28 +663,6 @@ const D = `
     }
   }
 
-  @keyframes ui-select-menu-enter-bottom {
-    from {
-      opacity: 0;
-      transform: translateY(-4px) scale(0.985);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes ui-select-menu-enter-top {
-    from {
-      opacity: 0;
-      transform: translateY(4px) scale(0.985);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .control,
     .indicator,
@@ -755,7 +723,7 @@ function h(p) {
 function v(p) {
   return String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function O(p) {
+function U(p) {
   if (!p) return null;
   const e = String(p).trim();
   return e ? e === "none" ? "4px" : e === "full" ? "999px" : e === "large" ? "16px" : /^-?\\d+(\\.\\d+)?$/.test(e) ? `${e}px` : e : null;
@@ -789,7 +757,7 @@ const S = /* @__PURE__ */ new Set([
   "data-valid",
   "close-on-scroll"
 ]);
-class T extends R {
+class B extends R {
   constructor() {
     super(), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._optionsSyncRaf = 0, this._panelPlacementRaf = 0, this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._menuRenderFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
   }
@@ -1075,13 +1043,13 @@ class T extends R {
     return e.map((t) => `${t.value}
${t.label}
${t.disabled ? "1" : "0"}
${t.group}`).join("");
   }
   _firstEnabledIndex() {
-    return q(this._options, (e) => e.disabled);
+    return L(this._options, (e) => e.disabled);
   }
   _lastEnabledIndex() {
-    return $(this._options, (e) => e.disabled);
+    return F(this._options, (e) => e.disabled);
   }
   _selectedIndex() {
-    return L(this._options, this.value, (e) => e.value);
+    return D(this._options, this.value, (e) => e.value);
   }
   _checkPlacement() {
     return this.getAttribute("check-placement") === "start" ? "start" : "end";
@@ -1149,8 +1117,8 @@ class T extends R {
       a.className = "menu-item-label", a.textContent = r.label;
       const c = document.createElement("span");
       c.className = "menu-item-check", c.setAttribute("aria-hidden", "true");
-      const b = this.showCheck, m = this._checkPlacement();
-      c.hidden = !b, n.setAttribute("data-check-placement", m), b && m === "start" ? n.append(c, a) : n.append(a, c), e.appendChild(n), this._menuItems.push(n);
+      const m = this.showCheck, b = this._checkPlacement();
+      c.hidden = !m, n.setAttribute("data-check-placement", b), m && b === "start" ? n.append(c, a) : n.append(a, c), e.appendChild(n), this._menuItems.push(n);
     });
     const o = this._menuItems[0] || null, l = this._menuItems[this._menuItems.length - 1] || null;
     o && o.setAttribute("data-edge-start", "true"), l && l.setAttribute("data-edge-end", "true"), e.refresh(), this._menuRenderFingerprint = t, this._syncMenuSelectionState(), this._schedulePanelPlacement();
@@ -1161,7 +1129,7 @@ class T extends R {
     this._menuItems.forEach((i) => {
       const s = Number(i.dataset.index || "-1");
       i.setAttribute("aria-selected", s === e ? "true" : "false");
-    }), this._activeIndex = F(this._options, {
+    }), this._activeIndex = O(this._options, {
       selectedIndex: e,
       getDisabled: (i) => i.disabled
     });
@@ -1192,13 +1160,13 @@ class T extends R {
   _syncControlState() {
     const e = this._triggerEl, t = this._controlEl, i = this._valueEl, s = this._panelEl;
     if (!e || !t || !i || !s) return;
-    const o = this.getAttribute("label") || "", l = this.getAttribute("description") || "", r = this.getAttribute("error") || "", u = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), a = h(this.getAttribute("required")) || this.hasAttribute("required"), c = this.getAttribute("tabindex"), b = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", m = O(this.getAttribute("radius")), d = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), f = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), E = !!o || this._hasSlotContent("label"), k = !!l || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), I = this._hasSlotContent("leading"), z = this._hasSlotContent("trailing"), P = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
-    x && (x.textContent = o), f && (f.textContent = l), y && (y.textContent = r), d && (d.hidden = !E), g && (g.hidden = !k), _ && (_.hidden = !C), w && (w.hidden = !E && !k), A && (A.hidden = !a), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", P ? "true" : "false"), t.setAttribute("data-has-leading", String(I)), t.setAttribute("data-has-trailing", String(z)), e.disabled = this.disabled, e.setAttribute("aria-label", u), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", a ? "true" : "false"), b ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), c != null && !this.disabled ? e.setAttribute("tabindex", c) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.hidden = !this._open, s.setAttribute("data-placement", this._placement), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), m && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", m) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
+    const o = this.getAttribute("label") || "", l = this.getAttribute("description") || "", r = this.getAttribute("error") || "", u = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), a = h(this.getAttribute("required")) || this.hasAttribute("required"), c = this.getAttribute("tabindex"), m = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", b = U(this.getAttribute("radius")), d = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), f = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), E = !!o || this._hasSlotContent("label"), k = !!l || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), I = this._hasSlotContent("leading"), z = this._hasSlotContent("trailing"), P = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
+    x && (x.textContent = o), f && (f.textContent = l), y && (y.textContent = r), d && (d.hidden = !E), g && (g.hidden = !k), _ && (_.hidden = !C), w && (w.hidden = !E && !k), A && (A.hidden = !a), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", P ? "true" : "false"), t.setAttribute("data-has-leading", String(I)), t.setAttribute("data-has-trailing", String(z)), e.disabled = this.disabled, e.setAttribute("aria-label", u), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", a ? "true" : "false"), m ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), c != null && !this.disabled ? e.setAttribute("tabindex", c) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.setAttribute("data-placement", this._placement), M(s, this._open, String(this._placement).split("-")[0]), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), b && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", b) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
   }
   render() {
-    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = h(this.getAttribute("required")) || this.hasAttribute("required"), o = this.getAttribute("aria-label") || e || "Select", l = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), u = !!i || this._hasSlotContent("error"), n = this._hasSlotContent("leading"), a = this._hasSlotContent("trailing"), c = `${this._uid}-label`, b = `${this._uid}-description`, m = `${this._uid}-error`, d = `${this._uid}-trigger`, x = `${this._uid}-listbox`, g = M(this, this._uid), f = [r ? b : "", u ? m : "", g.id].filter(Boolean).join(" ");
+    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = h(this.getAttribute("required")) || this.hasAttribute("required"), o = this.getAttribute("aria-label") || e || "Select", l = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), u = !!i || this._hasSlotContent("error"), n = this._hasSlotContent("leading"), a = this._hasSlotContent("trailing"), c = `${this._uid}-label`, m = `${this._uid}-description`, b = `${this._uid}-error`, d = `${this._uid}-trigger`, x = `${this._uid}-listbox`, g = q(this, this._uid), f = [r ? m : "", u ? b : "", g.id].filter(Boolean).join(" ");
     this.setContent(`
-      <style>${D}</style>
+      <style>${T}</style>
       <slot class="content-slot"></slot>
       <div class="root" part="root">
         <div class="meta" part="meta" ${l || r ? "" : "hidden"}>
@@ -1206,7 +1174,7 @@ class T extends R {
             <slot name="label"><span class="label-text">${v(e)}</span></slot>
             <span class="required" aria-hidden="true" ${s ? "" : "hidden"}>*</span>
           </label>
-          <p class="description" part="description" id="${b}" ${r ? "" : "hidden"}>
+          <p class="description" part="description" id="${m}" ${r ? "" : "hidden"}>
             <slot name="description"><span class="description-text">${v(t)}</span></slot>
           </p>
         </div>
@@ -1246,7 +1214,7 @@ class T extends R {
             ></ui-listbox>
           </div>
         </div>
-        <p class="error" part="error" id="${m}" ${u ? "" : "hidden"}>
+        <p class="error" part="error" id="${b}" ${u ? "" : "hidden"}>
           <slot name="error"><span class="error-text">${v(i)}</span></slot>
         </p>
         ${g.html}
@@ -1254,7 +1222,7 @@ class T extends R {
     `), this._controlEl = this.root.querySelector(".control"), this._triggerEl = this.root.querySelector(".trigger"), this._valueEl = this.root.querySelector(".value"), this._panelEl = this.root.querySelector(".panel"), this._menuEl = this.root.querySelector(".menu"), this._menuItems = [], this._menuRenderFingerprint = "", this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", T);
+typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", B);
 export {
-  T as UISelect
+  B as UISelect
 };