@zag-js/combobox 0.53.0 → 0.54.0

package/dist/index.mjs

@@ -1,2 +1,1447 @@
-import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("combobox").parts("root","label","input","positioner","control","trigger","content","clearTrigger","item","itemText","itemIndicator","itemGroup","itemGroupLabel");var parts=anatomy.build();import{Collection}from"@zag-js/collection";import{ref}from"@zag-js/core";var collection=options=>{return ref(new Collection(options))};collection.empty=()=>{return ref(new Collection({items:[]}))};import{clickIfLink,getEventKey,isContextMenuEvent,isLeftClick}from"@zag-js/dom-event";import{ariaAttr,dataAttr,isComposingEvent,isDownloadingEvent,isOpeningInNewTab}from"@zag-js/dom-query";import{getPlacementStyles}from"@zag-js/popper";import{createScope,query}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`combobox:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`combobox:${ctx.id}:label`,getControlId:ctx=>ctx.ids?.control??`combobox:${ctx.id}:control`,getInputId:ctx=>ctx.ids?.input??`combobox:${ctx.id}:input`,getContentId:ctx=>ctx.ids?.content??`combobox:${ctx.id}:content`,getPositionerId:ctx=>ctx.ids?.positioner??`combobox:${ctx.id}:popper`,getTriggerId:ctx=>ctx.ids?.trigger??`combobox:${ctx.id}:toggle-btn`,getClearTriggerId:ctx=>ctx.ids?.clearTrigger??`combobox:${ctx.id}:clear-btn`,getItemGroupId:(ctx,id)=>ctx.ids?.itemGroup?.(id)??`combobox:${ctx.id}:optgroup:${id}`,getItemGroupLabelId:(ctx,id)=>ctx.ids?.itemGroupLabel?.(id)??`combobox:${ctx.id}:optgroup-label:${id}`,getItemId:(ctx,id)=>`combobox:${ctx.id}:option:${id}`,getContentEl:ctx=>dom.getById(ctx,dom.getContentId(ctx)),getInputEl:ctx=>dom.getById(ctx,dom.getInputId(ctx)),getPositionerEl:ctx=>dom.getById(ctx,dom.getPositionerId(ctx)),getControlEl:ctx=>dom.getById(ctx,dom.getControlId(ctx)),getTriggerEl:ctx=>dom.getById(ctx,dom.getTriggerId(ctx)),getClearTriggerEl:ctx=>dom.getById(ctx,dom.getClearTriggerId(ctx)),getHighlightedItemEl:ctx=>{const value=ctx.highlightedValue;if(value==null)return;return query(dom.getContentEl(ctx),`[role=option][data-value="${CSS.escape(value)}"`)},focusInputEl:ctx=>{const inputEl=dom.getInputEl(ctx);if(dom.getActiveElement(ctx)===inputEl)return;inputEl?.focus({preventScroll:true})},focusTriggerEl:ctx=>{const triggerEl=dom.getTriggerEl(ctx);if(dom.getActiveElement(ctx)===triggerEl)return;triggerEl?.focus({preventScroll:true})}});function connect(state,send,normalize){const translations=state.context.translations;const collection2=state.context.collection;const disabled=state.context.disabled;const interactive=state.context.isInteractive;const invalid=state.context.invalid;const readOnly=state.context.readOnly;const open=state.hasTag("open");const focused=state.hasTag("focused");const composite=state.context.composite;const highlightedValue=state.context.highlightedValue;const popperStyles=getPlacementStyles({...state.context.positioning,placement:state.context.currentPlacement});function getItemState(props){const{item}=props;const disabled2=collection2.isItemDisabled(item);const value=collection2.itemToValue(item);return{value,disabled:Boolean(disabled2||disabled2),highlighted:highlightedValue===value,selected:state.context.value.includes(value)}}return{focused,open,inputValue:state.context.inputValue,highlightedValue,highlightedItem:state.context.highlightedItem,value:state.context.value,valueAsString:state.context.valueAsString,hasSelectedItems:state.context.hasSelectedItems,selectedItems:state.context.selectedItems,collection:state.context.collection,reposition(options={}){send({type:"POSITIONING.SET",options})},setCollection(collection3){send({type:"COLLECTION.SET",value:collection3})},setHighlightValue(value){send({type:"HIGHLIGHTED_VALUE.SET",value})},selectValue(value){send({type:"ITEM.SELECT",value})},setValue(value){send({type:"VALUE.SET",value})},setInputValue(value){send({type:"INPUT_VALUE.SET",value})},clearValue(value){if(value!=null){send({type:"ITEM.CLEAR",value})}else{send("VALUE.CLEAR")}},focus(){dom.getInputEl(state.context)?.focus()},setOpen(nextOpen){if(nextOpen===open)return;send(nextOpen?"OPEN":"CLOSE")},rootProps:normalize.element({...parts.root.attrs,dir:state.context.dir,id:dom.getRootId(state.context),"data-invalid":dataAttr(invalid),"data-readonly":dataAttr(readOnly)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getInputId(state.context),id:dom.getLabelId(state.context),"data-readonly":dataAttr(readOnly),"data-disabled":dataAttr(disabled),"data-invalid":dataAttr(invalid),"data-focus":dataAttr(focused),onClick(event){if(composite)return;event.preventDefault();dom.getTriggerEl(state.context)?.focus({preventScroll:true})}}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,id:dom.getControlId(state.context),"data-state":open?"open":"closed","data-focus":dataAttr(focused),"data-disabled":dataAttr(disabled),"data-invalid":dataAttr(invalid)}),positionerProps:normalize.element({...parts.positioner.attrs,dir:state.context.dir,id:dom.getPositionerId(state.context),style:popperStyles.floating}),inputProps:normalize.input({...parts.input.attrs,dir:state.context.dir,"aria-invalid":ariaAttr(invalid),"data-invalid":dataAttr(invalid),name:state.context.name,form:state.context.form,disabled,autoFocus:state.context.autoFocus,autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:"false",readOnly,placeholder:state.context.placeholder,id:dom.getInputId(state.context),type:"text",role:"combobox",defaultValue:state.context.inputValue,"aria-autocomplete":state.context.autoComplete?"both":"list","aria-controls":dom.getContentId(state.context),"aria-expanded":open,"data-state":open?"open":"closed","aria-activedescendant":highlightedValue?dom.getItemId(state.context,highlightedValue):void 0,onClick(event){if(event.defaultPrevented)return;if(!state.context.openOnClick)return;if(!interactive)return;send("INPUT.CLICK")},onFocus(){if(disabled)return;send("INPUT.FOCUS")},onBlur(){if(disabled)return;send("INPUT.BLUR")},onChange(event){send({type:"INPUT.CHANGE",value:event.currentTarget.value})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;if(event.ctrlKey||event.shiftKey||isComposingEvent(event))return;const openOnKeyPress=state.context.openOnKeyPress;const isModifierKey=event.ctrlKey||event.metaKey||event.shiftKey;const keypress=true;const keymap={ArrowDown(event2){if(!openOnKeyPress&&!open)return;send({type:event2.altKey?"OPEN":"INPUT.ARROW_DOWN",keypress});event2.preventDefault()},ArrowUp(){if(!openOnKeyPress&&!open)return;send({type:event.altKey?"CLOSE":"INPUT.ARROW_UP",keypress});event.preventDefault()},Home(event2){if(isModifierKey)return;send({type:"INPUT.HOME",keypress});if(open){event2.preventDefault()}},End(event2){if(isModifierKey)return;send({type:"INPUT.END",keypress});if(open){event2.preventDefault()}},Enter(event2){send({type:"INPUT.ENTER",keypress});if(open){event2.preventDefault()}const itemEl=dom.getHighlightedItemEl(state.context);clickIfLink(itemEl)},Escape(){send({type:"INPUT.ESCAPE",keypress});event.preventDefault()}};const key=getEventKey(event,state.context);const exec=keymap[key];exec?.(event)}}),getTriggerProps(props={}){return normalize.button({...parts.trigger.attrs,dir:state.context.dir,id:dom.getTriggerId(state.context),"aria-haspopup":composite?"listbox":"dialog",type:"button",tabIndex:props.focusable?void 0:-1,"aria-label":translations.triggerLabel,"aria-expanded":open,"data-state":open?"open":"closed","aria-controls":open?dom.getContentId(state.context):void 0,disabled,"data-focusable":dataAttr(props.focusable),"data-readonly":dataAttr(readOnly),"data-disabled":dataAttr(disabled),onFocus(){if(!props.focusable)return;send({type:"INPUT.FOCUS",src:"trigger"})},onClick(event){if(event.defaultPrevented)return;if(!interactive)return;if(!isLeftClick(event))return;send("TRIGGER.CLICK")},onPointerDown(event){if(!interactive)return;if(event.pointerType==="touch")return;event.preventDefault();queueMicrotask(()=>{dom.getInputEl(state.context)?.focus({preventScroll:true})})},onKeyDown(event){if(event.defaultPrevented)return;if(composite)return;const keyMap={ArrowDown(){send({type:"INPUT.ARROW_DOWN",src:"trigger"})},ArrowUp(){send({type:"INPUT.ARROW_UP",src:"trigger"})}};const key=getEventKey(event,state.context);const exec=keyMap[key];if(exec){exec(event);event.preventDefault()}}})},contentProps:normalize.element({...parts.content.attrs,dir:state.context.dir,id:dom.getContentId(state.context),role:!composite?"dialog":"listbox",tabIndex:-1,hidden:!open,"data-state":open?"open":"closed","aria-labelledby":dom.getLabelId(state.context),"aria-multiselectable":state.context.multiple&&composite?true:void 0,onPointerDown(event){event.preventDefault()}}),listProps:normalize.element({role:!composite?"listbox":void 0,"aria-labelledby":dom.getLabelId(state.context),"aria-multiselectable":state.context.multiple&&!composite?true:void 0}),clearTriggerProps:normalize.button({...parts.clearTrigger.attrs,dir:state.context.dir,id:dom.getClearTriggerId(state.context),type:"button",tabIndex:-1,disabled,"aria-label":translations.clearTriggerLabel,"aria-controls":dom.getInputId(state.context),hidden:!state.context.value.length,onPointerDown(event){event.preventDefault()},onClick(event){if(event.defaultPrevented)return;if(!interactive)return;send({type:"VALUE.CLEAR",src:"clear-trigger"})}}),getItemState,getItemProps(props){const itemState=getItemState(props);const value=itemState.value;return normalize.element({...parts.item.attrs,dir:state.context.dir,id:dom.getItemId(state.context,value),role:"option",tabIndex:-1,"data-highlighted":dataAttr(itemState.highlighted),"data-state":itemState.selected?"checked":"unchecked","aria-selected":itemState.highlighted,"aria-disabled":itemState.disabled,"data-disabled":dataAttr(itemState.disabled),"data-value":itemState.value,onPointerMove(){if(itemState.disabled)return;if(itemState.highlighted)return;send({type:"ITEM.POINTER_MOVE",value})},onPointerLeave(){if(props.persistFocus)return;if(itemState.disabled)return;const mouseMoved=state.previousEvent.type.includes("POINTER");if(!mouseMoved)return;send({type:"ITEM.POINTER_LEAVE",value})},onPointerUp(event){if(isDownloadingEvent(event))return;if(isOpeningInNewTab(event))return;if(isContextMenuEvent(event))return;if(itemState.disabled)return;send({type:"ITEM.CLICK",src:"pointerup",value})},onTouchEnd(event){event.preventDefault();event.stopPropagation()}})},getItemTextProps(props){const itemState=getItemState(props);return normalize.element({...parts.itemText.attrs,dir:state.context.dir,"data-disabled":dataAttr(itemState.disabled),"data-highlighted":dataAttr(itemState.highlighted)})},getItemIndicatorProps(props){const itemState=getItemState(props);return normalize.element({"aria-hidden":true,...parts.itemIndicator.attrs,dir:state.context.dir,"data-state":itemState.selected?"checked":"unchecked",hidden:!itemState.selected})},getItemGroupProps(props){const{id}=props;return normalize.element({...parts.itemGroup.attrs,dir:state.context.dir,id:dom.getItemGroupId(state.context,id),"aria-labelledby":dom.getItemGroupLabelId(state.context,id)})},getItemGroupLabelProps(props){const{htmlFor}=props;return normalize.element({...parts.itemGroupLabel.attrs,dir:state.context.dir,id:dom.getItemGroupLabelId(state.context,htmlFor),role:"group"})}}}import{ariaHidden}from"@zag-js/aria-hidden";import{createMachine,guards}from"@zag-js/core";import{trackDismissableElement}from"@zag-js/dismissable";import{observeAttributes,observeChildren,raf,scrollIntoView}from"@zag-js/dom-query";import{getPlacement}from"@zag-js/popper";import{addOrRemove,compact,isArray,isBoolean,isEqual,match}from"@zag-js/utils";var{and,not}=guards;function machine(userContext){const ctx=compact(userContext);return createMachine({id:"combobox",initial:ctx.open?"suggesting":"idle",context:{loopFocus:true,openOnClick:false,value:[],highlightedValue:null,inputValue:"",allowCustomValue:false,closeOnSelect:!ctx.multiple,inputBehavior:"none",selectionBehavior:"replace",openOnKeyPress:true,openOnChange:true,composite:true,...ctx,highlightedItem:null,selectedItems:[],valueAsString:"",collection:ctx.collection??collection.empty(),positioning:{placement:"bottom",flip:false,sameWidth:true,...ctx.positioning},translations:{triggerLabel:"Toggle suggestions",clearTriggerLabel:"Clear value",...ctx.translations}},created:["syncInitialValues","syncSelectionBehavior"],computed:{isInputValueEmpty:ctx2=>ctx2.inputValue.length===0,isInteractive:ctx2=>!(ctx2.readOnly||ctx2.disabled),autoComplete:ctx2=>ctx2.inputBehavior==="autocomplete",autoHighlight:ctx2=>ctx2.inputBehavior==="autohighlight",hasSelectedItems:ctx2=>ctx2.value.length>0},watch:{value:["syncSelectedItems"],inputValue:["syncInputValue"],highlightedValue:["syncHighlightedItem","autofillInputValue"],multiple:["syncSelectionBehavior"],open:["toggleVisibility"]},on:{"HIGHLIGHTED_VALUE.SET":{actions:["setHighlightedItem"]},"ITEM.SELECT":{actions:["selectItem"]},"ITEM.CLEAR":{actions:["clearItem"]},"VALUE.SET":{actions:["setSelectedItems"]},"INPUT_VALUE.SET":{actions:"setInputValue"},"COLLECTION.SET":{actions:["setCollection"]},"POSITIONING.SET":{actions:["reposition"]}},states:{idle:{tags:["idle","closed"],entry:["scrollContentToTop","clearHighlightedItem"],on:{"CONTROLLED.OPEN":{target:"interacting"},"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.CLICK":[{guard:"isOpenControlled",actions:["highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.FOCUS":{target:"focused"},OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"interacting",actions:["invokeOnOpen"]}],"VALUE.CLEAR":{target:"focused",actions:["clearInputValue","clearSelectedItems","setInitialFocus"]}}},focused:{tags:["focused","closed"],entry:["scrollContentToTop","clearHighlightedItem"],on:{"CONTROLLED.OPEN":[{guard:"isChangeEvent",target:"suggesting"},{target:"interacting"}],"INPUT.CHANGE":[{guard:and("isOpenControlled","openOnChange"),actions:["setInputValue","invokeOnOpen","highlightFirstItemIfNeeded"]},{guard:"openOnChange",target:"suggesting",actions:["setInputValue","invokeOnOpen","highlightFirstItemIfNeeded"]},{actions:"setInputValue"}],"LAYER.INTERACT_OUTSIDE":{target:"idle"},"INPUT.ESCAPE":{guard:and("isCustomValue",not("allowCustomValue")),actions:"revertInputValue"},"INPUT.BLUR":{target:"idle"},"INPUT.CLICK":[{guard:"isOpenControlled",actions:["highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstSelectedItem","invokeOnOpen"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.ARROW_DOWN":[{guard:and("isOpenControlled","autoComplete"),actions:["invokeOnOpen"]},{guard:"autoComplete",target:"interacting",actions:["invokeOnOpen"]},{guard:"isOpenControlled",actions:["highlightFirstOrSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstOrSelectedItem","invokeOnOpen"]}],"INPUT.ARROW_UP":[{guard:"autoComplete",target:"interacting",actions:"invokeOnOpen"},{guard:"autoComplete",target:"interacting",actions:"invokeOnOpen"},{target:"interacting",actions:["highlightLastOrSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightLastOrSelectedItem","invokeOnOpen"]}],OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"interacting",actions:["invokeOnOpen"]}],"VALUE.CLEAR":{actions:["clearInputValue","clearSelectedItems"]}}},interacting:{tags:["open","focused"],entry:["setInitialFocus"],activities:["scrollToHighlightedItem","trackDismissableLayer","computePlacement","hideOtherElements"],on:{"CONTROLLED.CLOSE":[{guard:"restoreFocus",target:"focused",actions:["setFinalFocus"]},{target:"idle"}],"INPUT.HOME":{actions:["highlightFirstItem"]},"INPUT.END":{actions:["highlightLastItem"]},"INPUT.ARROW_DOWN":[{guard:and("autoComplete","isLastItemHighlighted"),actions:["clearHighlightedItem","scrollContentToTop"]},{actions:["highlightNextItem"]}],"INPUT.ARROW_UP":[{guard:and("autoComplete","isFirstItemHighlighted"),actions:"clearHighlightedItem"},{actions:"highlightPrevItem"}],"INPUT.ENTER":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectHighlightedItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectHighlightedItem","invokeOnClose","setFinalFocus"]},{actions:["selectHighlightedItem"]}],"INPUT.CHANGE":[{guard:"autoComplete",target:"suggesting",actions:["setInputValue","invokeOnOpen"]},{target:"suggesting",actions:["clearHighlightedItem","setInputValue","invokeOnOpen"]}],"ITEM.POINTER_MOVE":{actions:["setHighlightedItem"]},"ITEM.POINTER_LEAVE":{actions:["clearHighlightedItem"]},"ITEM.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectItem","invokeOnClose","setFinalFocus"]},{actions:["selectItem"]}],"LAYER.ESCAPE":[{guard:and("isOpenControlled","autoComplete"),actions:["syncInputValue","invokeOnClose"]},{guard:"autoComplete",target:"focused",actions:["syncInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"focused",actions:"invokeOnClose"}],"LAYER.INTERACT_OUTSIDE":[{guard:and("isOpenControlled","isCustomValue",not("allowCustomValue")),actions:["revertInputValue","invokeOnClose"]},{guard:and("isCustomValue",not("allowCustomValue")),target:"idle",actions:["revertInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"idle",actions:"invokeOnClose"}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"VALUE.CLEAR":[{guard:"isOpenControlled",actions:["clearInputValue","clearSelectedItems","invokeOnClose"]},{target:"focused",actions:["clearInputValue","clearSelectedItems","invokeOnClose","setFinalFocus"]}]}},suggesting:{tags:["open","focused"],activities:["trackDismissableLayer","scrollToHighlightedItem","computePlacement","trackChildNodes","hideOtherElements"],entry:["setInitialFocus"],on:{"CONTROLLED.CLOSE":[{guard:"restoreFocus",target:"focused",actions:["setFinalFocus"]},{target:"idle"}],CHILDREN_CHANGE:{actions:["highlightFirstItem"]},"INPUT.ARROW_DOWN":{target:"interacting",actions:["highlightNextItem"]},"INPUT.ARROW_UP":{target:"interacting",actions:["highlightPrevItem"]},"INPUT.HOME":{target:"interacting",actions:["highlightFirstItem"]},"INPUT.END":{target:"interacting",actions:["highlightLastItem"]},"INPUT.ENTER":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectHighlightedItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectHighlightedItem","invokeOnClose","setFinalFocus"]},{actions:["selectHighlightedItem"]}],"INPUT.CHANGE":[{guard:"autoHighlight",actions:["setInputValue"]},{actions:["setInputValue"]}],"LAYER.ESCAPE":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose"]}],"ITEM.POINTER_MOVE":{target:"interacting",actions:["setHighlightedItem"]},"ITEM.POINTER_LEAVE":{actions:["clearHighlightedItem"]},"LAYER.INTERACT_OUTSIDE":[{guard:and("isOpenControlled","isCustomValue",not("allowCustomValue")),actions:["revertInputValue","invokeOnClose"]},{guard:and("isCustomValue",not("allowCustomValue")),target:"idle",actions:["revertInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"idle",actions:["invokeOnClose"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose"]}],"ITEM.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectItem","invokeOnClose","setFinalFocus"]},{actions:["selectItem"]}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"VALUE.CLEAR":[{guard:"isOpenControlled",actions:["clearInputValue","clearSelectedItems","invokeOnClose"]},{target:"focused",actions:["clearInputValue","clearSelectedItems","invokeOnClose","setFinalFocus"]}]}}}},{guards:{isInputValueEmpty:ctx2=>ctx2.isInputValueEmpty,autoComplete:ctx2=>ctx2.autoComplete&&!ctx2.multiple,autoHighlight:ctx2=>ctx2.autoHighlight,isFirstItemHighlighted:ctx2=>ctx2.collection.first()===ctx2.highlightedValue,isLastItemHighlighted:ctx2=>ctx2.collection.last()===ctx2.highlightedValue,isCustomValue:ctx2=>ctx2.inputValue!==ctx2.valueAsString,allowCustomValue:ctx2=>!!ctx2.allowCustomValue,hasHighlightedItem:ctx2=>ctx2.highlightedValue!=null,closeOnSelect:ctx2=>!!ctx2.closeOnSelect,isOpenControlled:ctx2=>!!ctx2["open.controlled"],openOnChange:(ctx2,evt)=>{if(isBoolean(ctx2.openOnChange))return ctx2.openOnChange;return!!ctx2.openOnChange?.({inputValue:evt.value})},restoreFocus:(_ctx,evt)=>evt.restoreFocus==null?true:!!evt.restoreFocus,isChangeEvent:(_ctx,evt)=>evt.previousEvent?.type==="INPUT.CHANGE"},activities:{trackDismissableLayer(ctx2,_evt,{send}){if(ctx2.disableLayer)return;const contentEl=()=>dom.getContentEl(ctx2);return trackDismissableElement(contentEl,{defer:true,exclude:()=>[dom.getInputEl(ctx2),dom.getTriggerEl(ctx2),dom.getClearTriggerEl(ctx2)],onFocusOutside:ctx2.onFocusOutside,onPointerDownOutside:ctx2.onPointerDownOutside,onInteractOutside:ctx2.onInteractOutside,onEscapeKeyDown(event){event.preventDefault();event.stopPropagation();send("LAYER.ESCAPE")},onDismiss(){send({type:"LAYER.INTERACT_OUTSIDE",restoreFocus:false})}})},hideOtherElements(ctx2){return ariaHidden([dom.getInputEl(ctx2),dom.getContentEl(ctx2),dom.getTriggerEl(ctx2)])},computePlacement(ctx2){const controlEl=()=>dom.getControlEl(ctx2);const positionerEl=()=>dom.getPositionerEl(ctx2);ctx2.currentPlacement=ctx2.positioning.placement;return getPlacement(controlEl,positionerEl,{...ctx2.positioning,defer:true,onComplete(data){ctx2.currentPlacement=data.placement}})},trackChildNodes(ctx2,_evt,{send}){if(!ctx2.autoHighlight)return;const exec=()=>send("CHILDREN_CHANGE");const contentEl=()=>dom.getContentEl(ctx2);return observeChildren(contentEl,{callback:exec,defer:true})},scrollToHighlightedItem(ctx2,_evt,{getState}){const inputEl=dom.getInputEl(ctx2);let cleanups=[];const exec=immediate=>{const state=getState();const pointer=state.event.type.includes("POINTER");if(pointer||!ctx2.highlightedValue)return;const itemEl=dom.getHighlightedItemEl(ctx2);const contentEl=dom.getContentEl(ctx2);if(ctx2.scrollToIndexFn){const highlightedIndex=ctx2.collection.indexOf(ctx2.highlightedValue);ctx2.scrollToIndexFn({index:highlightedIndex,immediate});return}const rafCleanup2=raf(()=>{scrollIntoView(itemEl,{rootEl:contentEl,block:"nearest"})});cleanups.push(rafCleanup2)};const rafCleanup=raf(()=>exec(true));cleanups.push(rafCleanup);const observerCleanup=observeAttributes(inputEl,{attributes:["aria-activedescendant"],callback:()=>exec(false)});cleanups.push(observerCleanup);return()=>{cleanups.forEach(cleanup=>cleanup())}}},actions:{reposition(ctx2,evt){const controlEl=()=>dom.getControlEl(ctx2);const positionerEl=()=>dom.getPositionerEl(ctx2);getPlacement(controlEl,positionerEl,{...ctx2.positioning,...evt.options,defer:true,listeners:false,onComplete(data){ctx2.currentPlacement=data.placement}})},setHighlightedItem(ctx2,evt){if(evt.value==null)return;set.highlightedValue(ctx2,evt.value)},clearHighlightedItem(ctx2){set.highlightedValue(ctx2,null,true)},selectHighlightedItem(ctx2){set.value(ctx2,ctx2.highlightedValue)},selectItem(ctx2,evt){if(evt.value==null)return;set.value(ctx2,evt.value)},clearItem(ctx2,evt){if(evt.value==null)return;const value=ctx2.value.filter(v=>v!==evt.value);set.value(ctx2,value)},setInitialFocus(ctx2){raf(()=>{dom.focusInputEl(ctx2)})},setFinalFocus(ctx2){raf(()=>{const triggerEl=dom.getTriggerEl(ctx2);if(triggerEl?.dataset.focusable==null){dom.focusInputEl(ctx2)}else{dom.focusTriggerEl(ctx2)}})},syncInputValue(ctx2){const inputEl=dom.getInputEl(ctx2);if(!inputEl)return;inputEl.value=ctx2.inputValue;queueMicrotask(()=>{const{selectionStart,selectionEnd}=inputEl;if(Math.abs((selectionEnd??0)-(selectionStart??0))!==0)return;if(selectionStart!==0)return;inputEl.setSelectionRange(inputEl.value.length,inputEl.value.length)})},setInputValue(ctx2,evt){set.inputValue(ctx2,evt.value)},clearInputValue(ctx2){set.inputValue(ctx2,"")},revertInputValue(ctx2){const inputValue=match(ctx2.selectionBehavior,{replace:ctx2.hasSelectedItems?ctx2.valueAsString:"",preserve:ctx2.inputValue,clear:""});set.inputValue(ctx2,inputValue)},syncInitialValues(ctx2){const selectedItems=ctx2.collection.items(ctx2.value);const valueAsString=ctx2.collection.itemsToString(selectedItems);ctx2.highlightedItem=ctx2.collection.item(ctx2.highlightedValue);ctx2.selectedItems=selectedItems;ctx2.valueAsString=valueAsString;ctx2.inputValue=match(ctx2.selectionBehavior,{preserve:ctx2.inputValue||valueAsString,replace:valueAsString,clear:""})},syncSelectionBehavior(ctx2){if(ctx2.multiple){ctx2.selectionBehavior="clear"}},setSelectedItems(ctx2,evt){if(!isArray(evt.value))return;set.value(ctx2,evt.value)},clearSelectedItems(ctx2){set.value(ctx2,[])},scrollContentToTop(ctx2){if(ctx2.scrollToIndexFn){ctx2.scrollToIndexFn({index:0,immediate:true})}else{const contentEl=dom.getContentEl(ctx2);if(!contentEl)return;contentEl.scrollTop=0}},invokeOnOpen(ctx2){ctx2.onOpenChange?.({open:true})},invokeOnClose(ctx2){ctx2.onOpenChange?.({open:false})},highlightFirstItem(ctx2){raf(()=>{const value=ctx2.collection.first();set.highlightedValue(ctx2,value)})},highlightFirstItemIfNeeded(ctx2){if(!ctx2.autoHighlight)return;raf(()=>{const value=ctx2.collection.first();set.highlightedValue(ctx2,value)})},highlightLastItem(ctx2){raf(()=>{const value=ctx2.collection.last();set.highlightedValue(ctx2,value)})},highlightNextItem(ctx2){let value=null;if(ctx2.highlightedValue){value=ctx2.collection.next(ctx2.highlightedValue);if(!value&&ctx2.loopFocus)value=ctx2.collection.first()}else{value=ctx2.collection.first()}set.highlightedValue(ctx2,value)},highlightPrevItem(ctx2){let value=null;if(ctx2.highlightedValue){value=ctx2.collection.prev(ctx2.highlightedValue);if(!value&&ctx2.loopFocus)value=ctx2.collection.last()}else{value=ctx2.collection.last()}set.highlightedValue(ctx2,value)},highlightFirstSelectedItem(ctx2){raf(()=>{const[value]=ctx2.collection.sort(ctx2.value);set.highlightedValue(ctx2,value)})},highlightFirstOrSelectedItem(ctx2){raf(()=>{let value=null;if(ctx2.hasSelectedItems){value=ctx2.collection.sort(ctx2.value)[0]}else{value=ctx2.collection.first()}set.highlightedValue(ctx2,value)})},highlightLastOrSelectedItem(ctx2){raf(()=>{let value=null;if(ctx2.hasSelectedItems){value=ctx2.collection.sort(ctx2.value)[0]}else{value=ctx2.collection.last()}set.highlightedValue(ctx2,value)})},autofillInputValue(ctx2,evt){const inputEl=dom.getInputEl(ctx2);if(!ctx2.autoComplete||!inputEl||!evt.keypress)return;const valueText=ctx2.collection.valueToString(ctx2.highlightedValue);raf(()=>{inputEl.value=valueText||ctx2.inputValue})},setCollection(ctx2,evt){ctx2.collection=evt.value},syncSelectedItems(ctx2){sync.valueChange(ctx2)},syncHighlightedItem(ctx2){sync.highlightChange(ctx2)},toggleVisibility(ctx2,evt,{send}){send({type:ctx2.open?"CONTROLLED.OPEN":"CONTROLLED.CLOSE",previousEvent:evt})}}})}var sync={valueChange:ctx=>{const prevSelectedItems=ctx.selectedItems;ctx.selectedItems=ctx.value.map(v=>{const foundItem=prevSelectedItems.find(item=>ctx.collection.itemToValue(item)===v);if(foundItem)return foundItem;return ctx.collection.item(v)});const valueAsString=ctx.collection.itemsToString(ctx.selectedItems);ctx.valueAsString=valueAsString;let inputValue;if(ctx.getSelectionValue){inputValue=ctx.getSelectionValue({inputValue:ctx.inputValue,selectedItems:Array.from(ctx.selectedItems),valueAsString})}else{inputValue=match(ctx.selectionBehavior,{replace:ctx.valueAsString,preserve:ctx.inputValue,clear:""})}set.inputValue(ctx,inputValue)},highlightChange:ctx=>{ctx.highlightedItem=ctx.collection.item(ctx.highlightedValue)}};var invoke={valueChange:ctx=>{sync.valueChange(ctx);ctx.onValueChange?.({value:Array.from(ctx.value),items:Array.from(ctx.selectedItems)})},highlightChange:ctx=>{sync.highlightChange(ctx);ctx.onHighlightChange?.({highlightedValue:ctx.highlightedValue,highlightedItem:ctx.highlightedItem})},inputChange:ctx=>{ctx.onInputValueChange?.({inputValue:ctx.inputValue})}};var set={value:(ctx,value,force=false)=>{if(isEqual(ctx.value,value))return;if(value==null&&!force)return;if(value==null&&force){ctx.value=[];invoke.valueChange(ctx);return}if(isArray(value)){ctx.value=value}else if(value!=null){ctx.value=ctx.multiple?addOrRemove(ctx.value,value):[value]}invoke.valueChange(ctx)},highlightedValue:(ctx,value,force=false)=>{if(isEqual(ctx.highlightedValue,value))return;if(!value&&!force)return;ctx.highlightedValue=value||null;invoke.highlightChange(ctx)},inputValue:(ctx,value)=>{if(isEqual(ctx.inputValue,value))return;ctx.inputValue=value;invoke.inputChange(ctx)}};export{anatomy,collection,connect,machine};
+// src/combobox.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("combobox").parts(
+  "root",
+  "label",
+  "input",
+  "positioner",
+  "control",
+  "trigger",
+  "content",
+  "clearTrigger",
+  "item",
+  "itemText",
+  "itemIndicator",
+  "itemGroup",
+  "itemGroupLabel"
+);
+var parts = anatomy.build();
+
+// src/combobox.collection.ts
+import { Collection } from "@zag-js/collection";
+import { ref } from "@zag-js/core";
+var collection = (options) => {
+  return ref(new Collection(options));
+};
+collection.empty = () => {
+  return ref(new Collection({ items: [] }));
+};
+
+// src/combobox.connect.ts
+import { clickIfLink, getEventKey, isContextMenuEvent, isLeftClick } from "@zag-js/dom-event";
+import { ariaAttr, dataAttr, isComposingEvent, isDownloadingEvent, isOpeningInNewTab } from "@zag-js/dom-query";
+import { getPlacementStyles } from "@zag-js/popper";
+
+// src/combobox.dom.ts
+import { createScope, query } from "@zag-js/dom-query";
+var dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`,
+  getControlId: (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
+  getInputId: (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
+  getContentId: (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
+  getTriggerId: (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
+  getClearTriggerId: (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
+  getItemGroupId: (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`,
+  getItemGroupLabelId: (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`,
+  getItemId: (ctx, id) => `combobox:${ctx.id}:option:${id}`,
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
+  getHighlightedItemEl: (ctx) => {
+    const value = ctx.highlightedValue;
+    if (value == null)
+      return;
+    return query(dom.getContentEl(ctx), `[role=option][data-value="${CSS.escape(value)}"`);
+  },
+  focusInputEl: (ctx) => {
+    const inputEl = dom.getInputEl(ctx);
+    if (dom.getActiveElement(ctx) === inputEl)
+      return;
+    inputEl?.focus({ preventScroll: true });
+  },
+  focusTriggerEl: (ctx) => {
+    const triggerEl = dom.getTriggerEl(ctx);
+    if (dom.getActiveElement(ctx) === triggerEl)
+      return;
+    triggerEl?.focus({ preventScroll: true });
+  }
+});
+
+// src/combobox.connect.ts
+function connect(state, send, normalize) {
+  const translations = state.context.translations;
+  const collection2 = state.context.collection;
+  const disabled = state.context.disabled;
+  const interactive = state.context.isInteractive;
+  const invalid = state.context.invalid;
+  const readOnly = state.context.readOnly;
+  const open = state.hasTag("open");
+  const focused = state.hasTag("focused");
+  const composite = state.context.composite;
+  const highlightedValue = state.context.highlightedValue;
+  const popperStyles = getPlacementStyles({
+    ...state.context.positioning,
+    placement: state.context.currentPlacement
+  });
+  function getItemState(props) {
+    const { item } = props;
+    const disabled2 = collection2.isItemDisabled(item);
+    const value = collection2.itemToValue(item);
+    return {
+      value,
+      disabled: Boolean(disabled2 || disabled2),
+      highlighted: highlightedValue === value,
+      selected: state.context.value.includes(value)
+    };
+  }
+  return {
+    focused,
+    open,
+    inputValue: state.context.inputValue,
+    highlightedValue,
+    highlightedItem: state.context.highlightedItem,
+    value: state.context.value,
+    valueAsString: state.context.valueAsString,
+    hasSelectedItems: state.context.hasSelectedItems,
+    selectedItems: state.context.selectedItems,
+    collection: state.context.collection,
+    reposition(options = {}) {
+      send({ type: "POSITIONING.SET", options });
+    },
+    setCollection(collection3) {
+      send({ type: "COLLECTION.SET", value: collection3 });
+    },
+    setHighlightValue(value) {
+      send({ type: "HIGHLIGHTED_VALUE.SET", value });
+    },
+    selectValue(value) {
+      send({ type: "ITEM.SELECT", value });
+    },
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    setInputValue(value) {
+      send({ type: "INPUT_VALUE.SET", value });
+    },
+    clearValue(value) {
+      if (value != null) {
+        send({ type: "ITEM.CLEAR", value });
+      } else {
+        send("VALUE.CLEAR");
+      }
+    },
+    focus() {
+      dom.getInputEl(state.context)?.focus();
+    },
+    setOpen(nextOpen) {
+      if (nextOpen === open)
+        return;
+      send(nextOpen ? "OPEN" : "CLOSE");
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: state.context.dir,
+        id: dom.getRootId(state.context),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: state.context.dir,
+        htmlFor: dom.getInputId(state.context),
+        id: dom.getLabelId(state.context),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        onClick(event) {
+          if (composite)
+            return;
+          event.preventDefault();
+          dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: state.context.dir,
+        id: dom.getControlId(state.context),
+        "data-state": open ? "open" : "closed",
+        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid)
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        dir: state.context.dir,
+        id: dom.getPositionerId(state.context),
+        style: popperStyles.floating
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        dir: state.context.dir,
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        name: state.context.name,
+        form: state.context.form,
+        disabled,
+        autoFocus: state.context.autoFocus,
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "none",
+        spellCheck: "false",
+        readOnly,
+        placeholder: state.context.placeholder,
+        id: dom.getInputId(state.context),
+        type: "text",
+        role: "combobox",
+        defaultValue: state.context.inputValue,
+        "aria-autocomplete": state.context.autoComplete ? "both" : "list",
+        "aria-controls": dom.getContentId(state.context),
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-activedescendant": highlightedValue ? dom.getItemId(state.context, highlightedValue) : void 0,
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!state.context.openOnClick)
+            return;
+          if (!interactive)
+            return;
+          send("INPUT.CLICK");
+        },
+        onFocus() {
+          if (disabled)
+            return;
+          send("INPUT.FOCUS");
+        },
+        onBlur() {
+          if (disabled)
+            return;
+          send("INPUT.BLUR");
+        },
+        onChange(event) {
+          send({ type: "INPUT.CHANGE", value: event.currentTarget.value });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          if (event.ctrlKey || event.shiftKey || isComposingEvent(event))
+            return;
+          const openOnKeyPress = state.context.openOnKeyPress;
+          const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
+          const keypress = true;
+          const keymap = {
+            ArrowDown(event2) {
+              if (!openOnKeyPress && !open)
+                return;
+              send({ type: event2.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress });
+              event2.preventDefault();
+            },
+            ArrowUp() {
+              if (!openOnKeyPress && !open)
+                return;
+              send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress });
+              event.preventDefault();
+            },
+            Home(event2) {
+              if (isModifierKey)
+                return;
+              send({ type: "INPUT.HOME", keypress });
+              if (open) {
+                event2.preventDefault();
+              }
+            },
+            End(event2) {
+              if (isModifierKey)
+                return;
+              send({ type: "INPUT.END", keypress });
+              if (open) {
+                event2.preventDefault();
+              }
+            },
+            Enter(event2) {
+              send({ type: "INPUT.ENTER", keypress });
+              if (open) {
+                event2.preventDefault();
+              }
+              const itemEl = dom.getHighlightedItemEl(state.context);
+              clickIfLink(itemEl);
+            },
+            Escape() {
+              send({ type: "INPUT.ESCAPE", keypress });
+              event.preventDefault();
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keymap[key];
+          exec?.(event);
+        }
+      });
+    },
+    getTriggerProps(props = {}) {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        dir: state.context.dir,
+        id: dom.getTriggerId(state.context),
+        "aria-haspopup": composite ? "listbox" : "dialog",
+        type: "button",
+        tabIndex: props.focusable ? void 0 : -1,
+        "aria-label": translations.triggerLabel,
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": open ? dom.getContentId(state.context) : void 0,
+        disabled,
+        "data-focusable": dataAttr(props.focusable),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        onFocus() {
+          if (!props.focusable)
+            return;
+          send({ type: "INPUT.FOCUS", src: "trigger" });
+        },
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          if (!isLeftClick(event))
+            return;
+          send("TRIGGER.CLICK");
+        },
+        onPointerDown(event) {
+          if (!interactive)
+            return;
+          if (event.pointerType === "touch")
+            return;
+          event.preventDefault();
+          queueMicrotask(() => {
+            dom.getInputEl(state.context)?.focus({ preventScroll: true });
+          });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (composite)
+            return;
+          const keyMap = {
+            ArrowDown() {
+              send({ type: "INPUT.ARROW_DOWN", src: "trigger" });
+            },
+            ArrowUp() {
+              send({ type: "INPUT.ARROW_UP", src: "trigger" });
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        dir: state.context.dir,
+        id: dom.getContentId(state.context),
+        role: !composite ? "dialog" : "listbox",
+        tabIndex: -1,
+        hidden: !open,
+        "data-state": open ? "open" : "closed",
+        "aria-labelledby": dom.getLabelId(state.context),
+        "aria-multiselectable": state.context.multiple && composite ? true : void 0,
+        onPointerDown(event) {
+          event.preventDefault();
+        }
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        role: !composite ? "listbox" : void 0,
+        "aria-labelledby": dom.getLabelId(state.context),
+        "aria-multiselectable": state.context.multiple && !composite ? true : void 0
+      });
+    },
+    getClearTriggerProps() {
+      return normalize.button({
+        ...parts.clearTrigger.attrs,
+        dir: state.context.dir,
+        id: dom.getClearTriggerId(state.context),
+        type: "button",
+        tabIndex: -1,
+        disabled,
+        "aria-label": translations.clearTriggerLabel,
+        "aria-controls": dom.getInputId(state.context),
+        hidden: !state.context.value.length,
+        onPointerDown(event) {
+          event.preventDefault();
+        },
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          send({ type: "VALUE.CLEAR", src: "clear-trigger" });
+        }
+      });
+    },
+    getItemState,
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const value = itemState.value;
+      return normalize.element({
+        ...parts.item.attrs,
+        dir: state.context.dir,
+        id: dom.getItemId(state.context, value),
+        role: "option",
+        tabIndex: -1,
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "aria-selected": itemState.highlighted,
+        "aria-disabled": itemState.disabled,
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-value": itemState.value,
+        onPointerMove() {
+          if (itemState.disabled)
+            return;
+          if (itemState.highlighted)
+            return;
+          send({ type: "ITEM.POINTER_MOVE", value });
+        },
+        onPointerLeave() {
+          if (props.persistFocus)
+            return;
+          if (itemState.disabled)
+            return;
+          const mouseMoved = state.previousEvent.type.includes("POINTER");
+          if (!mouseMoved)
+            return;
+          send({ type: "ITEM.POINTER_LEAVE", value });
+        },
+        onPointerUp(event) {
+          if (isDownloadingEvent(event))
+            return;
+          if (isOpeningInNewTab(event))
+            return;
+          if (isContextMenuEvent(event))
+            return;
+          if (itemState.disabled)
+            return;
+          send({ type: "ITEM.CLICK", src: "pointerup", value });
+        },
+        onTouchEnd(event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      });
+    },
+    getItemTextProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.itemText.attrs,
+        dir: state.context.dir,
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-highlighted": dataAttr(itemState.highlighted)
+      });
+    },
+    getItemIndicatorProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        "aria-hidden": true,
+        ...parts.itemIndicator.attrs,
+        dir: state.context.dir,
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        hidden: !itemState.selected
+      });
+    },
+    getItemGroupProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...parts.itemGroup.attrs,
+        dir: state.context.dir,
+        id: dom.getItemGroupId(state.context, id),
+        "aria-labelledby": dom.getItemGroupLabelId(state.context, id)
+      });
+    },
+    getItemGroupLabelProps(props) {
+      const { htmlFor } = props;
+      return normalize.element({
+        ...parts.itemGroupLabel.attrs,
+        dir: state.context.dir,
+        id: dom.getItemGroupLabelId(state.context, htmlFor),
+        role: "group"
+      });
+    }
+  };
+}
+
+// src/combobox.machine.ts
+import { ariaHidden } from "@zag-js/aria-hidden";
+import { createMachine, guards } from "@zag-js/core";
+import { trackDismissableElement } from "@zag-js/dismissable";
+import { observeAttributes, observeChildren, raf, scrollIntoView } from "@zag-js/dom-query";
+import { getPlacement } from "@zag-js/popper";
+import { addOrRemove, compact, isArray, isBoolean, isEqual, match } from "@zag-js/utils";
+var { and, not } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "combobox",
+      initial: ctx.open ? "suggesting" : "idle",
+      context: {
+        loopFocus: true,
+        openOnClick: false,
+        value: [],
+        highlightedValue: null,
+        inputValue: "",
+        allowCustomValue: false,
+        closeOnSelect: !ctx.multiple,
+        inputBehavior: "none",
+        selectionBehavior: "replace",
+        openOnKeyPress: true,
+        openOnChange: true,
+        composite: true,
+        ...ctx,
+        highlightedItem: null,
+        selectedItems: [],
+        valueAsString: "",
+        collection: ctx.collection ?? collection.empty(),
+        positioning: {
+          placement: "bottom",
+          flip: false,
+          sameWidth: true,
+          ...ctx.positioning
+        },
+        translations: {
+          triggerLabel: "Toggle suggestions",
+          clearTriggerLabel: "Clear value",
+          ...ctx.translations
+        }
+      },
+      created: ["syncInitialValues", "syncSelectionBehavior"],
+      computed: {
+        isInputValueEmpty: (ctx2) => ctx2.inputValue.length === 0,
+        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.disabled),
+        autoComplete: (ctx2) => ctx2.inputBehavior === "autocomplete",
+        autoHighlight: (ctx2) => ctx2.inputBehavior === "autohighlight",
+        hasSelectedItems: (ctx2) => ctx2.value.length > 0
+      },
+      watch: {
+        value: ["syncSelectedItems"],
+        inputValue: ["syncInputValue"],
+        highlightedValue: ["syncHighlightedItem", "autofillInputValue"],
+        multiple: ["syncSelectionBehavior"],
+        open: ["toggleVisibility"]
+      },
+      on: {
+        "HIGHLIGHTED_VALUE.SET": {
+          actions: ["setHighlightedItem"]
+        },
+        "ITEM.SELECT": {
+          actions: ["selectItem"]
+        },
+        "ITEM.CLEAR": {
+          actions: ["clearItem"]
+        },
+        "VALUE.SET": {
+          actions: ["setSelectedItems"]
+        },
+        "INPUT_VALUE.SET": {
+          actions: "setInputValue"
+        },
+        "COLLECTION.SET": {
+          actions: ["setCollection"]
+        },
+        "POSITIONING.SET": {
+          actions: ["reposition"]
+        }
+      },
+      states: {
+        idle: {
+          tags: ["idle", "closed"],
+          entry: ["scrollContentToTop", "clearHighlightedItem"],
+          on: {
+            "CONTROLLED.OPEN": {
+              target: "interacting"
+            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.FOCUS": {
+              target: "focused"
+            },
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              target: "focused",
+              actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
+            }
+          }
+        },
+        focused: {
+          tags: ["focused", "closed"],
+          entry: ["scrollContentToTop", "clearHighlightedItem"],
+          on: {
+            "CONTROLLED.OPEN": [
+              {
+                guard: "isChangeEvent",
+                target: "suggesting"
+              },
+              {
+                target: "interacting"
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: and("isOpenControlled", "openOnChange"),
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
+              },
+              {
+                guard: "openOnChange",
+                target: "suggesting",
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
+              },
+              {
+                actions: "setInputValue"
+              }
+            ],
+            "LAYER.INTERACT_OUTSIDE": {
+              target: "idle"
+            },
+            "INPUT.ESCAPE": {
+              guard: and("isCustomValue", not("allowCustomValue")),
+              actions: "revertInputValue"
+            },
+            "INPUT.BLUR": {
+              target: "idle"
+            },
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.ARROW_DOWN": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["invokeOnOpen"]
+              },
+              {
+                guard: "autoComplete",
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.ARROW_UP": [
+              // == group 1 ==
+              {
+                guard: "autoComplete",
+                target: "interacting",
+                actions: "invokeOnOpen"
+              },
+              {
+                guard: "autoComplete",
+                target: "interacting",
+                actions: "invokeOnOpen"
+              },
+              // == group 2 ==
+              {
+                target: "interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              actions: ["clearInputValue", "clearSelectedItems"]
+            }
+          }
+        },
+        interacting: {
+          tags: ["open", "focused"],
+          entry: ["setInitialFocus"],
+          activities: ["scrollToHighlightedItem", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
+          on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused",
+                actions: ["setFinalFocus"]
+              },
+              {
+                target: "idle"
+              }
+            ],
+            "INPUT.HOME": {
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.END": {
+              actions: ["highlightLastItem"]
+            },
+            "INPUT.ARROW_DOWN": [
+              {
+                guard: and("autoComplete", "isLastItemHighlighted"),
+                actions: ["clearHighlightedItem", "scrollContentToTop"]
+              },
+              {
+                actions: ["highlightNextItem"]
+              }
+            ],
+            "INPUT.ARROW_UP": [
+              {
+                guard: and("autoComplete", "isFirstItemHighlighted"),
+                actions: "clearHighlightedItem"
+              },
+              {
+                actions: "highlightPrevItem"
+              }
+            ],
+            "INPUT.ENTER": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectHighlightedItem"]
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: "autoComplete",
+                target: "suggesting",
+                actions: ["setInputValue", "invokeOnOpen"]
+              },
+              {
+                target: "suggesting",
+                actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"]
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
+              actions: ["setHighlightedItem"]
+            },
+            "ITEM.POINTER_LEAVE": {
+              actions: ["clearHighlightedItem"]
+            },
+            "ITEM.CLICK": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectItem"]
+              }
+            ],
+            "LAYER.ESCAPE": [
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
+              {
+                guard: "autoComplete",
+                target: "focused",
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
+            "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              {
+                guard: and("isCustomValue", not("allowCustomValue")),
+                target: "idle",
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "idle",
+                actions: "invokeOnClose"
+              }
+            ],
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
+              }
+            ]
+          }
+        },
+        suggesting: {
+          tags: ["open", "focused"],
+          activities: [
+            "trackDismissableLayer",
+            "scrollToHighlightedItem",
+            "computePlacement",
+            "trackChildNodes",
+            "hideOtherElements"
+          ],
+          entry: ["setInitialFocus"],
+          on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused",
+                actions: ["setFinalFocus"]
+              },
+              {
+                target: "idle"
+              }
+            ],
+            CHILDREN_CHANGE: {
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.ARROW_DOWN": {
+              target: "interacting",
+              actions: ["highlightNextItem"]
+            },
+            "INPUT.ARROW_UP": {
+              target: "interacting",
+              actions: ["highlightPrevItem"]
+            },
+            "INPUT.HOME": {
+              target: "interacting",
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.END": {
+              target: "interacting",
+              actions: ["highlightLastItem"]
+            },
+            "INPUT.ENTER": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectHighlightedItem"]
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: "autoHighlight",
+                actions: ["setInputValue"]
+              },
+              {
+                actions: ["setInputValue"]
+              }
+            ],
+            "LAYER.ESCAPE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
+              target: "interacting",
+              actions: ["setHighlightedItem"]
+            },
+            "ITEM.POINTER_LEAVE": {
+              actions: ["clearHighlightedItem"]
+            },
+            "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              {
+                guard: and("isCustomValue", not("allowCustomValue")),
+                target: "idle",
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "ITEM.CLICK": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectItem"]
+              }
+            ],
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isInputValueEmpty: (ctx2) => ctx2.isInputValueEmpty,
+        autoComplete: (ctx2) => ctx2.autoComplete && !ctx2.multiple,
+        autoHighlight: (ctx2) => ctx2.autoHighlight,
+        isFirstItemHighlighted: (ctx2) => ctx2.collection.first() === ctx2.highlightedValue,
+        isLastItemHighlighted: (ctx2) => ctx2.collection.last() === ctx2.highlightedValue,
+        isCustomValue: (ctx2) => ctx2.inputValue !== ctx2.valueAsString,
+        allowCustomValue: (ctx2) => !!ctx2.allowCustomValue,
+        hasHighlightedItem: (ctx2) => ctx2.highlightedValue != null,
+        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
+        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
+        openOnChange: (ctx2, evt) => {
+          if (isBoolean(ctx2.openOnChange))
+            return ctx2.openOnChange;
+          return !!ctx2.openOnChange?.({ inputValue: evt.value });
+        },
+        restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
+        isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
+      },
+      activities: {
+        trackDismissableLayer(ctx2, _evt, { send }) {
+          if (ctx2.disableLayer)
+            return;
+          const contentEl = () => dom.getContentEl(ctx2);
+          return trackDismissableElement(contentEl, {
+            defer: true,
+            exclude: () => [dom.getInputEl(ctx2), dom.getTriggerEl(ctx2), dom.getClearTriggerEl(ctx2)],
+            onFocusOutside: ctx2.onFocusOutside,
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onInteractOutside: ctx2.onInteractOutside,
+            onEscapeKeyDown(event) {
+              event.preventDefault();
+              event.stopPropagation();
+              send("LAYER.ESCAPE");
+            },
+            onDismiss() {
+              send({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: false });
+            }
+          });
+        },
+        hideOtherElements(ctx2) {
+          return ariaHidden([dom.getInputEl(ctx2), dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
+        },
+        computePlacement(ctx2) {
+          const controlEl = () => dom.getControlEl(ctx2);
+          const positionerEl = () => dom.getPositionerEl(ctx2);
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          return getPlacement(controlEl, positionerEl, {
+            ...ctx2.positioning,
+            defer: true,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            }
+          });
+        },
+        // in event the options are fetched (async), we still want to auto-highlight the first option
+        trackChildNodes(ctx2, _evt, { send }) {
+          if (!ctx2.autoHighlight)
+            return;
+          const exec = () => send("CHILDREN_CHANGE");
+          const contentEl = () => dom.getContentEl(ctx2);
+          return observeChildren(contentEl, {
+            callback: exec,
+            defer: true
+          });
+        },
+        scrollToHighlightedItem(ctx2, _evt, { getState }) {
+          const inputEl = dom.getInputEl(ctx2);
+          let cleanups = [];
+          const exec = (immediate) => {
+            const state = getState();
+            const pointer = state.event.type.includes("POINTER");
+            if (pointer || !ctx2.highlightedValue)
+              return;
+            const itemEl = dom.getHighlightedItemEl(ctx2);
+            const contentEl = dom.getContentEl(ctx2);
+            if (ctx2.scrollToIndexFn) {
+              const highlightedIndex = ctx2.collection.indexOf(ctx2.highlightedValue);
+              ctx2.scrollToIndexFn({ index: highlightedIndex, immediate });
+              return;
+            }
+            const rafCleanup2 = raf(() => {
+              scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
+            });
+            cleanups.push(rafCleanup2);
+          };
+          const rafCleanup = raf(() => exec(true));
+          cleanups.push(rafCleanup);
+          const observerCleanup = observeAttributes(inputEl, {
+            attributes: ["aria-activedescendant"],
+            callback: () => exec(false)
+          });
+          cleanups.push(observerCleanup);
+          return () => {
+            cleanups.forEach((cleanup) => cleanup());
+          };
+        }
+      },
+      actions: {
+        reposition(ctx2, evt) {
+          const controlEl = () => dom.getControlEl(ctx2);
+          const positionerEl = () => dom.getPositionerEl(ctx2);
+          getPlacement(controlEl, positionerEl, {
+            ...ctx2.positioning,
+            ...evt.options,
+            defer: true,
+            listeners: false,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            }
+          });
+        },
+        setHighlightedItem(ctx2, evt) {
+          if (evt.value == null)
+            return;
+          set.highlightedValue(ctx2, evt.value);
+        },
+        clearHighlightedItem(ctx2) {
+          set.highlightedValue(ctx2, null, true);
+        },
+        selectHighlightedItem(ctx2) {
+          set.value(ctx2, ctx2.highlightedValue);
+        },
+        selectItem(ctx2, evt) {
+          if (evt.value == null)
+            return;
+          set.value(ctx2, evt.value);
+        },
+        clearItem(ctx2, evt) {
+          if (evt.value == null)
+            return;
+          const value = ctx2.value.filter((v) => v !== evt.value);
+          set.value(ctx2, value);
+        },
+        setInitialFocus(ctx2) {
+          raf(() => {
+            dom.focusInputEl(ctx2);
+          });
+        },
+        setFinalFocus(ctx2) {
+          raf(() => {
+            const triggerEl = dom.getTriggerEl(ctx2);
+            if (triggerEl?.dataset.focusable == null) {
+              dom.focusInputEl(ctx2);
+            } else {
+              dom.focusTriggerEl(ctx2);
+            }
+          });
+        },
+        syncInputValue(ctx2) {
+          const inputEl = dom.getInputEl(ctx2);
+          if (!inputEl)
+            return;
+          inputEl.value = ctx2.inputValue;
+          queueMicrotask(() => {
+            const { selectionStart, selectionEnd } = inputEl;
+            if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
+              return;
+            if (selectionStart !== 0)
+              return;
+            inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
+          });
+        },
+        setInputValue(ctx2, evt) {
+          set.inputValue(ctx2, evt.value);
+        },
+        clearInputValue(ctx2) {
+          set.inputValue(ctx2, "");
+        },
+        revertInputValue(ctx2) {
+          const inputValue = match(ctx2.selectionBehavior, {
+            replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
+            preserve: ctx2.inputValue,
+            clear: ""
+          });
+          set.inputValue(ctx2, inputValue);
+        },
+        syncInitialValues(ctx2) {
+          const selectedItems = ctx2.collection.items(ctx2.value);
+          const valueAsString = ctx2.collection.itemsToString(selectedItems);
+          ctx2.highlightedItem = ctx2.collection.item(ctx2.highlightedValue);
+          ctx2.selectedItems = selectedItems;
+          ctx2.valueAsString = valueAsString;
+          ctx2.inputValue = match(ctx2.selectionBehavior, {
+            preserve: ctx2.inputValue || valueAsString,
+            replace: valueAsString,
+            clear: ""
+          });
+        },
+        syncSelectionBehavior(ctx2) {
+          if (ctx2.multiple) {
+            ctx2.selectionBehavior = "clear";
+          }
+        },
+        setSelectedItems(ctx2, evt) {
+          if (!isArray(evt.value))
+            return;
+          set.value(ctx2, evt.value);
+        },
+        clearSelectedItems(ctx2) {
+          set.value(ctx2, []);
+        },
+        scrollContentToTop(ctx2) {
+          if (ctx2.scrollToIndexFn) {
+            ctx2.scrollToIndexFn({ index: 0, immediate: true });
+          } else {
+            const contentEl = dom.getContentEl(ctx2);
+            if (!contentEl)
+              return;
+            contentEl.scrollTop = 0;
+          }
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.({ open: true });
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.({ open: false });
+        },
+        highlightFirstItem(ctx2) {
+          raf(() => {
+            const value = ctx2.collection.first();
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightFirstItemIfNeeded(ctx2) {
+          if (!ctx2.autoHighlight)
+            return;
+          raf(() => {
+            const value = ctx2.collection.first();
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightLastItem(ctx2) {
+          raf(() => {
+            const value = ctx2.collection.last();
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightNextItem(ctx2) {
+          let value = null;
+          if (ctx2.highlightedValue) {
+            value = ctx2.collection.next(ctx2.highlightedValue);
+            if (!value && ctx2.loopFocus)
+              value = ctx2.collection.first();
+          } else {
+            value = ctx2.collection.first();
+          }
+          set.highlightedValue(ctx2, value);
+        },
+        highlightPrevItem(ctx2) {
+          let value = null;
+          if (ctx2.highlightedValue) {
+            value = ctx2.collection.prev(ctx2.highlightedValue);
+            if (!value && ctx2.loopFocus)
+              value = ctx2.collection.last();
+          } else {
+            value = ctx2.collection.last();
+          }
+          set.highlightedValue(ctx2, value);
+        },
+        highlightFirstSelectedItem(ctx2) {
+          raf(() => {
+            const [value] = ctx2.collection.sort(ctx2.value);
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightFirstOrSelectedItem(ctx2) {
+          raf(() => {
+            let value = null;
+            if (ctx2.hasSelectedItems) {
+              value = ctx2.collection.sort(ctx2.value)[0];
+            } else {
+              value = ctx2.collection.first();
+            }
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightLastOrSelectedItem(ctx2) {
+          raf(() => {
+            let value = null;
+            if (ctx2.hasSelectedItems) {
+              value = ctx2.collection.sort(ctx2.value)[0];
+            } else {
+              value = ctx2.collection.last();
+            }
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        autofillInputValue(ctx2, evt) {
+          const inputEl = dom.getInputEl(ctx2);
+          if (!ctx2.autoComplete || !inputEl || !evt.keypress)
+            return;
+          const valueText = ctx2.collection.valueToString(ctx2.highlightedValue);
+          raf(() => {
+            inputEl.value = valueText || ctx2.inputValue;
+          });
+        },
+        setCollection(ctx2, evt) {
+          ctx2.collection = evt.value;
+        },
+        syncSelectedItems(ctx2) {
+          sync.valueChange(ctx2);
+        },
+        syncHighlightedItem(ctx2) {
+          sync.highlightChange(ctx2);
+        },
+        toggleVisibility(ctx2, evt, { send }) {
+          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
+        }
+      }
+    }
+  );
+}
+var sync = {
+  valueChange: (ctx) => {
+    const prevSelectedItems = ctx.selectedItems;
+    ctx.selectedItems = ctx.value.map((v) => {
+      const foundItem = prevSelectedItems.find((item) => ctx.collection.itemToValue(item) === v);
+      if (foundItem)
+        return foundItem;
+      return ctx.collection.item(v);
+    });
+    const valueAsString = ctx.collection.itemsToString(ctx.selectedItems);
+    ctx.valueAsString = valueAsString;
+    let inputValue;
+    if (ctx.getSelectionValue) {
+      inputValue = ctx.getSelectionValue({
+        inputValue: ctx.inputValue,
+        selectedItems: Array.from(ctx.selectedItems),
+        valueAsString
+      });
+    } else {
+      inputValue = match(ctx.selectionBehavior, {
+        replace: ctx.valueAsString,
+        preserve: ctx.inputValue,
+        clear: ""
+      });
+    }
+    set.inputValue(ctx, inputValue);
+  },
+  highlightChange: (ctx) => {
+    ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue);
+  }
+};
+var invoke = {
+  valueChange: (ctx) => {
+    sync.valueChange(ctx);
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value),
+      items: Array.from(ctx.selectedItems)
+    });
+  },
+  highlightChange: (ctx) => {
+    sync.highlightChange(ctx);
+    ctx.onHighlightChange?.({
+      highlightedValue: ctx.highlightedValue,
+      highlightedItem: ctx.highlightedItem
+    });
+  },
+  inputChange: (ctx) => {
+    ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
+  }
+};
+var set = {
+  value: (ctx, value, force = false) => {
+    if (isEqual(ctx.value, value))
+      return;
+    if (value == null && !force)
+      return;
+    if (value == null && force) {
+      ctx.value = [];
+      invoke.valueChange(ctx);
+      return;
+    }
+    if (isArray(value)) {
+      ctx.value = value;
+    } else if (value != null) {
+      ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
+    }
+    invoke.valueChange(ctx);
+  },
+  highlightedValue: (ctx, value, force = false) => {
+    if (isEqual(ctx.highlightedValue, value))
+      return;
+    if (!value && !force)
+      return;
+    ctx.highlightedValue = value || null;
+    invoke.highlightChange(ctx);
+  },
+  inputValue: (ctx, value) => {
+    if (isEqual(ctx.inputValue, value))
+      return;
+    ctx.inputValue = value;
+    invoke.inputChange(ctx);
+  }
+};
+export {
+  anatomy,
+  collection,
+  connect,
+  machine
+};
 //# sourceMappingURL=index.mjs.map