@data-slot/combobox 0.2.98 → 0.2.99

package/README.md

@@ -64,6 +64,7 @@ controller.destroy();
 | `combobox` | Root container |
 | `combobox-input` | Text input for filtering |
 | `combobox-trigger` | Optional button that toggles the popup |
+| `combobox-clear` | Optional button that clears the current value and focuses input |
 | `combobox-value` | Optional selected-value text target (typically inside `combobox-trigger`) |
 | `combobox-content` | Popup container |
 | `combobox-list` | Scrollable list wrapper |
@@ -110,6 +111,22 @@ In popup-input mode (`combobox-input` inside `combobox-content`):
 - Search input is cleared each time the popup opens.
 - Closing keeps the popup input empty.
 
+### Clear Button (Optional)
+
+```html
+<div data-slot="combobox">
+  <input data-slot="combobox-input" />
+  <button data-slot="combobox-clear">Clear</button>
+  <div data-slot="combobox-content" hidden>...</div>
+</div>
+```
+
+When `combobox-clear` is clicked:
+- Current value is cleared.
+- Input is focused.
+- If popup is closed, it remains closed.
+- If popup is open, it remains open.
+
 ### Native Label Support
 
 Use a standard HTML `<label for="...">` element to label the combobox. The `for` attribute should match the `id` on the input. Clicking the label focuses the input, and `aria-labelledby` is set automatically.

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`];function r(r,a={}){let o=(0,e.getPart)(r,`combobox-input`),s=(0,e.getPart)(r,`combobox-content`),c=(0,e.getPart)(r,`combobox-list`)??(0,e.getPart)(s??r,`combobox-list`),l=(0,e.getPart)(r,`combobox-trigger`),u=(0,e.getPart)(r,`combobox-value`),d=(0,e.getPart)(c??s??r,`combobox-empty`),f=(0,e.getPart)(r,`combobox-positioner`),p=f&&s&&f.contains(s)?f:null,m=(0,e.getPart)(r,`combobox-portal`),ee=m&&p&&m.contains(p)?m:null;if(!o||!s)throw Error(`Combobox requires combobox-input and combobox-content slots`);let h=s.contains(o),g=u?.textContent?.trim()??``,te=a.defaultValue??(0,e.getDataString)(r,`defaultValue`)??null,ne=a.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,_=a.placeholder??(0,e.getDataString)(r,`placeholder`)??``,v=a.disabled??(0,e.getDataBool)(r,`disabled`)??!1,re=a.required??(0,e.getDataBool)(r,`required`)??!1,y=a.name??(0,e.getDataString)(r,`name`)??null,ie=a.openOnFocus??(0,e.getDataBool)(r,`openOnFocus`)??!0,b=a.autoHighlight??(0,e.getDataBool)(r,`autoHighlight`)??!1,ae=a.filter??null,oe=a.onValueChange,se=a.onOpenChange,ce=a.onInputValueChange,x=a.itemToStringValue??null,S=(t,n)=>(0,e.getDataEnum)(s,t,n)??(p?(0,e.getDataEnum)(p,t,n):void 0)??(0,e.getDataEnum)(r,t,n),C=t=>(0,e.getDataNumber)(s,t)??(p?(0,e.getDataNumber)(p,t):void 0)??(0,e.getDataNumber)(r,t),le=t=>(0,e.getDataBool)(s,t)??(p?(0,e.getDataBool)(p,t):void 0)??(0,e.getDataBool)(r,t),ue=a.side??S(`side`,t)??`bottom`,de=a.align??S(`align`,n)??`start`,fe=a.sideOffset??C(`sideOffset`)??4,pe=a.alignOffset??C(`alignOffset`)??0,me=a.avoidCollisions??le(`avoidCollisions`)??!0,he=a.collisionPadding??C(`collisionPadding`)??8,w=!1,T=te,E=-1,D=!1,O=[],k=r.ownerDocument??document,A=k.defaultView??window,ge=r,j=-1/0,M=!1,N=[],P=[],F=[],I=new Map,L=null,R=(0,e.createPortalLifecycle)({content:s,root:r,wrapperSlot:p?void 0:`combobox-positioner`,container:p??void 0,mountTarget:p?ee??p:void 0}),z=!1,B=e=>typeof A.matchMedia==`function`?A.matchMedia(e).matches:!1,V=(()=>{let e=typeof A.navigator.maxTouchPoints==`number`?A.navigator.maxTouchPoints:0,t=B(`(pointer: coarse)`),n=B(`(hover: none)`);return t||e>0&&n})(),H=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,U=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},W=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,_e=t=>t===null?null:(0,e.getParts)(c??s,`combobox-item`).find(e=>W(e)===t)??null,G=e=>{let t=_e(e);return x?x(t,e):t?U(t):``},ve=(0,e.ensureId)(o,`combobox-input`),ye=c??s,be=(0,e.ensureId)(ye,`combobox-list`);o.setAttribute(`role`,`combobox`),o.setAttribute(`aria-autocomplete`,`list`),o.setAttribute(`autocomplete`,`off`),o.setAttribute(`aria-controls`,be),c?c.setAttribute(`role`,`listbox`):s.setAttribute(`role`,`listbox`),l&&(l.hasAttribute(`type`)||l.setAttribute(`type`,`button`),l.tabIndex=-1,l.setAttribute(`aria-label`,`Toggle`));let xe=document.querySelector(`label[for="${CSS.escape(ve)}"]`);if(xe){let t=(0,e.ensureId)(xe,`combobox-label`),n=o.getAttribute(`aria-labelledby`);o.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),ye.setAttribute(`aria-labelledby`,t)}v&&(o.setAttribute(`aria-disabled`,`true`),o.disabled=!0,l&&(l.setAttribute(`aria-disabled`,`true`),l.setAttribute(`data-disabled`,``))),re&&(o.setAttribute(`aria-required`,`true`),o.required=!0);let Se=()=>{re&&o.setCustomValidity(T===null?`Please select a value`:``)};_&&(o.placeholder=_),u&&(u.textContent=g||_,u.textContent.trim().length>0&&(u.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``))),y&&(o.name&&o.removeAttribute(`name`),L=document.createElement(`input`),L.type=`hidden`,L.name=y,L.value=T??``,r.appendChild(L));let Ce=ae??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),we=()=>{let t=c??s;N=(0,e.getParts)(t,`combobox-item`);for(let t of N)t.setAttribute(`role`,`option`),(0,e.ensureId)(t,`combobox-item`),H(t)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),W(t)===T?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));let n=(0,e.getParts)(t,`combobox-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=(0,e.getPart)(t,`combobox-label`);if(n){let r=(0,e.ensureId)(n,`combobox-label`);t.setAttribute(`aria-labelledby`,r)}}Te()},Te=()=>{P=N.filter(e=>!e.hidden),F=P.filter(e=>!H(e)),I=new Map(F.map((e,t)=>[e,t]))},Ee=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},De=t=>{let n=c??s,r=t.trim(),i=0;for(let e of N){let t=W(e)??``,n=U(e),a=r===``||Ce(r,t,n);e.hidden=!a,a&&i++}let a=(0,e.getParts)(n,`combobox-group`);for(let t of a)t.hidden=!(0,e.getParts)(t,`combobox-item`).some(e=>!e.hidden);let o=(0,e.getParts)(n,`combobox-separator`);for(let e of o)e.hidden=!Ee(e,`previous`)||!Ee(e,`next`);d&&(d.hidden=i>0),i===0?s.setAttribute(`data-empty`,``):s.removeAttribute(`data-empty`),Te()},Oe=()=>{let n=R.container,r=V?`bottom`:ue,i=V?!1:me,a=ge.getBoundingClientRect();s.style.minWidth=`${a.width}px`;let o=(0,e.computeFloatingPosition)({anchorRect:a,contentRect:(0,e.measurePopupContentRect)(s),side:r,align:de,sideOffset:fe,alignOffset:pe,avoidCollisions:i,collisionPadding:he,allowedSides:t}),c=(0,e.computeFloatingTransformOrigin)({side:o.side,align:o.align,anchorRect:a,popupX:o.x,popupY:o.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${o.x+A.scrollX}px, ${o.y+A.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,c),n.style.willChange=`transform`,n.style.margin=`0`,s.setAttribute(`data-side`,o.side),s.setAttribute(`data-align`,o.align),n!==s&&(n.setAttribute(`data-side`,o.side),n.setAttribute(`data-align`,o.align))},K=(0,e.createPositionSync)({observedElements:[r,s],isActive:()=>w,ancestorScroll:!0,onUpdate:Oe,ignoreScrollTarget:e=>e instanceof Node&&s.contains(e)}),ke=e=>c&&c.contains(e)&&c.scrollHeight>c.clientHeight?c:s,q=t=>{for(let e of N)e.removeAttribute(`data-highlighted`);let n=F[t];if(!n){E=-1,o.removeAttribute(`aria-activedescendant`);return}n.setAttribute(`data-highlighted`,``),o.setAttribute(`aria-activedescendant`,n.id),(0,e.ensureItemVisibleInContainer)(n,ke(n)),E=t},J=()=>{for(let e of N)e.removeAttribute(`data-highlighted`);E=-1,o.removeAttribute(`aria-activedescendant`)},Y=e=>{r.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),l&&l.setAttribute(`data-state`,e),e===`open`?(r.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),l&&l.setAttribute(`data-open`,``),r.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),l&&l.removeAttribute(`data-closed`)):(r.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),l&&l.setAttribute(`data-closed`,``),r.removeAttribute(`data-open`),s.removeAttribute(`data-open`),l&&l.removeAttribute(`data-open`))},X=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{z||(R.restore(),s.hidden=!0)}}),Z=(t,n=!1)=>{if(w!==t&&!(v&&t)){if(t){w=!0,(0,e.setAria)(o,`expanded`,!0),R.mount(),s.hidden=!1,Y(`open`),X.enter(),we(),D=!1,h&&(o.value=``),De(o.value);let t=F.findIndex(e=>W(e)===T);t>=0?q(t):J(),K.start(),Oe(),K.update(),requestAnimationFrame(()=>{w&&K.update()})}else w=!1,(0,e.setAria)(o,`expanded`,!1),Y(`closed`),J(),D=!1,K.stop(),X.exit(),h?o.value=``:o.value=G(T);(0,e.emit)(r,`combobox:open-change`,{open:w}),se?.(w)}},Q=(t,n=!1)=>{if(T===t&&!n)return;let i=T;T=t,Se(),L&&(L.value=t??``),t===null?r.removeAttribute(`data-value`):r.setAttribute(`data-value`,t);let a=c??s,d=N.length>0?N:(0,e.getParts)(a,`combobox-item`);for(let n of d)W(n)===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));let f=G(t);h||(o.value=f),u?t===null?(u.textContent=g||_,(u.textContent??``).trim().length>0?(u.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``)):(u.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`))):(u.textContent=f,u.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`)):l&&(t===null?l.setAttribute(`data-placeholder`,``):l.removeAttribute(`data-placeholder`)),!n&&i!==t&&((0,e.emit)(r,`combobox:change`,{value:t}),oe?.(t))},$=e=>{if(H(e))return;let t=W(e);t!==void 0&&(Q(t),Z(!1))};return(0,e.setAria)(o,`expanded`,!1),s.hidden=!0,Y(`closed`),Q(T,!0),O.push((0,e.on)(k,`keydown`,e=>{e.key===`Tab`&&(j=Date.now())},{capture:!0}),(0,e.on)(o,`pointerdown`,()=>{M=!0}),(0,e.on)(o,`input`,()=>{let t=o.value,n=t.trim()!==``;(0,e.emit)(r,`combobox:input-change`,{inputValue:t}),ce?.(t),w?(De(t),b&&n&&F.length>0?q(0):J(),K.update()):(Z(!0),b&&n&&F.length>0?q(0):E!==-1&&J())}),(0,e.on)(o,`keydown`,e=>{if(!v)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!w){Z(!0),b&&F.length>0&&q(0);return}D=!0;let t=F.length;if(t===0)return;q(E===-1?0:(E+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!w){Z(!0),b&&F.length>0&&q(F.length-1);return}D=!0;let t=F.length;if(t===0)return;q(E===-1?t-1:(E-1+t)%t);break}case`Home`:if(!w)return;e.preventDefault(),D=!0,F.length>0&&q(0);break;case`End`:if(!w)return;e.preventDefault(),D=!0,F.length>0&&q(F.length-1);break;case`Enter`:if(!w)return;e.preventDefault(),E>=0&&E<F.length&&$(F[E]);break;case`Escape`:w?(e.preventDefault(),Z(!1)):T!==null&&(e.preventDefault(),Q(null));break;case`Tab`:w&&Z(!1,!0);break}}),(0,e.on)(o,`focus`,()=>{if(v)return;V||o.select();let e=M||Date.now()-j<=750;M=!1,ie&&!w&&e&&Z(!0)})),l&&O.push((0,e.on)(l,`click`,()=>{v||(w?Z(!1):(Z(!0),o.focus()))})),O.push((0,e.on)(s,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&$(t)}),(0,e.on)(s,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(D&&(D=!1,t&&I.get(t)===E)))if(t&&!H(t)&&!t.hidden){let e=I.get(t);e!==void 0&&e!==E&&q(e)}else J()}),(0,e.on)(s,`pointerleave`,()=>{D||J()}),(0,e.on)(s,`mousedown`,e=>{e.preventDefault()})),O.push((0,e.createDismissLayer)({root:r,isOpen:()=>w,onDismiss:()=>Z(!1),closeOnClickOutside:!V,closeOnEscape:!1})),V&&O.push((0,e.on)(k,`click`,t=>{if(!w)return;let n=t.target;(0,e.containsWithPortals)(r,n)||Z(!1)},{capture:!0})),O.push((0,e.on)(r,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open),t?.inputValue!==void 0&&(o.value=t.inputValue),t?.itemToStringValue!==void 0&&(x=t.itemToStringValue,Q(T,!0))})),ne&&Z(!0),{get value(){return T},get inputValue(){return o.value},get isOpen(){return w},select:e=>Q(e),clear:()=>Q(null),open:()=>Z(!0),close:()=>Z(!1),setItemToStringValue:e=>{x=e,Q(T,!0)},destroy:()=>{z=!0,K.stop(),X.cleanup(),R.cleanup(),O.forEach(e=>e()),O.length=0,L&&L.parentNode&&L.parentNode.removeChild(L),i.delete(r)}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`combobox`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createCombobox=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`bottom`],n=[`start`,`center`,`end`];function r(r,a={}){let o=(0,e.getPart)(r,`combobox-input`),s=(0,e.getPart)(r,`combobox-content`),c=(0,e.getPart)(r,`combobox-list`)??(0,e.getPart)(s??r,`combobox-list`),l=(0,e.getPart)(r,`combobox-trigger`),u=(0,e.getPart)(r,`combobox-clear`),d=(0,e.getPart)(r,`combobox-value`),f=(0,e.getPart)(c??s??r,`combobox-empty`),p=(0,e.getPart)(r,`combobox-positioner`),m=p&&s&&p.contains(s)?p:null,h=(0,e.getPart)(r,`combobox-portal`),ee=h&&m&&h.contains(m)?h:null;if(!o||!s)throw Error(`Combobox requires combobox-input and combobox-content slots`);let g=s.contains(o),te=d?.textContent?.trim()??``,ne=a.defaultValue??(0,e.getDataString)(r,`defaultValue`)??null,re=a.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,_=a.placeholder??(0,e.getDataString)(r,`placeholder`)??``,v=a.disabled??(0,e.getDataBool)(r,`disabled`)??!1,ie=a.required??(0,e.getDataBool)(r,`required`)??!1,ae=a.name??(0,e.getDataString)(r,`name`)??null,oe=a.openOnFocus??(0,e.getDataBool)(r,`openOnFocus`)??!0,y=a.autoHighlight??(0,e.getDataBool)(r,`autoHighlight`)??!1,se=a.filter??null,ce=a.onValueChange,le=a.onOpenChange,ue=a.onInputValueChange,b=a.itemToStringValue??null,x=(t,n)=>(0,e.getDataEnum)(s,t,n)??(m?(0,e.getDataEnum)(m,t,n):void 0)??(0,e.getDataEnum)(r,t,n),S=t=>(0,e.getDataNumber)(s,t)??(m?(0,e.getDataNumber)(m,t):void 0)??(0,e.getDataNumber)(r,t),de=t=>(0,e.getDataBool)(s,t)??(m?(0,e.getDataBool)(m,t):void 0)??(0,e.getDataBool)(r,t),fe=a.side??x(`side`,t)??`bottom`,pe=a.align??x(`align`,n)??`start`,me=a.sideOffset??S(`sideOffset`)??4,he=a.alignOffset??S(`alignOffset`)??0,ge=a.avoidCollisions??de(`avoidCollisions`)??!0,_e=a.collisionPadding??S(`collisionPadding`)??8,C=!1,w=ne,T=-1,E=!1,D=[],O=r.ownerDocument??document,k=O.defaultView??window,ve=r,A=-1/0,j=!1,M=!1,N=[],P=[],F=[],I=new Map,L=null,R=(0,e.createPortalLifecycle)({content:s,root:r,wrapperSlot:m?void 0:`combobox-positioner`,container:m??void 0,mountTarget:m?ee??m:void 0}),z=!1,B=e=>typeof k.matchMedia==`function`?k.matchMedia(e).matches:!1,V=(()=>{let e=typeof k.navigator.maxTouchPoints==`number`?k.navigator.maxTouchPoints:0,t=B(`(pointer: coarse)`),n=B(`(hover: none)`);return t||e>0&&n})(),H=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,U=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},W=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,ye=t=>t===null?null:(0,e.getParts)(c??s,`combobox-item`).find(e=>W(e)===t)??null,be=e=>{let t=ye(e);return b?b(t,e):t?U(t):``},xe=(0,e.ensureId)(o,`combobox-input`),Se=c??s,Ce=(0,e.ensureId)(Se,`combobox-list`);o.setAttribute(`role`,`combobox`),o.setAttribute(`aria-autocomplete`,`list`),o.setAttribute(`autocomplete`,`off`),o.setAttribute(`aria-controls`,Ce),c?c.setAttribute(`role`,`listbox`):s.setAttribute(`role`,`listbox`),l&&(l.hasAttribute(`type`)||l.setAttribute(`type`,`button`),l.tabIndex=-1,l.setAttribute(`aria-label`,`Toggle`)),u instanceof HTMLButtonElement&&!u.hasAttribute(`type`)&&u.setAttribute(`type`,`button`);let we=document.querySelector(`label[for="${CSS.escape(xe)}"]`);if(we){let t=(0,e.ensureId)(we,`combobox-label`),n=o.getAttribute(`aria-labelledby`);o.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),Se.setAttribute(`aria-labelledby`,t)}v&&(o.setAttribute(`aria-disabled`,`true`),o.disabled=!0,l&&(l.setAttribute(`aria-disabled`,`true`),l.setAttribute(`data-disabled`,``))),ie&&(o.setAttribute(`aria-required`,`true`),o.required=!0);let Te=()=>{ie&&o.setCustomValidity(w===null?`Please select a value`:``)};_&&(o.placeholder=_),d&&(d.textContent=te||_,d.textContent.trim().length>0&&(d.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``))),ae&&(o.name&&o.removeAttribute(`name`),L=document.createElement(`input`),L.type=`hidden`,L.name=ae,L.value=w??``,r.appendChild(L));let Ee=se??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),De=()=>{let t=c??s;N=(0,e.getParts)(t,`combobox-item`);for(let t of N)t.setAttribute(`role`,`option`),(0,e.ensureId)(t,`combobox-item`),H(t)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),W(t)===w?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));let n=(0,e.getParts)(t,`combobox-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=(0,e.getPart)(t,`combobox-label`);if(n){let r=(0,e.ensureId)(n,`combobox-label`);t.setAttribute(`aria-labelledby`,r)}}Oe()},Oe=()=>{P=N.filter(e=>!e.hidden),F=P.filter(e=>!H(e)),I=new Map(F.map((e,t)=>[e,t]))},ke=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},G=t=>{let n=c??s,r=t.trim(),i=0;for(let e of N){let t=W(e)??``,n=U(e),a=r===``||Ee(r,t,n);e.hidden=!a,a&&i++}let a=(0,e.getParts)(n,`combobox-group`);for(let t of a)t.hidden=!(0,e.getParts)(t,`combobox-item`).some(e=>!e.hidden);let o=(0,e.getParts)(n,`combobox-separator`);for(let e of o)e.hidden=!ke(e,`previous`)||!ke(e,`next`);f&&(f.hidden=i>0),i===0?s.setAttribute(`data-empty`,``):s.removeAttribute(`data-empty`),Oe()},K=()=>{let n=R.container,r=V?`bottom`:fe,i=V?!1:ge,a=ve.getBoundingClientRect();s.style.minWidth=`${a.width}px`;let o=(0,e.computeFloatingPosition)({anchorRect:a,contentRect:(0,e.measurePopupContentRect)(s),side:r,align:pe,sideOffset:me,alignOffset:he,avoidCollisions:i,collisionPadding:_e,allowedSides:t}),c=(0,e.computeFloatingTransformOrigin)({side:o.side,align:o.align,anchorRect:a,popupX:o.x,popupY:o.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${o.x+k.scrollX}px, ${o.y+k.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,c),n.style.willChange=`transform`,n.style.margin=`0`,s.setAttribute(`data-side`,o.side),s.setAttribute(`data-align`,o.align),n!==s&&(n.setAttribute(`data-side`,o.side),n.setAttribute(`data-align`,o.align))},q=(0,e.createPositionSync)({observedElements:[r,s],isActive:()=>C,ancestorScroll:!0,onUpdate:K,ignoreScrollTarget:e=>e instanceof Node&&s.contains(e)}),Ae=e=>c&&c.contains(e)&&c.scrollHeight>c.clientHeight?c:s,J=t=>{for(let e of N)e.removeAttribute(`data-highlighted`);let n=F[t];if(!n){T=-1,o.removeAttribute(`aria-activedescendant`);return}n.setAttribute(`data-highlighted`,``),o.setAttribute(`aria-activedescendant`,n.id),(0,e.ensureItemVisibleInContainer)(n,Ae(n)),T=t},Y=()=>{for(let e of N)e.removeAttribute(`data-highlighted`);T=-1,o.removeAttribute(`aria-activedescendant`)},X=e=>{r.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),l&&l.setAttribute(`data-state`,e),e===`open`?(r.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),l&&l.setAttribute(`data-open`,``),r.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),l&&l.removeAttribute(`data-closed`)):(r.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),l&&l.setAttribute(`data-closed`,``),r.removeAttribute(`data-open`),s.removeAttribute(`data-open`),l&&l.removeAttribute(`data-open`))},Z=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{z||(R.restore(),s.hidden=!0)}}),Q=(t,n=!1)=>{if(C!==t&&!(v&&t)){if(t){C=!0,(0,e.setAria)(o,`expanded`,!0),R.mount(),s.hidden=!1,X(`open`),Z.enter(),De(),E=!1,g&&(o.value=``),G(o.value);let t=F.findIndex(e=>W(e)===w);t>=0?J(t):Y(),q.start(),K(),q.update(),requestAnimationFrame(()=>{C&&q.update()})}else C=!1,(0,e.setAria)(o,`expanded`,!1),X(`closed`),Y(),E=!1,q.stop(),Z.exit(),g?o.value=``:o.value=be(w);(0,e.emit)(r,`combobox:open-change`,{open:C}),le?.(C)}},$=(t,n=!1)=>{if(w===t&&!n)return;let i=w;w=t,Te(),L&&(L.value=t??``),t===null?r.removeAttribute(`data-value`):r.setAttribute(`data-value`,t);let a=c??s,u=N.length>0?N:(0,e.getParts)(a,`combobox-item`);for(let n of u)W(n)===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));let f=be(t);g||(o.value=f),d?t===null?(d.textContent=te||_,(d.textContent??``).trim().length>0?(d.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``)):(d.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`))):(d.textContent=f,d.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`)):l&&(t===null?l.setAttribute(`data-placeholder`,``):l.removeAttribute(`data-placeholder`)),!n&&i!==t&&((0,e.emit)(r,`combobox:change`,{value:t}),ce?.(t))},je=e=>{if(H(e))return;let t=W(e);t!==void 0&&($(t),Q(!1))},Me=()=>{if(v||o.readOnly||u&&(u.hasAttribute(`disabled`)||u.getAttribute(`aria-disabled`)===`true`))return;$(null),o.value=``,Y(),C&&(G(o.value),q.update());let e=O.activeElement!==o;M=e,o.focus(),e||(M=!1)};return(0,e.setAria)(o,`expanded`,!1),s.hidden=!0,X(`closed`),$(w,!0),D.push((0,e.on)(O,`keydown`,e=>{e.key===`Tab`&&(A=Date.now())},{capture:!0}),(0,e.on)(o,`pointerdown`,()=>{j=!0}),(0,e.on)(o,`input`,()=>{let t=o.value,n=t.trim()!==``;(0,e.emit)(r,`combobox:input-change`,{inputValue:t}),ue?.(t),C?(G(t),y&&n&&F.length>0?J(0):Y(),q.update()):(Q(!0),y&&n&&F.length>0?J(0):T!==-1&&Y())}),(0,e.on)(o,`keydown`,e=>{if(!v)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!C){Q(!0),y&&F.length>0&&J(0);return}E=!0;let t=F.length;if(t===0)return;J(T===-1?0:(T+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!C){Q(!0),y&&F.length>0&&J(F.length-1);return}E=!0;let t=F.length;if(t===0)return;J(T===-1?t-1:(T-1+t)%t);break}case`Home`:if(!C)return;e.preventDefault(),E=!0,F.length>0&&J(0);break;case`End`:if(!C)return;e.preventDefault(),E=!0,F.length>0&&J(F.length-1);break;case`Enter`:if(!C)return;e.preventDefault(),T>=0&&T<F.length&&je(F[T]);break;case`Escape`:C?(e.preventDefault(),Q(!1)):w!==null&&(e.preventDefault(),$(null));break;case`Tab`:C&&Q(!1,!0);break}}),(0,e.on)(o,`focus`,()=>{if(v)return;if(M){M=!1,j=!1;return}V||o.select();let e=j||Date.now()-A<=750;j=!1,oe&&!C&&e&&Q(!0)})),l&&D.push((0,e.on)(l,`click`,()=>{v||(C?Q(!1):(Q(!0),o.focus()))})),u&&D.push((0,e.on)(u,`mousedown`,e=>{e.preventDefault()}),(0,e.on)(u,`click`,()=>{Me()})),D.push((0,e.on)(s,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&je(t)}),(0,e.on)(s,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(E&&(E=!1,t&&I.get(t)===T)))if(t&&!H(t)&&!t.hidden){let e=I.get(t);e!==void 0&&e!==T&&J(e)}else Y()}),(0,e.on)(s,`pointerleave`,()=>{E||Y()}),(0,e.on)(s,`mousedown`,e=>{e.preventDefault()})),D.push((0,e.createDismissLayer)({root:r,isOpen:()=>C,onDismiss:()=>Q(!1),closeOnClickOutside:!V,closeOnEscape:!1})),V&&D.push((0,e.on)(O,`click`,t=>{if(!C)return;let n=t.target;(0,e.containsWithPortals)(r,n)||Q(!1)},{capture:!0})),D.push((0,e.on)(r,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open),t?.inputValue!==void 0&&(o.value=t.inputValue),t?.itemToStringValue!==void 0&&(b=t.itemToStringValue,$(w,!0))})),re&&Q(!0),{get value(){return w},get inputValue(){return o.value},get isOpen(){return C},select:e=>$(e),clear:()=>$(null),open:()=>Q(!0),close:()=>Q(!1),setItemToStringValue:e=>{b=e,$(w,!0)},destroy:()=>{z=!0,q.stop(),Z.cleanup(),R.cleanup(),D.forEach(e=>e()),D.length=0,L&&L.parentNode&&L.parentNode.removeChild(L),i.delete(r)}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`combobox`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createCombobox=r;

package/dist/index.js

@@ -1 +1 @@
-import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,containsWithPortals as n,createDismissLayer as r,createPortalLifecycle as i,createPositionSync as a,createPresenceLifecycle as o,emit as s,ensureId as c,ensureItemVisibleInContainer as ee,getDataBool as l,getDataEnum as u,getDataNumber as d,getDataString as te,getPart as f,getParts as p,getRoots as m,measurePopupContentRect as ne,on as h,setAria as g}from"@data-slot/core";const re=[`top`,`bottom`],ie=[`start`,`center`,`end`];function _(m,_={}){let y=f(m,`combobox-input`),b=f(m,`combobox-content`),x=f(m,`combobox-list`)??f(b??m,`combobox-list`),S=f(m,`combobox-trigger`),C=f(m,`combobox-value`),ae=f(x??b??m,`combobox-empty`),w=f(m,`combobox-positioner`),T=w&&b&&w.contains(b)?w:null,E=f(m,`combobox-portal`),oe=E&&T&&E.contains(T)?E:null;if(!y||!b)throw Error(`Combobox requires combobox-input and combobox-content slots`);let D=b.contains(y),se=C?.textContent?.trim()??``,ce=_.defaultValue??te(m,`defaultValue`)??null,le=_.defaultOpen??l(m,`defaultOpen`)??!1,O=_.placeholder??te(m,`placeholder`)??``,k=_.disabled??l(m,`disabled`)??!1,ue=_.required??l(m,`required`)??!1,de=_.name??te(m,`name`)??null,fe=_.openOnFocus??l(m,`openOnFocus`)??!0,A=_.autoHighlight??l(m,`autoHighlight`)??!1,pe=_.filter??null,me=_.onValueChange,he=_.onOpenChange,ge=_.onInputValueChange,j=_.itemToStringValue??null,_e=(e,t)=>u(b,e,t)??(T?u(T,e,t):void 0)??u(m,e,t),M=e=>d(b,e)??(T?d(T,e):void 0)??d(m,e),ve=e=>l(b,e)??(T?l(T,e):void 0)??l(m,e),ye=_.side??_e(`side`,re)??`bottom`,be=_.align??_e(`align`,ie)??`start`,xe=_.sideOffset??M(`sideOffset`)??4,Se=_.alignOffset??M(`alignOffset`)??0,Ce=_.avoidCollisions??ve(`avoidCollisions`)??!0,we=_.collisionPadding??M(`collisionPadding`)??8,N=!1,P=ce,F=-1,I=!1,L=[],R=m.ownerDocument??document,z=R.defaultView??window,Te=m,Ee=-1/0,B=!1,V=[],De=[],H=[],U=new Map,W=null,G=i({content:b,root:m,wrapperSlot:T?void 0:`combobox-positioner`,container:T??void 0,mountTarget:T?oe??T:void 0}),Oe=!1,ke=e=>typeof z.matchMedia==`function`?z.matchMedia(e).matches:!1,K=(()=>{let e=typeof z.navigator.maxTouchPoints==`number`?z.navigator.maxTouchPoints:0,t=ke(`(pointer: coarse)`),n=ke(`(hover: none)`);return t||e>0&&n})(),q=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,Ae=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},J=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,je=e=>e===null?null:p(x??b,`combobox-item`).find(t=>J(t)===e)??null,Me=e=>{let t=je(e);return j?j(t,e):t?Ae(t):``},Ne=c(y,`combobox-input`),Pe=x??b,Fe=c(Pe,`combobox-list`);y.setAttribute(`role`,`combobox`),y.setAttribute(`aria-autocomplete`,`list`),y.setAttribute(`autocomplete`,`off`),y.setAttribute(`aria-controls`,Fe),x?x.setAttribute(`role`,`listbox`):b.setAttribute(`role`,`listbox`),S&&(S.hasAttribute(`type`)||S.setAttribute(`type`,`button`),S.tabIndex=-1,S.setAttribute(`aria-label`,`Toggle`));let Ie=document.querySelector(`label[for="${CSS.escape(Ne)}"]`);if(Ie){let e=c(Ie,`combobox-label`),t=y.getAttribute(`aria-labelledby`);y.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),Pe.setAttribute(`aria-labelledby`,e)}k&&(y.setAttribute(`aria-disabled`,`true`),y.disabled=!0,S&&(S.setAttribute(`aria-disabled`,`true`),S.setAttribute(`data-disabled`,``))),ue&&(y.setAttribute(`aria-required`,`true`),y.required=!0);let Le=()=>{ue&&y.setCustomValidity(P===null?`Please select a value`:``)};O&&(y.placeholder=O),C&&(C.textContent=se||O,C.textContent.trim().length>0&&(C.setAttribute(`data-placeholder`,``),S?.setAttribute(`data-placeholder`,``))),de&&(y.name&&y.removeAttribute(`name`),W=document.createElement(`input`),W.type=`hidden`,W.name=de,W.value=P??``,m.appendChild(W));let Re=pe??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),ze=()=>{let e=x??b;V=p(e,`combobox-item`);for(let e of V)e.setAttribute(`role`,`option`),c(e,`combobox-item`),q(e)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),J(e)===P?(g(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(g(e,`selected`,!1),e.removeAttribute(`data-selected`));let t=p(e,`combobox-group`);for(let e of t){e.setAttribute(`role`,`group`);let t=f(e,`combobox-label`);if(t){let n=c(t,`combobox-label`);e.setAttribute(`aria-labelledby`,n)}}Be()},Be=()=>{De=V.filter(e=>!e.hidden),H=De.filter(e=>!q(e)),U=new Map(H.map((e,t)=>[e,t]))},Ve=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},He=e=>{let t=x??b,n=e.trim(),r=0;for(let e of V){let t=J(e)??``,i=Ae(e),a=n===``||Re(n,t,i);e.hidden=!a,a&&r++}let i=p(t,`combobox-group`);for(let e of i)e.hidden=!p(e,`combobox-item`).some(e=>!e.hidden);let a=p(t,`combobox-separator`);for(let e of a)e.hidden=!Ve(e,`previous`)||!Ve(e,`next`);ae&&(ae.hidden=r>0),r===0?b.setAttribute(`data-empty`,``):b.removeAttribute(`data-empty`),Be()},Ue=()=>{let n=G.container,r=K?`bottom`:ye,i=K?!1:Ce,a=Te.getBoundingClientRect();b.style.minWidth=`${a.width}px`;let o=e({anchorRect:a,contentRect:ne(b),side:r,align:be,sideOffset:xe,alignOffset:Se,avoidCollisions:i,collisionPadding:we,allowedSides:re}),s=t({side:o.side,align:o.align,anchorRect:a,popupX:o.x,popupY:o.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${o.x+z.scrollX}px, ${o.y+z.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,s),n.style.willChange=`transform`,n.style.margin=`0`,b.setAttribute(`data-side`,o.side),b.setAttribute(`data-align`,o.align),n!==b&&(n.setAttribute(`data-side`,o.side),n.setAttribute(`data-align`,o.align))},Y=a({observedElements:[m,b],isActive:()=>N,ancestorScroll:!0,onUpdate:Ue,ignoreScrollTarget:e=>e instanceof Node&&b.contains(e)}),We=e=>x&&x.contains(e)&&x.scrollHeight>x.clientHeight?x:b,X=e=>{for(let e of V)e.removeAttribute(`data-highlighted`);let t=H[e];if(!t){F=-1,y.removeAttribute(`aria-activedescendant`);return}t.setAttribute(`data-highlighted`,``),y.setAttribute(`aria-activedescendant`,t.id),ee(t,We(t)),F=e},Z=()=>{for(let e of V)e.removeAttribute(`data-highlighted`);F=-1,y.removeAttribute(`aria-activedescendant`)},Ge=e=>{m.setAttribute(`data-state`,e),b.setAttribute(`data-state`,e),S&&S.setAttribute(`data-state`,e),e===`open`?(m.setAttribute(`data-open`,``),b.setAttribute(`data-open`,``),S&&S.setAttribute(`data-open`,``),m.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),S&&S.removeAttribute(`data-closed`)):(m.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),S&&S.setAttribute(`data-closed`,``),m.removeAttribute(`data-open`),b.removeAttribute(`data-open`),S&&S.removeAttribute(`data-open`))},Ke=o({element:b,onExitComplete:()=>{Oe||(G.restore(),b.hidden=!0)}}),Q=(e,t=!1)=>{if(N!==e&&!(k&&e)){if(e){N=!0,g(y,`expanded`,!0),G.mount(),b.hidden=!1,Ge(`open`),Ke.enter(),ze(),I=!1,D&&(y.value=``),He(y.value);let e=H.findIndex(e=>J(e)===P);e>=0?X(e):Z(),Y.start(),Ue(),Y.update(),requestAnimationFrame(()=>{N&&Y.update()})}else N=!1,g(y,`expanded`,!1),Ge(`closed`),Z(),I=!1,Y.stop(),Ke.exit(),D?y.value=``:y.value=Me(P);s(m,`combobox:open-change`,{open:N}),he?.(N)}},$=(e,t=!1)=>{if(P===e&&!t)return;let n=P;P=e,Le(),W&&(W.value=e??``),e===null?m.removeAttribute(`data-value`):m.setAttribute(`data-value`,e);let r=x??b,i=V.length>0?V:p(r,`combobox-item`);for(let t of i)J(t)===e?(g(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(g(t,`selected`,!1),t.removeAttribute(`data-selected`));let a=Me(e);D||(y.value=a),C?e===null?(C.textContent=se||O,(C.textContent??``).trim().length>0?(C.setAttribute(`data-placeholder`,``),S?.setAttribute(`data-placeholder`,``)):(C.removeAttribute(`data-placeholder`),S?.removeAttribute(`data-placeholder`))):(C.textContent=a,C.removeAttribute(`data-placeholder`),S?.removeAttribute(`data-placeholder`)):S&&(e===null?S.setAttribute(`data-placeholder`,``):S.removeAttribute(`data-placeholder`)),!t&&n!==e&&(s(m,`combobox:change`,{value:e}),me?.(e))},qe=e=>{if(q(e))return;let t=J(e);t!==void 0&&($(t),Q(!1))};return g(y,`expanded`,!1),b.hidden=!0,Ge(`closed`),$(P,!0),L.push(h(R,`keydown`,e=>{e.key===`Tab`&&(Ee=Date.now())},{capture:!0}),h(y,`pointerdown`,()=>{B=!0}),h(y,`input`,()=>{let e=y.value,t=e.trim()!==``;s(m,`combobox:input-change`,{inputValue:e}),ge?.(e),N?(He(e),A&&t&&H.length>0?X(0):Z(),Y.update()):(Q(!0),A&&t&&H.length>0?X(0):F!==-1&&Z())}),h(y,`keydown`,e=>{if(!k)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!N){Q(!0),A&&H.length>0&&X(0);return}I=!0;let t=H.length;if(t===0)return;X(F===-1?0:(F+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!N){Q(!0),A&&H.length>0&&X(H.length-1);return}I=!0;let t=H.length;if(t===0)return;X(F===-1?t-1:(F-1+t)%t);break}case`Home`:if(!N)return;e.preventDefault(),I=!0,H.length>0&&X(0);break;case`End`:if(!N)return;e.preventDefault(),I=!0,H.length>0&&X(H.length-1);break;case`Enter`:if(!N)return;e.preventDefault(),F>=0&&F<H.length&&qe(H[F]);break;case`Escape`:N?(e.preventDefault(),Q(!1)):P!==null&&(e.preventDefault(),$(null));break;case`Tab`:N&&Q(!1,!0);break}}),h(y,`focus`,()=>{if(k)return;K||y.select();let e=B||Date.now()-Ee<=750;B=!1,fe&&!N&&e&&Q(!0)})),S&&L.push(h(S,`click`,()=>{k||(N?Q(!1):(Q(!0),y.focus()))})),L.push(h(b,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&qe(t)}),h(b,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(I&&(I=!1,t&&U.get(t)===F)))if(t&&!q(t)&&!t.hidden){let e=U.get(t);e!==void 0&&e!==F&&X(e)}else Z()}),h(b,`pointerleave`,()=>{I||Z()}),h(b,`mousedown`,e=>{e.preventDefault()})),L.push(r({root:m,isOpen:()=>N,onDismiss:()=>Q(!1),closeOnClickOutside:!K,closeOnEscape:!1})),K&&L.push(h(R,`click`,e=>{if(!N)return;let t=e.target;n(m,t)||Q(!1)},{capture:!0})),L.push(h(m,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open),t?.inputValue!==void 0&&(y.value=t.inputValue),t?.itemToStringValue!==void 0&&(j=t.itemToStringValue,$(P,!0))})),le&&Q(!0),{get value(){return P},get inputValue(){return y.value},get isOpen(){return N},select:e=>$(e),clear:()=>$(null),open:()=>Q(!0),close:()=>Q(!1),setItemToStringValue:e=>{j=e,$(P,!0)},destroy:()=>{Oe=!0,Y.stop(),Ke.cleanup(),G.cleanup(),L.forEach(e=>e()),L.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),v.delete(m)}}}const v=new WeakSet;function y(e=document){let t=[];for(let n of m(e,`combobox`))v.has(n)||(v.add(n),t.push(_(n)));return t}export{y as create,_ as createCombobox};
+import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,containsWithPortals as n,createDismissLayer as r,createPortalLifecycle as i,createPositionSync as a,createPresenceLifecycle as o,emit as s,ensureId as c,ensureItemVisibleInContainer as ee,getDataBool as l,getDataEnum as u,getDataNumber as d,getDataString as f,getPart as p,getParts as m,getRoots as h,measurePopupContentRect as te,on as g,setAria as _}from"@data-slot/core";const ne=[`top`,`bottom`],re=[`start`,`center`,`end`];function v(h,v={}){let b=p(h,`combobox-input`),x=p(h,`combobox-content`),S=p(h,`combobox-list`)??p(x??h,`combobox-list`),C=p(h,`combobox-trigger`),w=p(h,`combobox-clear`),T=p(h,`combobox-value`),ie=p(S??x??h,`combobox-empty`),ae=p(h,`combobox-positioner`),E=ae&&x&&ae.contains(x)?ae:null,oe=p(h,`combobox-portal`),se=oe&&E&&oe.contains(E)?oe:null;if(!b||!x)throw Error(`Combobox requires combobox-input and combobox-content slots`);let ce=x.contains(b),le=T?.textContent?.trim()??``,ue=v.defaultValue??f(h,`defaultValue`)??null,de=v.defaultOpen??l(h,`defaultOpen`)??!1,D=v.placeholder??f(h,`placeholder`)??``,O=v.disabled??l(h,`disabled`)??!1,fe=v.required??l(h,`required`)??!1,pe=v.name??f(h,`name`)??null,me=v.openOnFocus??l(h,`openOnFocus`)??!0,k=v.autoHighlight??l(h,`autoHighlight`)??!1,he=v.filter??null,ge=v.onValueChange,_e=v.onOpenChange,ve=v.onInputValueChange,A=v.itemToStringValue??null,ye=(e,t)=>u(x,e,t)??(E?u(E,e,t):void 0)??u(h,e,t),j=e=>d(x,e)??(E?d(E,e):void 0)??d(h,e),be=e=>l(x,e)??(E?l(E,e):void 0)??l(h,e),xe=v.side??ye(`side`,ne)??`bottom`,Se=v.align??ye(`align`,re)??`start`,Ce=v.sideOffset??j(`sideOffset`)??4,we=v.alignOffset??j(`alignOffset`)??0,Te=v.avoidCollisions??be(`avoidCollisions`)??!0,Ee=v.collisionPadding??j(`collisionPadding`)??8,M=!1,N=ue,P=-1,F=!1,I=[],L=h.ownerDocument??document,R=L.defaultView??window,De=h,Oe=-1/0,z=!1,B=!1,V=[],ke=[],H=[],U=new Map,W=null,G=i({content:x,root:h,wrapperSlot:E?void 0:`combobox-positioner`,container:E??void 0,mountTarget:E?se??E:void 0}),Ae=!1,je=e=>typeof R.matchMedia==`function`?R.matchMedia(e).matches:!1,K=(()=>{let e=typeof R.navigator.maxTouchPoints==`number`?R.navigator.maxTouchPoints:0,t=je(`(pointer: coarse)`),n=je(`(hover: none)`);return t||e>0&&n})(),q=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,Me=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},J=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,Ne=e=>e===null?null:m(S??x,`combobox-item`).find(t=>J(t)===e)??null,Pe=e=>{let t=Ne(e);return A?A(t,e):t?Me(t):``},Fe=c(b,`combobox-input`),Ie=S??x,Le=c(Ie,`combobox-list`);b.setAttribute(`role`,`combobox`),b.setAttribute(`aria-autocomplete`,`list`),b.setAttribute(`autocomplete`,`off`),b.setAttribute(`aria-controls`,Le),S?S.setAttribute(`role`,`listbox`):x.setAttribute(`role`,`listbox`),C&&(C.hasAttribute(`type`)||C.setAttribute(`type`,`button`),C.tabIndex=-1,C.setAttribute(`aria-label`,`Toggle`)),w instanceof HTMLButtonElement&&!w.hasAttribute(`type`)&&w.setAttribute(`type`,`button`);let Re=document.querySelector(`label[for="${CSS.escape(Fe)}"]`);if(Re){let e=c(Re,`combobox-label`),t=b.getAttribute(`aria-labelledby`);b.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),Ie.setAttribute(`aria-labelledby`,e)}O&&(b.setAttribute(`aria-disabled`,`true`),b.disabled=!0,C&&(C.setAttribute(`aria-disabled`,`true`),C.setAttribute(`data-disabled`,``))),fe&&(b.setAttribute(`aria-required`,`true`),b.required=!0);let ze=()=>{fe&&b.setCustomValidity(N===null?`Please select a value`:``)};D&&(b.placeholder=D),T&&(T.textContent=le||D,T.textContent.trim().length>0&&(T.setAttribute(`data-placeholder`,``),C?.setAttribute(`data-placeholder`,``))),pe&&(b.name&&b.removeAttribute(`name`),W=document.createElement(`input`),W.type=`hidden`,W.name=pe,W.value=N??``,h.appendChild(W));let Be=he??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),Ve=()=>{let e=S??x;V=m(e,`combobox-item`);for(let e of V)e.setAttribute(`role`,`option`),c(e,`combobox-item`),q(e)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),J(e)===N?(_(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(_(e,`selected`,!1),e.removeAttribute(`data-selected`));let t=m(e,`combobox-group`);for(let e of t){e.setAttribute(`role`,`group`);let t=p(e,`combobox-label`);if(t){let n=c(t,`combobox-label`);e.setAttribute(`aria-labelledby`,n)}}He()},He=()=>{ke=V.filter(e=>!e.hidden),H=ke.filter(e=>!q(e)),U=new Map(H.map((e,t)=>[e,t]))},Ue=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},We=e=>{let t=S??x,n=e.trim(),r=0;for(let e of V){let t=J(e)??``,i=Me(e),a=n===``||Be(n,t,i);e.hidden=!a,a&&r++}let i=m(t,`combobox-group`);for(let e of i)e.hidden=!m(e,`combobox-item`).some(e=>!e.hidden);let a=m(t,`combobox-separator`);for(let e of a)e.hidden=!Ue(e,`previous`)||!Ue(e,`next`);ie&&(ie.hidden=r>0),r===0?x.setAttribute(`data-empty`,``):x.removeAttribute(`data-empty`),He()},Ge=()=>{let n=G.container,r=K?`bottom`:xe,i=K?!1:Te,a=De.getBoundingClientRect();x.style.minWidth=`${a.width}px`;let o=e({anchorRect:a,contentRect:te(x),side:r,align:Se,sideOffset:Ce,alignOffset:we,avoidCollisions:i,collisionPadding:Ee,allowedSides:ne}),s=t({side:o.side,align:o.align,anchorRect:a,popupX:o.x,popupY:o.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${o.x+R.scrollX}px, ${o.y+R.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,s),n.style.willChange=`transform`,n.style.margin=`0`,x.setAttribute(`data-side`,o.side),x.setAttribute(`data-align`,o.align),n!==x&&(n.setAttribute(`data-side`,o.side),n.setAttribute(`data-align`,o.align))},Y=a({observedElements:[h,x],isActive:()=>M,ancestorScroll:!0,onUpdate:Ge,ignoreScrollTarget:e=>e instanceof Node&&x.contains(e)}),Ke=e=>S&&S.contains(e)&&S.scrollHeight>S.clientHeight?S:x,X=e=>{for(let e of V)e.removeAttribute(`data-highlighted`);let t=H[e];if(!t){P=-1,b.removeAttribute(`aria-activedescendant`);return}t.setAttribute(`data-highlighted`,``),b.setAttribute(`aria-activedescendant`,t.id),ee(t,Ke(t)),P=e},Z=()=>{for(let e of V)e.removeAttribute(`data-highlighted`);P=-1,b.removeAttribute(`aria-activedescendant`)},qe=e=>{h.setAttribute(`data-state`,e),x.setAttribute(`data-state`,e),C&&C.setAttribute(`data-state`,e),e===`open`?(h.setAttribute(`data-open`,``),x.setAttribute(`data-open`,``),C&&C.setAttribute(`data-open`,``),h.removeAttribute(`data-closed`),x.removeAttribute(`data-closed`),C&&C.removeAttribute(`data-closed`)):(h.setAttribute(`data-closed`,``),x.setAttribute(`data-closed`,``),C&&C.setAttribute(`data-closed`,``),h.removeAttribute(`data-open`),x.removeAttribute(`data-open`),C&&C.removeAttribute(`data-open`))},Je=o({element:x,onExitComplete:()=>{Ae||(G.restore(),x.hidden=!0)}}),Q=(e,t=!1)=>{if(M!==e&&!(O&&e)){if(e){M=!0,_(b,`expanded`,!0),G.mount(),x.hidden=!1,qe(`open`),Je.enter(),Ve(),F=!1,ce&&(b.value=``),We(b.value);let e=H.findIndex(e=>J(e)===N);e>=0?X(e):Z(),Y.start(),Ge(),Y.update(),requestAnimationFrame(()=>{M&&Y.update()})}else M=!1,_(b,`expanded`,!1),qe(`closed`),Z(),F=!1,Y.stop(),Je.exit(),ce?b.value=``:b.value=Pe(N);s(h,`combobox:open-change`,{open:M}),_e?.(M)}},$=(e,t=!1)=>{if(N===e&&!t)return;let n=N;N=e,ze(),W&&(W.value=e??``),e===null?h.removeAttribute(`data-value`):h.setAttribute(`data-value`,e);let r=S??x,i=V.length>0?V:m(r,`combobox-item`);for(let t of i)J(t)===e?(_(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(_(t,`selected`,!1),t.removeAttribute(`data-selected`));let a=Pe(e);ce||(b.value=a),T?e===null?(T.textContent=le||D,(T.textContent??``).trim().length>0?(T.setAttribute(`data-placeholder`,``),C?.setAttribute(`data-placeholder`,``)):(T.removeAttribute(`data-placeholder`),C?.removeAttribute(`data-placeholder`))):(T.textContent=a,T.removeAttribute(`data-placeholder`),C?.removeAttribute(`data-placeholder`)):C&&(e===null?C.setAttribute(`data-placeholder`,``):C.removeAttribute(`data-placeholder`)),!t&&n!==e&&(s(h,`combobox:change`,{value:e}),ge?.(e))},Ye=e=>{if(q(e))return;let t=J(e);t!==void 0&&($(t),Q(!1))},Xe=()=>{if(O||b.readOnly||w&&(w.hasAttribute(`disabled`)||w.getAttribute(`aria-disabled`)===`true`))return;$(null),b.value=``,Z(),M&&(We(b.value),Y.update());let e=L.activeElement!==b;B=e,b.focus(),e||(B=!1)};return _(b,`expanded`,!1),x.hidden=!0,qe(`closed`),$(N,!0),I.push(g(L,`keydown`,e=>{e.key===`Tab`&&(Oe=Date.now())},{capture:!0}),g(b,`pointerdown`,()=>{z=!0}),g(b,`input`,()=>{let e=b.value,t=e.trim()!==``;s(h,`combobox:input-change`,{inputValue:e}),ve?.(e),M?(We(e),k&&t&&H.length>0?X(0):Z(),Y.update()):(Q(!0),k&&t&&H.length>0?X(0):P!==-1&&Z())}),g(b,`keydown`,e=>{if(!O)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!M){Q(!0),k&&H.length>0&&X(0);return}F=!0;let t=H.length;if(t===0)return;X(P===-1?0:(P+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!M){Q(!0),k&&H.length>0&&X(H.length-1);return}F=!0;let t=H.length;if(t===0)return;X(P===-1?t-1:(P-1+t)%t);break}case`Home`:if(!M)return;e.preventDefault(),F=!0,H.length>0&&X(0);break;case`End`:if(!M)return;e.preventDefault(),F=!0,H.length>0&&X(H.length-1);break;case`Enter`:if(!M)return;e.preventDefault(),P>=0&&P<H.length&&Ye(H[P]);break;case`Escape`:M?(e.preventDefault(),Q(!1)):N!==null&&(e.preventDefault(),$(null));break;case`Tab`:M&&Q(!1,!0);break}}),g(b,`focus`,()=>{if(O)return;if(B){B=!1,z=!1;return}K||b.select();let e=z||Date.now()-Oe<=750;z=!1,me&&!M&&e&&Q(!0)})),C&&I.push(g(C,`click`,()=>{O||(M?Q(!1):(Q(!0),b.focus()))})),w&&I.push(g(w,`mousedown`,e=>{e.preventDefault()}),g(w,`click`,()=>{Xe()})),I.push(g(x,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&Ye(t)}),g(x,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(F&&(F=!1,t&&U.get(t)===P)))if(t&&!q(t)&&!t.hidden){let e=U.get(t);e!==void 0&&e!==P&&X(e)}else Z()}),g(x,`pointerleave`,()=>{F||Z()}),g(x,`mousedown`,e=>{e.preventDefault()})),I.push(r({root:h,isOpen:()=>M,onDismiss:()=>Q(!1),closeOnClickOutside:!K,closeOnEscape:!1})),K&&I.push(g(L,`click`,e=>{if(!M)return;let t=e.target;n(h,t)||Q(!1)},{capture:!0})),I.push(g(h,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open),t?.inputValue!==void 0&&(b.value=t.inputValue),t?.itemToStringValue!==void 0&&(A=t.itemToStringValue,$(N,!0))})),de&&Q(!0),{get value(){return N},get inputValue(){return b.value},get isOpen(){return M},select:e=>$(e),clear:()=>$(null),open:()=>Q(!0),close:()=>Q(!1),setItemToStringValue:e=>{A=e,$(N,!0)},destroy:()=>{Ae=!0,Y.stop(),Je.cleanup(),G.cleanup(),I.forEach(e=>e()),I.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),y.delete(h)}}}const y=new WeakSet;function b(e=document){let t=[];for(let n of h(e,`combobox`))y.has(n)||(y.add(n),t.push(v(n)));return t}export{b as create,v as createCombobox};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/combobox",
-  "version": "0.2.98",
+  "version": "0.2.99",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -40,6 +40,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.98"
+    "@data-slot/core": "0.2.99"
   }
 }