@data-slot/select 0.2.23 → 0.2.24

package/README.md

@@ -66,20 +66,17 @@ controller.destroy();
 | `select-content` | Popup container for options |
 | `select-item` | Individual selectable option |
 | `select-group` | Groups related items |
-| `select-label` | Field label (outside content) or group label (inside a group) |
+| `select-label` | Group label (inside a `select-group`) |
 | `select-separator` | Visual divider between items/groups |
 
-### Field Label vs Group Label
+### Native Label Support
 
-The `select-label` slot serves two purposes depending on where it appears:
-
-- **Field label** (outside `select-content`): Acts as the accessible label for the entire select. Linked to the trigger via `aria-labelledby`. If using a `<label>` element, `htmlFor` is set automatically. For non-label elements, clicking the label focuses the trigger.
-- **Group label** (inside a `select-group`): Labels a group of items, linked to the group via `aria-labelledby`.
+Use a standard HTML `<label for="...">` element to label the select. The `for` attribute should match the `id` on the trigger button. Clicking the label opens the select, and `aria-labelledby` is set automatically.
 
 ```html
+<label for="fruit-select">Choose a fruit</label>
 <div data-slot="select">
-  <label data-slot="select-label">Choose a fruit</label>  <!-- field label -->
-  <button data-slot="select-trigger">
+  <button data-slot="select-trigger" id="fruit-select">
     <span data-slot="select-value"></span>
   </button>
   <div data-slot="select-content" hidden>

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),ee=new Set([`false`,`0`,`no`]);function l(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(ee.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function d(e,t){if(s(e,t))return o(e,t)??void 0}function f(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let p=0;const m=(e,t)=>e.id||=`${t}-${++p}`,h=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function g(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const te=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let _=0,v=``,y=``;function ne(){if(_===0){let e=window.innerWidth-document.documentElement.clientWidth;v=document.body.style.overflow,y=document.body.style.paddingRight;let t=parseFloat(getComputedStyle(document.body).paddingRight)||0;document.body.style.paddingRight=`${t+e}px`,document.body.style.overflow=`hidden`}_++}function b(){_=Math.max(0,_-1),_===0&&(document.body.style.overflow=v,document.body.style.paddingRight=y)}const re=[`top`,`bottom`],ie=[`start`,`center`,`end`],ae=[`item-aligned`,`popper`],oe={top:`bottom`,bottom:`top`};function x(n,r={}){let i=e(n,`select-trigger`),a=e(n,`select-content`),o=e(n,`select-value`);if(!i||!a)throw Error(`Select requires trigger and content slots`);let s=r.defaultValue??d(n,`defaultValue`)??null,c=r.defaultOpen??l(n,`defaultOpen`)??!1,ee=r.placeholder??d(n,`placeholder`)??(o?d(o,`placeholder`):void 0)??``,p=r.disabled??l(n,`disabled`)??!1,_=r.required??l(n,`required`)??!1,v=r.name??d(n,`name`)??null,y=r.onValueChange,x=r.onOpenChange,C=r.position??f(n,`position`,ae)??`item-aligned`,se=r.side??f(a,`side`,re)??f(n,`side`,re)??`bottom`,w=r.align??f(a,`align`,ie)??f(n,`align`,ie)??`start`,T=r.sideOffset??u(a,`sideOffset`)??u(n,`sideOffset`)??4,E=r.alignOffset??u(a,`alignOffset`)??u(n,`alignOffset`)??0,D=r.avoidCollisions??l(a,`avoidCollisions`)??l(n,`avoidCollisions`)??!0,O=r.collisionPadding??u(a,`collisionPadding`)??u(n,`collisionPadding`)??8,ce=r.lockScroll??l(n,`lockScroll`)??!0,k=!1,A=s,j=null,M=-1,N=``,P=null,F=!1,I=0,L=0,R=[],z=[],B=[],V=new Map,H=null,U=[],W=null,G=!1,K=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,le=m(i,`select-trigger`),ue=m(a,`select-content`);i.setAttribute(`role`,`combobox`),i.setAttribute(`aria-haspopup`,`listbox`),i.setAttribute(`aria-controls`,ue),i.hasAttribute(`type`)||i.setAttribute(`type`,`button`),a.setAttribute(`role`,`listbox`),a.setAttribute(`aria-labelledby`,le),a.tabIndex=-1;let de=t(n,`select-label`),q=de.find(e=>!a.contains(e))??null;if(q){let e=m(q,`select-label`),t=i.getAttribute(`aria-labelledby`);i.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),q.tagName===`LABEL`?q.htmlFor=le:R.push(g(q,`click`,()=>i.focus()))}p&&(i.setAttribute(`aria-disabled`,`true`),i.setAttribute(`data-disabled`,``)),_&&i.setAttribute(`aria-required`,`true`),v&&(W=document.createElement(`input`),W.type=`hidden`,W.name=v,W.value=A??``,n.appendChild(W));let fe=()=>{z=t(a,`select-item`);for(let e of z){e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;let t=e.dataset.value;t===A?(h(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(h(e,`selected`,!1),e.removeAttribute(`data-selected`))}B=z.filter(e=>!K(e)),V=new Map(B.map((e,t)=>[e,t]));let n=t(a,`select-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=e(t,`select-label`);if(n){let e=m(n,`select-label`);t.setAttribute(`aria-labelledby`,e)}}},pe=(e,t,n,r)=>{let i=0,a=0;return a=e===`top`?n.top-r.height-T:n.bottom+T,i=t===`start`?n.left+E:t===`center`?n.left+n.width/2-r.width/2+E:n.right-r.width-E,{x:i,y:a}},me=(e,t)=>{let n=z.find(e=>e.dataset.value===A),r=n??B[0],i=e.left,a,o=0;if(r){let n=r.getBoundingClientRect();o=n.top-t.top,a=e.top+e.height/2-n.height/2-o}else a=e.top;return{x:i,y:a,itemOffsetTop:o}},J=()=>{let e=i.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight;a.style.minWidth=`${e.width}px`;let r=a.getBoundingClientRect(),o,s=`bottom`;if(C===`item-aligned`){let i=me(e,r);o={x:i.x,y:i.y},D&&(o.y<O?o.y=O:o.y+r.height>n-O&&(o.y=n-r.height-O),o.x<O?o.x=O:o.x+r.width>t-O&&(o.x=t-r.width-O)),s=o.y<e.top?`top`:`bottom`}else if(s=se,o=pe(s,w,e,r),D){let i=(e,t)=>e===`top`?t.y<O:t.y+r.height>n-O;if(i(s,o)){let t=oe[s],n=pe(t,w,e,r);i(t,n)||(s=t,o=n)}o.x<O?o.x=O:o.x+r.width>t-O&&(o.x=t-r.width-O),o.y<O?o.y=O:o.y+r.height>n-O&&(o.y=n-r.height-O)}a.style.position=`fixed`,a.style.top=`${o.y}px`,a.style.left=`${o.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,s),a.setAttribute(`data-align`,C===`item-aligned`?`center`:w)},he=()=>{H===null&&(H=requestAnimationFrame(()=>{H=null,k&&J()}))},ge=()=>{H!==null&&(cancelAnimationFrame(H),H=null),U.forEach(e=>e()),U.length=0},_e=()=>{if(U.length>0)return;let e=()=>he(),t=e=>{e.target instanceof Node&&a.contains(e.target)||he()};window.addEventListener(`resize`,e),window.addEventListener(`scroll`,t,!0),U.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,t,!0));let n=new ResizeObserver(e);n.observe(i),n.observe(a),U.push(()=>n.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<B.length;n++){let r=B[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}M=e},X=()=>{for(let e of z)e.removeAttribute(`data-highlighted`);M=-1},Z=e=>{n.setAttribute(`data-state`,e),i.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},ve=()=>{if(o)if(A===null)o.textContent=ee,i.setAttribute(`data-placeholder`,``);else{let e=z.find(e=>e.dataset.value===A),t=e?.dataset.label??e?.textContent?.trim()??A;o.textContent=t,i.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(k!==e&&!(p&&e)){if(e){j=document.activeElement,k=!0,h(i,`expanded`,!0),a.hidden=!1,Z(`open`),ce&&!G&&(ne(),G=!0),fe(),F=!1;let e=B.findIndex(e=>e.dataset.value===A);e>=0?Y(e,!1):X(),_e(),J(),requestAnimationFrame(()=>{if(k&&(J(),I!==0||L!==0)){let e=document.elementFromPoint(I,L),t=e?.closest?.(`[data-slot="select-item"]`);if(t&&!K(t)&&a.contains(t)){let e=V.get(t);e!==void 0&&Y(e,!1)}}}),a.focus()}else k=!1,h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),N=``,F=!1,G&&(b(),G=!1),ge(),t?j=null:requestAnimationFrame(()=>{j&&document.contains(j)?j.focus():i&&document.contains(i)&&i.focus(),j=null});te(n,`select:open-change`,{open:k}),x?.(k)}},$=(e,t=!1)=>{if(A===e&&!t)return;let r=A;A=e,W&&(W.value=e??``),e===null?n.removeAttribute(`data-value`):n.setAttribute(`data-value`,e);for(let t of z){let n=t.dataset.value;n===e?(h(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(h(t,`selected`,!1),t.removeAttribute(`data-selected`))}ve(),!t&&r!==e&&(te(n,`select:change`,{value:e}),y?.(e))},ye=e=>{if(K(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},be=e=>{let t=B.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),F=!0,Y(M===-1?0:(M+1)%t);break;case`ArrowUp`:e.preventDefault(),F=!0,Y(M===-1?t-1:(M-1+t)%t);break;case`Home`:e.preventDefault(),F=!0,Y(0);break;case`End`:e.preventDefault(),F=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),M>=0&&ye(B[M]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),xe(e.key.toLowerCase()))}},xe=e=>{P&&clearTimeout(P),P=setTimeout(()=>{N=``},500),N+=e;let t=B.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(N));if(t===-1&&N.length===1){let n=M+1;for(let r=0;r<B.length;r++){let i=(n+r)%B.length;if((B[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(F=!0,Y(t))},Se=e=>{if(!p)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),Q(!0);break}};h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),fe(),$(A,!0),R.push(g(i,`pointerdown`,e=>{I=e.clientX,L=e.clientY}),g(i,`click`,()=>{p||Q(!k)}),g(i,`keydown`,Se)),R.push(g(a,`keydown`,be),g(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&ye(t)}),g(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(F&&(F=!1,t&&V.get(t)===M)))if(t&&!K(t)){let e=V.get(t);e!==void 0&&e!==M&&Y(e,!1)}else X()}),g(a,`pointerleave`,()=>{F||X()})),R.push(g(document,`pointerdown`,e=>{let t=e.target;k&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),R.push(g(n,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)}));let Ce={get value(){return A},get isOpen(){return k},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{P&&clearTimeout(P),ge(),G&&(b(),G=!1),R.forEach(e=>e()),R.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),S.delete(n)}};return c&&Q(!0),Ce}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`select`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}exports.create=C,exports.createSelect=x;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const ee=new Set([``,`true`,`1`,`yes`]),te=new Set([`false`,`0`,`no`]);function c(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(ee.has(r))return!0;if(te.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function l(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function u(e,t){if(s(e,t))return o(e,t)??void 0}function d(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let f=0;const p=(e,t)=>e.id||=`${t}-${++f}`,m=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function h(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const ne=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let g=0,_=``,v=``;function re(){if(g===0){let e=window.innerWidth-document.documentElement.clientWidth;_=document.body.style.overflow,v=document.body.style.paddingRight;let t=parseFloat(getComputedStyle(document.body).paddingRight)||0;document.body.style.paddingRight=`${t+e}px`,document.body.style.overflow=`hidden`}g++}function y(){g=Math.max(0,g-1),g===0&&(document.body.style.overflow=_,document.body.style.paddingRight=v)}const b=[`top`,`bottom`],ie=[`start`,`center`,`end`],ae=[`item-aligned`,`popper`],oe={top:`bottom`,bottom:`top`};function x(n,r={}){let i=e(n,`select-trigger`),a=e(n,`select-content`),o=e(n,`select-value`);if(!i||!a)throw Error(`Select requires trigger and content slots`);let s=r.defaultValue??u(n,`defaultValue`)??null,ee=r.defaultOpen??c(n,`defaultOpen`)??!1,te=r.placeholder??u(n,`placeholder`)??(o?u(o,`placeholder`):void 0)??``,f=r.disabled??c(n,`disabled`)??!1,g=r.required??c(n,`required`)??!1,_=r.name??u(n,`name`)??null,v=r.onValueChange,x=r.onOpenChange,C=r.position??d(n,`position`,ae)??`item-aligned`,se=r.side??d(a,`side`,b)??d(n,`side`,b)??`bottom`,w=r.align??d(a,`align`,ie)??d(n,`align`,ie)??`start`,T=r.sideOffset??l(a,`sideOffset`)??l(n,`sideOffset`)??4,E=r.alignOffset??l(a,`alignOffset`)??l(n,`alignOffset`)??0,ce=r.avoidCollisions??c(a,`avoidCollisions`)??c(n,`avoidCollisions`)??!0,D=r.collisionPadding??l(a,`collisionPadding`)??l(n,`collisionPadding`)??8,le=r.lockScroll??c(n,`lockScroll`)??!0,O=!1,k=s,A=null,j=-1,M=``,N=null,P=!1,F=0,I=0,L=[],R=[],z=[],B=new Map,V=null,H=[],U=null,W=!1,G=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,ue=p(i,`select-trigger`),de=p(a,`select-content`);i.setAttribute(`role`,`combobox`),i.setAttribute(`aria-haspopup`,`listbox`),i.setAttribute(`aria-controls`,de),i.hasAttribute(`type`)||i.setAttribute(`type`,`button`),a.setAttribute(`role`,`listbox`),a.setAttribute(`aria-labelledby`,ue),a.tabIndex=-1;let K=document.querySelector(`label[for="${CSS.escape(ue)}"]`);if(K){let e=p(K,`select-label`),t=i.getAttribute(`aria-labelledby`);i.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),L.push(h(K,`click`,e=>{e.preventDefault(),f||Q(!O)}))}f&&(i.setAttribute(`aria-disabled`,`true`),i.setAttribute(`data-disabled`,``)),g&&i.setAttribute(`aria-required`,`true`),_&&(U=document.createElement(`input`),U.type=`hidden`,U.name=_,U.value=k??``,n.appendChild(U));let fe=()=>{R=t(a,`select-item`);for(let e of R){e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;let t=e.dataset.value;t===k?(m(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(m(e,`selected`,!1),e.removeAttribute(`data-selected`))}z=R.filter(e=>!G(e)),B=new Map(z.map((e,t)=>[e,t]));let n=t(a,`select-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=e(t,`select-label`);if(n){let e=p(n,`select-label`);t.setAttribute(`aria-labelledby`,e)}}},pe=(e,t,n,r)=>{let i=0,a=0;return a=e===`top`?n.top-r.height-T:n.bottom+T,i=t===`start`?n.left+E:t===`center`?n.left+n.width/2-r.width/2+E:n.right-r.width-E,{x:i,y:a}},me=(e,t)=>{let n=R.find(e=>e.dataset.value===k),r=n??z[0],i=e.left,a,o=0;if(r){let n=r.getBoundingClientRect();o=n.top-t.top,a=e.top+e.height/2-n.height/2-o}else a=e.top;return{x:i,y:a,itemOffsetTop:o}},q=()=>{let e=i.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight;a.style.minWidth=`${e.width}px`;let r=a.getBoundingClientRect(),o,s=`bottom`;if(C===`item-aligned`){let i=me(e,r);o={x:i.x,y:i.y},ce&&(o.y<D?o.y=D:o.y+r.height>n-D&&(o.y=n-r.height-D),o.x<D?o.x=D:o.x+r.width>t-D&&(o.x=t-r.width-D)),s=o.y<e.top?`top`:`bottom`}else if(s=se,o=pe(s,w,e,r),ce){let i=(e,t)=>e===`top`?t.y<D:t.y+r.height>n-D;if(i(s,o)){let t=oe[s],n=pe(t,w,e,r);i(t,n)||(s=t,o=n)}o.x<D?o.x=D:o.x+r.width>t-D&&(o.x=t-r.width-D),o.y<D?o.y=D:o.y+r.height>n-D&&(o.y=n-r.height-D)}a.style.position=`fixed`,a.style.top=`${o.y}px`,a.style.left=`${o.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,s),a.setAttribute(`data-align`,C===`item-aligned`?`center`:w)},he=()=>{V===null&&(V=requestAnimationFrame(()=>{V=null,O&&q()}))},J=()=>{V!==null&&(cancelAnimationFrame(V),V=null),H.forEach(e=>e()),H.length=0},ge=()=>{if(H.length>0)return;let e=()=>he(),t=e=>{e.target instanceof Node&&a.contains(e.target)||he()};window.addEventListener(`resize`,e),window.addEventListener(`scroll`,t,!0),H.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,t,!0));let n=new ResizeObserver(e);n.observe(i),n.observe(a),H.push(()=>n.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<z.length;n++){let r=z[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}j=e},X=()=>{for(let e of R)e.removeAttribute(`data-highlighted`);j=-1},Z=e=>{n.setAttribute(`data-state`,e),i.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},_e=()=>{if(o)if(k===null)o.textContent=te,i.setAttribute(`data-placeholder`,``);else{let e=R.find(e=>e.dataset.value===k),t=e?.dataset.label??e?.textContent?.trim()??k;o.textContent=t,i.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(O!==e&&!(f&&e)){if(e){A=document.activeElement,O=!0,m(i,`expanded`,!0),a.hidden=!1,Z(`open`),le&&!W&&(re(),W=!0),fe(),P=!1;let e=z.findIndex(e=>e.dataset.value===k);e>=0?Y(e,!1):X(),ge(),q(),requestAnimationFrame(()=>{if(O&&(q(),F!==0||I!==0)){let e=document.elementFromPoint(F,I),t=e?.closest?.(`[data-slot="select-item"]`);if(t&&!G(t)&&a.contains(t)){let e=B.get(t);e!==void 0&&Y(e,!1)}}}),a.focus()}else O=!1,m(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),M=``,P=!1,W&&(y(),W=!1),J(),t?A=null:requestAnimationFrame(()=>{A&&document.contains(A)?A.focus():i&&document.contains(i)&&i.focus(),A=null});ne(n,`select:open-change`,{open:O}),x?.(O)}},$=(e,t=!1)=>{if(k===e&&!t)return;let r=k;k=e,U&&(U.value=e??``),e===null?n.removeAttribute(`data-value`):n.setAttribute(`data-value`,e);for(let t of R){let n=t.dataset.value;n===e?(m(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(m(t,`selected`,!1),t.removeAttribute(`data-selected`))}_e(),!t&&r!==e&&(ne(n,`select:change`,{value:e}),v?.(e))},ve=e=>{if(G(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},ye=e=>{let t=z.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),P=!0,Y(j===-1?0:(j+1)%t);break;case`ArrowUp`:e.preventDefault(),P=!0,Y(j===-1?t-1:(j-1+t)%t);break;case`Home`:e.preventDefault(),P=!0,Y(0);break;case`End`:e.preventDefault(),P=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),j>=0&&ve(z[j]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),be(e.key.toLowerCase()))}},be=e=>{N&&clearTimeout(N),N=setTimeout(()=>{M=``},500),M+=e;let t=z.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(M));if(t===-1&&M.length===1){let n=j+1;for(let r=0;r<z.length;r++){let i=(n+r)%z.length;if((z[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(P=!0,Y(t))},xe=e=>{if(!f)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),Q(!0);break}};m(i,`expanded`,!1),a.hidden=!0,Z(`closed`),fe(),$(k,!0),L.push(h(i,`pointerdown`,e=>{F=e.clientX,I=e.clientY}),h(i,`click`,()=>{f||Q(!O)}),h(i,`keydown`,xe)),L.push(h(a,`keydown`,ye),h(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&ve(t)}),h(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(P&&(P=!1,t&&B.get(t)===j)))if(t&&!G(t)){let e=B.get(t);e!==void 0&&e!==j&&Y(e,!1)}else X()}),h(a,`pointerleave`,()=>{P||X()})),L.push(h(document,`pointerdown`,e=>{let t=e.target;O&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),L.push(h(n,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)}));let Se={get value(){return k},get isOpen(){return O},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{N&&clearTimeout(N),J(),W&&(y(),W=!1),L.forEach(e=>e()),L.length=0,U&&U.parentNode&&U.parentNode.removeChild(U),S.delete(n)}};return ee&&Q(!0),Se}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`select`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}exports.create=C,exports.createSelect=x;

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),ee=new Set([`false`,`0`,`no`]);function l(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(ee.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function d(e,t){if(s(e,t))return o(e,t)??void 0}function f(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let p=0;const m=(e,t)=>e.id||=`${t}-${++p}`,h=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function g(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const te=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let _=0,v=``,y=``;function ne(){if(_===0){let e=window.innerWidth-document.documentElement.clientWidth;v=document.body.style.overflow,y=document.body.style.paddingRight;let t=parseFloat(getComputedStyle(document.body).paddingRight)||0;document.body.style.paddingRight=`${t+e}px`,document.body.style.overflow=`hidden`}_++}function b(){_=Math.max(0,_-1),_===0&&(document.body.style.overflow=v,document.body.style.paddingRight=y)}const re=[`top`,`bottom`],ie=[`start`,`center`,`end`],ae=[`item-aligned`,`popper`],oe={top:`bottom`,bottom:`top`};function x(n,r={}){let i=e(n,`select-trigger`),a=e(n,`select-content`),o=e(n,`select-value`);if(!i||!a)throw Error(`Select requires trigger and content slots`);let s=r.defaultValue??d(n,`defaultValue`)??null,c=r.defaultOpen??l(n,`defaultOpen`)??!1,ee=r.placeholder??d(n,`placeholder`)??(o?d(o,`placeholder`):void 0)??``,p=r.disabled??l(n,`disabled`)??!1,_=r.required??l(n,`required`)??!1,v=r.name??d(n,`name`)??null,y=r.onValueChange,x=r.onOpenChange,C=r.position??f(n,`position`,ae)??`item-aligned`,se=r.side??f(a,`side`,re)??f(n,`side`,re)??`bottom`,w=r.align??f(a,`align`,ie)??f(n,`align`,ie)??`start`,T=r.sideOffset??u(a,`sideOffset`)??u(n,`sideOffset`)??4,E=r.alignOffset??u(a,`alignOffset`)??u(n,`alignOffset`)??0,D=r.avoidCollisions??l(a,`avoidCollisions`)??l(n,`avoidCollisions`)??!0,O=r.collisionPadding??u(a,`collisionPadding`)??u(n,`collisionPadding`)??8,ce=r.lockScroll??l(n,`lockScroll`)??!0,k=!1,A=s,j=null,M=-1,N=``,P=null,F=!1,I=0,L=0,R=[],z=[],B=[],V=new Map,H=null,U=[],W=null,G=!1,K=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,le=m(i,`select-trigger`),ue=m(a,`select-content`);i.setAttribute(`role`,`combobox`),i.setAttribute(`aria-haspopup`,`listbox`),i.setAttribute(`aria-controls`,ue),i.hasAttribute(`type`)||i.setAttribute(`type`,`button`),a.setAttribute(`role`,`listbox`),a.setAttribute(`aria-labelledby`,le),a.tabIndex=-1;let de=t(n,`select-label`),q=de.find(e=>!a.contains(e))??null;if(q){let e=m(q,`select-label`),t=i.getAttribute(`aria-labelledby`);i.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),q.tagName===`LABEL`?q.htmlFor=le:R.push(g(q,`click`,()=>i.focus()))}p&&(i.setAttribute(`aria-disabled`,`true`),i.setAttribute(`data-disabled`,``)),_&&i.setAttribute(`aria-required`,`true`),v&&(W=document.createElement(`input`),W.type=`hidden`,W.name=v,W.value=A??``,n.appendChild(W));let fe=()=>{z=t(a,`select-item`);for(let e of z){e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;let t=e.dataset.value;t===A?(h(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(h(e,`selected`,!1),e.removeAttribute(`data-selected`))}B=z.filter(e=>!K(e)),V=new Map(B.map((e,t)=>[e,t]));let n=t(a,`select-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=e(t,`select-label`);if(n){let e=m(n,`select-label`);t.setAttribute(`aria-labelledby`,e)}}},pe=(e,t,n,r)=>{let i=0,a=0;return a=e===`top`?n.top-r.height-T:n.bottom+T,i=t===`start`?n.left+E:t===`center`?n.left+n.width/2-r.width/2+E:n.right-r.width-E,{x:i,y:a}},me=(e,t)=>{let n=z.find(e=>e.dataset.value===A),r=n??B[0],i=e.left,a,o=0;if(r){let n=r.getBoundingClientRect();o=n.top-t.top,a=e.top+e.height/2-n.height/2-o}else a=e.top;return{x:i,y:a,itemOffsetTop:o}},J=()=>{let e=i.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight;a.style.minWidth=`${e.width}px`;let r=a.getBoundingClientRect(),o,s=`bottom`;if(C===`item-aligned`){let i=me(e,r);o={x:i.x,y:i.y},D&&(o.y<O?o.y=O:o.y+r.height>n-O&&(o.y=n-r.height-O),o.x<O?o.x=O:o.x+r.width>t-O&&(o.x=t-r.width-O)),s=o.y<e.top?`top`:`bottom`}else if(s=se,o=pe(s,w,e,r),D){let i=(e,t)=>e===`top`?t.y<O:t.y+r.height>n-O;if(i(s,o)){let t=oe[s],n=pe(t,w,e,r);i(t,n)||(s=t,o=n)}o.x<O?o.x=O:o.x+r.width>t-O&&(o.x=t-r.width-O),o.y<O?o.y=O:o.y+r.height>n-O&&(o.y=n-r.height-O)}a.style.position=`fixed`,a.style.top=`${o.y}px`,a.style.left=`${o.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,s),a.setAttribute(`data-align`,C===`item-aligned`?`center`:w)},he=()=>{H===null&&(H=requestAnimationFrame(()=>{H=null,k&&J()}))},ge=()=>{H!==null&&(cancelAnimationFrame(H),H=null),U.forEach(e=>e()),U.length=0},_e=()=>{if(U.length>0)return;let e=()=>he(),t=e=>{e.target instanceof Node&&a.contains(e.target)||he()};window.addEventListener(`resize`,e),window.addEventListener(`scroll`,t,!0),U.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,t,!0));let n=new ResizeObserver(e);n.observe(i),n.observe(a),U.push(()=>n.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<B.length;n++){let r=B[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}M=e},X=()=>{for(let e of z)e.removeAttribute(`data-highlighted`);M=-1},Z=e=>{n.setAttribute(`data-state`,e),i.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},ve=()=>{if(o)if(A===null)o.textContent=ee,i.setAttribute(`data-placeholder`,``);else{let e=z.find(e=>e.dataset.value===A),t=e?.dataset.label??e?.textContent?.trim()??A;o.textContent=t,i.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(k!==e&&!(p&&e)){if(e){j=document.activeElement,k=!0,h(i,`expanded`,!0),a.hidden=!1,Z(`open`),ce&&!G&&(ne(),G=!0),fe(),F=!1;let e=B.findIndex(e=>e.dataset.value===A);e>=0?Y(e,!1):X(),_e(),J(),requestAnimationFrame(()=>{if(k&&(J(),I!==0||L!==0)){let e=document.elementFromPoint(I,L),t=e?.closest?.(`[data-slot="select-item"]`);if(t&&!K(t)&&a.contains(t)){let e=V.get(t);e!==void 0&&Y(e,!1)}}}),a.focus()}else k=!1,h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),N=``,F=!1,G&&(b(),G=!1),ge(),t?j=null:requestAnimationFrame(()=>{j&&document.contains(j)?j.focus():i&&document.contains(i)&&i.focus(),j=null});te(n,`select:open-change`,{open:k}),x?.(k)}},$=(e,t=!1)=>{if(A===e&&!t)return;let r=A;A=e,W&&(W.value=e??``),e===null?n.removeAttribute(`data-value`):n.setAttribute(`data-value`,e);for(let t of z){let n=t.dataset.value;n===e?(h(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(h(t,`selected`,!1),t.removeAttribute(`data-selected`))}ve(),!t&&r!==e&&(te(n,`select:change`,{value:e}),y?.(e))},ye=e=>{if(K(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},be=e=>{let t=B.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),F=!0,Y(M===-1?0:(M+1)%t);break;case`ArrowUp`:e.preventDefault(),F=!0,Y(M===-1?t-1:(M-1+t)%t);break;case`Home`:e.preventDefault(),F=!0,Y(0);break;case`End`:e.preventDefault(),F=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),M>=0&&ye(B[M]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),xe(e.key.toLowerCase()))}},xe=e=>{P&&clearTimeout(P),P=setTimeout(()=>{N=``},500),N+=e;let t=B.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(N));if(t===-1&&N.length===1){let n=M+1;for(let r=0;r<B.length;r++){let i=(n+r)%B.length;if((B[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(F=!0,Y(t))},Se=e=>{if(!p)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),Q(!0);break}};h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),fe(),$(A,!0),R.push(g(i,`pointerdown`,e=>{I=e.clientX,L=e.clientY}),g(i,`click`,()=>{p||Q(!k)}),g(i,`keydown`,Se)),R.push(g(a,`keydown`,be),g(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&ye(t)}),g(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(F&&(F=!1,t&&V.get(t)===M)))if(t&&!K(t)){let e=V.get(t);e!==void 0&&e!==M&&Y(e,!1)}else X()}),g(a,`pointerleave`,()=>{F||X()})),R.push(g(document,`pointerdown`,e=>{let t=e.target;k&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),R.push(g(n,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)}));let Ce={get value(){return A},get isOpen(){return k},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{P&&clearTimeout(P),ge(),G&&(b(),G=!1),R.forEach(e=>e()),R.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),S.delete(n)}};return c&&Q(!0),Ce}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`select`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}export{C as create,x as createSelect};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const ee=new Set([``,`true`,`1`,`yes`]),te=new Set([`false`,`0`,`no`]);function c(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(ee.has(r))return!0;if(te.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function l(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function u(e,t){if(s(e,t))return o(e,t)??void 0}function d(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let f=0;const p=(e,t)=>e.id||=`${t}-${++f}`,m=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function h(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const ne=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let g=0,_=``,v=``;function re(){if(g===0){let e=window.innerWidth-document.documentElement.clientWidth;_=document.body.style.overflow,v=document.body.style.paddingRight;let t=parseFloat(getComputedStyle(document.body).paddingRight)||0;document.body.style.paddingRight=`${t+e}px`,document.body.style.overflow=`hidden`}g++}function y(){g=Math.max(0,g-1),g===0&&(document.body.style.overflow=_,document.body.style.paddingRight=v)}const b=[`top`,`bottom`],ie=[`start`,`center`,`end`],ae=[`item-aligned`,`popper`],oe={top:`bottom`,bottom:`top`};function x(n,r={}){let i=e(n,`select-trigger`),a=e(n,`select-content`),o=e(n,`select-value`);if(!i||!a)throw Error(`Select requires trigger and content slots`);let s=r.defaultValue??u(n,`defaultValue`)??null,ee=r.defaultOpen??c(n,`defaultOpen`)??!1,te=r.placeholder??u(n,`placeholder`)??(o?u(o,`placeholder`):void 0)??``,f=r.disabled??c(n,`disabled`)??!1,g=r.required??c(n,`required`)??!1,_=r.name??u(n,`name`)??null,v=r.onValueChange,x=r.onOpenChange,C=r.position??d(n,`position`,ae)??`item-aligned`,se=r.side??d(a,`side`,b)??d(n,`side`,b)??`bottom`,w=r.align??d(a,`align`,ie)??d(n,`align`,ie)??`start`,T=r.sideOffset??l(a,`sideOffset`)??l(n,`sideOffset`)??4,E=r.alignOffset??l(a,`alignOffset`)??l(n,`alignOffset`)??0,ce=r.avoidCollisions??c(a,`avoidCollisions`)??c(n,`avoidCollisions`)??!0,D=r.collisionPadding??l(a,`collisionPadding`)??l(n,`collisionPadding`)??8,le=r.lockScroll??c(n,`lockScroll`)??!0,O=!1,k=s,A=null,j=-1,M=``,N=null,P=!1,F=0,I=0,L=[],R=[],z=[],B=new Map,V=null,H=[],U=null,W=!1,G=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,ue=p(i,`select-trigger`),de=p(a,`select-content`);i.setAttribute(`role`,`combobox`),i.setAttribute(`aria-haspopup`,`listbox`),i.setAttribute(`aria-controls`,de),i.hasAttribute(`type`)||i.setAttribute(`type`,`button`),a.setAttribute(`role`,`listbox`),a.setAttribute(`aria-labelledby`,ue),a.tabIndex=-1;let K=document.querySelector(`label[for="${CSS.escape(ue)}"]`);if(K){let e=p(K,`select-label`),t=i.getAttribute(`aria-labelledby`);i.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),L.push(h(K,`click`,e=>{e.preventDefault(),f||Q(!O)}))}f&&(i.setAttribute(`aria-disabled`,`true`),i.setAttribute(`data-disabled`,``)),g&&i.setAttribute(`aria-required`,`true`),_&&(U=document.createElement(`input`),U.type=`hidden`,U.name=_,U.value=k??``,n.appendChild(U));let fe=()=>{R=t(a,`select-item`);for(let e of R){e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;let t=e.dataset.value;t===k?(m(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(m(e,`selected`,!1),e.removeAttribute(`data-selected`))}z=R.filter(e=>!G(e)),B=new Map(z.map((e,t)=>[e,t]));let n=t(a,`select-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=e(t,`select-label`);if(n){let e=p(n,`select-label`);t.setAttribute(`aria-labelledby`,e)}}},pe=(e,t,n,r)=>{let i=0,a=0;return a=e===`top`?n.top-r.height-T:n.bottom+T,i=t===`start`?n.left+E:t===`center`?n.left+n.width/2-r.width/2+E:n.right-r.width-E,{x:i,y:a}},me=(e,t)=>{let n=R.find(e=>e.dataset.value===k),r=n??z[0],i=e.left,a,o=0;if(r){let n=r.getBoundingClientRect();o=n.top-t.top,a=e.top+e.height/2-n.height/2-o}else a=e.top;return{x:i,y:a,itemOffsetTop:o}},q=()=>{let e=i.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight;a.style.minWidth=`${e.width}px`;let r=a.getBoundingClientRect(),o,s=`bottom`;if(C===`item-aligned`){let i=me(e,r);o={x:i.x,y:i.y},ce&&(o.y<D?o.y=D:o.y+r.height>n-D&&(o.y=n-r.height-D),o.x<D?o.x=D:o.x+r.width>t-D&&(o.x=t-r.width-D)),s=o.y<e.top?`top`:`bottom`}else if(s=se,o=pe(s,w,e,r),ce){let i=(e,t)=>e===`top`?t.y<D:t.y+r.height>n-D;if(i(s,o)){let t=oe[s],n=pe(t,w,e,r);i(t,n)||(s=t,o=n)}o.x<D?o.x=D:o.x+r.width>t-D&&(o.x=t-r.width-D),o.y<D?o.y=D:o.y+r.height>n-D&&(o.y=n-r.height-D)}a.style.position=`fixed`,a.style.top=`${o.y}px`,a.style.left=`${o.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,s),a.setAttribute(`data-align`,C===`item-aligned`?`center`:w)},he=()=>{V===null&&(V=requestAnimationFrame(()=>{V=null,O&&q()}))},J=()=>{V!==null&&(cancelAnimationFrame(V),V=null),H.forEach(e=>e()),H.length=0},ge=()=>{if(H.length>0)return;let e=()=>he(),t=e=>{e.target instanceof Node&&a.contains(e.target)||he()};window.addEventListener(`resize`,e),window.addEventListener(`scroll`,t,!0),H.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,t,!0));let n=new ResizeObserver(e);n.observe(i),n.observe(a),H.push(()=>n.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<z.length;n++){let r=z[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}j=e},X=()=>{for(let e of R)e.removeAttribute(`data-highlighted`);j=-1},Z=e=>{n.setAttribute(`data-state`,e),i.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},_e=()=>{if(o)if(k===null)o.textContent=te,i.setAttribute(`data-placeholder`,``);else{let e=R.find(e=>e.dataset.value===k),t=e?.dataset.label??e?.textContent?.trim()??k;o.textContent=t,i.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(O!==e&&!(f&&e)){if(e){A=document.activeElement,O=!0,m(i,`expanded`,!0),a.hidden=!1,Z(`open`),le&&!W&&(re(),W=!0),fe(),P=!1;let e=z.findIndex(e=>e.dataset.value===k);e>=0?Y(e,!1):X(),ge(),q(),requestAnimationFrame(()=>{if(O&&(q(),F!==0||I!==0)){let e=document.elementFromPoint(F,I),t=e?.closest?.(`[data-slot="select-item"]`);if(t&&!G(t)&&a.contains(t)){let e=B.get(t);e!==void 0&&Y(e,!1)}}}),a.focus()}else O=!1,m(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),M=``,P=!1,W&&(y(),W=!1),J(),t?A=null:requestAnimationFrame(()=>{A&&document.contains(A)?A.focus():i&&document.contains(i)&&i.focus(),A=null});ne(n,`select:open-change`,{open:O}),x?.(O)}},$=(e,t=!1)=>{if(k===e&&!t)return;let r=k;k=e,U&&(U.value=e??``),e===null?n.removeAttribute(`data-value`):n.setAttribute(`data-value`,e);for(let t of R){let n=t.dataset.value;n===e?(m(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(m(t,`selected`,!1),t.removeAttribute(`data-selected`))}_e(),!t&&r!==e&&(ne(n,`select:change`,{value:e}),v?.(e))},ve=e=>{if(G(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},ye=e=>{let t=z.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),P=!0,Y(j===-1?0:(j+1)%t);break;case`ArrowUp`:e.preventDefault(),P=!0,Y(j===-1?t-1:(j-1+t)%t);break;case`Home`:e.preventDefault(),P=!0,Y(0);break;case`End`:e.preventDefault(),P=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),j>=0&&ve(z[j]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),be(e.key.toLowerCase()))}},be=e=>{N&&clearTimeout(N),N=setTimeout(()=>{M=``},500),M+=e;let t=z.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(M));if(t===-1&&M.length===1){let n=j+1;for(let r=0;r<z.length;r++){let i=(n+r)%z.length;if((z[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(P=!0,Y(t))},xe=e=>{if(!f)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),Q(!0);break}};m(i,`expanded`,!1),a.hidden=!0,Z(`closed`),fe(),$(k,!0),L.push(h(i,`pointerdown`,e=>{F=e.clientX,I=e.clientY}),h(i,`click`,()=>{f||Q(!O)}),h(i,`keydown`,xe)),L.push(h(a,`keydown`,ye),h(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&ve(t)}),h(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(P&&(P=!1,t&&B.get(t)===j)))if(t&&!G(t)){let e=B.get(t);e!==void 0&&e!==j&&Y(e,!1)}else X()}),h(a,`pointerleave`,()=>{P||X()})),L.push(h(document,`pointerdown`,e=>{let t=e.target;O&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),L.push(h(n,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)}));let Se={get value(){return k},get isOpen(){return O},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{N&&clearTimeout(N),J(),W&&(y(),W=!1),L.forEach(e=>e()),L.length=0,U&&U.parentNode&&U.parentNode.removeChild(U),S.delete(n)}};return ee&&Q(!0),Se}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`select`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}export{C as create,x as createSelect};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/select",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",