diff --git a/examples/next-ts/pages/navigation-menu-nested.tsx b/examples/next-ts/pages/navigation-menu-nested.tsx
index 45f34bc48c..cd82d8e259 100644
--- a/examples/next-ts/pages/navigation-menu-nested.tsx
+++ b/examples/next-ts/pages/navigation-menu-nested.tsx
@@ -47,6 +47,7 @@ export default function Page() {
                   Products
                   <ChevronDown />
                 </button>
+                <span {...rootMenu.getTriggerProxyProps({ value: "products" })} />
               </div>
 
               <div {...rootMenu.getItemProps({ value: "company" })}>
@@ -54,6 +55,7 @@ export default function Page() {
                   Company
                   <ChevronDown />
                 </button>
+                <span {...rootMenu.getTriggerProxyProps({ value: "company" })} />
               </div>
 
               <div {...rootMenu.getItemProps({ value: "developers", disabled: true })}>
@@ -61,6 +63,7 @@ export default function Page() {
                   Developers
                   <ChevronDown />
                 </button>
+                <span {...rootMenu.getTriggerProxyProps({ value: "developers" })} />
               </div>
 
               <div {...rootMenu.getItemProps({ value: "pricing" })}>
@@ -77,14 +80,17 @@ export default function Page() {
                     <div {...productSubmenu.getListProps()}>
                       <div {...productSubmenu.getItemProps({ value: "extensibility" })}>
                         <button {...productSubmenu.getTriggerProps({ value: "extensibility" })}>Extensibility</button>
+                        <span {...productSubmenu.getTriggerProxyProps({ value: "extensibility" })} />
                       </div>
 
                       <div {...productSubmenu.getItemProps({ value: "security" })}>
                         <button {...productSubmenu.getTriggerProps({ value: "security" })}>Security</button>
+                        <span {...productSubmenu.getTriggerProxyProps({ value: "security" })} />
                       </div>
 
                       <div {...productSubmenu.getItemProps({ value: "authentication" })}>
                         <button {...productSubmenu.getTriggerProps({ value: "authentication" })}>Authentication</button>
+                        <span {...productSubmenu.getTriggerProxyProps({ value: "authentication" })} />
                       </div>
                       <div {...productSubmenu.getIndicatorProps()} />
                     </div>
@@ -99,15 +105,15 @@ export default function Page() {
                     >
                       {renderLinks(productSubmenu, {
                         value: "extensibility",
-                        items: ["Donec quis dui", "Vestibulum", "Nunc dignissim"],
+                        items: ["API Extensions", "Plugin System", "Custom Hooks", "Integration Tools"],
                       })}
                       {renderLinks(productSubmenu, {
                         value: "extensibility",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Webhooks", "Event Handlers", "Middleware", "SDKs"],
                       })}
                       {renderLinks(productSubmenu, {
                         value: "extensibility",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Connectors", "Adapters", "Bridges", "Extensions"],
                       })}
                     </Presence>
 
@@ -119,15 +125,15 @@ export default function Page() {
                     >
                       {renderLinks(productSubmenu, {
                         value: "security",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque", "Vestibulum"],
+                        items: ["Authentication", "Authorization", "Encryption", "SSL/TLS"],
                       })}
                       {renderLinks(productSubmenu, {
                         value: "security",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Firewall", "DDoS Protection", "Security Audit"],
                       })}
                       {renderLinks(productSubmenu, {
                         value: "security",
-                        items: ["Fusce pellentesque", "Aliquam porttitor"],
+                        items: ["Access Control", "Identity Management"],
                       })}
                     </Presence>
 
@@ -139,15 +145,15 @@ export default function Page() {
                     >
                       {renderLinks(productSubmenu, {
                         value: "authentication",
-                        items: ["Donec quis dui", "Vestibulum", "Nunc dignissim"],
+                        items: ["OAuth", "SAML", "JWT", "Multi-factor Auth"],
                       })}
                       {renderLinks(productSubmenu, {
                         value: "authentication",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Social Login", "Passwordless", "Biometrics"],
                       })}
                       {renderLinks(productSubmenu, {
                         value: "authentication",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["SSO", "User Management", "Role-based Access"],
                       })}
                     </Presence>
                   </Presence>
@@ -160,14 +166,17 @@ export default function Page() {
                     <div {...companySubmenu.getListProps()}>
                       <div {...companySubmenu.getItemProps({ value: "customers" })}>
                         <button {...companySubmenu.getTriggerProps({ value: "customers" })}>Customers</button>
+                        <span {...companySubmenu.getTriggerProxyProps({ value: "customers" })} />
                       </div>
 
                       <div {...companySubmenu.getItemProps({ value: "partners" })}>
                         <button {...companySubmenu.getTriggerProps({ value: "partners" })}>Partners</button>
+                        <span {...companySubmenu.getTriggerProxyProps({ value: "partners" })} />
                       </div>
 
                       <div {...companySubmenu.getItemProps({ value: "enterprise" })}>
                         <button {...companySubmenu.getTriggerProps({ value: "enterprise" })}>Enterprise</button>
+                        <span {...companySubmenu.getTriggerProxyProps({ value: "enterprise" })} />
                       </div>
                     </div>
                     <div {...companySubmenu.getIndicatorProps()} />
@@ -182,11 +191,11 @@ export default function Page() {
                     >
                       {renderLinks(companySubmenu, {
                         value: "customers",
-                        items: ["Donec quis dui", "Vestibulum", "Nunc dignissim"],
+                        items: ["Customer Stories", "Case Studies", "Testimonials", "Success Metrics"],
                       })}
                       {renderLinks(companySubmenu, {
                         value: "customers",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Customer Support", "Help Center", "Documentation"],
                       })}
                     </Presence>
 
@@ -198,11 +207,11 @@ export default function Page() {
                     >
                       {renderLinks(companySubmenu, {
                         value: "partners",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque", "Vestibulum"],
+                        items: ["Partner Program", "Channel Partners", "Technology Partners", "Resellers"],
                       })}
                       {renderLinks(companySubmenu, {
                         value: "partners",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Integration Partners", "Consulting Partners", "System Integrators"],
                       })}
                     </Presence>
 
@@ -214,11 +223,16 @@ export default function Page() {
                     >
                       {renderLinks(companySubmenu, {
                         value: "enterprise",
-                        items: ["Donec quis dui", "Vestibulum", "Nunc dignissim"],
+                        items: [
+                          "Enterprise Solutions",
+                          "Large Scale Deployments",
+                          "Custom Development",
+                          "Dedicated Teams",
+                        ],
                       })}
                       {renderLinks(companySubmenu, {
                         value: "enterprise",
-                        items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                        items: ["Enterprise Support", "SLA Agreements", "Compliance"],
                       })}
                     </Presence>
                   </Presence>
@@ -228,11 +242,11 @@ export default function Page() {
               <Presence {...rootMenu.getContentProps({ value: "developers" })}>
                 {renderLinks(rootMenu, {
                   value: "developers",
-                  items: ["Donec quis dui", "Vestibulum", "Fusce pellentesque", "Aliquam porttitor"],
+                  items: ["Documentation", "API Reference", "SDKs", "Code Samples"],
                 })}
                 {renderLinks(rootMenu, {
                   value: "developers",
-                  items: ["Fusce pellentesque", "Aliquam porttitor"],
+                  items: ["GitHub", "Changelog", "Release Notes"],
                 })}
               </Presence>
             </Presence>
@@ -241,9 +255,9 @@ export default function Page() {
       </main>
 
       <Toolbar viz>
-        <StateVisualizer state={rootService} label="root" />
-        <StateVisualizer state={productService} label="product" />
-        <StateVisualizer state={companyService} label="company" />
+        <StateVisualizer state={rootService} label="root" context={["value", "previousValue"]} />
+        <StateVisualizer state={productService} label="product" context={["value", "previousValue", "isSubmenu"]} />
+        <StateVisualizer state={companyService} label="company" context={["value", "previousValue", "isSubmenu"]} />
       </Toolbar>
     </>
   )
diff --git a/examples/next-ts/pages/navigation-menu-viewport.tsx b/examples/next-ts/pages/navigation-menu-viewport.tsx
index 237345e85f..082bb373c8 100644
--- a/examples/next-ts/pages/navigation-menu-viewport.tsx
+++ b/examples/next-ts/pages/navigation-menu-viewport.tsx
@@ -30,7 +30,20 @@ export default function Page() {
   return (
     <>
       <main className="navigation-menu viewport">
-        <Navbar>
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            boxSizing: "border-box",
+            alignItems: "center",
+            padding: "15px 20px",
+            justifyContent: "space-between",
+            width: "100%",
+            backgroundColor: "white",
+            boxShadow: "0 50px 100px -20px rgba(50,50,93,0.1),0 30px 60px -30px rgba(0,0,0,0.2)",
+          }}
+        >
+          <button>Logo</button>
           <div {...api.getRootProps()}>
             <div {...api.getIndicatorTrackProps()}>
               <div {...api.getListProps()}>
@@ -39,6 +52,8 @@ export default function Page() {
                     Products
                     <ChevronDown />
                   </button>
+                  <span {...api.getTriggerProxyProps({ value: "products" })} />
+                  <span {...api.getViewportProxyProps({ value: "products" })} />
                 </div>
 
                 <div {...api.getItemProps({ value: "company" })}>
@@ -46,6 +61,8 @@ export default function Page() {
                     Company
                     <ChevronDown />
                   </button>
+                  <span {...api.getTriggerProxyProps({ value: "company" })} />
+                  <span {...api.getViewportProxyProps({ value: "company" })} />
                 </div>
 
                 <div {...api.getItemProps({ value: "developers" })}>
@@ -53,6 +70,8 @@ export default function Page() {
                     Developers
                     <ChevronDown />
                   </button>
+                  <span {...api.getTriggerProxyProps({ value: "developers" })} />
+                  <span {...api.getViewportProxyProps({ value: "developers" })} />
                 </div>
 
                 <div {...api.getItemProps({ value: "pricing" })}>
@@ -138,7 +157,17 @@ export default function Page() {
               </Presence>
             </div>
           </div>
-        </Navbar>
+          <button>Login</button>
+        </div>
+
+        <header>
+          <h1>Heading</h1>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+          <div>
+            <button>Get Started</button>
+            <a href="#">Learn More</a>
+          </div>
+        </header>
       </main>
 
       <Toolbar controls={controls.ui} viz>
@@ -147,25 +176,3 @@ export default function Page() {
     </>
   )
 }
-
-const Navbar = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div
-      style={{
-        position: "relative",
-        display: "flex",
-        boxSizing: "border-box",
-        alignItems: "center",
-        padding: "15px 20px",
-        justifyContent: "space-between",
-        width: "100%",
-        backgroundColor: "white",
-        boxShadow: "0 50px 100px -20px rgba(50,50,93,0.1),0 30px 60px -30px rgba(0,0,0,0.2)",
-      }}
-    >
-      <button>Logo</button>
-      {children}
-      <button>Login</button>
-    </div>
-  )
-}
diff --git a/examples/nuxt-ts/app/components/Presence.vue b/examples/nuxt-ts/app/components/Presence.vue
new file mode 100644
index 0000000000..95914ceb6c
--- /dev/null
+++ b/examples/nuxt-ts/app/components/Presence.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import * as presence from "@zag-js/presence"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import type { VNodeRef } from "vue"
+import { computed, mergeProps, ref, watch } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+const present = computed(() => !attrs.hidden)
+const service = useMachine(
+  presence.machine,
+  computed(() => ({ present: present.value })),
+)
+const api = computed(() => presence.connect(service, normalizeProps))
+
+const nodeRef = ref<VNodeRef | null>(null)
+watch(nodeRef, () => {
+  if (nodeRef.value) {
+    api.value.setNode(nodeRef.value)
+  }
+})
+
+const mergedProps = computed(() =>
+  mergeProps({ "data-scope": "presence" }, attrs, {
+    hidden: !api.value.present,
+    "data-state": api.value.skip ? undefined : present.value ? "open" : "closed",
+    ref: nodeRef,
+  }),
+)
+</script>
+
+<template>
+  <div v-bind="mergedProps">
+    <slot />
+  </div>
+</template>
diff --git a/examples/nuxt-ts/app/pages/navigation-menu-viewport.vue b/examples/nuxt-ts/app/pages/navigation-menu-viewport.vue
new file mode 100644
index 0000000000..19b44c5215
--- /dev/null
+++ b/examples/nuxt-ts/app/pages/navigation-menu-viewport.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import * as navigationMenu from "@zag-js/navigation-menu"
+import { navigationMenuControls } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { ChevronDown } from "lucide-vue-next"
+import { Teleport } from "vue"
+
+const controls = useControls(navigationMenuControls)
+
+const service = useMachine(navigationMenu.machine, {
+  id: useId(),
+})
+
+const api = computed(() => navigationMenu.connect(service, normalizeProps))
+</script>
+
+<template>
+  <main class="navigation-menu viewport">
+    <div
+      :style="{
+        position: 'relative',
+        display: 'flex',
+        boxSizing: 'border-box',
+        alignItems: 'center',
+        padding: '15px 20px',
+        justifyContent: 'space-between',
+        width: '100%',
+        backgroundColor: 'white',
+        boxShadow: '0 50px 100px -20px rgba(50,50,93,0.1),0 30px 60px -30px rgba(0,0,0,0.2)',
+      }"
+    >
+      <button>Logo</button>
+      <div v-bind="api.getRootProps()">
+        <div v-bind="api.getIndicatorTrackProps()">
+          <div v-bind="api.getListProps()">
+            <div v-bind="api.getItemProps({ value: 'products' })">
+              <button v-bind="api.getTriggerProps({ value: 'products' })">
+                Products
+                <ChevronDown />
+              </button>
+              <span v-bind="api.getTriggerProxyProps({ value: 'products' })" />
+              <span v-bind="api.getViewportProxyProps({ value: 'products' })" />
+              <Teleport :to="api.getViewportNode()">
+                <Presence
+                  v-bind="api.getContentProps({ value: 'products' })"
+                  :style="{
+                    gridTemplateColumns: '1fr 2fr',
+                    width: '600px',
+                  }"
+                >
+                  <a
+                    v-for="(item, index) in [
+                      'Analytics Platform',
+                      'Customer Engagement',
+                      'Marketing Automation',
+                      'Data Integration',
+                      'Enterprise Solutions',
+                      'API Documentation',
+                    ]"
+                    :key="`products-${item}-${index}`"
+                    href="#"
+                    v-bind="api.getLinkProps({ value: 'products' })"
+                  >
+                    {{ item }}
+                  </a>
+
+                  <a
+                    v-for="(item, index) in [
+                      'Case Studies',
+                      'Success Stories',
+                      'Integration Partners',
+                      'Security & Compliance',
+                    ]"
+                    :key="`products-2-${item}-${index}`"
+                    href="#"
+                    v-bind="api.getLinkProps({ value: 'products' })"
+                  >
+                    {{ item }}
+                  </a>
+                </Presence>
+              </Teleport>
+            </div>
+
+            <div v-bind="api.getItemProps({ value: 'company' })">
+              <button v-bind="api.getTriggerProps({ value: 'company' })">
+                Company
+                <ChevronDown />
+              </button>
+              <span v-bind="api.getTriggerProxyProps({ value: 'company' })" />
+              <span v-bind="api.getViewportProxyProps({ value: 'company' })" />
+              <Teleport :to="api.getViewportNode()">
+                <Presence
+                  v-bind="api.getContentProps({ value: 'company' })"
+                  :style="{
+                    gridTemplateColumns: '1fr 1fr',
+                    width: '450px',
+                  }"
+                >
+                  <a
+                    v-for="(item, index) in ['About Us', 'Leadership Team', 'Careers', 'Press Releases']"
+                    :key="`company-${item}-${index}`"
+                    href="#"
+                    v-bind="api.getLinkProps({ value: 'company' })"
+                  >
+                    {{ item }}
+                  </a>
+
+                  <a
+                    v-for="(item, index) in ['Investors', 'Partners', 'Corporate Responsibility']"
+                    :key="`company-2-${item}-${index}`"
+                    href="#"
+                    v-bind="api.getLinkProps({ value: 'company' })"
+                  >
+                    {{ item }}
+                  </a>
+                </Presence>
+              </Teleport>
+            </div>
+
+            <div v-bind="api.getItemProps({ value: 'developers' })">
+              <button v-bind="api.getTriggerProps({ value: 'developers' })">
+                Developers
+                <ChevronDown />
+              </button>
+              <span v-bind="api.getTriggerProxyProps({ value: 'developers' })" />
+              <span v-bind="api.getViewportProxyProps({ value: 'developers' })" />
+              <Teleport :to="api.getViewportNode()">
+                <Presence
+                  v-bind="api.getContentProps({ value: 'developers' })"
+                  :style="{
+                    gridTemplateColumns: '1.6fr 1fr',
+                    width: '650px',
+                  }"
+                >
+                  <a
+                    v-for="(item, index) in [
+                      'API Documentation',
+                      'SDKs & Libraries',
+                      'Developer Guides',
+                      'Code Samples',
+                      'Webhooks',
+                      'GraphQL Explorer',
+                    ]"
+                    :key="`developers-${item}-${index}`"
+                    href="#"
+                    v-bind="api.getLinkProps({ value: 'developers' })"
+                  >
+                    {{ item }}
+                  </a>
+
+                  <a
+                    v-for="(item, index) in ['Developer Community', 'Changelog', 'Status Page', 'Rate Limits']"
+                    :key="`developers-2-${item}-${index}`"
+                    href="#"
+                    v-bind="api.getLinkProps({ value: 'developers' })"
+                  >
+                    {{ item }}
+                  </a>
+                </Presence>
+              </Teleport>
+            </div>
+
+            <div v-bind="api.getItemProps({ value: 'pricing' })">
+              <a href="#" v-bind="api.getLinkProps({ value: 'pricing' })"> Pricing </a>
+            </div>
+
+            <Presence v-bind="api.getIndicatorProps()">
+              <div v-bind="api.getArrowProps()" />
+            </Presence>
+          </div>
+        </div>
+
+        <div v-bind="api.getViewportPositionerProps()">
+          <Presence v-bind="api.getViewportProps()"> </Presence>
+        </div>
+      </div>
+      <button>Login</button>
+    </div>
+
+    <header>
+      <h1>Heading</h1>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+      <div>
+        <button>Get Started</button>
+        <a href="#">Learn More</a>
+      </div>
+    </header>
+  </main>
+
+  <Toolbar :viz="true">
+    <StateVisualizer :state="service" :context="['value', 'previousValue', 'triggerRect', 'viewportSize']" />
+    <template #controls>
+      <Controls :control="controls" />
+    </template>
+  </Toolbar>
+</template>
diff --git a/examples/nuxt-ts/app/pages/navigation-menu.vue b/examples/nuxt-ts/app/pages/navigation-menu.vue
new file mode 100644
index 0000000000..fa40d3845e
--- /dev/null
+++ b/examples/nuxt-ts/app/pages/navigation-menu.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import * as navigationMenu from "@zag-js/navigation-menu"
+import { navigationMenuControls } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { ChevronDown } from "lucide-vue-next"
+
+const controls = useControls(navigationMenuControls)
+
+const service = useMachine(
+  navigationMenu.machine,
+  controls.mergeProps<navigationMenu.Props>({
+    id: useId(),
+  }),
+)
+
+const api = computed(() => navigationMenu.connect(service, normalizeProps))
+
+</script>
+
+<template>
+  <main class="navigation-menu basic">
+    <div v-bind="api.getRootProps()">
+      <div v-bind="api.getListProps()">
+        <div v-bind="api.getItemProps({ value: 'products' })">
+          <button v-bind="api.getTriggerProps({ value: 'products' })">
+            Products
+            <ChevronDown />
+          </button>
+          <Presence v-bind="api.getContentProps({ value: 'products' })">
+            <Presence v-bind="api.getIndicatorProps()">
+              <div v-bind="api.getArrowProps()" />
+            </Presence>
+            <a
+              v-for="(item, index) in [
+                'Analytics Platform',
+                'Customer Engagement',
+                'Marketing Automation',
+                'Data Integration',
+                'Enterprise Solutions',
+                'API Documentation',
+              ]"
+              :key="`products-${item}-${index}`"
+              href="#"
+              v-bind="api.getLinkProps({ value: 'products' })"
+            >
+              {{ item }}
+            </a>
+          </Presence>
+        </div>
+
+        <div v-bind="api.getItemProps({ value: 'company' })">
+          <button v-bind="api.getTriggerProps({ value: 'company' })">
+            Company
+            <ChevronDown />
+          </button>
+          <Presence v-bind="api.getContentProps({ value: 'company' })">
+            <Presence v-bind="api.getIndicatorProps()">
+              <div v-bind="api.getArrowProps()" />
+            </Presence>
+            <a
+              v-for="(item, index) in [
+                'About Us',
+                'Leadership Team',
+                'Careers',
+                'Press Releases',
+              ]"
+              :key="`company-${item}-${index}`"
+              href="#"
+              v-bind="api.getLinkProps({ value: 'company' })"
+            >
+              {{ item }}
+            </a>
+          </Presence>
+        </div>
+
+        <div v-bind="api.getItemProps({ value: 'developers' })">
+          <button v-bind="api.getTriggerProps({ value: 'developers' })">
+            Developers
+            <ChevronDown />
+          </button>
+          <Presence v-bind="api.getContentProps({ value: 'developers' })">
+            <Presence v-bind="api.getIndicatorProps()">
+              <div v-bind="api.getArrowProps()" />
+            </Presence>
+            <a
+              v-for="(item, index) in [
+                'Investors',
+                'Partners',
+                'Corporate Responsibility',
+              ]"
+              :key="`developers-${item}-${index}`"
+              href="#"
+              v-bind="api.getLinkProps({ value: 'developers' })"
+            >
+              {{ item }}
+            </a>
+          </Presence>
+        </div>
+
+        <div v-bind="api.getItemProps({ value: 'pricing' })">
+          <a href="#" v-bind="api.getLinkProps({ value: 'pricing' })">
+            Pricing
+          </a>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="service" :context="['value', 'previousValue']" />
+    <template #controls>
+      <Controls :control="controls" />
+    </template>
+  </Toolbar>
+</template>
\ No newline at end of file
diff --git a/examples/nuxt-ts/app/pages/popover.vue b/examples/nuxt-ts/app/pages/popover.vue
index 235a90fe94..fdacdff4f1 100644
--- a/examples/nuxt-ts/app/pages/popover.vue
+++ b/examples/nuxt-ts/app/pages/popover.vue
@@ -25,7 +25,7 @@ const api = computed(() => popover.connect(service, normalizeProps))
       </button>
       <Teleport to="#teleports" :disabled="!api.portalled">
         <div v-bind="api.getPositionerProps()">
-          <div data-testid="popover-content" class="popover-content" v-bind="api.getContentProps()">
+          <Presence data-testid="popover-content" class="popover-content" v-bind="api.getContentProps()">
             <div v-bind="api.getArrowProps()">
               <div v-bind="api.getArrowTipProps()" />
             </div>
@@ -36,7 +36,7 @@ const api = computed(() => popover.connect(service, normalizeProps))
               <input data-testid="input" placeholder="input" />
               <button data-testid="popover-close-button" v-bind="api.getCloseTriggerProps()">X</button>
             </div>
-          </div>
+          </Presence>
         </div>
       </Teleport>
       <span data-testid="plain-text">I am just text</span>
diff --git a/examples/preact-ts/src/components/presence.tsx b/examples/preact-ts/src/components/presence.tsx
new file mode 100644
index 0000000000..1283def478
--- /dev/null
+++ b/examples/preact-ts/src/components/presence.tsx
@@ -0,0 +1,41 @@
+import * as presence from "@zag-js/presence"
+import { normalizeProps, useMachine } from "@zag-js/preact"
+import { forwardRef, Ref } from "preact/compat"
+import { useEffect, useRef } from "preact/hooks"
+import { JSX } from "preact"
+
+interface PresenceProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+export const Presence = forwardRef<HTMLDivElement, PresenceProps>(function Presence(props, ref) {
+  const { hidden, ...rest } = props
+
+  const present = !hidden
+  const service = useMachine(presence.machine, { present })
+  const api = presence.connect(service, normalizeProps)
+
+  const internalRef = useRef<HTMLDivElement>(null)
+  const mergedRef: Ref<HTMLDivElement> = (node) => {
+    internalRef.current = node
+    if (typeof ref === "function") {
+      ref(node)
+    } else if (ref) {
+      ref.current = node
+    }
+  }
+
+  useEffect(() => {
+    if (internalRef.current) {
+      api.setNode(internalRef.current)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={mergedRef}
+      data-scope="presence"
+      data-state={api.skip ? undefined : present ? "open" : "closed"}
+      hidden={!api.present}
+      {...rest}
+    />
+  )
+})
diff --git a/examples/solid-ts/src/components/presence.tsx b/examples/solid-ts/src/components/presence.tsx
new file mode 100644
index 0000000000..65cab5347d
--- /dev/null
+++ b/examples/solid-ts/src/components/presence.tsx
@@ -0,0 +1,47 @@
+import * as presence from "@zag-js/presence"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { JSX, createMemo, mergeProps, onMount, splitProps } from "solid-js"
+
+interface PresenceProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+export function Presence(props: PresenceProps) {
+  const [localProps, restProps] = splitProps(props, ["hidden", "ref"])
+  const present = createMemo(() => !localProps.hidden)
+
+  const service = useMachine(
+    presence.machine,
+    createMemo(() => ({ present: present() })),
+  )
+  const api = createMemo(() => presence.connect(service, normalizeProps))
+
+  let ref: HTMLDivElement | undefined
+
+  onMount(() => {
+    if (ref) {
+      api().setNode(ref)
+    }
+  })
+
+  const mergedRef = (el: HTMLDivElement) => {
+    ref = el
+    if (typeof localProps.ref === "function") {
+      localProps.ref(el)
+    } else if (localProps.ref) {
+      localProps.ref = el
+    }
+  }
+
+  const mergedProps = createMemo(() =>
+    mergeProps(
+      {
+        ref: mergedRef,
+        "data-scope": "presence",
+        "data-state": api().skip ? undefined : present() ? "open" : "closed",
+        hidden: !api().present,
+      },
+      restProps,
+    ),
+  )
+
+  return <div {...mergedProps()} />
+}
diff --git a/examples/solid-ts/src/routes/navigation-menu-viewport.tsx b/examples/solid-ts/src/routes/navigation-menu-viewport.tsx
new file mode 100644
index 0000000000..e1685f3132
--- /dev/null
+++ b/examples/solid-ts/src/routes/navigation-menu-viewport.tsx
@@ -0,0 +1,184 @@
+import * as navigationMenu from "@zag-js/navigation-menu"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { navigationMenuControls } from "@zag-js/shared"
+import { ChevronDown } from "lucide-solid"
+import { createMemo, createUniqueId, For } from "solid-js"
+import { Presence } from "~/components/presence"
+import { StateVisualizer } from "~/components/state-visualizer"
+import { Toolbar } from "~/components/toolbar"
+import { useControls } from "~/hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(navigationMenuControls)
+
+  const service = useMachine(
+    navigationMenu.machine,
+    controls.mergeProps<navigationMenu.Props>({
+      id: createUniqueId(),
+    }),
+  )
+
+  const api = createMemo(() => navigationMenu.connect(service, normalizeProps))
+
+  const renderLinks = (opts: { value: string; items: string[] }) => {
+    const { value, items } = opts
+    return (
+      <For each={items}>
+        {(item) => (
+          <a href="#" {...api().getLinkProps({ value })}>
+            {item}
+          </a>
+        )}
+      </For>
+    )
+  }
+
+  return (
+    <>
+      <main class="navigation-menu viewport">
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            "box-sizing": "border-box",
+            "align-items": "center",
+            padding: "15px 20px",
+            "justify-content": "space-between",
+            width: "100%",
+            "background-color": "white",
+            "box-shadow": "0 50px 100px -20px rgba(50,50,93,0.1),0 30px 60px -30px rgba(0,0,0,0.2)",
+          }}
+        >
+          <button>Logo</button>
+          <div {...api().getRootProps()}>
+            <div {...api().getIndicatorTrackProps()}>
+              <div {...api().getListProps()}>
+                <div {...api().getItemProps({ value: "products" })}>
+                  <button {...api().getTriggerProps({ value: "products" })}>
+                    Products
+                    <ChevronDown />
+                  </button>
+                  <span {...api().getTriggerProxyProps({ value: "products" })} />
+                  <span {...api().getViewportProxyProps({ value: "products" })} />
+                </div>
+
+                <div {...api().getItemProps({ value: "company" })}>
+                  <button {...api().getTriggerProps({ value: "company" })}>
+                    Company
+                    <ChevronDown />
+                  </button>
+                  <span {...api().getTriggerProxyProps({ value: "company" })} />
+                  <span {...api().getViewportProxyProps({ value: "company" })} />
+                </div>
+
+                <div {...api().getItemProps({ value: "developers" })}>
+                  <button {...api().getTriggerProps({ value: "developers" })}>
+                    Developers
+                    <ChevronDown />
+                  </button>
+                  <span {...api().getTriggerProxyProps({ value: "developers" })} />
+                  <span {...api().getViewportProxyProps({ value: "developers" })} />
+                </div>
+
+                <div {...api().getItemProps({ value: "pricing" })}>
+                  <a href="#" {...api().getLinkProps({ value: "pricing" })}>
+                    Pricing
+                  </a>
+                </div>
+
+                <Presence {...api().getIndicatorProps()}>
+                  <div {...api().getArrowProps()} />
+                </Presence>
+              </div>
+            </div>
+
+            <div {...api().getViewportPositionerProps()}>
+              <Presence {...api().getViewportProps()}>
+                <Presence
+                  {...api().getContentProps({ value: "products" })}
+                  style={{
+                    "grid-template-columns": "1fr 2fr",
+                    width: "600px",
+                  }}
+                >
+                  {renderLinks({
+                    value: "products",
+                    items: [
+                      "Analytics Platform",
+                      "Customer Engagement",
+                      "Marketing Automation",
+                      "Data Integration",
+                      "Enterprise Solutions",
+                      "API Documentation",
+                    ],
+                  })}
+
+                  {renderLinks({
+                    value: "products",
+                    items: ["Case Studies", "Success Stories", "Integration Partners", "Security & Compliance"],
+                  })}
+                </Presence>
+
+                <Presence
+                  {...api().getContentProps({ value: "company" })}
+                  style={{
+                    "grid-template-columns": "1fr 1fr",
+                    width: "450px",
+                  }}
+                >
+                  {renderLinks({
+                    value: "company",
+                    items: ["About Us", "Leadership Team", "Careers", "Press Releases"],
+                  })}
+
+                  {renderLinks({
+                    value: "company",
+                    items: ["Investors", "Partners", "Corporate Responsibility"],
+                  })}
+                </Presence>
+
+                <Presence
+                  {...api().getContentProps({ value: "developers" })}
+                  style={{
+                    "grid-template-columns": "1.6fr 1fr",
+                    width: "650px",
+                  }}
+                >
+                  {renderLinks({
+                    value: "developers",
+                    items: [
+                      "API Documentation",
+                      "SDKs & Libraries",
+                      "Developer Guides",
+                      "Code Samples",
+                      "Webhooks",
+                      "GraphQL Explorer",
+                    ],
+                  })}
+                  {renderLinks({
+                    value: "developers",
+                    items: ["Developer Community", "Changelog", "Status Page", "Rate Limits"],
+                  })}
+                </Presence>
+              </Presence>
+            </div>
+          </div>
+          <button>Login</button>
+        </div>
+
+        <header>
+          <h1>Heading</h1>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+          <div>
+            <button>Get Started</button>
+            <a href="#">Learn More</a>
+          </div>
+        </header>
+      </main>
+
+      <Toolbar controls={controls} viz>
+        <StateVisualizer state={service} context={["value", "previousValue"]} />
+      </Toolbar>
+    </>
+  )
+}
diff --git a/examples/solid-ts/src/routes/navigation-menu.tsx b/examples/solid-ts/src/routes/navigation-menu.tsx
new file mode 100644
index 0000000000..e81b06eda4
--- /dev/null
+++ b/examples/solid-ts/src/routes/navigation-menu.tsx
@@ -0,0 +1,110 @@
+import * as navigationMenu from "@zag-js/navigation-menu"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { navigationMenuControls } from "@zag-js/shared"
+import { ChevronDown } from "lucide-solid"
+import { createMemo, createUniqueId, For } from "solid-js"
+import { Presence } from "~/components/presence"
+import { StateVisualizer } from "~/components/state-visualizer"
+import { Toolbar } from "~/components/toolbar"
+import { useControls } from "~/hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(navigationMenuControls)
+
+  const service = useMachine(
+    navigationMenu.machine,
+    controls.mergeProps<navigationMenu.Props>({
+      id: createUniqueId(),
+    }),
+  )
+
+  const api = createMemo(() => navigationMenu.connect(service, normalizeProps))
+
+  const renderLinks = (opts: { value: string; items: string[] }) => {
+    const { value, items } = opts
+    return (
+      <For each={items}>
+        {(item) => (
+          <a href="#" {...api().getLinkProps({ value })}>
+            {item}
+          </a>
+        )}
+      </For>
+    )
+  }
+
+  return (
+    <>
+      <main class="navigation-menu basic">
+        <div {...api().getRootProps()}>
+          <div {...api().getListProps()}>
+            <div {...api().getItemProps({ value: "products" })}>
+              <button {...api().getTriggerProps({ value: "products" })}>
+                Products
+                <ChevronDown />
+              </button>
+              <Presence {...api().getContentProps({ value: "products" })}>
+                <Presence {...api().getIndicatorProps()}>
+                  <div {...api().getArrowProps()} />
+                </Presence>
+                {renderLinks({
+                  value: "products",
+                  items: [
+                    "Analytics Platform",
+                    "Customer Engagement",
+                    "Marketing Automation",
+                    "Data Integration",
+                    "Enterprise Solutions",
+                    "API Documentation",
+                  ],
+                })}
+              </Presence>
+            </div>
+
+            <div {...api().getItemProps({ value: "company" })}>
+              <button {...api().getTriggerProps({ value: "company" })}>
+                Company
+                <ChevronDown />
+              </button>
+              <Presence {...api().getContentProps({ value: "company" })}>
+                <Presence {...api().getIndicatorProps()}>
+                  <div {...api().getArrowProps()} />
+                </Presence>
+                {renderLinks({
+                  value: "company",
+                  items: ["About Us", "Leadership Team", "Careers", "Press Releases"],
+                })}
+              </Presence>
+            </div>
+
+            <div {...api().getItemProps({ value: "developers" })}>
+              <button {...api().getTriggerProps({ value: "developers" })}>
+                Developers
+                <ChevronDown />
+              </button>
+              <Presence {...api().getContentProps({ value: "developers" })}>
+                <Presence {...api().getIndicatorProps()}>
+                  <div {...api().getArrowProps()} />
+                </Presence>
+                {renderLinks({
+                  value: "developers",
+                  items: ["Investors", "Partners", "Corporate Responsibility"],
+                })}
+              </Presence>
+            </div>
+
+            <div {...api().getItemProps({ value: "pricing" })}>
+              <a href="#" {...api().getLinkProps({ value: "pricing" })}>
+                Pricing
+              </a>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Toolbar controls={controls} viz>
+        <StateVisualizer state={service} />
+      </Toolbar>
+    </>
+  )
+}
diff --git a/examples/solid-ts/src/routes/popover.tsx b/examples/solid-ts/src/routes/popover.tsx
index 176b0177ef..13ed6599c7 100644
--- a/examples/solid-ts/src/routes/popover.tsx
+++ b/examples/solid-ts/src/routes/popover.tsx
@@ -3,6 +3,7 @@ import { popoverControls } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { ParentProps, createMemo, createUniqueId } from "solid-js"
 import { Portal } from "solid-js/web"
+import { Presence } from "~/components/presence"
 import { StateVisualizer } from "~/components/state-visualizer"
 import { Toolbar } from "~/components/toolbar"
 import { useControls } from "~/hooks/use-controls"
@@ -29,7 +30,7 @@ export default function Page() {
           </button>
           <Wrapper guard={api().portalled}>
             <div {...api().getPositionerProps()}>
-              <div data-testid="popover-content" class="popover-content" {...api().getContentProps()}>
+              <Presence data-testid="popover-content" class="popover-content" {...api().getContentProps()}>
                 <div {...api().getArrowProps()}>
                   <div {...api().getArrowTipProps()} />
                 </div>
@@ -46,7 +47,7 @@ export default function Page() {
                     X
                   </button>
                 </div>
-              </div>
+              </Presence>
             </div>
           </Wrapper>
           <span data-testid="plain-text">I am just text</span>
diff --git a/examples/svelte-ts/src/App.svelte b/examples/svelte-ts/src/App.svelte
index 6372acd3e8..9b860abcfe 100644
--- a/examples/svelte-ts/src/App.svelte
+++ b/examples/svelte-ts/src/App.svelte
@@ -30,6 +30,8 @@
     { path: "/menu-nested", component: () => import("./routes/menu-nested.svelte") },
     { path: "/menu", component: () => import("./routes/menu.svelte") },
     { path: "/menu-options", component: () => import("./routes/menu-options.svelte") },
+    { path: "/navigation-menu", component: () => import("./routes/navigation-menu.svelte") },
+    { path: "/navigation-menu-viewport", component: () => import("./routes/navigation-menu-viewport.svelte") },
     { path: "/number-input", component: () => import("./routes/number-input.svelte") },
     { path: "/pagination", component: () => import("./routes/pagination.svelte") },
     { path: "/pin-input", component: () => import("./routes/pin-input.svelte") },
diff --git a/examples/svelte-ts/src/lib/components/presence.svelte b/examples/svelte-ts/src/lib/components/presence.svelte
new file mode 100644
index 0000000000..81e03e03c3
--- /dev/null
+++ b/examples/svelte-ts/src/lib/components/presence.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import * as presence from "@zag-js/presence"
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
+  import type { Snippet } from "svelte"
+
+  interface Props {
+    hidden?: boolean | string | null | undefined
+    children?: Snippet
+    [key: string]: any
+  }
+
+  let { hidden = false, children, ...rest }: Props = $props()
+
+  let present = $derived(!Boolean(hidden))
+  let service = useMachine(presence.machine, () => ({
+    present,
+  }))
+  let api = $derived(presence.connect(service, normalizeProps))
+
+  function setNode(node: HTMLDivElement) {
+    api.setNode(node)
+  }
+</script>
+
+<div
+  {@attach setNode}
+  data-scope="presence"
+  {...rest}
+  data-state={api.skip ? undefined : present ? "open" : "closed"}
+  hidden={!api.present}
+>
+  {@render children?.()}
+</div>
diff --git a/examples/svelte-ts/src/routes/navigation-menu-viewport.svelte b/examples/svelte-ts/src/routes/navigation-menu-viewport.svelte
new file mode 100644
index 0000000000..3b5f5cdcf1
--- /dev/null
+++ b/examples/svelte-ts/src/routes/navigation-menu-viewport.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+  import Presence from "$lib/components/presence.svelte"
+  import StateVisualizer from "$lib/components/state-visualizer.svelte"
+  import Toolbar from "$lib/components/toolbar.svelte"
+  import { useControls } from "$lib/use-controls.svelte"
+  import * as navigationMenu from "@zag-js/navigation-menu"
+  import { navigationMenuControls } from "@zag-js/shared"
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
+
+  const controls = useControls(navigationMenuControls)
+
+  const id = $props.id()
+  const service = useMachine(
+    navigationMenu.machine,
+    controls.mergeProps<navigationMenu.Props>({
+      id,
+    }),
+  )
+
+  const api = $derived(navigationMenu.connect(service, normalizeProps))
+
+  function renderLinks(opts: { value: string; items: string[] }) {
+    const { value, items } = opts
+    return items.map((item, index) => ({ item, index, value }))
+  }
+</script>
+
+<main class="navigation-menu viewport">
+  <div class="navbar">
+    <button>Logo</button>
+
+    <div {...api.getRootProps()}>
+      <div {...api.getIndicatorTrackProps()}>
+        <div {...api.getListProps()}>
+          <div {...api.getItemProps({ value: "products" })}>
+            <button {...api.getTriggerProps({ value: "products" })}>
+              Products
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6,9 12,15 18,9"></polyline>
+              </svg>
+            </button>
+            <span {...api.getTriggerProxyProps({ value: "products" })}></span>
+            <span {...api.getViewportProxyProps({ value: "products" })}></span>
+          </div>
+
+          <div {...api.getItemProps({ value: "company" })}>
+            <button {...api.getTriggerProps({ value: "company" })}>
+              Company
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6,9 12,15 18,9"></polyline>
+              </svg>
+            </button>
+            <span {...api.getTriggerProxyProps({ value: "company" })}></span>
+            <span {...api.getViewportProxyProps({ value: "company" })}></span>
+          </div>
+
+          <div {...api.getItemProps({ value: "developers" })}>
+            <button {...api.getTriggerProps({ value: "developers" })}>
+              Developers
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6,9 12,15 18,9"></polyline>
+              </svg>
+            </button>
+            <span {...api.getTriggerProxyProps({ value: "developers" })}></span>
+            <span {...api.getViewportProxyProps({ value: "developers" })}></span>
+          </div>
+
+          <div {...api.getItemProps({ value: "pricing" })}>
+            <a href="#" {...api.getLinkProps({ value: "pricing" })}> Pricing </a>
+          </div>
+
+          <Presence {...api.getIndicatorProps()}>
+            <div {...api.getArrowProps()}></div>
+          </Presence>
+        </div>
+      </div>
+
+      <div {...api.getViewportPositionerProps()}>
+        <Presence {...api.getViewportProps()}>
+          <Presence
+            {...api.getContentProps({ value: "products" })}
+            style="grid-template-columns: 1fr 2fr; width: 600px"
+          >
+            {#each renderLinks( { value: "products", items: ["Analytics Platform", "Customer Engagement", "Marketing Automation", "Data Integration", "Enterprise Solutions", "API Documentation"] }, ) as { item, index, value } (`${value}-${item}-${index}`)}
+              <a href="#" {...api.getLinkProps({ value })}>
+                {item}
+              </a>
+            {/each}
+
+            {#each renderLinks( { value: "products", items: ["Case Studies", "Success Stories", "Integration Partners", "Security & Compliance"] }, ) as { item, index, value } (`${value}-${item}-${index}`)}
+              <a href="#" {...api.getLinkProps({ value })}>
+                {item}
+              </a>
+            {/each}
+          </Presence>
+
+          <Presence {...api.getContentProps({ value: "company" })} style="grid-template-columns: 1fr 1fr; width: 450px">
+            {#each renderLinks( { value: "company", items: ["About Us", "Leadership Team", "Careers", "Press Releases"] }, ) as { item, index, value } (`${value}-${item}-${index}`)}
+              <a href="#" {...api.getLinkProps({ value })}>
+                {item}
+              </a>
+            {/each}
+
+            {#each renderLinks( { value: "company", items: ["Investors", "Partners", "Corporate Responsibility"] }, ) as { item, index, value } (`${value}-${item}-${index}`)}
+              <a href="#" {...api.getLinkProps({ value })}>
+                {item}
+              </a>
+            {/each}
+          </Presence>
+
+          <Presence
+            {...api.getContentProps({ value: "developers" })}
+            style="grid-template-columns: 1.6fr 1fr; width: 650px"
+          >
+            {#each renderLinks( { value: "developers", items: ["API Documentation", "SDKs & Libraries", "Developer Guides", "Code Samples", "Webhooks", "GraphQL Explorer"] }, ) as { item, index, value } (`${value}-${item}-${index}`)}
+              <a href="#" {...api.getLinkProps({ value })}>
+                {item}
+              </a>
+            {/each}
+
+            {#each renderLinks( { value: "developers", items: ["Developer Community", "Changelog", "Status Page", "Rate Limits"] }, ) as { item, index, value } (`${value}-${item}-${index}`)}
+              <a href="#" {...api.getLinkProps({ value })}>
+                {item}
+              </a>
+            {/each}
+          </Presence>
+        </Presence>
+      </div>
+    </div>
+
+    <button>Login</button>
+  </div>
+</main>
+
+<Toolbar {controls} viz>
+  <StateVisualizer state={service} context={["value", "previousValue", "triggerRect", "viewportSize"]} />
+</Toolbar>
+
+<style>
+  .navbar {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 15px 20px;
+    justify-content: space-between;
+    width: 100%;
+    background-color: white;
+    box-shadow:
+      0 50px 100px -20px rgba(50, 50, 93, 0.1),
+      0 30px 60px -30px rgba(0, 0, 0, 0.2);
+  }
+</style>
diff --git a/examples/svelte-ts/src/routes/navigation-menu.svelte b/examples/svelte-ts/src/routes/navigation-menu.svelte
new file mode 100644
index 0000000000..7bd9075e89
--- /dev/null
+++ b/examples/svelte-ts/src/routes/navigation-menu.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  import Presence from "$lib/components/presence.svelte"
+  import StateVisualizer from "$lib/components/state-visualizer.svelte"
+  import Toolbar from "$lib/components/toolbar.svelte"
+  import { useControls } from "$lib/use-controls.svelte"
+  import * as navigationMenu from "@zag-js/navigation-menu"
+  import { navigationMenuControls } from "@zag-js/shared"
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
+
+  const controls = useControls(navigationMenuControls)
+
+  const id = $props.id()
+  const service = useMachine(
+    navigationMenu.machine,
+    controls.mergeProps<navigationMenu.Props>({
+      id,
+    }),
+  )
+
+  const api = $derived(navigationMenu.connect(service, normalizeProps))
+
+  function renderLinks(opts: { value: string; items: string[] }) {
+    const { value, items } = opts
+    return items.map((item, index) => ({ item, index, value }))
+  }
+</script>
+
+<main class="navigation-menu basic">
+  <div {...api.getRootProps()}>
+    <div {...api.getListProps()}>
+      <div {...api.getItemProps({ value: "products" })}>
+        <button {...api.getTriggerProps({ value: "products" })}>
+          Products
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6,9 12,15 18,9"></polyline>
+          </svg>
+        </button>
+        <Presence {...api.getContentProps({ value: "products" })}>
+          <Presence {...api.getIndicatorProps()}>
+            <div {...api.getArrowProps()} />
+          </Presence>
+          {#each renderLinks({ value: "products", items: ["Analytics Platform", "Customer Engagement", "Marketing Automation", "Data Integration", "Enterprise Solutions", "API Documentation"] }) as { item, index, value }}
+            <a href="#" {...api.getLinkProps({ value })} key={`${value}-${item}-${index}`}>
+              {item}
+            </a>
+          {/each}
+        </Presence>
+      </div>
+
+      <div {...api.getItemProps({ value: "company" })}>
+        <button {...api.getTriggerProps({ value: "company" })}>
+          Company
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6,9 12,15 18,9"></polyline>
+          </svg>
+        </button>
+        <Presence {...api.getContentProps({ value: "company" })}>
+          <Presence {...api.getIndicatorProps()}>
+            <div {...api.getArrowProps()} />
+          </Presence>
+          {#each renderLinks({ value: "company", items: ["About Us", "Leadership Team", "Careers", "Press Releases"] }) as { item, index, value }}
+            <a href="#" {...api.getLinkProps({ value })} key={`${value}-${item}-${index}`}>
+              {item}
+            </a>
+          {/each}
+        </Presence>
+      </div>
+
+      <div {...api.getItemProps({ value: "developers" })}>
+        <button {...api.getTriggerProps({ value: "developers" })}>
+          Developers
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6,9 12,15 18,9"></polyline>
+          </svg>
+        </button>
+        <Presence {...api.getContentProps({ value: "developers" })}>
+          <Presence {...api.getIndicatorProps()}>
+            <div {...api.getArrowProps()} />
+          </Presence>
+          {#each renderLinks({ value: "developers", items: ["Investors", "Partners", "Corporate Responsibility"] }) as { item, index, value }}
+            <a href="#" {...api.getLinkProps({ value })} key={`${value}-${item}-${index}`}>
+              {item}
+            </a>
+          {/each}
+        </Presence>
+      </div>
+
+      <div {...api.getItemProps({ value: "pricing" })}>
+        <a href="#" {...api.getLinkProps({ value: "pricing" })}>
+          Pricing
+        </a>
+      </div>
+    </div>
+  </div>
+</main>
+
+<Toolbar {controls} viz>
+  <StateVisualizer state={service} context={["value", "previousValue"]} />
+</Toolbar>
\ No newline at end of file
diff --git a/examples/svelte-ts/src/routes/popover.svelte b/examples/svelte-ts/src/routes/popover.svelte
index 693a65dbe2..4c8e74b073 100644
--- a/examples/svelte-ts/src/routes/popover.svelte
+++ b/examples/svelte-ts/src/routes/popover.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import Presence from "$lib/components/presence.svelte"
+  import StateVisualizer from "$lib/components/state-visualizer.svelte"
+  import Toolbar from "$lib/components/toolbar.svelte"
   import { useControls } from "$lib/use-controls.svelte"
   import * as popover from "@zag-js/popover"
-  import { normalizeProps, portal, useMachine } from "@zag-js/svelte"
   import { popoverControls } from "@zag-js/shared"
-  import Toolbar from "$lib/components/toolbar.svelte"
-  import StateVisualizer from "$lib/components/state-visualizer.svelte"
+  import { normalizeProps, portal, useMachine } from "@zag-js/svelte"
 
   const controls = useControls(popoverControls)
 
@@ -26,7 +27,7 @@
     <div {...api.getAnchorProps()}>anchor</div>
 
     <div use:portal={{ disabled: !api.portalled }} {...api.getPositionerProps()}>
-      <div data-testid="popover-content" class="popover-content" {...api.getContentProps()}>
+      <Presence class="popover-content" data-testid="popover-content" {...api.getContentProps()}>
         <div {...api.getArrowProps()}>
           <div {...api.getArrowTipProps()}></div>
         </div>
@@ -38,7 +39,7 @@
           <input data-testid="input" placeholder="input" />
           <button data-testid="popover-close-button" {...api.getCloseTriggerProps()}> X </button>
         </div>
-      </div>
+      </Presence>
     </div>
 
     <span data-testid="plain-text">I am just text</span>
diff --git a/packages/machines/navigation-menu/package.json b/packages/machines/navigation-menu/package.json
index 6d00235b76..4e2ca987cc 100644
--- a/packages/machines/navigation-menu/package.json
+++ b/packages/machines/navigation-menu/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "workspace:*",
-    "@zag-js/interact-outside": "workspace:*",
+    "@zag-js/dismissable": "workspace:*",
     "@zag-js/core": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/utils": "workspace:*",
diff --git a/packages/machines/navigation-menu/src/auto-reset.ts b/packages/machines/navigation-menu/src/auto-reset.ts
deleted file mode 100644
index 5420c7bc42..0000000000
--- a/packages/machines/navigation-menu/src/auto-reset.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export interface AutoReset<T> {
-  get(): T
-  set(v: T): void
-  cleanup(): void
-}
-
-export function autoReset<T>(init: T, timeout: number): AutoReset<T> {
-  let timer: any = null
-  let value: T = init
-
-  const resetAfter = () =>
-    setTimeout(() => {
-      value = init
-    }, timeout)
-
-  return {
-    get() {
-      return value
-    },
-    set(v: T) {
-      value = v
-      if (timer) clearTimeout(timer)
-      timer = resetAfter()
-    },
-    cleanup() {
-      if (timer) clearTimeout(timer)
-      timer = null
-    },
-  }
-}
diff --git a/packages/machines/navigation-menu/src/navigation-menu.connect.ts b/packages/machines/navigation-menu/src/navigation-menu.connect.ts
index 5f97f77735..31616cf350 100644
--- a/packages/machines/navigation-menu/src/navigation-menu.connect.ts
+++ b/packages/machines/navigation-menu/src/navigation-menu.connect.ts
@@ -1,5 +1,14 @@
-import { dataAttr, getEventKey, getWindow } from "@zag-js/dom-query"
-import type { EventKeyMap, NormalizeProps, PropTypes } from "@zag-js/types"
+import {
+  contains,
+  dataAttr,
+  getTabbables,
+  getWindow,
+  isSelfTarget,
+  navigate,
+  visuallyHiddenStyle,
+} from "@zag-js/dom-query"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { toPx } from "@zag-js/utils"
 import { parts } from "./navigation-menu.anatomy"
 import * as dom from "./navigation-menu.dom"
 import type { ItemProps, NavigationMenuApi, NavigationMenuService } from "./navigation-menu.types"
@@ -11,7 +20,9 @@ export function connect<T extends PropTypes>(
   const { context, send, prop, scope, computed, refs } = service
 
   const triggerRect = context.get("triggerRect")
+
   const viewportSize = context.get("viewportSize")
+  const viewportPosition = context.get("viewportPosition")
 
   const value = context.get("value")
   const previousValue = context.get("previousValue")
@@ -19,7 +30,10 @@ export function connect<T extends PropTypes>(
 
   const isViewportRendered = context.get("isViewportRendered")
   const preventTransition = value && !previousValue
-  const pointerMoveOpenedRef = refs.get("pointerMoveOpenedRef")
+
+  const pointerMoveOpenedValue = context.get("pointerMoveOpenedValue")
+  const clickCloseValue = context.get("clickCloseValue")
+  const escapeCloseValue = context.get("escapeCloseValue")
 
   function getItemState(props: ItemProps) {
     const selected = value === props.value
@@ -27,6 +41,9 @@ export function connect<T extends PropTypes>(
     return {
       triggerId: dom.getTriggerId(scope, props.value),
       contentId: dom.getContentId(scope, props.value),
+      wasClickClose: clickCloseValue === props.value,
+      wasEscapeClose: escapeCloseValue === props.value,
+      hasPointerMoveOpened: pointerMoveOpenedValue === props.value,
       selected,
       wasSelected,
       open: selected || wasSelected,
@@ -38,6 +55,10 @@ export function connect<T extends PropTypes>(
     open,
     value,
     orientation: prop("orientation")!,
+    isViewportRendered,
+    getViewportNode() {
+      return dom.getViewportEl(scope)
+    },
     setValue(value) {
       send({ type: "VALUE.SET", value })
     },
@@ -52,17 +73,19 @@ export function connect<T extends PropTypes>(
       return normalize.element({
         ...parts.root.attrs,
         id: dom.getRootId(scope),
-        "aria-label": "Main",
+        "aria-label": "Main Navigation",
         "data-orientation": prop("orientation")!,
         "data-type": computed("isSubmenu") ? "submenu" : "root",
         dir: prop("dir"),
         style: {
-          "--trigger-width": triggerRect != null ? triggerRect.width + "px" : undefined,
-          "--trigger-height": triggerRect != null ? triggerRect.height + "px" : undefined,
-          "--trigger-x": triggerRect != null ? triggerRect.x + "px" : undefined,
-          "--trigger-y": triggerRect != null ? triggerRect.y + "px" : undefined,
-          "--viewport-width": viewportSize != null ? viewportSize.width + "px" : undefined,
-          "--viewport-height": viewportSize != null ? viewportSize.height + "px" : undefined,
+          "--trigger-width": toPx(triggerRect?.width),
+          "--trigger-height": toPx(triggerRect?.height),
+          "--trigger-x": toPx(triggerRect?.x),
+          "--trigger-y": toPx(triggerRect?.y),
+          "--viewport-width": toPx(viewportSize?.width),
+          "--viewport-height": toPx(viewportSize?.height),
+          "--viewport-x": toPx(viewportPosition?.x),
+          "--viewport-y": toPx(viewportPosition?.y),
         },
       })
     },
@@ -86,6 +109,23 @@ export function connect<T extends PropTypes>(
         "data-state": itemState.open ? "open" : "closed",
         "data-orientation": prop("orientation")!,
         "data-disabled": dataAttr(itemState.disabled),
+        onKeyDown(event) {
+          switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "Home":
+            case "End": {
+              send({ type: "ITEM.NAVIGATE", value: props.value, key: event.key })
+              event.preventDefault()
+              event.stopPropagation()
+              break
+            }
+            default:
+              break
+          }
+        },
       })
     },
 
@@ -130,6 +170,7 @@ export function connect<T extends PropTypes>(
         ...parts.trigger.attrs,
         id: itemState.triggerId,
         "data-uid": prop("id"),
+        "data-trigger-proxy-id": dom.getTriggerProxyId(scope, props.value),
         dir: prop("dir"),
         disabled: props.disabled,
         "data-value": props.value,
@@ -138,69 +179,86 @@ export function connect<T extends PropTypes>(
         "data-disabled": dataAttr(props.disabled),
         "aria-controls": itemState.contentId,
         "aria-expanded": itemState.selected,
-        onPointerDown() {
-          send({ type: "TRIGGER.POINTERDOWN" })
-        },
         onPointerEnter() {
-          queueMicrotask(() => {
-            if (prop("disableHoverTrigger")) return
-            send({ type: "TRIGGER.ENTER", value: props.value })
-          })
+          if (prop("disableHoverTrigger")) return
+          send({ type: "TRIGGER.POINTERENTER", value: props.value })
         },
         onPointerMove(event) {
           if (prop("disableHoverTrigger")) return
           if (event.pointerType !== "mouse") return
           if (itemState.disabled) return
-          if (pointerMoveOpenedRef.get() === props.value) return
-          if (refs.get("clickCloseRef") === props.value) return
-          if (refs.get("wasEscapeClose")) return
-          send({ type: "TRIGGER.MOVE", value: props.value })
+          if (itemState.hasPointerMoveOpened) return
+          if (itemState.wasClickClose) return
+          if (itemState.wasEscapeClose) return
+          send({ type: "TRIGGER.POINTERMOVE", value: props.value })
         },
         onPointerLeave(event) {
           if (prop("disableHoverTrigger")) return
           if (event.pointerType !== "mouse") return
           if (props.disabled) return
-          if (computed("isSubmenu")) return
-          send({ type: "TRIGGER.LEAVE", value: props.value })
+          send({ type: "TRIGGER.POINTERLEAVE", value: props.value })
         },
         onClick() {
           if (prop("disableClickTrigger")) return
-          if (pointerMoveOpenedRef.get() === props.value) return
+          // if open via pointer move, prevent click event
+          if (itemState.hasPointerMoveOpened) return
           send({ type: "TRIGGER.CLICK", value: props.value })
         },
         onKeyDown(event) {
-          const keyMap: EventKeyMap = {
-            ArrowLeft() {
-              send({ type: "TRIGGER.FOCUS", target: "prev", value: props.value })
-            },
-            ArrowRight() {
-              send({ type: "TRIGGER.FOCUS", target: "next", value: props.value })
-            },
-            Home() {
-              send({ type: "TRIGGER.FOCUS", target: "first" })
-            },
-            End() {
-              send({ type: "TRIGGER.FOCUS", target: "last" })
-            },
-            Enter() {
-              send({ type: "TRIGGER.CLICK", value: props.value })
-            },
-            ArrowDown() {
-              if (!itemState.selected) return
-              send({ type: "CONTENT.FOCUS", value })
-            },
+          const verticalEntryKey = prop("dir") === "rtl" ? "ArrowLeft" : "ArrowRight"
+          const entryKey = {
+            horizontal: "ArrowDown",
+            vertical: verticalEntryKey,
+          }[prop("orientation")]
+
+          if (open && event.key === entryKey) {
+            send({ type: "CONTENT.FOCUS", side: "start" })
+            event.preventDefault()
+            event.stopPropagation()
           }
+        },
+      })
+    },
 
-          const action = keyMap[getEventKey(event)]
+    getTriggerProxyProps(props) {
+      const itemState = getItemState(props)
 
-          if (action) {
-            action(event)
-            event.preventDefault()
+      return normalize.element({
+        "aria-hidden": true,
+        tabIndex: 0,
+        "data-trigger-proxy": "",
+        id: dom.getTriggerProxyId(scope, props.value),
+        "data-trigger-id": dom.getTriggerId(scope, props.value),
+        hidden: !itemState.selected,
+        style: visuallyHiddenStyle,
+        onFocus(event) {
+          const contentEl = dom.getContentEl(scope, props.value)
+          if (!contentEl) return
+          const prevFocusedEl = event.relatedTarget as HTMLElement | null
+
+          const wasTriggerFocused = prevFocusedEl === dom.getTriggerEl(scope, props.value)
+          const wasFocusFromContent = contains(contentEl, prevFocusedEl)
+
+          if (wasTriggerFocused || !wasFocusFromContent) {
+            send({ type: "CONTENT.FOCUS", side: wasTriggerFocused ? "start" : "end" })
           }
         },
       })
     },
 
+    getViewportProxyProps(props) {
+      const itemState = getItemState(props)
+
+      // Only render when item is open and viewport is used
+      if (!itemState.selected || !isViewportRendered) {
+        return { hidden: true }
+      }
+
+      return normalize.element({
+        "aria-owns": dom.getContentId(scope, props.value),
+      })
+    },
+
     getLinkProps(props) {
       return normalize.element({
         ...parts.link.attrs,
@@ -210,12 +268,11 @@ export function connect<T extends PropTypes>(
         "aria-current": props.current ? "page" : undefined,
         "data-ownedby": dom.getContentId(scope, props.value),
         onClick(event) {
-          const { currentTarget } = event
+          const target = event.currentTarget
 
-          const win = getWindow(currentTarget)
-          currentTarget.addEventListener("navigationMenu.linkSelect", (event: any) => props.onSelect?.(event), {
-            once: true,
-          })
+          const win = getWindow(target)
+          const onSelect = props.onSelect as EventListener
+          target.addEventListener("link.select", onSelect, { once: true })
 
           const linkSelectEvent = new win.CustomEvent("link.select", {
             bubbles: true,
@@ -223,59 +280,10 @@ export function connect<T extends PropTypes>(
             detail: { originalEvent: event },
           })
 
-          currentTarget.dispatchEvent(linkSelectEvent)
+          target.dispatchEvent(linkSelectEvent)
 
           if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
-            send({ type: "CONTENT.DISMISS" })
-          }
-        },
-        onKeyDown(event) {
-          const contentMenu = event.currentTarget.closest("[data-scope=navigation-menu][data-part=content]")
-          const isWithinContent = !!contentMenu
-
-          const keyMap: EventKeyMap = {
-            ArrowLeft(event) {
-              if (isWithinContent) return
-              send({ type: "TRIGGER.FOCUS", target: "prev", value: props.value })
-              event.preventDefault()
-            },
-            ArrowRight(event) {
-              if (isWithinContent) return
-              send({ type: "TRIGGER.FOCUS", target: "next", value: props.value })
-              event.preventDefault()
-            },
-            Home(event) {
-              if (isWithinContent) return
-              send({ type: "TRIGGER.FOCUS", target: "first" })
-              event.preventDefault()
-            },
-            End(event) {
-              if (isWithinContent) return
-              send({ type: "TRIGGER.FOCUS", target: "last" })
-              event.preventDefault()
-            },
-            ArrowDown(event) {
-              if (!isWithinContent) return
-              send({ type: "LINK.FOCUS", target: "next", node: event.currentTarget, value: props.value })
-              event.preventDefault()
-            },
-            ArrowUp(event) {
-              if (!isWithinContent) return
-              send({ type: "LINK.FOCUS", target: "prev", node: event.currentTarget, value: props.value })
-              event.preventDefault()
-            },
-          }
-
-          const action =
-            keyMap[
-              getEventKey(event, {
-                orientation: prop("orientation"),
-                dir: prop("dir"),
-              })
-            ]
-
-          if (action) {
-            action(event)
+            send({ type: "ROOT.CLOSE" })
           }
         },
       })
@@ -284,7 +292,7 @@ export function connect<T extends PropTypes>(
     getContentProps(props) {
       const itemState = getItemState(props)
 
-      const currentValue = context.get("value") ?? context.get("previousValue")
+      const currentValue = context.get("value") || context.get("previousValue")
       const selected = isViewportRendered ? currentValue === props.value : itemState.selected
 
       return normalize.element({
@@ -296,28 +304,76 @@ export function connect<T extends PropTypes>(
         "data-uid": prop("id"),
         "data-state": selected ? "open" : "closed",
         "data-type": computed("isSubmenu") ? "submenu" : "root",
+        "data-orientation": prop("orientation"),
         "data-value": props.value,
         onPointerEnter() {
           if (computed("isSubmenu")) return
-          send({ type: "CONTENT.ENTER", value: props.value })
+          send({ type: "CONTENT.POINTERENTER", value: props.value })
         },
         onPointerLeave(event) {
           if (event.pointerType !== "mouse") return
           if (computed("isSubmenu")) return
-          send({ type: "CONTENT.LEAVE", value: props.value })
+          send({ type: "CONTENT.POINTERLEAVE", value: props.value })
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return
+          if (!isSelfTarget(event)) return
+
+          // prevent parent menu triggering keydown event
+          if (event.currentTarget.closest("[data-scope=navigation-menu][data-part=root]") !== dom.getRootEl(scope))
+            return
+
+          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey
+          const isTabKey = event.key === "Tab" && !isMetaKey
+          const candidates = getTabbables(event.currentTarget)
+
+          if (isTabKey) {
+            const focusedElement = scope.getActiveElement()
+            const index = candidates.findIndex((candidate) => candidate === focusedElement)
+            const isMovingBackwards = event.shiftKey
+            const nextCandidates = isMovingBackwards
+              ? candidates.slice(0, index).reverse()
+              : candidates.slice(index + 1, candidates.length)
+
+            if (dom.focusFirst(scope, nextCandidates)) {
+              // prevent browser tab keydown because we've handled focus
+              event.preventDefault()
+            } else {
+              // If we can't focus that means we're at the edges
+              // so focus the proxy and let browser handle
+              // tab/shift+tab keypress on the proxy instead
+              dom.getTriggerProxyEl(scope, props.value)?.focus()
+              return
+            }
+          }
+
+          const el = navigate(candidates, scope.getActiveElement(), {
+            key: event.key,
+            dir: prop("dir"),
+            loop: false,
+          })
+
+          if (el) {
+            el.focus()
+            event.preventDefault()
+            event.stopPropagation()
+          }
         },
       })
     },
 
-    getViewportPositionerProps() {
+    getViewportPositionerProps(props = {}) {
+      const { align = "center" } = props
       return normalize.element({
         ...parts.viewportPositioner.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
+        "data-align": align,
       })
     },
 
-    getViewportProps() {
+    getViewportProps(props = {}) {
+      const { align = "center" } = props
       const open = Boolean(value)
       return normalize.element({
         ...parts.viewport.attrs,
@@ -327,18 +383,23 @@ export function connect<T extends PropTypes>(
         "data-state": open ? "open" : "closed",
         "data-orientation": prop("orientation"),
         "data-type": computed("isSubmenu") ? "submenu" : "root",
+        "data-align": align,
         style: {
           transition: preventTransition ? "none" : undefined,
-          pointerEvents: !open ? "none" : undefined,
+          pointerEvents: !open && computed("isRootMenu") ? "none" : undefined,
+          "--viewport-width": toPx(viewportSize?.width),
+          "--viewport-height": toPx(viewportSize?.height),
+          "--viewport-x": toPx(viewportPosition?.x),
+          "--viewport-y": toPx(viewportPosition?.y),
         },
         onPointerEnter() {
-          if (computed("isSubmenu")) return
-          send({ type: "CONTENT.ENTER", src: "viewport" })
+          send({ type: "CONTENT.POINTERENTER" })
         },
         onPointerLeave(event) {
+          if (prop("disablePointerLeaveClose")) return
           if (event.pointerType !== "mouse") return
-          if (computed("isSubmenu")) return
-          send({ type: "CONTENT.LEAVE", src: "viewport" })
+          if (Object.keys(refs.get("children")).length) return
+          send({ type: "CONTENT.POINTERLEAVE" })
         },
       })
     },
diff --git a/packages/machines/navigation-menu/src/navigation-menu.dom.ts b/packages/machines/navigation-menu/src/navigation-menu.dom.ts
index 03942b5c26..06fc6edbca 100644
--- a/packages/machines/navigation-menu/src/navigation-menu.dom.ts
+++ b/packages/machines/navigation-menu/src/navigation-menu.dom.ts
@@ -1,20 +1,16 @@
 import type { Scope } from "@zag-js/core"
 import { getTabbables, getWindow, queryAll } from "@zag-js/dom-query"
-import { first, last, next, nextIndex, prev, prevIndex } from "@zag-js/utils"
 import type { NavigationMenuService } from "./navigation-menu.types"
 
 export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `nav-menu:${ctx.id}`
-
 export const getTriggerId = (ctx: Scope, value: string) =>
   ctx.ids?.trigger?.(value) ?? `nav-menu:${ctx.id}:trigger:${value}`
-
+export const getTriggerProxyId = (ctx: Scope, value: string) =>
+  ctx.ids?.triggerProxy?.(value) ?? `nav-menu:${ctx.id}:trigger-proxy:${value}`
 export const getContentId = (ctx: Scope, value: string) =>
   ctx.ids?.content?.(value) ?? `nav-menu:${ctx.id}:content:${value}`
-
 export const getViewportId = (ctx: Scope) => ctx.ids?.viewport ?? `nav-menu:${ctx.id}:viewport`
-
 export const getListId = (ctx: Scope) => ctx.ids?.list ?? `nav-menu:${ctx.id}:list`
-
 export const getIndicatorTrackId = (ctx: Scope) => ctx.ids?.indicatorTrack ?? `nav-menu:${ctx.id}:indicator-track`
 
 export const getRootMenuEl = (ctx: Scope, parent?: NavigationMenuService) => {
@@ -23,73 +19,63 @@ export const getRootMenuEl = (ctx: Scope, parent?: NavigationMenuService) => {
   return ctx.getById(`nav-menu:${id}`)
 }
 
-export const getTabbableEls = (ctx: Scope, value: string) => getTabbables(getContentEl(ctx, value))
 export const getIndicatorTrackEl = (ctx: Scope) => ctx.getById(getIndicatorTrackId(ctx))
 export const getRootEl = (ctx: Scope) => ctx.getById(getRootId(ctx))
 export const getViewportEl = (ctx: Scope) => ctx.getById(getViewportId(ctx))
-export const getTriggerEl = (ctx: Scope, value: string) => ctx.getById(getTriggerId(ctx, value))
-export const getListEl = (ctx: Scope) => ctx.getById(getListId(ctx))
-
-export const getContentEl = (ctx: Scope, value: string) => ctx.getById(getContentId(ctx, value))
-export const getContentEls = (ctx: Scope) =>
-  queryAll(ctx.getDoc(), `[data-scope=navigation-menu][data-part=content][data-uid='${ctx.id}']`)
 
-export const getTriggerEls = (ctx: Scope) => queryAll(getListEl(ctx), `[data-part=trigger][data-uid='${ctx.id}']`)
-export const getTopLevelEls = (ctx: Scope) => {
-  const topLevelTriggerSelector = `[data-part=trigger][data-uid='${ctx.id}']:not([data-disabled])`
-  const topLevelLinkSelector = `[data-part=item] > [data-part=link]`
-  return queryAll(getListEl(ctx), `${topLevelTriggerSelector}, ${topLevelLinkSelector}`)
+export const getTriggerEl = (ctx: Scope, value: string | null) => {
+  if (!value) return null
+  return ctx.getById(getTriggerId(ctx, value))
+}
+export const getTriggerProxyEl = (ctx: Scope, value: string | null) => {
+  if (!value) return null
+  return ctx.getById(getTriggerProxyId(ctx, value))
 }
 
-export const getFirstTopLevelEl = (ctx: Scope) => first(getTopLevelEls(ctx))
-export const getLastTopLevelEl = (ctx: Scope) => last(getTopLevelEls(ctx))
-export const getNextTopLevelEl = (ctx: Scope, value: string) => {
-  const elements = getTopLevelEls(ctx)
-  const values = toValues(elements)
-  const idx = nextIndex(values, values.indexOf(value), { loop: false })
-  return elements[idx]
+export const getListEl = (ctx: Scope) => ctx.getById(getListId(ctx))
+
+export const getContentEl = (ctx: Scope, value: string | null) => {
+  if (!value) return null
+  return ctx.getById(getContentId(ctx, value))
 }
 
-export const getPrevTopLevelEl = (ctx: Scope, value: string) => {
-  const elements = getTopLevelEls(ctx)
-  const values = toValues(elements)
-  const idx = prevIndex(values, values.indexOf(value), { loop: false })
-  return elements[idx]
+export const getContentEls = (ctx: Scope) =>
+  queryAll(ctx.getDoc(), `[data-scope=navigation-menu][data-part=content][data-uid='${ctx.id}']`)
+
+export const getTabbableEls = (ctx: Scope, value: string) => {
+  return getTabbables(getContentEl(ctx, value))
 }
 
+export const getTriggerEls = (ctx: Scope) => queryAll(getListEl(ctx), `[data-part=trigger][data-uid='${ctx.id}']`)
 export const getLinkEls = (ctx: Scope, value: string) => {
   const contentEl = getContentEl(ctx, value)
   return queryAll(contentEl, `[data-part=link][data-ownedby="${getContentId(ctx, value)}"]`)
 }
 
-export const getFirstLinkEl = (ctx: Scope, value: string) => first(getLinkEls(ctx, value))
-export const getLastLinkEl = (ctx: Scope, value: string) => last(getLinkEls(ctx, value))
-export const getNextLinkEl = (ctx: Scope, value: string, node: HTMLElement) => {
-  const elements = getLinkEls(ctx, value)
-  return next(elements, elements.indexOf(node), { loop: false })
-}
-
-export const getPrevLinkEl = (ctx: Scope, value: string, node: HTMLElement) => {
-  const elements = getLinkEls(ctx, value)
-  return prev(elements, elements.indexOf(node), { loop: false })
+export const getElements = (ctx: Scope) => {
+  const topLevelTriggerSelector = `[data-part=trigger][data-uid='${ctx.id}']:not([data-disabled])`
+  const topLevelLinkSelector = `[data-part=item] > [data-part=link]`
+  return queryAll(getListEl(ctx), `${topLevelTriggerSelector}, ${topLevelLinkSelector}`)
 }
 
-const toValues = (els: HTMLElement[]) => els.map((el) => el.getAttribute("data-value"))
-
-export function trackResizeObserver(element: HTMLElement | null, onResize: () => void) {
-  if (!element) return null
+export function trackResizeObserver(element: Array<HTMLElement | null>, onResize: () => void) {
+  if (!element.length) return
   let frame = 0
-  const win = getWindow(element)
+  const win = getWindow(element[0])
   const obs = new win.ResizeObserver(() => {
     cancelAnimationFrame(frame)
     frame = requestAnimationFrame(onResize)
   })
 
-  obs.observe(element)
+  element.forEach((el) => {
+    if (el) obs.observe(el)
+  })
 
   return () => {
     cancelAnimationFrame(frame)
-    obs.unobserve(element)
+    element.forEach((el) => {
+      if (el) obs.unobserve(el)
+    })
   }
 }
 
@@ -134,3 +120,25 @@ export function setMotionAttr(scope: Scope, value: string | null, previousValue:
     }
   })
 }
+
+export function focusFirst(scope: Scope, candidates: HTMLElement[]) {
+  const previouslyFocusedElement = scope.getActiveElement()
+  return candidates.some((candidate) => {
+    if (candidate === previouslyFocusedElement) return true
+    candidate.focus()
+    return scope.getActiveElement() !== previouslyFocusedElement
+  })
+}
+
+export function removeFromTabOrder(candidates: HTMLElement[]) {
+  candidates.forEach((candidate) => {
+    candidate.dataset.tabindex = candidate.getAttribute("tabindex") || ""
+    candidate.setAttribute("tabindex", "-1")
+  })
+  return () => {
+    candidates.forEach((candidate) => {
+      const prevTabIndex = candidate.dataset.tabindex as string
+      candidate.setAttribute("tabindex", prevTabIndex)
+    })
+  }
+}
diff --git a/packages/machines/navigation-menu/src/navigation-menu.machine.ts b/packages/machines/navigation-menu/src/navigation-menu.machine.ts
index 3e332c59fd..4912835dbb 100644
--- a/packages/machines/navigation-menu/src/navigation-menu.machine.ts
+++ b/packages/machines/navigation-menu/src/navigation-menu.machine.ts
@@ -1,15 +1,16 @@
 import { setup } from "@zag-js/core"
-import { addDomEvent, contains, proxyTabFocus, raf } from "@zag-js/dom-query"
-import { trackInteractOutside } from "@zag-js/interact-outside"
-import type { Rect, Size } from "@zag-js/types"
-import { callAll, ensureProps, setRafTimeout } from "@zag-js/utils"
-import { autoReset } from "./auto-reset"
+import { trackDismissableElement } from "@zag-js/dismissable"
+import { addDomEvent, contains, navigate, raf } from "@zag-js/dom-query"
+import type { Point, Rect, Size } from "@zag-js/types"
+import { callAll, ensureProps } from "@zag-js/utils"
 import * as dom from "./navigation-menu.dom"
-import type { NavigationMenuSchema } from "./navigation-menu.types"
+import type { NavigationMenuSchema, NavigationMenuService } from "./navigation-menu.types"
+import { autoReset } from "./utils/auto-reset"
+import { debounceFn } from "./utils/debounce-fn"
 
 const { createMachine, guards } = setup<NavigationMenuSchema>()
 
-const { and } = guards
+const { not } = guards
 
 export const machine = createMachine({
   props({ props }) {
@@ -19,7 +20,7 @@ export const machine = createMachine({
       openDelay: 200,
       closeDelay: 300,
       orientation: "horizontal",
-      defaultValue: null,
+      defaultValue: "",
       ...props,
     }
   },
@@ -27,7 +28,7 @@ export const machine = createMachine({
   context({ prop, bindable }) {
     return {
       // value tracking
-      value: bindable<string | null>(() => ({
+      value: bindable<string>(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
         sync: true,
@@ -35,8 +36,8 @@ export const machine = createMachine({
           prop("onValueChange")?.({ value })
         },
       })),
-      previousValue: bindable<string | null>(() => ({
-        defaultValue: null,
+      previousValue: bindable<string>(() => ({
+        defaultValue: "",
         sync: true,
       })),
 
@@ -48,6 +49,9 @@ export const machine = createMachine({
       isViewportRendered: bindable<boolean>(() => ({
         defaultValue: false,
       })),
+      viewportPosition: bindable<Point | null>(() => ({
+        defaultValue: null,
+      })),
 
       // nodes
       contentNode: bindable<HTMLElement | null>(() => ({
@@ -60,397 +64,491 @@ export const machine = createMachine({
       triggerNode: bindable<HTMLElement | null>(() => ({
         defaultValue: null,
       })),
+
+      isSubmenu: bindable<boolean>(() => ({
+        defaultValue: false,
+      })),
+
+      // timers + event trackers
+      isDelaySkipped: autoReset(bindable, () => ({
+        defaultValue: false,
+        resetAfter: 300,
+        sync: true,
+      })),
+      pointerMoveOpenedValue: autoReset(bindable, () => ({
+        defaultValue: "",
+        resetAfter: 300,
+        sync: true,
+      })),
+      clickCloseValue: bindable<string | null>(() => ({
+        defaultValue: null,
+      })),
+      escapeCloseValue: bindable<string | null>(() => ({
+        defaultValue: null,
+      })),
     }
   },
 
   computed: {
-    isRootMenu: ({ refs }) => refs.get("parent") == null,
-    isSubmenu: ({ refs }) => refs.get("parent") != null,
+    isRootMenu: ({ refs, context }) => refs.get("parent") == null && !context.get("isSubmenu"),
+    isSubmenu: ({ refs, context }) => refs.get("parent") != null && context.get("isSubmenu"),
+    open: ({ context }) => context.get("value") != null,
   },
 
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["restoreTabOrder", "setTriggerNode", "setContentNode", "syncMotionAttribute"])
+      action(["restoreTabOrder", "setTriggerNode", "syncContentNode", "syncMotionAttribute"])
     })
   },
 
-  refs() {
+  refs({ context, prop }) {
     return {
-      pointerMoveOpenedRef: autoReset(null, 300),
-      clickCloseRef: null,
-      wasEscapeClose: false,
-      tabOrderCleanup: null,
-      contentCleanup: null,
-      triggerCleanup: null,
+      restoreContentTabOrder: undefined,
+      contentResizeObserverCleanup: undefined,
+      contentDismissableCleanup: undefined,
+      contentExitCompleteCleanup: undefined,
+      triggerResizeObserverCleanup: undefined,
       parent: null,
       children: {},
+      setValue: debounceFn(
+        (val) => {
+          // passing `undefined` meant to reset the debounce timer
+          if (typeof val === "string") {
+            context.set("previousValue", context.get("value"))
+            context.set("value", val)
+          }
+        },
+        () => {
+          const open = context.get("value") !== ""
+          return open || context.get("isDelaySkipped") ? 150 : prop("openDelay")
+        },
+      ),
     }
   },
 
+  // entry: ["checkViewportNode", "syncContentNode"],
   entry: ["checkViewportNode"],
 
-  exit: ["cleanupObservers", "cleanupAutoResetRef"],
+  exit: ["cleanupObservers"],
+
+  effects: ["trackDocumentResize"],
 
   initialState() {
-    return "closed"
+    return "idle"
   },
 
   on: {
     "PARENT.SET": {
-      target: "open",
       actions: ["setParentMenu", "setTriggerNode"],
     },
     "CHILD.SET": {
       actions: ["setChildMenu"],
     },
-    "TRIGGER.FOCUS": {
-      actions: ["focusTopLevelEl"],
+    "VIEWPORT.POSITION": {
+      actions: ["setViewportPosition"],
     },
-    "TRIGGER.ENTER": {
-      actions: ["clearPreviousValue", "clearCloseRefs"],
+    "TRIGGER.POINTERENTER": {
+      // actions: ["clearClickCloseValue", "clearEscapeCloseValue", "clearValueWithDelay"],
+      actions: ["clearClickCloseValue", "clearEscapeCloseValue"],
     },
-    "TRIGGER.CLICK": [
+    "TRIGGER.POINTERMOVE": [
       {
-        guard: and("isItemOpen", "isRootMenu"),
-        target: "closed",
-        actions: ["setPreviousValue", "clearValue", "setClickCloseRef"],
+        guard: "isSubmenu",
+        actions: ["setValue", "setPointerMoveOpenedValue"],
       },
       {
-        guard: and("wasItemOpen", "isRootMenu"),
-        target: "open",
-        actions: ["setPreviousValue", "setValueOnNextTick"],
+        actions: ["setValueWithDelay", "setPointerMoveOpenedValue"],
       },
+    ],
+    "TRIGGER.POINTERLEAVE": [
       {
-        reenter: true,
-        target: "open",
-        actions: ["setPreviousValue", "setValue"],
+        guard: "isSubmenu",
+        actions: ["clearPointerMoveOpenedValue"],
       },
-    ],
-    "TRIGGER.MOVE": [
       {
-        guard: "isItemOpen",
-        actions: ["setPreviousValue", "setValue", "setPointerMoveOpenedRef"],
+        actions: ["setDelaySkipped", "resetValueWithDelay", "clearPointerMoveOpenedValue"],
       },
+    ],
+    "TRIGGER.CLICK": [
       {
         guard: "isSubmenu",
-        target: "open",
-        actions: ["setValue", "setPointerMoveOpenedRef"],
+        actions: ["setValue"],
       },
       {
-        target: "opening",
-        actions: ["setPointerMoveOpenedRef"],
+        guard: "isItemOpen",
+        actions: ["deselectValue", "setClickCloseValue"],
+      },
+      {
+        actions: ["selectValue", "setClickCloseValue"],
       },
     ],
-    "VALUE.SET": {
-      actions: ["setValue"],
+    "CONTENT.FOCUS": {
+      actions: ["restoreTabOrder", "focusFirstTabbableEl"],
     },
-  },
-
-  states: {
-    closed: {
-      entry: ["cleanupObservers", "propagateClose"],
-      on: {
-        "TRIGGER.LEAVE": {
-          actions: ["clearPointerMoveRef"],
-        },
-      },
+    "CONTENT.BLUR": {
+      actions: ["removeFromTabOrder"],
     },
-
-    opening: {
-      effects: ["waitForOpenDelay"],
-      on: {
-        "OPEN.DELAY": {
-          target: "open",
-          actions: ["setPreviousValue", "setValue"],
-        },
-        "TRIGGER.LEAVE": {
-          target: "closed",
-          actions: ["setPreviousValue", "clearValue", "clearPointerMoveRef"],
-        },
-        "CONTENT.FOCUS": {
-          actions: ["focusContent", "restoreTabOrder"],
-        },
-        "LINK.FOCUS": {
-          actions: ["focusLink"],
-        },
-      },
+    "CONTENT.POINTERENTER": {
+      guard: not("isSubmenu"),
+      actions: ["clearValueWithDelay"],
     },
-
-    open: {
-      tags: ["open"],
-      effects: ["trackEscapeKey", "trackInteractionOutside", "preserveTabOrder"],
-      on: {
-        "CONTENT.LEAVE": {
-          target: "closing",
-        },
-        "TRIGGER.LEAVE": {
-          target: "closing",
-          actions: ["clearPointerMoveRef"],
-        },
-        "CONTENT.FOCUS": {
-          actions: ["focusContent", "restoreTabOrder"],
-        },
-        "LINK.FOCUS": {
-          actions: ["focusLink"],
-        },
-        "CONTENT.DISMISS": {
-          target: "closed",
-          actions: ["focusTrigger", "clearValue", "clearPointerMoveRef"],
-        },
-        "CONTENT.ENTER": {
-          actions: ["restoreTabOrder"],
-        },
-        "ROOT.CLOSE": {
-          // clear the previous value so indicator doesn't animate
-          actions: ["clearPreviousValue", "cleanupObservers"],
-        },
-      },
+    "CONTENT.POINTERLEAVE": {
+      guard: not("isSubmenu"),
+      actions: ["resetValueWithDelay"],
     },
-
-    closing: {
-      tags: ["open"],
-      effects: ["trackInteractionOutside", "waitForCloseDelay"],
-      on: {
-        "CLOSE.DELAY": {
-          target: "closed",
-          actions: ["clearValue"],
-        },
-        "CONTENT.DISMISS": {
-          target: "closed",
-          actions: ["focusTrigger", "clearValue", "clearPointerMoveRef"],
-        },
-        "CONTENT.ENTER": {
-          target: "open",
-          actions: ["restoreTabOrder"],
-        },
-      },
+    "ITEM.NAVIGATE": {
+      actions: ["focusNextLink"],
+    },
+    "ITEM.CLOSE": {
+      actions: ["focusTrigger", "deselectValue"],
+    },
+    "CONTENT.ESCAPE_KEYDOWN": {
+      actions: ["focusTrigger", "deselectValue", "setEscapeCloseValue"],
     },
+    "ROOT.CLOSE": {
+      actions: ["closeRootMenu"],
+    },
+    CLOSE: {
+      actions: ["deselectValue", "focusTriggerIfNeeded", "removeFromTabOrder"],
+    },
+  },
+
+  states: {
+    idle: {},
   },
 
   implementations: {
     guards: {
+      isRootMenu: ({ computed }) => computed("isRootMenu"),
+      isSubmenu: ({ computed }) => computed("isSubmenu"),
       isItemOpen: ({ context, event }) => context.get("value") === event.value,
-      wasItemOpen: ({ context, event }) => context.get("previousValue") === event.value,
-      isRootMenu: ({ refs }) => refs.get("parent") == null,
-      isSubmenu: ({ refs }) => refs.get("parent") != null,
     },
 
     effects: {
-      waitForOpenDelay: ({ send, prop, event }) => {
-        return setRafTimeout(() => {
-          send({ type: "OPEN.DELAY", value: event.value })
-        }, prop("openDelay"))
-      },
-      waitForCloseDelay: ({ send, prop, event }) => {
-        return setRafTimeout(() => {
-          send({ type: "CLOSE.DELAY", value: event.value })
-        }, prop("closeDelay"))
-      },
-      preserveTabOrder({ context, scope, refs }) {
-        if (!context.get("isViewportRendered")) return
-        const value = context.get("value")
-        if (value == null) return
-        const contentEl = () => dom.getContentEl(scope, value)
-        return proxyTabFocus(contentEl, {
-          triggerElement: dom.getTriggerEl(scope, value),
-          onFocusEnter() {
-            refs.get("tabOrderCleanup")?.()
-          },
+      trackDocumentResize({ scope, send }) {
+        const doc = scope.getDoc()
+        return dom.trackResizeObserver([doc.body, dom.getRootEl(scope)], () => {
+          send({ type: "VIEWPORT.POSITION" })
         })
       },
-      trackInteractionOutside({ context, computed, refs, send, scope }) {
-        if (context.get("value") == null) return
-        if (computed("isSubmenu")) return
-
-        const getContentEl = () =>
-          context.get("isViewportRendered") ? dom.getViewportEl(scope) : dom.getContentEl(scope, context.get("value")!)
-
-        return trackInteractOutside(getContentEl, {
-          defer: true,
-          onFocusOutside(event) {
-            // remove tabbable elements from tab order
-            refs.get("tabOrderCleanup")?.()
-            refs.set("tabOrderCleanup", removeFromTabOrder(dom.getTabbableEls(scope, context.get("value")!)))
-
-            const { target } = event.detail.originalEvent
-            const rootEl = dom.getRootMenuEl(scope)
-            if (contains(rootEl, target)) event.preventDefault()
-          },
-          onPointerDownOutside(event) {
-            const { target } = event.detail.originalEvent
-
-            const topLevelEls = dom.getTopLevelEls(scope)
-            const isTrigger = topLevelEls.some((item) => contains(item, target))
-
-            const viewportEl = dom.getViewportEl(scope)
-            const isRootViewport = computed("isRootMenu") && contains(viewportEl, target)
-            if (isTrigger || isRootViewport) event.preventDefault()
-          },
-          onInteractOutside(event) {
-            if (event.defaultPrevented) return
-            send({ type: "CONTENT.DISMISS", src: "interact-outside" })
-          },
-        })
-      },
-
-      trackEscapeKey({ computed, refs, send, scope }) {
-        if (computed("isSubmenu")) return
-        const onKeyDown = (evt: KeyboardEvent) => {
-          if (evt.isComposing) return
-          if (evt.key !== "Escape") return
-          refs.set("wasEscapeClose", true)
-          send({ type: "CONTENT.DISMISS", src: "key.esc" })
-        }
-        return addDomEvent(scope.getDoc(), "keydown", onKeyDown)
-      },
     },
 
     actions: {
-      clearCloseRefs({ refs }) {
-        refs.set("clickCloseRef", null)
-        refs.set("wasEscapeClose", false)
+      setClickCloseValue({ context, event }) {
+        context.set("clickCloseValue", event.value)
       },
-      setPointerMoveOpenedRef({ refs, event }) {
-        refs.get("pointerMoveOpenedRef").set(event.value)
+      clearClickCloseValue({ context }) {
+        context.set("clickCloseValue", null)
       },
-      clearPointerMoveRef({ refs }) {
-        refs.get("pointerMoveOpenedRef").set(null)
+      clearEscapeCloseValue({ context }) {
+        context.set("escapeCloseValue", null)
       },
-      cleanupObservers({ refs }) {
-        refs.get("contentCleanup")?.()
-        refs.get("triggerCleanup")?.()
-        refs.get("tabOrderCleanup")?.()
+      setValue({ context, event }) {
+        context.set("value", event.value)
+      },
+      setPointerMoveOpenedValue({ context, event }) {
+        context.set("pointerMoveOpenedValue", event.value)
+      },
+      clearPointerMoveOpenedValue({ context }) {
+        context.set("pointerMoveOpenedValue", "")
+      },
+      setDelaySkipped({ context }) {
+        context.set("isDelaySkipped", true)
+      },
+      resetValueWithDelay({ refs }) {
+        refs.get("setValue")("")
+      },
+      setValueWithDelay({ refs, event }) {
+        // Cancel any pending setValue operations before setting new value
+        refs.get("setValue")()
+        refs.get("setValue")(event.value)
+      },
+      clearValueWithDelay({ refs }) {
+        refs.get("setValue")()
+      },
+      selectValue: ({ context, event }) => {
+        if (context.get("isSubmenu")) {
+          context.set("value", event.value)
+        } else {
+          // When selecting item we trigger update immediately
+          context.set("previousValue", context.get("value"))
+          context.set("value", event.value)
+        }
       },
-      cleanupAutoResetRef({ refs }) {
-        refs.get("pointerMoveOpenedRef").cleanup()
+      deselectValue: ({ context }) => {
+        if (context.get("isSubmenu")) {
+          context.set("value", "")
+        } else {
+          // When deselecting, clear immediately to prevent overlap
+          context.set("value", "")
+          context.set("previousValue", "")
+        }
       },
 
-      setContentNode({ context, scope, refs }) {
-        const value = context.get("value")
-        const node = value != null ? dom.getContentEl(scope, value) : null
+      syncContentNode({ context, scope, refs, send, computed }) {
+        refs.get("contentResizeObserverCleanup")?.()
+        refs.get("contentDismissableCleanup")?.()
+        refs.get("contentExitCompleteCleanup")?.()
+
+        // If there's a previous value, listen for exitcomplete on its content
+        const previousValue = context.get("previousValue")
+        if (previousValue) {
+          const previousContentEl = dom.getContentEl(scope, previousValue)
+          const viewportEl = dom.getViewportEl(scope)
+          if (previousContentEl) {
+            const onExitComplete = () => context.set("previousValue", "")
+            refs.set(
+              "contentExitCompleteCleanup",
+              callAll(
+                addDomEvent(previousContentEl, "exitcomplete", onExitComplete),
+                addDomEvent(viewportEl, "exitcomplete", onExitComplete),
+              ),
+            )
+          }
+        }
 
-        // set node
-        if (!node) return
-        context.set("contentNode", node)
+        const contentEl = dom.getContentEl(scope, context.get("value"))
 
-        if (!context.get("isViewportRendered")) return
+        if (!contentEl) return
+        context.set("contentNode", contentEl)
 
-        // cleanup
-        refs.get("contentCleanup")?.()
-        const exec = () => {
-          const size = { width: node.offsetWidth, height: node.offsetHeight }
-          context.set("viewportSize", size)
+        /////////////////////////////////////////////////////////////////////////////////////////
+
+        if (context.get("isViewportRendered")) {
+          const contentResizeObserver = dom.trackResizeObserver([contentEl], () => {
+            const contentEl = dom.getContentEl(scope, context.get("value"))
+            if (!contentEl) return
+            context.set("viewportSize", { width: contentEl.offsetWidth, height: contentEl.offsetHeight })
+            send({ type: "VIEWPORT.POSITION" })
+          })
+          refs.set("contentResizeObserverCleanup", contentResizeObserver)
         }
-        refs.set("contentCleanup", dom.trackResizeObserver(node, exec))
+
+        /////////////////////////////////////////////////////////////////////////////////////////
+
+        if (context.get("isSubmenu")) return
+
+        const getContentEl = () => {
+          return dom.getViewportEl(scope) || dom.getContentEl(scope, context.get("value"))
+        }
+
+        const contentDismissable = trackDismissableElement(getContentEl, {
+          defer: true,
+          onFocusOutside(event) {
+            const target = event.detail.target as HTMLElement
+
+            if (
+              target.matches("[data-scope=navigation-menu][data-part=trigger]") ||
+              target.matches("[data-trigger-proxy]")
+            ) {
+              event.preventDefault()
+            }
+
+            if (!event.defaultPrevented) {
+              send({ type: "CONTENT.BLUR" })
+              // Only dismiss content when focus moves outside of the menu
+              if (contains(dom.getRootEl(scope), target)) {
+                event.preventDefault()
+              }
+            }
+          },
+
+          onPointerDownOutside(event) {
+            const target = event.detail.target as HTMLElement
+            if (!event.defaultPrevented) {
+              const isTrigger = dom.getTriggerEls(scope).some((node) => node.contains(target))
+              const isRootViewport = computed("isRootMenu") && contains(dom.getViewportEl(scope), target)
+              if (isTrigger || isRootViewport || !computed("isRootMenu")) {
+                event.preventDefault()
+              }
+            }
+          },
+          onEscapeKeyDown(event) {
+            if (!event.defaultPrevented) {
+              send({ type: "CONTENT.ESCAPE_KEYDOWN" })
+            }
+          },
+          onDismiss() {
+            send({ type: "ROOT.CLOSE" })
+          },
+        })
+
+        refs.set("contentDismissableCleanup", contentDismissable)
       },
 
       setTriggerNode({ context, scope, refs }) {
-        const value = context.get("value")
-        const node = value != null ? dom.getTriggerEl(scope, value) : null
+        refs.get("triggerResizeObserverCleanup")?.()
 
-        // set node
+        const node = dom.getTriggerEl(scope, context.get("value"))
         if (!node) return
+
         context.set("triggerNode", node)
 
-        // cleanup
-        refs.get("triggerCleanup")?.()
         const exec = () => {
           const rect = { x: node.offsetLeft, y: node.offsetTop, width: node.offsetWidth, height: node.offsetHeight }
           context.set("triggerRect", rect)
         }
 
         const indicatorTrackEl = dom.getIndicatorTrackEl(scope)
-        refs.set(
-          "triggerCleanup",
-          callAll(dom.trackResizeObserver(node, exec), dom.trackResizeObserver(indicatorTrackEl, exec)),
-        )
+        const triggerResizeObserver = dom.trackResizeObserver([node, indicatorTrackEl], exec)
+        refs.set("triggerResizeObserverCleanup", triggerResizeObserver)
       },
       syncMotionAttribute({ context, scope, computed }) {
         if (!context.get("isViewportRendered")) return
         if (computed("isSubmenu")) return
         dom.setMotionAttr(scope, context.get("value"), context.get("previousValue"))
       },
-      setClickCloseRef({ refs, event }) {
-        refs.set("clickCloseRef", event.value)
-      },
-      checkViewportNode({ context, scope }) {
-        context.set("isViewportRendered", !!dom.getViewportEl(scope))
-      },
-      setPreviousValue({ context }) {
-        context.set("previousValue", context.get("value"))
-      },
-      clearPreviousValue({ context }) {
-        context.set("previousValue", null)
-      },
-      setValue({ context, event }) {
-        context.set("value", event.value)
-      },
-      setValueOnNextTick({ context, event }) {
+
+      focusFirstTabbableEl({ event, scope, context }) {
         raf(() => {
-          context.set("value", event.value)
+          const value = event.value || context.get("value")
+          const candidates = dom.getTabbableEls(scope, value)
+          const elements = event.side === "start" ? candidates : candidates.reverse()
+          if (elements.length) dom.focusFirst(scope, elements)
         })
       },
-      clearValue({ context }) {
-        context.set("value", null)
-      },
-      focusTopLevelEl({ event, scope }) {
-        const value = event.value
-        if (event.target === "next") dom.getNextTopLevelEl(scope, value)?.focus()
-        else if (event.target === "prev") dom.getPrevTopLevelEl(scope, value)?.focus()
-        else if (event.target === "first") dom.getFirstTopLevelEl(scope)?.focus()
-        else if (event.target === "last") dom.getLastTopLevelEl(scope)?.focus()
-        else dom.getTriggerEl(scope, value)?.focus()
-      },
-      focusLink({ event, scope }) {
-        const value = event.value
-        if (event.target === "next") dom.getNextLinkEl(scope, value, event.node)?.focus()
-        else if (event.target === "prev") dom.getPrevLinkEl(scope, value, event.node)?.focus()
-        else if (event.target === "first") dom.getFirstLinkEl(scope, value)?.focus()
-        else if (event.target === "last") dom.getLastLinkEl(scope, value)?.focus()
-      },
-      focusContent({ event, scope }) {
-        raf(() => {
-          const tabbableEls = dom.getTabbableEls(scope, event.value)
-          tabbableEls[0]?.focus()
-        })
+
+      focusNextLink({ event, scope }) {
+        const activeEl = scope.getActiveElement()
+        const linkEls = dom.getLinkEls(scope, event.value)
+        if (activeEl == null || !linkEls.includes(activeEl)) return
+        const el = navigate(linkEls, activeEl, { key: event.key, loop: false })
+        el?.focus()
       },
-      focusTrigger({ context, scope }) {
-        if (context.get("value") == null) return
-        const contentEl = dom.getContentEl(scope, context.get("value")!)
+
+      focusTrigger({ scope, event, context }) {
+        const value = event.value ?? context.get("value")
+        dom.getTriggerEl(scope, value)?.focus()
+      },
+
+      focusTriggerIfNeeded({ context, event, scope }) {
+        const value = event.value ?? context.get("value")
+        const contentEl = dom.getContentEl(scope, value)
         if (!contains(contentEl, scope.getActiveElement())) return
-        context.get("triggerNode")?.focus()
+        dom.getTriggerEl(scope, value)?.focus()
+      },
+
+      removeFromTabOrder({ event, scope, refs, context }) {
+        const value = event.value ?? context.get("value")
+        const candidates = dom.getTabbableEls(scope, value)
+        if (candidates.length) refs.set("restoreContentTabOrder", dom.removeFromTabOrder(candidates))
       },
       restoreTabOrder({ refs }) {
-        refs.get("tabOrderCleanup")?.()
+        refs.get("restoreContentTabOrder")?.()
       },
-      setParentMenu({ refs, event }) {
+
+      cleanupObservers({ refs }) {
+        refs.get("contentResizeObserverCleanup")?.()
+        refs.get("contentDismissableCleanup")?.()
+        refs.get("triggerResizeObserverCleanup")?.()
+        refs.get("restoreContentTabOrder")?.()
+        refs.get("contentExitCompleteCleanup")?.()
+      },
+
+      setParentMenu({ refs, event, context }) {
         refs.set("parent", event.parent)
+        context.set("isSubmenu", true)
       },
       setChildMenu({ refs, event }) {
         refs.set("children", { ...refs.get("children"), [event.id]: event.value })
       },
-      propagateClose({ refs, prop }) {
-        const menus = Object.values(refs.get("children"))
-        menus.forEach((child) => {
-          child?.send({ type: "ROOT.CLOSE", src: prop("id")! })
-        })
+      closeRootMenu({ refs, send }) {
+        send({ type: "CLOSE" })
+        closeRootMenu({ parent: refs.get("parent") })
+      },
+
+      checkViewportNode({ context, scope }) {
+        context.set("isViewportRendered", !!dom.getViewportEl(scope))
+      },
+
+      setViewportPosition: ({ context, scope }) => {
+        const triggerNode = context.get("triggerNode")
+        const contentNode = context.get("contentNode")
+        const rootNavigationMenu = !context.get("isSubmenu") ? dom.getRootEl(scope) : null
+
+        const viewportEl = dom.getViewportEl(scope)
+        const align = viewportEl?.dataset.align || "center"
+
+        if (contentNode && triggerNode && rootNavigationMenu) {
+          const bodyWidth = document.documentElement.offsetWidth
+          const bodyHeight = document.documentElement.offsetHeight
+          const rootRect = rootNavigationMenu.getBoundingClientRect()
+          const rect = triggerNode.getBoundingClientRect()
+          const { offsetWidth, offsetHeight } = contentNode
+
+          // Find the beginning of the position of the menu item
+          const startPositionLeft = rect.left - rootRect.left
+          const startPositionTop = rect.top - rootRect.top
+
+          // Aligning to specified alignment
+          let x = null
+          let y = null
+          switch (align) {
+            case "start":
+              x = startPositionLeft
+              y = startPositionTop
+              break
+            case "end":
+              x = startPositionLeft - offsetWidth + rect.width
+              y = startPositionTop - offsetHeight + rect.height
+              break
+            default:
+              // center
+              x = startPositionLeft - offsetWidth / 2 + rect.width / 2
+              y = startPositionTop - offsetHeight / 2 + rect.height / 2
+          }
+
+          const screenOffset = 10
+
+          // Do not let go of the left side of the screen
+          if (x + rootRect.left < screenOffset) {
+            x = screenOffset - rootRect.left
+          }
+
+          // Now also check the right side of the screen
+          const rightOffset = x + rootRect.left + offsetWidth
+          if (rightOffset > bodyWidth - screenOffset) {
+            x -= rightOffset - bodyWidth + screenOffset
+
+            // Recheck the left side of the screen
+            if (x < screenOffset - rootRect.left) {
+              // Just set the menu to the full width of the screen
+              x = screenOffset - rootRect.left
+            }
+          }
+
+          // Do not let go of the top side of the screen
+          if (y + rootRect.top < screenOffset) {
+            y = screenOffset - rootRect.top
+          }
+
+          // Now also check the bottom side of the screen
+          const bottomOffset = y + rootRect.top + offsetHeight
+          if (bottomOffset > bodyHeight - screenOffset) {
+            y -= bottomOffset - bodyHeight + screenOffset
+
+            // Recheck the top side of the screen
+            if (y < screenOffset - rootRect.top) {
+              // Just set the menu to the full height of the screen
+              y = screenOffset - rootRect.top
+            }
+          }
+
+          // Possible blurring font with decimal values
+          x = Math.round(x)
+          y = Math.round(y)
+
+          context.set("viewportPosition", { x, y })
+        }
       },
     },
   },
 })
 
-function removeFromTabOrder(nodes: HTMLElement[]) {
-  nodes.forEach((node) => {
-    node.dataset.tabindex = node.getAttribute("tabindex") || ""
-    node.setAttribute("tabindex", "-1")
-  })
-  return () => {
-    nodes.forEach((node) => {
-      if (node.dataset.tabindex == null) return
-      const prevTabIndex = node.dataset.tabindex
-      node.setAttribute("tabindex", prevTabIndex)
-      delete node.dataset.tabindex
-      if (node.getAttribute("tabindex") === "") node.removeAttribute("tabindex")
-    })
+function closeRootMenu(ctx: { parent: NavigationMenuService | null }) {
+  let parent = ctx.parent
+  while (parent && parent.context.get("isSubmenu")) {
+    parent = parent.refs.get("parent")
   }
+  parent?.send({ type: "CLOSE" })
 }
diff --git a/packages/machines/navigation-menu/src/navigation-menu.props.ts b/packages/machines/navigation-menu/src/navigation-menu.props.ts
index 2c9d119ca8..827e1765e6 100644
--- a/packages/machines/navigation-menu/src/navigation-menu.props.ts
+++ b/packages/machines/navigation-menu/src/navigation-menu.props.ts
@@ -15,6 +15,7 @@ export const props = createProps<NavigationMenuProps>()([
   "ids",
   "disableClickTrigger",
   "disableHoverTrigger",
+  "disablePointerLeaveClose",
 ])
 
 export const splitProps = createSplitProps<Partial<NavigationMenuProps>>(props)
diff --git a/packages/machines/navigation-menu/src/navigation-menu.types.ts b/packages/machines/navigation-menu/src/navigation-menu.types.ts
index d1e93489bd..449e8f012d 100644
--- a/packages/machines/navigation-menu/src/navigation-menu.types.ts
+++ b/packages/machines/navigation-menu/src/navigation-menu.types.ts
@@ -4,19 +4,20 @@ import type {
   DirectionProperty,
   Orientation,
   OrientationProperty,
+  Point,
   PropTypes,
   Rect,
   RequiredBy,
   Size,
 } from "@zag-js/types"
-import type { AutoReset } from "./auto-reset"
+import type { DebounceFnReturn } from "./utils/debounce-fn"
 
 /* -----------------------------------------------------------------------------
  * Callback details
  * -----------------------------------------------------------------------------*/
 
 export interface ValueChangeDetails {
-  value: string | null
+  value: string
 }
 
 export type ElementIds = Partial<{
@@ -41,12 +42,12 @@ export interface NavigationMenuProps extends DirectionProperty, CommonProperties
   /**
    * The controlled value of the navigation menu
    */
-  value?: string | null | undefined
+  value?: string | undefined
   /**
    * The default value of the navigation menu.
    * Use when you don't want to control the value of the menu.
    */
-  defaultValue?: string | null | undefined
+  defaultValue?: string | undefined
   /**
    * Function called when the value of the menu changes
    */
@@ -69,35 +70,50 @@ export interface NavigationMenuProps extends DirectionProperty, CommonProperties
    * Whether to disable the hover trigger
    */
   disableHoverTrigger?: boolean | undefined
+  /**
+   * Whether to disable the pointer leave close
+   */
+  disablePointerLeaveClose?: boolean | undefined
 }
 
-type PropsWithDefault = "openDelay" | "closeDelay" | "dir" | "id"
+type PropsWithDefault = "openDelay" | "closeDelay" | "dir" | "id" | "orientation"
 
 export interface NavigationMenuSchema {
   props: RequiredBy<NavigationMenuProps, PropsWithDefault>
-  state: "opening" | "open" | "closing" | "closed"
+  state: "idle"
   computed: {
     isRootMenu: boolean
     isSubmenu: boolean
+    open: boolean
   }
   refs: {
-    contentCleanup: VoidFunction | null
-    triggerCleanup: VoidFunction | null
-    tabOrderCleanup: VoidFunction | null
-    pointerMoveOpenedRef: AutoReset<string | null>
-    clickCloseRef: string | null
-    wasEscapeClose: boolean
+    restoreContentTabOrder: VoidFunction | undefined
+    contentResizeObserverCleanup: VoidFunction | undefined
+    contentDismissableCleanup: VoidFunction | undefined
+    triggerResizeObserverCleanup: VoidFunction | undefined
+    contentExitCompleteCleanup: VoidFunction | undefined
+
     parent: NavigationMenuService | null
     children: Record<string, NavigationMenuService | null>
+    setValue: DebounceFnReturn<(value: string | void) => void>
   }
   context: {
-    value: string | null
-    previousValue: string | null
+    value: string
+    previousValue: string
+
+    pointerMoveOpenedValue: string
+    clickCloseValue: string | null
+    escapeCloseValue: string | null
+
     viewportSize: Size | null
+    viewportPosition: Point | null
     isViewportRendered: boolean
+
     contentNode: HTMLElement | null
     triggerRect: Rect | null
     triggerNode: HTMLElement | null
+    isDelaySkipped: boolean
+    isSubmenu: boolean
   }
   action: string
   effect: string
@@ -146,6 +162,14 @@ export interface LinkProps {
   onSelect?: ((event: CustomEvent) => void) | undefined
 }
 
+export interface ViewportProps {
+  /**
+   * Placement of the viewport for css variables `(--viewport-x, --viewport-y)`.
+   * @defaultValue 'center'
+   */
+  align?: "start" | "center" | "end"
+}
+
 export interface NavigationMenuApi<T extends PropTypes = PropTypes> {
   /**
    * The current value of the menu
@@ -159,6 +183,14 @@ export interface NavigationMenuApi<T extends PropTypes = PropTypes> {
    * Whether the menu is open
    */
   open: boolean
+  /**
+   * Whether the viewport is rendered
+   */
+  isViewportRendered: boolean
+  /**
+   * Gets the viewport node element
+   */
+  getViewportNode: () => HTMLElement | null
   /**
    * Sets the parent of the menu
    */
@@ -178,9 +210,13 @@ export interface NavigationMenuApi<T extends PropTypes = PropTypes> {
   getIndicatorTrackProps: () => T["element"]
   getIndicatorProps: () => T["element"]
   getArrowProps: (props?: ArrowProps) => T["element"]
+
   getTriggerProps: (props: ItemProps) => T["button"]
+  getTriggerProxyProps: (props: ItemProps) => T["element"]
+  getViewportProxyProps: (props: ItemProps) => T["element"]
+
   getLinkProps: (props: LinkProps) => T["element"]
   getContentProps: (props: LinkProps) => T["element"]
-  getViewportPositionerProps: () => T["element"]
-  getViewportProps: () => T["element"]
+  getViewportPositionerProps: (props?: ViewportProps) => T["element"]
+  getViewportProps: (props?: ViewportProps) => T["element"]
 }
diff --git a/packages/machines/navigation-menu/src/utils/auto-reset.ts b/packages/machines/navigation-menu/src/utils/auto-reset.ts
new file mode 100644
index 0000000000..47d5f37c11
--- /dev/null
+++ b/packages/machines/navigation-menu/src/utils/auto-reset.ts
@@ -0,0 +1,30 @@
+import type { Bindable, BindableFn, BindableParams } from "@zag-js/core"
+
+export function autoReset<T>(
+  bindable: BindableFn,
+  props: () => BindableParams<T> & { resetAfter: number },
+): Bindable<T> {
+  const value = bindable(props)
+
+  const timer = bindable.ref<NodeJS.Timeout | undefined>(undefined)
+
+  const resetValue = () =>
+    setTimeout(() => {
+      value.set(value.initial as T)
+    }, props().resetAfter)
+
+  bindable.cleanup(() => {
+    if (timer.get()) clearTimeout(timer.get()!)
+    timer.set(undefined)
+  })
+
+  return {
+    ...value,
+    set(valueOrFn) {
+      value.set(valueOrFn)
+      const currentTimer = timer.get()
+      if (currentTimer) clearTimeout(currentTimer)
+      timer.set(resetValue())
+    },
+  }
+}
diff --git a/packages/machines/navigation-menu/src/utils/debounce-fn.ts b/packages/machines/navigation-menu/src/utils/debounce-fn.ts
new file mode 100644
index 0000000000..3a9205eb96
--- /dev/null
+++ b/packages/machines/navigation-menu/src/utils/debounce-fn.ts
@@ -0,0 +1,113 @@
+import { noop } from "@zag-js/utils"
+
+type Awaited<T> = T extends null | undefined
+  ? T
+  : T extends object & { then: (onfulfilled: infer F, ...args: infer _) => any }
+    ? F extends (value: infer V, ...args: infer _) => any
+      ? Awaited<V>
+      : never
+    : T
+type Promisify<T> = Promise<Awaited<T>>
+type PromisifyFn<T extends AnyFn> = (...args: ArgumentsType<T>) => Promisify<ReturnType<T>>
+type AnyFn = (...args: any[]) => any
+type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never
+type FunctionArgs<Args extends any[] = any[], Return = void> = (...args: Args) => Return
+type ValueOrGetter<T> = T | (() => T)
+type TimerHandle = ReturnType<typeof setTimeout> | undefined
+
+interface FunctionWrapperOptions<Args extends any[] = any[], This = any> {
+  fn: FunctionArgs<Args, This>
+  args: Args
+  thisArg: This
+}
+
+type EventFilter<Args extends any[] = any[], This = any, Invoke extends AnyFn = AnyFn> = (
+  invoke: Invoke,
+  options: FunctionWrapperOptions<Args, This>,
+) => ReturnType<Invoke> | Promisify<ReturnType<Invoke>>
+
+export interface DebounceFilterOptions {
+  /**
+   * The maximum time allowed to be delayed before it's invoked.
+   * In milliseconds.
+   */
+  maxWait?: ValueOrGetter<number>
+
+  /**
+   * Whether to reject the last call if it's been cancel.
+   *
+   * @default false
+   */
+  rejectOnCancel?: boolean
+}
+
+function createFilterWrapper<T extends AnyFn>(filter: EventFilter, fn: T) {
+  function wrapper(this: any, ...args: ArgumentsType<T>) {
+    return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
+      Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args }))
+        .then(resolve)
+        .catch(reject)
+    })
+  }
+
+  return wrapper
+}
+
+function debounceFilter(ms: ValueOrGetter<number>, options: DebounceFilterOptions = {}) {
+  let timer: TimerHandle
+  let maxTimer: TimerHandle
+  let lastRejector: AnyFn = noop
+
+  const _clearTimeout = (timer: TimerHandle) => {
+    clearTimeout(timer)
+    lastRejector()
+    lastRejector = noop
+  }
+
+  let lastInvoker: () => void
+
+  const filter: EventFilter = (invoke) => {
+    const duration = typeof ms === "function" ? ms() : ms
+    const maxDuration = typeof options.maxWait === "function" ? options.maxWait() : options.maxWait
+
+    if (timer) _clearTimeout(timer)
+
+    if (duration <= 0 || (maxDuration !== undefined && maxDuration <= 0)) {
+      if (maxTimer) {
+        _clearTimeout(maxTimer)
+        maxTimer = undefined
+      }
+      return Promise.resolve(invoke())
+    }
+
+    return new Promise((resolve, reject) => {
+      lastRejector = options.rejectOnCancel ? reject : resolve
+      lastInvoker = invoke
+      if (maxDuration && !maxTimer) {
+        maxTimer = setTimeout(() => {
+          if (timer) _clearTimeout(timer)
+          maxTimer = undefined
+          resolve(lastInvoker())
+        }, maxDuration)
+      }
+
+      timer = setTimeout(() => {
+        if (maxTimer) _clearTimeout(maxTimer)
+        maxTimer = undefined
+        resolve(invoke())
+      }, duration)
+    })
+  }
+
+  return filter
+}
+
+export type DebounceFnReturn<T extends FunctionArgs> = PromisifyFn<T>
+
+export function debounceFn<T extends FunctionArgs>(
+  fn: T,
+  ms: ValueOrGetter<number>,
+  options: DebounceFilterOptions = {},
+): DebounceFnReturn<T> {
+  return createFilterWrapper(debounceFilter(ms, options), fn)
+}
diff --git a/packages/machines/presence/src/presence.machine.ts b/packages/machines/presence/src/presence.machine.ts
index a31c0181e0..e0730505aa 100644
--- a/packages/machines/presence/src/presence.machine.ts
+++ b/packages/machines/presence/src/presence.machine.ts
@@ -1,5 +1,5 @@
-import { getComputedStyle, getEventTarget, nextTick, raf, setStyle } from "@zag-js/dom-query"
 import { createMachine } from "@zag-js/core"
+import { getComputedStyle, getEventTarget, getWindow, nextTick, raf, setStyle } from "@zag-js/dom-query"
 import type { PresenceSchema } from "./presence.types"
 
 export const machine = createMachine<PresenceSchema>({
@@ -95,8 +95,16 @@ export const machine = createMachine<PresenceSchema>({
         context.set("initial", false)
       },
 
-      invokeOnExitComplete: ({ prop }) => {
+      invokeOnExitComplete: ({ prop, refs }) => {
         prop("onExitComplete")?.()
+
+        // Emit exitcomplete event on the node
+        const node = refs.get("node")
+        if (!node) return
+
+        const win = getWindow(node)
+        const event = new win.CustomEvent("exitcomplete", { bubbles: false })
+        node.dispatchEvent(event)
       },
 
       setupNode: ({ refs, event }) => {
diff --git a/packages/utilities/dom-query/src/event.ts b/packages/utilities/dom-query/src/event.ts
index 313c832e0e..6b944d7944 100644
--- a/packages/utilities/dom-query/src/event.ts
+++ b/packages/utilities/dom-query/src/event.ts
@@ -143,7 +143,7 @@ interface DOMEventMap extends DocumentEventMap, WindowEventMap, HTMLElementEvent
 
 export const addDomEvent = <K extends keyof DOMEventMap>(
   target: MaybeFn<EventTarget | null>,
-  eventName: K,
+  eventName: K | (string & {}),
   handler: (event: DOMEventMap[K]) => void,
   options?: boolean | AddEventListenerOptions,
 ) => {
diff --git a/packages/utilities/dom-query/src/navigate.ts b/packages/utilities/dom-query/src/navigate.ts
index 4a1715e293..70d6d476ba 100644
--- a/packages/utilities/dom-query/src/navigate.ts
+++ b/packages/utilities/dom-query/src/navigate.ts
@@ -2,6 +2,54 @@ import { getWindow } from "./node"
 import { isFirefox } from "./platform"
 import { queueBeforeEvent } from "./raf"
 
+export interface NavigateOptions {
+  key?: string
+  orientation?: "both" | "vertical" | "horizontal"
+  loop?: boolean
+  dir?: "ltr" | "rtl"
+}
+
+export function navigate<T extends HTMLElement>(
+  items: T[],
+  current: T | null,
+  options: NavigateOptions = {},
+): T | null {
+  if (!current) return null
+
+  const { orientation = "both", loop = true, dir = "ltr", key } = options
+
+  if (!items.length || !key) return null
+  const isVertical = key === "ArrowUp" || key === "ArrowDown"
+  const isHorizontal = key === "ArrowLeft" || key === "ArrowRight"
+
+  if (!isVertical && !isHorizontal && key !== "Home" && key !== "End") return null
+  if ((orientation === "vertical" && isHorizontal) || (orientation === "horizontal" && isVertical)) return null
+
+  if (key === "Home") return items[0] || null
+  if (key === "End") return items[items.length - 1] || null
+
+  const idx = items.indexOf(current)
+  if (idx === -1) return null
+
+  let isForward: boolean
+  if (orientation === "both") {
+    // When orientation is both, treat ArrowDown/Right as forward and ArrowUp/Left as backward
+    isForward = key === "ArrowDown" || (dir === "ltr" ? key === "ArrowRight" : key === "ArrowLeft")
+  } else {
+    isForward = isVertical ? key === "ArrowDown" : dir === "ltr" ? key === "ArrowRight" : key === "ArrowLeft"
+  }
+
+  const nextIdx = isForward
+    ? loop
+      ? (idx + 1) % items.length
+      : Math.min(idx + 1, items.length - 1)
+    : loop
+      ? (idx - 1 + items.length) % items.length
+      : Math.max(0, idx - 1)
+
+  return items[nextIdx] || null
+}
+
 export function clickIfLink(el: HTMLAnchorElement) {
   const click = () => {
     const win = getWindow(el)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72dfcf8cbb..9b096c73cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2396,12 +2396,12 @@ importers:
       '@zag-js/core':
         specifier: workspace:*
         version: link:../../core
+      '@zag-js/dismissable':
+        specifier: workspace:*
+        version: link:../../utilities/dismissable
       '@zag-js/dom-query':
         specifier: workspace:*
         version: link:../../utilities/dom-query
-      '@zag-js/interact-outside':
-        specifier: workspace:*
-        version: link:../../utilities/interact-outside
       '@zag-js/types':
         specifier: workspace:*
         version: link:../../types
diff --git a/shared/src/css/keyframes.css b/shared/src/css/keyframes.css
index d7644003ea..9a5d75c743 100644
--- a/shared/src/css/keyframes.css
+++ b/shared/src/css/keyframes.css
@@ -65,3 +65,21 @@
     transform: scaleX(1);
   }
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/shared/src/css/navigation-menu-keyframes.css b/shared/src/css/navigation-menu-keyframes.css
index 62e6fd35b4..7ed1375622 100644
--- a/shared/src/css/navigation-menu-keyframes.css
+++ b/shared/src/css/navigation-menu-keyframes.css
@@ -44,22 +44,22 @@
 
 @keyframes nav-menu-scale-in {
   from {
-    transform: scale(0.9);
+    transform: rotateX(-30deg) scale(0.9);
     opacity: 0;
   }
   to {
-    transform: scale(1);
+    transform: rotateX(0deg) scale(1);
     opacity: 1;
   }
 }
 
 @keyframes nav-menu-scale-out {
   from {
-    transform: scale(1);
+    transform: rotateX(0deg) scale(1);
     opacity: 1;
   }
   to {
-    transform: scale(0.95);
+    transform: rotateX(-10deg) scale(0.95);
     opacity: 0;
   }
 }
diff --git a/shared/src/css/navigation-menu-viewport.css b/shared/src/css/navigation-menu-viewport.css
index d7be31c570..9f129f5468 100644
--- a/shared/src/css/navigation-menu-viewport.css
+++ b/shared/src/css/navigation-menu-viewport.css
@@ -52,6 +52,7 @@
     display: grid;
     gap: 20px;
     padding: 40px;
+    will-change: transform, opacity;
 
     &[data-motion="from-start"] {
       animation: nav-menu-from-left 250ms ease;
@@ -97,25 +98,28 @@
     padding: 40px;
     background-color: white;
     transition:
-      width,
-      height,
-      300ms ease;
-    width: var(--viewport-width);
+      width 300ms ease,
+      height 300ms ease;
+    width: 100%;
     height: var(--viewport-height);
     transform-origin: top center;
     overflow: hidden;
     margin-top: 15px;
     border-radius: 8px;
-    box-shadow:
-      0 50px 100px -20px rgba(50, 50, 93, 0.25),
-      0 30px 60px -30px rgba(0, 0, 0, 0.3);
+    box-shadow: 
+      hsl(206 22% 7% / 35%) 0px 10px 38px -10px, 
+      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+    @media (min-width: 600px) {
+      width: var(--viewport-width);
+    }
 
     &[data-state="open"] {
-      animation: nav-menu-scale-in 300ms ease;
+      animation: nav-menu-scale-in 200ms ease;
     }
 
     &[data-state="closed"] {
-      animation: nav-menu-scale-out 300ms ease;
+      animation: nav-menu-scale-out 200ms ease;
     }
   }