@editora/ui-core 0.1.20 → 0.1.21

package/dist/date-time-picker.cjs.js

@@ -470,9 +470,9 @@
         <section class="time-panel" part="time">
           <span class="icon" aria-hidden="true">${P}</span>
           <div class="time-grid" data-meridiem="${this._is12h()?"true":"false"}">
-            <div><label>${p(i.hour)}</label><select data-segment="hours">${r.hours}</select></div>
-            <div><label>${p(i.minute)}</label><select data-segment="minutes">${r.minutes}</select></div>
-            ${this._is12h()?`<div><label>${p(i.meridiem)}</label><select data-segment="meridiem"><option value="am" ${r.meridiem==="am"?"selected":""}>${p(i.am)}</option><option value="pm" ${r.meridiem==="pm"?"selected":""}>${p(i.pm)}</option></select></div>`:""}
+            <div><label>${p(i.hour)}</label><select data-segment="hours" aria-label="${p(i.hour)}">${r.hours}</select></div>
+            <div><label>${p(i.minute)}</label><select data-segment="minutes" aria-label="${p(i.minute)}">${r.minutes}</select></div>
+            ${this._is12h()?`<div><label>${p(i.meridiem)}</label><select data-segment="meridiem" aria-label="${p(i.meridiem)}"><option value="am" ${r.meridiem==="am"?"selected":""}>${p(i.am)}</option><option value="pm" ${r.meridiem==="pm"?"selected":""}>${p(i.pm)}</option></select></div>`:""}
           </div>
         </section>
       </div>
@@ -486,7 +486,7 @@
       <style>${J}</style>
       ${t?'<div class="sheet-backdrop" data-action="backdrop"></div>':""}
       <section class="${t?"sheet":"panel"}" id="${this._panelId}" role="dialog" aria-modal="${t?"true":"false"}" aria-label="${s}" part="${t?"sheet":"popover"}">${u}</section>
-    `}_syncCalendar(t){const e=(s,n)=>{if(n==null||n===""){t.hasAttribute(s)&&t.removeAttribute(s);return}t.getAttribute(s)!==n&&t.setAttribute(s,n)},i=(s,n)=>{n?e(s,""):e(s,null)};e("selection","single"),e("value",this._pending.date),e("min",this.getAttribute("min")),e("max",this.getAttribute("max")),e("locale",this.getAttribute("locale")),e("translations",this.getAttribute("translations")),e("week-start",this.getAttribute("week-start"));const o=this.getAttribute("size")||"sm",a=t.classList.contains("dt-calendar-inline");e("size",o==="lg"?"md":"sm"),e("variant",this.getAttribute("variant")),i("readonly",this._isReadonly()),i("disabled",this._isInteractionBlocked()),i("bare",this._isBare()),e("tabindex","-1"),o==="lg"?(t.style.setProperty("--ui-calendar-day-height","1.95em"),t.style.setProperty("--ui-calendar-day-padding-block","0.2em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.26em"),t.style.setProperty("--ui-calendar-gap","0.42em"),t.style.setProperty("--ui-calendar-day-font-size","0.78em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.7em"),t.style.setProperty("--ui-calendar-title-font-size","0.88em")):(t.style.setProperty("--ui-calendar-day-height","2.4em"),t.style.setProperty("--ui-calendar-day-padding-block","0.14em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.22em"),t.style.setProperty("--ui-calendar-gap","0.34em"),t.style.setProperty("--ui-calendar-day-font-size","0.72em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.64em"),t.style.setProperty("--ui-calendar-title-font-size","0.8em")),a?(t.style.setProperty("--ui-calendar-frame-padding","0.32em"),t.style.setProperty("--ui-calendar-week-gap","0.18em"),t.style.setProperty("--ui-calendar-control-height","1.72em"),t.style.setProperty("--ui-calendar-gap","0.24em")):(t.style.removeProperty("--ui-calendar-frame-padding"),t.style.removeProperty("--ui-calendar-week-gap"),t.style.removeProperty("--ui-calendar-control-height")),e("aria-label",this.getAttribute("label")||this._translations().selectDate)}_overlaySignature(t){return[t?"sheet":"popover",this._minuteStep(),this._is12h()?"12h":"24h",this.getAttribute("locale")||"",this.getAttribute("translations")||""].join(":")}_ensureOverlayContent(t){if(!this._overlay)return;const e=this._overlaySignature(t);this._overlayKey===e&&this._overlay.querySelector(".dt-calendar")||(this._overlayKey=e,this._overlay.innerHTML=t?`<div class="sheet-wrap">${this._renderSurfaceInner(!0)}</div>`:`<div class="overlay">${this._renderSurfaceInner(!1)}</div>`)}_setClosestOptionValue(t,e){const i=Array.from(t.options).map(a=>Number(a.value)).filter(a=>Number.isFinite(a));if(!i.length)return;let r=i[0],o=Math.abs(r-e);for(let a=1;a<i.length;a+=1){const s=i[a],n=Math.abs(s-e);n<o&&(r=s,o=n)}t.value=String(r)}_syncOverlayState(){if(!this._overlay)return;this._syncOverlayHostZIndex();const t=this._isMobileSheet();this._ensureOverlayContent(t),this._syncDismissableLayer();const e=this._translations(),i=this._overlay.querySelector(".panel, .sheet"),r=this._overlay.querySelector(".footer");i&&(i.dataset.bare=this._isBare()?"true":"false"),r&&(r.hidden=!this._showFooter());const o=this._overlay.querySelector(".head-title");if(o){const d=(this.getAttribute("label")||"").trim();o.textContent=d,o.hidden=!d}const a=this._overlay.querySelector(".head-meta");a&&(a.textContent=this._pending.date&&this._pending.time?this._formatDisplay(this._pending):e.selectDate);const s=this._overlay.querySelector(".dt-calendar");s&&this._syncCalendar(s);const n=l.parseTimeInput(this._pending.time||"00:00")||{hours:0,minutes:0},u=this._overlay.querySelector('select[data-segment="hours"]'),b=this._overlay.querySelector('select[data-segment="minutes"]'),_=this._overlay.querySelector('select[data-segment="meridiem"]');if(u){const d=this._is12h()?n.hours%12||12:n.hours;this._setClosestOptionValue(u,d),u.disabled=this._isInteractionBlocked()||this._isReadonly()}b&&(this._setClosestOptionValue(b,n.minutes),b.disabled=this._isInteractionBlocked()||this._isReadonly()),_&&(_.value=n.hours>=12?"pm":"am",_.disabled=this._isInteractionBlocked()||this._isReadonly());const x=this._isInteractionBlocked()||this._isReadonly();this._overlay.querySelectorAll(".action").forEach(d=>{d.disabled=x}),t||this._schedulePosition.run()}_renderOverlay(){this._syncOverlayState()}_applyTimeFromSurface(t){const e=t.querySelector('select[data-segment="hours"]'),i=t.querySelector('select[data-segment="minutes"]'),r=t.querySelector('select[data-segment="meridiem"]');if(!e||!i)return;const o=Number(e.value),a=Number(i.value);if(!Number.isFinite(o)||!Number.isFinite(a))return;let s=o;if(this._is12h()){const n=r?.value==="pm"?"pm":"am";n==="pm"&&s<12&&(s+=12),n==="am"&&s===12&&(s=0)}this._pending=this._clampState({date:this._pending.date,time:`${h(s)}:${h(a)}`}),this._emitInput("time")}_onRootClick(t){const e=t.target;if(!e)return;const i=e.closest("[data-action]")?.getAttribute("data-action");if(i&&!(this._isInteractionBlocked()||this._isReadonly())){if(i==="toggle"){this._restoreFocusEl=e,this._setOpen(!this._open,"toggle");return}if(i==="clear"){this._isInlineMode()?(this._pending={date:null,time:null},this._emitInput("clear"),this._updateHostState()):this._commit({date:null,time:null},"clear");return}if(this._isInlineMode()&&i==="now"){const r=new Date,o=String(r.getMonth()+1).padStart(2,"0"),a=String(r.getDate()).padStart(2,"0"),s=`${r.getFullYear()}-${o}-${a}`,n=`${h(r.getHours())}:${h(r.getMinutes())}`;this._pending=this._clampState({date:s,time:n}),this._emitInput("now"),this._updateHostState();return}if(this._isInlineMode()&&i==="cancel"){this._pending={...this._value},this._updateHostState();return}this._isInlineMode()&&i==="apply"&&this._commit(this._pending,"apply")}}_onRootChange(t){if(!this._isInlineMode())return;const e=t.target;if(e){if(e.tagName.toLowerCase()==="ui-calendar"){this._onOverlayCalendar(t);return}if(e instanceof HTMLSelectElement&&e.closest(".inline-panel")){if(!e.matches("select[data-segment]")||this._isInteractionBlocked()||this._isReadonly())return;const i=this.root.querySelector(".inline-panel");if(!i)return;if(this._applyTimeFromSurface(i),this._shouldAutoCommit()&&this._pending.date&&this._pending.time){this._commit(this._pending,"time");return}this._updateHostState()}}}_onRootInput(t){const e=t.target;e instanceof HTMLInputElement&&e.classList.contains("input")&&this._allowInput()&&(this._isInteractionBlocked()||(this._draft=e.value,this._inlineError="",this._emitInput("typing")))}_onRootBlur(t){const e=t.target;if(!(e instanceof HTMLInputElement)||!e.classList.contains("input")||!this._allowInput()||this._isInteractionBlocked())return;const i=this._draft.trim();if(!i){this._commit({date:null,time:null},"blur");return}const r=/^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);if(!r){this._inlineError=this.getAttribute("error")||this._translations().invalidDateTime,this._emitInvalid(i,"parse"),this._updateHostState();return}const o=this._parseDateInput(r[1]),a=l.parseTimeInput(r[2])?r[2]:null;if(!o||!a){this._inlineError=this.getAttribute("error")||this._translations().invalidDateTime,this._emitInvalid(i,"parse"),this._updateHostState();return}this._commit({date:o,time:a},"blur")}_onRootKeyDown(t){const e=t;if(!this._isInteractionBlocked()){if(e.key==="Escape"&&this._open&&!this._isInlineMode()){e.preventDefault(),this._setOpen(!1,"escape");return}e.key==="ArrowDown"&&!this._open&&!this._isInlineMode()&&(e.preventDefault(),this._setOpen(!0,"keyboard"))}}_onOverlayClick(t){const e=t.target;if(!e)return;const i=e.closest("[data-action]")?.getAttribute("data-action");if(i&&!this._isInteractionBlocked()&&!(this._isReadonly()&&i!=="toggle")){if(i==="backdrop"){this._setOpen(!1,"outside");return}if(i==="cancel"){this._pending={...this._value},this._setOpen(!1,"cancel");return}if(i==="clear"){this._pending={date:null,time:null},this._emitInput("clear"),this._renderOverlay();return}if(i==="now"){const r=new Date,o=String(r.getMonth()+1).padStart(2,"0"),a=String(r.getDate()).padStart(2,"0"),s=`${r.getFullYear()}-${o}-${a}`,n=`${h(r.getHours())}:${h(r.getMinutes())}`;this._pending=this._clampState({date:s,time:n}),this._emitInput("now"),this._renderOverlay();return}i==="apply"&&(this._commit(this._pending,"apply"),this._setOpen(!1,"apply"))}}_onOverlayChange(t){const e=t.target;e instanceof HTMLSelectElement&&e.matches("select[data-segment]")&&(this._isInteractionBlocked()||this._overlay&&(this._applyTimeFromSurface(this._overlay),this._shouldAutoCommit()&&this._pending.date&&this._pending.time&&(this._commit(this._pending,"time"),this._setOpen(!1,"time"))))}_onOverlayCalendar(t){if(this._isInteractionBlocked()||this._isReadonly())return;const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-calendar")return;const i=t.type,r=t.detail,o=l.normalizeDateIso(i==="select"?r?.value||null:r?.value);if(o){if(this._pending=this._clampState({date:o,time:this._pending.time||"09:00"}),this._emitInput("calendar"),this._shouldAutoCommit()&&this._pending.time){this._commit(this._pending,"calendar"),this._setOpen(!1,"calendar");return}this._updateHostState()}}_onDocumentPointerDown(t){if(!this._open||!this._overlay)return;const e=t.composedPath();e.includes(this)||e.includes(this._overlay)||this._setOpen(!1,"outside")}_onDocumentKeyDown(t){this._open&&t.key==="Escape"&&(t.preventDefault(),this._setOpen(!1,"escape"))}_updateHostState(){if(!this._hasView)return;const t=this.getAttribute("label")||"",e=this.getAttribute("hint")||"",i=this.getAttribute("error")||"",r=this._inlineError||i,o=!!y(this._value),a=this.getAttribute("name")||"",s=this._allowInput()?this._draft:this._formatDisplay(this._value),n=this._isInlineMode(),u=this._translations(),b=r?"error":this._state();this._state()==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const _=this.root.querySelector(".label"),x=this.root.querySelector(".label-text"),C=this.root.querySelector(".required"),d=this.root.querySelector(".input"),I=this.root.querySelector('.btn[data-action="clear"]'),g=this.root.querySelector('.btn[data-action="toggle"]'),v=this.root.querySelector(".hint"),S=this.root.querySelector(".error"),w=this.root.querySelector(".hidden-input");if(_&&(_.hidden=!t),_&&(_.id=this._labelId,_.setAttribute("for",this._inputId)),x&&(x.textContent=t),C&&(C.hidden=!this.hasAttribute("required")),d&&(d.value!==s&&(d.value=s),d.id=this._inputId,d.placeholder=u.dateTimePlaceholder,d.readOnly=!this._allowInput()||this._isReadonly(),d.disabled=this._isInteractionBlocked(),d.required=this.hasAttribute("required"),d.autocomplete="off",d.setAttribute("role","combobox"),d.setAttribute("aria-haspopup","dialog"),d.setAttribute("aria-expanded",n?"false":String(this._open)),d.setAttribute("aria-controls",this._panelId),d.setAttribute("aria-invalid",r?"true":"false"),t?d.setAttribute("aria-labelledby",this._labelId):d.removeAttribute("aria-labelledby")),I&&(I.hidden=!(this._clearable()&&o),I.setAttribute("aria-label",u.clear),I.disabled=this._isInteractionBlocked()),g&&(g.hidden=n,g.setAttribute("aria-label",u.toggleCalendar),g.setAttribute("aria-expanded",n?"false":String(this._open)),g.setAttribute("aria-controls",this._panelId),g.disabled=this._isInteractionBlocked()),v&&(v.id=this._hintId,v.hidden=!e,v.textContent=e),S&&(S.id=this._errorId,S.hidden=!r,S.textContent=r),d){const f=[];e&&v&&!v.hidden&&f.push(this._hintId),r&&f.push(this._errorId),f.length?d.setAttribute("aria-describedby",f.join(" ")):d.removeAttribute("aria-describedby")}w&&(w.disabled=!a,w.name=a,w.value=y(this._value)||"");const A=this.root.querySelector(".field");A&&(A.dataset.open=this._open&&!n?"true":"false",A.dataset.invalid=r?"true":"false",A.dataset.state=b);const c=this.root.querySelector(".inline-panel");if(c){c.hidden=!n,c.id=this._panelId,c.dataset.bare=this._isBare()?"true":"false",c.setAttribute("role","dialog"),c.setAttribute("aria-modal","false"),c.setAttribute("aria-label",t||u.selectDate);const f=c.querySelector(".panel-title");f&&(f.textContent=t,f.hidden=!t);const D=c.querySelector(".head-title");D&&(D.textContent=t,D.hidden=!t);const T=c.querySelector(".head-meta");T&&(T.textContent=this._pending.date&&this._pending.time?this._formatDisplay(this._pending):u.selectDate);const L=c.querySelector('[data-action="now"]');L&&(L.textContent=u.now);const E=c.querySelector('[data-action="clear"]');E&&(E.textContent=u.clear);const R=c.querySelector('[data-action="apply"]');R&&(R.textContent=u.apply);const q=c.querySelector(".footer");q&&(q.hidden=!this._showFooter());const M=c.querySelector(".dt-calendar-inline");M&&this._syncCalendar(M);const O=c.querySelector('select[data-segment="hours"]'),$=c.querySelector('select[data-segment="minutes"]'),B=c.querySelector('select[data-segment="meridiem"]'),k=l.parseTimeInput(this._pending.time||"00:00")||{hours:0,minutes:0};if(O){const z=this._is12h()?k.hours%12||12:k.hours;this._setClosestOptionValue(O,z),O.disabled=this._isInteractionBlocked()||this._isReadonly()}$&&(this._setClosestOptionValue($,k.minutes),$.disabled=this._isInteractionBlocked()||this._isReadonly()),B&&(B.value=k.hours>=12?"pm":"am",B.disabled=this._isInteractionBlocked()||this._isReadonly()),c.querySelectorAll(".action").forEach(z=>{z.disabled=this._isInteractionBlocked()||this._isReadonly()})}!n&&this._open&&this._syncOverlayState(),n&&this._destroyOverlay()}render(){if(!this._hasView){const t=this._translations();this.setContent(`
+    `}_syncCalendar(t){const e=(s,n)=>{if(n==null||n===""){t.hasAttribute(s)&&t.removeAttribute(s);return}t.getAttribute(s)!==n&&t.setAttribute(s,n)},i=(s,n)=>{n?e(s,""):e(s,null)};e("selection","single"),e("value",this._pending.date),e("min",this.getAttribute("min")),e("max",this.getAttribute("max")),e("locale",this.getAttribute("locale")),e("translations",this.getAttribute("translations")),e("week-start",this.getAttribute("week-start"));const o=this.getAttribute("size")||"sm",a=t.classList.contains("dt-calendar-inline");e("size",o==="lg"?"md":"sm"),e("variant",this.getAttribute("variant")),i("readonly",this._isReadonly()),i("disabled",this._isInteractionBlocked()),i("bare",this._isBare()),e("tabindex","-1"),o==="lg"?(t.style.setProperty("--ui-calendar-day-height","1.95em"),t.style.setProperty("--ui-calendar-day-padding-block","0.2em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.26em"),t.style.setProperty("--ui-calendar-gap","0.42em"),t.style.setProperty("--ui-calendar-day-font-size","0.78em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.7em"),t.style.setProperty("--ui-calendar-title-font-size","0.88em")):(t.style.setProperty("--ui-calendar-day-height","2.4em"),t.style.setProperty("--ui-calendar-day-padding-block","0.14em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.22em"),t.style.setProperty("--ui-calendar-gap","0.34em"),t.style.setProperty("--ui-calendar-day-font-size","0.72em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.64em"),t.style.setProperty("--ui-calendar-title-font-size","0.8em")),a?(t.style.setProperty("--ui-calendar-frame-padding","0.32em"),t.style.setProperty("--ui-calendar-week-gap","0.18em"),t.style.setProperty("--ui-calendar-control-height","1.72em"),t.style.setProperty("--ui-calendar-gap","0.24em")):(t.style.removeProperty("--ui-calendar-frame-padding"),t.style.removeProperty("--ui-calendar-week-gap"),t.style.removeProperty("--ui-calendar-control-height")),e("aria-label",this.getAttribute("label")||this._translations().selectDate)}_overlaySignature(t){return[t?"sheet":"popover",this._minuteStep(),this._is12h()?"12h":"24h",this.getAttribute("locale")||"",this.getAttribute("translations")||""].join(":")}_ensureOverlayContent(t){if(!this._overlay)return;const e=this._overlaySignature(t);this._overlayKey===e&&this._overlay.querySelector(".dt-calendar")||(this._overlayKey=e,this._overlay.innerHTML=t?`<div class="sheet-wrap">${this._renderSurfaceInner(!0)}</div>`:`<div class="overlay">${this._renderSurfaceInner(!1)}</div>`)}_setClosestOptionValue(t,e){const i=Array.from(t.options).map(a=>Number(a.value)).filter(a=>Number.isFinite(a));if(!i.length)return;let r=i[0],o=Math.abs(r-e);for(let a=1;a<i.length;a+=1){const s=i[a],n=Math.abs(s-e);n<o&&(r=s,o=n)}t.value=String(r)}_syncOverlayState(){if(!this._overlay)return;this._syncOverlayHostZIndex();const t=this._isMobileSheet();this._ensureOverlayContent(t),this._syncDismissableLayer();const e=this._translations(),i=this._overlay.querySelector(".panel, .sheet"),r=this._overlay.querySelector(".footer");i&&(i.dataset.bare=this._isBare()?"true":"false"),r&&(r.hidden=!this._showFooter());const o=this._overlay.querySelector(".head-title");if(o){const d=(this.getAttribute("label")||"").trim();o.textContent=d,o.hidden=!d}const a=this._overlay.querySelector(".head-meta");a&&(a.textContent=this._pending.date&&this._pending.time?this._formatDisplay(this._pending):e.selectDate);const s=this._overlay.querySelector(".dt-calendar");s&&this._syncCalendar(s);const n=l.parseTimeInput(this._pending.time||"00:00")||{hours:0,minutes:0},u=this._overlay.querySelector('select[data-segment="hours"]'),b=this._overlay.querySelector('select[data-segment="minutes"]'),_=this._overlay.querySelector('select[data-segment="meridiem"]');if(u){const d=this._is12h()?n.hours%12||12:n.hours;this._setClosestOptionValue(u,d),u.disabled=this._isInteractionBlocked()||this._isReadonly()}b&&(this._setClosestOptionValue(b,n.minutes),b.disabled=this._isInteractionBlocked()||this._isReadonly()),_&&(_.value=n.hours>=12?"pm":"am",_.disabled=this._isInteractionBlocked()||this._isReadonly());const x=this._isInteractionBlocked()||this._isReadonly();this._overlay.querySelectorAll(".action").forEach(d=>{d.disabled=x}),t||this._schedulePosition.run()}_renderOverlay(){this._syncOverlayState()}_applyTimeFromSurface(t){const e=t.querySelector('select[data-segment="hours"]'),i=t.querySelector('select[data-segment="minutes"]'),r=t.querySelector('select[data-segment="meridiem"]');if(!e||!i)return;const o=Number(e.value),a=Number(i.value);if(!Number.isFinite(o)||!Number.isFinite(a))return;let s=o;if(this._is12h()){const n=r?.value==="pm"?"pm":"am";n==="pm"&&s<12&&(s+=12),n==="am"&&s===12&&(s=0)}this._pending=this._clampState({date:this._pending.date,time:`${h(s)}:${h(a)}`}),this._emitInput("time")}_onRootClick(t){const e=t.target;if(!e)return;const i=e.closest("[data-action]")?.getAttribute("data-action");if(i&&!(this._isInteractionBlocked()||this._isReadonly())){if(i==="toggle"){this._restoreFocusEl=e,this._setOpen(!this._open,"toggle");return}if(i==="clear"){this._isInlineMode()?(this._pending={date:null,time:null},this._emitInput("clear"),this._updateHostState()):this._commit({date:null,time:null},"clear");return}if(this._isInlineMode()&&i==="now"){const r=new Date,o=String(r.getMonth()+1).padStart(2,"0"),a=String(r.getDate()).padStart(2,"0"),s=`${r.getFullYear()}-${o}-${a}`,n=`${h(r.getHours())}:${h(r.getMinutes())}`;this._pending=this._clampState({date:s,time:n}),this._emitInput("now"),this._updateHostState();return}if(this._isInlineMode()&&i==="cancel"){this._pending={...this._value},this._updateHostState();return}this._isInlineMode()&&i==="apply"&&this._commit(this._pending,"apply")}}_onRootChange(t){if(!this._isInlineMode())return;const e=t.target;if(e){if(e.tagName.toLowerCase()==="ui-calendar"){this._onOverlayCalendar(t);return}if(e instanceof HTMLSelectElement&&e.closest(".inline-panel")){if(!e.matches("select[data-segment]")||this._isInteractionBlocked()||this._isReadonly())return;const i=this.root.querySelector(".inline-panel");if(!i)return;if(this._applyTimeFromSurface(i),this._shouldAutoCommit()&&this._pending.date&&this._pending.time){this._commit(this._pending,"time");return}this._updateHostState()}}}_onRootInput(t){const e=t.target;e instanceof HTMLInputElement&&e.classList.contains("input")&&this._allowInput()&&(this._isInteractionBlocked()||(this._draft=e.value,this._inlineError="",this._emitInput("typing")))}_onRootBlur(t){const e=t.target;if(!(e instanceof HTMLInputElement)||!e.classList.contains("input")||!this._allowInput()||this._isInteractionBlocked())return;const i=this._draft.trim();if(!i){this._commit({date:null,time:null},"blur");return}const r=/^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);if(!r){this._inlineError=this.getAttribute("error")||this._translations().invalidDateTime,this._emitInvalid(i,"parse"),this._updateHostState();return}const o=this._parseDateInput(r[1]),a=l.parseTimeInput(r[2])?r[2]:null;if(!o||!a){this._inlineError=this.getAttribute("error")||this._translations().invalidDateTime,this._emitInvalid(i,"parse"),this._updateHostState();return}this._commit({date:o,time:a},"blur")}_onRootKeyDown(t){const e=t;if(!this._isInteractionBlocked()){if(e.key==="Escape"&&this._open&&!this._isInlineMode()){e.preventDefault(),this._setOpen(!1,"escape");return}e.key==="ArrowDown"&&!this._open&&!this._isInlineMode()&&(e.preventDefault(),this._setOpen(!0,"keyboard"))}}_onOverlayClick(t){const e=t.target;if(!e)return;const i=e.closest("[data-action]")?.getAttribute("data-action");if(i&&!this._isInteractionBlocked()&&!(this._isReadonly()&&i!=="toggle")){if(i==="backdrop"){this._setOpen(!1,"outside");return}if(i==="cancel"){this._pending={...this._value},this._setOpen(!1,"cancel");return}if(i==="clear"){this._pending={date:null,time:null},this._emitInput("clear"),this._renderOverlay();return}if(i==="now"){const r=new Date,o=String(r.getMonth()+1).padStart(2,"0"),a=String(r.getDate()).padStart(2,"0"),s=`${r.getFullYear()}-${o}-${a}`,n=`${h(r.getHours())}:${h(r.getMinutes())}`;this._pending=this._clampState({date:s,time:n}),this._emitInput("now"),this._renderOverlay();return}i==="apply"&&(this._commit(this._pending,"apply"),this._setOpen(!1,"apply"))}}_onOverlayChange(t){const e=t.target;e instanceof HTMLSelectElement&&e.matches("select[data-segment]")&&(this._isInteractionBlocked()||this._overlay&&(this._applyTimeFromSurface(this._overlay),this._shouldAutoCommit()&&this._pending.date&&this._pending.time&&(this._commit(this._pending,"time"),this._setOpen(!1,"time"))))}_onOverlayCalendar(t){if(this._isInteractionBlocked()||this._isReadonly())return;const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-calendar")return;const i=t.type,r=t.detail,o=l.normalizeDateIso(i==="select"?r?.value||null:r?.value);if(o){if(this._pending=this._clampState({date:o,time:this._pending.time||"09:00"}),this._emitInput("calendar"),this._shouldAutoCommit()&&this._pending.time){this._commit(this._pending,"calendar"),this._setOpen(!1,"calendar");return}this._updateHostState()}}_onDocumentPointerDown(t){if(!this._open||!this._overlay)return;const e=t.composedPath();e.includes(this)||e.includes(this._overlay)||this._setOpen(!1,"outside")}_onDocumentKeyDown(t){this._open&&t.key==="Escape"&&(t.preventDefault(),this._setOpen(!1,"escape"))}_updateHostState(){if(!this._hasView)return;const t=this.getAttribute("label")||"",e=this.getAttribute("hint")||"",i=this.getAttribute("error")||"",r=this._inlineError||i,o=!!y(this._value),a=this.getAttribute("name")||"",s=this._allowInput()?this._draft:this._formatDisplay(this._value),n=this._isInlineMode(),u=this._translations(),b=r?"error":this._state();this._state()==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const _=this.root.querySelector(".label"),x=this.root.querySelector(".label-text"),C=this.root.querySelector(".required"),d=this.root.querySelector(".input"),I=this.root.querySelector('.btn[data-action="clear"]'),g=this.root.querySelector('.btn[data-action="toggle"]'),v=this.root.querySelector(".hint"),S=this.root.querySelector(".error"),w=this.root.querySelector(".hidden-input");if(_&&(_.hidden=!t),_&&(_.id=this._labelId,_.setAttribute("for",this._inputId)),x&&(x.textContent=t),C&&(C.hidden=!this.hasAttribute("required")),d&&(d.value!==s&&(d.value=s),d.id=this._inputId,d.placeholder=u.dateTimePlaceholder,d.readOnly=!this._allowInput()||this._isReadonly(),d.disabled=this._isInteractionBlocked(),d.required=this.hasAttribute("required"),d.autocomplete="off",d.setAttribute("role","combobox"),d.setAttribute("aria-haspopup","dialog"),d.setAttribute("aria-expanded",n?"false":String(this._open)),d.setAttribute("aria-controls",this._panelId),d.setAttribute("aria-invalid",r?"true":"false"),t?d.setAttribute("aria-labelledby",this._labelId):d.removeAttribute("aria-labelledby")),I&&(I.hidden=!(this._clearable()&&o),I.setAttribute("aria-label",u.clear),I.disabled=this._isInteractionBlocked()),g&&(g.hidden=n,g.setAttribute("aria-label",u.toggleCalendar),g.setAttribute("aria-expanded",n?"false":String(this._open)),g.setAttribute("aria-controls",this._panelId),g.disabled=this._isInteractionBlocked()),v&&(v.id=this._hintId,v.hidden=!e,v.textContent=e),S&&(S.id=this._errorId,S.hidden=!r,S.textContent=r),d){const f=[];e&&v&&!v.hidden&&f.push(this._hintId),r&&f.push(this._errorId),f.length?d.setAttribute("aria-describedby",f.join(" ")):d.removeAttribute("aria-describedby")}w&&(w.disabled=!a,w.name=a,w.value=y(this._value)||"");const A=this.root.querySelector(".field");A&&(A.dataset.open=this._open&&!n?"true":"false",A.dataset.invalid=r?"true":"false",A.dataset.state=b);const c=this.root.querySelector(".inline-panel");if(c){c.hidden=!n,c.id=this._panelId,c.dataset.bare=this._isBare()?"true":"false",c.setAttribute("role","dialog"),c.setAttribute("aria-modal","false"),c.setAttribute("aria-label",t||u.selectDate);const f=c.querySelector(".panel-title");f&&(f.textContent=t,f.hidden=!t);const D=c.querySelector(".head-title");D&&(D.textContent=t,D.hidden=!t);const T=c.querySelector(".head-meta");T&&(T.textContent=this._pending.date&&this._pending.time?this._formatDisplay(this._pending):u.selectDate);const L=c.querySelector('[data-action="now"]');L&&(L.textContent=u.now);const E=c.querySelector('[data-action="clear"]');E&&(E.textContent=u.clear);const R=c.querySelector('[data-action="apply"]');R&&(R.textContent=u.apply);const q=c.querySelector(".footer");q&&(q.hidden=!this._showFooter());const M=c.querySelector(".dt-calendar-inline");M&&this._syncCalendar(M);const $=c.querySelector('select[data-segment="hours"]'),O=c.querySelector('select[data-segment="minutes"]'),B=c.querySelector('select[data-segment="meridiem"]'),k=l.parseTimeInput(this._pending.time||"00:00")||{hours:0,minutes:0};if($){const z=this._is12h()?k.hours%12||12:k.hours;this._setClosestOptionValue($,z),$.disabled=this._isInteractionBlocked()||this._isReadonly()}O&&(this._setClosestOptionValue(O,k.minutes),O.disabled=this._isInteractionBlocked()||this._isReadonly()),B&&(B.value=k.hours>=12?"pm":"am",B.disabled=this._isInteractionBlocked()||this._isReadonly()),c.querySelectorAll(".action").forEach(z=>{z.disabled=this._isInteractionBlocked()||this._isReadonly()})}!n&&this._open&&this._syncOverlayState(),n&&this._destroyOverlay()}render(){if(!this._hasView){const t=this._translations();this.setContent(`
         <style>${Y}</style>
         <div class="root">
           <label class="label" part="label" id="${this._labelId}">

package/dist/date-time-picker.esm.js

@@ -766,9 +766,9 @@ class ht extends W {
         <section class="time-panel" part="time">
           <span class="icon" aria-hidden="true">${K}</span>
           <div class="time-grid" data-meridiem="${this._is12h() ? "true" : "false"}">
-            <div><label>${c(i.hour)}</label><select data-segment="hours">${r.hours}</select></div>
-            <div><label>${c(i.minute)}</label><select data-segment="minutes">${r.minutes}</select></div>
-            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem"><option value="am" ${r.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${r.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
+            <div><label>${c(i.hour)}</label><select data-segment="hours" aria-label="${c(i.hour)}">${r.hours}</select></div>
+            <div><label>${c(i.minute)}</label><select data-segment="minutes" aria-label="${c(i.minute)}">${r.minutes}</select></div>
+            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem" aria-label="${c(i.meridiem)}"><option value="am" ${r.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${r.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
           </div>
         </section>
       </div>
@@ -1001,8 +1001,8 @@ class ht extends W {
     if (!this._hasView) return;
     const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", r = this._inlineError || i, o = !!x(this._value), a = this.getAttribute("name") || "", s = this._allowInput() ? this._draft : this._formatDisplay(this._value), n = this._isInlineMode(), d = this._translations(), f = r ? "error" : this._state();
     this._state() === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
-    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), D = this.root.querySelector(".required"), l = this.root.querySelector(".input"), w = this.root.querySelector('.btn[data-action="clear"]'), b = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), I = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
-    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), D && (D.hidden = !this.hasAttribute("required")), l && (l.value !== s && (l.value = s), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", n ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", r ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), w && (w.hidden = !(this._clearable() && o), w.setAttribute("aria-label", d.clear), w.disabled = this._isInteractionBlocked()), b && (b.hidden = n, b.setAttribute("aria-label", d.toggleCalendar), b.setAttribute("aria-expanded", n ? "false" : String(this._open)), b.setAttribute("aria-controls", this._panelId), b.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), I && (I.id = this._errorId, I.hidden = !r, I.textContent = r), l) {
+    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), $ = this.root.querySelector(".required"), l = this.root.querySelector(".input"), w = this.root.querySelector('.btn[data-action="clear"]'), b = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), I = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
+    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), $ && ($.hidden = !this.hasAttribute("required")), l && (l.value !== s && (l.value = s), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", n ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", r ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), w && (w.hidden = !(this._clearable() && o), w.setAttribute("aria-label", d.clear), w.disabled = this._isInteractionBlocked()), b && (b.hidden = n, b.setAttribute("aria-label", d.toggleCalendar), b.setAttribute("aria-expanded", n ? "false" : String(this._open)), b.setAttribute("aria-controls", this._panelId), b.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), I && (I.id = this._errorId, I.hidden = !r, I.textContent = r), l) {
       const _ = [];
       e && g && !g.hidden && _.push(this._hintId), r && _.push(this._errorId), _.length ? l.setAttribute("aria-describedby", _.join(" ")) : l.removeAttribute("aria-describedby");
     }
@@ -1014,8 +1014,8 @@ class ht extends W {
       u.hidden = !n, u.id = this._panelId, u.dataset.bare = this._isBare() ? "true" : "false", u.setAttribute("role", "dialog"), u.setAttribute("aria-modal", "false"), u.setAttribute("aria-label", t || d.selectDate);
       const _ = u.querySelector(".panel-title");
       _ && (_.textContent = t, _.hidden = !t);
-      const $ = u.querySelector(".head-title");
-      $ && ($.textContent = t, $.hidden = !t);
+      const D = u.querySelector(".head-title");
+      D && (D.textContent = t, D.hidden = !t);
       const q = u.querySelector(".head-meta");
       q && (q.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : d.selectDate);
       const T = u.querySelector('[data-action="now"]');

package/dist/multi-select.cjs.js

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

package/dist/multi-select.esm.js

@@ -547,8 +547,8 @@ function I(r) {
       const n = l;
       if (Array.isArray(n.options)) {
         const a = String(n.label ?? "").trim();
-        n.options.forEach((u) => {
-          !u || typeof u != "object" || s(u, a || void 0);
+        n.options.forEach((c) => {
+          !c || typeof c != "object" || s(c, a || void 0);
         });
         return;
       }
@@ -558,7 +558,7 @@ function I(r) {
     return [];
   }
 }
-function x(r) {
+function v(r) {
   if (!r) return [];
   const e = r.trim();
   if (!e) return [];
@@ -586,6 +586,7 @@ class H extends T {
       "value",
       "placeholder",
       "label",
+      "aria-label",
       "description",
       "data-error",
       "name",
@@ -614,7 +615,7 @@ class H extends T {
     return [...this._selected];
   }
   set value(e) {
-    const t = Array.isArray(e) ? e.map((s) => String(s)).filter(Boolean) : x(String(e ?? ""));
+    const t = Array.isArray(e) ? e.map((s) => String(s)).filter(Boolean) : v(String(e ?? ""));
     this._setSelected(t, "api");
   }
   get open() {
@@ -630,7 +631,7 @@ class H extends T {
     this._detachOutsideListener(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   attributeChangedCallback(e, t, s) {
-    if (t !== s && (e === "options" && (this._options = I(s)), e === "value" && (this._selected = x(s)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
+    if (t !== s && (e === "options" && (this._options = I(s)), e === "value" && (this._selected = v(s)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
       if (e === "variant" || e === "tone" || e === "density" || e === "shape" || e === "size" || e === "radius" || e === "option-radius" || e === "elevation") {
         this._syncVisualState(), e === "size" && this._syncUi();
         return;
@@ -646,7 +647,7 @@ class H extends T {
       <style>${K}</style>
       <div class="root">
         <div class="meta" hidden>
-          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
           <div class="description" hidden></div>
         </div>
         <div class="shell" part="shell" data-open="false" data-invalid="false">
@@ -666,7 +667,7 @@ class H extends T {
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `), this._options = I(this.getAttribute("options")), this._selected = x(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), this._inputEl?.addEventListener("input", this._onInput), this._inputEl?.addEventListener("keydown", this._onKeyDown), this.root.querySelector(".toggle")?.addEventListener("click", this._onToggle), this.root.querySelector(".clear")?.addEventListener("click", () => this._clearSelection("clear-button")), this._shellEl?.addEventListener("focusin", this._onFocusIn), this._shellEl?.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
+    `), this._options = I(this.getAttribute("options")), this._selected = v(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), this._inputEl?.addEventListener("input", this._onInput), this._inputEl?.addEventListener("keydown", this._onKeyDown), this.root.querySelector(".toggle")?.addEventListener("click", this._onToggle), this.root.querySelector(".clear")?.addEventListener("click", () => this._clearSelection("clear-button")), this._shellEl?.addEventListener("focusin", this._onFocusIn), this._shellEl?.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
   }
   _syncVisualState() {
     const e = L(this.getAttribute("radius") || this.getAttribute("shape"));
@@ -722,13 +723,13 @@ class H extends T {
   }
   _setSelected(e, t) {
     const s = Number(this.getAttribute("max-selections")), l = [];
-    e.forEach((u) => {
-      if (!u) return;
-      const p = l.indexOf(u);
-      p >= 0 && l.splice(p, 1), l.push(u);
+    e.forEach((c) => {
+      if (!c) return;
+      const p = l.indexOf(c);
+      p >= 0 && l.splice(p, 1), l.push(c);
     });
     const n = Number.isFinite(s) && s > 0 ? l.slice(-s) : l, a = [...this._selected];
-    if (a.length === n.length && a.every((u, p) => u === n[p])) {
+    if (a.length === n.length && a.every((c, p) => c === n[p])) {
       this._syncUi();
       return;
     }
@@ -760,7 +761,7 @@ class H extends T {
         name: n,
         getValue: () => [...this._selected],
         setValue: (a) => {
-          Array.isArray(a) ? this._setSelected(a.map((u) => String(u)), "form") : this._setSelected(x(String(a ?? "")), "form");
+          Array.isArray(a) ? this._setSelected(a.map((c) => String(c)), "form") : this._setSelected(v(String(a ?? "")), "form");
         },
         validate: async () => this.hasAttribute("required") && this._selected.length === 0 ? { valid: !1, message: "At least one option is required" } : { valid: !0 },
         setError: (a) => {
@@ -828,8 +829,15 @@ class H extends T {
     if (!(!this._shellEl || !this._inputEl || !this._panelEl)) {
       this._isSyncingUi = !0;
       try {
-        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), u = this.root.querySelector(".required"), p = this.root.querySelector(".description"), N = this.root.querySelector(".chips"), z = this.root.querySelector(".toggle"), S = this.root.querySelector(".clear"), U = this.root.querySelector(".error"), C = this._selectionIndicator(), q = this.hasAttribute("loading"), O = (this.getAttribute("loading-text") || "Loading options...").trim(), g = this.hasAttribute("disabled"), m = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
-        l.hidden = !e && !t, n.hidden = !e, a.textContent = e, u.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, U.hidden = !s, U.textContent = s, this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", m ? "true" : "false"), z.setAttribute("data-open", this.open ? "true" : "false"), z.disabled = g || m, S.hidden = !D || this._selected.length === 0, S.disabled = g || m, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", q ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = g, this._inputEl.readOnly = m, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), N.replaceChildren(...this._selectedOptionRecords().map((i) => {
+        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), N = this.root.querySelector(".chips"), z = this.root.querySelector(".toggle"), S = this.root.querySelector(".clear"), U = this.root.querySelector(".error"), C = this._selectionIndicator(), q = this.hasAttribute("loading"), O = (this.getAttribute("loading-text") || "Loading options...").trim(), b = this.hasAttribute("disabled"), m = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
+        if (l.hidden = !e && !t, n.hidden = !e, a.textContent = e, e)
+          this._inputEl.setAttribute("aria-labelledby", `${this._uid}-label`), this._inputEl.removeAttribute("aria-label");
+        else {
+          this._inputEl.removeAttribute("aria-labelledby");
+          const i = (this.getAttribute("aria-label") || "").trim();
+          i ? this._inputEl.setAttribute("aria-label", i) : this._inputEl.removeAttribute("aria-label");
+        }
+        c.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, U.hidden = !s, U.textContent = s, this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", m ? "true" : "false"), z.setAttribute("data-open", this.open ? "true" : "false"), z.disabled = b || m, S.hidden = !D || this._selected.length === 0, S.disabled = b || m, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", q ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = b, this._inputEl.readOnly = m, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), N.replaceChildren(...this._selectedOptionRecords().map((i) => {
           const h = document.createElement("span");
           h.className = "chip", h.textContent = i.label;
           const d = document.createElement("button");
@@ -839,47 +847,47 @@ class H extends T {
             o.preventDefault(), o.stopPropagation(), this._removeChip(i.value), this._inputEl?.focus();
           }), h.append(d), h;
         }));
-        const v = this._filteredOptions(), F = this._renderLimit(), _ = v.slice(0, F), V = v.length > _.length;
+        const x = this._filteredOptions(), F = this._renderLimit(), _ = x.slice(0, F), V = x.length > _.length;
         if (this._panelEl.hidden = !this.open, q) {
           const i = document.createElement("div");
           i.className = "status", i.textContent = O, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        if (!v.length) {
+        if (!x.length) {
           const i = document.createElement("div");
           i.className = "status", i.textContent = "No matching options", this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        const B = new Set(this._selected), P = this._panelEl.getActiveItem()?.getAttribute("data-value"), b = [];
+        const B = new Set(this._selected), P = this._panelEl.getActiveItem()?.getAttribute("data-value"), g = [];
         let y = null;
         if (_.forEach((i, h) => {
           if (i.group && i.group !== y) {
-            const c = document.createElement("div");
-            c.className = "group", c.setAttribute("role", "presentation"), c.textContent = i.group, b.push(c), y = i.group;
+            const u = document.createElement("div");
+            u.className = "group", u.setAttribute("role", "presentation"), u.textContent = i.group, g.push(u), y = i.group;
           } else i.group || (y = null);
           const d = B.has(i.value), o = document.createElement("button");
-          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", C), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || g || m) && (o.disabled = !0), o.addEventListener("pointerdown", (c) => {
-            c.preventDefault();
-          }), o.addEventListener("click", (c) => {
-            c.preventDefault(), !i.disabled && (this._activeValue = i.value, this._toggleValue(i.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), this._inputEl?.focus());
+          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", C), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || b || m) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
+            u.preventDefault();
+          }), o.addEventListener("click", (u) => {
+            u.preventDefault(), !i.disabled && (this._activeValue = i.value, this._toggleValue(i.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), this._inputEl?.focus());
           });
           const f = document.createElement("div");
           f.className = "option-text";
           const k = document.createElement("span");
           if (k.className = "option-label", k.textContent = i.label, f.append(k), i.description) {
-            const c = document.createElement("span");
-            c.className = "option-description", c.textContent = i.description, f.append(c);
+            const u = document.createElement("span");
+            u.className = "option-description", u.textContent = i.description, f.append(u);
           }
           if (C !== "none") {
-            const c = document.createElement("span");
-            c.className = "check", c.textContent = d ? "✓" : "", o.append(c);
+            const u = document.createElement("span");
+            u.className = "check", u.textContent = d ? "✓" : "", o.append(u);
           }
-          o.append(f), b.push(o);
+          o.append(f), g.push(o);
         }), V) {
           const i = document.createElement("div");
-          i.className = "status", i.textContent = `Showing first ${_.length} results. Keep typing to narrow the list.`, b.push(i);
+          i.className = "status", i.textContent = `Showing first ${_.length} results. Keep typing to narrow the list.`, g.push(i);
         }
-        this._panelEl.replaceChildren(...b);
+        this._panelEl.replaceChildren(...g);
         const $ = P || this._activeValue || this._selected[this._selected.length - 1] || null, E = this._findOptionNode($), A = E && !E.hasAttribute("disabled") ? this._panelEl.setActiveItem(E, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
         this._activeValue = A?.getAttribute("data-value") || null, A?.id ? this._inputEl.setAttribute("aria-activedescendant", A.id) : this._inputEl.removeAttribute("aria-activedescendant");
       } finally {

package/dist/portal.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./ElementBase-EV6mVBUV.js"),l=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./ElementBase-EV6mVBUV.js"),l=require("./selector-BvAh35ve.js"),a=`
   :host {
     display: contents;
     color-scheme: light dark;
@@ -31,8 +31,8 @@
       --ui-portal-color: CanvasText;
     }
   }
-`;function a(r){return r==="prepend"?"prepend":"append"}function h(r){return r.nodeType===Node.ELEMENT_NODE?!0:r.nodeType===Node.TEXT_NODE?!!r.textContent?.trim():!1}function u(r){return r.nodeType===Node.ELEMENT_NODE||r.nodeType===Node.TEXT_NODE}class n extends o.ElementBase{constructor(){super(),this._headless=!1,this._strategy="append",this._target=null,this._slot=null,this._entries=[],this._syncing=!1,this._guardTimer=null,this._targetObserver=null,this._pendingSlotSync=!1,this._onSlotChange=this._onSlotChange.bind(this),this._onTargetMutations=this._onTargetMutations.bind(this)}static get observedAttributes(){return["target","headless","strategy","disabled"]}connectedCallback(){super.connectedCallback(),this._syncConfig(),this._mountAllFromSlot()}disconnectedCallback(){this._guardTimer!=null&&(window.clearTimeout(this._guardTimer),this._guardTimer=null),this._slot&&(this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null),this._disconnectTargetObserver(),this._restoreAll(),super.disconnectedCallback()}attributeChangedCallback(t,e,s){if(e!==s){if(this._syncConfig(),this._headless){this._restoreAll();return}(t==="target"||t==="strategy"||t==="disabled"||t==="headless")&&this._moveAllToTarget()}}_syncConfig(){this._headless=this.hasAttribute("headless")||this.hasAttribute("disabled"),this._strategy=a(this.getAttribute("strategy")),this._target=this._resolveTarget(),this._connectTargetObserver()}_resolveTarget(){const t=this.getAttribute("target");if(t){const e=document.querySelector(t);if(e instanceof HTMLElement)return e;this.dispatchEvent(new CustomEvent("target-missing",{detail:{target:t},bubbles:!0}))}return document.body}_connectTargetObserver(){this._disconnectTargetObserver(),!(!this._target||typeof MutationObserver>"u")&&(this._targetObserver=new MutationObserver(this._onTargetMutations),this._targetObserver.observe(this._target,{childList:!0,subtree:!0}))}_disconnectTargetObserver(){this._targetObserver&&(this._targetObserver.disconnect(),this._targetObserver=null)}_onTargetMutations(){if(this._syncing)return;let t=!1;this._entries=this._entries.filter(e=>{if(e.node.isConnected)return!0;try{e.anchor.parentNode&&e.anchor.parentNode.removeChild(e.anchor)}catch{}return t=!0,!1}),t&&this.dispatchEvent(new CustomEvent("sync",{detail:{count:this._entries.length},bubbles:!0}))}_beginSync(){this._syncing=!0,this._guardTimer!=null&&window.clearTimeout(this._guardTimer),this._guardTimer=window.setTimeout(()=>{this._syncing=!1,this._guardTimer=null,this._pendingSlotSync&&(this._pendingSlotSync=!1,this._mountAllFromSlot())},0)}_findEntry(t){return this._entries.find(e=>e.node===t)}_portalNode(t){if(!this._target||this._headless||!u(t)||this._findEntry(t)||!this.contains(t))return;const e=document.createComment("ui-portal-anchor"),s=t.parentNode;s&&(this._beginSync(),s.insertBefore(e,t),this._strategy==="prepend"?this._target.insertBefore(t,this._target.firstChild):this._target.appendChild(t),this._entries.push({node:t,anchor:e}))}_restoreEntry(t){const{node:e,anchor:s}=t;this._beginSync(),s.parentNode&&(s.parentNode.insertBefore(e,s),s.parentNode.removeChild(s))}_restoreAll(){if(!this._entries.length)return;const t=[...this._entries];this._entries=[],t.forEach(e=>this._restoreEntry(e)),this.dispatchEvent(new CustomEvent("unmount",{detail:{count:t.length},bubbles:!0}))}_moveAllToTarget(){if(this._headless){this._restoreAll();return}const t=[...this._entries];this._entries=[],t.forEach(e=>{const s=e.anchor,i=e.node;s.parentNode&&(this._beginSync(),this._strategy==="prepend"?this._target.insertBefore(i,this._target.firstChild):this._target.appendChild(i),this._entries.push({node:i,anchor:s}))}),this.dispatchEvent(new CustomEvent("mount",{detail:{count:this._entries.length},bubbles:!0}))}_mountAllFromSlot(){if(this._headless)return;const t=this._slot||this.root.querySelector("slot");if(!t)return;const e=t.assignedNodes({flatten:!0}).filter(s=>h(s));e.forEach(s=>this._portalNode(s)),e.length&&this.dispatchEvent(new CustomEvent("mount",{detail:{count:this._entries.length},bubbles:!0}))}_pruneDetachedEntries(){this._entries.length&&(this._entries=this._entries.filter(t=>{if(t.node.isConnected)return!0;try{t.anchor.parentNode&&t.anchor.parentNode.removeChild(t.anchor)}catch{}return!1}))}_onSlotChange(){if(!this._headless){if(this._syncing){this._pendingSlotSync=!0;return}this._pruneDetachedEntries(),this._mountAllFromSlot()}}render(){this.setContent(`
-      <style>${l}</style>
+`;function h(r){return r==="prepend"?"prepend":"append"}function u(r){return r.nodeType===Node.ELEMENT_NODE?!0:r.nodeType===Node.TEXT_NODE?!!r.textContent?.trim():!1}function c(r){return r.nodeType===Node.ELEMENT_NODE||r.nodeType===Node.TEXT_NODE}class n extends o.ElementBase{constructor(){super(),this._headless=!1,this._strategy="append",this._target=null,this._slot=null,this._entries=[],this._syncing=!1,this._guardTimer=null,this._targetObserver=null,this._pendingSlotSync=!1,this._onSlotChange=this._onSlotChange.bind(this),this._onTargetMutations=this._onTargetMutations.bind(this)}static get observedAttributes(){return["target","headless","strategy","disabled"]}connectedCallback(){super.connectedCallback(),this._syncConfig(),this._mountAllFromSlot()}disconnectedCallback(){this._guardTimer!=null&&(window.clearTimeout(this._guardTimer),this._guardTimer=null),this._slot&&(this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null),this._disconnectTargetObserver(),this._restoreAll(),super.disconnectedCallback()}attributeChangedCallback(t,e,s){if(e!==s){if(this._syncConfig(),this._headless){this._restoreAll();return}(t==="target"||t==="strategy"||t==="disabled"||t==="headless")&&this._moveAllToTarget()}}_syncConfig(){this._headless=this.hasAttribute("headless")||this.hasAttribute("disabled"),this._strategy=h(this.getAttribute("strategy")),this._target=this._resolveTarget(),this._connectTargetObserver()}_resolveTarget(){const t=this.getAttribute("target");if(t){const e=l.safeQuerySelector(document,t);if(e instanceof HTMLElement)return e;this.dispatchEvent(new CustomEvent("target-missing",{detail:{target:t},bubbles:!0}))}return document.body}_connectTargetObserver(){this._disconnectTargetObserver(),!(!this._target||typeof MutationObserver>"u")&&(this._targetObserver=new MutationObserver(this._onTargetMutations),this._targetObserver.observe(this._target,{childList:!0,subtree:!0}))}_disconnectTargetObserver(){this._targetObserver&&(this._targetObserver.disconnect(),this._targetObserver=null)}_onTargetMutations(){if(this._syncing)return;let t=!1;this._entries=this._entries.filter(e=>{if(e.node.isConnected)return!0;try{e.anchor.parentNode&&e.anchor.parentNode.removeChild(e.anchor)}catch{}return t=!0,!1}),t&&this.dispatchEvent(new CustomEvent("sync",{detail:{count:this._entries.length},bubbles:!0}))}_beginSync(){this._syncing=!0,this._guardTimer!=null&&window.clearTimeout(this._guardTimer),this._guardTimer=window.setTimeout(()=>{this._syncing=!1,this._guardTimer=null,this._pendingSlotSync&&(this._pendingSlotSync=!1,this._mountAllFromSlot())},0)}_findEntry(t){return this._entries.find(e=>e.node===t)}_portalNode(t){if(!this._target||this._headless||!c(t)||this._findEntry(t)||!this.contains(t))return;const e=document.createComment("ui-portal-anchor"),s=t.parentNode;s&&(this._beginSync(),s.insertBefore(e,t),this._strategy==="prepend"?this._target.insertBefore(t,this._target.firstChild):this._target.appendChild(t),this._entries.push({node:t,anchor:e}))}_restoreEntry(t){const{node:e,anchor:s}=t;this._beginSync(),s.parentNode&&(s.parentNode.insertBefore(e,s),s.parentNode.removeChild(s))}_restoreAll(){if(!this._entries.length)return;const t=[...this._entries];this._entries=[],t.forEach(e=>this._restoreEntry(e)),this.dispatchEvent(new CustomEvent("unmount",{detail:{count:t.length},bubbles:!0}))}_moveAllToTarget(){if(this._headless){this._restoreAll();return}const t=[...this._entries];this._entries=[],t.forEach(e=>{const s=e.anchor,i=e.node;s.parentNode&&(this._beginSync(),this._strategy==="prepend"?this._target.insertBefore(i,this._target.firstChild):this._target.appendChild(i),this._entries.push({node:i,anchor:s}))}),this.dispatchEvent(new CustomEvent("mount",{detail:{count:this._entries.length},bubbles:!0}))}_mountAllFromSlot(){if(this._headless)return;const t=this._slot||this.root.querySelector("slot");if(!t)return;const e=t.assignedNodes({flatten:!0}).filter(s=>u(s));e.forEach(s=>this._portalNode(s)),e.length&&this.dispatchEvent(new CustomEvent("mount",{detail:{count:this._entries.length},bubbles:!0}))}_pruneDetachedEntries(){this._entries.length&&(this._entries=this._entries.filter(t=>{if(t.node.isConnected)return!0;try{t.anchor.parentNode&&t.anchor.parentNode.removeChild(t.anchor)}catch{}return!1}))}_onSlotChange(){if(!this._headless){if(this._syncing){this._pendingSlotSync=!0;return}this._pruneDetachedEntries(),this._mountAllFromSlot()}}render(){this.setContent(`
+      <style>${a}</style>
       <div class="source" part="source">
         <slot></slot>
       </div>

package/dist/portal.esm.js

@@ -1,5 +1,6 @@
 import { E as n } from "./ElementBase-YlTLMsGk.mjs";
-const o = `
+import { s as o } from "./selector-WI8pD7YO.mjs";
+const a = `
   :host {
     display: contents;
     color-scheme: light dark;
@@ -36,13 +37,13 @@ const o = `
 function l(r) {
   return r === "prepend" ? "prepend" : "append";
 }
-function a(r) {
+function h(r) {
   return r.nodeType === Node.ELEMENT_NODE ? !0 : r.nodeType === Node.TEXT_NODE ? !!r.textContent?.trim() : !1;
 }
-function h(r) {
+function u(r) {
   return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE;
 }
-class u extends n {
+class c extends n {
   constructor() {
     super(), this._headless = !1, this._strategy = "append", this._target = null, this._slot = null, this._entries = [], this._syncing = !1, this._guardTimer = null, this._targetObserver = null, this._pendingSlotSync = !1, this._onSlotChange = this._onSlotChange.bind(this), this._onTargetMutations = this._onTargetMutations.bind(this);
   }
@@ -70,7 +71,7 @@ class u extends n {
   _resolveTarget() {
     const t = this.getAttribute("target");
     if (t) {
-      const e = document.querySelector(t);
+      const e = o(document, t);
       if (e instanceof HTMLElement) return e;
       this.dispatchEvent(
         new CustomEvent("target-missing", {
@@ -108,7 +109,7 @@ class u extends n {
     return this._entries.find((e) => e.node === t);
   }
   _portalNode(t) {
-    if (!this._target || this._headless || !h(t) || this._findEntry(t) || !this.contains(t)) return;
+    if (!this._target || this._headless || !u(t) || this._findEntry(t) || !this.contains(t)) return;
     const e = document.createComment("ui-portal-anchor"), s = t.parentNode;
     s && (this._beginSync(), s.insertBefore(e, t), this._strategy === "prepend" ? this._target.insertBefore(t, this._target.firstChild) : this._target.appendChild(t), this._entries.push({ node: t, anchor: e }));
   }
@@ -136,7 +137,7 @@ class u extends n {
     if (this._headless) return;
     const t = this._slot || this.root.querySelector("slot");
     if (!t) return;
-    const e = t.assignedNodes({ flatten: !0 }).filter((s) => a(s));
+    const e = t.assignedNodes({ flatten: !0 }).filter((s) => h(s));
     e.forEach((s) => this._portalNode(s)), e.length && this.dispatchEvent(new CustomEvent("mount", { detail: { count: this._entries.length }, bubbles: !0 }));
   }
   _pruneDetachedEntries() {
@@ -160,7 +161,7 @@ class u extends n {
   }
   render() {
     this.setContent(`
-      <style>${o}</style>
+      <style>${a}</style>
       <div class="source" part="source">
         <slot></slot>
       </div>
@@ -172,7 +173,7 @@ class u extends n {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-portal") && customElements.define("ui-portal", u);
+typeof customElements < "u" && !customElements.get("ui-portal") && customElements.define("ui-portal", c);
 export {
-  u as UIPortal
+  c as UIPortal
 };

package/dist/positioner.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-EV6mVBUV.js"),c=require("./positioner-D_fqyx_j.js"),h=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-EV6mVBUV.js"),h=require("./positioner-D_fqyx_j.js"),a=require("./selector-BvAh35ve.js"),d=`
   :host {
     display: contents;
     color-scheme: light dark;
   }
-`;function r(s,t=0){const e=Number(s);return Number.isFinite(e)?e:t}function o(s){if(s==null)return!1;const t=s.toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function d(s){return new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]).has(s)?s:"bottom"}function f(s){return s==="absolute"?"absolute":"fixed"}class a extends u.ElementBase{constructor(){super(...arguments),this._positioner=null,this._observer=null}static get observedAttributes(){return["open","placement","strategy","offset","cross-offset","flip","shift","match-width","fit-viewport","auto-placement","hide-when-detached","inline","boundary-padding","dir","anchor","headless"]}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>this._syncPositioner()),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","id"]}),this._syncPositioner()}disconnectedCallback(){this._observer?.disconnect(),this._observer=null,this._destroyPositioner(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){e!==i&&this._syncPositioner()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}updatePosition(){this._positioner?.update()}_destroyPositioner(){this._positioner?.destroy(),this._positioner=null}_resolveAnchor(){const t=this.getAttribute("anchor");if(t){const i=this.getRootNode(),n=i instanceof ShadowRoot||i instanceof Document?i.querySelector(t):null;if(n instanceof HTMLElement)return n;const l=document.querySelector(t);if(l instanceof HTMLElement)return l}const e=this.querySelector('[slot="anchor"]');return e instanceof HTMLElement?e:null}_resolveFloating(){const t=this.querySelector('[slot="content"]');return t instanceof HTMLElement?t:Array.from(this.children).find(e=>e.getAttribute("slot")!=="anchor")}_syncPositioner(){if(!this.isConnected)return;if(this.hasAttribute("headless")||!this.hasAttribute("open")){this._destroyPositioner();return}const t=this._resolveAnchor(),e=this._resolveFloating();if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement)){this._destroyPositioner();return}this._destroyPositioner(),this._positioner=c.createPositioner({anchor:t,floating:e,placement:d(this.getAttribute("placement")),strategy:f(this.getAttribute("strategy")),dir:this.getAttribute("dir")==="rtl"?"rtl":"ltr",offset:r(this.getAttribute("offset"),8),crossOffset:r(this.getAttribute("cross-offset"),0),flip:!this.hasAttribute("flip")||o(this.getAttribute("flip")),shift:!this.hasAttribute("shift")||o(this.getAttribute("shift")),matchWidth:o(this.getAttribute("match-width")),fitViewport:o(this.getAttribute("fit-viewport")),autoPlacement:o(this.getAttribute("auto-placement")),hideWhenDetached:o(this.getAttribute("hide-when-detached")),inline:o(this.getAttribute("inline")),boundaryPadding:r(this.getAttribute("boundary-padding"),4),arrow:this.querySelector('[slot="arrow"], .arrow'),onUpdate:i=>{this.dispatchEvent(new CustomEvent("position-change",{detail:i,bubbles:!0,composed:!0}))}})}render(){this.setContent(`<style>${h}</style><slot name="anchor"></slot><slot name="content"></slot><slot></slot>`)}shouldRenderOnAttributeChange(){return!1}}typeof customElements<"u"&&!customElements.get("ui-positioner")&&customElements.define("ui-positioner",a);exports.UIPositioner=a;
+`;function r(s,t=0){const e=Number(s);return Number.isFinite(e)?e:t}function o(s){if(s==null)return!1;const t=s.toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function f(s){return new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]).has(s)?s:"bottom"}function b(s){return s==="absolute"?"absolute":"fixed"}class u extends c.ElementBase{constructor(){super(...arguments),this._positioner=null,this._observer=null}static get observedAttributes(){return["open","placement","strategy","offset","cross-offset","flip","shift","match-width","fit-viewport","auto-placement","hide-when-detached","inline","boundary-padding","dir","anchor","headless"]}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>this._syncPositioner()),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","id"]}),this._syncPositioner()}disconnectedCallback(){this._observer?.disconnect(),this._observer=null,this._destroyPositioner(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){e!==i&&this._syncPositioner()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}updatePosition(){this._positioner?.update()}_destroyPositioner(){this._positioner?.destroy(),this._positioner=null}_resolveAnchor(){const t=this.getAttribute("anchor");if(t){const i=this.getRootNode(),n=i instanceof ShadowRoot||i instanceof Document?a.safeQuerySelector(i,t):null;if(n instanceof HTMLElement)return n;const l=a.safeQuerySelector(document,t);if(l instanceof HTMLElement)return l}const e=this.querySelector('[slot="anchor"]');return e instanceof HTMLElement?e:null}_resolveFloating(){const t=this.querySelector('[slot="content"]');return t instanceof HTMLElement?t:Array.from(this.children).find(e=>e.getAttribute("slot")!=="anchor")}_syncPositioner(){if(!this.isConnected)return;if(this.hasAttribute("headless")||!this.hasAttribute("open")){this._destroyPositioner();return}const t=this._resolveAnchor(),e=this._resolveFloating();if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement)){this._destroyPositioner();return}this._destroyPositioner(),this._positioner=h.createPositioner({anchor:t,floating:e,placement:f(this.getAttribute("placement")),strategy:b(this.getAttribute("strategy")),dir:this.getAttribute("dir")==="rtl"?"rtl":"ltr",offset:r(this.getAttribute("offset"),8),crossOffset:r(this.getAttribute("cross-offset"),0),flip:!this.hasAttribute("flip")||o(this.getAttribute("flip")),shift:!this.hasAttribute("shift")||o(this.getAttribute("shift")),matchWidth:o(this.getAttribute("match-width")),fitViewport:o(this.getAttribute("fit-viewport")),autoPlacement:o(this.getAttribute("auto-placement")),hideWhenDetached:o(this.getAttribute("hide-when-detached")),inline:o(this.getAttribute("inline")),boundaryPadding:r(this.getAttribute("boundary-padding"),4),arrow:this.querySelector('[slot="arrow"], .arrow'),onUpdate:i=>{this.dispatchEvent(new CustomEvent("position-change",{detail:i,bubbles:!0,composed:!0}))}})}render(){this.setContent(`<style>${d}</style><slot name="anchor"></slot><slot name="content"></slot><slot></slot>`)}shouldRenderOnAttributeChange(){return!1}}typeof customElements<"u"&&!customElements.get("ui-positioner")&&customElements.define("ui-positioner",u);exports.UIPositioner=u;