@data-slot/select 0.2.137 → 0.2.138

package/README.md

@@ -22,12 +22,20 @@ npm install @data-slot/select
     <div data-slot="select-viewport">
       <div data-slot="select-group">
         <div data-slot="select-label">Fruits</div>
-        <div data-slot="select-item" data-value="apple">Apple</div>
-        <div data-slot="select-item" data-value="banana">Banana</div>
-        <div data-slot="select-item" data-value="orange">Orange</div>
+        <div data-slot="select-item" data-value="apple">
+          <span data-slot="select-item-text">Apple</span>
+        </div>
+        <div data-slot="select-item" data-value="banana">
+          <span data-slot="select-item-text">Banana</span>
+        </div>
+        <div data-slot="select-item" data-value="orange">
+          <span data-slot="select-item-text">Orange</span>
+        </div>
       </div>
       <div data-slot="select-separator"></div>
-      <div data-slot="select-item" data-value="other">Other</div>
+      <div data-slot="select-item" data-value="other">
+        <span data-slot="select-item-text">Other</span>
+      </div>
     </div>
   </div>
 </div>
@@ -70,6 +78,7 @@ controller.destroy();
 | `select-content` | Popup container for options |
 | `select-viewport` | Optional scroll container inside `select-content`; used for item-aligned scrolling when present |
 | `select-item` | Individual selectable option |
+| `select-item-text` | Optional text anchor inside `select-item`; preferred for exact item-aligned parity with Base/shadcn styles |
 | `select-group` | Groups related items |
 | `select-label` | Group label (inside a `select-group`) |
 | `select-separator` | Visual divider between items/groups |
@@ -136,6 +145,8 @@ Placement attributes (`position`, `side`, `align`, `sideOffset`, `alignOffset`,
 
 **`item-aligned` (default)**: The popup positions itself so the selected item aligns with the trigger, similar to native `<select>` elements. The popup width matches the trigger width.
 
+For the closest Base/shadcn visual parity, wrap the visible label inside each item with `data-slot="select-item-text"`. When absent, the controller falls back to the whole `select-item` box for alignment, trigger display, and typeahead.
+
 **`popper`**: The popup appears below or above the trigger like a dropdown menu. Additional options apply:
 
 | Option | Data Attribute | Type | Default | Description |

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`bottom`],n=[`start`,`center`,`end`],r=[`item-aligned`,`popper`],i=`@data-slot/select`;function a(a,o={}){let s=(0,e.reuseRootBinding)(a,i,`[@data-slot/select] createSelect() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(s)return s;let c=(0,e.getPart)(a,`select-trigger`),l=(0,e.getPart)(a,`select-content`),u=(0,e.getPart)(a,`select-value`),d=(0,e.getPart)(a,`select-positioner`),f=d&&l&&d.contains(l)?d:null,p=(0,e.getPart)(a,`select-portal`),ee=p&&f&&p.contains(f)?p:null;if(!c||!l)throw Error(`Select requires trigger and content slots`);let te=o.defaultValue??(0,e.getDataString)(a,`defaultValue`)??null,ne=o.defaultOpen??(0,e.getDataBool)(a,`defaultOpen`)??!1,re=o.placeholder??(0,e.getDataString)(a,`placeholder`)??(u?(0,e.getDataString)(u,`placeholder`):void 0)??``,m=o.disabled??(0,e.getDataBool)(a,`disabled`)??!1,ie=o.required??(0,e.getDataBool)(a,`required`)??!1,ae=o.name??(0,e.getDataString)(a,`name`)??null,oe=o.onValueChange,se=o.onOpenChange,h=(t,n)=>(0,e.getDataEnum)(l,t,n)??(f?(0,e.getDataEnum)(f,t,n):void 0)??(0,e.getDataEnum)(a,t,n),g=t=>(0,e.getDataNumber)(l,t)??(f?(0,e.getDataNumber)(f,t):void 0)??(0,e.getDataNumber)(a,t),ce=t=>(0,e.getDataBool)(l,t)??(f?(0,e.getDataBool)(f,t):void 0)??(0,e.getDataBool)(a,t),_=o.position??h(`position`,r)??`item-aligned`,le=o.side??h(`side`,t)??`bottom`,ue=o.align??h(`align`,n)??`start`,de=o.sideOffset??g(`sideOffset`)??4,fe=o.alignOffset??g(`alignOffset`)??0,v=o.avoidCollisions??ce(`avoidCollisions`)??!0,y=o.collisionPadding??g(`collisionPadding`)??8,b=o.lockScroll??(0,e.getDataBool)(a,`lockScroll`)??!0,x=o.highlightItemOnHover??(0,e.getDataBool)(a,`highlightItemOnHover`)??!0,S=!1,C=te,w=null,T=-1,E=``,D=null,O=!1,k=0,A=0,j=``,M=!1,N=[],P=[],F=[],I=new Map,L=null,R=!1,z=(0,e.createPortalLifecycle)({content:l,root:a,wrapperSlot:f?void 0:`select-positioner`,container:f??void 0,mountTarget:f?ee??f:void 0}),B=!1,V=!0,H=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,pe=e=>e.pointerType!==`touch`,U=(0,e.ensureId)(c,`select-trigger`),me=(0,e.ensureId)(l,`select-content`);c.setAttribute(`role`,`combobox`),c.setAttribute(`aria-haspopup`,`listbox`),c.setAttribute(`aria-controls`,me),c.hasAttribute(`type`)||c.setAttribute(`type`,`button`),l.setAttribute(`role`,`listbox`),l.setAttribute(`aria-labelledby`,U),l.tabIndex=-1;let W=document.querySelector(`label[for="${CSS.escape(U)}"]`);if(W){let t=(0,e.ensureId)(W,`select-label`),n=c.getAttribute(`aria-labelledby`);c.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),N.push((0,e.on)(W,`click`,e=>{e.preventDefault(),m||Z(!S)}))}m&&(c.setAttribute(`aria-disabled`,`true`),c.setAttribute(`data-disabled`,``),c instanceof HTMLButtonElement&&(c.disabled=!0)),ie&&c.setAttribute(`aria-required`,`true`),ae&&(L=document.createElement(`input`),L.type=`hidden`,L.name=ae,L.value=C??``,a.appendChild(L));let he=()=>{P=(0,e.getParts)(l,`select-item`);for(let t of P)t.setAttribute(`role`,`option`),t.hasAttribute(`data-disabled`)||t.hasAttribute(`disabled`)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),t.tabIndex=-1,t.dataset.value===C?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));F=P.filter(e=>!H(e)),I=new Map(F.map((e,t)=>[e,t]));let t=(0,e.getParts)(l,`select-group`);for(let n of t){n.setAttribute(`role`,`group`);let t=(0,e.getPart)(n,`select-label`);if(t){let r=(0,e.ensureId)(t,`select-label`);n.setAttribute(`aria-labelledby`,r)}}},ge=()=>(0,e.getPart)(l,`select-viewport`),_e=()=>ge()??l,ve=()=>{l.setAttribute(`data-position`,_),l.setAttribute(`data-align-trigger`,_===`item-aligned`?`true`:`false`);let e=ge();e&&e.setAttribute(`data-position`,_)},ye=(e,t,n,r)=>{let i=0,a=e;for(;a&&a!==t;){i+=a.offsetTop;let e=a.offsetParent;if(!(e instanceof HTMLElement)){i=NaN;break}e!==t&&(i+=e.clientTop),a=e}return a===t&&Number.isFinite(i)?i:e.getBoundingClientRect().top-n-t.clientTop+r},be=(e,t,n)=>ye(e,l,t.top,n.scrollTop),xe=(e,t,n)=>{let r=T>=0?F[T]:void 0,i=P.find(e=>e.dataset.value===C)??r??F[0],a=e.left,o,s=0,c=e.height;return i?(s=be(i,t,n),c=i.getBoundingClientRect().height||i.offsetHeight||e.height,o=e.top+e.height/2-l.clientTop-s-c/2):o=e.top,{x:a,y:o,alignItem:i,itemTopInContent:s,itemHeight:c}},G=()=>{let n=z.container,r=a.ownerDocument.defaultView??window,i=c.getBoundingClientRect(),o=_e();l.style.minWidth=`${i.width}px`;let s=(0,e.measurePopupContentRect)(l),u,d=`bottom`;if(_===`item-aligned`){let e=xe(i,s,o);u={x:e.x,y:e.y};let t=i.top+i.height/2,n=y,a=r.innerHeight-s.height-y,c=e=>v?a<n?n:Math.min(Math.max(e,n),a):e,f=y,p=r.innerWidth-s.width-y;if(u.x=(e=>v?p<f?f:Math.min(Math.max(e,f),p):e)(u.x),e.alignItem){let n=Math.max(0,o.scrollHeight-o.clientHeight),r=e=>t-(e+l.clientTop),i=t=>e.itemTopInContent+e.itemHeight/2-r(t);if(n>0){u.y=c(t-s.height/2);let r=Math.min(Math.max(i(u.y),0),n);o.scrollTop=r,u.y=c(t-(l.clientTop+e.itemTopInContent-r+e.itemHeight/2)),r=Math.min(Math.max(i(u.y),0),n),o.scrollTop=r,u.y=c(t-(l.clientTop+e.itemTopInContent-r+e.itemHeight/2))}else o.scrollTop=0,u.y=c(e.y)}else o.scrollTop=0,u.y=c(e.y);d=u.y<i.top?`top`:`bottom`}else{let n=(0,e.computeFloatingPosition)({anchorRect:i,contentRect:s,side:le,align:ue,sideOffset:de,alignOffset:fe,avoidCollisions:v,collisionPadding:y,allowedSides:t});u={x:n.x,y:n.y},d=n.side}let f=_===`item-aligned`?`center`:ue,p=(0,e.computeFloatingTransformOrigin)({side:d,align:f,anchorRect:i,popupX:u.x,popupY:u.y});b?(n.style.position=`fixed`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x}px, ${u.y}px, 0)`):(n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x+r.scrollX}px, ${u.y+r.scrollY}px, 0)`),n.style.setProperty(`--transform-origin`,p),n.style.willChange=`transform`,n.style.margin=`0`,ve(),l.setAttribute(`data-side`,d),l.setAttribute(`data-align`,f),n!==l&&(n.setAttribute(`data-side`,d),n.setAttribute(`data-align`,f))},K=(0,e.createPositionSync)({observedElements:[c,l],isActive:()=>S,ancestorScroll:b,onUpdate:G,ignoreScrollTarget:e=>e instanceof Node&&l.contains(e)}),q=(t,n=!0,r=!0)=>{let i=_e();for(let a=0;a<F.length;a++){let o=F[a];a===t?(o.setAttribute(`data-highlighted`,``),r&&(0,e.ensureItemVisibleInContainer)(o,i),n&&o.focus()):o.removeAttribute(`data-highlighted`)}T=t},J=()=>{for(let e of P)e.removeAttribute(`data-highlighted`);T=-1},Se=()=>{J(),(0,e.focusElement)(l)},Y=e=>{a.setAttribute(`data-state`,e),c.setAttribute(`data-state`,e),l.setAttribute(`data-state`,e),e===`open`?(a.setAttribute(`data-open`,``),c.setAttribute(`data-open`,``),l.setAttribute(`data-open`,``),a.removeAttribute(`data-closed`),c.removeAttribute(`data-closed`),l.removeAttribute(`data-closed`)):(a.setAttribute(`data-closed`,``),c.setAttribute(`data-closed`,``),l.setAttribute(`data-closed`,``),a.removeAttribute(`data-open`),c.removeAttribute(`data-open`),l.removeAttribute(`data-open`))},Ce=()=>{requestAnimationFrame(()=>{w&&document.contains(w)?(0,e.focusElement)(w):c&&document.contains(c)&&(0,e.focusElement)(c),w=null})},we=()=>{B||(z.restore(),l.hidden=!0,V?Ce():w=null)},X=(0,e.createPresenceLifecycle)({element:l,onExitComplete:we}),Te=()=>{if(u)if(C===null)u.textContent=re,c.setAttribute(`data-placeholder`,``);else{let e=P.find(e=>e.dataset.value===C);u.textContent=e?.dataset.label??e?.textContent?.trim()??C,c.removeAttribute(`data-placeholder`)}},Z=(t,n={})=>{let{skipFocusRestore:r=!1,immediate:i=!1}=n;if(S!==t&&!(m&&t)){if(t){let t=M;M=!1,V=!0,w=document.activeElement,S=!0,(0,e.setAria)(c,`expanded`,!0),z.mount(),l.hidden=!1,Y(`open`),X.enter(),b&&!R&&((0,e.lockScroll)(),R=!0),he(),O=!1;let n=F.findIndex(e=>e.dataset.value===C);n>=0?q(n,!1,!1):J(),K.start(),G(),K.update(),requestAnimationFrame(()=>{if(S&&(G(),K.update(),t&&x&&j!==`touch`&&(k!==0||A!==0))){let e=document.elementFromPoint(k,A)?.closest?.(`[data-slot="select-item"]`);if(e&&!H(e)&&l.contains(e)){let t=I.get(e);t!==void 0&&q(t,!0,!1)}}}),l.focus()}else S=!1,M=!1,k=0,A=0,j=``,(0,e.setAria)(c,`expanded`,!1),Y(`closed`),J(),E=``,O=!1,V=!r,R&&=((0,e.unlockScroll)(),!1),K.stop(),i?(X.cleanup(),we()):X.exit();(0,e.emit)(a,`select:open-change`,{open:S}),se?.(S)}},Q=(t,n=!1)=>{if(C===t&&!n)return;let r=C;C=t,L&&(L.value=t??``),t===null?a.removeAttribute(`data-value`):a.setAttribute(`data-value`,t);for(let n of P)n.dataset.value===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));Te(),!n&&r!==t&&((0,e.emit)(a,`select:change`,{value:t}),oe?.(t))},Ee=e=>{if(H(e))return;let t=e.dataset.value;t!==void 0&&(Q(t),Z(!1,{immediate:!0}))},De=e=>{let t=F.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),O=!0,q(T===-1?0:Math.min(T+1,t-1));break;case`ArrowUp`:e.preventDefault(),O=!0,q(T===-1?t-1:Math.max(T-1,0));break;case`Home`:e.preventDefault(),O=!0,q(0);break;case`End`:e.preventDefault(),O=!0,q(t-1);break;case`Enter`:case` `:e.preventDefault(),T>=0&&Ee(F[T]);break;case`Tab`:Z(!1,{skipFocusRestore:!0});break;case`Escape`:e.preventDefault(),Z(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Oe(e.key.toLowerCase()))}},Oe=e=>{D&&clearTimeout(D),D=setTimeout(()=>{E=``},500),E+=e;let t=F.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(E));if(t===-1&&E.length===1){let n=T+1;for(let r=0;r<F.length;r++){let i=(n+r)%F.length;if((F[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(O=!0,q(t))};(0,e.setAria)(c,`expanded`,!1),l.hidden=!0,ve(),Y(`closed`),he(),Q(C,!0),N.push((0,e.on)(c,`pointerdown`,e=>{k=e.clientX,A=e.clientY,j=e.pointerType,M=!0}),(0,e.on)(c,`click`,()=>{m||Z(!S)}),(0,e.on)(c,`keydown`,e=>{if(!m)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),M=!1,Z(!0);break}})),N.push((0,e.on)(l,`keydown`,De),(0,e.on)(l,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Ee(t)}),(0,e.on)(l,`pointermove`,e=>{if(!x||!pe(e))return;let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(O&&(O=!1,t&&I.get(t)===T)))if(t&&!H(t)){let e=I.get(t);e!==void 0&&e!==T&&q(e,!0)}else Se()}),(0,e.on)(l,`pointerleave`,e=>{!x||!pe(e)||O||Se()})),N.push((0,e.createDismissLayer)({root:a,isOpen:()=>S,onDismiss:()=>Z(!1),closeOnClickOutside:!0,closeOnEscape:!1})),N.push((0,e.on)(a,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open)}));let $={get value(){return C},get isOpen(){return S},select:e=>Q(e),open:()=>Z(!0),close:()=>Z(!1),destroy:()=>{B=!0,D&&clearTimeout(D),K.stop(),X.cleanup(),z.cleanup(),R&&=((0,e.unlockScroll)(),!1),N.forEach(e=>e()),N.length=0,L&&L.parentNode&&L.parentNode.removeChild(L),(0,e.clearRootBinding)(a,i,$)}};return(0,e.setRootBinding)(a,i,$),ne&&Z(!0),$}function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`select`))(0,e.hasRootBinding)(r,i)||n.push(a(r));return n}exports.create=o,exports.createSelect=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`bottom`],n=[`start`,`center`,`end`],r=[`item-aligned`,`popper`],i=`@data-slot/select`;function a(a,o={}){let s=(0,e.reuseRootBinding)(a,i,`[@data-slot/select] createSelect() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(s)return s;let c=(0,e.getPart)(a,`select-trigger`),l=(0,e.getPart)(a,`select-content`),u=(0,e.getPart)(a,`select-value`),d=(0,e.getPart)(a,`select-positioner`),f=d&&l&&d.contains(l)?d:null,p=(0,e.getPart)(a,`select-portal`),m=p&&f&&p.contains(f)?p:null;if(!c||!l)throw Error(`Select requires trigger and content slots`);let ee=o.defaultValue??(0,e.getDataString)(a,`defaultValue`)??null,te=o.defaultOpen??(0,e.getDataBool)(a,`defaultOpen`)??!1,ne=o.placeholder??(0,e.getDataString)(a,`placeholder`)??(u?(0,e.getDataString)(u,`placeholder`):void 0)??``,h=o.disabled??(0,e.getDataBool)(a,`disabled`)??!1,re=o.required??(0,e.getDataBool)(a,`required`)??!1,ie=o.name??(0,e.getDataString)(a,`name`)??null,ae=o.onValueChange,oe=o.onOpenChange,g=(t,n)=>(0,e.getDataEnum)(l,t,n)??(f?(0,e.getDataEnum)(f,t,n):void 0)??(0,e.getDataEnum)(a,t,n),_=t=>(0,e.getDataNumber)(l,t)??(f?(0,e.getDataNumber)(f,t):void 0)??(0,e.getDataNumber)(a,t),se=t=>(0,e.getDataBool)(l,t)??(f?(0,e.getDataBool)(f,t):void 0)??(0,e.getDataBool)(a,t),v=o.position??g(`position`,r)??`item-aligned`,ce=o.side??g(`side`,t)??`bottom`,le=o.align??g(`align`,n)??`start`,ue=o.sideOffset??_(`sideOffset`)??4,de=o.alignOffset??_(`alignOffset`)??0,y=o.avoidCollisions??se(`avoidCollisions`)??!0,b=o.collisionPadding??_(`collisionPadding`)??8,x=o.lockScroll??(0,e.getDataBool)(a,`lockScroll`)??!0,S=o.highlightItemOnHover??(0,e.getDataBool)(a,`highlightItemOnHover`)??!0,C=!1,w=ee,T=null,E=-1,D=``,O=null,k=!1,A=0,j=0,M=``,N=!1,P=[],F=[],I=[],L=new Map,R=null,z=!1,B=(0,e.createPortalLifecycle)({content:l,root:a,wrapperSlot:f?void 0:`select-positioner`,container:f??void 0,mountTarget:f?m??f:void 0}),fe=!1,V=!0,H=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,pe=e=>e.pointerType!==`touch`,me=(0,e.ensureId)(c,`select-trigger`),he=(0,e.ensureId)(l,`select-content`);c.setAttribute(`role`,`combobox`),c.setAttribute(`aria-haspopup`,`listbox`),c.setAttribute(`aria-controls`,he),c.hasAttribute(`type`)||c.setAttribute(`type`,`button`),l.setAttribute(`role`,`listbox`),l.setAttribute(`aria-labelledby`,me),l.tabIndex=-1;let U=document.querySelector(`label[for="${CSS.escape(me)}"]`);if(U){let t=(0,e.ensureId)(U,`select-label`),n=c.getAttribute(`aria-labelledby`);c.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),P.push((0,e.on)(U,`click`,e=>{e.preventDefault(),h||Z(!C)}))}h&&(c.setAttribute(`aria-disabled`,`true`),c.setAttribute(`data-disabled`,``),c instanceof HTMLButtonElement&&(c.disabled=!0)),re&&c.setAttribute(`aria-required`,`true`),ie&&(R=document.createElement(`input`),R.type=`hidden`,R.name=ie,R.value=w??``,a.appendChild(R));let ge=()=>{F=(0,e.getParts)(l,`select-item`);for(let t of F)t.setAttribute(`role`,`option`),t.hasAttribute(`data-disabled`)||t.hasAttribute(`disabled`)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),t.tabIndex=-1,t.dataset.value===w?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));I=F.filter(e=>!H(e)),L=new Map(I.map((e,t)=>[e,t]));let t=(0,e.getParts)(l,`select-group`);for(let n of t){n.setAttribute(`role`,`group`);let t=(0,e.getPart)(n,`select-label`);if(t){let r=(0,e.ensureId)(t,`select-label`);n.setAttribute(`aria-labelledby`,r)}}},_e=()=>(0,e.getPart)(l,`select-viewport`),ve=()=>_e()??l,ye=t=>(0,e.getPart)(t,`select-item-text`),be=e=>e?.textContent?.trim()||void 0,W=(e,t=``)=>e?(e.dataset.label?.trim()||void 0)??be(ye(e))??be(e)??t:t,xe=()=>{l.setAttribute(`data-position`,v),l.setAttribute(`data-align-trigger`,v===`item-aligned`?`true`:`false`);let e=_e();e&&e.setAttribute(`data-position`,v)},Se=e=>{if(!e)return null;let t=e.getBoundingClientRect();return t.width>0||t.height>0?t:null},Ce=e=>{let t=Se(u);return t?{top:t.top,bottom:t.bottom,height:t.height,left:e.left,right:e.right,width:e.width}:e},we=(e,t,n,r)=>{let i=0,a=e;for(;a&&a!==t;){i+=a.offsetTop;let e=a.offsetParent;if(!(e instanceof HTMLElement)){i=NaN;break}e!==t&&(i+=e.clientTop),a=e}return a===t&&Number.isFinite(i)?i:e.getBoundingClientRect().top-n-t.clientTop+r},Te=(e,t,n)=>we(e,l,t.top,n.scrollTop),Ee=e=>{let t=ye(e);return Se(t)?t:e},De=(e,t,n)=>{let r=E>=0?I[E]:void 0,i=F.find(e=>e.dataset.value===w)??r??I[0],a=Ce(e),o=e.left,s,c=0,u=a.height;if(i){let e=Ee(i);c=Te(e,t,n),u=e.getBoundingClientRect().height||e.offsetHeight||i.getBoundingClientRect().height||i.offsetHeight||a.height,s=a.top+a.height/2-l.clientTop-c-u/2}else s=e.top;return{x:o,y:s,alignItem:i,anchorTopInContent:c,anchorHeight:u,triggerAlignmentRect:a}},G=()=>{let n=B.container,r=a.ownerDocument.defaultView??window,i=c.getBoundingClientRect(),o=ve();l.style.minWidth=`${i.width}px`;let s=(0,e.measurePopupContentRect)(l),u,d=`bottom`,f=i;if(v===`item-aligned`){let e=De(i,s,o);f=e.triggerAlignmentRect,u={x:e.x,y:e.y};let t=e.triggerAlignmentRect.top+e.triggerAlignmentRect.height/2,n=b,a=r.innerHeight-s.height-b,c=e=>y?a<n?n:Math.min(Math.max(e,n),a):e,p=b,m=r.innerWidth-s.width-b;if(u.x=(e=>y?m<p?p:Math.min(Math.max(e,p),m):e)(u.x),e.alignItem){let n=Math.max(0,o.scrollHeight-o.clientHeight),r=e=>t-(e+l.clientTop),i=t=>e.anchorTopInContent+e.anchorHeight/2-r(t);if(n>0){u.y=c(t-s.height/2);let r=Math.min(Math.max(i(u.y),0),n);o.scrollTop=r,u.y=c(t-(l.clientTop+e.anchorTopInContent-r+e.anchorHeight/2)),r=Math.min(Math.max(i(u.y),0),n),o.scrollTop=r,u.y=c(t-(l.clientTop+e.anchorTopInContent-r+e.anchorHeight/2))}else o.scrollTop=0,u.y=c(e.y)}else o.scrollTop=0,u.y=c(e.y);d=u.y<i.top?`top`:`bottom`}else{let n=(0,e.computeFloatingPosition)({anchorRect:i,contentRect:s,side:ce,align:le,sideOffset:ue,alignOffset:de,avoidCollisions:y,collisionPadding:b,allowedSides:t});u={x:n.x,y:n.y},d=n.side}let p=v===`item-aligned`?`center`:le,m=(0,e.computeFloatingTransformOrigin)({side:d,align:p,anchorRect:f,popupX:u.x,popupY:u.y});x?(n.style.position=`fixed`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x}px, ${u.y}px, 0)`):(n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x+r.scrollX}px, ${u.y+r.scrollY}px, 0)`),n.style.setProperty(`--transform-origin`,m),n.style.willChange=`transform`,n.style.margin=`0`,xe(),l.setAttribute(`data-side`,d),l.setAttribute(`data-align`,p),n!==l&&(n.setAttribute(`data-side`,d),n.setAttribute(`data-align`,p))},K=(0,e.createPositionSync)({observedElements:[c,l],isActive:()=>C,ancestorScroll:x,onUpdate:G,ignoreScrollTarget:e=>e instanceof Node&&l.contains(e)}),q=(t,n=!0,r=!0)=>{let i=ve();for(let a=0;a<I.length;a++){let o=I[a];a===t?(o.setAttribute(`data-highlighted`,``),r&&(0,e.ensureItemVisibleInContainer)(o,i),n&&o.focus()):o.removeAttribute(`data-highlighted`)}E=t},J=()=>{for(let e of F)e.removeAttribute(`data-highlighted`);E=-1},Oe=()=>{J(),(0,e.focusElement)(l)},Y=e=>{a.setAttribute(`data-state`,e),c.setAttribute(`data-state`,e),l.setAttribute(`data-state`,e),e===`open`?(a.setAttribute(`data-open`,``),c.setAttribute(`data-open`,``),l.setAttribute(`data-open`,``),a.removeAttribute(`data-closed`),c.removeAttribute(`data-closed`),l.removeAttribute(`data-closed`)):(a.setAttribute(`data-closed`,``),c.setAttribute(`data-closed`,``),l.setAttribute(`data-closed`,``),a.removeAttribute(`data-open`),c.removeAttribute(`data-open`),l.removeAttribute(`data-open`))},ke=()=>{requestAnimationFrame(()=>{T&&document.contains(T)?(0,e.focusElement)(T):c&&document.contains(c)&&(0,e.focusElement)(c),T=null})},Ae=()=>{fe||(B.restore(),l.hidden=!0,V?ke():T=null)},X=(0,e.createPresenceLifecycle)({element:l,onExitComplete:Ae}),je=()=>{u&&(w===null?(u.textContent=ne,c.setAttribute(`data-placeholder`,``)):(u.textContent=W(F.find(e=>e.dataset.value===w),w),c.removeAttribute(`data-placeholder`)))},Z=(t,n={})=>{let{skipFocusRestore:r=!1,immediate:i=!1}=n;if(C!==t&&!(h&&t)){if(t){let t=N;N=!1,V=!0,T=document.activeElement,C=!0,(0,e.setAria)(c,`expanded`,!0),B.mount(),l.hidden=!1,Y(`open`),X.enter(),x&&!z&&((0,e.lockScroll)(),z=!0),ge(),k=!1;let n=I.findIndex(e=>e.dataset.value===w);n>=0?q(n,!1,!1):J(),K.start(),G(),K.update(),requestAnimationFrame(()=>{if(C&&(G(),K.update(),t&&S&&M!==`touch`&&(A!==0||j!==0))){let e=document.elementFromPoint(A,j)?.closest?.(`[data-slot="select-item"]`);if(e&&!H(e)&&l.contains(e)){let t=L.get(e);t!==void 0&&q(t,!0,!1)}}}),l.focus()}else C=!1,N=!1,A=0,j=0,M=``,(0,e.setAria)(c,`expanded`,!1),Y(`closed`),J(),D=``,k=!1,V=!r,z&&=((0,e.unlockScroll)(),!1),K.stop(),i?(X.cleanup(),Ae()):X.exit();(0,e.emit)(a,`select:open-change`,{open:C}),oe?.(C)}},Q=(t,n=!1)=>{if(w===t&&!n)return;let r=w;w=t,R&&(R.value=t??``),t===null?a.removeAttribute(`data-value`):a.setAttribute(`data-value`,t);for(let n of F)n.dataset.value===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));je(),!n&&r!==t&&((0,e.emit)(a,`select:change`,{value:t}),ae?.(t))},Me=e=>{if(H(e))return;let t=e.dataset.value;t!==void 0&&(Q(t),Z(!1,{immediate:!0}))},Ne=e=>{let t=I.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),k=!0,q(E===-1?0:Math.min(E+1,t-1));break;case`ArrowUp`:e.preventDefault(),k=!0,q(E===-1?t-1:Math.max(E-1,0));break;case`Home`:e.preventDefault(),k=!0,q(0);break;case`End`:e.preventDefault(),k=!0,q(t-1);break;case`Enter`:case` `:e.preventDefault(),E>=0&&Me(I[E]);break;case`Tab`:Z(!1,{skipFocusRestore:!0});break;case`Escape`:e.preventDefault(),Z(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Pe(e.key.toLowerCase()))}},Pe=e=>{O&&clearTimeout(O),O=setTimeout(()=>{D=``},500),D+=e;let t=I.findIndex(e=>W(e).toLowerCase().startsWith(D));if(t===-1&&D.length===1){let n=E+1;for(let r=0;r<I.length;r++){let i=(n+r)%I.length;if(W(I[i]).toLowerCase().startsWith(e)){t=i;break}}}t!==-1&&(k=!0,q(t))};(0,e.setAria)(c,`expanded`,!1),l.hidden=!0,xe(),Y(`closed`),ge(),Q(w,!0),P.push((0,e.on)(c,`pointerdown`,e=>{A=e.clientX,j=e.clientY,M=e.pointerType,N=!0}),(0,e.on)(c,`click`,()=>{h||Z(!C)}),(0,e.on)(c,`keydown`,e=>{if(!h)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),N=!1,Z(!0);break}})),P.push((0,e.on)(l,`keydown`,Ne),(0,e.on)(l,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Me(t)}),(0,e.on)(l,`pointermove`,e=>{if(!S||!pe(e))return;let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(k&&(k=!1,t&&L.get(t)===E)))if(t&&!H(t)){let e=L.get(t);e!==void 0&&e!==E&&q(e,!0)}else Oe()}),(0,e.on)(l,`pointerleave`,e=>{!S||!pe(e)||k||Oe()})),P.push((0,e.createDismissLayer)({root:a,isOpen:()=>C,onDismiss:()=>Z(!1),closeOnClickOutside:!0,closeOnEscape:!1})),P.push((0,e.on)(a,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open)}));let $={get value(){return w},get isOpen(){return C},select:e=>Q(e),open:()=>Z(!0),close:()=>Z(!1),destroy:()=>{fe=!0,O&&clearTimeout(O),K.stop(),X.cleanup(),B.cleanup(),z&&=((0,e.unlockScroll)(),!1),P.forEach(e=>e()),P.length=0,R&&R.parentNode&&R.parentNode.removeChild(R),(0,e.clearRootBinding)(a,i,$)}};return(0,e.setRootBinding)(a,i,$),te&&Z(!0),$}function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`select`))(0,e.hasRootBinding)(r,i)||n.push(a(r));return n}exports.create=o,exports.createSelect=a;

package/dist/index.js

@@ -1 +1 @@
-import{clearRootBinding as e,computeFloatingPosition as t,computeFloatingTransformOrigin as n,createDismissLayer as r,createPortalLifecycle as i,createPositionSync as a,createPresenceLifecycle as o,emit as s,ensureId as c,ensureItemVisibleInContainer as l,focusElement as u,getDataBool as d,getDataEnum as f,getDataNumber as ee,getDataString as p,getPart as m,getParts as te,getRoots as h,hasRootBinding as g,lockScroll as ne,measurePopupContentRect as re,on as _,reuseRootBinding as ie,setAria as v,setRootBinding as ae,unlockScroll as oe}from"@data-slot/core";const se=[`top`,`bottom`],ce=[`start`,`center`,`end`],le=[`item-aligned`,`popper`],y=`@data-slot/select`;function b(h,g={}){let b=ie(h,y,`[@data-slot/select] createSelect() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(b)return b;let x=m(h,`select-trigger`),S=m(h,`select-content`),C=m(h,`select-value`),ue=m(h,`select-positioner`),w=ue&&S&&ue.contains(S)?ue:null,de=m(h,`select-portal`),fe=de&&w&&de.contains(w)?de:null;if(!x||!S)throw Error(`Select requires trigger and content slots`);let pe=g.defaultValue??p(h,`defaultValue`)??null,me=g.defaultOpen??d(h,`defaultOpen`)??!1,he=g.placeholder??p(h,`placeholder`)??(C?p(C,`placeholder`):void 0)??``,T=g.disabled??d(h,`disabled`)??!1,ge=g.required??d(h,`required`)??!1,_e=g.name??p(h,`name`)??null,ve=g.onValueChange,ye=g.onOpenChange,E=(e,t)=>f(S,e,t)??(w?f(w,e,t):void 0)??f(h,e,t),D=e=>ee(S,e)??(w?ee(w,e):void 0)??ee(h,e),be=e=>d(S,e)??(w?d(w,e):void 0)??d(h,e),O=g.position??E(`position`,le)??`item-aligned`,xe=g.side??E(`side`,se)??`bottom`,Se=g.align??E(`align`,ce)??`start`,Ce=g.sideOffset??D(`sideOffset`)??4,we=g.alignOffset??D(`alignOffset`)??0,Te=g.avoidCollisions??be(`avoidCollisions`)??!0,k=g.collisionPadding??D(`collisionPadding`)??8,Ee=g.lockScroll??d(h,`lockScroll`)??!0,De=g.highlightItemOnHover??d(h,`highlightItemOnHover`)??!0,A=!1,j=pe,M=null,N=-1,P=``,F=null,I=!1,L=0,R=0,Oe=``,z=!1,B=[],V=[],H=[],U=new Map,W=null,G=!1,K=i({content:S,root:h,wrapperSlot:w?void 0:`select-positioner`,container:w??void 0,mountTarget:w?fe??w:void 0}),ke=!1,Ae=!0,q=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,je=e=>e.pointerType!==`touch`,Me=c(x,`select-trigger`),Ne=c(S,`select-content`);x.setAttribute(`role`,`combobox`),x.setAttribute(`aria-haspopup`,`listbox`),x.setAttribute(`aria-controls`,Ne),x.hasAttribute(`type`)||x.setAttribute(`type`,`button`),S.setAttribute(`role`,`listbox`),S.setAttribute(`aria-labelledby`,Me),S.tabIndex=-1;let Pe=document.querySelector(`label[for="${CSS.escape(Me)}"]`);if(Pe){let e=c(Pe,`select-label`),t=x.getAttribute(`aria-labelledby`);x.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),B.push(_(Pe,`click`,e=>{e.preventDefault(),T||Z(!A)}))}T&&(x.setAttribute(`aria-disabled`,`true`),x.setAttribute(`data-disabled`,``),x instanceof HTMLButtonElement&&(x.disabled=!0)),ge&&x.setAttribute(`aria-required`,`true`),_e&&(W=document.createElement(`input`),W.type=`hidden`,W.name=_e,W.value=j??``,h.appendChild(W));let Fe=()=>{V=te(S,`select-item`);for(let e of V)e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1,e.dataset.value===j?(v(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(v(e,`selected`,!1),e.removeAttribute(`data-selected`));H=V.filter(e=>!q(e)),U=new Map(H.map((e,t)=>[e,t]));let e=te(S,`select-group`);for(let t of e){t.setAttribute(`role`,`group`);let e=m(t,`select-label`);if(e){let n=c(e,`select-label`);t.setAttribute(`aria-labelledby`,n)}}},Ie=()=>m(S,`select-viewport`),Le=()=>Ie()??S,Re=()=>{S.setAttribute(`data-position`,O),S.setAttribute(`data-align-trigger`,O===`item-aligned`?`true`:`false`);let e=Ie();e&&e.setAttribute(`data-position`,O)},ze=(e,t,n,r)=>{let i=0,a=e;for(;a&&a!==t;){i+=a.offsetTop;let e=a.offsetParent;if(!(e instanceof HTMLElement)){i=NaN;break}e!==t&&(i+=e.clientTop),a=e}return a===t&&Number.isFinite(i)?i:e.getBoundingClientRect().top-n-t.clientTop+r},Be=(e,t,n)=>ze(e,S,t.top,n.scrollTop),Ve=(e,t,n)=>{let r=N>=0?H[N]:void 0,i=V.find(e=>e.dataset.value===j)??r??H[0],a=e.left,o,s=0,c=e.height;return i?(s=Be(i,t,n),c=i.getBoundingClientRect().height||i.offsetHeight||e.height,o=e.top+e.height/2-S.clientTop-s-c/2):o=e.top,{x:a,y:o,alignItem:i,itemTopInContent:s,itemHeight:c}},He=()=>{let e=K.container,r=h.ownerDocument.defaultView??window,i=x.getBoundingClientRect(),a=Le();S.style.minWidth=`${i.width}px`;let o=re(S),s,c=`bottom`;if(O===`item-aligned`){let e=Ve(i,o,a);s={x:e.x,y:e.y};let t=i.top+i.height/2,n=k,l=r.innerHeight-o.height-k,u=e=>Te?l<n?n:Math.min(Math.max(e,n),l):e,d=k,f=r.innerWidth-o.width-k;if(s.x=(e=>Te?f<d?d:Math.min(Math.max(e,d),f):e)(s.x),e.alignItem){let n=Math.max(0,a.scrollHeight-a.clientHeight),r=e=>t-(e+S.clientTop),i=t=>e.itemTopInContent+e.itemHeight/2-r(t);if(n>0){s.y=u(t-o.height/2);let r=Math.min(Math.max(i(s.y),0),n);a.scrollTop=r,s.y=u(t-(S.clientTop+e.itemTopInContent-r+e.itemHeight/2)),r=Math.min(Math.max(i(s.y),0),n),a.scrollTop=r,s.y=u(t-(S.clientTop+e.itemTopInContent-r+e.itemHeight/2))}else a.scrollTop=0,s.y=u(e.y)}else a.scrollTop=0,s.y=u(e.y);c=s.y<i.top?`top`:`bottom`}else{let e=t({anchorRect:i,contentRect:o,side:xe,align:Se,sideOffset:Ce,alignOffset:we,avoidCollisions:Te,collisionPadding:k,allowedSides:se});s={x:e.x,y:e.y},c=e.side}let l=O===`item-aligned`?`center`:Se,u=n({side:c,align:l,anchorRect:i,popupX:s.x,popupY:s.y});Ee?(e.style.position=`fixed`,e.style.top=`0px`,e.style.left=`0px`,e.style.transform=`translate3d(${s.x}px, ${s.y}px, 0)`):(e.style.position=`absolute`,e.style.top=`0px`,e.style.left=`0px`,e.style.transform=`translate3d(${s.x+r.scrollX}px, ${s.y+r.scrollY}px, 0)`),e.style.setProperty(`--transform-origin`,u),e.style.willChange=`transform`,e.style.margin=`0`,Re(),S.setAttribute(`data-side`,c),S.setAttribute(`data-align`,l),e!==S&&(e.setAttribute(`data-side`,c),e.setAttribute(`data-align`,l))},J=a({observedElements:[x,S],isActive:()=>A,ancestorScroll:Ee,onUpdate:He,ignoreScrollTarget:e=>e instanceof Node&&S.contains(e)}),Y=(e,t=!0,n=!0)=>{let r=Le();for(let i=0;i<H.length;i++){let a=H[i];i===e?(a.setAttribute(`data-highlighted`,``),n&&l(a,r),t&&a.focus()):a.removeAttribute(`data-highlighted`)}N=e},Ue=()=>{for(let e of V)e.removeAttribute(`data-highlighted`);N=-1},We=()=>{Ue(),u(S)},Ge=e=>{h.setAttribute(`data-state`,e),x.setAttribute(`data-state`,e),S.setAttribute(`data-state`,e),e===`open`?(h.setAttribute(`data-open`,``),x.setAttribute(`data-open`,``),S.setAttribute(`data-open`,``),h.removeAttribute(`data-closed`),x.removeAttribute(`data-closed`),S.removeAttribute(`data-closed`)):(h.setAttribute(`data-closed`,``),x.setAttribute(`data-closed`,``),S.setAttribute(`data-closed`,``),h.removeAttribute(`data-open`),x.removeAttribute(`data-open`),S.removeAttribute(`data-open`))},Ke=()=>{requestAnimationFrame(()=>{M&&document.contains(M)?u(M):x&&document.contains(x)&&u(x),M=null})},qe=()=>{ke||(K.restore(),S.hidden=!0,Ae?Ke():M=null)},X=o({element:S,onExitComplete:qe}),Je=()=>{if(C)if(j===null)C.textContent=he,x.setAttribute(`data-placeholder`,``);else{let e=V.find(e=>e.dataset.value===j);C.textContent=e?.dataset.label??e?.textContent?.trim()??j,x.removeAttribute(`data-placeholder`)}},Z=(e,t={})=>{let{skipFocusRestore:n=!1,immediate:r=!1}=t;if(A!==e&&!(T&&e)){if(e){let e=z;z=!1,Ae=!0,M=document.activeElement,A=!0,v(x,`expanded`,!0),K.mount(),S.hidden=!1,Ge(`open`),X.enter(),Ee&&!G&&(ne(),G=!0),Fe(),I=!1;let t=H.findIndex(e=>e.dataset.value===j);t>=0?Y(t,!1,!1):Ue(),J.start(),He(),J.update(),requestAnimationFrame(()=>{if(A&&(He(),J.update(),e&&De&&Oe!==`touch`&&(L!==0||R!==0))){let e=document.elementFromPoint(L,R)?.closest?.(`[data-slot="select-item"]`);if(e&&!q(e)&&S.contains(e)){let t=U.get(e);t!==void 0&&Y(t,!0,!1)}}}),S.focus()}else A=!1,z=!1,L=0,R=0,Oe=``,v(x,`expanded`,!1),Ge(`closed`),Ue(),P=``,I=!1,Ae=!n,G&&=(oe(),!1),J.stop(),r?(X.cleanup(),qe()):X.exit();s(h,`select:open-change`,{open:A}),ye?.(A)}},Q=(e,t=!1)=>{if(j===e&&!t)return;let n=j;j=e,W&&(W.value=e??``),e===null?h.removeAttribute(`data-value`):h.setAttribute(`data-value`,e);for(let t of V)t.dataset.value===e?(v(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(v(t,`selected`,!1),t.removeAttribute(`data-selected`));Je(),!t&&n!==e&&(s(h,`select:change`,{value:e}),ve?.(e))},Ye=e=>{if(q(e))return;let t=e.dataset.value;t!==void 0&&(Q(t),Z(!1,{immediate:!0}))},Xe=e=>{let t=H.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),I=!0,Y(N===-1?0:Math.min(N+1,t-1));break;case`ArrowUp`:e.preventDefault(),I=!0,Y(N===-1?t-1:Math.max(N-1,0));break;case`Home`:e.preventDefault(),I=!0,Y(0);break;case`End`:e.preventDefault(),I=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),N>=0&&Ye(H[N]);break;case`Tab`:Z(!1,{skipFocusRestore:!0});break;case`Escape`:e.preventDefault(),Z(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Ze(e.key.toLowerCase()))}},Ze=e=>{F&&clearTimeout(F),F=setTimeout(()=>{P=``},500),P+=e;let t=H.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(P));if(t===-1&&P.length===1){let n=N+1;for(let r=0;r<H.length;r++){let i=(n+r)%H.length;if((H[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(I=!0,Y(t))};v(x,`expanded`,!1),S.hidden=!0,Re(),Ge(`closed`),Fe(),Q(j,!0),B.push(_(x,`pointerdown`,e=>{L=e.clientX,R=e.clientY,Oe=e.pointerType,z=!0}),_(x,`click`,()=>{T||Z(!A)}),_(x,`keydown`,e=>{if(!T)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),z=!1,Z(!0);break}})),B.push(_(S,`keydown`,Xe),_(S,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Ye(t)}),_(S,`pointermove`,e=>{if(!De||!je(e))return;let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(I&&(I=!1,t&&U.get(t)===N)))if(t&&!q(t)){let e=U.get(t);e!==void 0&&e!==N&&Y(e,!0)}else We()}),_(S,`pointerleave`,e=>{!De||!je(e)||I||We()})),B.push(r({root:h,isOpen:()=>A,onDismiss:()=>Z(!1),closeOnClickOutside:!0,closeOnEscape:!1})),B.push(_(h,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open)}));let $={get value(){return j},get isOpen(){return A},select:e=>Q(e),open:()=>Z(!0),close:()=>Z(!1),destroy:()=>{ke=!0,F&&clearTimeout(F),J.stop(),X.cleanup(),K.cleanup(),G&&=(oe(),!1),B.forEach(e=>e()),B.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),e(h,y,$)}};return ae(h,y,$),me&&Z(!0),$}function x(e=document){let t=[];for(let n of h(e,`select`))g(n,y)||t.push(b(n));return t}export{x as create,b as createSelect};
+import{clearRootBinding as e,computeFloatingPosition as t,computeFloatingTransformOrigin as n,createDismissLayer as r,createPortalLifecycle as i,createPositionSync as a,createPresenceLifecycle as o,emit as s,ensureId as c,ensureItemVisibleInContainer as l,focusElement as u,getDataBool as d,getDataEnum as f,getDataNumber as p,getDataString as m,getPart as h,getParts as ee,getRoots as g,hasRootBinding as _,lockScroll as te,measurePopupContentRect as ne,on as v,reuseRootBinding as re,setAria as y,setRootBinding as ie,unlockScroll as ae}from"@data-slot/core";const oe=[`top`,`bottom`],se=[`start`,`center`,`end`],ce=[`item-aligned`,`popper`],b=`@data-slot/select`;function x(g,_={}){let x=re(g,b,`[@data-slot/select] createSelect() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(x)return x;let S=h(g,`select-trigger`),C=h(g,`select-content`),w=h(g,`select-value`),le=h(g,`select-positioner`),T=le&&C&&le.contains(C)?le:null,ue=h(g,`select-portal`),de=ue&&T&&ue.contains(T)?ue:null;if(!S||!C)throw Error(`Select requires trigger and content slots`);let fe=_.defaultValue??m(g,`defaultValue`)??null,pe=_.defaultOpen??d(g,`defaultOpen`)??!1,me=_.placeholder??m(g,`placeholder`)??(w?m(w,`placeholder`):void 0)??``,E=_.disabled??d(g,`disabled`)??!1,he=_.required??d(g,`required`)??!1,ge=_.name??m(g,`name`)??null,_e=_.onValueChange,ve=_.onOpenChange,D=(e,t)=>f(C,e,t)??(T?f(T,e,t):void 0)??f(g,e,t),ye=e=>p(C,e)??(T?p(T,e):void 0)??p(g,e),be=e=>d(C,e)??(T?d(T,e):void 0)??d(g,e),O=_.position??D(`position`,ce)??`item-aligned`,xe=_.side??D(`side`,oe)??`bottom`,Se=_.align??D(`align`,se)??`start`,Ce=_.sideOffset??ye(`sideOffset`)??4,we=_.alignOffset??ye(`alignOffset`)??0,Te=_.avoidCollisions??be(`avoidCollisions`)??!0,k=_.collisionPadding??ye(`collisionPadding`)??8,Ee=_.lockScroll??d(g,`lockScroll`)??!0,De=_.highlightItemOnHover??d(g,`highlightItemOnHover`)??!0,A=!1,j=fe,M=null,N=-1,P=``,F=null,I=!1,L=0,R=0,Oe=``,z=!1,B=[],V=[],H=[],U=new Map,W=null,G=!1,K=i({content:C,root:g,wrapperSlot:T?void 0:`select-positioner`,container:T??void 0,mountTarget:T?de??T:void 0}),ke=!1,Ae=!0,q=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,je=e=>e.pointerType!==`touch`,Me=c(S,`select-trigger`),Ne=c(C,`select-content`);S.setAttribute(`role`,`combobox`),S.setAttribute(`aria-haspopup`,`listbox`),S.setAttribute(`aria-controls`,Ne),S.hasAttribute(`type`)||S.setAttribute(`type`,`button`),C.setAttribute(`role`,`listbox`),C.setAttribute(`aria-labelledby`,Me),C.tabIndex=-1;let Pe=document.querySelector(`label[for="${CSS.escape(Me)}"]`);if(Pe){let e=c(Pe,`select-label`),t=S.getAttribute(`aria-labelledby`);S.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),B.push(v(Pe,`click`,e=>{e.preventDefault(),E||Z(!A)}))}E&&(S.setAttribute(`aria-disabled`,`true`),S.setAttribute(`data-disabled`,``),S instanceof HTMLButtonElement&&(S.disabled=!0)),he&&S.setAttribute(`aria-required`,`true`),ge&&(W=document.createElement(`input`),W.type=`hidden`,W.name=ge,W.value=j??``,g.appendChild(W));let Fe=()=>{V=ee(C,`select-item`);for(let e of V)e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1,e.dataset.value===j?(y(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(y(e,`selected`,!1),e.removeAttribute(`data-selected`));H=V.filter(e=>!q(e)),U=new Map(H.map((e,t)=>[e,t]));let e=ee(C,`select-group`);for(let t of e){t.setAttribute(`role`,`group`);let e=h(t,`select-label`);if(e){let n=c(e,`select-label`);t.setAttribute(`aria-labelledby`,n)}}},Ie=()=>h(C,`select-viewport`),Le=()=>Ie()??C,Re=e=>h(e,`select-item-text`),ze=e=>e?.textContent?.trim()||void 0,Be=(e,t=``)=>e?(e.dataset.label?.trim()||void 0)??ze(Re(e))??ze(e)??t:t,Ve=()=>{C.setAttribute(`data-position`,O),C.setAttribute(`data-align-trigger`,O===`item-aligned`?`true`:`false`);let e=Ie();e&&e.setAttribute(`data-position`,O)},He=e=>{if(!e)return null;let t=e.getBoundingClientRect();return t.width>0||t.height>0?t:null},Ue=e=>{let t=He(w);return t?{top:t.top,bottom:t.bottom,height:t.height,left:e.left,right:e.right,width:e.width}:e},We=(e,t,n,r)=>{let i=0,a=e;for(;a&&a!==t;){i+=a.offsetTop;let e=a.offsetParent;if(!(e instanceof HTMLElement)){i=NaN;break}e!==t&&(i+=e.clientTop),a=e}return a===t&&Number.isFinite(i)?i:e.getBoundingClientRect().top-n-t.clientTop+r},Ge=(e,t,n)=>We(e,C,t.top,n.scrollTop),Ke=e=>{let t=Re(e);return He(t)?t:e},qe=(e,t,n)=>{let r=N>=0?H[N]:void 0,i=V.find(e=>e.dataset.value===j)??r??H[0],a=Ue(e),o=e.left,s,c=0,l=a.height;if(i){let e=Ke(i);c=Ge(e,t,n),l=e.getBoundingClientRect().height||e.offsetHeight||i.getBoundingClientRect().height||i.offsetHeight||a.height,s=a.top+a.height/2-C.clientTop-c-l/2}else s=e.top;return{x:o,y:s,alignItem:i,anchorTopInContent:c,anchorHeight:l,triggerAlignmentRect:a}},Je=()=>{let e=K.container,r=g.ownerDocument.defaultView??window,i=S.getBoundingClientRect(),a=Le();C.style.minWidth=`${i.width}px`;let o=ne(C),s,c=`bottom`,l=i;if(O===`item-aligned`){let e=qe(i,o,a);l=e.triggerAlignmentRect,s={x:e.x,y:e.y};let t=e.triggerAlignmentRect.top+e.triggerAlignmentRect.height/2,n=k,u=r.innerHeight-o.height-k,d=e=>Te?u<n?n:Math.min(Math.max(e,n),u):e,f=k,p=r.innerWidth-o.width-k;if(s.x=(e=>Te?p<f?f:Math.min(Math.max(e,f),p):e)(s.x),e.alignItem){let n=Math.max(0,a.scrollHeight-a.clientHeight),r=e=>t-(e+C.clientTop),i=t=>e.anchorTopInContent+e.anchorHeight/2-r(t);if(n>0){s.y=d(t-o.height/2);let r=Math.min(Math.max(i(s.y),0),n);a.scrollTop=r,s.y=d(t-(C.clientTop+e.anchorTopInContent-r+e.anchorHeight/2)),r=Math.min(Math.max(i(s.y),0),n),a.scrollTop=r,s.y=d(t-(C.clientTop+e.anchorTopInContent-r+e.anchorHeight/2))}else a.scrollTop=0,s.y=d(e.y)}else a.scrollTop=0,s.y=d(e.y);c=s.y<i.top?`top`:`bottom`}else{let e=t({anchorRect:i,contentRect:o,side:xe,align:Se,sideOffset:Ce,alignOffset:we,avoidCollisions:Te,collisionPadding:k,allowedSides:oe});s={x:e.x,y:e.y},c=e.side}let u=O===`item-aligned`?`center`:Se,d=n({side:c,align:u,anchorRect:l,popupX:s.x,popupY:s.y});Ee?(e.style.position=`fixed`,e.style.top=`0px`,e.style.left=`0px`,e.style.transform=`translate3d(${s.x}px, ${s.y}px, 0)`):(e.style.position=`absolute`,e.style.top=`0px`,e.style.left=`0px`,e.style.transform=`translate3d(${s.x+r.scrollX}px, ${s.y+r.scrollY}px, 0)`),e.style.setProperty(`--transform-origin`,d),e.style.willChange=`transform`,e.style.margin=`0`,Ve(),C.setAttribute(`data-side`,c),C.setAttribute(`data-align`,u),e!==C&&(e.setAttribute(`data-side`,c),e.setAttribute(`data-align`,u))},J=a({observedElements:[S,C],isActive:()=>A,ancestorScroll:Ee,onUpdate:Je,ignoreScrollTarget:e=>e instanceof Node&&C.contains(e)}),Y=(e,t=!0,n=!0)=>{let r=Le();for(let i=0;i<H.length;i++){let a=H[i];i===e?(a.setAttribute(`data-highlighted`,``),n&&l(a,r),t&&a.focus()):a.removeAttribute(`data-highlighted`)}N=e},Ye=()=>{for(let e of V)e.removeAttribute(`data-highlighted`);N=-1},Xe=()=>{Ye(),u(C)},Ze=e=>{g.setAttribute(`data-state`,e),S.setAttribute(`data-state`,e),C.setAttribute(`data-state`,e),e===`open`?(g.setAttribute(`data-open`,``),S.setAttribute(`data-open`,``),C.setAttribute(`data-open`,``),g.removeAttribute(`data-closed`),S.removeAttribute(`data-closed`),C.removeAttribute(`data-closed`)):(g.setAttribute(`data-closed`,``),S.setAttribute(`data-closed`,``),C.setAttribute(`data-closed`,``),g.removeAttribute(`data-open`),S.removeAttribute(`data-open`),C.removeAttribute(`data-open`))},Qe=()=>{requestAnimationFrame(()=>{M&&document.contains(M)?u(M):S&&document.contains(S)&&u(S),M=null})},$e=()=>{ke||(K.restore(),C.hidden=!0,Ae?Qe():M=null)},X=o({element:C,onExitComplete:$e}),et=()=>{w&&(j===null?(w.textContent=me,S.setAttribute(`data-placeholder`,``)):(w.textContent=Be(V.find(e=>e.dataset.value===j),j),S.removeAttribute(`data-placeholder`)))},Z=(e,t={})=>{let{skipFocusRestore:n=!1,immediate:r=!1}=t;if(A!==e&&!(E&&e)){if(e){let e=z;z=!1,Ae=!0,M=document.activeElement,A=!0,y(S,`expanded`,!0),K.mount(),C.hidden=!1,Ze(`open`),X.enter(),Ee&&!G&&(te(),G=!0),Fe(),I=!1;let t=H.findIndex(e=>e.dataset.value===j);t>=0?Y(t,!1,!1):Ye(),J.start(),Je(),J.update(),requestAnimationFrame(()=>{if(A&&(Je(),J.update(),e&&De&&Oe!==`touch`&&(L!==0||R!==0))){let e=document.elementFromPoint(L,R)?.closest?.(`[data-slot="select-item"]`);if(e&&!q(e)&&C.contains(e)){let t=U.get(e);t!==void 0&&Y(t,!0,!1)}}}),C.focus()}else A=!1,z=!1,L=0,R=0,Oe=``,y(S,`expanded`,!1),Ze(`closed`),Ye(),P=``,I=!1,Ae=!n,G&&=(ae(),!1),J.stop(),r?(X.cleanup(),$e()):X.exit();s(g,`select:open-change`,{open:A}),ve?.(A)}},Q=(e,t=!1)=>{if(j===e&&!t)return;let n=j;j=e,W&&(W.value=e??``),e===null?g.removeAttribute(`data-value`):g.setAttribute(`data-value`,e);for(let t of V)t.dataset.value===e?(y(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(y(t,`selected`,!1),t.removeAttribute(`data-selected`));et(),!t&&n!==e&&(s(g,`select:change`,{value:e}),_e?.(e))},tt=e=>{if(q(e))return;let t=e.dataset.value;t!==void 0&&(Q(t),Z(!1,{immediate:!0}))},nt=e=>{let t=H.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),I=!0,Y(N===-1?0:Math.min(N+1,t-1));break;case`ArrowUp`:e.preventDefault(),I=!0,Y(N===-1?t-1:Math.max(N-1,0));break;case`Home`:e.preventDefault(),I=!0,Y(0);break;case`End`:e.preventDefault(),I=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),N>=0&&tt(H[N]);break;case`Tab`:Z(!1,{skipFocusRestore:!0});break;case`Escape`:e.preventDefault(),Z(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),rt(e.key.toLowerCase()))}},rt=e=>{F&&clearTimeout(F),F=setTimeout(()=>{P=``},500),P+=e;let t=H.findIndex(e=>Be(e).toLowerCase().startsWith(P));if(t===-1&&P.length===1){let n=N+1;for(let r=0;r<H.length;r++){let i=(n+r)%H.length;if(Be(H[i]).toLowerCase().startsWith(e)){t=i;break}}}t!==-1&&(I=!0,Y(t))};y(S,`expanded`,!1),C.hidden=!0,Ve(),Ze(`closed`),Fe(),Q(j,!0),B.push(v(S,`pointerdown`,e=>{L=e.clientX,R=e.clientY,Oe=e.pointerType,z=!0}),v(S,`click`,()=>{E||Z(!A)}),v(S,`keydown`,e=>{if(!E)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),z=!1,Z(!0);break}})),B.push(v(C,`keydown`,nt),v(C,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&tt(t)}),v(C,`pointermove`,e=>{if(!De||!je(e))return;let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(I&&(I=!1,t&&U.get(t)===N)))if(t&&!q(t)){let e=U.get(t);e!==void 0&&e!==N&&Y(e,!0)}else Xe()}),v(C,`pointerleave`,e=>{!De||!je(e)||I||Xe()})),B.push(r({root:g,isOpen:()=>A,onDismiss:()=>Z(!1),closeOnClickOutside:!0,closeOnEscape:!1})),B.push(v(g,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open)}));let $={get value(){return j},get isOpen(){return A},select:e=>Q(e),open:()=>Z(!0),close:()=>Z(!1),destroy:()=>{ke=!0,F&&clearTimeout(F),J.stop(),X.cleanup(),K.cleanup(),G&&=(ae(),!1),B.forEach(e=>e()),B.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),e(g,b,$)}};return ie(g,b,$),pe&&Z(!0),$}function S(e=document){let t=[];for(let n of g(e,`select`))_(n,b)||t.push(x(n));return t}export{S as create,x as createSelect};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/select",
-  "version": "0.2.137",
+  "version": "0.2.138",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -36,6 +36,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.137"
+    "@data-slot/core": "0.2.138"
   }
 }