@data-slot/combobox 0.2.42 → 0.2.44

package/README.md

@@ -102,6 +102,7 @@ Options can be passed via JavaScript or data attributes (JS takes precedence).
 | `openOnFocus` | `data-open-on-focus` | `boolean` | `true` | Open popup when input is focused |
 | `autoHighlight` | `data-auto-highlight` | `boolean` | `true` | Auto-highlight first visible item when filtering |
 | `filter` | - | `function` | substring | Custom filter function |
+| `itemToStringValue` | - | `(item: HTMLElement \| null, value: string \| null) => string` | item label | Custom text resolver for selected value shown in input |
 | `side` | `data-side` | `"top" \| "bottom"` | `"bottom"` | Popup placement |
 | `align` | `data-align` | `"start" \| "center" \| "end"` | `"start"` | Popup alignment |
 | `sideOffset` | `data-side-offset` | `number` | `4` | Distance from input (px) |
@@ -128,6 +129,7 @@ interface ComboboxController {
   clear(): void;                      // Clear selection
   open(): void;                       // Open the popup
   close(): void;                      // Close the popup
+  setItemToStringValue(itemToStringValue: ((item: HTMLElement | null, value: string | null) => string) | null): void;
   destroy(): void;                    // Cleanup
 }
 ```
@@ -162,6 +164,11 @@ root.dispatchEvent(new CustomEvent('combobox:set', {
 root.dispatchEvent(new CustomEvent('combobox:set', {
   detail: { open: true }
 }));
+
+// Set runtime selected-value text formatter
+root.dispatchEvent(new CustomEvent('combobox:set', {
+  detail: { itemToStringValue: (item, value) => value ? value.toUpperCase() : '' }
+}));
 ```
 
 ## Keyboard Navigation

package/dist/{index-Cm2u427V.d.ts → index-BWoiWrLI.d.cts}

@@ -3,6 +3,7 @@
 type Side = "top" | "bottom";
 /** Alignment of the content relative to the input */
 type Align = "start" | "center" | "end";
+type ComboboxItemToStringValue = (item: HTMLElement | null, value: string | null) => string;
 interface ComboboxOptions {
   /** Initial selected value */
   defaultValue?: string;
@@ -28,6 +29,8 @@ interface ComboboxOptions {
   autoHighlight?: boolean;
   /** Custom filter function. Return true to show item. */
   filter?: (inputValue: string, itemValue: string, itemLabel: string) => boolean;
+  /** Custom text resolver for the selected value shown in the input */
+  itemToStringValue?: ComboboxItemToStringValue;
   /** @default "bottom" */
   side?: Side;
   /** @default "start" */
@@ -56,6 +59,8 @@ interface ComboboxController {
   open(): void;
   /** Close the popup */
   close(): void;
+  /** Set or clear runtime selected-value text resolver */
+  setItemToStringValue(itemToStringValue: ComboboxItemToStringValue | null): void;
   /** Cleanup all event listeners */
   destroy(): void;
 }
@@ -70,7 +75,7 @@ interface ComboboxController {
  * - **Outbound** `combobox:input-change` (on root): Fires when user types.
  *   `event.detail: { inputValue: string }`
  * - **Inbound** `combobox:set` (on root): Set value, open state, or input value.
- *   `event.detail: { value?: string | null, open?: boolean, inputValue?: string }`
+ *   `event.detail: { value?: string | null, open?: boolean, inputValue?: string, itemToStringValue?: ComboboxItemToStringValue | null }`
  */
 declare function createCombobox(root: Element, options?: ComboboxOptions): ComboboxController;
 /**
@@ -79,4 +84,4 @@ declare function createCombobox(root: Element, options?: ComboboxOptions): Combo
  */
 declare function create(scope?: ParentNode): ComboboxController[];
 //#endregion
-export { Align, ComboboxController, ComboboxOptions, Side, create, createCombobox };
+export { Align, ComboboxController, ComboboxItemToStringValue, ComboboxOptions, Side, create, createCombobox };

package/dist/{index-n0K5aECd.d.cts → index-C9kXDI7n.d.ts}

@@ -3,6 +3,7 @@
 type Side = "top" | "bottom";
 /** Alignment of the content relative to the input */
 type Align = "start" | "center" | "end";
+type ComboboxItemToStringValue = (item: HTMLElement | null, value: string | null) => string;
 interface ComboboxOptions {
   /** Initial selected value */
   defaultValue?: string;
@@ -28,6 +29,8 @@ interface ComboboxOptions {
   autoHighlight?: boolean;
   /** Custom filter function. Return true to show item. */
   filter?: (inputValue: string, itemValue: string, itemLabel: string) => boolean;
+  /** Custom text resolver for the selected value shown in the input */
+  itemToStringValue?: ComboboxItemToStringValue;
   /** @default "bottom" */
   side?: Side;
   /** @default "start" */
@@ -56,6 +59,8 @@ interface ComboboxController {
   open(): void;
   /** Close the popup */
   close(): void;
+  /** Set or clear runtime selected-value text resolver */
+  setItemToStringValue(itemToStringValue: ComboboxItemToStringValue | null): void;
   /** Cleanup all event listeners */
   destroy(): void;
 }
@@ -70,7 +75,7 @@ interface ComboboxController {
  * - **Outbound** `combobox:input-change` (on root): Fires when user types.
  *   `event.detail: { inputValue: string }`
  * - **Inbound** `combobox:set` (on root): Set value, open state, or input value.
- *   `event.detail: { value?: string | null, open?: boolean, inputValue?: string }`
+ *   `event.detail: { value?: string | null, open?: boolean, inputValue?: string, itemToStringValue?: ComboboxItemToStringValue | null }`
  */
 declare function createCombobox(root: Element, options?: ComboboxOptions): ComboboxController;
 /**
@@ -79,4 +84,4 @@ declare function createCombobox(root: Element, options?: ComboboxOptions): Combo
  */
 declare function create(scope?: ParentNode): ComboboxController[];
 //#endregion
-export { Align, ComboboxController, ComboboxOptions, Side, create, createCombobox };
+export { Align, ComboboxController, ComboboxItemToStringValue, ComboboxOptions, Side, create, createCombobox };

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

package/package.json

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