diff --git a/.changeset/fluffy-cups-argue.md b/.changeset/fluffy-cups-argue.md
new file mode 100644
index 0000000000..1162b2512f
--- /dev/null
+++ b/.changeset/fluffy-cups-argue.md
@@ -0,0 +1,37 @@
+---
+"@zag-js/combobox": minor
+---
+
+- Add `open` and `open.controlled` property to programmatically control the combobox's open state
+
+- Add new `openOnChange` property to automatically open the combobox when the value changes. Value can be a boolean or a
+  function that returns a boolean.
+
+```jsx
+const [state, send] = useMachine(
+  combobox.machine({
+    // openOnChange: true,
+    openOnChange: ({ inputValue }) => inputValue.length > 2,
+  }),
+)
+```
+
+- Add new `openOnKeypress` property to automatically open the combobox when the arrow keys (up and down) are pressed.
+
+- Add `getSelectionValue` to the combobox's context to allow customizing the input value when an item is selected.
+
+```jsx
+const [state, send] = useMachine(
+  combobox.machine({
+    getSelectionValue({ inputValue, valueAsString }) {
+      return `${inputValue} ${valueAsString}`
+    },
+  }),
+)
+```
+
+- Add new `dismissable` property to determine whether to add the combobox content to the dismissable stack.
+
+- Add `popup` attribute to allow rendering the combobox has a select with input within the content.
+
+- Add `persistFocus` to the item props to determine whether to clear the highlighted item on pointer leave.
diff --git a/.changeset/four-snakes-wonder.md b/.changeset/four-snakes-wonder.md
new file mode 100644
index 0000000000..9bfcdff6fb
--- /dev/null
+++ b/.changeset/four-snakes-wonder.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/tags-input": minor
+---
+
+- Rename `allowTagEdit` to `editable`
+- Add `onInputValueChange` to machine context
diff --git a/.changeset/odd-rabbits-mate.md b/.changeset/odd-rabbits-mate.md
new file mode 100644
index 0000000000..cc44d422fb
--- /dev/null
+++ b/.changeset/odd-rabbits-mate.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/dialog": minor
+---
+
+Rename `closeOnEscapeKeyDown` to `closeOnEscape`
diff --git a/.changeset/pretty-schools-grab.md b/.changeset/pretty-schools-grab.md
new file mode 100644
index 0000000000..a1e2180f12
--- /dev/null
+++ b/.changeset/pretty-schools-grab.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/menu": minor
+---
+
+Focus first tabbable element when menu opens. To allow composition with combobox
diff --git a/.changeset/pretty-tips-juggle.md b/.changeset/pretty-tips-juggle.md
new file mode 100644
index 0000000000..54a665274a
--- /dev/null
+++ b/.changeset/pretty-tips-juggle.md
@@ -0,0 +1,8 @@
+---
+"@zag-js/combobox": minor
+"@zag-js/select": minor
+"@zag-js/menu": minor
+"@zag-js/tabs": minor
+---
+
+Rename `loop` to `loopFocus` to better reflect its purpose
diff --git a/.changeset/sixty-ants-bow.md b/.changeset/sixty-ants-bow.md
new file mode 100644
index 0000000000..d0799dbfcb
--- /dev/null
+++ b/.changeset/sixty-ants-bow.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/select": minor
+---
+
+Remove `selectOnBlur` to prevent accidental selection of options. Prefer explicit selection by user via click or enter key.
diff --git a/.changeset/tough-owls-tickle.md b/.changeset/tough-owls-tickle.md
new file mode 100644
index 0000000000..3852ddee90
--- /dev/null
+++ b/.changeset/tough-owls-tickle.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/combobox": minor
+---
+
+- Fix issue where combobox could be composed with tags-input due to the way `selectedItems` and `valueAsString` was
+  computed
+- Remove `selectOnBlur` to prevent accidental selection of options. Prefer explicit selection by user via click or enter
+  key.
+- Update the details provided by `onInputValueChange` to from `details.value` to `details.inputValue`
diff --git a/.xstate/combobox.js b/.xstate/combobox.js
index c81f23ecb2..9e7de9b718 100644
--- a/.xstate/combobox.js
+++ b/.xstate/combobox.js
@@ -11,28 +11,53 @@ const {
 } = actions;
 const fetchMachine = createMachine({
   id: "combobox",
-  initial: ctx.autoFocus ? "focused" : "idle",
+  initial: ctx.open ? "suggesting" : "idle",
   context: {
-    "openOnClick": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "isChangeEvent": false,
+    "isOpenControlled && openOnChange": false,
+    "openOnChange": false,
     "isCustomValue && !allowCustomValue": false,
-    "openOnClick": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "isOpenControlled && autoComplete": false,
     "autoComplete": false,
-    "hasSelectedItems": false,
+    "isOpenControlled": false,
     "autoComplete": false,
-    "hasSelectedItems": false,
+    "autoComplete": false,
+    "isOpenControlled": false,
+    "restoreFocus": false,
     "autoComplete && isLastItemHighlighted": false,
     "autoComplete && isFirstItemHighlighted": false,
-    "!closeOnSelect": false,
+    "isOpenControlled && closeOnSelect": false,
+    "closeOnSelect": false,
     "autoComplete": false,
-    "!closeOnSelect": false,
+    "isOpenControlled && closeOnSelect": false,
+    "closeOnSelect": false,
+    "isOpenControlled && autoComplete": false,
     "autoComplete": false,
-    "selectOnBlur && hasHighlightedItem": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "isOpenControlled && isCustomValue && !allowCustomValue": false,
     "isCustomValue && !allowCustomValue": false,
-    "!isHighlightedItemVisible": false,
-    "!closeOnSelect": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "restoreFocus": false,
+    "isOpenControlled && closeOnSelect": false,
+    "closeOnSelect": false,
     "autoHighlight": false,
+    "isOpenControlled": false,
+    "isOpenControlled && isCustomValue && !allowCustomValue": false,
     "isCustomValue && !allowCustomValue": false,
-    "!closeOnSelect": false
+    "isOpenControlled": false,
+    "isOpenControlled": false,
+    "isOpenControlled && closeOnSelect": false,
+    "closeOnSelect": false,
+    "isOpenControlled": false,
+    "isOpenControlled": false
   },
   on: {
     "HIGHLIGHTED_VALUE.SET": {
@@ -50,16 +75,6 @@ const fetchMachine = createMachine({
     "INPUT_VALUE.SET": {
       actions: "setInputValue"
     },
-    "VALUE.CLEAR": {
-      target: "focused",
-      actions: ["clearInputValue", "clearSelectedItems"]
-    },
-    "INPUT.COMPOSITION_START": {
-      actions: ["setIsComposing"]
-    },
-    "INPUT.COMPOSITION_END": {
-      actions: ["clearIsComposing"]
-    },
     "COLLECTION.SET": {
       actions: ["setCollection"]
     },
@@ -77,32 +92,59 @@ const fetchMachine = createMachine({
       tags: ["idle", "closed"],
       entry: ["scrollContentToTop", "clearHighlightedItem"],
       on: {
-        "TRIGGER.CLICK": {
+        "CONTROLLED.OPEN": {
+          target: "interacting"
+        },
+        "TRIGGER.CLICK": [{
+          cond: "isOpenControlled",
+          actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+        }, {
           target: "interacting",
           actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-        },
-        "INPUT.CLICK": {
-          cond: "openOnClick",
+        }],
+        "INPUT.CLICK": [{
+          cond: "isOpenControlled",
+          actions: ["invokeOnOpen"]
+        }, {
           target: "interacting",
           actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
-        },
+        }],
         "INPUT.FOCUS": {
           target: "focused"
         },
-        OPEN: {
+        OPEN: [{
+          cond: "isOpenControlled",
+          actions: ["invokeOnOpen"]
+        }, {
           target: "interacting",
           actions: ["invokeOnOpen"]
+        }],
+        "VALUE.CLEAR": {
+          target: "focused",
+          actions: ["clearInputValue", "clearSelectedItems"]
         }
       }
     },
     focused: {
       tags: ["focused", "closed"],
-      entry: ["focusInput", "scrollContentToTop", "clearHighlightedItem"],
+      entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
       on: {
-        "INPUT.CHANGE": {
+        "CONTROLLED.OPEN": [{
+          cond: "isChangeEvent",
+          target: "suggesting"
+        }, {
+          target: "interacting"
+        }],
+        "INPUT.CHANGE": [{
+          cond: "isOpenControlled && openOnChange",
+          actions: ["setInputValue", "invokeOnOpen"]
+        }, {
+          cond: "openOnChange",
           target: "suggesting",
+          actions: ["setInputValue", "invokeOnOpen"]
+        }, {
           actions: "setInputValue"
-        },
+        }],
         "LAYER.INTERACT_OUTSIDE": {
           target: "idle"
         },
@@ -113,53 +155,79 @@ const fetchMachine = createMachine({
         "INPUT.BLUR": {
           target: "idle"
         },
-        "INPUT.CLICK": {
-          cond: "openOnClick",
-          target: "interacting",
+        "INPUT.CLICK": [{
+          cond: "isOpenControlled",
           actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
-        },
-        "TRIGGER.CLICK": {
+        }, {
           target: "interacting",
+          actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+        }],
+        "TRIGGER.CLICK": [{
+          cond: "isOpenControlled",
           actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-        },
-        "INPUT.ARROW_DOWN": [{
-          cond: "autoComplete",
+        }, {
           target: "interacting",
+          actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+        }],
+        "INPUT.ARROW_DOWN": [
+        // == group 1 ==
+        {
+          cond: "isOpenControlled && autoComplete",
           actions: ["invokeOnOpen"]
         }, {
-          cond: "hasSelectedItems",
+          cond: "autoComplete",
           target: "interacting",
-          actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+          actions: ["invokeOnOpen"]
+        },
+        // == group 2 ==
+        {
+          cond: "isOpenControlled",
+          actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
         }, {
           target: "interacting",
-          actions: ["highlightFirstItem", "invokeOnOpen"]
+          actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
         }],
-        "INPUT.ARROW_DOWN+ALT": {
+        "INPUT.ARROW_UP": [
+        // == group 1 ==
+        {
+          cond: "autoComplete",
           target: "interacting",
           actions: "invokeOnOpen"
-        },
-        "INPUT.ARROW_UP": [{
+        }, {
           cond: "autoComplete",
           target: "interacting",
           actions: "invokeOnOpen"
-        }, {
-          cond: "hasSelectedItems",
+        },
+        // == group 2 ==
+        {
           target: "interacting",
-          actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+          actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
         }, {
           target: "interacting",
-          actions: ["highlightLastItem", "invokeOnOpen"]
+          actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
         }],
-        OPEN: {
+        OPEN: [{
+          cond: "isOpenControlled",
+          actions: ["invokeOnOpen"]
+        }, {
           target: "interacting",
           actions: ["invokeOnOpen"]
+        }],
+        "VALUE.CLEAR": {
+          actions: ["clearInputValue", "clearSelectedItems"]
         }
       }
     },
     interacting: {
       tags: ["open", "focused"],
-      activities: ["scrollIntoView", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
+      activities: ["scrollIntoView", "trackDismissableLayer", "computePlacement", "hideOtherElements", "trackContentHeight"],
       on: {
+        "CONTROLLED.CLOSE": [{
+          cond: "restoreFocus",
+          target: "focused"
+        }, {
+          target: "idle"
+        }],
         "INPUT.HOME": {
           actions: ["highlightFirstItem"]
         },
@@ -178,74 +246,107 @@ const fetchMachine = createMachine({
         }, {
           actions: "highlightPrevItem"
         }],
-        "INPUT.ARROW_UP+ALT": {
-          target: "focused"
-        },
         "INPUT.ENTER": [{
-          cond: "!closeOnSelect",
-          actions: ["selectHighlightedItem"]
+          cond: "isOpenControlled && closeOnSelect",
+          actions: ["selectHighlightedItem", "invokeOnClose"]
         }, {
+          cond: "closeOnSelect",
           target: "focused",
           actions: ["selectHighlightedItem", "invokeOnClose"]
+        }, {
+          actions: ["selectHighlightedItem"]
         }],
         "INPUT.CHANGE": [{
           cond: "autoComplete",
           target: "suggesting",
-          actions: ["setInputValue"]
+          actions: ["setInputValue", "invokeOnOpen"]
         }, {
           target: "suggesting",
-          actions: ["clearHighlightedItem", "setInputValue"]
+          actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"]
         }],
-        "ITEM.POINTER_OVER": {
+        "ITEM.POINTER_MOVE": {
           actions: ["setHighlightedItem"]
         },
         "ITEM.POINTER_LEAVE": {
           actions: ["clearHighlightedItem"]
         },
         "ITEM.CLICK": [{
-          cond: "!closeOnSelect",
-          actions: ["selectItem"]
+          cond: "isOpenControlled && closeOnSelect",
+          actions: ["selectItem", "invokeOnClose"]
         }, {
+          cond: "closeOnSelect",
           target: "focused",
           actions: ["selectItem", "invokeOnClose"]
+        }, {
+          actions: ["selectItem"]
         }],
         "LAYER.ESCAPE": [{
+          cond: "isOpenControlled && autoComplete",
+          actions: ["syncInputValue", "invokeOnClose"]
+        }, {
           cond: "autoComplete",
           target: "focused",
           actions: ["syncInputValue", "invokeOnClose"]
+        }, {
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
         }, {
           target: "focused",
           actions: ["invokeOnClose"]
         }],
-        "TRIGGER.CLICK": {
+        "TRIGGER.CLICK": [{
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
+        }, {
           target: "focused",
           actions: "invokeOnClose"
-        },
-        "LAYER.INTERACT_OUTSIDE": [{
-          cond: "selectOnBlur && hasHighlightedItem",
-          target: "idle",
-          actions: ["selectHighlightedItem", "invokeOnClose"]
+        }],
+        "LAYER.INTERACT_OUTSIDE": [
+        // == group 1 ==
+        {
+          cond: "isOpenControlled && isCustomValue && !allowCustomValue",
+          actions: ["revertInputValue", "invokeOnClose"]
         }, {
           cond: "isCustomValue && !allowCustomValue",
           target: "idle",
           actions: ["revertInputValue", "invokeOnClose"]
+        },
+        // == group 2 ==
+        {
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
         }, {
           target: "idle",
           actions: "invokeOnClose"
         }],
-        CLOSE: {
+        CLOSE: [{
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
+        }, {
           target: "focused",
           actions: "invokeOnClose"
-        }
+        }],
+        "VALUE.CLEAR": [{
+          cond: "isOpenControlled",
+          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+        }, {
+          target: "focused",
+          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+        }]
       }
     },
     suggesting: {
       tags: ["open", "focused"],
-      activities: ["trackDismissableLayer", "scrollIntoView", "computePlacement", "trackChildNodes", "hideOtherElements"],
-      entry: ["focusInput", "invokeOnOpen"],
+      activities: ["trackDismissableLayer", "scrollIntoView", "computePlacement", "trackChildNodes", "hideOtherElements", "trackContentHeight"],
+      entry: ["focusInput"],
       on: {
+        "CONTROLLED.CLOSE": [{
+          cond: "restoreFocus",
+          target: "focused"
+        }, {
+          target: "idle"
+        }],
         CHILDREN_CHANGE: {
-          cond: "!isHighlightedItemVisible",
           actions: ["highlightFirstItem"]
         },
         "INPUT.ARROW_DOWN": {
@@ -256,9 +357,6 @@ const fetchMachine = createMachine({
           target: "interacting",
           actions: "highlightPrevItem"
         },
-        "INPUT.ARROW_UP+ALT": {
-          target: "focused"
-        },
         "INPUT.HOME": {
           target: "interacting",
           actions: ["highlightFirstItem"]
@@ -268,52 +366,84 @@ const fetchMachine = createMachine({
           actions: ["highlightLastItem"]
         },
         "INPUT.ENTER": [{
-          cond: "!closeOnSelect",
-          actions: ["selectHighlightedItem"]
+          cond: "isOpenControlled && closeOnSelect",
+          actions: ["selectHighlightedItem", "invokeOnClose"]
         }, {
+          cond: "closeOnSelect",
           target: "focused",
           actions: ["selectHighlightedItem", "invokeOnClose"]
+        }, {
+          actions: ["selectHighlightedItem"]
         }],
         "INPUT.CHANGE": [{
           cond: "autoHighlight",
-          actions: ["setInputValue", "highlightFirstItem"]
+          actions: ["setInputValue"]
         }, {
-          actions: ["clearHighlightedItem", "setInputValue"]
+          actions: ["setInputValue"]
         }],
-        "LAYER.ESCAPE": {
+        "LAYER.ESCAPE": [{
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
+        }, {
           target: "focused",
           actions: "invokeOnClose"
-        },
-        "ITEM.POINTER_OVER": {
+        }],
+        "ITEM.POINTER_MOVE": {
           target: "interacting",
           actions: "setHighlightedItem"
         },
         "ITEM.POINTER_LEAVE": {
           actions: "clearHighlightedItem"
         },
-        "LAYER.INTERACT_OUTSIDE": [{
+        "LAYER.INTERACT_OUTSIDE": [
+        // == group 1 ==
+        {
+          cond: "isOpenControlled && isCustomValue && !allowCustomValue",
+          actions: ["revertInputValue", "invokeOnClose"]
+        }, {
           cond: "isCustomValue && !allowCustomValue",
           target: "idle",
           actions: ["revertInputValue", "invokeOnClose"]
+        },
+        // == group 2 ==
+        {
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
         }, {
           target: "idle",
           actions: "invokeOnClose"
         }],
-        "TRIGGER.CLICK": {
+        "TRIGGER.CLICK": [{
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
+        }, {
           target: "focused",
           actions: "invokeOnClose"
-        },
+        }],
         "ITEM.CLICK": [{
-          cond: "!closeOnSelect",
-          actions: ["selectItem"]
+          cond: "isOpenControlled && closeOnSelect",
+          actions: ["selectItem", "invokeOnClose"]
         }, {
+          cond: "closeOnSelect",
           target: "focused",
           actions: ["selectItem", "invokeOnClose"]
+        }, {
+          actions: ["selectItem"]
         }],
-        CLOSE: {
+        CLOSE: [{
+          cond: "isOpenControlled",
+          actions: "invokeOnClose"
+        }, {
           target: "focused",
           actions: "invokeOnClose"
-        }
+        }],
+        "VALUE.CLEAR": [{
+          cond: "isOpenControlled",
+          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+        }, {
+          target: "focused",
+          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+        }]
       }
     }
   }
@@ -326,15 +456,19 @@ const fetchMachine = createMachine({
     })
   },
   guards: {
-    "openOnClick": ctx => ctx["openOnClick"],
+    "isOpenControlled": ctx => ctx["isOpenControlled"],
+    "isChangeEvent": ctx => ctx["isChangeEvent"],
+    "isOpenControlled && openOnChange": ctx => ctx["isOpenControlled && openOnChange"],
+    "openOnChange": ctx => ctx["openOnChange"],
     "isCustomValue && !allowCustomValue": ctx => ctx["isCustomValue && !allowCustomValue"],
+    "isOpenControlled && autoComplete": ctx => ctx["isOpenControlled && autoComplete"],
     "autoComplete": ctx => ctx["autoComplete"],
-    "hasSelectedItems": ctx => ctx["hasSelectedItems"],
+    "restoreFocus": ctx => ctx["restoreFocus"],
     "autoComplete && isLastItemHighlighted": ctx => ctx["autoComplete && isLastItemHighlighted"],
     "autoComplete && isFirstItemHighlighted": ctx => ctx["autoComplete && isFirstItemHighlighted"],
-    "!closeOnSelect": ctx => ctx["!closeOnSelect"],
-    "selectOnBlur && hasHighlightedItem": ctx => ctx["selectOnBlur && hasHighlightedItem"],
-    "!isHighlightedItemVisible": ctx => ctx["!isHighlightedItemVisible"],
+    "isOpenControlled && closeOnSelect": ctx => ctx["isOpenControlled && closeOnSelect"],
+    "closeOnSelect": ctx => ctx["closeOnSelect"],
+    "isOpenControlled && isCustomValue && !allowCustomValue": ctx => ctx["isOpenControlled && isCustomValue && !allowCustomValue"],
     "autoHighlight": ctx => ctx["autoHighlight"]
   }
 });
\ No newline at end of file
diff --git a/.xstate/select.js b/.xstate/select.js
index ce5534d8e4..08837551ef 100644
--- a/.xstate/select.js
+++ b/.xstate/select.js
@@ -35,8 +35,6 @@ const fetchMachine = createMachine({
     "isOpenControlled": false,
     "closeOnSelect && isOpenControlled": false,
     "closeOnSelect": false,
-    "selectOnBlur && hasHighlightedItem && isOpenControlled": false,
-    "selectOnBlur && hasHighlightedItem": false,
     "shouldRestoreFocus && isOpenControlled": false,
     "shouldRestoreFocus": false,
     "isOpenControlled": false,
@@ -228,15 +226,6 @@ const fetchMachine = createMachine({
         }],
         "CONTENT.INTERACT_OUTSIDE": [
         // == group 1 ==
-        {
-          cond: "selectOnBlur && hasHighlightedItem && isOpenControlled",
-          actions: ["selectHighlightedItem", "invokeOnClose"]
-        }, {
-          cond: "selectOnBlur && hasHighlightedItem",
-          target: "idle",
-          actions: ["selectHighlightedItem", "invokeOnClose", "clearHighlightedItem"]
-        },
-        // == group 2 ==
         {
           cond: "shouldRestoreFocus && isOpenControlled",
           actions: ["invokeOnClose"]
@@ -245,7 +234,7 @@ const fetchMachine = createMachine({
           target: "focused",
           actions: ["invokeOnClose", "clearHighlightedItem"]
         },
-        // == group 3 ==
+        // == group 2 ==
         {
           cond: "isOpenControlled",
           actions: ["invokeOnClose"]
@@ -310,8 +299,6 @@ const fetchMachine = createMachine({
     "shouldRestoreFocus": ctx => ctx["shouldRestoreFocus"],
     "closeOnSelect && isOpenControlled": ctx => ctx["closeOnSelect && isOpenControlled"],
     "closeOnSelect": ctx => ctx["closeOnSelect"],
-    "selectOnBlur && hasHighlightedItem && isOpenControlled": ctx => ctx["selectOnBlur && hasHighlightedItem && isOpenControlled"],
-    "selectOnBlur && hasHighlightedItem": ctx => ctx["selectOnBlur && hasHighlightedItem"],
     "shouldRestoreFocus && isOpenControlled": ctx => ctx["shouldRestoreFocus && isOpenControlled"],
     "hasHighlightedItem && loop && isLastItemHighlighted": ctx => ctx["hasHighlightedItem && loop && isLastItemHighlighted"],
     "hasHighlightedItem": ctx => ctx["hasHighlightedItem"],
diff --git a/.xstate/tags-input.js b/.xstate/tags-input.js
index a42821ff61..80fa6af386 100644
--- a/.xstate/tags-input.js
+++ b/.xstate/tags-input.js
@@ -13,7 +13,7 @@ const fetchMachine = createMachine({
   id: "tags-input",
   initial: ctx.autoFocus ? "focused:input" : "idle",
   context: {
-    "allowEditTag": false,
+    "isTagEditable": false,
     "!isTagHighlighted": false,
     "(!isAtMax || allowOverflow) && !isInputValueEmpty": false,
     "addOnBlur": false,
@@ -25,7 +25,7 @@ const fetchMachine = createMachine({
     "hasTags && isInputCaretAtStart": false,
     "addOnPaste": false,
     "hasTags && isInputCaretAtStart && !isLastTagHighlighted": false,
-    "allowEditTag && hasHighlightedTag": false,
+    "isTagEditable && hasHighlightedTag": false,
     "isFirstTagHighlighted": false,
     "isInputRelatedTarget": false
   },
@@ -34,7 +34,7 @@ const fetchMachine = createMachine({
   on: {
     DOUBLE_CLICK_TAG: {
       internal: true,
-      cond: "allowEditTag",
+      cond: "isTagEditable",
       target: "editing:tag",
       actions: ["setEditedId", "initializeEditedTagValue"]
     },
@@ -148,7 +148,7 @@ const fetchMachine = createMachine({
           actions: "clearHighlightedId"
         },
         ENTER: {
-          cond: "allowEditTag && hasHighlightedTag",
+          cond: "isTagEditable && hasHighlightedTag",
           target: "editing:tag",
           actions: ["setEditedId", "initializeEditedTagValue", "focusEditedTagInput"]
         },
@@ -205,7 +205,7 @@ const fetchMachine = createMachine({
     })
   },
   guards: {
-    "allowEditTag": ctx => ctx["allowEditTag"],
+    "isTagEditable": ctx => ctx["isTagEditable"],
     "!isTagHighlighted": ctx => ctx["!isTagHighlighted"],
     "(!isAtMax || allowOverflow) && !isInputValueEmpty": ctx => ctx["(!isAtMax || allowOverflow) && !isInputValueEmpty"],
     "addOnBlur": ctx => ctx["addOnBlur"],
@@ -214,7 +214,7 @@ const fetchMachine = createMachine({
     "hasTags && isInputCaretAtStart": ctx => ctx["hasTags && isInputCaretAtStart"],
     "addOnPaste": ctx => ctx["addOnPaste"],
     "hasTags && isInputCaretAtStart && !isLastTagHighlighted": ctx => ctx["hasTags && isInputCaretAtStart && !isLastTagHighlighted"],
-    "allowEditTag && hasHighlightedTag": ctx => ctx["allowEditTag && hasHighlightedTag"],
+    "isTagEditable && hasHighlightedTag": ctx => ctx["isTagEditable && hasHighlightedTag"],
     "isFirstTagHighlighted": ctx => ctx["isFirstTagHighlighted"],
     "isInputRelatedTarget": ctx => ctx["isInputRelatedTarget"]
   }
diff --git a/e2e/color-picker.e2e.ts b/e2e/color-picker.e2e.ts
index 93f6e1a61a..38a354d321 100644
--- a/e2e/color-picker.e2e.ts
+++ b/e2e/color-picker.e2e.ts
@@ -18,14 +18,14 @@ test.describe("color-picker", () => {
   })
 
   test("[closed] typing the same native css colors switch show hex", async () => {
-    await I.typeInHexInput("red")
+    await I.type("red")
     await I.pressKey("Enter")
     await I.clickOutside()
     await I.seeHexInputHasValue(INITIAL_VALUE)
   })
 
   test("[closed] typing different native css colors should update color", async () => {
-    await I.typeInHexInput("pink")
+    await I.type("pink")
     await I.pressKey("Enter")
     await I.clickOutside()
     await I.seeHexInputHasValue(PINK_VALUE)
diff --git a/e2e/combobox.e2e.ts b/e2e/combobox.e2e.ts
index fb85470dfb..51b469f855 100644
--- a/e2e/combobox.e2e.ts
+++ b/e2e/combobox.e2e.ts
@@ -26,8 +26,8 @@ test.describe("combobox", () => {
     await I.dontSeeDropdown()
   })
 
-  test("[typeahead / autohighlight / selection] should open combobox menu when typing", async () => {
-    await I.typeInHexInput("an")
+  test("[keyboard] should open combobox menu when typing", async () => {
+    await I.type("can")
     await I.seeDropdown()
     await I.seeItemIsHighlighted("Canada")
 
@@ -59,7 +59,7 @@ test.describe("combobox", () => {
   })
 
   test("[keyboard / no-loop] on arrow down, open and highlight first enabled option", async () => {
-    await I.controls.bool("loop", false)
+    await I.controls.bool("loopFocus", false)
 
     await I.focusInput()
     await I.pressKey("ArrowDown")
@@ -80,7 +80,7 @@ test.describe("combobox", () => {
   })
 
   test("[keyboard / no-loop] on arrow up, open and highlight last enabled option", async () => {
-    await I.controls.bool("loop", false)
+    await I.controls.bool("loopFocus", false)
 
     await I.focusInput()
     await I.pressKey("ArrowUp")
@@ -89,7 +89,7 @@ test.describe("combobox", () => {
     await I.seeItemIsHighlighted("Tunisia")
   })
 
-  test("[keyboard / opened] on home and end, when open, focus first and last option", async () => {
+  test("[keyboard / open] on home and end, when open, focus first and last option", async () => {
     await I.clickTrigger()
 
     await I.pressKey("ArrowDown", 3)
@@ -104,7 +104,7 @@ test.describe("combobox", () => {
 
   test("[keyboard / closed] on home and end, caret moves to start and end", async () => {
     await I.clickTrigger()
-    await I.typeInHexInput("an")
+    await I.type("an")
     await I.pressKey("Escape")
 
     await I.pressKey("Home")
@@ -115,7 +115,7 @@ test.describe("combobox", () => {
   })
 
   test("[keyboard / arrowdown / loop]", async () => {
-    await I.typeInHexInput("mal")
+    await I.type("mal")
 
     await I.pressKey("ArrowDown", 4)
     await I.seeItemIsHighlighted("Malta")
@@ -125,9 +125,9 @@ test.describe("combobox", () => {
   })
 
   test("[keyboard / arrowdown / no-loop]", async () => {
-    await I.controls.bool("loop", false)
+    await I.controls.bool("loopFocus", false)
 
-    await I.typeInHexInput("mal")
+    await I.type("mal")
     await I.pressKey("ArrowDown", 4)
     await I.seeItemIsHighlighted("Malta")
 
@@ -136,14 +136,14 @@ test.describe("combobox", () => {
   })
 
   test("[keyboard / arrowup / loop]", async () => {
-    await I.typeInHexInput("mal")
+    await I.type("mal")
     await I.pressKey("ArrowUp")
     await I.seeItemIsHighlighted("Malta")
   })
 
   test("[keyboard / arrowup / no-loop]", async () => {
-    await I.controls.bool("loop", false)
-    await I.typeInHexInput("mal")
+    await I.controls.bool("loopFocus", false)
+    await I.type("mal")
     await I.pressKey("ArrowUp")
     await I.seeItemIsHighlighted("Malawi")
   })
@@ -179,7 +179,7 @@ test.describe("combobox", () => {
 
   test("[selection=clear] should clear input value", async () => {
     await I.controls.select("selectionBehavior", "clear")
-    await I.typeInHexInput("mal")
+    await I.type("mal")
     await I.pressKey("Enter")
     await I.seeInputHasValue("")
   })
@@ -193,7 +193,7 @@ test.describe("combobox / autocomplete", () => {
   })
 
   test("[keyboard] should autocomplete", async () => {
-    await I.typeInHexInput("mal")
+    await I.type("mal")
     await I.dontSeeHighlightedItem()
     await I.pressKey("ArrowDown")
     await I.seeItemIsHighlighted("Malawi")
@@ -203,7 +203,7 @@ test.describe("combobox / autocomplete", () => {
   })
 
   test("[keyboard / loop] should loop through the options and previous input value", async () => {
-    await I.typeInHexInput("mal")
+    await I.type("mal")
     await I.pressKey("ArrowDown", 5)
     await I.seeItemIsHighlighted("Malta")
 
@@ -217,7 +217,7 @@ test.describe("combobox / autocomplete", () => {
 
   test("[pointer] hovering an option should not update input value", async () => {
     await I.clickTrigger()
-    await I.typeInHexInput("mal")
+    await I.type("mal")
 
     await I.hoverItem("Malawi")
     await I.seeInputHasValue("mal")
diff --git a/e2e/models/color-picker.model.ts b/e2e/models/color-picker.model.ts
index 8c347a0309..cb67ffd466 100644
--- a/e2e/models/color-picker.model.ts
+++ b/e2e/models/color-picker.model.ts
@@ -57,7 +57,7 @@ export class ColorPickerModel extends Model {
     return this.page.getByTestId("value-text").first()
   }
 
-  typeInHexInput(value: string) {
+  type(value: string) {
     return this.hexInput.fill(value)
   }
 
diff --git a/e2e/models/combobox.model.ts b/e2e/models/combobox.model.ts
index 8ae2147cfb..b4f0d5273e 100644
--- a/e2e/models/combobox.model.ts
+++ b/e2e/models/combobox.model.ts
@@ -37,14 +37,14 @@ export class ComboboxModel extends Model {
   }
 
   getItem = (text: string) => {
-    return this.page.locator(`[data-part=item] >> text=${text}`)
+    return this.page.locator(`[data-part=item]`, { hasText: text })
   }
 
   get highlightedItem() {
     return this.page.locator("[data-part=item][data-highlighted]")
   }
 
-  typeInHexInput(input: string) {
+  type(input: string) {
     return this.input.pressSequentially(input)
   }
 
diff --git a/e2e/models/model.ts b/e2e/models/model.ts
index d8b5cfebaa..27bb1e540f 100644
--- a/e2e/models/model.ts
+++ b/e2e/models/model.ts
@@ -36,7 +36,7 @@ export class Model {
     return this.page.locator(selector).click({ button: "right" })
   }
 
-  typeInHexInput(value: string) {
+  type(value: string) {
     return this.page.keyboard.type(value)
   }
 
diff --git a/e2e/models/tags-input.model.ts b/e2e/models/tags-input.model.ts
index 806a8bf463..00c2f4a963 100644
--- a/e2e/models/tags-input.model.ts
+++ b/e2e/models/tags-input.model.ts
@@ -38,7 +38,7 @@ export class TagsInputModel extends Model {
   }
 
   async editTag(value: string) {
-    await this.typeInHexInput(value)
+    await this.type(value)
     await this.page.keyboard.press("Enter")
   }
 
diff --git a/e2e/select.e2e.ts b/e2e/select.e2e.ts
index 798c800013..c5bb98f7c6 100644
--- a/e2e/select.e2e.ts
+++ b/e2e/select.e2e.ts
@@ -120,7 +120,7 @@ test.describe("select/ open / keyboard", () => {
   })
 
   test("should loop through the options when loop is enabled", async ({ page }) => {
-    await controls(page).bool("loop")
+    await controls(page).bool("loopFocus")
     await page.focus(trigger)
     await page.keyboard.press("Enter")
 
@@ -182,24 +182,13 @@ test.describe("select / open / blur", () => {
     await expect(page.locator(menu)).not.toBeVisible()
   })
 
-  test("should close on blur - no select", async ({ page }) => {
+  test("should close on blur - no selection", async ({ page }) => {
     await page.click(trigger)
     await repeat(3, () => page.keyboard.press("ArrowDown"))
     await page.click("body")
     await expect(page.locator(menu)).not.toBeVisible()
     await expect(page.locator(trigger)).toContainText("Select option")
   })
-
-  test("should close on blur - with select", async ({ page }) => {
-    await controls(page).bool("selectOnBlur", true)
-    await page.click(trigger)
-    await repeat(3, () => page.keyboard.press("ArrowDown"))
-
-    const afganistan = page.locator(getOption("AF"))
-    await page.click("body")
-    await expect(page.locator(menu)).not.toBeVisible()
-    await expectToBeChecked(afganistan)
-  })
 })
 
 test.describe("select / focused / open", () => {
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
index 8707113bea..b7a5c8d913 100644
--- a/examples/next-ts/package.json
+++ b/examples/next-ts/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@internationalized/date": "3.5.2",
+    "@types/textarea-caret": "^3.0.3",
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
@@ -47,7 +48,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -83,10 +83,12 @@
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
     "lucide-react": "0.368.0",
+    "match-sorter": "6.3.4",
     "next": "14.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-spinners": "0.13.8"
+    "react-spinners": "0.13.8",
+    "textarea-caret": "^3.1.0"
   },
   "devDependencies": {
     "@types/form-serialize": "0.7.4",
@@ -98,4 +100,4 @@
     "typescript": "5.4.5"
   },
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/examples/next-ts/pages/cmdk.tsx b/examples/next-ts/pages/cmdk.tsx
new file mode 100644
index 0000000000..d932cddd43
--- /dev/null
+++ b/examples/next-ts/pages/cmdk.tsx
@@ -0,0 +1,154 @@
+/**
+ * Credits to AriaKit for the inspiration
+ * https://ariakit.org/examples/dialog-combobox-command-menu
+ */
+
+import * as combobox from "@zag-js/combobox"
+import * as dialog from "@zag-js/dialog"
+import { Portal, normalizeProps, useMachine } from "@zag-js/react"
+import { commandData } from "@zag-js/shared"
+import { matchSorter } from "match-sorter"
+import { useEffect, useId, useMemo, useState } from "react"
+
+const { allItems, commands, applications, suggestions } = commandData
+
+function filter(value: string): Record<string, commandData.Command[]> {
+  if (!value) {
+    return {
+      Suggestions: suggestions,
+      Commands: commands.filter((item) => !suggestions.includes(item)),
+      Apps: applications.filter((item) => !suggestions.includes(item)),
+    }
+  }
+
+  const results = matchSorter(allItems, value, {
+    keys: ["name", "title"],
+  })
+
+  if (!results.length) return {}
+
+  return { Results: results }
+}
+
+function Combobox(props: Omit<combobox.Context, "id"> & { matches: Record<string, commandData.Command[]> }) {
+  const { matches, ...context } = props
+  const matchEntries = Object.entries(matches)
+
+  const [comboState, comboSend] = useMachine(
+    combobox.machine({
+      id: useId(),
+      open: true,
+      dismissable: false,
+      placeholder: "Type a command or search term...",
+      inputBehavior: "autohighlight",
+      selectionBehavior: "clear",
+      loopFocus: false,
+      ...context,
+    }),
+    { context },
+  )
+
+  const comboApi = combobox.connect(comboState, comboSend, normalizeProps)
+
+  return (
+    <div {...comboApi.rootProps} style={{ width: "100%" }}>
+      <input {...comboApi.inputProps} style={{ marginBottom: "12px" }} />
+      <div {...comboApi.contentProps} style={{ minHeight: "120px" }}>
+        <div {...comboApi.listProps}>
+          {matchEntries.length === 0 && <div>No results found</div>}
+          {matchEntries.map(([group, items]) => (
+            <div key={group} {...comboApi.getItemGroupProps({ id: group })}>
+              <div {...comboApi.getItemGroupLabelProps({ htmlFor: group })}>{group}</div>
+              {items.map((item) => (
+                <div key={item.name} {...comboApi.getItemProps({ item, persistFocus: true })}>
+                  {item.title}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function Page() {
+  const [inputValue, setInputValue] = useState("")
+
+  const matches = useMemo(() => filter(inputValue), [inputValue])
+  const flatMatches = Object.values(matches).flat()
+
+  const collection = useMemo(
+    () =>
+      combobox.collection({
+        items: flatMatches,
+        itemToValue: (item) => item.name,
+        itemToString: (item) => item.title,
+      }),
+    [flatMatches],
+  )
+
+  /* -----------------------------------------------------------------------------
+   * Dialog machine
+   * -----------------------------------------------------------------------------*/
+
+  const [dialogState, dialogSend] = useMachine(
+    dialog.machine({
+      id: useId(),
+    }),
+  )
+
+  const dialogApi = dialog.connect(dialogState, dialogSend, normalizeProps)
+
+  useEffect(() => {
+    const fn = (event: KeyboardEvent) => {
+      if (dialogApi.isOpen) return
+
+      const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform)
+      const hotkey = isMac ? "metaKey" : "ctrlKey"
+
+      if (event.key?.toLowerCase() === "k" && event[hotkey]) {
+        event.preventDefault()
+        dialogApi.open()
+      }
+    }
+    document.addEventListener("keydown", fn, true)
+    return () => {
+      document.removeEventListener("keydown", fn, true)
+    }
+  }, [dialogApi])
+
+  /* -----------------------------------------------------------------------------
+   * Render
+   * -----------------------------------------------------------------------------*/
+
+  return (
+    <main>
+      <button {...dialogApi.triggerProps}>Open Command Menu</button>
+      <div style={{ background: "lightgray", padding: "12px" }}>
+        or press <kbd> Cmd+K</kbd>
+      </div>
+
+      {dialogApi.isOpen && (
+        <Portal>
+          <div {...dialogApi.backdropProps} />
+          <div {...dialogApi.positionerProps}>
+            <div {...dialogApi.contentProps}>
+              <Combobox
+                matches={matches}
+                collection={collection}
+                onValueChange={({ value }) => {
+                  console.log("Selected value:", value)
+                  queueMicrotask(() => dialogApi.close())
+                }}
+                onInputValueChange={({ inputValue }) => {
+                  setInputValue(inputValue)
+                }}
+              />
+            </div>
+          </div>
+        </Portal>
+      )}
+    </main>
+  )
+}
diff --git a/examples/next-ts/pages/combo-tags.tsx b/examples/next-ts/pages/combo-tags.tsx
new file mode 100644
index 0000000000..a846649317
--- /dev/null
+++ b/examples/next-ts/pages/combo-tags.tsx
@@ -0,0 +1,150 @@
+import * as combobox from "@zag-js/combobox"
+import { contains } from "@zag-js/dom-query"
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react"
+import { comboboxData } from "@zag-js/shared"
+import * as tagsInput from "@zag-js/tags-input"
+import { matchSorter } from "match-sorter"
+import { useId, useRef, useState } from "react"
+
+export default function Page() {
+  // id composition for tags input and combobox
+  const ids = {
+    root: useId(),
+    input: useId(),
+    control: useId(),
+  }
+
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  /* -----------------------------------------------------------------------------
+   * Combobox
+   * -----------------------------------------------------------------------------*/
+
+  const [options, setOptions] = useState(comboboxData)
+  const [value, setValue] = useState([])
+
+  const collection = combobox.collection({
+    items: options,
+    itemToValue: (item) => item.code,
+    itemToString: (item) => item.label,
+  })
+
+  const [state, send] = useMachine(
+    combobox.machine({
+      id: useId(),
+      collection,
+      ids: ids,
+      allowCustomValue: true,
+      multiple: true,
+      selectionBehavior: "clear",
+    }),
+    {
+      context: {
+        collection,
+        value,
+        onOpenChange() {
+          setOptions(comboboxData.filter((item) => !value.includes(item.code)))
+        },
+        onInputValueChange({ inputValue }) {
+          const result = matchSorter(comboboxData, inputValue, {
+            keys: ["label"],
+            baseSort: (a, b) => (a.index < b.index ? -1 : 1),
+          })
+          setOptions(result)
+        },
+        onValueChange(details) {
+          // sync tags input value and options
+          queueMicrotask(() => {
+            setValue(details.value)
+            setOptions((curr) => curr.filter((item) => !details.value.includes(item.code)))
+            contentRef.current?.scrollTo(0, 0)
+          })
+        },
+      },
+    },
+  )
+
+  const api = combobox.connect(state, send, normalizeProps)
+
+  /* -----------------------------------------------------------------------------
+   * Tags Input
+   * -----------------------------------------------------------------------------*/
+
+  const [tagState, tagSend] = useMachine(
+    tagsInput.machine({
+      id: useId(),
+      ids: ids,
+      editable: false,
+      addOnPaste: false,
+      onInteractOutside(event) {
+        const { target } = event.detail.originalEvent
+        if (contains(contentRef.current, target)) {
+          event.preventDefault()
+        }
+      },
+    }),
+    {
+      context: {
+        inputValue: state.context.inputValue,
+        value: value,
+        onValueChange(details) {
+          setValue(details.value)
+        },
+        onInputValueChange({ inputValue }) {
+          api.setInputValue(inputValue)
+        },
+      },
+    },
+  )
+
+  const tagApi = tagsInput.connect(tagState, tagSend, normalizeProps)
+
+  /* -----------------------------------------------------------------------------
+   * Render
+   * -----------------------------------------------------------------------------*/
+
+  return (
+    <main className="combobox">
+      <div {...mergeProps(api.rootProps, tagApi.rootProps)}>
+        <label {...api.labelProps}>Select country {tagState.event.type}</label>
+
+        <div {...mergeProps(api.controlProps, tagApi.controlProps)}>
+          {tagApi.value.map((value, index) => (
+            <span key={value} {...tagApi.getItemProps({ index, value })}>
+              <div {...tagApi.getItemPreviewProps({ index, value })}>
+                <span {...tagApi.getItemTextProps({ index, value })}>{value} </span>
+                <button {...tagApi.getItemDeleteTriggerProps({ index, value })}>&#x2715;</button>
+              </div>
+              <input {...tagApi.getItemInputProps({ index, value })} />
+            </span>
+          ))}
+
+          <input
+            data-testid="input"
+            placeholder="add tag"
+            {...mergeProps(api.inputProps, tagApi.inputProps, {
+              onKeyDown(event) {
+                // extra logic to add tag on Enter key
+                if (event.key === "Enter" && options.length === 0) {
+                  tagApi.addValue(api.inputValue)
+                }
+              },
+            })}
+          />
+        </div>
+      </div>
+
+      <div {...api.positionerProps}>
+        {options.length > 0 && (
+          <div data-testid="combobox-content" {...api.contentProps} ref={contentRef}>
+            {options.map((item) => (
+              <div data-testid={item.code} key={item.code} {...api.getItemProps({ item })}>
+                {item.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}
diff --git a/examples/next-ts/pages/combo-textarea.tsx b/examples/next-ts/pages/combo-textarea.tsx
new file mode 100644
index 0000000000..0b75de6509
--- /dev/null
+++ b/examples/next-ts/pages/combo-textarea.tsx
@@ -0,0 +1,189 @@
+/**
+ * Credits to Ariakit for the inspiration
+ * https://ariakit.org/examples/combobox-textarea
+ */
+
+import * as combobox from "@zag-js/combobox"
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react"
+import { comboboxData } from "@zag-js/shared"
+import { matchSorter } from "match-sorter"
+import { useEffect, useId, useRef, useState } from "react"
+import getCaretCoordinates from "textarea-caret"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default function Page() {
+  const [options, setOptions] = useState(comboboxData)
+  const [value, setValue] = useState<any[]>([])
+  const [searchValue, setSearchValue] = useState("")
+
+  const collection = combobox.collection({
+    items: options,
+    itemToValue: (item) => item.code,
+    itemToString: (item) => item.label,
+  })
+
+  const ref = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    const result = matchSorter(comboboxData, searchValue, {
+      keys: ["label"],
+      baseSort: (a, b) => (a.index < b.index ? -1 : 1),
+    })
+    setOptions(result)
+  }, [searchValue])
+
+  const [state, send] = useMachine(
+    combobox.machine({
+      id: useId(),
+      collection,
+      onOpenChange({ open }) {
+        setOptions(comboboxData)
+        if (open) return
+
+        // clear search value and selected items
+        queueMicrotask(() => {
+          setSearchValue("")
+          setValue([])
+        })
+      },
+      inputBehavior: "autohighlight",
+      openOnKeyPress: false,
+      openOnChange: false,
+      allowCustomValue: true,
+      positioning: {
+        sameWidth: false,
+        placement: "bottom-start",
+        gutter: 16,
+        getAnchorRect() {
+          return getAnchorRect(ref.current)
+        },
+      },
+    }),
+    {
+      context: {
+        collection,
+        value,
+        onValueChange({ value }) {
+          setValue(value)
+        },
+        getSelectionValue({ inputValue, valueAsString }) {
+          if (!valueAsString) return inputValue
+          const offset = getTriggerOffset(ref.current)
+          return replaceValue(offset, searchValue, valueAsString)(inputValue)
+        },
+      },
+    },
+  )
+
+  const api = combobox.connect(state, send, normalizeProps)
+
+  const textareaProps = api.inputProps as unknown as React.ComponentProps<"textarea">
+
+  return (
+    <>
+      <main className="combobox">
+        <div {...api.rootProps}>
+          <span>Search value: {searchValue || "-"}</span>
+          <label {...api.labelProps}>Select country</label>
+          <textarea
+            ref={ref}
+            {...mergeProps(textareaProps, {
+              rows: 5,
+              placeholder: "Type @, # or :",
+              style: { width: 400, padding: 4 },
+              onScroll() {
+                api.reposition()
+              },
+              onPointerDown() {
+                api.close()
+              },
+              onKeyDown(event) {
+                if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                  api.close()
+                }
+              },
+              onChange(event) {
+                const trigger = getTrigger(event.currentTarget)
+                const searchValue = getSearchValue(event.currentTarget)
+
+                if (trigger) {
+                  api.open()
+                } else if (!searchValue) {
+                  api.close()
+                }
+
+                setSearchValue(searchValue)
+              },
+            })}
+          />
+        </div>
+
+        <div {...api.positionerProps}>
+          <ul {...api.contentProps}>
+            {options.map((item) => (
+              <li data-testid={item.code} key={item.code} {...api.getItemProps({ item })}>
+                {item.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </main>
+
+      <Toolbar viz>
+        <StateVisualizer state={state} omit={["collection", "nextEvents"]} />
+      </Toolbar>
+    </>
+  )
+}
+
+const defaultTriggers = ["@", "#"]
+
+function getTriggerOffset(element: HTMLTextAreaElement | null, triggers = defaultTriggers) {
+  if (!element) return -1
+
+  const { value, selectionStart } = element
+  for (let i = selectionStart; i >= 0; i--) {
+    const char = value[i]
+    if (char && triggers.includes(char)) {
+      return i
+    }
+  }
+
+  return -1
+}
+
+function getTrigger(element: HTMLTextAreaElement, triggers = defaultTriggers) {
+  const { value, selectionStart } = element
+  const previousChar = value[selectionStart - 1]
+  if (!previousChar) return null
+  const secondPreviousChar = value[selectionStart - 2]
+  const isIsolated = !secondPreviousChar || /\s/.test(secondPreviousChar)
+  if (!isIsolated) return null
+  if (triggers.includes(previousChar)) return previousChar
+  return null
+}
+
+function getSearchValue(element: HTMLTextAreaElement, triggers = defaultTriggers) {
+  const offset = getTriggerOffset(element, triggers)
+  if (offset === -1) return ""
+  return element.value.slice(offset + 1, element.selectionStart)
+}
+
+function getAnchorRect(element: HTMLTextAreaElement | null, triggers = defaultTriggers) {
+  if (!element) return null
+  const offset = getTriggerOffset(element, triggers)
+  const { left, top, height } = getCaretCoordinates(element, offset + 1)
+  const { x, y } = element.getBoundingClientRect()
+  return {
+    x: left + x - element.scrollLeft,
+    y: top + y - element.scrollTop,
+    height: Number.isNaN(height) ? 0 : height,
+  }
+}
+
+function replaceValue(offset: number, searchValue: string, displayValue: string) {
+  return (inputValue: string) => {
+    return `${inputValue.slice(0, offset) + displayValue} ${inputValue.slice(offset + searchValue.length + 1)}`
+  }
+}
diff --git a/examples/next-ts/pages/combobox.tsx b/examples/next-ts/pages/combobox.tsx
index 074089d323..488b6a922d 100644
--- a/examples/next-ts/pages/combobox.tsx
+++ b/examples/next-ts/pages/combobox.tsx
@@ -1,6 +1,8 @@
 import * as combobox from "@zag-js/combobox"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { comboboxControls, comboboxData } from "@zag-js/shared"
+import { XIcon } from "lucide-react"
+import { matchSorter } from "match-sorter"
 import { useId, useState } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -24,8 +26,8 @@ export default function Page() {
       onOpenChange() {
         setOptions(comboboxData)
       },
-      onInputValueChange({ value }) {
-        const filtered = comboboxData.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
+      onInputValueChange({ inputValue }) {
+        const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
         setOptions(filtered.length > 0 ? filtered : comboboxData)
       },
     }),
@@ -47,7 +49,6 @@ export default function Page() {
           <button data-testid="clear-value-button" onClick={() => api.clearValue()}>
             Clear Value
           </button>
-          <button {...api.clearTriggerProps}>Clear Trigger</button>
           <br />
           <div {...api.rootProps}>
             <label {...api.labelProps}>Select country</label>
@@ -56,6 +57,9 @@ export default function Page() {
               <button data-testid="trigger" {...api.triggerProps}>
                 ▼
               </button>
+              <button {...api.clearTriggerProps}>
+                <XIcon />
+              </button>
             </div>
           </div>
           <div {...api.positionerProps}>
@@ -63,7 +67,8 @@ export default function Page() {
               <ul data-testid="combobox-content" {...api.contentProps}>
                 {options.map((item) => (
                   <li data-testid={item.code} key={item.code} {...api.getItemProps({ item })}>
-                    {item.label}
+                    <span {...api.getItemIndicatorProps({ item })}>✅</span>
+                    <span>{item.label}</span>
                   </li>
                 ))}
               </ul>
diff --git a/examples/next-ts/pages/popover-selection.tsx b/examples/next-ts/pages/popover-selection.tsx
new file mode 100644
index 0000000000..c3474551ed
--- /dev/null
+++ b/examples/next-ts/pages/popover-selection.tsx
@@ -0,0 +1,95 @@
+/**
+ * Credits to Ariakit for inspiration
+ * https://ariakit.org/examples/popover-selection
+ */
+
+import * as popover from "@zag-js/popover"
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { useEffect, useId, useRef } from "react"
+
+export default function Page() {
+  const divRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const [state, send] = useMachine(
+    popover.machine({
+      id: useId(),
+      autoFocus: false,
+      positioning: {
+        placement: "top",
+        getAnchorRect() {
+          const selection = divRef.current?.ownerDocument.getSelection()
+          if (!selection?.rangeCount) return null
+          const range = selection.getRangeAt(0)
+          return range.getBoundingClientRect()
+        },
+      },
+    }),
+  )
+
+  const api = popover.connect(state, send, normalizeProps)
+
+  function hasSelectionWithin(el?: Element | null) {
+    if (!el) return false
+
+    const selection = el.ownerDocument.getSelection()
+    if (!selection?.rangeCount) return false
+
+    const range = selection.getRangeAt(0)
+    if (range.collapsed) return false
+
+    return !!el.contains(range.commonAncestorContainer)
+  }
+
+  useEffect(() => {
+    const content = contentRef.current
+    const node = divRef.current
+
+    if (!content) return
+    if (!node) return
+
+    const doc = node.ownerDocument || document
+
+    const onMouseUp = () => {
+      if (!hasSelectionWithin(node)) return
+      api.reposition()
+      api.open()
+    }
+
+    const onSelect = () => {
+      if (hasSelectionWithin(node)) {
+        return api.reposition()
+      }
+      api.close()
+    }
+
+    doc.addEventListener("mouseup", onMouseUp)
+    doc.addEventListener("selectionchange", onSelect)
+
+    return () => {
+      doc.removeEventListener("mouseup", onMouseUp)
+      doc.removeEventListener("selectionchange", onSelect)
+    }
+  }, [api])
+
+  return (
+    <main className="popover">
+      <div ref={divRef} style={{ maxWidth: "500px", fontSize: "20px" }}>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, sed fuga necessitatibus aliquid expedita atque?
+        Doloremque ea sequi totam laudantium laboriosam repellat quasi commodi omnis aut nulla. Numquam, beatae maxime.
+      </div>
+      <div data-part="root">
+        <div {...api.positionerProps}>
+          <div ref={contentRef} data-testid="popover-content" className="popover-content" {...api.contentProps}>
+            <div {...api.arrowProps}>
+              <div {...api.arrowTipProps} />
+            </div>
+            <button>Save</button>
+            <button>Cancel</button>
+            <button>Share</button>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/examples/next-ts/pages/select-combobox.tsx b/examples/next-ts/pages/select-combobox.tsx
new file mode 100644
index 0000000000..6f2e49ea33
--- /dev/null
+++ b/examples/next-ts/pages/select-combobox.tsx
@@ -0,0 +1,68 @@
+import * as combobox from "@zag-js/combobox"
+import { normalizeProps, Portal, useMachine } from "@zag-js/react"
+import { selectData } from "@zag-js/shared"
+import { matchSorter } from "match-sorter"
+import { useId, useRef, useState } from "react"
+
+export default function Page() {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const [options, setOptions] = useState(selectData)
+
+  const liveCollection = combobox.collection({
+    items: options,
+  })
+
+  const [state, send] = useMachine(
+    combobox.machine({
+      id: useId(),
+      collection: liveCollection,
+      selectionBehavior: "clear",
+      inputBehavior: "autohighlight",
+      popup: "dialog",
+      onOpenChange() {
+        setOptions(selectData)
+      },
+      onInputValueChange({ inputValue }) {
+        const filtered = matchSorter(selectData, inputValue, { keys: ["label"] })
+        setOptions(filtered.length > 0 ? filtered : selectData)
+      },
+    }),
+    {
+      context: {
+        collection: liveCollection,
+      },
+    },
+  )
+
+  const api = combobox.connect(state, send, normalizeProps)
+
+  return (
+    <main className="select">
+      <div {...api.rootProps}>
+        <div {...api.controlProps} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+          <label {...api.labelProps}>Select an option</label>
+          <button ref={buttonRef} {...api.triggerProps}>
+            <span>{api.valueAsString || "Choose..."} </span>
+          </button>
+        </div>
+
+        <Portal>
+          <div {...api.positionerProps}>
+            <div {...api.contentProps}>
+              <input ref={inputRef} style={{ position: "sticky", top: "0", width: "100%" }} {...api.inputProps} />
+              <div {...api.listProps}>
+                {options.map((item) => (
+                  <div key={item.value} {...api.getItemProps({ item })}>
+                    {item.label}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </Portal>
+      </div>
+    </main>
+  )
+}
diff --git a/examples/next-ts/pages/tabs-with-link.tsx b/examples/next-ts/pages/tabs-with-link.tsx
new file mode 100644
index 0000000000..1edab5334a
--- /dev/null
+++ b/examples/next-ts/pages/tabs-with-link.tsx
@@ -0,0 +1,48 @@
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { tabsControls, tabsData } from "@zag-js/shared"
+import * as tabs from "@zag-js/tabs"
+import { useId } from "react"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(tabsControls)
+
+  const [state, send] = useMachine(
+    tabs.machine({
+      id: useId(),
+      value: "nils",
+    }),
+    {
+      context: controls.context,
+    },
+  )
+
+  const api = tabs.connect(state, send, normalizeProps)
+
+  return (
+    <>
+      <main className="tabs">
+        <div {...api.rootProps}>
+          <div {...api.listProps}>
+            {tabsData.map((data) => (
+              <a href={`#${data.id}`} {...(api.getTriggerProps({ value: data.id }) as any)} key={data.id}>
+                {data.label}
+              </a>
+            ))}
+          </div>
+          {tabsData.map((data) => (
+            <div {...api.getContentProps({ value: data.id })} key={data.id}>
+              <p>{data.content}</p>
+              {data.id === "agnes" ? <input placeholder="Agnes" /> : null}
+            </div>
+          ))}
+        </div>
+      </main>
+      <Toolbar controls={controls.ui}>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}
diff --git a/examples/nuxt-ts/package.json b/examples/nuxt-ts/package.json
index d646481acc..02f243cb59 100644
--- a/examples/nuxt-ts/package.json
+++ b/examples/nuxt-ts/package.json
@@ -46,7 +46,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -82,6 +81,7 @@
     "@zag-js/vue": "workspace:*",
     "epic-spinners": "2.0.0",
     "form-serialize": "0.7.2",
+    "match-sorter": "6.3.4",
     "lucide-vue-next": "0.368.0",
     "vue": "3.4.21",
     "vue-router": "4.3.0"
@@ -92,4 +92,4 @@
     "@types/node": "20.12.7",
     "nuxt": "3.11.2"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/nuxt-ts/pages/combobox.vue b/examples/nuxt-ts/pages/combobox.vue
index 200ff0f069..fd8931a6ff 100644
--- a/examples/nuxt-ts/pages/combobox.vue
+++ b/examples/nuxt-ts/pages/combobox.vue
@@ -2,6 +2,7 @@
 import * as combobox from "@zag-js/combobox"
 import { comboboxControls, comboboxData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
+import { matchSorter } from "match-sorter"
 
 const controls = useControls(comboboxControls)
 
@@ -21,8 +22,8 @@ const [state, send] = useMachine(
     onOpenChange() {
       options.value = comboboxData
     },
-    onInputValueChange({ value }) {
-      const filtered = comboboxData.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
+    onInputValueChange({ inputValue }) {
+      const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
       options.value = filtered.length > 0 ? filtered : comboboxData
     },
   }),
diff --git a/examples/preact-ts/package.json b/examples/preact-ts/package.json
index 161bba7e25..547b0a0ae4 100644
--- a/examples/preact-ts/package.json
+++ b/examples/preact-ts/package.json
@@ -45,7 +45,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -79,6 +78,7 @@
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
+    "match-sorter": "6.3.4",
     "lucide-preact": "0.368.0",
     "preact": "10.20.2",
     "preact-iso": "2.6.2",
diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json
index 2c8b26dbd3..054e2028ed 100644
--- a/examples/solid-ts/package.json
+++ b/examples/solid-ts/package.json
@@ -55,7 +55,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -90,7 +89,8 @@
     "@zag-js/utils": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
+    "match-sorter": "6.3.4",
     "lucide-solid": "0.368.0",
     "solid-js": "1.8.16"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/solid-ts/src/pages/combobox.tsx b/examples/solid-ts/src/pages/combobox.tsx
index 2d4112fb26..c9c5f5c5af 100644
--- a/examples/solid-ts/src/pages/combobox.tsx
+++ b/examples/solid-ts/src/pages/combobox.tsx
@@ -1,6 +1,7 @@
 import * as combobox from "@zag-js/combobox"
 import { comboboxControls, comboboxData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/solid"
+import { matchSorter } from "match-sorter"
 import { Index, Show, createMemo, createSignal, createUniqueId } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -31,8 +32,8 @@ export default function Page() {
       onOpenChange() {
         setOptions(comboboxData)
       },
-      onInputValueChange({ value }) {
-        const filtered = comboboxData.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
+      onInputValueChange({ inputValue }) {
+        const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
         setOptions(filtered.length > 0 ? filtered : comboboxData)
       },
     }),
diff --git a/examples/svelte-ts/package.json b/examples/svelte-ts/package.json
index 04ed704417..2441d6cd05 100644
--- a/examples/svelte-ts/package.json
+++ b/examples/svelte-ts/package.json
@@ -47,7 +47,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -82,6 +81,7 @@
     "@zag-js/utils": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
+    "match-sorter": "6.3.4",
     "lucide-svelte": "0.368.0",
     "svelte-routing": "2.12.0"
   },
diff --git a/examples/svelte-ts/src/routes/combobox.svelte b/examples/svelte-ts/src/routes/combobox.svelte
index bcbb38601f..911bc12e9b 100644
--- a/examples/svelte-ts/src/routes/combobox.svelte
+++ b/examples/svelte-ts/src/routes/combobox.svelte
@@ -5,6 +5,7 @@
   import * as combobox from "@zag-js/combobox"
   import { comboboxControls, comboboxData } from "@zag-js/shared"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
+  import { matchSorter } from "match-sorter"
 
   const controls = useControls(comboboxControls)
 
@@ -25,8 +26,8 @@
       onOpenChange() {
         options = comboboxData
       },
-      onInputValueChange({ value }) {
-        const filtered = comboboxData.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
+      onInputValueChange({ inputValue }) {
+        const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
         const newOptions = filtered.length > 0 ? filtered : comboboxData
 
         collection.setItems(newOptions)
diff --git a/examples/vue-ts/package.json b/examples/vue-ts/package.json
index 22f4525c81..695c0e3bf9 100644
--- a/examples/vue-ts/package.json
+++ b/examples/vue-ts/package.json
@@ -47,7 +47,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -83,6 +82,7 @@
     "@zag-js/vue": "workspace:*",
     "epic-spinners": "2.0.0",
     "form-serialize": "0.7.2",
+    "match-sorter": "6.3.4",
     "lucide-vue-next": "0.368.0",
     "vite": "5.2.8",
     "vue": "3.4.21",
diff --git a/examples/vue-ts/src/pages/combobox.tsx b/examples/vue-ts/src/pages/combobox.tsx
index e5439e5e02..ae8e16e6e0 100644
--- a/examples/vue-ts/src/pages/combobox.tsx
+++ b/examples/vue-ts/src/pages/combobox.tsx
@@ -1,6 +1,7 @@
 import * as combobox from "@zag-js/combobox"
 import { comboboxControls, comboboxData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
+import { matchSorter } from "match-sorter"
 import { computed, defineComponent, ref } from "vue"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -26,8 +27,8 @@ export default defineComponent({
         onOpenChange() {
           options.value = comboboxData
         },
-        onInputValueChange({ value }) {
-          const filtered = comboboxData.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
+        onInputValueChange({ inputValue }) {
+          const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
           options.value = filtered.length > 0 ? filtered : comboboxData
         },
       }),
diff --git a/packages/core/src/merge-props.ts b/packages/core/src/merge-props.ts
index f5fa64b7b0..8bc2977f04 100644
--- a/packages/core/src/merge-props.ts
+++ b/packages/core/src/merge-props.ts
@@ -46,7 +46,7 @@ export function mergeProps<T extends Props>(...args: T[]): UnionToIntersection<T
   for (let props of args) {
     for (let key in result) {
       if (eventRegex.test(key) && typeof result[key] === "function" && typeof props[key] === "function") {
-        result[key] = callAll(result[key], props[key])
+        result[key] = callAll(props[key], result[key])
         continue
       }
 
diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json
index 30b3733b11..cbe51663f6 100644
--- a/packages/docs/data/api.json
+++ b/packages/docs/data/api.json
@@ -629,11 +629,19 @@
         "description": "Function to set the collection of items"
       },
       "reposition": {
-        "type": "(options: Partial<PositioningOptions>) => void",
+        "type": "(options?: Partial<PositioningOptions>) => void",
         "description": "Function to set the positioning options"
       }
     },
     "context": {
+      "open": {
+        "type": "boolean",
+        "description": "Whether the combobox is open"
+      },
+      "open.controlled": {
+        "type": "boolean",
+        "description": "Whether the combobox open state is controlled by the user"
+      },
       "ids": {
         "type": "Partial<{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item(id: string, index?: number): string; positioner: string; itemGroup(id: string | number): string; itemGroupLabel(id: string | number): string; }>",
         "description": "The ids of the elements in the combobox. Useful for composition."
@@ -682,10 +690,6 @@
         "type": "\"clear\" | \"replace\" | \"preserve\"",
         "description": "The behavior of the combobox input when an item is selected\n\n- `replace`: The selected item string is set as the input value\n- `clear`: The input value is cleared\n- `preserve`: The input value is preserved"
       },
-      "selectOnBlur": {
-        "type": "boolean",
-        "description": "Whether to select the higlighted item on interaction outside the combobox"
-      },
       "autoFocus": {
         "type": "boolean",
         "description": "Whether to autofocus the input on mount"
@@ -694,11 +698,15 @@
         "type": "boolean",
         "description": "Whether to open the combobox popup on initial click on the input"
       },
+      "openOnChange": {
+        "type": "boolean | ((details: InputValueChangeDetails) => boolean)",
+        "description": "Whether to show the combobox when the input value changes"
+      },
       "allowCustomValue": {
         "type": "boolean",
-        "description": "Whether to allow custom values or free values in the input"
+        "description": "Whether to allow typing custom values in the input"
       },
-      "loop": {
+      "loopFocus": {
         "type": "boolean",
         "description": "Whether to loop the keyboard navigation through the items"
       },
@@ -738,6 +746,26 @@
         "type": "boolean",
         "description": "Whether to close the combobox when an item is selected."
       },
+      "getSelectionValue": {
+        "type": "(details: SelectionValueDetails<T>) => string",
+        "description": "Function to get the display value of the selected item"
+      },
+      "openOnKeyPress": {
+        "type": "boolean",
+        "description": "Whether to open the combobox on arrow key press"
+      },
+      "scrollToIndexFn": {
+        "type": "(details: ScrollToIndexDetails) => void",
+        "description": "Function to scroll to a specific index"
+      },
+      "popup": {
+        "type": "\"listbox\" | \"dialog\"",
+        "description": "The underling `aria-haspopup` attribute to use for the combobox\n- `listbox`: The combobox has a listbox popup (default)\n- `dialog`: The combobox has a dialog popup. Useful when in select only mode"
+      },
+      "dismissable": {
+        "type": "boolean",
+        "description": "Whether to register this combobox as a dismissable layer"
+      },
       "dir": {
         "type": "\"ltr\" | \"rtl\"",
         "description": "The document's text/writing direction.",
@@ -1098,7 +1126,7 @@
         "type": "boolean",
         "description": "Whether to close the dialog when the outside is clicked"
       },
-      "closeOnEscapeKeyDown": {
+      "closeOnEscape": {
         "type": "boolean",
         "description": "Whether to close the dialog when the escape key is pressed"
       },
@@ -1653,7 +1681,7 @@
         "type": "Point",
         "description": "The positioning point for the menu. Can be set by the context menu trigger or the button trigger."
       },
-      "loop": {
+      "loopFocus": {
         "type": "boolean",
         "description": "Whether to loop the keyboard navigation."
       },
@@ -1681,6 +1709,10 @@
         "type": "boolean",
         "description": "Whether the menu's open state is controlled by the user"
       },
+      "typeahead": {
+        "type": "boolean",
+        "description": "Whether the pressing printable characters should trigger typeahead navigation"
+      },
       "dir": {
         "type": "\"ltr\" | \"rtl\"",
         "description": "The document's text/writing direction.",
@@ -2520,7 +2552,7 @@
         "description": "Function to set the collection of items"
       },
       "reposition": {
-        "type": "(options: Partial<PositioningOptions>) => void",
+        "type": "(options?: Partial<PositioningOptions>) => void",
         "description": "Function to set the positioning options of the select"
       }
     },
@@ -2557,10 +2589,6 @@
         "type": "boolean",
         "description": "Whether the select should close after an item is selected"
       },
-      "selectOnBlur": {
-        "type": "boolean",
-        "description": "Whether to select the highlighted item when the user presses Tab,\nand the menu is open."
-      },
       "onHighlightChange": {
         "type": "(details: HighlightChangeDetails<T>) => void",
         "description": "The callback fired when the highlighted item changes."
@@ -2585,7 +2613,7 @@
         "type": "string",
         "description": "The key of the highlighted item"
       },
-      "loop": {
+      "loopFocus": {
         "type": "boolean",
         "description": "Whether to loop the keyboard navigation through the options"
       },
@@ -3045,7 +3073,7 @@
         "type": "IntlTranslations",
         "description": "Specifies the localized strings that identifies the accessibility elements and their states"
       },
-      "loop": {
+      "loopFocus": {
         "type": "boolean",
         "description": "Whether the keyboard navigation will loop from last tab to first, and vice versa.",
         "defaultValue": "true"
@@ -3180,7 +3208,7 @@
         "type": "boolean",
         "description": "Whether the tags input is invalid"
       },
-      "allowEditTag": {
+      "editable": {
         "type": "boolean",
         "description": "Whether a tag can be edited after creation.\nIf `true` and focus is on a tag, pressing `Enter`or double clicking will edit the tag."
       },
@@ -3196,6 +3224,10 @@
         "type": "(details: ValueChangeDetails) => void",
         "description": "Callback fired when the tag values is updated"
       },
+      "onInputValueChange": {
+        "type": "(details: InputValueChangeDetails) => void",
+        "description": "Callback fired when the input value is updated"
+      },
       "onHighlightChange": {
         "type": "(details: HighlightChangeDetails) => void",
         "description": "Callback fired when a tag is highlighted by pointer or keyboard navigation"
@@ -3292,7 +3324,7 @@
         "type": "(details: ValueChangeDetails) => void",
         "description": "Function to call when the toggle is clicked."
       },
-      "loop": {
+      "loopFocus": {
         "type": "boolean",
         "description": "Whether to loop focus inside the toggle group."
       },
diff --git a/packages/machines/avatar/package.json b/packages/machines/avatar/package.json
index 1a7ee605ca..f2551d99ed 100644
--- a/packages/machines/avatar/package.json
+++ b/packages/machines/avatar/package.json
@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/core": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/utils": "workspace:*",
diff --git a/packages/machines/avatar/src/avatar.machine.ts b/packages/machines/avatar/src/avatar.machine.ts
index 9362e23116..a7a9b89502 100644
--- a/packages/machines/avatar/src/avatar.machine.ts
+++ b/packages/machines/avatar/src/avatar.machine.ts
@@ -1,5 +1,5 @@
 import { createMachine } from "@zag-js/core"
-import { observeAttributes, observeChildren } from "@zag-js/mutation-observer"
+import { observeAttributes, observeChildren } from "@zag-js/dom-query"
 import { compact } from "@zag-js/utils"
 import { dom } from "./avatar.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./avatar.types"
@@ -61,19 +61,24 @@ export function machine(userContext: UserDefinedContext) {
     {
       activities: {
         trackSrcChange(ctx, _evt, { send }) {
-          const img = dom.getImageEl(ctx)
-          return observeAttributes(img, ["src", "srcset"], () => {
-            send({ type: "SRC.CHANGE" })
+          const imageEl = dom.getImageEl(ctx)
+          return observeAttributes(imageEl, {
+            attributes: ["src", "srcset"],
+            callback() {
+              send({ type: "SRC.CHANGE" })
+            },
           })
         },
         trackImageRemoval(ctx, _evt, { send }) {
           const rootEl = dom.getRootEl(ctx)
-          return observeChildren(rootEl, (records) => {
-            const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]
-            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"))
-            if (removed) {
-              send({ type: "IMG.UNMOUNT" })
-            }
+          return observeChildren(rootEl, {
+            callback(records) {
+              const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]
+              const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"))
+              if (removed) {
+                send({ type: "IMG.UNMOUNT" })
+              }
+            },
           })
         },
       },
diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts
index 7960614125..cb1397d1e6 100644
--- a/packages/machines/color-picker/src/color-picker.connect.ts
+++ b/packages/machines/color-picker/src/color-picker.connect.ts
@@ -5,7 +5,7 @@ import {
   getEventStep,
   getNativeEvent,
   isLeftClick,
-  isModifiedEvent,
+  isModifierKey,
   type EventKeyMap,
 } from "@zag-js/dom-event"
 import { dataAttr, query } from "@zag-js/dom-query"
@@ -191,7 +191,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           if (!isInteractive) return
 
           const evt = getNativeEvent(event)
-          if (!isLeftClick(evt) || isModifiedEvent(evt)) return
+          if (!isLeftClick(evt) || isModifierKey(evt)) return
 
           const point = getEventPoint(evt)
           const channel = { xChannel, yChannel }
@@ -333,7 +333,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           if (!isInteractive) return
 
           const evt = getNativeEvent(event)
-          if (!isLeftClick(evt) || isModifiedEvent(evt)) return
+          if (!isLeftClick(evt) || isModifierKey(evt)) return
 
           const point = getEventPoint(evt)
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation })
diff --git a/packages/machines/combobox/package.json b/packages/machines/combobox/package.json
index e7975e07f7..d01531253f 100644
--- a/packages/machines/combobox/package.json
+++ b/packages/machines/combobox/package.json
@@ -32,7 +32,6 @@
     "@zag-js/collection": "workspace:*",
     "@zag-js/core": "workspace:*",
     "@zag-js/dismissable": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/dom-event": "workspace:*",
     "@zag-js/utils": "workspace:*",
diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts
index ad09f1f18b..78953d1daf 100644
--- a/packages/machines/combobox/src/combobox.connect.ts
+++ b/packages/machines/combobox/src/combobox.connect.ts
@@ -1,5 +1,12 @@
-import { getEventKey, getNativeEvent, isContextMenuEvent, isLeftClick, type EventKeyMap } from "@zag-js/dom-event"
-import { ariaAttr, dataAttr, raf } from "@zag-js/dom-query"
+import {
+  clickIfLink,
+  getEventKey,
+  getNativeEvent,
+  isContextMenuEvent,
+  isLeftClick,
+  type EventKeyMap,
+} from "@zag-js/dom-event"
+import { ariaAttr, dataAttr, isDownloadingEvent, isOpeningInNewTab, raf } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./combobox.anatomy"
@@ -21,6 +28,7 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
 
   const isOpen = state.hasTag("open")
   const isFocused = state.hasTag("focused")
+  const isDialogPopup = state.context.popup === "dialog"
 
   const popperStyles = getPlacementStyles({
     ...state.context.positioning,
@@ -80,9 +88,11 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       dom.getInputEl(state.context)?.focus()
     },
     open() {
+      if (isOpen) return
       send("OPEN")
     },
     close() {
+      if (!isOpen) return
       send("CLOSE")
     },
 
@@ -103,6 +113,11 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
+      onClick(event) {
+        if (!isDialogPopup) return
+        event.preventDefault()
+        dom.getTriggerEl(state.context)?.focus({ preventScroll: true })
+      },
     }),
 
     controlProps: normalize.element({
@@ -142,21 +157,14 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       role: "combobox",
       defaultValue: state.context.inputValue,
       "aria-autocomplete": state.context.autoComplete ? "both" : "list",
-      "aria-controls": isOpen ? dom.getContentId(state.context) : undefined,
+      "aria-controls": isDialogPopup ? dom.getListId(state.context) : dom.getContentId(state.context),
       "aria-expanded": isOpen,
       "data-state": isOpen ? "open" : "closed",
       "aria-activedescendant": state.context.highlightedValue
         ? dom.getItemId(state.context, state.context.highlightedValue)
         : undefined,
-      onCompositionStart() {
-        send("INPUT.COMPOSITION_START")
-      },
-      onCompositionEnd() {
-        raf(() => {
-          send("INPUT.COMPOSITION_END")
-        })
-      },
       onClick() {
+        if (!state.context.openOnClick) return
         if (!isInteractive) return
         send("INPUT.CLICK")
       },
@@ -177,45 +185,47 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
         const evt = getNativeEvent(event)
         if (evt.ctrlKey || evt.shiftKey || evt.isComposing) return
 
+        const openOnKeyPress = state.context.openOnKeyPress
+        const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey
+        const keypress = true
+
         const keymap: EventKeyMap = {
           ArrowDown(event) {
-            send({ type: event.altKey ? "INPUT.ARROW_DOWN+ALT" : "INPUT.ARROW_DOWN" })
+            if (!openOnKeyPress && !isOpen) return
+            send({ type: event.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress })
             event.preventDefault()
-            event.stopPropagation()
           },
           ArrowUp() {
-            send(event.altKey ? "INPUT.ARROW_UP+ALT" : "INPUT.ARROW_UP")
+            if (!openOnKeyPress && !isOpen) return
+            send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress })
             event.preventDefault()
-            event.stopPropagation()
           },
           Home(event) {
-            const isModified = event.ctrlKey || event.metaKey || event.shiftKey
-            if (isModified) return
-            send("INPUT.HOME")
+            if (isModifierKey) return
+            send({ type: "INPUT.HOME", keypress })
             if (isOpen) {
               event.preventDefault()
-              event.stopPropagation()
             }
           },
           End(event) {
-            const isModified = event.ctrlKey || event.metaKey || event.shiftKey
-            if (isModified) return
-            send("INPUT.END")
+            if (isModifierKey) return
+            send({ type: "INPUT.END", keypress })
             if (isOpen) {
               event.preventDefault()
-              event.stopPropagation()
             }
           },
-          Enter() {
-            if (state.context.composing) return
-            send("INPUT.ENTER")
-            event.preventDefault()
-            event.stopPropagation()
+          Enter(event) {
+            if (evt.isComposing) return
+            send({ type: "INPUT.ENTER", keypress })
+            if (isOpen) {
+              event.preventDefault()
+            }
+            const itemEl = dom.getHighlightedItemEl(state.context)
+            clickIfLink(itemEl)
           },
           Escape() {
-            send("INPUT.ESCAPE")
+            send({ type: "INPUT.ESCAPE", keypress })
             event.preventDefault()
-            // don't stop propagation. this is handled by the dismissable layer
           },
         }
 
@@ -229,9 +239,9 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       ...parts.trigger.attrs,
       dir: state.context.dir,
       id: dom.getTriggerId(state.context),
-      "aria-haspopup": "listbox",
+      "aria-haspopup": isDialogPopup ? "dialog" : "listbox",
       type: "button",
-      tabIndex: -1,
+      tabIndex: isDialogPopup ? 0 : -1,
       "aria-label": translations.triggerLabel,
       "aria-expanded": isOpen,
       "data-state": isOpen ? "open" : "closed",
@@ -239,35 +249,72 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       disabled: isDisabled,
       "data-readonly": dataAttr(isReadOnly),
       "data-disabled": dataAttr(isDisabled),
-      onPointerDown(event) {
+      onClick(event) {
         const evt = getNativeEvent(event)
-        if (!isInteractive || !isLeftClick(evt) || evt.pointerType === "touch") return
+        if (!isInteractive) return
+        if (!isLeftClick(evt)) return
         send("TRIGGER.CLICK")
+      },
+      onPointerDown(event) {
+        if (!isInteractive) return
+        if (event.pointerType === "touch") return
         event.preventDefault()
+        queueMicrotask(() => {
+          dom.getInputEl(state.context)?.focus({ preventScroll: true })
+        })
       },
-      onPointerUp(event) {
-        if (event.pointerType !== "touch") return
-        send("TRIGGER.CLICK")
+      onKeyDown(event) {
+        if (!isDialogPopup) return
+        const keyMap: EventKeyMap = {
+          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)
+          event.preventDefault()
+        }
       },
-      style: { outline: 0 },
     }),
 
     contentProps: normalize.element({
       ...parts.content.attrs,
       dir: state.context.dir,
       id: dom.getContentId(state.context),
-      role: "listbox",
+      role: isDialogPopup ? "dialog" : "listbox",
       tabIndex: -1,
       hidden: !isOpen,
       "data-state": isOpen ? "open" : "closed",
       "aria-labelledby": dom.getLabelId(state.context),
-      "aria-multiselectable": state.context.multiple ? true : undefined,
+      "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : undefined,
       onPointerDown(event) {
         // prevent options or elements within listbox from taking focus
         event.preventDefault()
       },
     }),
 
+    // only used when triggerOnly: true
+    listProps: normalize.element({
+      id: dom.getListId(state.context),
+      role: isDialogPopup ? "listbox" : undefined,
+      "aria-multiselectable": isDialogPopup && state.context.multiple ? true : undefined,
+    }),
+
     clearTriggerProps: normalize.button({
       ...parts.clearTrigger.attrs,
       dir: state.context.dir,
@@ -276,12 +323,11 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       tabIndex: -1,
       disabled: isDisabled,
       "aria-label": translations.clearTriggerLabel,
+      "aria-controls": dom.getInputId(state.context),
       hidden: !state.context.value.length,
-      onPointerDown(event) {
-        const evt = getNativeEvent(event)
-        if (!isInteractive || !isLeftClick(evt)) return
+      onClick() {
+        if (!isInteractive) return
         send({ type: "VALUE.CLEAR", src: "clear-trigger" })
-        event.preventDefault()
       },
     }),
 
@@ -305,14 +351,20 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
         "data-value": itemState.value,
         onPointerMove() {
           if (itemState.isDisabled) return
-          send({ type: "ITEM.POINTER_OVER", value })
+          send({ type: "ITEM.POINTER_MOVE", value })
         },
         onPointerLeave() {
+          if (props.persistFocus) return
           if (itemState.isDisabled) return
+          const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE"
+          if (!mouseMoved) return
           send({ type: "ITEM.POINTER_LEAVE", value })
         },
         onPointerUp(event) {
-          if (itemState.isDisabled || isContextMenuEvent(event)) return
+          if (isDownloadingEvent(event)) return
+          if (isOpeningInNewTab(event)) return
+          if (isContextMenuEvent(event)) return
+          if (itemState.isDisabled) return
           send({ type: "ITEM.CLICK", src: "pointerup", value })
         },
         onTouchEnd(event) {
diff --git a/packages/machines/combobox/src/combobox.dom.ts b/packages/machines/combobox/src/combobox.dom.ts
index 9e022cab15..a33538618e 100644
--- a/packages/machines/combobox/src/combobox.dom.ts
+++ b/packages/machines/combobox/src/combobox.dom.ts
@@ -7,6 +7,7 @@ export const dom = createScope({
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
   getInputId: (ctx: Ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
   getContentId: (ctx: Ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
+  getListId: (ctx: Ctx) => `combobox:${ctx.id}:listbox`,
   getPositionerId: (ctx: Ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
   getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
   getClearTriggerId: (ctx: Ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
@@ -16,6 +17,7 @@ export const dom = createScope({
   getItemId: (ctx: Ctx, id: string) => `combobox:${ctx.id}:option:${id}`,
 
   getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(ctx)),
   getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),
   getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts
index 574e45d8ad..9fedb7009c 100644
--- a/packages/machines/combobox/src/combobox.machine.ts
+++ b/packages/machines/combobox/src/combobox.machine.ts
@@ -1,37 +1,39 @@
 import { ariaHidden } from "@zag-js/aria-hidden"
 import { createMachine, guards } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { raf, scrollIntoView } from "@zag-js/dom-query"
-import { observeAttributes, observeChildren } from "@zag-js/mutation-observer"
+import { observeAttributes, observeChildren, raf, scrollIntoView } from "@zag-js/dom-query"
 import { getPlacement } from "@zag-js/popper"
-import { addOrRemove, compact, isEqual, match } from "@zag-js/utils"
+import { addOrRemove, compact, isBoolean, isEqual, match } from "@zag-js/utils"
 import { collection } from "./combobox.collection"
 import { dom } from "./combobox.dom"
 import type { CollectionItem, MachineContext, MachineState, UserDefinedContext } from "./combobox.types"
 
 const { and, not } = guards
 
-const KEYDOWN_EVENT_REGEX = /(ARROW_UP|ARROW_DOWN|HOME|END|ENTER|ESCAPE)/
-
 export function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>) {
   const ctx = compact(userContext)
   return createMachine<MachineContext, MachineState>(
     {
       id: "combobox",
-      initial: ctx.autoFocus ? "focused" : "idle",
+      initial: ctx.open ? "suggesting" : "idle",
       context: {
-        loop: true,
+        loopFocus: true,
         openOnClick: false,
-        composing: false,
         value: [],
         highlightedValue: null,
         inputValue: "",
-        selectOnBlur: true,
         allowCustomValue: false,
-        closeOnSelect: true,
+        closeOnSelect: !ctx.multiple,
         inputBehavior: "none",
         selectionBehavior: "replace",
+        openOnKeyPress: true,
+        openOnChange: true,
+        dismissable: true,
+        popup: "listbox",
         ...ctx,
+        highlightedItem: null,
+        selectedItems: [],
+        valueAsString: "",
         collection: ctx.collection ?? collection.empty(),
         positioning: {
           placement: "bottom",
@@ -46,22 +48,22 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         },
       },
 
-      created: ["initialize"],
+      created: ["syncInitialValues", "syncSelectionBehavior"],
 
       computed: {
         isInputValueEmpty: (ctx) => ctx.inputValue.length === 0,
         isInteractive: (ctx) => !(ctx.readOnly || ctx.disabled),
         autoComplete: (ctx) => ctx.inputBehavior === "autocomplete",
         autoHighlight: (ctx) => ctx.inputBehavior === "autohighlight",
-        selectedItems: (ctx) => ctx.collection.items(ctx.value),
-        highlightedItem: (ctx) => ctx.collection.item(ctx.highlightedValue),
-        valueAsString: (ctx) => ctx.collection.itemsToString(ctx.selectedItems),
         hasSelectedItems: (ctx) => ctx.value.length > 0,
       },
 
       watch: {
+        value: ["syncSelectedItems"],
         inputValue: ["syncInputValue"],
         highlightedValue: ["autofillInputValue"],
+        multiple: ["syncSelectionBehavior"],
+        open: ["toggleVisibility"],
       },
 
       on: {
@@ -80,16 +82,6 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         "INPUT_VALUE.SET": {
           actions: "setInputValue",
         },
-        "VALUE.CLEAR": {
-          target: "focused",
-          actions: ["clearInputValue", "clearSelectedItems"],
-        },
-        "INPUT.COMPOSITION_START": {
-          actions: ["setIsComposing"],
-        },
-        "INPUT.COMPOSITION_END": {
-          actions: ["clearIsComposing"],
-        },
         "COLLECTION.SET": {
           actions: ["setCollection"],
         },
@@ -103,33 +95,76 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
           tags: ["idle", "closed"],
           entry: ["scrollContentToTop", "clearHighlightedItem"],
           on: {
-            "TRIGGER.CLICK": {
+            "CONTROLLED.OPEN": {
               target: "interacting",
-              actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"],
-            },
-            "INPUT.CLICK": {
-              guard: "openOnClick",
-              target: "interacting",
-              actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
             },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+            ],
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+            ],
             "INPUT.FOCUS": {
               target: "focused",
             },
-            OPEN: {
-              target: "interacting",
-              actions: ["invokeOnOpen"],
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"],
+              },
+            ],
+            "VALUE.CLEAR": {
+              target: "focused",
+              actions: ["clearInputValue", "clearSelectedItems"],
             },
           },
         },
 
         focused: {
           tags: ["focused", "closed"],
-          entry: ["focusInput", "scrollContentToTop", "clearHighlightedItem"],
+          entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
           on: {
-            "INPUT.CHANGE": {
-              target: "suggesting",
-              actions: "setInputValue",
-            },
+            "CONTROLLED.OPEN": [
+              {
+                guard: "isChangeEvent",
+                target: "suggesting",
+              },
+              {
+                target: "interacting",
+              },
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: and("isOpenControlled", "openOnChange"),
+                actions: ["setInputValue", "invokeOnOpen"],
+              },
+              {
+                guard: "openOnChange",
+                target: "suggesting",
+                actions: ["setInputValue", "invokeOnOpen"],
+              },
+              {
+                actions: "setInputValue",
+              },
+            ],
             "LAYER.INTERACT_OUTSIDE": {
               target: "idle",
             },
@@ -140,62 +175,104 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
             "INPUT.BLUR": {
               target: "idle",
             },
-            "INPUT.CLICK": {
-              guard: "openOnClick",
-              target: "interacting",
-              actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
-            },
-            "TRIGGER.CLICK": {
-              target: "interacting",
-              actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"],
-            },
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"],
+              },
+            ],
             "INPUT.ARROW_DOWN": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["invokeOnOpen"],
+              },
               {
                 guard: "autoComplete",
                 target: "interacting",
                 actions: ["invokeOnOpen"],
               },
+              // == group 2 ==
               {
-                guard: "hasSelectedItems",
-                target: "interacting",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
+                guard: "isOpenControlled",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"],
               },
               {
                 target: "interacting",
-                actions: ["highlightFirstItem", "invokeOnOpen"],
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"],
               },
             ],
-            "INPUT.ARROW_DOWN+ALT": {
-              target: "interacting",
-              actions: "invokeOnOpen",
-            },
             "INPUT.ARROW_UP": [
+              // == group 1 ==
               {
                 guard: "autoComplete",
                 target: "interacting",
                 actions: "invokeOnOpen",
               },
               {
-                guard: "hasSelectedItems",
+                guard: "autoComplete",
                 target: "interacting",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"],
+                actions: "invokeOnOpen",
               },
+              // == group 2 ==
               {
                 target: "interacting",
-                actions: ["highlightLastItem", "invokeOnOpen"],
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"],
               },
             ],
-            OPEN: {
-              target: "interacting",
-              actions: ["invokeOnOpen"],
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"],
+              },
+            ],
+            "VALUE.CLEAR": {
+              actions: ["clearInputValue", "clearSelectedItems"],
             },
           },
         },
 
         interacting: {
           tags: ["open", "focused"],
-          activities: ["scrollIntoView", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
+          activities: [
+            "scrollIntoView",
+            "trackDismissableLayer",
+            "computePlacement",
+            "hideOtherElements",
+            "trackContentHeight",
+          ],
           on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused",
+              },
+              {
+                target: "idle",
+              },
+            ],
             "INPUT.HOME": {
               actions: ["highlightFirstItem"],
             },
@@ -220,31 +297,32 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
                 actions: "highlightPrevItem",
               },
             ],
-            "INPUT.ARROW_UP+ALT": {
-              target: "focused",
-            },
             "INPUT.ENTER": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectHighlightedItem"],
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"],
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectHighlightedItem", "invokeOnClose"],
               },
+              {
+                actions: ["selectHighlightedItem"],
+              },
             ],
             "INPUT.CHANGE": [
               {
                 guard: "autoComplete",
                 target: "suggesting",
-                actions: ["setInputValue"],
+                actions: ["setInputValue", "invokeOnOpen"],
               },
               {
                 target: "suggesting",
-                actions: ["clearHighlightedItem", "setInputValue"],
+                actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"],
               },
             ],
-            "ITEM.POINTER_OVER": {
+            "ITEM.POINTER_MOVE": {
               actions: ["setHighlightedItem"],
             },
             "ITEM.POINTER_LEAVE": {
@@ -252,49 +330,88 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
             },
             "ITEM.CLICK": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectItem"],
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"],
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectItem", "invokeOnClose"],
               },
+              {
+                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"],
               },
             ],
-            "TRIGGER.CLICK": {
-              target: "focused",
-              actions: "invokeOnClose",
-            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose",
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose",
+              },
+            ],
             "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
               {
-                guard: and("selectOnBlur", "hasHighlightedItem"),
-                target: "idle",
-                actions: ["selectHighlightedItem", "invokeOnClose"],
+                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: {
-              target: "focused",
-              actions: "invokeOnClose",
-            },
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose",
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose",
+              },
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"],
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"],
+              },
+            ],
           },
         },
 
@@ -306,11 +423,20 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
             "computePlacement",
             "trackChildNodes",
             "hideOtherElements",
+            "trackContentHeight",
           ],
-          entry: ["focusInput", "invokeOnOpen"],
+          entry: ["focusInput"],
           on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused",
+              },
+              {
+                target: "idle",
+              },
+            ],
             CHILDREN_CHANGE: {
-              guard: not("isHighlightedItemVisible"),
               actions: ["highlightFirstItem"],
             },
             "INPUT.ARROW_DOWN": {
@@ -321,9 +447,6 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
               target: "interacting",
               actions: "highlightPrevItem",
             },
-            "INPUT.ARROW_UP+ALT": {
-              target: "focused",
-            },
             "INPUT.HOME": {
               target: "interacting",
               actions: ["highlightFirstItem"],
@@ -334,28 +457,38 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
             },
             "INPUT.ENTER": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectHighlightedItem"],
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"],
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectHighlightedItem", "invokeOnClose"],
               },
+              {
+                actions: ["selectHighlightedItem"],
+              },
             ],
             "INPUT.CHANGE": [
               {
                 guard: "autoHighlight",
-                actions: ["setInputValue", "highlightFirstItem"],
+                actions: ["setInputValue"],
               },
               {
-                actions: ["clearHighlightedItem", "setInputValue"],
+                actions: ["setInputValue"],
               },
             ],
-            "LAYER.ESCAPE": {
-              target: "focused",
-              actions: "invokeOnClose",
-            },
-            "ITEM.POINTER_OVER": {
+            "LAYER.ESCAPE": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose",
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose",
+              },
+            ],
+            "ITEM.POINTER_MOVE": {
               target: "interacting",
               actions: "setHighlightedItem",
             },
@@ -363,34 +496,70 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
               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": {
-              target: "focused",
-              actions: "invokeOnClose",
-            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose",
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose",
+              },
+            ],
             "ITEM.CLICK": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectItem"],
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"],
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectItem", "invokeOnClose"],
               },
+              {
+                actions: ["selectItem"],
+              },
+            ],
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose",
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose",
+              },
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"],
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"],
+              },
             ],
-            CLOSE: {
-              target: "focused",
-              actions: "invokeOnClose",
-            },
           },
         },
       },
@@ -398,7 +567,6 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
 
     {
       guards: {
-        openOnClick: (ctx) => !!ctx.openOnClick,
         isInputValueEmpty: (ctx) => ctx.isInputValueEmpty,
         autoComplete: (ctx) => ctx.autoComplete && !ctx.multiple,
         autoHighlight: (ctx) => ctx.autoHighlight,
@@ -407,23 +575,23 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         isCustomValue: (ctx) => ctx.inputValue !== ctx.valueAsString,
         allowCustomValue: (ctx) => !!ctx.allowCustomValue,
         hasHighlightedItem: (ctx) => ctx.highlightedValue != null,
-        hasSelectedItems: (ctx) => ctx.hasSelectedItems,
-        selectOnBlur: (ctx) => !!ctx.selectOnBlur,
-        closeOnSelect: (ctx) => (ctx.multiple ? false : !!ctx.closeOnSelect),
-        isHighlightedItemVisible: (ctx) => ctx.collection.has(ctx.highlightedValue),
+        closeOnSelect: (ctx) => !!ctx.closeOnSelect,
+        isOpenControlled: (ctx) => !!ctx["open.controlled"],
+        openOnChange: (ctx, evt) => {
+          if (isBoolean(ctx.openOnChange)) return ctx.openOnChange
+          return !!ctx.openOnChange?.({ inputValue: evt.value })
+        },
+        restoreFocus: (_ctx, evt) => (evt.restoreFocus == null ? true : !!evt.restoreFocus),
+        isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE",
       },
 
       activities: {
         trackDismissableLayer(ctx, _evt, { send }) {
+          if (!ctx.dismissable) return
           const contentEl = () => dom.getContentEl(ctx)
           return trackDismissableElement(contentEl, {
             defer: true,
-            exclude: () => [
-              dom.getInputEl(ctx),
-              dom.getContentEl(ctx),
-              dom.getTriggerEl(ctx),
-              dom.getClearTriggerEl(ctx),
-            ],
+            exclude: () => [dom.getInputEl(ctx), dom.getTriggerEl(ctx), dom.getClearTriggerEl(ctx)],
             onFocusOutside: ctx.onFocusOutside,
             onPointerDownOutside: ctx.onPointerDownOutside,
             onInteractOutside: ctx.onInteractOutside,
@@ -433,7 +601,7 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
               send("LAYER.ESCAPE")
             },
             onDismiss() {
-              send("LAYER.INTERACT_OUTSIDE")
+              send({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: false })
             },
           })
         },
@@ -456,26 +624,64 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         trackChildNodes(ctx, _evt, { send }) {
           if (!ctx.autoHighlight) return
           const exec = () => send("CHILDREN_CHANGE")
-          exec()
-          return observeChildren(dom.getContentEl(ctx), exec)
+          raf(() => exec())
+          const contentEl = () => dom.getContentEl(ctx)
+          return observeChildren(contentEl, {
+            callback: exec,
+            defer: true,
+          })
         },
         scrollIntoView(ctx, _evt, { getState }) {
           const inputEl = dom.getInputEl(ctx)
 
-          const exec = () => {
+          const exec = (immediate: boolean) => {
             const state = getState()
 
-            const isPointer = state.event.type.startsWith("ITEM.POINTER")
-            if (isPointer || !ctx.highlightedValue) return
+            const pointer = state.event.type.startsWith("ITEM.POINTER")
+            if (pointer || !ctx.highlightedValue) return
 
             const optionEl = dom.getHighlightedItemEl(ctx)
             const contentEl = dom.getContentEl(ctx)
 
+            if (ctx.scrollToIndexFn) {
+              const highlightedIndex = ctx.collection.indexOf(ctx.highlightedValue)
+              ctx.scrollToIndexFn({ index: highlightedIndex, immediate })
+              return
+            }
+
             scrollIntoView(optionEl, { rootEl: contentEl, block: "nearest" })
           }
 
-          raf(() => exec())
-          return observeAttributes(inputEl, ["aria-activedescendant"], exec)
+          raf(() => exec(true))
+          return observeAttributes(inputEl, {
+            attributes: ["aria-activedescendant"],
+            callback: () => exec(false),
+          })
+        },
+        trackContentHeight(ctx) {
+          let cleanup: VoidFunction
+
+          raf(() => {
+            const contentEl = dom.getContentEl(ctx)
+            const listboxEl = dom.getListEl(ctx)
+
+            if (!contentEl || !listboxEl) return
+            const win = dom.getWin(ctx)
+
+            let rafId: number
+            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?.()
         },
       },
 
@@ -493,12 +699,6 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
             },
           })
         },
-        setIsComposing(ctx) {
-          ctx.composing = true
-        },
-        clearIsComposing(ctx) {
-          ctx.composing = false
-        },
         setHighlightedItem(ctx, evt) {
           set.highlightedItem(ctx, evt.value)
         },
@@ -516,19 +716,29 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
           set.selectedItems(ctx, value)
         },
         focusInput(ctx) {
-          if (dom.isInputFocused(ctx)) return
-          dom.getInputEl(ctx)?.focus({ preventScroll: true })
+          // use raf since the input might be rendered in the content
+          raf(() => {
+            if (dom.isInputFocused(ctx)) return
+            dom.getInputEl(ctx)?.focus({ preventScroll: true })
+          })
+        },
+        focusInputOrTrigger(ctx) {
+          queueMicrotask(() => {
+            if (ctx.popup === "dialog") {
+              dom.getTriggerEl(ctx)?.focus({ preventScroll: true })
+            } else {
+              dom.getInputEl(ctx)?.focus({ preventScroll: true })
+            }
+          })
         },
         syncInputValue(ctx, evt) {
-          const isTyping = !KEYDOWN_EVENT_REGEX.test(evt.type)
           const inputEl = dom.getInputEl(ctx)
-
           if (!inputEl) return
+
           inputEl.value = ctx.inputValue
 
           raf(() => {
-            if (isTyping) return
-
+            if (!evt.keypress) return
             const { selectionStart, selectionEnd } = inputEl
 
             if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0) return
@@ -544,24 +754,33 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
           set.inputValue(ctx, "")
         },
         revertInputValue(ctx) {
-          set.inputValue(
-            ctx,
-            match(ctx.selectionBehavior, {
-              replace: ctx.hasSelectedItems ? ctx.valueAsString : "",
-              clear: "",
-              preserve: ctx.inputValue,
-            }),
-          )
-        },
-        initialize(ctx) {
-          const items = ctx.collection.items(ctx.value)
-          const valueAsString = ctx.collection.itemsToString(items)
+          const inputValue = match(ctx.selectionBehavior, {
+            replace: ctx.hasSelectedItems ? ctx.valueAsString : "",
+            preserve: ctx.inputValue,
+            clear: "",
+          })
+
+          set.inputValue(ctx, inputValue)
+        },
+        syncInitialValues(ctx) {
+          const selectedItems = ctx.collection.items(ctx.value)
+          const valueAsString = ctx.collection.itemsToString(selectedItems)
+
+          ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue)
+          ctx.selectedItems = selectedItems
+          ctx.valueAsString = valueAsString
+
           ctx.inputValue = match(ctx.selectionBehavior, {
-            preserve: valueAsString,
+            preserve: ctx.inputValue || valueAsString,
             replace: valueAsString,
             clear: "",
           })
         },
+        syncSelectionBehavior(ctx) {
+          if (ctx.multiple) {
+            ctx.selectionBehavior = "clear"
+          }
+        },
         setSelectedItems(ctx, evt) {
           set.selectedItems(ctx, evt.value)
         },
@@ -569,9 +788,13 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
           set.selectedItems(ctx, [])
         },
         scrollContentToTop(ctx) {
-          const contentEl = dom.getContentEl(ctx)
-          if (!contentEl) return
-          contentEl.scrollTop = 0
+          if (ctx.scrollToIndexFn) {
+            ctx.scrollToIndexFn({ index: 0, immediate: true })
+          } else {
+            const contentEl = dom.getContentEl(ctx)
+            if (!contentEl) return
+            contentEl.scrollTop = 0
+          }
         },
         invokeOnOpen(ctx) {
           ctx.onOpenChange?.({ open: true })
@@ -580,28 +803,68 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
           ctx.onOpenChange?.({ open: false })
         },
         highlightFirstItem(ctx) {
-          const value = ctx.collection.first()
-          set.highlightedItem(ctx, value)
+          raf(() => {
+            const value = ctx.collection.first()
+            set.highlightedItem(ctx, value)
+          })
         },
         highlightLastItem(ctx) {
-          const value = ctx.collection.last()
-          set.highlightedItem(ctx, value)
+          raf(() => {
+            const value = ctx.collection.last()
+            set.highlightedItem(ctx, value)
+          })
         },
         highlightNextItem(ctx) {
-          const value = ctx.collection.next(ctx.highlightedValue) ?? (ctx.loop ? ctx.collection.first() : null)
+          let value: string | null = null
+          if (ctx.highlightedValue) {
+            value = ctx.collection.next(ctx.highlightedValue)
+            if (!value && ctx.loopFocus) value = ctx.collection.first()
+          } else {
+            value = ctx.collection.first()
+          }
           set.highlightedItem(ctx, value)
         },
         highlightPrevItem(ctx) {
-          const value = ctx.collection.prev(ctx.highlightedValue) ?? (ctx.loop ? ctx.collection.last() : null)
+          let value: string | null = null
+          if (ctx.highlightedValue) {
+            value = ctx.collection.prev(ctx.highlightedValue)
+            if (!value && ctx.loopFocus) value = ctx.collection.last()
+          } else {
+            value = ctx.collection.last()
+          }
           set.highlightedItem(ctx, value)
         },
         highlightFirstSelectedItem(ctx) {
-          const [value] = ctx.collection.sort(ctx.value)
-          set.highlightedItem(ctx, value)
+          raf(() => {
+            const [value] = ctx.collection.sort(ctx.value)
+            set.highlightedItem(ctx, value)
+          })
+        },
+        highlightFirstOrSelectedItem(ctx) {
+          raf(() => {
+            let value: string | null = null
+            if (ctx.hasSelectedItems) {
+              value = ctx.collection.sort(ctx.value)[0]
+            } else {
+              value = ctx.collection.first()
+            }
+            set.highlightedItem(ctx, value)
+          })
+        },
+        highlightLastOrSelectedItem(ctx) {
+          raf(() => {
+            let value: string | null = null
+            if (ctx.hasSelectedItems) {
+              value = ctx.collection.sort(ctx.value)[0]
+            } else {
+              value = ctx.collection.last()
+            }
+            set.highlightedItem(ctx, value)
+          })
         },
         autofillInputValue(ctx, evt) {
           const inputEl = dom.getInputEl(ctx)
-          if (!ctx.autoComplete || !inputEl || !KEYDOWN_EVENT_REGEX.test(evt.type)) return
+          if (!ctx.autoComplete || !inputEl || !evt.keypress) return
           const valueText = ctx.collection.valueToString(ctx.highlightedValue)
           raf(() => {
             inputEl.value = valueText || ctx.inputValue
@@ -610,33 +873,76 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         setCollection(ctx, evt) {
           ctx.collection = evt.value
         },
+        syncSelectedItems(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)
+          })
+        },
+        toggleVisibility(ctx, evt, { send }) {
+          send({ type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt })
+        },
       },
     },
   )
 }
 
 const invoke = {
-  selectionChange: (ctx: MachineContext) => {
+  valueChange: (ctx: MachineContext) => {
     ctx.onValueChange?.({
       value: Array.from(ctx.value),
       items: ctx.selectedItems,
     })
 
-    // side effect: sync inputValue
-    ctx.inputValue = match(ctx.selectionBehavior, {
-      replace: ctx.valueAsString,
-      clear: "",
-      preserve: ctx.inputValue,
+    const prevSelectedItems = ctx.selectedItems
+
+    // side effect
+    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 nextInputValue: string | undefined
+
+    if (ctx.getSelectionValue) {
+      //
+      nextInputValue = ctx.getSelectionValue({
+        inputValue: ctx.inputValue,
+        selectedItems: Array.from(ctx.selectedItems),
+        valueAsString,
+      })
+      //
+    } else {
+      //
+      nextInputValue = match(ctx.selectionBehavior, {
+        replace: ctx.valueAsString,
+        preserve: ctx.inputValue,
+        clear: "",
+      })
+    }
+
+    ctx.inputValue = nextInputValue
+
+    invoke.inputChange(ctx)
   },
   highlightChange: (ctx: MachineContext) => {
     ctx.onHighlightChange?.({
       highlightedValue: ctx.highlightedValue,
       highligtedItem: ctx.highlightedItem,
     })
+
+    // side effect
+    ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue)
   },
   inputChange: (ctx: MachineContext) => {
-    ctx.onInputValueChange?.({ value: ctx.inputValue })
+    ctx.onInputValueChange?.({ inputValue: ctx.inputValue })
   },
 }
 
@@ -648,16 +954,16 @@ const set = {
 
     if (value == null && force) {
       ctx.value = []
-      invoke.selectionChange(ctx)
+      invoke.valueChange(ctx)
       return
     }
     ctx.value = ctx.multiple ? addOrRemove(ctx.value, value!) : [value!]
-    invoke.selectionChange(ctx)
+    invoke.valueChange(ctx)
   },
   selectedItems: (ctx: MachineContext, value: string[]) => {
     if (isEqual(ctx.value, value)) return
     ctx.value = value
-    invoke.selectionChange(ctx)
+    invoke.valueChange(ctx)
   },
   highlightedItem: (ctx: MachineContext, value: string | null | undefined, force = false) => {
     if (isEqual(ctx.highlightedValue, value)) return
diff --git a/packages/machines/combobox/src/combobox.props.ts b/packages/machines/combobox/src/combobox.props.ts
index e4fdec26e1..5d5b7bdc40 100644
--- a/packages/machines/combobox/src/combobox.props.ts
+++ b/packages/machines/combobox/src/combobox.props.ts
@@ -6,18 +6,20 @@ export const props = createProps<UserDefinedContext>()([
   "allowCustomValue",
   "autoFocus",
   "closeOnSelect",
+  "collection",
   "dir",
   "disabled",
+  "dismissable",
   "form",
   "getRootNode",
+  "getSelectionValue",
   "highlightedValue",
   "id",
   "ids",
   "inputBehavior",
-  "collection",
   "inputValue",
   "invalid",
-  "loop",
+  "loopFocus",
   "multiple",
   "name",
   "onFocusOutside",
@@ -28,13 +30,18 @@ export const props = createProps<UserDefinedContext>()([
   "onOpenChange",
   "onPointerDownOutside",
   "onValueChange",
+  "open.controlled",
+  "open",
   "openOnClick",
+  "openOnChange",
+  "openOnKeyPress",
   "placeholder",
   "positioning",
   "readOnly",
+  "scrollToIndexFn",
   "selectionBehavior",
-  "selectOnBlur",
   "translations",
+  "popup",
   "value",
 ])
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
@@ -45,5 +52,5 @@ export const splitItemGroupLabelProps = createSplitProps<ItemGroupLabelProps>(it
 export const itemGroupProps = createProps<ItemGroupProps>()(["id"])
 export const splitItemGroupProps = createSplitProps<ItemGroupProps>(itemGroupProps)
 
-export const itemProps = createProps<ItemProps>()(["item"])
+export const itemProps = createProps<ItemProps>()(["item", "persistFocus"])
 export const splitItemProps = createSplitProps<ItemProps>(itemProps)
diff --git a/packages/machines/combobox/src/combobox.types.ts b/packages/machines/combobox/src/combobox.types.ts
index 3960c44f93..6bd495fac1 100644
--- a/packages/machines/combobox/src/combobox.types.ts
+++ b/packages/machines/combobox/src/combobox.types.ts
@@ -19,13 +19,24 @@ export interface HighlightChangeDetails<T extends CollectionItem = CollectionIte
 }
 
 export interface InputValueChangeDetails {
-  value: string
+  inputValue: string
 }
 
 export interface OpenChangeDetails {
   open: boolean
 }
 
+export interface SelectionValueDetails<T extends CollectionItem = CollectionItem> {
+  inputValue: string
+  selectedItems: T[]
+  valueAsString: string
+}
+
+export interface ScrollToIndexDetails {
+  index: number
+  immediate?: boolean
+}
+
 /* -----------------------------------------------------------------------------
  * Machine context
  * -----------------------------------------------------------------------------*/
@@ -53,6 +64,14 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
   extends DirectionProperty,
     CommonProperties,
     InteractOutsideHandlers {
+  /**
+   * Whether the combobox is open
+   */
+  open?: boolean
+  /**
+   * Whether the combobox open state is controlled by the user
+   */
+  "open.controlled"?: boolean
   /**
    * The ids of the elements in the combobox. Useful for composition.
    */
@@ -109,10 +128,6 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    * - `preserve`: The input value is preserved
    */
   selectionBehavior: "clear" | "replace" | "preserve"
-  /**
-   * Whether to select the higlighted item on interaction outside the combobox
-   */
-  selectOnBlur: boolean
   /**
    * Whether to autofocus the input on mount
    */
@@ -122,13 +137,17 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    */
   openOnClick?: boolean
   /**
-   * Whether to allow custom values or free values in the input
+   * Whether to show the combobox when the input value changes
+   */
+  openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean)
+  /**
+   * Whether to allow typing custom values in the input
    */
   allowCustomValue?: boolean
   /**
    * Whether to loop the keyboard navigation through the items
    */
-  loop?: boolean
+  loopFocus?: boolean
   /**
    * The positioning options to dynamically position the menu
    */
@@ -166,6 +185,28 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    * Whether to close the combobox when an item is selected.
    */
   closeOnSelect?: boolean
+  /**
+   * Function to get the display value of the selected item
+   */
+  getSelectionValue?: (details: SelectionValueDetails<T>) => string
+  /**
+   * Whether to open the combobox on arrow key press
+   */
+  openOnKeyPress: boolean
+  /**
+   * Function to scroll to a specific index
+   */
+  scrollToIndexFn?: (details: ScrollToIndexDetails) => void
+  /**
+   * The underling `aria-haspopup` attribute to use for the combobox
+   * - `listbox`: The combobox has a listbox popup (default)
+   * - `dialog`: The combobox has a dialog popup. Useful when in select only mode
+   */
+  popup: "listbox" | "dialog"
+  /**
+   * Whether to register this combobox as a dismissable layer
+   */
+  dismissable: boolean
 }
 
 export type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<
@@ -173,7 +214,7 @@ export type UserDefinedContext<T extends CollectionItem = CollectionItem> = Requ
   "id" | "collection"
 >
 
-type ComputedContext<T extends CollectionItem = CollectionItem> = Readonly<{
+type ComputedContext = Readonly<{
   /**
    * @computed
    * Whether the input's value is empty
@@ -192,38 +233,33 @@ type ComputedContext<T extends CollectionItem = CollectionItem> = Readonly<{
    * @computed
    */
   autoHighlight: boolean
-  /**
-   * The highlighted item
-   */
-  highlightedItem: T | null
-  /**
-   * @computed
-   * The selected items
-   */
-  selectedItems: T[]
   /**
    * @computed
    * Whether there's a selected option
    */
   hasSelectedItems: boolean
-  /**
-   * @computed
-   * The display value of the combobox (based on the selected items)
-   */
-  valueAsString: string
 }>
 
-interface PrivateContext {
+interface PrivateContext<T extends CollectionItem = CollectionItem> {
   /**
    * @internal
    * The placement of the combobox popover.
    */
   currentPlacement?: Placement
   /**
-   * @internal
-   * Whether the user is composing text in the input
+   * The highlighted item
    */
-  composing: boolean
+  highlightedItem: T | null
+  /**
+   * @interal
+   * The selected items
+   */
+  selectedItems: T[]
+  /**
+   * @interal
+   * The display value of the combobox (based on the selected items)
+   */
+  valueAsString: string
 }
 
 export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
@@ -242,6 +278,7 @@ export type Send = S.Send<S.AnyEventObject>
  * -----------------------------------------------------------------------------*/
 
 export interface ItemProps {
+  persistFocus?: boolean
   item: CollectionItem
 }
 
@@ -348,7 +385,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
   /**
    * Function to set the positioning options
    */
-  reposition(options: Partial<PositioningOptions>): void
+  reposition(options?: Partial<PositioningOptions>): void
 
   rootProps: T["element"]
   labelProps: T["label"]
@@ -358,6 +395,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
   contentProps: T["element"]
   triggerProps: T["button"]
   clearTriggerProps: T["button"]
+  listProps: T["element"]
   getItemProps(props: ItemProps): T["element"]
   getItemTextProps(props: ItemProps): T["element"]
   getItemIndicatorProps(props: ItemProps): T["element"]
diff --git a/packages/machines/combobox/src/index.ts b/packages/machines/combobox/src/index.ts
index b2b81c77a9..218d340eb5 100644
--- a/packages/machines/combobox/src/index.ts
+++ b/packages/machines/combobox/src/index.ts
@@ -17,5 +17,7 @@ export type {
   OpenChangeDetails,
   Placement,
   PositioningOptions,
+  ScrollToIndexDetails,
+  SelectionValueDetails,
   ValueChangeDetails,
 } from "./combobox.types"
diff --git a/packages/machines/dialog/src/dialog.machine.ts b/packages/machines/dialog/src/dialog.machine.ts
index 5fe57ed205..c6f14bcdc4 100644
--- a/packages/machines/dialog/src/dialog.machine.ts
+++ b/packages/machines/dialog/src/dialog.machine.ts
@@ -25,7 +25,7 @@ export function machine(userContext: UserDefinedContext) {
         trapFocus: true,
         preventScroll: true,
         closeOnInteractOutside: true,
-        closeOnEscapeKeyDown: true,
+        closeOnEscape: true,
         restoreFocus: true,
         ...ctx,
       },
@@ -106,16 +106,23 @@ export function machine(userContext: UserDefinedContext) {
             pointerBlocking: ctx.modal,
             exclude: [dom.getTriggerEl(ctx)],
             onEscapeKeyDown(event) {
-              if (!ctx.closeOnEscapeKeyDown) event.preventDefault()
-              else send({ type: "CLOSE", src: "escape-key" })
+              if (!ctx.closeOnEscape) {
+                event.preventDefault()
+              } else {
+                send({ type: "CLOSE", src: "escape-key" })
+              }
               ctx.onEscapeKeyDown?.(event)
             },
             onPointerDownOutside(event) {
-              if (!ctx.closeOnInteractOutside) event.preventDefault()
+              if (!ctx.closeOnInteractOutside) {
+                event.preventDefault()
+              }
               ctx.onPointerDownOutside?.(event)
             },
             onFocusOutside(event) {
-              if (!ctx.closeOnInteractOutside) event.preventDefault()
+              if (!ctx.closeOnInteractOutside) {
+                event.preventDefault()
+              }
               ctx.onFocusOutside?.(event)
             },
             onDismiss() {
diff --git a/packages/machines/dialog/src/dialog.props.ts b/packages/machines/dialog/src/dialog.props.ts
index f63c19ef6b..c880da1705 100644
--- a/packages/machines/dialog/src/dialog.props.ts
+++ b/packages/machines/dialog/src/dialog.props.ts
@@ -4,7 +4,7 @@ import type { UserDefinedContext } from "./dialog.types"
 
 export const props = createProps<UserDefinedContext>()([
   "aria-label",
-  "closeOnEscapeKeyDown",
+  "closeOnEscape",
   "closeOnInteractOutside",
   "dir",
   "finalFocusEl",
diff --git a/packages/machines/dialog/src/dialog.types.ts b/packages/machines/dialog/src/dialog.types.ts
index 3ec97ef80a..afbe63ba6e 100644
--- a/packages/machines/dialog/src/dialog.types.ts
+++ b/packages/machines/dialog/src/dialog.types.ts
@@ -64,7 +64,7 @@ interface PublicContext extends DirectionProperty, CommonProperties, InteractOut
   /**
    * Whether to close the dialog when the escape key is pressed
    */
-  closeOnEscapeKeyDown: boolean
+  closeOnEscape: boolean
   /**
    * Callback to be invoked when the escape key is pressed
    */
diff --git a/packages/machines/file-upload/src/file-upload.connect.ts b/packages/machines/file-upload/src/file-upload.connect.ts
index 9572a886a3..6c7de10883 100644
--- a/packages/machines/file-upload/src/file-upload.connect.ts
+++ b/packages/machines/file-upload/src/file-upload.connect.ts
@@ -1,4 +1,4 @@
-import { contains, dataAttr, isSelfEvent } from "@zag-js/dom-query"
+import { contains, dataAttr, isSelfTarget } from "@zag-js/dom-query"
 import { formatBytes } from "@zag-js/i18n-utils"
 import { type NormalizeProps, type PropTypes } from "@zag-js/types"
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
@@ -63,7 +63,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "data-dragging": dataAttr(isDragging),
       onKeyDown(event) {
         const evt = event.nativeEvent || event
-        if (!isSelfEvent(evt)) return
+        if (!isSelfTarget(evt)) return
         if (event.key !== "Enter" && event.key !== " ") return
         send({ type: "DROPZONE.CLICK", src: "keydown" })
       },
diff --git a/packages/machines/floating-panel/src/floating-panel.connect.ts b/packages/machines/floating-panel/src/floating-panel.connect.ts
index 1151069c74..cbcaf61dc5 100644
--- a/packages/machines/floating-panel/src/floating-panel.connect.ts
+++ b/packages/machines/floating-panel/src/floating-panel.connect.ts
@@ -1,5 +1,5 @@
 import { getEventKey, getEventStep, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event"
-import { dataAttr, getEventTarget, isSelfEvent } from "@zag-js/dom-query"
+import { dataAttr, getEventTarget, isSelfTarget } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./floating-panel.anatomy"
 import { dom } from "./floating-panel.dom"
@@ -56,7 +56,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         overflow: state.context.isMinimized ? "hidden" : undefined,
       },
       onKeyDown(event) {
-        if (!isSelfEvent(getNativeEvent(event))) return
+        if (!isSelfTarget(getNativeEvent(event))) return
         const step = getEventStep(event) * state.context.gridSize
         const keyMap: EventKeyMap = {
           Escape() {
diff --git a/packages/machines/menu/package.json b/packages/machines/menu/package.json
index 37c17a1687..6cccedfe46 100644
--- a/packages/machines/menu/package.json
+++ b/packages/machines/menu/package.json
@@ -34,8 +34,8 @@
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "@zag-js/dismissable": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/popper": "workspace:*",
+    "@zag-js/tabbable": "workspace:*",
     "@zag-js/types": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts
index 9636b625d5..7c8803590f 100644
--- a/packages/machines/menu/src/menu.connect.ts
+++ b/packages/machines/menu/src/menu.connect.ts
@@ -1,14 +1,22 @@
 import { mergeProps } from "@zag-js/core"
 import {
+  clickIfLink,
   getEventKey,
   getEventPoint,
   getNativeEvent,
   isContextMenuEvent,
   isLeftClick,
-  isModifiedEvent,
+  isModifierKey,
   type EventKeyMap,
 } from "@zag-js/dom-event"
-import { dataAttr, getEventTarget, isEditableElement, isSelfEvent } from "@zag-js/dom-query"
+import {
+  dataAttr,
+  getEventTarget,
+  isDownloadingEvent,
+  isEditableElement,
+  isOpeningInNewTab,
+  isSelfTarget,
+} from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./menu.anatomy"
@@ -62,31 +70,37 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         const isLink = event.currentTarget.matches("a[href]")
         if (isLink) event.preventDefault()
       },
-      onPointerLeave(event) {
-        if (itemState.isDisabled || event.pointerType !== "mouse") return
-        const target = event.currentTarget
-        send({ type: "ITEM_POINTERLEAVE", id, target, closeOnSelect })
-      },
       onPointerMove(event) {
-        if (itemState.isDisabled || event.pointerType !== "mouse") return
+        if (itemState.isDisabled) return
+        if (event.pointerType !== "mouse") return
         const target = event.currentTarget
         if (itemState.isHighlighted) return
         send({ type: "ITEM_POINTERMOVE", id, target, closeOnSelect })
       },
+      onPointerLeave(event) {
+        const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE"
+        if (!mouseMoved) return
+        if (itemState.isDisabled) return
+        if (event.pointerType !== "mouse") return
+        const target = event.currentTarget
+        send({ type: "ITEM_POINTERLEAVE", id, target, closeOnSelect })
+      },
       onPointerDown(event) {
         if (itemState.isDisabled) return
         const target = event.currentTarget
         send({ type: "ITEM_POINTERDOWN", target, id, closeOnSelect })
       },
       onPointerUp(event) {
-        const evt = getNativeEvent(event)
-        if (!isLeftClick(evt) || itemState.isDisabled) return
+        if (isDownloadingEvent(event)) return
+        if (isOpeningInNewTab(event)) return
+        if (itemState.isDisabled) return
+        if (!isLeftClick(event)) return
+
         const target = event.currentTarget
         send({ type: "ITEM_CLICK", src: "pointerup", target, id, closeOnSelect })
+
         // Fix issue where links don't get clicked in pointerup on touch devices
-        if (target.matches("a[href]") && event.pointerType === "touch") {
-          target.click()
-        }
+        if (event.pointerType === "touch") clickIfLink(target)
       },
       onTouchEnd(event) {
         // prevent clicking elements behind content
@@ -273,13 +287,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       },
       onKeyDown(event) {
         const evt = getNativeEvent(event)
-        const target = getEventTarget<HTMLElement>(evt)
+        const target = getEventTarget<Element>(evt)
 
         const isKeyDownInside = target?.closest("[role=menu]") === event.currentTarget
-        if (!isSelfEvent(evt) || !isKeyDownInside) return
+
+        if (!isKeyDownInside) return
+        if (!isSelfTarget(evt)) return
 
         const item = dom.getHighlightedItemEl(state.context)
-        const isLink = !!item?.matches("a[href]")
 
         const keyMap: EventKeyMap = {
           ArrowDown() {
@@ -295,8 +310,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
             send("ARROW_RIGHT")
           },
           Enter() {
-            if (isLink) item?.click()
             send("ENTER")
+            clickIfLink(item)
           },
           Space(event) {
             if (isTypingAhead) {
@@ -320,22 +335,22 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         const exec = keyMap[key]
 
         if (exec) {
-          const allow = isLink && key === "Enter"
           exec(event)
-          if (!allow) {
-            event.preventDefault()
-          }
-          //
-        } else {
-          //
-          const isSingleKey = event.key.length === 1
-          const isValidTypeahead = isSingleKey && !isModifiedEvent(event) && !isEditableElement(item)
-
-          if (!isValidTypeahead) return
-
-          send({ type: "TYPEAHEAD", key: event.key })
+          event.stopPropagation()
           event.preventDefault()
+          return
         }
+
+        // typeahead
+        if (!state.context.typeahead) return
+
+        const printable = event.key.length === 1
+        const isValidTypeahead = printable && !isModifierKey(event) && !isEditableElement(item)
+
+        if (!isValidTypeahead) return
+
+        send({ type: "TYPEAHEAD", key: event.key })
+        event.preventDefault()
       },
     }),
 
@@ -366,8 +381,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           "aria-checked": !!itemState.isChecked,
           "data-state": itemState.isChecked ? "checked" : "unchecked",
           onPointerUp(event) {
-            const evt = getNativeEvent(event)
-            if (!isLeftClick(evt) || disabled) return
+            if (!isLeftClick(event) || disabled) return
+            if (isDownloadingEvent(event)) return
+            if (isOpeningInNewTab(event)) return
             const target = event.currentTarget
             send({ type: "ITEM_CLICK", src: "pointerup", target, option, closeOnSelect })
             onCheckedChange?.(!itemState.isChecked)
diff --git a/packages/machines/menu/src/menu.dom.ts b/packages/machines/menu/src/menu.dom.ts
index 7773110db3..e1560d6ba8 100644
--- a/packages/machines/menu/src/menu.dom.ts
+++ b/packages/machines/menu/src/menu.dom.ts
@@ -24,11 +24,11 @@ export const dom = createScope({
   },
   getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),
   getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),
-  getNextEl: (ctx: Ctx, loop?: boolean) => nextById(dom.getElements(ctx), ctx.highlightedValue!, loop ?? ctx.loop),
-  getPrevEl: (ctx: Ctx, loop?: boolean) => prevById(dom.getElements(ctx), ctx.highlightedValue!, loop ?? ctx.loop),
+  getNextEl: (ctx: Ctx, loop?: boolean) => nextById(dom.getElements(ctx), ctx.highlightedValue!, loop ?? ctx.loopFocus),
+  getPrevEl: (ctx: Ctx, loop?: boolean) => prevById(dom.getElements(ctx), ctx.highlightedValue!, loop ?? ctx.loopFocus),
 
   getElemByKey: (ctx: Ctx, key: string) =>
-    getByTypeahead(dom.getElements(ctx), { state: ctx.typeahead, key, activeId: ctx.highlightedValue }),
+    getByTypeahead(dom.getElements(ctx), { state: ctx.typeaheadState, key, activeId: ctx.highlightedValue }),
 
   isTargetDisabled: (v: EventTarget | null) => {
     return isHTMLElement(v) && (v.dataset.disabled === "" || v.hasAttribute("disabled"))
diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts
index fe2a53b4fc..7a63d2838c 100644
--- a/packages/machines/menu/src/menu.machine.ts
+++ b/packages/machines/menu/src/menu.machine.ts
@@ -1,10 +1,10 @@
 import { createMachine, guards, ref } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { addDomEvent } from "@zag-js/dom-event"
-import { contains, getByTypeahead, isEditableElement, raf, scrollIntoView } from "@zag-js/dom-query"
-import { observeAttributes } from "@zag-js/mutation-observer"
+import { getByTypeahead, isEditableElement, raf, scrollIntoView, observeAttributes } from "@zag-js/dom-query"
 import { getPlacement, getPlacementSide } from "@zag-js/popper"
 import { getElementPolygon, isPointInPolygon } from "@zag-js/rect-utils"
+import { getFirstTabbable } from "@zag-js/tabbable"
 import { cast, compact, isEqual } from "@zag-js/utils"
 import { dom } from "./menu.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./menu.types"
@@ -19,9 +19,10 @@ export function machine(userContext: UserDefinedContext) {
       initial: ctx.open ? "open" : "idle",
       context: {
         highlightedValue: null,
-        loop: false,
+        loopFocus: false,
         anchorPoint: null,
         closeOnSelect: true,
+        typeahead: true,
         ...ctx,
         positioning: {
           placement: "bottom-start",
@@ -34,13 +35,13 @@ export function machine(userContext: UserDefinedContext) {
         children: cast(ref({})),
         suspendPointer: false,
         restoreFocus: true,
-        typeahead: getByTypeahead.defaultOptions,
+        typeaheadState: getByTypeahead.defaultOptions,
       },
 
       computed: {
         isSubmenu: (ctx) => ctx.parent !== null,
         isRtl: (ctx) => ctx.dir === "rtl",
-        isTypingAhead: (ctx) => ctx.typeahead.keysSoFar !== "",
+        isTypingAhead: (ctx) => ctx.typeaheadState.keysSoFar !== "",
       },
 
       watch: {
@@ -552,7 +553,13 @@ export function machine(userContext: UserDefinedContext) {
             scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" })
           }
           raf(() => exec())
-          return observeAttributes(dom.getContentEl(ctx), ["aria-activedescendant"], exec)
+
+          const contentEl = () => dom.getContentEl(ctx)
+          return observeAttributes(contentEl, {
+            defer: true,
+            attributes: ["aria-activedescendant"],
+            callback: exec,
+          })
         },
       },
 
@@ -634,10 +641,9 @@ export function machine(userContext: UserDefinedContext) {
         },
         focusMenu(ctx) {
           raf(() => {
-            const activeEl = dom.getActiveElement(ctx)
             const contentEl = dom.getContentEl(ctx)
-            if (contains(contentEl, activeEl)) return
-            contentEl?.focus({ preventScroll: true })
+            const firstFocusableEl = getFirstTabbable(contentEl, false) || contentEl
+            firstFocusableEl?.focus({ preventScroll: true })
           })
         },
         highlightFirstItem(ctx) {
diff --git a/packages/machines/menu/src/menu.props.ts b/packages/machines/menu/src/menu.props.ts
index 5e095dbd45..e897494ca2 100644
--- a/packages/machines/menu/src/menu.props.ts
+++ b/packages/machines/menu/src/menu.props.ts
@@ -11,7 +11,7 @@ export const props = createProps<UserDefinedContext>()([
   "highlightedValue",
   "id",
   "ids",
-  "loop",
+  "loopFocus",
   "onFocusOutside",
   "onInteractOutside",
   "onOpenChange",
@@ -22,6 +22,7 @@ export const props = createProps<UserDefinedContext>()([
   "open",
   "open.controlled",
   "positioning",
+  "typeahead",
 ])
 
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts
index a11008f83c..3300506c6c 100644
--- a/packages/machines/menu/src/menu.types.ts
+++ b/packages/machines/menu/src/menu.types.ts
@@ -68,7 +68,7 @@ interface PublicContext extends DirectionProperty, CommonProperties, Dismissable
   /**
    * Whether to loop the keyboard navigation.
    */
-  loop: boolean
+  loopFocus: boolean
   /**
    * The options used to dynamically position the menu
    */
@@ -93,6 +93,10 @@ interface PublicContext extends DirectionProperty, CommonProperties, Dismissable
    *  Whether the menu's open state is controlled by the user
    */
   "open.controlled"?: boolean
+  /**
+   * Whether the pressing printable characters should trigger typeahead navigation
+   */
+  typeahead: boolean
 }
 
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
@@ -151,7 +155,7 @@ interface PrivateContext {
    * @internal
    * The typeahead state for faster keyboard navigation
    */
-  typeahead: TypeaheadState
+  typeaheadState: TypeaheadState
   /**
    * @internal
    * Whether to return focus to the trigger when the menu is closed
diff --git a/packages/machines/number-input/package.json b/packages/machines/number-input/package.json
index 918c1277ef..009622899b 100644
--- a/packages/machines/number-input/package.json
+++ b/packages/machines/number-input/package.json
@@ -33,7 +33,6 @@
     "@zag-js/dom-event": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*"
diff --git a/packages/machines/number-input/src/number-input.machine.ts b/packages/machines/number-input/src/number-input.machine.ts
index 0da9621e97..b446f64b6a 100644
--- a/packages/machines/number-input/src/number-input.machine.ts
+++ b/packages/machines/number-input/src/number-input.machine.ts
@@ -1,8 +1,7 @@
 import { choose, createMachine, guards } from "@zag-js/core"
 import { addDomEvent, requestPointerLock } from "@zag-js/dom-event"
-import { isSafari, raf } from "@zag-js/dom-query"
+import { isSafari, observeAttributes, raf } from "@zag-js/dom-query"
 import { trackFormControl } from "@zag-js/form-utils"
-import { observeAttributes } from "@zag-js/mutation-observer"
 import { clamp, decrement, increment, isAtMax, isAtMin, isWithinRange } from "@zag-js/number-utils"
 import { callAll, compact, isEqual } from "@zag-js/utils"
 import { recordCursor, restoreCursor } from "./cursor"
@@ -256,8 +255,11 @@ export function machine(userContext: UserDefinedContext) {
         },
         trackButtonDisabled(ctx, _evt, { send }) {
           const btn = dom.getPressedTriggerEl(ctx, ctx.hint)
-          return observeAttributes(btn, ["disabled"], () => {
-            send({ type: "TRIGGER.PRESS_UP", src: "attr" })
+          return observeAttributes(btn, {
+            attributes: ["disabled"],
+            callback() {
+              send({ type: "TRIGGER.PRESS_UP", src: "attr" })
+            },
           })
         },
         attachWheelListener(ctx, _evt, { send }) {
diff --git a/packages/machines/pin-input/src/pin-input.connect.ts b/packages/machines/pin-input/src/pin-input.connect.ts
index ac0f6d231d..613435dc75 100644
--- a/packages/machines/pin-input/src/pin-input.connect.ts
+++ b/packages/machines/pin-input/src/pin-input.connect.ts
@@ -1,4 +1,4 @@
-import { getEventKey, getNativeEvent, isModifiedEvent, type EventKeyMap } from "@zag-js/dom-event"
+import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from "@zag-js/dom-event"
 import { ariaAttr, dataAttr, getBeforeInputValue } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { invariant } from "@zag-js/utils"
@@ -138,7 +138,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         },
         onKeyDown(event) {
           const evt = getNativeEvent(event)
-          if (isModifiedEvent(evt)) return
+          if (isModifierKey(evt)) return
 
           const keyMap: EventKeyMap = {
             Backspace() {
diff --git a/packages/machines/select/package.json b/packages/machines/select/package.json
index 5643305c01..8ba4850c94 100644
--- a/packages/machines/select/package.json
+++ b/packages/machines/select/package.json
@@ -41,7 +41,6 @@
     "@zag-js/dom-event": "workspace:*",
     "@zag-js/collection": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "@zag-js/dismissable": "workspace:*",
diff --git a/packages/machines/select/src/select.connect.ts b/packages/machines/select/src/select.connect.ts
index 73a3c0ee40..522f0847a9 100644
--- a/packages/machines/select/src/select.connect.ts
+++ b/packages/machines/select/src/select.connect.ts
@@ -1,5 +1,5 @@
 import { getEventKey, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event"
-import { ariaAttr, dataAttr, getByTypeahead, isEditableElement, isSelfEvent } from "@zag-js/dom-query"
+import { ariaAttr, dataAttr, getByTypeahead, isEditableElement, isSelfTarget } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
@@ -123,15 +123,16 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       disabled: isDisabled,
       dir: state.context.dir,
       type: "button",
+      role: "combobox",
       "aria-controls": dom.getContentId(state.context),
       "aria-expanded": isOpen,
-      "data-state": isOpen ? "open" : "closed",
       "aria-haspopup": "listbox",
+      "data-state": isOpen ? "open" : "closed",
+      "aria-invalid": isInvalid,
       "aria-labelledby": dom.getLabelId(state.context),
       ...parts.trigger.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
-      "aria-invalid": isInvalid,
       "data-readonly": dataAttr(isReadOnly),
       "data-placement": state.context.currentPlacement,
       "data-placeholder-shown": dataAttr(!state.context.hasSelectedItems),
@@ -341,7 +342,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       tabIndex: 0,
       onKeyDown(event) {
         const evt = getNativeEvent(event)
-        if (!isInteractive || !isSelfEvent(evt)) return
+        if (!isInteractive || !isSelfTarget(evt)) return
 
         // select should not be navigated using tab key so we prevent it
         if (event.key === "Tab") {
diff --git a/packages/machines/select/src/select.machine.ts b/packages/machines/select/src/select.machine.ts
index 0b62c889b1..9738acf9b1 100644
--- a/packages/machines/select/src/select.machine.ts
+++ b/packages/machines/select/src/select.machine.ts
@@ -1,8 +1,7 @@
 import { createMachine, guards } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { getByTypeahead, raf, scrollIntoView } from "@zag-js/dom-query"
+import { getByTypeahead, observeAttributes, raf, scrollIntoView } from "@zag-js/dom-query"
 import { trackFormControl } from "@zag-js/form-utils"
-import { observeAttributes } from "@zag-js/mutation-observer"
 import { getPlacement } from "@zag-js/popper"
 import { addOrRemove, compact, isEqual } from "@zag-js/utils"
 import { collection } from "./select.collection"
@@ -19,8 +18,7 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
       context: {
         value: [],
         highlightedValue: null,
-        selectOnBlur: false,
-        loop: false,
+        loopFocus: false,
         closeOnSelect: true,
         disabled: false,
         ...ctx,
@@ -282,17 +280,6 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
             ],
             "CONTENT.INTERACT_OUTSIDE": [
               // == group 1 ==
-              {
-                guard: and("selectOnBlur", "hasHighlightedItem", "isOpenControlled"),
-                actions: ["selectHighlightedItem", "invokeOnClose"],
-              },
-              {
-                guard: and("selectOnBlur", "hasHighlightedItem"),
-                target: "idle",
-                actions: ["selectHighlightedItem", "invokeOnClose", "clearHighlightedItem"],
-              },
-
-              // == group 2 ==
               {
                 guard: and("shouldRestoreFocus", "isOpenControlled"),
                 actions: ["invokeOnClose"],
@@ -303,7 +290,7 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
                 actions: ["invokeOnClose", "clearHighlightedItem"],
               },
 
-              // == group 3 ==
+              // == group 2 ==
               {
                 guard: "isOpenControlled",
                 actions: ["invokeOnClose"],
@@ -363,13 +350,12 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
     },
     {
       guards: {
-        loop: (ctx) => !!ctx.loop,
+        loop: (ctx) => !!ctx.loopFocus,
         multiple: (ctx) => !!ctx.multiple,
         hasSelectedItems: (ctx) => !!ctx.hasSelectedItems,
         hasHighlightedItem: (ctx) => ctx.highlightedValue != null,
         isFirstItemHighlighted: (ctx) => ctx.highlightedValue === ctx.collection.first(),
         isLastItemHighlighted: (ctx) => ctx.highlightedValue === ctx.collection.last(),
-        selectOnBlur: (ctx) => !!ctx.selectOnBlur,
         closeOnSelect: (ctx, evt) => {
           if (ctx.multiple) return false
           return !!(evt.closeOnSelect ?? ctx.closeOnSelect)
@@ -439,8 +425,17 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
 
             scrollIntoView(optionEl, { rootEl: contentEl, block: "nearest" })
           }
+
           raf(() => exec(true))
-          return observeAttributes(dom.getContentEl(ctx), ["aria-activedescendant"], () => exec(false))
+
+          const contentEl = () => dom.getContentEl(ctx)
+          return observeAttributes(contentEl, {
+            defer: true,
+            attributes: ["aria-activedescendant"],
+            callback() {
+              exec(false)
+            },
+          })
         },
       },
       actions: {
diff --git a/packages/machines/select/src/select.props.ts b/packages/machines/select/src/select.props.ts
index 83899675bc..bc625e34d9 100644
--- a/packages/machines/select/src/select.props.ts
+++ b/packages/machines/select/src/select.props.ts
@@ -13,7 +13,7 @@ export const props = createProps<UserDefinedContext>()([
   "ids",
   "invalid",
   "collection",
-  "loop",
+  "loopFocus",
   "multiple",
   "name",
   "onFocusOutside",
@@ -26,7 +26,6 @@ export const props = createProps<UserDefinedContext>()([
   "open.controlled",
   "positioning",
   "readOnly",
-  "selectOnBlur",
   "value",
   "scrollToIndexFn",
 ])
diff --git a/packages/machines/select/src/select.types.ts b/packages/machines/select/src/select.types.ts
index da1a5a66b9..543f6396b0 100644
--- a/packages/machines/select/src/select.types.ts
+++ b/packages/machines/select/src/select.types.ts
@@ -83,11 +83,6 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    * Whether the select should close after an item is selected
    */
   closeOnSelect?: boolean
-  /**
-   * Whether to select the highlighted item when the user presses Tab,
-   * and the menu is open.
-   */
-  selectOnBlur?: boolean
   /**
    * The callback fired when the highlighted item changes.
    */
@@ -115,7 +110,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
   /**
    * Whether to loop the keyboard navigation through the options
    */
-  loop?: boolean
+  loopFocus?: boolean
   /**
    * Whether to allow multiple selection
    */
@@ -312,7 +307,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
   /**
    * Function to set the positioning options of the select
    */
-  reposition(options: Partial<PositioningOptions>): void
+  reposition(options?: Partial<PositioningOptions>): void
 
   rootProps: T["element"]
   labelProps: T["label"]
diff --git a/packages/machines/signature-pad/src/signature-pad.connect.ts b/packages/machines/signature-pad/src/signature-pad.connect.ts
index ca587e96d6..23553ec3d3 100644
--- a/packages/machines/signature-pad/src/signature-pad.connect.ts
+++ b/packages/machines/signature-pad/src/signature-pad.connect.ts
@@ -1,4 +1,4 @@
-import { getNativeEvent, getRelativePoint, isLeftClick, isModifiedEvent } from "@zag-js/dom-event"
+import { getNativeEvent, getRelativePoint, isLeftClick, isModifierKey } from "@zag-js/dom-event"
 import { dataAttr, getEventTarget } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./signature-pad.anatomy"
@@ -47,7 +47,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       onPointerDown(event) {
         const target = getEventTarget<HTMLElement>(getNativeEvent(event))
         if (target?.closest("[data-part=clear-trigger]")) return
-        if (!isLeftClick(event) || isModifiedEvent(event) || !isInteractive) return
+        if (!isLeftClick(event) || isModifierKey(event) || !isInteractive) return
         event.currentTarget.setPointerCapture(event.pointerId)
         const point = { x: event.clientX, y: event.clientY }
         const { offset } = getRelativePoint(point, dom.getControlEl(state.context)!)
diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts
index b891bcd53a..d3f889249b 100644
--- a/packages/machines/slider/src/slider.connect.ts
+++ b/packages/machines/slider/src/slider.connect.ts
@@ -4,7 +4,7 @@ import {
   getEventStep,
   getNativeEvent,
   isLeftClick,
-  isModifiedEvent,
+  isModifierKey,
   type EventKeyMap,
 } from "@zag-js/dom-event"
 import { ariaAttr, dataAttr } from "@zag-js/dom-query"
@@ -254,7 +254,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         if (!isInteractive) return
 
         const evt = getNativeEvent(event)
-        if (!isLeftClick(evt) || isModifiedEvent(evt)) return
+        if (!isLeftClick(evt) || isModifierKey(evt)) return
 
         const point = getEventPoint(evt)
         send({ type: "POINTER_DOWN", point })
diff --git a/packages/machines/tabs/src/tabs.connect.ts b/packages/machines/tabs/src/tabs.connect.ts
index 84b9cc30b5..6a3d0fa6bc 100644
--- a/packages/machines/tabs/src/tabs.connect.ts
+++ b/packages/machines/tabs/src/tabs.connect.ts
@@ -1,5 +1,5 @@
 import { getEventKey, type EventKeyMap } from "@zag-js/dom-event"
-import { dataAttr, isSafari, isSelfEvent } from "@zag-js/dom-query"
+import { dataAttr, isSafari, isSelfTarget } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./tabs.anatomy"
 import { dom } from "./tabs.dom"
@@ -51,7 +51,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "aria-label": translations.listLabel,
       onKeyDown(event) {
         const evt = event.nativeEvent || event
-        if (!isSelfEvent(evt)) return
+        if (!isSelfTarget(evt)) return
 
         const keyMap: EventKeyMap = {
           ArrowDown() {
diff --git a/packages/machines/tabs/src/tabs.dom.ts b/packages/machines/tabs/src/tabs.dom.ts
index 22b2bbeb33..b2ca9d667d 100644
--- a/packages/machines/tabs/src/tabs.dom.ts
+++ b/packages/machines/tabs/src/tabs.dom.ts
@@ -22,8 +22,8 @@ export const dom = createScope({
 
   getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),
   getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),
-  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
-  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
+  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
   getActiveContentEl: (ctx: Ctx) => {
     if (!ctx.value) return
     return dom.getContentEl(ctx, ctx.value)
diff --git a/packages/machines/tabs/src/tabs.machine.ts b/packages/machines/tabs/src/tabs.machine.ts
index c7eff8245d..2e4c87a905 100644
--- a/packages/machines/tabs/src/tabs.machine.ts
+++ b/packages/machines/tabs/src/tabs.machine.ts
@@ -1,4 +1,5 @@
 import { createMachine, guards } from "@zag-js/core"
+import { clickIfLink } from "@zag-js/dom-event"
 import { nextTick, raf } from "@zag-js/dom-query"
 import { trackElementRect } from "@zag-js/element-rect"
 import { getFocusables } from "@zag-js/tabbable"
@@ -28,7 +29,7 @@ export function machine(userContext: UserDefinedContext) {
         },
         canIndicatorTransition: false,
         isIndicatorRendered: false,
-        loop: true,
+        loopFocus: true,
         translations: {},
         ...ctx,
       },
@@ -43,7 +44,7 @@ export function machine(userContext: UserDefinedContext) {
       exit: ["cleanupObserver"],
 
       watch: {
-        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex"],
+        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex", "clickIfLink"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"],
       },
@@ -218,6 +219,9 @@ export function machine(userContext: UserDefinedContext) {
             },
           })
         },
+        clickIfLink(ctx) {
+          clickIfLink(dom.getActiveTabEl(ctx))
+        },
       },
     },
   )
diff --git a/packages/machines/tabs/src/tabs.props.ts b/packages/machines/tabs/src/tabs.props.ts
index 9ccd300bc6..183b31ebb5 100644
--- a/packages/machines/tabs/src/tabs.props.ts
+++ b/packages/machines/tabs/src/tabs.props.ts
@@ -8,7 +8,7 @@ export const props = createProps<UserDefinedContext>()([
   "getRootNode",
   "id",
   "ids",
-  "loop",
+  "loopFocus",
   "onFocusChange",
   "onValueChange",
   "orientation",
diff --git a/packages/machines/tabs/src/tabs.types.ts b/packages/machines/tabs/src/tabs.types.ts
index b2bd151c14..16974e9b45 100644
--- a/packages/machines/tabs/src/tabs.types.ts
+++ b/packages/machines/tabs/src/tabs.types.ts
@@ -42,7 +42,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    * Whether the keyboard navigation will loop from last tab to first, and vice versa.
    * @default true
    */
-  loop: boolean
+  loopFocus: boolean
   /**
    * The selected tab id
    */
diff --git a/packages/machines/tags-input/src/index.ts b/packages/machines/tags-input/src/index.ts
index d237f67b1e..5d202c6c36 100644
--- a/packages/machines/tags-input/src/index.ts
+++ b/packages/machines/tags-input/src/index.ts
@@ -7,6 +7,7 @@ export type {
   UserDefinedContext as Context,
   ElementIds,
   HighlightChangeDetails,
+  InputValueChangeDetails,
   IntlTranslations,
   ItemProps,
   ItemState,
diff --git a/packages/machines/tags-input/src/tags-input.connect.ts b/packages/machines/tags-input/src/tags-input.connect.ts
index 5f0c6b009d..1a172a0f0f 100644
--- a/packages/machines/tags-input/src/tags-input.connect.ts
+++ b/packages/machines/tags-input/src/tags-input.connect.ts
@@ -1,9 +1,9 @@
-import { type EventKeyMap, getEventKey, getNativeEvent } from "@zag-js/dom-event"
+import { getEventKey, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event"
 import { ariaAttr, dataAttr } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./tags-input.anatomy"
 import { dom } from "./tags-input.dom"
-import type { MachineApi, Send, State, ItemProps } from "./tags-input.types"
+import type { ItemProps, MachineApi, Send, State } from "./tags-input.types"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isInteractive = state.context.isInteractive
@@ -147,7 +147,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
             if (isCombobox && isExpanded) return
             send("ARROW_LEFT")
           },
-          ArrowRight() {
+          ArrowRight(event) {
             if (state.context.highlightedTagId) {
               event.preventDefault()
             }
@@ -165,8 +165,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
             send("DELETE")
           },
           Enter(event) {
-            event.preventDefault()
+            if (evt.isComposing) return
+            if (isCombobox && isExpanded) return
             send("ENTER")
+            event.preventDefault()
           },
         }
 
diff --git a/packages/machines/tags-input/src/tags-input.machine.ts b/packages/machines/tags-input/src/tags-input.machine.ts
index ccdf3e45ba..3b6f15c62d 100644
--- a/packages/machines/tags-input/src/tags-input.machine.ts
+++ b/packages/machines/tags-input/src/tags-input.machine.ts
@@ -28,7 +28,7 @@ export function machine(userContext: UserDefinedContext) {
         liveRegion: null,
         blurBehavior: undefined,
         addOnPaste: false,
-        allowEditTag: true,
+        editable: true,
         validate: () => true,
         delimiter: ",",
         disabled: false,
@@ -70,7 +70,7 @@ export function machine(userContext: UserDefinedContext) {
       on: {
         DOUBLE_CLICK_TAG: {
           internal: true,
-          guard: "allowEditTag",
+          guard: "isTagEditable",
           target: "editing:tag",
           actions: ["setEditedId", "initializeEditedTagValue"],
         },
@@ -185,7 +185,7 @@ export function machine(userContext: UserDefinedContext) {
               actions: "clearHighlightedId",
             },
             ENTER: {
-              guard: and("allowEditTag", "hasHighlightedTag"),
+              guard: and("isTagEditable", "hasHighlightedTag"),
               target: "editing:tag",
               actions: ["setEditedId", "initializeEditedTagValue", "focusEditedTagInput"],
             },
@@ -263,7 +263,7 @@ export function machine(userContext: UserDefinedContext) {
         addOnBlur: (ctx) => ctx.blurBehavior === "add",
         clearOnBlur: (ctx) => ctx.blurBehavior === "clear",
         addOnPaste: (ctx) => !!ctx.addOnPaste,
-        allowEditTag: (ctx) => !!ctx.allowEditTag,
+        isTagEditable: (ctx) => !!ctx.editable,
         isInputCaretAtStart(ctx) {
           const input = dom.getInputEl(ctx)
           if (!input) return false
@@ -301,7 +301,7 @@ export function machine(userContext: UserDefinedContext) {
           })
         },
         autoResize(ctx) {
-          if (!ctx.editedTagValue || ctx.idx == null || !ctx.allowEditTag) return
+          if (!ctx.editedTagValue || ctx.idx == null || !ctx.editable) return
           const input = dom.getTagInputEl(ctx, { value: ctx.editedTagValue, index: ctx.idx })
           return autoResizeInput(input)
         },
@@ -424,7 +424,7 @@ export function machine(userContext: UserDefinedContext) {
           })
         },
         setInputValue(ctx, evt) {
-          ctx.inputValue = evt.value
+          set.inputValue(ctx, evt.value)
         },
         clearHighlightedId(ctx) {
           ctx.highlightedTagId = null
@@ -435,7 +435,9 @@ export function machine(userContext: UserDefinedContext) {
           })
         },
         clearInputValue(ctx) {
-          ctx.inputValue = ""
+          raf(() => {
+            set.inputValue(ctx, "")
+          })
         },
         syncInputValue(ctx) {
           const inputEl = dom.getInputEl(ctx)
@@ -472,7 +474,7 @@ export function machine(userContext: UserDefinedContext) {
             } else {
               ctx.onValueInvalid?.({ reason: "invalidTag" })
             }
-            ctx.inputValue = ""
+            set.inputValue(ctx, "")
           })
         },
         clearTags(ctx) {
@@ -549,6 +551,9 @@ const invoke = {
     const highlightedValue = dom.getHighlightedTagValue(ctx)
     ctx.onHighlightChange?.({ highlightedValue })
   },
+  valueChange: (ctx: MachineContext) => {
+    ctx.onInputValueChange?.({ inputValue: ctx.inputValue })
+  },
 }
 
 const set = {
@@ -567,4 +572,9 @@ const set = {
     ctx.highlightedTagId = id
     invoke.highlightChange(ctx)
   },
+  inputValue: (ctx: MachineContext, value: string) => {
+    if (isEqual(ctx.inputValue, value)) return
+    ctx.inputValue = value
+    invoke.valueChange(ctx)
+  },
 }
diff --git a/packages/machines/tags-input/src/tags-input.props.ts b/packages/machines/tags-input/src/tags-input.props.ts
index 279934e1b0..302556d575 100644
--- a/packages/machines/tags-input/src/tags-input.props.ts
+++ b/packages/machines/tags-input/src/tags-input.props.ts
@@ -4,13 +4,13 @@ import type { ItemProps, UserDefinedContext } from "./tags-input.types"
 
 export const props = createProps<UserDefinedContext>()([
   "addOnPaste",
-  "allowEditTag",
   "allowOverflow",
   "autoFocus",
   "blurBehavior",
   "delimiter",
   "dir",
   "disabled",
+  "editable",
   "form",
   "getRootNode",
   "id",
@@ -22,6 +22,7 @@ export const props = createProps<UserDefinedContext>()([
   "name",
   "onFocusOutside",
   "onHighlightChange",
+  "onInputValueChange",
   "onInteractOutside",
   "onPointerDownOutside",
   "onValueChange",
diff --git a/packages/machines/tags-input/src/tags-input.types.ts b/packages/machines/tags-input/src/tags-input.types.ts
index 23849a0517..b5abed2e64 100644
--- a/packages/machines/tags-input/src/tags-input.types.ts
+++ b/packages/machines/tags-input/src/tags-input.types.ts
@@ -11,6 +11,10 @@ export interface ValueChangeDetails {
   value: string[]
 }
 
+export interface InputValueChangeDetails {
+  inputValue: string
+}
+
 export interface HighlightChangeDetails {
   highlightedValue: string | null
 }
@@ -101,7 +105,7 @@ interface PublicContext extends DirectionProperty, CommonProperties, InteractOut
    * Whether a tag can be edited after creation.
    * If `true` and focus is on a tag, pressing `Enter`or double clicking will edit the tag.
    */
-  allowEditTag?: boolean
+  editable?: boolean
   /**
    * The tag input's value
    */
@@ -114,6 +118,10 @@ interface PublicContext extends DirectionProperty, CommonProperties, InteractOut
    * Callback fired when the tag values is updated
    */
   onValueChange?(details: ValueChangeDetails): void
+  /**
+   * Callback fired when the input value is updated
+   */
+  onInputValueChange?(details: InputValueChangeDetails): void
   /**
    * Callback fired when a tag is highlighted by pointer or keyboard navigation
    */
diff --git a/packages/machines/toggle-group/src/toggle-group.connect.ts b/packages/machines/toggle-group/src/toggle-group.connect.ts
index 7742aee642..484f4a2976 100644
--- a/packages/machines/toggle-group/src/toggle-group.connect.ts
+++ b/packages/machines/toggle-group/src/toggle-group.connect.ts
@@ -1,5 +1,5 @@
 import { getEventKey, type EventKeyMap } from "@zag-js/dom-event"
-import { dataAttr, isSafari, isSelfEvent } from "@zag-js/dom-query"
+import { dataAttr, isSafari, isSelfTarget } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./toggle-group.anatomy"
 import { dom } from "./toggle-group.dom"
@@ -50,7 +50,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       onFocus(event) {
         if (disabled) return
         const evt = event.nativeEvent || event
-        if (!isSelfEvent(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward) return
+        if (!isSelfTarget(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward) return
         send("ROOT.FOCUS")
       },
       onBlur() {
@@ -93,7 +93,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         },
         onKeyDown(event) {
           const evt = event.nativeEvent || event
-          if (itemState.isDisabled || !isSelfEvent(evt)) return
+          if (itemState.isDisabled || !isSelfTarget(evt)) return
 
           const keyMap: EventKeyMap = {
             Tab(event) {
diff --git a/packages/machines/toggle-group/src/toggle-group.dom.ts b/packages/machines/toggle-group/src/toggle-group.dom.ts
index ab8554d940..9d85949786 100644
--- a/packages/machines/toggle-group/src/toggle-group.dom.ts
+++ b/packages/machines/toggle-group/src/toggle-group.dom.ts
@@ -14,6 +14,6 @@ export const dom = createScope({
   },
   getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),
   getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),
-  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), id, ctx.currentLoop),
-  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), id, ctx.currentLoop),
+  getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), id, ctx.currentLoopFocus),
+  getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), id, ctx.currentLoopFocus),
 })
diff --git a/packages/machines/toggle-group/src/toggle-group.machine.ts b/packages/machines/toggle-group/src/toggle-group.machine.ts
index 999597cc06..0bc87511da 100644
--- a/packages/machines/toggle-group/src/toggle-group.machine.ts
+++ b/packages/machines/toggle-group/src/toggle-group.machine.ts
@@ -18,7 +18,7 @@ export function machine(userContext: UserDefinedContext) {
         disabled: false,
         orientation: "horizontal",
         rovingFocus: true,
-        loop: true,
+        loopFocus: true,
         ...ctx,
         focusedId: null,
         isTabbingBackward: false,
@@ -28,7 +28,7 @@ export function machine(userContext: UserDefinedContext) {
       },
 
       computed: {
-        currentLoop: (ctx) => ctx.loop && !ctx.isWithinToolbar,
+        currentLoopFocus: (ctx) => ctx.loopFocus && !ctx.isWithinToolbar,
       },
 
       entry: ["checkFocusableToggles", "checkIfWithinToolbar"],
diff --git a/packages/machines/toggle-group/src/toggle-group.props.ts b/packages/machines/toggle-group/src/toggle-group.props.ts
index 1aa9f20557..704952d1e8 100644
--- a/packages/machines/toggle-group/src/toggle-group.props.ts
+++ b/packages/machines/toggle-group/src/toggle-group.props.ts
@@ -8,7 +8,7 @@ export const props = createProps<UserDefinedContext>()([
   "getRootNode",
   "id",
   "ids",
-  "loop",
+  "loopFocus",
   "multiple",
   "onValueChange",
   "orientation",
diff --git a/packages/machines/toggle-group/src/toggle-group.types.ts b/packages/machines/toggle-group/src/toggle-group.types.ts
index a746420103..63e7d572da 100644
--- a/packages/machines/toggle-group/src/toggle-group.types.ts
+++ b/packages/machines/toggle-group/src/toggle-group.types.ts
@@ -38,7 +38,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
   /**
    * Whether to loop focus inside the toggle group.
    */
-  loop: boolean
+  loopFocus: boolean
   /**
    *  Whether to use roving tab index to manage focus.
    */
@@ -56,7 +56,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
 
 type ComputedContext = Readonly<{
-  currentLoop: boolean
+  currentLoopFocus: boolean
 }>
 
 interface PrivateContext {
diff --git a/packages/machines/tree-view/package.json b/packages/machines/tree-view/package.json
index 2204eb1e41..e091e87141 100644
--- a/packages/machines/tree-view/package.json
+++ b/packages/machines/tree-view/package.json
@@ -39,7 +39,6 @@
     "@zag-js/core": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/dom-event": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "@zag-js/types": "workspace:*"
   },
diff --git a/packages/machines/tree-view/src/tree-view.connect.ts b/packages/machines/tree-view/src/tree-view.connect.ts
index bdd2550814..a9b921c7e8 100644
--- a/packages/machines/tree-view/src/tree-view.connect.ts
+++ b/packages/machines/tree-view/src/tree-view.connect.ts
@@ -1,4 +1,4 @@
-import { getEventKey, getNativeEvent, isModifiedEvent, type EventKeyMap } from "@zag-js/dom-event"
+import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from "@zag-js/dom-event"
 import { contains, dataAttr, getEventTarget } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./tree-view.anatomy"
@@ -109,17 +109,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
         const keyMap: EventKeyMap = {
           ArrowDown(event) {
-            if (isModifiedEvent(event)) return
+            if (isModifierKey(event)) return
             event.preventDefault()
             send({ type: "ITEM.ARROW_DOWN", id: nodeId, shiftKey: event.shiftKey })
           },
           ArrowUp(event) {
-            if (isModifiedEvent(event)) return
+            if (isModifierKey(event)) return
             event.preventDefault()
             send({ type: "ITEM.ARROW_UP", id: nodeId, shiftKey: event.shiftKey })
           },
           ArrowLeft(event) {
-            if (isModifiedEvent(event) || node.dataset.disabled) return
+            if (isModifierKey(event) || node.dataset.disabled) return
             event.preventDefault()
             send({ type: isBranchNode ? "BRANCH.ARROW_LEFT" : "ITEM.ARROW_LEFT", id: nodeId })
           },
@@ -129,12 +129,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
             send({ type: "BRANCH.ARROW_RIGHT", id: nodeId })
           },
           Home(event) {
-            if (isModifiedEvent(event)) return
+            if (isModifierKey(event)) return
             event.preventDefault()
             send({ type: "ITEM.HOME", id: nodeId, shiftKey: event.shiftKey })
           },
           End(event) {
-            if (isModifiedEvent(event)) return
+            if (isModifierKey(event)) return
             event.preventDefault()
             send({ type: "ITEM.END", id: nodeId, shiftKey: event.shiftKey })
           },
@@ -173,7 +173,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         if (exec) {
           exec(event)
         } else {
-          const isValidTypeahead = event.key.length === 1 && !isModifiedEvent(event)
+          const isValidTypeahead = event.key.length === 1 && !isModifierKey(event)
           if (!isValidTypeahead) return
 
           send({ type: "TREE.TYPEAHEAD", key: event.key, id: nodeId })
diff --git a/packages/machines/tree-view/src/tree-view.machine.ts b/packages/machines/tree-view/src/tree-view.machine.ts
index d4238448d7..dde3d5644d 100644
--- a/packages/machines/tree-view/src/tree-view.machine.ts
+++ b/packages/machines/tree-view/src/tree-view.machine.ts
@@ -1,6 +1,5 @@
 import { createMachine, guards } from "@zag-js/core"
-import { getByTypeahead, isHTMLElement } from "@zag-js/dom-query"
-import { observeChildren } from "@zag-js/mutation-observer"
+import { getByTypeahead, isHTMLElement, observeChildren } from "@zag-js/dom-query"
 import { compact } from "@zag-js/utils"
 import { dom } from "./tree-view.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./tree-view.types"
@@ -176,40 +175,42 @@ export function machine(userContext: UserDefinedContext) {
       activities: {
         trackChildrenMutation(ctx, _evt, { send }) {
           const treeEl = dom.getTreeEl(ctx)
-          return observeChildren(treeEl, (records) => {
-            const removedNodes = records
-              .flatMap((r) => Array.from(r.removedNodes))
-              .filter((node) => {
-                if (!isHTMLElement(node)) return false
-                return node.matches("[role=treeitem]") || node.matches("[role=group]")
+          return observeChildren(treeEl, {
+            callback(records) {
+              const removedNodes = records
+                .flatMap((r) => Array.from(r.removedNodes))
+                .filter((node) => {
+                  if (!isHTMLElement(node)) return false
+                  return node.matches("[role=treeitem]") || node.matches("[role=group]")
+                })
+
+              if (!removedNodes.length) return
+
+              let elementToFocus: HTMLElement | null = null
+              records.forEach((record) => {
+                if (isHTMLElement(record.nextSibling)) {
+                  elementToFocus = record.nextSibling
+                } else if (isHTMLElement(record.previousSibling)) {
+                  elementToFocus = record.previousSibling
+                }
               })
 
-            if (!removedNodes.length) return
-
-            let elementToFocus: HTMLElement | null = null
-            records.forEach((record) => {
-              if (isHTMLElement(record.nextSibling)) {
-                elementToFocus = record.nextSibling
-              } else if (isHTMLElement(record.previousSibling)) {
-                elementToFocus = record.previousSibling
+              if (elementToFocus) {
+                dom.focusNode(elementToFocus)
               }
-            })
-
-            if (elementToFocus) {
-              dom.focusNode(elementToFocus)
-            }
 
-            const removedIds: Set<string> = new Set()
-            removedNodes.forEach((node) => {
-              const nodeId = dom.getNodeId(node)
-              if (isHTMLElement(node) && nodeId != null) {
-                removedIds.add(nodeId)
-              }
-            })
+              const removedIds: Set<string> = new Set()
+              removedNodes.forEach((node) => {
+                const nodeId = dom.getNodeId(node)
+                if (isHTMLElement(node) && nodeId != null) {
+                  removedIds.add(nodeId)
+                }
+              })
 
-            const nextSet = new Set(ctx.selectedIds)
-            removedIds.forEach((id) => nextSet.delete(id))
-            send({ type: "SELECTED.SET", value: removedIds })
+              const nextSet = new Set(ctx.selectedIds)
+              removedIds.forEach((id) => nextSet.delete(id))
+              send({ type: "SELECTED.SET", value: removedIds })
+            },
           })
         },
       },
diff --git a/packages/utilities/dom-event/src/assertion.ts b/packages/utilities/dom-event/src/assertion.ts
index dc8be61207..220ec898c3 100644
--- a/packages/utilities/dom-event/src/assertion.ts
+++ b/packages/utilities/dom-event/src/assertion.ts
@@ -1,3 +1,5 @@
+import { isMac } from "@zag-js/dom-query"
+
 export function isKeyboardClick(e: Pick<MouseEvent, "detail" | "clientX" | "clientY">) {
   return e.detail === 0 || (e.clientX === 0 && e.clientY === 0)
 }
@@ -24,7 +26,5 @@ export const isContextMenuEvent = (e: Pick<MouseEvent, "button" | "ctrlKey" | "m
   return e.button === 2 || (isMac() && e.ctrlKey && e.button === 0)
 }
 
-export const isModifiedEvent = (e: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "altKey">) =>
+export const isModifierKey = (e: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "altKey">) =>
   e.ctrlKey || e.altKey || e.metaKey
-
-const isMac = () => /Mac|iPod|iPhone|iPad/.test(window.navigator.platform)
diff --git a/packages/utilities/dom-event/src/click-link.ts b/packages/utilities/dom-event/src/click-link.ts
new file mode 100644
index 0000000000..3e15a0a1bb
--- /dev/null
+++ b/packages/utilities/dom-event/src/click-link.ts
@@ -0,0 +1,16 @@
+import { isFirefox } from "@zag-js/dom-query"
+import { queueBeforeEvent } from "./queue-before-event"
+
+function isLinkElement(element: HTMLElement | null | undefined) {
+  return element?.matches("a[href]") ?? false
+}
+
+export function clickIfLink(element: HTMLElement | null | undefined) {
+  if (!isLinkElement(element)) return
+  const click = () => element!.click()
+  if (isFirefox()) {
+    queueBeforeEvent(element!, "keyup", click)
+  } else {
+    queueMicrotask(click)
+  }
+}
diff --git a/packages/utilities/dom-event/src/index.ts b/packages/utilities/dom-event/src/index.ts
index 2817d8e0a6..6c99b8de24 100644
--- a/packages/utilities/dom-event/src/index.ts
+++ b/packages/utilities/dom-event/src/index.ts
@@ -1,11 +1,13 @@
 export * from "./add-dom-event"
 export * from "./assertion"
+export * from "./click-link"
 export * from "./fire-event"
 export * from "./get-event-key"
 export * from "./get-event-point"
 export * from "./get-event-step"
 export * from "./get-native-event"
 export * from "./get-point-value"
+export * from "./queue-before-event"
 export * from "./request-pointer-lock"
 export * from "./track-focus-visible"
 export * from "./track-pointer-move"
diff --git a/packages/utilities/dom-event/src/queue-before-event.ts b/packages/utilities/dom-event/src/queue-before-event.ts
new file mode 100644
index 0000000000..dfd134332f
--- /dev/null
+++ b/packages/utilities/dom-event/src/queue-before-event.ts
@@ -0,0 +1,17 @@
+export function queueBeforeEvent(element: Element, type: string, cb: () => void) {
+  const raf = requestAnimationFrame(() => {
+    element.removeEventListener(type, exec, true)
+    cb()
+  })
+  const exec = () => {
+    cancelAnimationFrame(raf)
+    cb()
+  }
+
+  element.addEventListener(type, exec, {
+    once: true,
+    capture: true,
+  })
+
+  return raf
+}
diff --git a/packages/utilities/dom-query/src/event.ts b/packages/utilities/dom-query/src/event.ts
index 4e46133fb0..69340c4b6a 100644
--- a/packages/utilities/dom-query/src/event.ts
+++ b/packages/utilities/dom-query/src/event.ts
@@ -1,4 +1,5 @@
 import { contains } from "./contains"
+import { isApple } from "./platform"
 
 export function getBeforeInputValue(event: Pick<InputEvent, "currentTarget">) {
   const { selectionStart, selectionEnd, value } = event.currentTarget as HTMLInputElement
@@ -9,6 +10,37 @@ export function getEventTarget<T extends EventTarget>(event: Pick<UIEvent, "targ
   return (event.composedPath?.()[0] ?? event.target) as T | null
 }
 
-export const isSelfEvent = (event: Pick<UIEvent, "currentTarget" | "target" | "composedPath">) => {
-  return contains(event.currentTarget, getEventTarget(event))
+export const isSelfTarget = (event: Pick<UIEvent, "currentTarget" | "target" | "composedPath">) => {
+  return contains(event.currentTarget as Node, getEventTarget(event))
+}
+
+export function isOpeningInNewTab(event: Pick<MouseEvent, "currentTarget" | "metaKey" | "ctrlKey">) {
+  const element = event.currentTarget as HTMLAnchorElement | HTMLButtonElement | HTMLInputElement | null
+  if (!element) return false
+
+  const isAppleDevice = isApple()
+  if (isAppleDevice && !event.metaKey) return false
+  if (!isAppleDevice && !event.ctrlKey) return false
+
+  const localName = element.localName
+
+  if (localName === "a") return true
+  if (localName === "button" && element.type === "submit") return true
+  if (localName === "input" && element.type === "submit") return true
+
+  return false
+}
+
+export function isDownloadingEvent(event: Pick<MouseEvent, "altKey" | "currentTarget">) {
+  const element = event.currentTarget as HTMLAnchorElement | HTMLButtonElement | HTMLInputElement | null
+  if (!element) return false
+
+  const localName = element.localName
+  if (!event.altKey) return false
+
+  if (localName === "a") return true
+  if (localName === "button" && element.type === "submit") return true
+  if (localName === "input" && element.type === "submit") return true
+
+  return false
 }
diff --git a/packages/utilities/dom-query/src/index.ts b/packages/utilities/dom-query/src/index.ts
index cb9442eaaa..1a2ff56dfc 100644
--- a/packages/utilities/dom-query/src/index.ts
+++ b/packages/utilities/dom-query/src/index.ts
@@ -19,3 +19,5 @@ export * from "./query"
 export * from "./raf"
 export * from "./scope"
 export * from "./scroll-into-view"
+export * from "./observe-attributes"
+export * from "./observe-children"
diff --git a/packages/utilities/dom-query/src/observe-attributes.ts b/packages/utilities/dom-query/src/observe-attributes.ts
new file mode 100644
index 0000000000..822694d540
--- /dev/null
+++ b/packages/utilities/dom-query/src/observe-attributes.ts
@@ -0,0 +1,40 @@
+import { raf } from "./raf"
+
+type MaybeElement = HTMLElement | null
+type NodeOrFn = MaybeElement | (() => MaybeElement)
+
+export interface ObserveAttributeOptions {
+  attributes: string[]
+  callback(record: MutationRecord): void
+  defer?: boolean
+}
+
+function observeAttributesImpl(node: MaybeElement, options: ObserveAttributeOptions) {
+  if (!node) return
+  const { attributes, callback: fn } = options
+  const win = node.ownerDocument.defaultView || window
+  const obs = new win.MutationObserver((changes) => {
+    for (const change of changes) {
+      if (change.type === "attributes" && change.attributeName && attributes.includes(change.attributeName)) {
+        fn(change)
+      }
+    }
+  })
+  obs.observe(node, { attributes: true, attributeFilter: attributes })
+  return () => obs.disconnect()
+}
+
+export function observeAttributes(nodeOrFn: NodeOrFn, options: ObserveAttributeOptions) {
+  const { defer } = options
+  const func = defer ? raf : (v: any) => v()
+  const cleanups: (VoidFunction | undefined)[] = []
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn
+      cleanups.push(observeAttributesImpl(node, options))
+    }),
+  )
+  return () => {
+    cleanups.forEach((fn) => fn?.())
+  }
+}
diff --git a/packages/utilities/dom-query/src/observe-children.ts b/packages/utilities/dom-query/src/observe-children.ts
new file mode 100644
index 0000000000..76ff918f23
--- /dev/null
+++ b/packages/utilities/dom-query/src/observe-children.ts
@@ -0,0 +1,33 @@
+import { raf } from "./raf"
+
+type MaybeElement = HTMLElement | null
+type NodeOrFn = MaybeElement | (() => MaybeElement)
+
+export interface ObserveChildrenOptions {
+  callback: MutationCallback
+  defer?: boolean
+}
+
+function observeChildrenImpl(node: MaybeElement, options: ObserveChildrenOptions) {
+  const { callback: fn } = options
+  if (!node) return
+  const win = node.ownerDocument.defaultView || window
+  const obs = new win.MutationObserver(fn)
+  obs.observe(node, { childList: true, subtree: true })
+  return () => obs.disconnect()
+}
+
+export function observeChildren(nodeOrFn: NodeOrFn, options: ObserveChildrenOptions) {
+  const { defer } = options
+  const func = defer ? raf : (v: any) => v()
+  const cleanups: (VoidFunction | undefined)[] = []
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn
+      cleanups.push(observeChildrenImpl(node, options))
+    }),
+  )
+  return () => {
+    cleanups.forEach((fn) => fn?.())
+  }
+}
diff --git a/packages/utilities/form-utils/package.json b/packages/utilities/form-utils/package.json
index eabccbd76c..d2aa936eac 100644
--- a/packages/utilities/form-utils/package.json
+++ b/packages/utilities/form-utils/package.json
@@ -16,9 +16,6 @@
     "dist",
     "src"
   ],
-  "dependencies": {
-    "@zag-js/mutation-observer": "workspace:*"
-  },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
diff --git a/packages/utilities/form-utils/src/form.ts b/packages/utilities/form-utils/src/form.ts
index f74bbbb70b..191e8d4136 100644
--- a/packages/utilities/form-utils/src/form.ts
+++ b/packages/utilities/form-utils/src/form.ts
@@ -1,5 +1,3 @@
-import { observeAttributes } from "@zag-js/mutation-observer"
-
 export function getClosestForm(el: HTMLElement) {
   if (isFormElement(el)) return el.form
   else return el.closest("form")
@@ -22,7 +20,13 @@ function trackFieldsetDisabled(el: HTMLElement | null | undefined, callback: (di
   const fieldset = el?.closest("fieldset")
   if (!fieldset) return
   callback(fieldset.disabled)
-  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled))
+  const win = fieldset.ownerDocument.defaultView || window
+  const obs = new win.MutationObserver(() => callback(fieldset.disabled))
+  obs.observe(fieldset, {
+    attributes: true,
+    attributeFilter: ["disabled"],
+  })
+  return () => obs.disconnect()
 }
 
 export function isNativeDisabled(el: HTMLElement) {
diff --git a/packages/utilities/mutation-observer/CHANGELOG.md b/packages/utilities/mutation-observer/CHANGELOG.md
deleted file mode 100644
index b1b596c925..0000000000
--- a/packages/utilities/mutation-observer/CHANGELOG.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# @zag-js/mutation-observer
-
-## 0.47.0
-
-## 0.46.0
-
-## 0.45.0
-
-## 0.44.0
-
-## 0.43.0
-
-## 0.42.0
-
-## 0.41.0
-
-## 0.40.0
-
-## 0.39.0
-
-## 0.38.1
-
-## 0.38.0
-
-## 0.37.3
-
-## 0.37.2
-
-## 0.37.1
-
-## 0.37.0
-
-## 0.36.3
-
-## 0.36.2
-
-## 0.36.1
-
-## 0.36.0
-
-## 0.35.0
-
-## 0.34.0
-
-## 0.33.2
-
-## 0.33.1
-
-## 0.33.0
-
-## 0.32.1
-
-## 0.32.0
-
-## 0.31.1
-
-## 0.31.0
-
-## 0.30.0
-
-## 0.29.0
-
-## 0.28.1
-
-## 0.28.0
-
-## 0.27.1
-
-## 0.27.0
-
-## 0.26.0
-
-## 0.25.0
-
-## 0.24.0
-
-## 0.23.0
-
-## 0.22.0
-
-## 0.21.0
-
-## 0.20.0
-
-### Patch Changes
-
-- [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Remove toggle machine
-
-## 0.19.1
-
-## 0.19.0
-
-## 0.18.0
-
-## 0.17.0
-
-## 0.16.0
-
-## 0.15.0
-
-## 0.14.0
-
-## 0.13.0
-
-## 0.12.0
-
-## 0.11.2
-
-## 0.11.1
-
-## 0.11.0
-
-### Patch Changes
-
-- [`4f371874`](https://github.com/chakra-ui/zag/commit/4f3718742dc88a2cd8726bdd889c9bbde94f5bce) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Rebuild all packages using tsup
-
-## 0.10.5
-
-## 0.10.4
-
-## 0.10.3
-
-### Patch Changes
-
-- [`c59a8dec`](https://github.com/chakra-ui/zag/commit/c59a8dec15ab57d218823bfe7af6d723972be6c7) Thanks
-  [@cschroeter](https://github.com/cschroeter)! - Use vite to build packages
-
-## 0.10.2
-
-## 0.10.1
-
-## 0.10.0
-
-## 0.9.2
-
-## 0.9.1
-
-### Patch Changes
-
-- [`8469daa1`](https://github.com/chakra-ui/zag/commit/8469daa15fd7f2c0a80869a8715b0342bd3c355f) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Force release every package to fix regression
-
-## 0.0.1
-
-### Patch Changes
-
-- [#536](https://github.com/chakra-ui/zag/pull/536)
-  [`aabc9aed`](https://github.com/chakra-ui/zag/commit/aabc9aed93ae3f49e2cec8d8b28edd23a337ce99) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Refactor all packages to have proper dependency structure and
-  bundle size.
diff --git a/packages/utilities/mutation-observer/README.md b/packages/utilities/mutation-observer/README.md
deleted file mode 100644
index 5ff04c315f..0000000000
--- a/packages/utilities/mutation-observer/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# @zag-js/mutation-observer
-
-## Installation
-
-```sh
-yarn add @zag-js/mutation-observer
-# or
-npm i @zag-js/mutation-observer
-```
-
-## Contribution
-
-Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
-
-## Licence
-
-This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).
diff --git a/packages/utilities/mutation-observer/package.json b/packages/utilities/mutation-observer/package.json
deleted file mode 100644
index 0fa1fddd5a..0000000000
--- a/packages/utilities/mutation-observer/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "@zag-js/mutation-observer",
-  "version": "0.47.0",
-  "description": "",
-  "keywords": [
-    "js",
-    "utils",
-    "mutation-observer"
-  ],
-  "author": "Segun Adebayo <sage@adebayosegun.com>",
-  "homepage": "https://github.com/chakra-ui/zag#readme",
-  "license": "MIT",
-  "main": "src/index.ts",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/mutation-observer",
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "lint": "eslint src --ext .ts,.tsx",
-    "typecheck": "tsc --noEmit",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bugs": {
-    "url": "https://github.com/chakra-ui/zag/issues"
-  },
-  "clean-package": "../../../clean-package.config.json",
-  "devDependencies": {
-    "clean-package": "2.2.0"
-  }
-}
diff --git a/packages/utilities/mutation-observer/src/index.ts b/packages/utilities/mutation-observer/src/index.ts
deleted file mode 100644
index e7c68e3ee3..0000000000
--- a/packages/utilities/mutation-observer/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./observe-attributes"
-export * from "./observe-children"
diff --git a/packages/utilities/mutation-observer/src/observe-attributes.ts b/packages/utilities/mutation-observer/src/observe-attributes.ts
deleted file mode 100644
index ac2e0558ee..0000000000
--- a/packages/utilities/mutation-observer/src/observe-attributes.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type ObserveAttributesCallback = (record: MutationRecord) => void
-
-export function observeAttributes(node: HTMLElement | null, attributes: string[], fn: ObserveAttributesCallback) {
-  if (!node) return
-
-  const win = node.ownerDocument.defaultView || window
-
-  const obs = new win.MutationObserver((changes) => {
-    for (const change of changes) {
-      if (change.type === "attributes" && change.attributeName && attributes.includes(change.attributeName)) {
-        fn(change)
-      }
-    }
-  })
-
-  obs.observe(node, { attributes: true, attributeFilter: attributes })
-
-  return () => obs.disconnect()
-}
diff --git a/packages/utilities/mutation-observer/src/observe-children.ts b/packages/utilities/mutation-observer/src/observe-children.ts
deleted file mode 100644
index 3c00c730ac..0000000000
--- a/packages/utilities/mutation-observer/src/observe-children.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function observeChildren(node: HTMLElement | null, fn: (v: MutationRecord[]) => void) {
-  if (!node) return
-
-  const win = node.ownerDocument.defaultView || window
-
-  const obs = new win.MutationObserver(fn)
-  obs.observe(node, { childList: true, subtree: true })
-
-  return () => obs.disconnect()
-}
diff --git a/packages/utilities/mutation-observer/tsconfig.json b/packages/utilities/mutation-observer/tsconfig.json
deleted file mode 100644
index 8e781cd154..0000000000
--- a/packages/utilities/mutation-observer/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
-  }
-}
diff --git a/packages/utilities/tabbable/src/proxy-tab-focus.ts b/packages/utilities/tabbable/src/proxy-tab-focus.ts
index b0972fabba..323048e7d6 100644
--- a/packages/utilities/tabbable/src/proxy-tab-focus.ts
+++ b/packages/utilities/tabbable/src/proxy-tab-focus.ts
@@ -49,7 +49,11 @@ function proxyTabFocusImpl(container: MaybeElement, options: ProxyTabFocusOption
 
     event.preventDefault()
 
-    onFocus?.(elementToFocus) ?? elementToFocus.focus()
+    if (typeof onFocus === "function") {
+      onFocus(elementToFocus)
+    } else {
+      elementToFocus.focus()
+    }
   }
 
   // listen for the tab key in the capture phase
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93bb963390..66b8de7f85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       '@internationalized/date':
         specifier: 3.5.2
         version: 3.5.2
+      '@types/textarea-caret':
+        specifier: ^3.0.3
+        version: 3.0.3
       '@zag-js/accordion':
         specifier: workspace:*
         version: link:../../packages/machines/accordion
@@ -252,9 +255,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -360,6 +360,9 @@ importers:
       lucide-react:
         specifier: 0.368.0
         version: 0.368.0(react@18.2.0)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       next:
         specifier: 14.2.1
         version: 14.2.1(@playwright/test@1.43.1)(react-dom@18.2.0)(react@18.2.0)
@@ -372,6 +375,9 @@ importers:
       react-spinners:
         specifier: 0.13.8
         version: 0.13.8(react-dom@18.2.0)(react@18.2.0)
+      textarea-caret:
+        specifier: ^3.1.0
+        version: 3.1.0
     devDependencies:
       '@types/form-serialize':
         specifier: 0.7.4
@@ -508,9 +514,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -619,6 +622,9 @@ importers:
       lucide-vue-next:
         specifier: 0.368.0
         version: 0.368.0(vue@3.4.21)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       vue:
         specifier: 3.4.21
         version: 3.4.21(typescript@5.4.5)
@@ -637,7 +643,7 @@ importers:
         version: 20.12.7
       nuxt:
         specifier: 3.11.2
-        version: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.4)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.4)(vite@5.2.8)
+        version: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.1)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.1)(vite@5.2.8)
 
   examples/preact-ts:
     dependencies:
@@ -752,9 +758,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -857,6 +860,9 @@ importers:
       lucide-preact:
         specifier: 0.368.0
         version: 0.368.0(preact@10.20.2)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       preact:
         specifier: 10.20.2
         version: 10.20.2
@@ -999,9 +1005,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -1107,6 +1110,9 @@ importers:
       lucide-solid:
         specifier: 0.368.0
         version: 0.368.0(solid-js@1.8.16)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       solid-js:
         specifier: 1.8.16
         version: 1.8.16
@@ -1234,9 +1240,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -1342,6 +1345,9 @@ importers:
       lucide-svelte:
         specifier: 0.368.0
         version: 0.368.0(svelte@5.0.0-next.83)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       svelte-routing:
         specifier: 2.12.0
         version: 2.12.0
@@ -1487,9 +1493,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -1598,6 +1601,9 @@ importers:
       lucide-vue-next:
         specifier: 0.368.0
         version: 0.368.0(vue@3.4.21)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       vite:
         specifier: 5.2.8
         version: 5.2.8(@types/node@20.12.7)
@@ -1862,9 +1868,6 @@ importers:
       '@zag-js/dom-query':
         specifier: workspace:*
         version: link:../../utilities/dom-query
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../utilities/mutation-observer
       '@zag-js/types':
         specifier: workspace:*
         version: link:../../types
@@ -2042,9 +2045,6 @@ importers:
       '@zag-js/dom-query':
         specifier: workspace:*
         version: link:../../utilities/dom-query
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../utilities/mutation-observer
       '@zag-js/popper':
         specifier: workspace:*
         version: link:../../utilities/popper
@@ -2283,15 +2283,15 @@ importers:
       '@zag-js/dom-query':
         specifier: workspace:*
         version: link:../../utilities/dom-query
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../utilities/mutation-observer
       '@zag-js/popper':
         specifier: workspace:*
         version: link:../../utilities/popper
       '@zag-js/rect-utils':
         specifier: workspace:*
         version: link:../../utilities/rect
+      '@zag-js/tabbable':
+        specifier: workspace:*
+        version: link:../../utilities/tabbable
       '@zag-js/types':
         specifier: workspace:*
         version: link:../../types
@@ -2323,9 +2323,6 @@ importers:
       '@zag-js/form-utils':
         specifier: workspace:*
         version: link:../../utilities/form-utils
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../utilities/mutation-observer
       '@zag-js/number-utils':
         specifier: workspace:*
         version: link:../../utilities/number
@@ -2550,9 +2547,6 @@ importers:
       '@zag-js/form-utils':
         specifier: workspace:*
         version: link:../../utilities/form-utils
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../utilities/mutation-observer
       '@zag-js/popper':
         specifier: workspace:*
         version: link:../../utilities/popper
@@ -2885,9 +2879,6 @@ importers:
       '@zag-js/dom-query':
         specifier: workspace:*
         version: link:../../utilities/dom-query
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../utilities/mutation-observer
       '@zag-js/types':
         specifier: workspace:*
         version: link:../../types
@@ -3066,10 +3057,6 @@ importers:
         version: 2.2.0
 
   packages/utilities/form-utils:
-    dependencies:
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../mutation-observer
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -3202,7 +3189,7 @@ importers:
         version: 3.5.2
       '@tanstack/react-virtual':
         specifier: ^3.3.0
-        version: 3.4.0(react-dom@18.2.0)(react@18.2.0)
+        version: 3.3.0(react-dom@18.2.0)(react@18.2.0)
       '@zag-js/accordion':
         specifier: workspace:*
         version: link:../../packages/machines/accordion
@@ -3308,9 +3295,6 @@ importers:
       '@zag-js/menu':
         specifier: workspace:*
         version: link:../../packages/machines/menu
-      '@zag-js/mutation-observer':
-        specifier: workspace:*
-        version: link:../../packages/utilities/mutation-observer
       '@zag-js/number-input':
         specifier: workspace:*
         version: link:../../packages/machines/number-input
@@ -3413,6 +3397,9 @@ importers:
       lucide-react:
         specifier: 0.371.0
         version: 0.371.0(react@18.2.0)
+      match-sorter:
+        specifier: 6.3.4
+        version: 6.3.4
       next:
         specifier: 14.2.2
         version: 14.2.2(@opentelemetry/api@1.8.0)(@playwright/test@1.43.1)(react-dom@18.2.0)(react@18.2.0)
@@ -5833,8 +5820,8 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.23:
-    resolution: {integrity: sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==}
+  /@iconify/utils@2.1.22:
+    resolution: {integrity: sha512-6UHVzTVXmvO8uS6xFF+L/QTSpTzA/JZxtgU+KYGFyDYMEObZ1bu/b5l+zNJjHy+0leWjHI+C0pXlzGvv3oXZMA==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.7
@@ -6390,7 +6377,7 @@ packages:
       '@nuxt/kit': 3.10.3
       '@nuxt/schema': 3.10.3
       execa: 7.2.0
-      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.4)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.4)(vite@5.2.8)
+      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.1)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.1)(vite@5.2.8)
       vite: 5.2.8(@types/node@20.12.7)
     transitivePeerDependencies:
       - rollup
@@ -6406,7 +6393,7 @@ packages:
       '@nuxt/kit': 3.11.2
       '@nuxt/schema': 3.11.2
       execa: 7.2.0
-      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.4)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.4)(vite@5.2.8)
+      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.1)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.1)(vite@5.2.8)
       vite: 5.2.8(@types/node@20.12.7)
     transitivePeerDependencies:
       - rollup
@@ -6470,7 +6457,7 @@ packages:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.3
-      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.4)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.4)(vite@5.2.8)
+      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.1)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.1)(vite@5.2.8)
       nypm: 0.3.6
       ohash: 1.1.3
       pacote: 17.0.6
@@ -6496,7 +6483,7 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@nuxt/devtools@1.1.5(@unocss/reset@0.59.4)(floating-vue@5.2.2)(nuxt@3.11.2)(unocss@0.59.4)(vite@5.2.8)(vue@3.4.21):
+  /@nuxt/devtools@1.1.5(@unocss/reset@0.59.1)(floating-vue@5.2.2)(nuxt@3.11.2)(unocss@0.59.1)(vite@5.2.8)(vue@3.4.21):
     resolution: {integrity: sha512-aDEqz4L1GDj4DDnX7PL9ety3Wx0kLyKTb2JOSoJR8uX09fC3gonCvj/gYHLSSIKqhPasUjoOO5RPCtT+r9dtsA==}
     hasBin: true
     peerDependencies:
@@ -6507,7 +6494,7 @@ packages:
       '@nuxt/devtools-kit': 1.1.5(nuxt@3.11.2)(vite@5.2.8)
       '@nuxt/devtools-wizard': 1.1.5
       '@nuxt/kit': 3.11.2
-      '@vue/devtools-applet': 7.0.27(@unocss/reset@0.59.4)(floating-vue@5.2.2)(unocss@0.59.4)(vite@5.2.8)(vue@3.4.21)
+      '@vue/devtools-applet': 7.0.27(@unocss/reset@0.59.1)(floating-vue@5.2.2)(unocss@0.59.1)(vite@5.2.8)(vue@3.4.21)
       '@vue/devtools-core': 7.0.27(vite@5.2.8)(vue@3.4.21)
       '@vue/devtools-kit': 7.0.27(vue@3.4.21)
       birpc: 0.2.17
@@ -6525,7 +6512,7 @@ packages:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.3
-      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.4)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.4)(vite@5.2.8)
+      nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.1)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.1)(vite@5.2.8)
       nypm: 0.3.8
       ohash: 1.1.3
       pacote: 17.0.6
@@ -8259,19 +8246,19 @@ packages:
     resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
     dev: false
 
-  /@tanstack/react-virtual@3.4.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==}
+  /@tanstack/react-virtual@3.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-QFxmTSZBniq15S0vSZ55P4ToXquMXwJypPXyX/ux7sYo6a2FX3/zWoRLLc4eIOGWTjvzqcIVNKhcuFb+OZL3aQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@tanstack/virtual-core': 3.4.0
+      '@tanstack/virtual-core': 3.3.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@tanstack/virtual-core@3.4.0:
-    resolution: {integrity: sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==}
+  /@tanstack/virtual-core@3.3.0:
+    resolution: {integrity: sha512-A0004OAa1FcUkPHeeGoKgBrAgjH+uHdDPrw1L7RpkwnODYqRvoilqsHPs8cyTjMg1byZBbiNpQAq2TlFLIaQag==}
     dev: false
 
   /@trysound/sax@0.2.0:
@@ -8500,6 +8487,10 @@ packages:
       '@types/node': 20.12.7
     dev: false
 
+  /@types/textarea-caret@3.0.3:
+    resolution: {integrity: sha512-bsA9GdXV1wQsXyDjS5+A+czz8IAR3haH5DU+KctIoXbzobRL2NOiwF/+EbB7pofAyudMytLj4ihPtbmbJT8FWw==}
+    dev: false
+
   /@types/through@0.0.33:
     resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
     dependencies:
@@ -8664,7 +8655,7 @@ packages:
       '@typescript-eslint/utils': 7.1.1(eslint@8.57.0)(typescript@5.4.5)
       debug: 4.3.4
       eslint: 8.57.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
+      ts-api-utils: 1.2.1(typescript@5.4.5)
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -8740,7 +8731,7 @@ packages:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
+      ts-api-utils: 1.2.1(typescript@5.4.5)
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
@@ -8889,215 +8880,215 @@ packages:
       vue: 3.4.21(typescript@5.4.5)
     dev: true
 
-  /@unocss/astro@0.59.4(vite@5.2.8):
-    resolution: {integrity: sha512-DU3OR5MMR1Uvvec4/wB9EetDASHRg19Moy6z/MiIhn8JWJ0QzWYgSeJcfUX8exomMYv6WUEQJL+CyLI34Wmn8w==}
+  /@unocss/astro@0.59.1(vite@5.2.8):
+    resolution: {integrity: sha512-ecjD1Ed3oMEzqX9jY5qOTW63+bBYWtD0dmQ4UhatNsXU2JxWDQv3no5G4GTnuGUTePeDXkCHYwF/oQP0OIXYhQ==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
     peerDependenciesMeta:
       vite:
         optional: true
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/reset': 0.59.4
-      '@unocss/vite': 0.59.4(vite@5.2.8)
+      '@unocss/core': 0.59.1
+      '@unocss/reset': 0.59.1
+      '@unocss/vite': 0.59.1(vite@5.2.8)
       vite: 5.2.8(@types/node@20.12.7)
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/cli@0.59.4:
-    resolution: {integrity: sha512-TT+WKedSifhsRqnpoYD2LfyYipVzEbzIU4DDGIaDNeDxGXYOGpb876zzkPDcvZSpI37IJ/efkkV7PGYpPBcQBQ==}
+  /@unocss/cli@0.59.1:
+    resolution: {integrity: sha512-sQUESjwXJOMEWCD/RPzev/0ft0HRmXzV5o03QilEHHqp1f5nULqT9Q9msLCqO2OkPD8LeTnWUNFEVIhdssqQBQ==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.0(rollup@4.14.1)
-      '@unocss/config': 0.59.4
-      '@unocss/core': 0.59.4
-      '@unocss/preset-uno': 0.59.4
+      '@unocss/config': 0.59.1
+      '@unocss/core': 0.59.1
+      '@unocss/preset-uno': 0.59.1
       cac: 6.7.14
       chokidar: 3.6.0
       colorette: 2.0.20
       consola: 3.2.3
       fast-glob: 3.3.2
-      magic-string: 0.30.10
+      magic-string: 0.30.9
       pathe: 1.1.2
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/config@0.59.4:
-    resolution: {integrity: sha512-h3yhj+D5Ygn5R7gbK4wMrtXZX6FF5DF6YD517sSSb0XB3lxHD9PhhT4HaV1hpHknvu0cMFU3460M45+TN1TI0Q==}
+  /@unocss/config@0.59.1:
+    resolution: {integrity: sha512-VQhz6mScRlvgXCrlvEYMee1VkqTCcrEtJwW3r7KTQTEfxxNymg4TZKqqNL6dp7kqdZKLHQytQokSGuLIPRaAdQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.59.4
-      unconfig: 0.3.13
+      '@unocss/core': 0.59.1
+      unconfig: 0.3.12
     dev: true
 
-  /@unocss/core@0.59.4:
-    resolution: {integrity: sha512-bBZ1sgcAtezQVZ1BST9IS3jqcsTLyqKNjiIf7FTnX3DHpfpYuMDFzSOtmkZDzBleOLO/CtcRWjT0HwTSQAmV0A==}
+  /@unocss/core@0.59.1:
+    resolution: {integrity: sha512-4T9eSmEhmxlYnz0xilIavROiEWvEcEtWixIQEaP4MqWabaRew6yN1ky4ALZZgaTUdS50EXGR3bYVz1vah9sfFw==}
     dev: true
 
-  /@unocss/extractor-arbitrary-variants@0.59.4:
-    resolution: {integrity: sha512-RDe4FgMGJQ+tp9GLvhPHni7Cc2O0lHBRMElVlN8LoXJAdODMICdbrEPGJlEfrc+7x/QgVFoR895KpYJh3hIgGA==}
+  /@unocss/extractor-arbitrary-variants@0.59.1:
+    resolution: {integrity: sha512-WoxmSTQ7YnAZwjM7FO+m6Q24XYCLglRPcWKFahFGZcDWdvyNXvelsEMxtoDK3BmV/s5J/kNyU2FDqJpFqI+hWg==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     dev: true
 
-  /@unocss/inspector@0.59.4:
-    resolution: {integrity: sha512-QczJFNDiggmekkJyNcbcZIUVwlhvxz7ZwjnSf0w7K4znxfjKkZ1hNUbqLviM1HumkTKOdT27VISW7saN/ysO4w==}
+  /@unocss/inspector@0.59.1:
+    resolution: {integrity: sha512-jK09d1UGwBIIwSZX0cvMrbyK0l7oZCudeCRe8YAU1SUOSiIv7+Zygw7HYg+nOy3W+H/mz72D41QdX+tO3HGa6w==}
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/rule-utils': 0.59.4
+      '@unocss/core': 0.59.1
+      '@unocss/rule-utils': 0.59.1
       gzip-size: 6.0.0
       sirv: 2.0.4
     dev: true
 
-  /@unocss/postcss@0.59.4(postcss@8.4.38):
-    resolution: {integrity: sha512-KVz+AD7McHKp7VEWHbFahhyyVEo0oP/e1vnuNSuPlHthe+1V2zfH6lps+iJcvfL2072r5J+0PvD/1kOp5ryUSg==}
+  /@unocss/postcss@0.59.1(postcss@8.4.38):
+    resolution: {integrity: sha512-zgI81hv8zAeLayi37RA22CrWtgFizdxIBQTkfu2HcgSqbCrnKMTHoSWcrbVrw+MpqpIkuKIeDl9NWiPK0vrTzA==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
-      '@unocss/config': 0.59.4
-      '@unocss/core': 0.59.4
-      '@unocss/rule-utils': 0.59.4
+      '@unocss/config': 0.59.1
+      '@unocss/core': 0.59.1
+      '@unocss/rule-utils': 0.59.1
       css-tree: 2.3.1
       fast-glob: 3.3.2
-      magic-string: 0.30.10
+      magic-string: 0.30.9
       postcss: 8.4.38
     dev: true
 
-  /@unocss/preset-attributify@0.59.4:
-    resolution: {integrity: sha512-BeogWuYaIakC1gmOZFFCjFVWmu/m3AqEX8UYQS6tY6lAaK2L4Qf4AstYBlT2zAMxy9LNxPDxFQrvfSfFk5Klsg==}
+  /@unocss/preset-attributify@0.59.1:
+    resolution: {integrity: sha512-YoWDxRDFz8bpEVTli00j0XoynR/IEL/b4TsiGuaUEM6T/gAkkSOE16CH6rFXwo7g+yASQ/4RfByeq3KTdRD2dA==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     dev: true
 
-  /@unocss/preset-icons@0.59.4:
-    resolution: {integrity: sha512-Afjwh5oC4KRE8TNZDUkRK6hvvV1wKLrS1e5trniE0B0AM9HK3PBolQaIU7QmzPv6WQrog+MZgIwafg1eqsPUCA==}
+  /@unocss/preset-icons@0.59.1:
+    resolution: {integrity: sha512-bzdaXf0ftwcUoK0bPmktMPjrgAmr7iOSTOYl3q/W5VQxgLpgMt+ZJ1i3MGVyY2CyBVfHguO4oYVO1QdHxAq1tA==}
     dependencies:
-      '@iconify/utils': 2.1.23
-      '@unocss/core': 0.59.4
+      '@iconify/utils': 2.1.22
+      '@unocss/core': 0.59.1
       ofetch: 1.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini@0.59.4:
-    resolution: {integrity: sha512-ZLywGrXi1OCr4My5vX2rLUb5Xgx6ufR9WTQOvpQJGBdIV/jnZn/pyE5avCs476SnOq2K172lnd8mFmTK7/zArA==}
+  /@unocss/preset-mini@0.59.1:
+    resolution: {integrity: sha512-IEKMG3ahkR4T+9XrB5So7PD504J9DTWhHcPRtLDR1Ypb6qxNaHHu/M5QOWz51RA/SOjuOltZAnCJueb74BfoEg==}
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/extractor-arbitrary-variants': 0.59.4
-      '@unocss/rule-utils': 0.59.4
+      '@unocss/core': 0.59.1
+      '@unocss/extractor-arbitrary-variants': 0.59.1
+      '@unocss/rule-utils': 0.59.1
     dev: true
 
-  /@unocss/preset-tagify@0.59.4:
-    resolution: {integrity: sha512-vWMdTUoghOSmTbdmZtERssffmdUdOuhh4vUdl0R8Kv6KxB0PkvEFCu2FItn97nRJdSPlZSFxxDkaOIg9w+STNQ==}
+  /@unocss/preset-tagify@0.59.1:
+    resolution: {integrity: sha512-ID40uUyjwIeU3v1Z32QVZi48+VmGJhlTNpCneXKRXvQrgp1WjruoedOw1+wqiDkeZfL+Q4aK4pkZ7h3/aEhkgQ==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     dev: true
 
-  /@unocss/preset-typography@0.59.4:
-    resolution: {integrity: sha512-ZX9bxZUqlXK1qEDzO5lkK96ICt9itR/oNyn/7mMc1JPqwj263LumQMn5silocgzoLSUXEeq//L6GylqYjkL8GA==}
+  /@unocss/preset-typography@0.59.1:
+    resolution: {integrity: sha512-38g0y25baIbwpjOIHJwssMwfcMXNmJ4fUoqHufnwVmEbz49Oa+NlZtHjVAE2fVzB7nD2cBTnp2v9rShDQSbZeA==}
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/preset-mini': 0.59.4
+      '@unocss/core': 0.59.1
+      '@unocss/preset-mini': 0.59.1
     dev: true
 
-  /@unocss/preset-uno@0.59.4:
-    resolution: {integrity: sha512-G1f8ZluplvXZ3bERj+sM/8zzY//XD++nNOlAQNKOANSVht3qEoJebrfEiMClNpA5qW5VWOZhEhPkh0M7GsXtnA==}
+  /@unocss/preset-uno@0.59.1:
+    resolution: {integrity: sha512-cLjrvB+Ba7OK1LrAR2RsGvqU9pqi1Qwoi6i0KvNJrg5uD2rplUTN0lnwaIJXZaUs61nlKkTBf6Jap5NnTUwMyQ==}
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/preset-mini': 0.59.4
-      '@unocss/preset-wind': 0.59.4
-      '@unocss/rule-utils': 0.59.4
+      '@unocss/core': 0.59.1
+      '@unocss/preset-mini': 0.59.1
+      '@unocss/preset-wind': 0.59.1
+      '@unocss/rule-utils': 0.59.1
     dev: true
 
-  /@unocss/preset-web-fonts@0.59.4:
-    resolution: {integrity: sha512-ehutTjKHnf2KPmdatN42N9a8+y+glKSU3UlcBRNsVIIXVIlaBQuPVGZSPhnMtrKD17IgWylXq2K6RJK+ab0hZA==}
+  /@unocss/preset-web-fonts@0.59.1:
+    resolution: {integrity: sha512-7+cDudd0mvhliww/eDieHxyqmOw8OkbHcbrfiDF7ce+PkM695acmuPM381FEruyDV/Yzi5VBex79NIw7DB3eUg==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
       ofetch: 1.3.4
     dev: true
 
-  /@unocss/preset-wind@0.59.4:
-    resolution: {integrity: sha512-CNX6w0ZpSQg/i1oF0/WKWzto8PtLqoknC5h8JmmcGb7VsyBQeV0oNnhbURxpbuMEhbv1MWVIGvk8a+P6y0rFkQ==}
+  /@unocss/preset-wind@0.59.1:
+    resolution: {integrity: sha512-wI5GsZved5RAawS0db8K1nTzNZUF1XkmunmeKrJn7UQn0uCnnQm4qrKpIwe1/wTS/utLICFhjjaOqI2xPtWcCw==}
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/preset-mini': 0.59.4
-      '@unocss/rule-utils': 0.59.4
+      '@unocss/core': 0.59.1
+      '@unocss/preset-mini': 0.59.1
+      '@unocss/rule-utils': 0.59.1
     dev: true
 
-  /@unocss/reset@0.59.4:
-    resolution: {integrity: sha512-Upy4xzdWl4RChbLAXBq1BoR4WqxXMoIfjvtcwSZcZK2sylXCFAseSWnyzJFdSiXPqNfmMuNgPXgiSxiQB+cmNA==}
+  /@unocss/reset@0.59.1:
+    resolution: {integrity: sha512-oXnUNavUraimiEhrckeVsSYqKVna2Asqt3dysnXuZ/9Y8O0tdx2Bba1oxdoGi8/cQvfD697+2hm52u0IKTw76A==}
     dev: true
 
-  /@unocss/rule-utils@0.59.4:
-    resolution: {integrity: sha512-1qoLJlBWAkS4D4sg73990S1MT7E8E5md/YhopKjTQuEC9SyeVmEg+5pR/Xd8xhPKMqbcuBPl/DS8b6l/GQO56A==}
+  /@unocss/rule-utils@0.59.1:
+    resolution: {integrity: sha512-wEMG3xfaQ9dO2srUhZjO4vrTrJsFcW7dCrDBv8dlofQOEi4d0VDcgg8ytXahOvBxjusbTfDBONOHiEyHAKFN5A==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.59.4
-      magic-string: 0.30.10
+      '@unocss/core': 0.59.1
+      magic-string: 0.30.9
     dev: true
 
-  /@unocss/scope@0.59.4:
-    resolution: {integrity: sha512-wBQJ39kw4Tfj4km7AoGvSIobPKVnRZVsgc0bema5Y0PL3g1NeVQ/LopBI2zEJWdpxGXUWxSDsXm7BZo6qVlD/A==}
+  /@unocss/scope@0.59.1:
+    resolution: {integrity: sha512-cGU1FaWP+1UcS5MtXGNBlXKsCKCdlXhfuEm55Y0G+fTXQbvqKSTp55hepjw3uYvJAwEhMx/hTS9Yb5OVzGweHA==}
     dev: true
 
-  /@unocss/transformer-attributify-jsx-babel@0.59.4:
-    resolution: {integrity: sha512-xtCRSgeTaDBiNJLVX7oOSFe63JiFB5nrdK23PHn3IlZM9O7Bxx4ZxI3MQJtFZFQNE+INFko+DVyY1WiFEm1p/Q==}
+  /@unocss/transformer-attributify-jsx-babel@0.59.1:
+    resolution: {integrity: sha512-bGb11H0MgB9W+27WqN2pM75qpABNrVexWrI635S/TF+VTHobK1clrVaCLiJ3WDIvgeZYOhGuozUxYSNNwVaGBA==}
     dependencies:
       '@babel/core': 7.24.4
       '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4)
       '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4)
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.59.4:
-    resolution: {integrity: sha512-m4b83utzKMfUQH/45V2QkjJoXd8Tu2pRP1nic91Xf7QRceyKDD+BxoTneo2JNC2K274cQu7HqqotnCm2aFfEGw==}
+  /@unocss/transformer-attributify-jsx@0.59.1:
+    resolution: {integrity: sha512-ZFaQ5b83mJXFnJi/CBehQvBtPNGNNUEmi9GAH4J8hrtlDhNibXBAI3BsjgOKH3w3g18TywU4g/AdTOHi9LKCxw==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     dev: true
 
-  /@unocss/transformer-compile-class@0.59.4:
-    resolution: {integrity: sha512-Vgk2OCLPW0pU+Uzr1IgDtHVspSBb+gPrQFkV+5gxHk9ZdKi3oYKxLuufVWYDSwv7o9yfQGbYrMH9YLsjRsnA7Q==}
+  /@unocss/transformer-compile-class@0.59.1:
+    resolution: {integrity: sha512-8vcmxVAXVzv7RvsuDr62hOqx/88lO4+oYaG+KKqKfjZAWZoUo06FutWW+Emg2mkW+VI88+7FAnqpH0gRKFQ/yA==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     dev: true
 
-  /@unocss/transformer-directives@0.59.4:
-    resolution: {integrity: sha512-nXUTEclUbs0vQ4KfLhKt4J/5SLSEq1az2FNlJmiXMmqmn75X89OrtCu2OJu9sGXhn+YyBApxgcSSdxmtpqMi1Q==}
+  /@unocss/transformer-directives@0.59.1:
+    resolution: {integrity: sha512-8M/p3BEWKG+vw3rGDiNFUmGHHVhbwzs3FpIAdfYFJpf29HnDiIeQkjqNpHZsPCSpJ7smwRYWx/Yk2Zz7eBWh2Q==}
     dependencies:
-      '@unocss/core': 0.59.4
-      '@unocss/rule-utils': 0.59.4
+      '@unocss/core': 0.59.1
+      '@unocss/rule-utils': 0.59.1
       css-tree: 2.3.1
     dev: true
 
-  /@unocss/transformer-variant-group@0.59.4:
-    resolution: {integrity: sha512-9XLixxn1NRgP62Kj4R/NC/rpqhql5F2s6ulJ8CAMTEbd/NylVhEANluPGDVUGcLJ4cj6E02hFa8C1PLGSm7/xw==}
+  /@unocss/transformer-variant-group@0.59.1:
+    resolution: {integrity: sha512-zbmrhk+9O6wOMbJDSlU0SpZ6yih4V+e/b18SSXq+Hhn1Vqi9LuiyvpD+HWlalzPe1lUoRn5c1t0Dg+4bDFuO2w==}
     dependencies:
-      '@unocss/core': 0.59.4
+      '@unocss/core': 0.59.1
     dev: true
 
-  /@unocss/vite@0.59.4(vite@5.2.8):
-    resolution: {integrity: sha512-q7GN7vkQYn79n7vYIUlaa7gXGwc7pk0Qo3z3ZFwWGE43/DtZnn2Hwl5UjgBAgi9McA+xqHJEHRsJnI7HJPHUYA==}
+  /@unocss/vite@0.59.1(vite@5.2.8):
+    resolution: {integrity: sha512-jJYquAPZxNndvTc7SmEbhdwSm80TddeUqcNNbRHj4+8AWZHVkzMxgxxWbxDco265f2WkKdEaHg+xlgtixhOT8Q==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.0(rollup@4.14.1)
-      '@unocss/config': 0.59.4
-      '@unocss/core': 0.59.4
-      '@unocss/inspector': 0.59.4
-      '@unocss/scope': 0.59.4
-      '@unocss/transformer-directives': 0.59.4
+      '@unocss/config': 0.59.1
+      '@unocss/core': 0.59.1
+      '@unocss/inspector': 0.59.1
+      '@unocss/scope': 0.59.1
+      '@unocss/transformer-directives': 0.59.1
       chokidar: 3.6.0
       fast-glob: 3.3.2
-      magic-string: 0.30.10
+      magic-string: 0.30.9
       vite: 5.2.8(@types/node@20.12.7)
     transitivePeerDependencies:
       - rollup
@@ -9315,7 +9306,7 @@ packages:
       '@vue/shared': 3.4.21
       estree-walker: 2.0.2
       magic-string: 0.30.7
-      postcss: 8.4.38
+      postcss: 8.4.37
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.4.21:
@@ -9327,7 +9318,7 @@ packages:
   /@vue/devtools-api@6.6.1:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
 
-  /@vue/devtools-applet@7.0.27(@unocss/reset@0.59.4)(floating-vue@5.2.2)(unocss@0.59.4)(vite@5.2.8)(vue@3.4.21):
+  /@vue/devtools-applet@7.0.27(@unocss/reset@0.59.1)(floating-vue@5.2.2)(unocss@0.59.1)(vite@5.2.8)(vue@3.4.21):
     resolution: {integrity: sha512-ubNn/qIn5n3x7YCVSabfQfKL49GoJPJdYu4LfdNz/gZkgb1+djdATpKl/+xzQoOqtGzqnR9nMoCHApAJAgeMyg==}
     peerDependencies:
       vue: ^3.0.0
@@ -9335,7 +9326,7 @@ packages:
       '@vue/devtools-core': 7.0.27(vite@5.2.8)(vue@3.4.21)
       '@vue/devtools-kit': 7.0.27(vue@3.4.21)
       '@vue/devtools-shared': 7.0.27
-      '@vue/devtools-ui': 7.0.27(@unocss/reset@0.59.4)(floating-vue@5.2.2)(unocss@0.59.4)(vue@3.4.21)
+      '@vue/devtools-ui': 7.0.27(@unocss/reset@0.59.1)(floating-vue@5.2.2)(unocss@0.59.1)(vue@3.4.21)
       perfect-debounce: 1.0.0
       splitpanes: 3.1.5
       vue: 3.4.21(typescript@5.4.5)
@@ -9392,7 +9383,7 @@ packages:
       rfdc: 1.3.1
     dev: true
 
-  /@vue/devtools-ui@7.0.27(@unocss/reset@0.59.4)(floating-vue@5.2.2)(unocss@0.59.4)(vue@3.4.21):
+  /@vue/devtools-ui@7.0.27(@unocss/reset@0.59.1)(floating-vue@5.2.2)(unocss@0.59.1)(vue@3.4.21):
     resolution: {integrity: sha512-MVcQwqqGNW2poW29OkzOcpNLHb0R/VQECWYiDYvKqjWp3G8M/FS2E5mUnjXxZGpfqHjSEmJs+fFGY8exnYpNng==}
     peerDependencies:
       '@unocss/reset': '>=0.50.0-0'
@@ -9400,14 +9391,14 @@ packages:
       unocss: '>=0.50.0-0'
       vue: '>=3.0.0-0'
     dependencies:
-      '@unocss/reset': 0.59.4
+      '@unocss/reset': 0.59.1
       '@vueuse/components': 10.9.0(vue@3.4.21)
       '@vueuse/core': 10.9.0(vue@3.4.21)
       '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.21)
       colord: 2.9.3
       floating-vue: 5.2.2(vue@3.4.21)
       focus-trap: 7.5.4
-      unocss: 0.59.4(postcss@8.4.38)(vite@5.2.8)
+      unocss: 0.59.1(postcss@8.4.38)(vite@5.2.8)
       vue: 3.4.21(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -10154,8 +10145,8 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  /bare-events@2.2.2:
-    resolution: {integrity: sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==}
+  /bare-events@2.2.1:
+    resolution: {integrity: sha512-9GYPpsPFvrWBkelIhOhTWtkeZxVxZOdb3VnFTCzlOo3OjvmTvzLoZFUT8kNFACx0vJej6QPney1Cf9BvzCNE/A==}
     requiresBuild: true
     dev: true
     optional: true
@@ -10397,6 +10388,10 @@ packages:
       lodash.uniq: 4.5.0
     dev: true
 
+  /caniuse-lite@1.0.30001591:
+    resolution: {integrity: sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==}
+    dev: true
+
   /caniuse-lite@1.0.30001608:
     resolution: {integrity: sha512-cjUJTQkk9fQlJR2s4HMuPMvTiRggl0rAVMtthQuyOlDWuqHXqN8azLq+pi8B2TjwKJ32diHjUqRIKeFX4z1FoA==}
 
@@ -11925,7 +11920,7 @@ packages:
       '@mdn/browser-compat-data': 5.5.12
       ast-metadata-inferer: 0.8.0
       browserslist: 4.23.0
-      caniuse-lite: 1.0.30001608
+      caniuse-lite: 1.0.30001591
       eslint: 8.57.0
       find-up: 5.0.0
       lodash.memoize: 4.1.2
@@ -14669,12 +14664,6 @@ packages:
       magic-string: 0.30.9
     dev: true
 
-  /magic-string@0.30.10:
-    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
-
   /magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
@@ -16256,7 +16245,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /nuxt@3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.4)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.4)(vite@5.2.8):
+  /nuxt@3.11.2(@types/node@20.12.7)(@unocss/reset@0.59.1)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.59.1)(vite@5.2.8):
     resolution: {integrity: sha512-Be1d4oyFo60pdF+diBolYDcfNemoMYM3R8PDjhnGrs/w3xJoDH1YMUVWHXXY8WhSmYZI7dyBehx/6kTfGFliVA==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -16270,7 +16259,7 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.1.5(@unocss/reset@0.59.4)(floating-vue@5.2.2)(nuxt@3.11.2)(unocss@0.59.4)(vite@5.2.8)(vue@3.4.21)
+      '@nuxt/devtools': 1.1.5(@unocss/reset@0.59.1)(floating-vue@5.2.2)(nuxt@3.11.2)(unocss@0.59.1)(vite@5.2.8)(vue@3.4.21)
       '@nuxt/kit': 3.11.2
       '@nuxt/schema': 3.11.2
       '@nuxt/telemetry': 2.5.3
@@ -17341,6 +17330,14 @@ packages:
       source-map-js: 1.2.0
     dev: false
 
+  /postcss@8.4.37:
+    resolution: {integrity: sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.2.0
+
   /postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -18657,7 +18654,7 @@ packages:
       fast-fifo: 1.3.2
       queue-tick: 1.0.1
     optionalDependencies:
-      bare-events: 2.2.2
+      bare-events: 2.2.1
     dev: true
 
   /string-argv@0.3.2:
@@ -19114,6 +19111,10 @@ packages:
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  /textarea-caret@3.1.0:
+    resolution: {integrity: sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==}
+    dev: false
+
   /thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -19511,12 +19512,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /unconfig@0.3.13:
-    resolution: {integrity: sha512-N9Ph5NC4+sqtcOjPfHrRcHekBCadCXWTBzp2VYYbySOHW0PfD9XLCeXshTXjkPYwLrBr9AtSeU0CZmkYECJhng==}
+  /unconfig@0.3.12:
+    resolution: {integrity: sha512-oDtfWDC0TMYFuwdt7E7CaqYZGqq1wAiC12PRTFe/93IkgNi+wVlF/LCjcD/bgNkGoopb0RsU363Ge3YXy7NGSw==}
     dependencies:
       '@antfu/utils': 0.7.7
       defu: 6.1.4
       jiti: 1.21.0
+      mlly: 1.6.1
     dev: true
 
   /uncrypto@0.1.3:
@@ -19528,7 +19530,7 @@ packages:
     dependencies:
       acorn: 8.11.3
       estree-walker: 3.0.3
-      magic-string: 0.30.9
+      magic-string: 0.30.8
       unplugin: 1.7.1
     dev: true
 
@@ -19722,11 +19724,11 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.59.4(postcss@8.4.38)(vite@5.2.8):
-    resolution: {integrity: sha512-QmCVjRObvVu/gsGrJGVt0NnrdhFFn314BUZn2WQyXV9rIvHLRmG5bIu0j5vibJkj7ZhFchTrnTM1pTFXP1xt5g==}
+  /unocss@0.59.1(postcss@8.4.38)(vite@5.2.8):
+    resolution: {integrity: sha512-AEnUxJSVqcTtiCYNc5QKoc11dVa2OPwd1V/uPLchKiC/AcPMZTkfZsQ9Xd6xvXGx5dfg4JMTXoj8/C+Y8fCt9Q==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.59.4
+      '@unocss/webpack': 0.59.1
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
     peerDependenciesMeta:
       '@unocss/webpack':
@@ -19734,26 +19736,26 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@unocss/astro': 0.59.4(vite@5.2.8)
-      '@unocss/cli': 0.59.4
-      '@unocss/core': 0.59.4
-      '@unocss/extractor-arbitrary-variants': 0.59.4
-      '@unocss/postcss': 0.59.4(postcss@8.4.38)
-      '@unocss/preset-attributify': 0.59.4
-      '@unocss/preset-icons': 0.59.4
-      '@unocss/preset-mini': 0.59.4
-      '@unocss/preset-tagify': 0.59.4
-      '@unocss/preset-typography': 0.59.4
-      '@unocss/preset-uno': 0.59.4
-      '@unocss/preset-web-fonts': 0.59.4
-      '@unocss/preset-wind': 0.59.4
-      '@unocss/reset': 0.59.4
-      '@unocss/transformer-attributify-jsx': 0.59.4
-      '@unocss/transformer-attributify-jsx-babel': 0.59.4
-      '@unocss/transformer-compile-class': 0.59.4
-      '@unocss/transformer-directives': 0.59.4
-      '@unocss/transformer-variant-group': 0.59.4
-      '@unocss/vite': 0.59.4(vite@5.2.8)
+      '@unocss/astro': 0.59.1(vite@5.2.8)
+      '@unocss/cli': 0.59.1
+      '@unocss/core': 0.59.1
+      '@unocss/extractor-arbitrary-variants': 0.59.1
+      '@unocss/postcss': 0.59.1(postcss@8.4.38)
+      '@unocss/preset-attributify': 0.59.1
+      '@unocss/preset-icons': 0.59.1
+      '@unocss/preset-mini': 0.59.1
+      '@unocss/preset-tagify': 0.59.1
+      '@unocss/preset-typography': 0.59.1
+      '@unocss/preset-uno': 0.59.1
+      '@unocss/preset-web-fonts': 0.59.1
+      '@unocss/preset-wind': 0.59.1
+      '@unocss/reset': 0.59.1
+      '@unocss/transformer-attributify-jsx': 0.59.1
+      '@unocss/transformer-attributify-jsx-babel': 0.59.1
+      '@unocss/transformer-compile-class': 0.59.1
+      '@unocss/transformer-directives': 0.59.1
+      '@unocss/transformer-variant-group': 0.59.1
+      '@unocss/vite': 0.59.1(vite@5.2.8)
       vite: 5.2.8(@types/node@20.12.7)
     transitivePeerDependencies:
       - postcss
diff --git a/shared/src/command.ts b/shared/src/command.ts
new file mode 100644
index 0000000000..e381ca87f4
--- /dev/null
+++ b/shared/src/command.ts
@@ -0,0 +1,122 @@
+export interface Command {
+  name: string
+  title: string
+  description?: string
+  extension?: Omit<Extension, "commands">
+}
+
+export interface Extension {
+  name: string
+  title: string
+  description?: string
+  commands: Command[]
+}
+
+export const applications: Command[] = [
+  { name: "app-app-store", title: "App Store", description: "Browse and download apps" },
+  { name: "app-books", title: "Books", description: "Read and manage books" },
+  { name: "app-calculator", title: "Calculator", description: "Perform mathematical calculations" },
+  { name: "app-calendar", title: "Calendar", description: "Manage events and appointments" },
+  { name: "app-contacts", title: "Contacts", description: "Manage your contacts" },
+  { name: "app-mail", title: "Mail", description: "Manage your email" },
+  { name: "app-podcasts", title: "Podcasts", description: "Listen to podcasts" },
+  { name: "app-notes", title: "Notes", description: "Create and manage notes" },
+]
+
+export const extensions: Extension[] = [
+  {
+    name: "ext-calendar",
+    title: "Calendar Extension",
+    description: "Extend calendar functionality",
+    commands: [
+      { name: "cmd-calendar-my-schedule", title: "My Schedule", description: "View your schedule" },
+      { name: "cmd-calendar-create-event", title: "Create Event", description: "Create a new event" },
+      { name: "cmd-calendar-edit-event", title: "Edit Event", description: "Edit an existing event" },
+    ],
+  },
+  {
+    name: "ext-color-picker",
+    title: "Color Picker Extension",
+    description: "Pick colors and manage color palettes",
+    commands: [
+      {
+        name: "cmd-color-picker-menu-bar",
+        title: "Menu Bar Color Picker",
+        description: "Pick colors from the menu bar",
+      },
+      { name: "cmd-color-picker-organize-colors", title: "Organize Colors", description: "Manage color palettes" },
+      { name: "cmd-color-picker-pick", title: "Pick Color", description: "Pick a color from the screen" },
+    ],
+  },
+  {
+    name: "ext-contacts",
+    title: "Contacts Extension",
+    description: "Extend contacts management",
+    commands: [
+      { name: "cmd-contacts-search", title: "Search Contacts", description: "Search and find contacts" },
+      { name: "cmd-contacts-import", title: "Import Contacts", description: "Import contacts from a file" },
+      { name: "cmd-contacts-export", title: "Export Contacts", description: "Export contacts to a file" },
+    ],
+  },
+  {
+    name: "ext-developer",
+    title: "Developer Extension",
+    description: "Tools for developers",
+    commands: [
+      { name: "cmd-developer-create-extension", title: "Create Extension", description: "Create a new extension" },
+      {
+        name: "cmd-developer-extension-diagnostics",
+        title: "Extension Diagnostics",
+        description: "Check extension health and performance",
+      },
+      {
+        name: "cmd-developer-import-extension",
+        title: "Import Extension",
+        description: "Import an existing extension",
+      },
+      {
+        name: "cmd-developer-manage-extension",
+        title: "Manage Extensions",
+        description: "Manage installed extensions",
+      },
+    ],
+  },
+  {
+    name: "ext-ai",
+    title: "AI Extension",
+    description: "Artificial intelligence capabilities",
+    commands: [
+      { name: "cmd-ai-chat", title: "AI Chat", description: "Chat with an AI assistant" },
+      { name: "cmd-ai-create-ai-command", title: "Create AI Command", description: "Create custom AI commands" },
+      { name: "cmd-ai-import-ai-commands", title: "Import AI Commands", description: "Import predefined AI commands" },
+      {
+        name: "cmd-ai-search-ai-commands",
+        title: "Search AI Commands",
+        description: "Search for available AI commands",
+      },
+      { name: "cmd-ai-send-to-ai-chat", title: "Send to AI Chat", description: "Send text to AI chat for processing" },
+      {
+        name: "cmd-ai-fix-spelling-and-grammar",
+        title: "Fix Spelling and Grammar",
+        description: "Correct spelling and grammar mistakes",
+      },
+      { name: "cmd-ai-improve-writing", title: "Improve Writing", description: "Get suggestions to improve writing" },
+    ],
+  },
+]
+
+export const commands = extensions.flatMap(({ commands, ...extension }) =>
+  commands?.map((command) => ({ extension, ...command })),
+)
+
+export const allItems = [...applications, ...commands]
+
+export const suggestions = [
+  "cmd-contacts-search",
+  "cmd-ai-improve-writing",
+  "app-calendar",
+  "app-app-store",
+  "app-books",
+]
+  .map((name) => allItems.find((item) => item.name === name))
+  .filter((item): item is NonNullable<typeof item> => !!item)
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 59e42e604d..bc30740d1d 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -35,9 +35,8 @@ export const comboboxControls = defineControls({
   },
   disabled: { type: "boolean", defaultValue: false },
   multiple: { type: "boolean", defaultValue: false },
-  loop: { type: "boolean", defaultValue: true },
+  loopFocus: { type: "boolean", defaultValue: true },
   openOnClick: { type: "boolean", defaultValue: false },
-  selectOnBlur: { type: "boolean", defaultValue: true },
 })
 
 export const editableControls = defineControls({
@@ -128,7 +127,7 @@ export const sliderControls = defineControls({
 
 export const tabsControls = defineControls({
   activationMode: { type: "select", options: ["manual", "automatic"] as const, defaultValue: "automatic" },
-  loop: { type: "boolean", defaultValue: true },
+  loopFocus: { type: "boolean", defaultValue: true },
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
   orientation: { type: "select", options: ["vertical", "horizontal"] as const, defaultValue: "horizontal" },
 })
@@ -171,9 +170,8 @@ export const toastControls = defineControls({
 export const selectControls = defineControls({
   multiple: { type: "boolean", defaultValue: false },
   disabled: { type: "boolean", defaultValue: false },
-  loop: { type: "boolean", defaultValue: false },
+  loopFocus: { type: "boolean", defaultValue: false },
   readOnly: { type: "boolean", defaultValue: false },
-  selectOnBlur: { type: "boolean", defaultValue: false },
   closeOnSelect: { type: "boolean", defaultValue: true },
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
 })
@@ -222,7 +220,7 @@ export const fileUploadControls = defineControls({
 
 export const toggleGroupControls = defineControls({
   disabled: { type: "boolean", defaultValue: false },
-  loop: { type: "boolean", defaultValue: true },
+  loopFocus: { type: "boolean", defaultValue: true },
   multiple: { type: "boolean", defaultValue: false },
   rovingFocus: { type: "boolean", defaultValue: true },
 })
diff --git a/shared/src/css/combobox.css b/shared/src/css/combobox.css
index deae2a339e..af65450364 100644
--- a/shared/src/css/combobox.css
+++ b/shared/src/css/combobox.css
@@ -4,25 +4,36 @@
 }
 
 [data-scope="combobox"][data-part="content"] {
+  background-color: white;
   list-style-type: none;
-  padding: 0;
   margin: 0;
   border: 1px solid lightgray;
+  overscroll-behavior: contain;
   max-height: 240px;
   overflow: auto;
+  padding: 2px;
+  height: var(--height);
+  transition: 100ms ease;
 }
 
 [data-scope="combobox"][data-part="item"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 4px 8px;
-}
+  user-select: none;
+  user-select: none;
+  content-visibility: auto;
 
-[data-scope="combobox"][data-part="item"][data-highlighted] {
-  background-color: blue;
-  color: white;
-}
+  &[data-highlighted] {
+    background-color: blue;
+    color: white;
+  }
 
-[data-scope="combobox"][data-part="item"][data-disabled] {
-  opacity: 0.5;
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
 [data-scope="combobox"][data-part="label"] {
@@ -30,6 +41,7 @@
   margin-top: 12px;
   margin-bottom: 4px;
 }
+
 [data-scope="combobox"][data-part="control"] {
   display: inline-flex;
   width: 300px;
@@ -38,3 +50,22 @@
 [data-scope="combobox"][data-part="input"] {
   flex: 1;
 }
+
+[data-scope="combobox"][data-part="clear-trigger"] {
+  display: inline-flex;
+  font-size: 1.2em;
+  & svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+
+[data-scope="combobox"][data-part="item-group-label"] {
+  user-select: none;
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
diff --git a/shared/src/css/popover.css b/shared/src/css/popover.css
index 8d9a6abb63..b783952457 100644
--- a/shared/src/css/popover.css
+++ b/shared/src/css/popover.css
@@ -17,10 +17,6 @@
   z-index: var(--layer-index);
 }
 
-[data-scope="popover"][data-part="content"][data-state="open"] {
-  animation: scale 0.1s ease-out;
-}
-
 [data-scope="popover"][data-part="title"] {
   font-size: 15px;
   line-height: 19px;
@@ -57,14 +53,3 @@
 [data-scope="popover"][data-part="indicator"][data-state="open"] {
   rotate: 90deg;
 }
-
-@keyframes scale {
-  from {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
diff --git a/shared/src/css/tabs.css b/shared/src/css/tabs.css
index 16c9ca7336..888c634a33 100644
--- a/shared/src/css/tabs.css
+++ b/shared/src/css/tabs.css
@@ -1,103 +1,38 @@
 [data-scope="tabs"][data-part="root"] {
-  max-width: 20em;
-}
+  max-width: 32rem;
+  border: 1px solid hsl(219, 1%, 72%);
+  padding: 0.5rem;
 
-[data-scope="tabs"][data-part="root"][data-orientation="vertical"] {
-  display: flex;
+  &[data-orientation="vertical"] {
+    display: flex;
+  }
 }
 
 [data-scope="tabs"][data-part="list"] {
-  margin: 0 0 -0.1em;
-  overflow: visible;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding-inline: 0.3rem;
 }
 
 [data-scope="tabs"][data-part="trigger"] {
+  display: inline-flex;
   position: relative;
   margin: 0;
-  padding: 0.3em 0.5em 0.4em;
-  border: 1px solid hsl(219, 1%, 72%);
-  border-radius: 0.2em 0.2em 0 0;
-  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
-  overflow: visible;
-  font-size: inherit;
-  background: hsl(220, 20%, 94%);
-}
-
-[data-scope="tabs"][data-part="trigger"]:hover,
-[data-scope="tabs"][data-part="trigger"]:focus,
-[data-scope="tabs"][data-part="trigger"]:active {
-  outline: 0;
-  border-radius: 0;
-  color: inherit;
-}
-
-[data-scope="tabs"][data-part="trigger"][data-state="active"] {
-  border-radius: 0;
-  background: hsl(220, 43%, 99%);
-  outline: 0;
-}
-
-[data-scope="tabs"][data-part="trigger"][data-state="active"]:not(:focus):not(:hover)::before {
-  border-top: 5px solid hsl(218, 96%, 48%);
-}
-
-[data-scope="tabs"][data-part="trigger"][data-state="active"]::after {
-  position: absolute;
-  z-index: 3;
-  bottom: -1px;
-  right: 0;
-  left: 0;
-  height: 0.3em;
-  background: hsl(220, 43%, 99%);
-  box-shadow: none;
-  content: "";
-}
+  padding: 0.3rem 0.5rem;
 
-[data-scope="tabs"][data-part="trigger"]:hover::before,
-[data-scope="tabs"][data-part="trigger"]:focus::before {
-  border-color: hsl(20, 96%, 48%);
-}
-
-[data-scope="tabs"][data-part="trigger"]:hover::before,
-[data-scope="tabs"][data-part="trigger"]:focus::before,
-[data-scope="tabs"][data-part="trigger"][data-state="active"]::before {
-  position: absolute;
-  bottom: 100%;
-  right: -1px;
-  left: -1px;
-  border-radius: 0.2em 0.2em 0 0;
-  border-top: 3px solid hsl(20, 96%, 48%);
-  content: "";
+  &[data-selected] {
+    border-radius: 0;
+    background: blue;
+    color: white;
+  }
 }
 
 [data-scope="tabs"][data-part="content"] {
   position: relative;
-  z-index: 2;
-  padding: 0.5em 0.5em 0.7em;
-  border: 1px solid hsl(219, 1%, 72%);
-  border-radius: 0 0.2em 0.2em 0.2em;
-  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
-  background: hsl(220, 43%, 99%);
-}
-[data-scope="tabs"][data-part="content"] p {
-  margin: 0;
-}
-[data-scope="tabs"][data-part="content"] * + p {
-  margin-top: 1em;
-}
-[data-scope="tabs"][data-part="content"]:focus {
-  border-color: hsl(20, 96%, 48%);
-  box-shadow: 0 0 0.2em hsl(20, 96%, 48%);
-  outline: 0;
-}
-[data-scope="tabs"][data-part="content"]:focus::after {
-  position: absolute;
-  bottom: 0;
-  right: -1px;
-  left: -1px;
-  border-bottom: 3px solid hsl(20, 96%, 48%);
-  border-radius: 0 0 0.2em 0.2em;
-  content: "";
+  padding: 0.25rem 0.5rem;
+  margin-top: 4px;
+  background: white;
 }
 
 [data-scope="tabs"][data-part="indicator"] {
diff --git a/shared/src/data.ts b/shared/src/data.ts
index c239d64e24..6719455f0d 100644
--- a/shared/src/data.ts
+++ b/shared/src/data.ts
@@ -36,7 +36,6 @@ export const comboboxData = [
   { label: "American Samoa", code: "AS" },
   { label: "Andorra", code: "AD" },
   { label: "Angola", code: "AO" },
-  // { label: "Angola", code: "AO" },
   { label: "Anguilla", code: "AI" },
   { label: "Antarctica", code: "AQ" },
   { label: "Australia", code: "AU" },
@@ -231,3 +230,5 @@ export const tourData = [
     description: "Thanks for trying out the tour. Enjoy the app!",
   },
 ]
+
+export * as commandData from "./command"
diff --git a/starters/react/package.json b/starters/react/package.json
index 0d58accdeb..dbd48a735f 100644
--- a/starters/react/package.json
+++ b/starters/react/package.json
@@ -46,7 +46,6 @@
     "@zag-js/interact-outside": "workspace:*",
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
-    "@zag-js/mutation-observer": "workspace:*",
     "@zag-js/number-input": "workspace:*",
     "@zag-js/number-utils": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
@@ -80,6 +79,7 @@
     "@zag-js/utils": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
+    "match-sorter": "6.3.4",
     "lucide-react": "0.371.0",
     "next": "14.2.2",
     "react": "18.2.0",
diff --git a/website/components/machines/combobox.tsx b/website/components/machines/combobox.tsx
index f52452fb33..5b394b852a 100644
--- a/website/components/machines/combobox.tsx
+++ b/website/components/machines/combobox.tsx
@@ -77,9 +77,9 @@ export function Combobox(props: ComboboxProps) {
       onOpenChange() {
         setOptions(comboboxData)
       },
-      onInputValueChange({ value }) {
+      onInputValueChange({ inputValue }) {
         const filtered = comboboxData.filter((item) =>
-          item.label.toLowerCase().includes(value.toLowerCase()),
+          item.label.toLowerCase().includes(inputValue.toLowerCase()),
         )
         setOptions(filtered.length > 0 ? filtered : comboboxData)
       },
diff --git a/website/components/search-dialog.tsx b/website/components/search-dialog.tsx
index 261f35f41c..974493b2a5 100644
--- a/website/components/search-dialog.tsx
+++ b/website/components/search-dialog.tsx
@@ -75,7 +75,6 @@ export function Search() {
                   />
                 </Flex>
                 <Box
-                  as="ul"
                   flex="1"
                   listStyleType="none"
                   maxHeight="340px"
@@ -86,13 +85,16 @@ export function Search() {
                   {results.map((item) => {
                     const isLvl1 = item.type === "lvl1"
                     return (
-                      <Link key={item.id} href={item.url}>
-                        <chakra.li
+                      <Link
+                        legacyBehavior
+                        passHref
+                        key={item.id}
+                        href={item.url}
+                      >
+                        <chakra.a
                           px="3"
                           py="1"
-                          _selected={{
-                            bg: "bg-primary-subtle",
-                          }}
+                          _selected={{ bg: "bg-primary-subtle" }}
                           display="flex"
                           alignItems="center"
                           minHeight="14"
@@ -120,7 +122,7 @@ export function Search() {
                           <Icon opacity={0.4}>
                             <GrReturn className="icon-gr-return" />
                           </Icon>
-                        </chakra.li>
+                        </chakra.a>
                       </Link>
                     )
                   })}
diff --git a/website/components/showcase.tsx b/website/components/showcase.tsx
index b096530630..e7a89cfa56 100644
--- a/website/components/showcase.tsx
+++ b/website/components/showcase.tsx
@@ -107,7 +107,7 @@ const components = {
       defaultProps={{
         disabled: false,
         readOnly: false,
-        loop: false,
+        loopFocus: false,
         inputBehavior: {
           default: "autohighlight",
           options: ["autohighlight", "autocomplete", "none"],
@@ -125,7 +125,7 @@ const components = {
       defaultProps={{
         preventScroll: true,
         closeOnInteractOutside: true,
-        closeOnEscapeKeyDown: true,
+        closeOnEscape: true,
         role: { options: ["dialog", "alertdialog"], default: "dialog" },
       }}
     />
@@ -282,8 +282,7 @@ const components = {
     <Playground
       component={Select}
       defaultProps={{
-        loop: false,
-        selectOnBlur: false,
+        loopFocus: false,
         disabled: false,
         readOnly: false,
       }}
@@ -324,7 +323,7 @@ const components = {
     <Playground
       component={Tabs}
       defaultProps={{
-        loop: false,
+        loopFocus: false,
         activationMode: {
           default: "automatic",
           options: ["manual", "automatic"],
diff --git a/website/data/components/select.mdx b/website/data/components/select.mdx
index 498d860d31..d51bca1018 100644
--- a/website/data/components/select.mdx
+++ b/website/data/components/select.mdx
@@ -160,22 +160,6 @@ To use select within a form, you'll need to:
 
 <CodeSnippet id="select/usage-with-form.mdx" />
 
-## Selecting option on blur
-
-Use the `selectOnBlur` property to allow selecting the highlighted option when
-immediately interacting or focusing outside the select (e.g. using the `Tab`
-key).
-
-```jsx {5}
-const [state, send] = useMachine(
-  select.machine({
-    id: useId(),
-    collection,
-    selectOnBlur: true,
-  }),
-)
-```
-
 ## Disabling the select
 
 To disable the select, set the `disabled` property in the machine's context to
diff --git a/website/lib/use-search.ts b/website/lib/use-search.ts
index a4945b478d..fabc99ec50 100644
--- a/website/lib/use-search.ts
+++ b/website/lib/use-search.ts
@@ -3,7 +3,6 @@ import * as combobox from "@zag-js/combobox"
 import * as dialog from "@zag-js/dialog"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { matchSorter } from "match-sorter"
-import { useRouter } from "next/router"
 import { useEffect, useId, useMemo, useState } from "react"
 import {
   searchData,
@@ -12,7 +11,7 @@ import {
 } from "./search-meta"
 import { useUpdateEffect } from "./use-update-effect"
 
-type UseSearchReturn = {
+interface UseSearchReturn {
   results: SearchMetaItem[]
   dialog_api: dialog.Api
   combobox_api: combobox.Api
@@ -29,8 +28,6 @@ export function useSearch(): UseSearchReturn {
 
   const [results, setResults] = useState<SearchMetaResult>(searchData)
 
-  const router = useRouter()
-
   const collection = useMemo(
     () =>
       combobox.collection({
@@ -52,20 +49,15 @@ export function useSearch(): UseSearchReturn {
       inputBehavior: "autohighlight",
       selectionBehavior: "clear",
       collection,
-      onValueChange({ items }) {
-        const [item] = items as SearchMetaItem[]
-        if (!item) return
-        try {
-          const { pathname, slug, url } = item
-          router.push({ pathname, query: { slug } }, url)
-        } catch (err) {
-          console.log(err)
-        }
+      openOnChange({ inputValue }) {
+        return inputValue.length > 2
+      },
+      onValueChange() {
         dialog_api.close()
       },
-      onInputValueChange({ value }) {
-        if (value.length < 3) return
-        const results = matchSorter(searchData, value, {
+      onInputValueChange({ inputValue }) {
+        if (inputValue.length < 3) return
+        const results = matchSorter(searchData, inputValue, {
           keys: [
             "hierarchy.lvl1",
             "hierarchy.lvl2",