@zag-js/combobox 0.49.0 → 0.50.0

package/dist/index.mjs

@@ -35,18 +35,17 @@ import {
   isContextMenuEvent,
   isLeftClick
 } from "@zag-js/dom-event";
-import { ariaAttr, dataAttr, isDownloadingEvent, isOpeningInNewTab, raf } from "@zag-js/dom-query";
+import { ariaAttr, dataAttr, isDownloadingEvent, isOpeningInNewTab } from "@zag-js/dom-query";
 import { getPlacementStyles } from "@zag-js/popper";
 
 // src/combobox.dom.ts
-import { createScope } from "@zag-js/dom-query";
+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`,
-  getListId: (ctx) => `combobox:${ctx.id}:listbox`,
   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`,
@@ -54,18 +53,28 @@ var dom = createScope({
   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)),
-  getListEl: (ctx) => dom.getById(ctx, dom.getListId(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)),
-  isInputFocused: (ctx) => dom.getDoc(ctx).activeElement === dom.getInputEl(ctx),
   getHighlightedItemEl: (ctx) => {
     const value = ctx.highlightedValue;
     if (value == null)
       return;
-    return dom.getContentEl(ctx)?.querySelector(`[role=option][data-value="${CSS.escape(value)}"`);
+    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 });
   }
 });
 
@@ -79,7 +88,8 @@ function connect(state, send, normalize) {
   const readOnly = state.context.readOnly;
   const open = state.hasTag("open");
   const focused = state.hasTag("focused");
-  const isDialogPopup = state.context.popup === "dialog";
+  const composite = state.context.composite;
+  const highlightedValue = state.context.highlightedValue;
   const popperStyles = getPlacementStyles({
     ...state.context.positioning,
     placement: state.context.currentPlacement
@@ -91,7 +101,7 @@ function connect(state, send, normalize) {
     return {
       value,
       disabled: Boolean(disabled2 || disabled2),
-      highlighted: state.context.highlightedValue === value,
+      highlighted: highlightedValue === value,
       selected: state.context.value.includes(value)
     };
   }
@@ -99,8 +109,7 @@ function connect(state, send, normalize) {
     focused,
     open,
     inputValue: state.context.inputValue,
-    inputEmpty: state.context.isInputValueEmpty,
-    highlightedValue: state.context.highlightedValue,
+    highlightedValue,
     highlightedItem: state.context.highlightedItem,
     value: state.context.value,
     valueAsString: state.context.valueAsString,
@@ -113,7 +122,7 @@ function connect(state, send, normalize) {
     setCollection(collection3) {
       send({ type: "COLLECTION.SET", value: collection3 });
     },
-    highlightValue(value) {
+    setHighlightValue(value) {
       send({ type: "HIGHLIGHTED_VALUE.SET", value });
     },
     selectValue(value) {
@@ -135,10 +144,10 @@ function connect(state, send, normalize) {
     focus() {
       dom.getInputEl(state.context)?.focus();
     },
-    setOpen(_open) {
-      if (_open === open)
+    setOpen(nextOpen) {
+      if (nextOpen === open)
         return;
-      send(_open ? "OPEN" : "CLOSE");
+      send(nextOpen ? "OPEN" : "CLOSE");
     },
     rootProps: normalize.element({
       ...parts.root.attrs,
@@ -157,7 +166,7 @@ function connect(state, send, normalize) {
       "data-invalid": dataAttr(invalid),
       "data-focus": dataAttr(focused),
       onClick(event) {
-        if (!isDialogPopup)
+        if (composite)
           return;
         event.preventDefault();
         dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
@@ -198,11 +207,13 @@ function connect(state, send, normalize) {
       role: "combobox",
       defaultValue: state.context.inputValue,
       "aria-autocomplete": state.context.autoComplete ? "both" : "list",
-      "aria-controls": isDialogPopup ? dom.getListId(state.context) : dom.getContentId(state.context),
+      "aria-controls": dom.getContentId(state.context),
       "aria-expanded": open,
       "data-state": open ? "open" : "closed",
-      "aria-activedescendant": state.context.highlightedValue ? dom.getItemId(state.context, state.context.highlightedValue) : void 0,
-      onClick() {
+      "aria-activedescendant": highlightedValue ? dom.getItemId(state.context, highlightedValue) : void 0,
+      onClick(event) {
+        if (event.defaultPrevented)
+          return;
         if (!state.context.openOnClick)
           return;
         if (!interactive)
@@ -282,86 +293,87 @@ function connect(state, send, normalize) {
         exec?.(event);
       }
     }),
-    triggerProps: normalize.button({
-      ...parts.trigger.attrs,
-      dir: state.context.dir,
-      id: dom.getTriggerId(state.context),
-      "aria-haspopup": isDialogPopup ? "dialog" : "listbox",
-      type: "button",
-      tabIndex: isDialogPopup ? 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-readonly": dataAttr(readOnly),
-      "data-disabled": dataAttr(disabled),
-      onClick(event) {
-        const evt = getNativeEvent(event);
-        if (!interactive)
-          return;
-        if (!isLeftClick(evt))
-          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 (!isDialogPopup)
-          return;
-        const keyMap = {
-          ArrowDown() {
-            send("INPUT.FOCUS");
-            send("INPUT.ARROW_DOWN");
-            raf(() => {
-              dom.getInputEl(state.context)?.focus({ preventScroll: true });
-            });
-          },
-          ArrowUp() {
-            send("INPUT.FOCUS");
-            send("INPUT.ARROW_UP");
-            raf(() => {
-              dom.getInputEl(state.context)?.focus({ preventScroll: true });
-            });
-          }
-        };
-        const key = getEventKey(event, state.context);
-        const exec = keyMap[key];
-        if (exec) {
-          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;
+          const evt = getNativeEvent(event);
+          if (!interactive)
+            return;
+          if (!isLeftClick(evt))
+            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: isDialogPopup ? "dialog" : "listbox",
+      role: !composite ? "dialog" : "listbox",
       tabIndex: -1,
       hidden: !open,
       "data-state": open ? "open" : "closed",
       "aria-labelledby": dom.getLabelId(state.context),
-      "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : void 0,
+      "aria-multiselectable": state.context.multiple && composite ? true : void 0,
       onPointerDown(event) {
         event.preventDefault();
       }
     }),
-    // only used when triggerOnly: true
     listProps: normalize.element({
-      id: dom.getListId(state.context),
-      role: isDialogPopup ? "listbox" : void 0,
-      "aria-multiselectable": isDialogPopup && state.context.multiple ? true : void 0
+      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,
@@ -373,7 +385,12 @@ function connect(state, send, normalize) {
       "aria-label": translations.clearTriggerLabel,
       "aria-controls": dom.getInputId(state.context),
       hidden: !state.context.value.length,
-      onClick() {
+      onPointerDown(event) {
+        event.preventDefault();
+      },
+      onClick(event) {
+        if (event.defaultPrevented)
+          return;
         if (!interactive)
           return;
         send({ type: "VALUE.CLEAR", src: "clear-trigger" });
@@ -398,6 +415,8 @@ function connect(state, send, normalize) {
         onPointerMove() {
           if (itemState.disabled)
             return;
+          if (itemState.highlighted)
+            return;
           send({ type: "ITEM.POINTER_MOVE", value });
         },
         onPointerLeave() {
@@ -405,7 +424,7 @@ function connect(state, send, normalize) {
             return;
           if (itemState.disabled)
             return;
-          const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE";
+          const mouseMoved = state.previousEvent.type.includes("POINTER");
           if (!mouseMoved)
             return;
           send({ type: "ITEM.POINTER_LEAVE", value });
@@ -471,9 +490,9 @@ function connect(state, send, normalize) {
 import { ariaHidden } from "@zag-js/aria-hidden";
 import { createMachine, guards } from "@zag-js/core";
 import { trackDismissableElement } from "@zag-js/dismissable";
-import { observeAttributes, observeChildren, raf as raf2, scrollIntoView } from "@zag-js/dom-query";
+import { observeAttributes, observeChildren, raf, scrollIntoView } from "@zag-js/dom-query";
 import { getPlacement } from "@zag-js/popper";
-import { addOrRemove, compact, isBoolean, isEqual, match } from "@zag-js/utils";
+import { addOrRemove, compact, isArray, isBoolean, isEqual, match } from "@zag-js/utils";
 var { and, not } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
@@ -493,8 +512,7 @@ function machine(userContext) {
         selectionBehavior: "replace",
         openOnKeyPress: true,
         openOnChange: true,
-        dismissable: true,
-        popup: "listbox",
+        composite: true,
         ...ctx,
         highlightedItem: null,
         selectedItems: [],
@@ -523,7 +541,7 @@ function machine(userContext) {
       watch: {
         value: ["syncSelectedItems"],
         inputValue: ["syncInputValue"],
-        highlightedValue: ["autofillInputValue"],
+        highlightedValue: ["syncHighlightedItem", "autofillInputValue"],
         multiple: ["syncSelectionBehavior"],
         open: ["toggleVisibility"]
       },
@@ -561,17 +579,17 @@ function machine(userContext) {
             "TRIGGER.CLICK": [
               {
                 guard: "isOpenControlled",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
               },
               {
                 target: "interacting",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
               }
             ],
             "INPUT.CLICK": [
               {
                 guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
               },
               {
                 target: "interacting",
@@ -593,13 +611,13 @@ function machine(userContext) {
             ],
             "VALUE.CLEAR": {
               target: "focused",
-              actions: ["clearInputValue", "clearSelectedItems"]
+              actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
             }
           }
         },
         focused: {
           tags: ["focused", "closed"],
-          entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
+          entry: ["scrollContentToTop", "clearHighlightedItem"],
           on: {
             "CONTROLLED.OPEN": [
               {
@@ -613,12 +631,12 @@ function machine(userContext) {
             "INPUT.CHANGE": [
               {
                 guard: and("isOpenControlled", "openOnChange"),
-                actions: ["setInputValue", "invokeOnOpen"]
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
               },
               {
                 guard: "openOnChange",
                 target: "suggesting",
-                actions: ["setInputValue", "invokeOnOpen"]
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
               },
               {
                 actions: "setInputValue"
@@ -647,11 +665,11 @@ function machine(userContext) {
             "TRIGGER.CLICK": [
               {
                 guard: "isOpenControlled",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
               },
               {
                 target: "interacting",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
               }
             ],
             "INPUT.ARROW_DOWN": [
@@ -714,18 +732,14 @@ function machine(userContext) {
         },
         interacting: {
           tags: ["open", "focused"],
-          activities: [
-            "scrollIntoView",
-            "trackDismissableLayer",
-            "computePlacement",
-            "hideOtherElements",
-            "trackContentHeight"
-          ],
+          entry: ["setInitialFocus"],
+          activities: ["scrollToHighlightedItem", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
           on: {
             "CONTROLLED.CLOSE": [
               {
                 guard: "restoreFocus",
-                target: "focused"
+                target: "focused",
+                actions: ["setFinalFocus"]
               },
               {
                 target: "idle"
@@ -763,7 +777,7 @@ function machine(userContext) {
               {
                 guard: "closeOnSelect",
                 target: "focused",
-                actions: ["selectHighlightedItem", "invokeOnClose"]
+                actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
               },
               {
                 actions: ["selectHighlightedItem"]
@@ -794,7 +808,7 @@ function machine(userContext) {
               {
                 guard: "closeOnSelect",
                 target: "focused",
-                actions: ["selectItem", "invokeOnClose"]
+                actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
               },
               {
                 actions: ["selectItem"]
@@ -816,7 +830,7 @@ function machine(userContext) {
               },
               {
                 target: "focused",
-                actions: ["invokeOnClose"]
+                actions: ["invokeOnClose", "setFinalFocus"]
               }
             ],
             "TRIGGER.CLICK": [
@@ -853,11 +867,11 @@ function machine(userContext) {
             CLOSE: [
               {
                 guard: "isOpenControlled",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               },
               {
                 target: "focused",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose", "setFinalFocus"]
               }
             ],
             "VALUE.CLEAR": [
@@ -867,7 +881,7 @@ function machine(userContext) {
               },
               {
                 target: "focused",
-                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
               }
             ]
           }
@@ -876,18 +890,18 @@ function machine(userContext) {
           tags: ["open", "focused"],
           activities: [
             "trackDismissableLayer",
-            "scrollIntoView",
+            "scrollToHighlightedItem",
             "computePlacement",
             "trackChildNodes",
-            "hideOtherElements",
-            "trackContentHeight"
+            "hideOtherElements"
           ],
-          entry: ["focusInput"],
+          entry: ["setInitialFocus"],
           on: {
             "CONTROLLED.CLOSE": [
               {
                 guard: "restoreFocus",
-                target: "focused"
+                target: "focused",
+                actions: ["setFinalFocus"]
               },
               {
                 target: "idle"
@@ -898,11 +912,11 @@ function machine(userContext) {
             },
             "INPUT.ARROW_DOWN": {
               target: "interacting",
-              actions: "highlightNextItem"
+              actions: ["highlightNextItem"]
             },
             "INPUT.ARROW_UP": {
               target: "interacting",
-              actions: "highlightPrevItem"
+              actions: ["highlightPrevItem"]
             },
             "INPUT.HOME": {
               target: "interacting",
@@ -920,7 +934,7 @@ function machine(userContext) {
               {
                 guard: "closeOnSelect",
                 target: "focused",
-                actions: ["selectHighlightedItem", "invokeOnClose"]
+                actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
               },
               {
                 actions: ["selectHighlightedItem"]
@@ -938,19 +952,19 @@ function machine(userContext) {
             "LAYER.ESCAPE": [
               {
                 guard: "isOpenControlled",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               },
               {
                 target: "focused",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               }
             ],
             "ITEM.POINTER_MOVE": {
               target: "interacting",
-              actions: "setHighlightedItem"
+              actions: ["setHighlightedItem"]
             },
             "ITEM.POINTER_LEAVE": {
-              actions: "clearHighlightedItem"
+              actions: ["clearHighlightedItem"]
             },
             "LAYER.INTERACT_OUTSIDE": [
               // == group 1 ==
@@ -966,21 +980,21 @@ function machine(userContext) {
               // == group 2 ==
               {
                 guard: "isOpenControlled",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               },
               {
                 target: "idle",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               }
             ],
             "TRIGGER.CLICK": [
               {
                 guard: "isOpenControlled",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               },
               {
                 target: "focused",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               }
             ],
             "ITEM.CLICK": [
@@ -991,7 +1005,7 @@ function machine(userContext) {
               {
                 guard: "closeOnSelect",
                 target: "focused",
-                actions: ["selectItem", "invokeOnClose"]
+                actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
               },
               {
                 actions: ["selectItem"]
@@ -1000,11 +1014,11 @@ function machine(userContext) {
             CLOSE: [
               {
                 guard: "isOpenControlled",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose"]
               },
               {
                 target: "focused",
-                actions: "invokeOnClose"
+                actions: ["invokeOnClose", "setFinalFocus"]
               }
             ],
             "VALUE.CLEAR": [
@@ -1014,7 +1028,7 @@ function machine(userContext) {
               },
               {
                 target: "focused",
-                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
               }
             ]
           }
@@ -1043,7 +1057,7 @@ function machine(userContext) {
       },
       activities: {
         trackDismissableLayer(ctx2, _evt, { send }) {
-          if (!ctx2.dismissable)
+          if (ctx2.disableLayer)
             return;
           const contentEl = () => dom.getContentEl(ctx2);
           return trackDismissableElement(contentEl, {
@@ -1082,56 +1096,42 @@ function machine(userContext) {
           if (!ctx2.autoHighlight)
             return;
           const exec = () => send("CHILDREN_CHANGE");
-          raf2(() => exec());
           const contentEl = () => dom.getContentEl(ctx2);
           return observeChildren(contentEl, {
             callback: exec,
             defer: true
           });
         },
-        scrollIntoView(ctx2, _evt, { getState }) {
+        scrollToHighlightedItem(ctx2, _evt, { getState }) {
           const inputEl = dom.getInputEl(ctx2);
+          let cleanups = [];
           const exec = (immediate) => {
             const state = getState();
-            const pointer = state.event.type.startsWith("ITEM.POINTER");
+            const pointer = state.event.type.includes("POINTER");
             if (pointer || !ctx2.highlightedValue)
               return;
-            const optionEl = dom.getHighlightedItemEl(ctx2);
+            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;
             }
-            scrollIntoView(optionEl, { rootEl: contentEl, block: "nearest" });
+            const rafCleanup2 = raf(() => {
+              scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
+            });
+            cleanups.push(rafCleanup2);
           };
-          raf2(() => exec(true));
-          return observeAttributes(inputEl, {
+          const rafCleanup = raf(() => exec(true));
+          cleanups.push(rafCleanup);
+          const observerCleanup = observeAttributes(inputEl, {
             attributes: ["aria-activedescendant"],
             callback: () => exec(false)
           });
-        },
-        trackContentHeight(ctx2) {
-          let cleanup;
-          raf2(() => {
-            const contentEl = dom.getContentEl(ctx2);
-            const listboxEl = dom.getListEl(ctx2);
-            if (!contentEl || !listboxEl)
-              return;
-            const win = dom.getWin(ctx2);
-            let rafId;
-            const observer = new win.ResizeObserver(() => {
-              rafId = requestAnimationFrame(() => {
-                contentEl.style.setProperty(`--height`, `${listboxEl.offsetHeight}px`);
-              });
-            });
-            observer.observe(contentEl);
-            cleanup = () => {
-              cancelAnimationFrame(rafId);
-              observer.unobserve(contentEl);
-            };
-          });
-          return () => cleanup?.();
+          cleanups.push(observerCleanup);
+          return () => {
+            cleanups.forEach((cleanup) => cleanup());
+          };
         }
       },
       actions: {
@@ -1149,45 +1149,48 @@ function machine(userContext) {
           });
         },
         setHighlightedItem(ctx2, evt) {
-          set.highlightedItem(ctx2, evt.value);
+          if (evt.value == null)
+            return;
+          set.highlightedValue(ctx2, evt.value);
         },
         clearHighlightedItem(ctx2) {
-          set.highlightedItem(ctx2, null, true);
+          set.highlightedValue(ctx2, null, true);
         },
         selectHighlightedItem(ctx2) {
-          set.selectedItem(ctx2, ctx2.highlightedValue);
+          set.value(ctx2, ctx2.highlightedValue);
         },
         selectItem(ctx2, evt) {
-          set.selectedItem(ctx2, evt.value);
+          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.selectedItems(ctx2, value);
+          set.value(ctx2, value);
         },
-        focusInput(ctx2) {
-          raf2(() => {
-            if (dom.isInputFocused(ctx2))
-              return;
-            dom.getInputEl(ctx2)?.focus({ preventScroll: true });
+        setInitialFocus(ctx2) {
+          raf(() => {
+            dom.focusInputEl(ctx2);
           });
         },
-        focusInputOrTrigger(ctx2) {
-          queueMicrotask(() => {
-            if (ctx2.popup === "dialog") {
-              dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
+        setFinalFocus(ctx2) {
+          raf(() => {
+            const triggerEl = dom.getTriggerEl(ctx2);
+            if (triggerEl?.dataset.focusable == null) {
+              dom.focusInputEl(ctx2);
             } else {
-              dom.getInputEl(ctx2)?.focus({ preventScroll: true });
+              dom.focusTriggerEl(ctx2);
             }
           });
         },
-        syncInputValue(ctx2, evt) {
+        syncInputValue(ctx2) {
           const inputEl = dom.getInputEl(ctx2);
           if (!inputEl)
             return;
           inputEl.value = ctx2.inputValue;
-          raf2(() => {
-            if (!evt.keypress)
-              return;
+          queueMicrotask(() => {
             const { selectionStart, selectionEnd } = inputEl;
             if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
               return;
@@ -1228,10 +1231,12 @@ function machine(userContext) {
           }
         },
         setSelectedItems(ctx2, evt) {
-          set.selectedItems(ctx2, evt.value);
+          if (!isArray(evt.value))
+            return;
+          set.value(ctx2, evt.value);
         },
         clearSelectedItems(ctx2) {
-          set.selectedItems(ctx2, []);
+          set.value(ctx2, []);
         },
         scrollContentToTop(ctx2) {
           if (ctx2.scrollToIndexFn) {
@@ -1250,15 +1255,23 @@ function machine(userContext) {
           ctx2.onOpenChange?.({ open: false });
         },
         highlightFirstItem(ctx2) {
-          raf2(() => {
+          raf(() => {
             const value = ctx2.collection.first();
-            set.highlightedItem(ctx2, value);
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightFirstItemIfNeeded(ctx2) {
+          if (!ctx2.autoHighlight)
+            return;
+          raf(() => {
+            const value = ctx2.collection.first();
+            set.highlightedValue(ctx2, value);
           });
         },
         highlightLastItem(ctx2) {
-          raf2(() => {
+          raf(() => {
             const value = ctx2.collection.last();
-            set.highlightedItem(ctx2, value);
+            set.highlightedValue(ctx2, value);
           });
         },
         highlightNextItem(ctx2) {
@@ -1270,7 +1283,7 @@ function machine(userContext) {
           } else {
             value = ctx2.collection.first();
           }
-          set.highlightedItem(ctx2, value);
+          set.highlightedValue(ctx2, value);
         },
         highlightPrevItem(ctx2) {
           let value = null;
@@ -1281,34 +1294,34 @@ function machine(userContext) {
           } else {
             value = ctx2.collection.last();
           }
-          set.highlightedItem(ctx2, value);
+          set.highlightedValue(ctx2, value);
         },
         highlightFirstSelectedItem(ctx2) {
-          raf2(() => {
+          raf(() => {
             const [value] = ctx2.collection.sort(ctx2.value);
-            set.highlightedItem(ctx2, value);
+            set.highlightedValue(ctx2, value);
           });
         },
         highlightFirstOrSelectedItem(ctx2) {
-          raf2(() => {
+          raf(() => {
             let value = null;
             if (ctx2.hasSelectedItems) {
               value = ctx2.collection.sort(ctx2.value)[0];
             } else {
               value = ctx2.collection.first();
             }
-            set.highlightedItem(ctx2, value);
+            set.highlightedValue(ctx2, value);
           });
         },
         highlightLastOrSelectedItem(ctx2) {
-          raf2(() => {
+          raf(() => {
             let value = null;
             if (ctx2.hasSelectedItems) {
               value = ctx2.collection.sort(ctx2.value)[0];
             } else {
               value = ctx2.collection.last();
             }
-            set.highlightedItem(ctx2, value);
+            set.highlightedValue(ctx2, value);
           });
         },
         autofillInputValue(ctx2, evt) {
@@ -1316,7 +1329,7 @@ function machine(userContext) {
           if (!ctx2.autoComplete || !inputEl || !evt.keypress)
             return;
           const valueText = ctx2.collection.valueToString(ctx2.highlightedValue);
-          raf2(() => {
+          raf(() => {
             inputEl.value = valueText || ctx2.inputValue;
           });
         },
@@ -1324,13 +1337,10 @@ function machine(userContext) {
           ctx2.collection = evt.value;
         },
         syncSelectedItems(ctx2) {
-          const prevSelectedItems = ctx2.selectedItems;
-          ctx2.selectedItems = ctx2.value.map((v) => {
-            const foundItem = prevSelectedItems.find((item) => ctx2.collection.itemToValue(item) === v);
-            if (foundItem)
-              return foundItem;
-            return ctx2.collection.item(v);
-          });
+          sync.valueChange(ctx2);
+        },
+        syncHighlightedItem(ctx2) {
+          sync.highlightChange(ctx2);
         },
         toggleVisibility(ctx2, evt, { send }) {
           send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
@@ -1339,12 +1349,8 @@ function machine(userContext) {
     }
   );
 }
-var invoke = {
+var sync = {
   valueChange: (ctx) => {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value),
-      items: ctx.selectedItems
-    });
     const prevSelectedItems = ctx.selectedItems;
     ctx.selectedItems = ctx.value.map((v) => {
       const foundItem = prevSelectedItems.find((item) => ctx.collection.itemToValue(item) === v);
@@ -1354,36 +1360,47 @@ var invoke = {
     });
     const valueAsString = ctx.collection.itemsToString(ctx.selectedItems);
     ctx.valueAsString = valueAsString;
-    let nextInputValue;
+    let inputValue;
     if (ctx.getSelectionValue) {
-      nextInputValue = ctx.getSelectionValue({
+      inputValue = ctx.getSelectionValue({
         inputValue: ctx.inputValue,
         selectedItems: Array.from(ctx.selectedItems),
         valueAsString
       });
     } else {
-      nextInputValue = match(ctx.selectionBehavior, {
+      inputValue = match(ctx.selectionBehavior, {
         replace: ctx.valueAsString,
         preserve: ctx.inputValue,
         clear: ""
       });
     }
-    ctx.inputValue = nextInputValue;
-    invoke.inputChange(ctx);
+    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,
-      highligtedItem: ctx.highlightedItem
+      highlightedItem: ctx.highlightedItem
     });
-    ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue);
   },
   inputChange: (ctx) => {
     ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
   }
 };
 var set = {
-  selectedItem: (ctx, value, force = false) => {
+  value: (ctx, value, force = false) => {
     if (isEqual(ctx.value, value))
       return;
     if (value == null && !force)
@@ -1393,16 +1410,14 @@ var set = {
       invoke.valueChange(ctx);
       return;
     }
-    ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
-    invoke.valueChange(ctx);
-  },
-  selectedItems: (ctx, value) => {
-    if (isEqual(ctx.value, value))
-      return;
-    ctx.value = value;
+    if (isArray(value)) {
+      ctx.value = value;
+    } else if (value != null) {
+      ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
+    }
     invoke.valueChange(ctx);
   },
-  highlightedItem: (ctx, value, force = false) => {
+  highlightedValue: (ctx, value, force = false) => {
     if (isEqual(ctx.highlightedValue, value))
       return;
     if (!value && !force)