code · pull · Feb 18, 2026 · Feb 18, 2026 · Feb 18, 2026 · Feb 18, 2026
diff --git a/.changeset/fix-toast-typescript-constraint.md b/.changeset/fix-toast-typescript-constraint.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/toast": patch
+---
+
+Fix TypeScript compilation errors when building projects that use `@zag-js/toast`.
diff --git a/.changeset/twenty-taxis-feel.md b/.changeset/twenty-taxis-feel.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/listbox": patch
+---
+
+Fix listbox dom ids.
diff --git a/e2e/listbox.e2e.ts b/e2e/listbox.e2e.ts
@@ -27,4 +27,11 @@ test.describe("listbox", () => {
     await I.pressKey("ArrowUp")
     await I.seeItemIsHighlighted("Zimbabwe")
   })
+
+  test.only("should scroll selected option into view", async () => {
+    await I.tabToContent()
+    await I.pressKey("End")
+    await I.seeItemIsHighlighted("Zimbabwe")
+    await I.seeItemInViewport("Zimbabwe")
+  })
 })
diff --git a/e2e/models/listbox.model.ts b/e2e/models/listbox.model.ts
@@ -61,7 +61,8 @@ export class ListboxModel extends Model {
     return expect(this.content.locator(`[data-selected]`).all()).toHaveLength(0)
   }
 
-  seeItemInViewport(value: string) {
-    return isInViewport(this.content, this.getItem(value))
+  seeItemInViewport = async (text: string) => {
+    const item = this.getItem(text)
+    expect(await isInViewport(this.content, item)).toBe(true)
   }
 }
diff --git a/examples/next-ts/pages/menu-overflow.tsx b/examples/next-ts/pages/menu-overflow.tsx
@@ -1,5 +1,5 @@
 import * as menu from "@zag-js/menu"
-import { mergeProps, normalizeProps, useMachine } from "@zag-js/react"
+import { mergeProps, normalizeProps, Portal, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
 const items = Array.from({ length: 40 }, (_, i) => ({
@@ -11,21 +11,30 @@ export default function Page() {
   const service = useMachine(menu.machine, { id: useId() })
   const api = menu.connect(service, normalizeProps)
   return (
-    <main>
+    <main style={{ padding: 40 }}>
+      <p style={{ marginBottom: 16, color: "#666" }}>
+        Use keyboard: open with Enter/Space, then ArrowDown to navigate. The highlighted item should scroll into view.
+      </p>
       <div>
         <button {...api.getTriggerProps()}>
           Actions <span {...api.getIndicatorProps()}>▾</span>
         </button>
         {api.open && (
-          <div {...api.getPositionerProps()}>
-            <ul {...mergeProps(api.getContentProps(), { style: { maxHeight: "300px", overflowY: "auto" } })}>
-              {items.map((item) => (
-                <li key={item.value} {...api.getItemProps({ value: item.value })}>
-                  {item.label}
-                </li>
-              ))}
-            </ul>
-          </div>
+          <Portal>
+            <div {...api.getPositionerProps()}>
+              <ul
+                {...mergeProps(api.getContentProps(), {
+                  style: { maxHeight: "200px", overflowY: "auto" as const },
+                })}
+              >
+                {items.map((item) => (
+                  <li key={item.value} {...api.getItemProps({ value: item.value })}>
+                    {item.label}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </Portal>
         )}
       </div>
     </main>

diff --git a/examples/nuxt-ts/app/pages/drawer.vue b/examples/nuxt-ts/app/pages/drawer.vue
@@ -25,7 +25,7 @@ const api = computed(() => drawer.connect(service, normalizeProps))
         <div :class="styles.grabber" v-bind="api.getGrabberProps()">
           <div :class="styles.grabberIndicator" v-bind="api.getGrabberIndicatorProps()"></div>
         </div>
-        <div>Drawer</div>
+        <div v-bind="api.getTitleProps()">Drawer</div>
         <div data-no-drag="true" :class="styles.noDrag">No drag area</div>
         <div :class="styles.scrollable">
           <div v-for="(_element, index) in Array.from({ length: 100 })" :key="index">Item {{ index }}</div>

diff --git a/examples/solid-ts/src/routes/drawer.tsx b/examples/solid-ts/src/routes/drawer.tsx
@@ -31,7 +31,7 @@ export default function Page() {
             <div class={styles.grabber} {...api().getGrabberProps()}>
               <div class={styles.grabberIndicator} {...api().getGrabberIndicatorProps()} />
             </div>
-            <div>Drawer</div>
+            <div {...api().getTitleProps()}>Drawer</div>
             <div data-no-drag="true" class={styles.noDrag}>
               No drag area
             </div>

diff --git a/packages/machines/cascade-select/package.json b/packages/machines/cascade-select/package.json
@@ -32,6 +32,7 @@
         "@zag-js/core": "workspace:*",
         "@zag-js/dismissable": "workspace:*",
         "@zag-js/dom-query": "workspace:*",
+        "@zag-js/focus-visible": "workspace:*",
         "@zag-js/popper": "workspace:*",
         "@zag-js/rect-utils": "workspace:*",
         "@zag-js/types": "workspace:*",

diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -8,6 +8,7 @@ import {
   dispatchInputValueEvent,
   setElementValue,
 } from "@zag-js/dom-query"
+import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible"
 import { getPlacement, type Placement } from "@zag-js/popper"
 import type { Point } from "@zag-js/rect-utils"
 import { last, isEmpty, isEqual } from "@zag-js/utils"
@@ -295,7 +296,7 @@ export const machine = createMachine<CascadeSelectSchema>({
     open: {
       tags: ["open"],
       exit: ["clearHighlightedValue", "scrollContentToTop"],
-      effects: ["trackDismissableElement", "computePlacement", "scrollToHighlightedItems"],
+      effects: ["trackDismissableElement", "trackFocusVisible", "computePlacement", "scrollToHighlightedItems"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -592,6 +593,9 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         })
       },
+      trackFocusVisible({ scope }) {
+        return trackFocusVisible({ root: scope.getRootNode?.() })
+      },
       trackDismissableElement({ scope, send, prop }) {
         const contentEl = () => dom.getContentEl(scope)
         let restoreFocus = true
@@ -620,16 +624,17 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         })
       },
-      scrollToHighlightedItems({ context, prop, scope, event }) {
+      scrollToHighlightedItems({ context, prop, scope }) {
         let cleanups: VoidFunction[] = []
 
         const exec = (immediate: boolean) => {
           const highlightedValue = context.get("highlightedValue")
           const highlightedIndexPath = context.get("highlightedIndexPath")
           if (!highlightedIndexPath.length) return
 
-          // Don't scroll into view if we're using the pointer
-          if (event.current().type.includes("POINTER")) return
+          // don't scroll into view if we're using the pointer (or null when focus-trap autofocuses)
+          const modality = getInteractionModality()
+          if (modality === "pointer") return
 
           const listEls = dom.getListEls(scope)
           listEls.forEach((listEl, index) => {
@@ -651,7 +656,10 @@ export const machine = createMachine<CascadeSelectSchema>({
           })
         }
 
-        raf(() => exec(true))
+        raf(() => {
+          setInteractionModality("virtual")
+          exec(true)
+        })
 
         const rafCleanup = raf(() => exec(true))
         cleanups.push(rafCleanup)

diff --git a/packages/machines/combobox/package.json b/packages/machines/combobox/package.json
@@ -32,9 +32,10 @@
     "@zag-js/core": "workspace:*",
     "@zag-js/dismissable": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
-    "@zag-js/utils": "workspace:*",
+    "@zag-js/focus-visible": "workspace:*",
     "@zag-js/popper": "workspace:*",
-    "@zag-js/types": "workspace:*"
+    "@zag-js/types": "workspace:*",
+    "@zag-js/utils": "workspace:*"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts
@@ -1,6 +1,7 @@
 import { setup } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { clickIfLink, nextTick, observeAttributes, raf, scrollIntoView, setCaretToEnd } from "@zag-js/dom-query"
+import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible"
 import { getPlacement } from "@zag-js/popper"
 import { addOrRemove, isBoolean, isEqual, match, remove } from "@zag-js/utils"
 import { collection } from "./combobox.collection"
@@ -349,7 +350,7 @@ export const machine = createMachine({
     interacting: {
       tags: ["open", "focused"],
       entry: ["setInitialFocus"],
-      effects: ["scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
+      effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -525,7 +526,7 @@ export const machine = createMachine({
 
     suggesting: {
       tags: ["open", "focused"],
-      effects: ["trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
+      effects: ["trackFocusVisible", "trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
       entry: ["setInitialFocus"],
       on: {
         "CONTROLLED.CLOSE": [
@@ -710,6 +711,9 @@ export const machine = createMachine({
     },
 
     effects: {
+      trackFocusVisible({ scope }) {
+        return trackFocusVisible({ root: scope.getRootNode?.() })
+      },
       trackDismissableLayer({ send, prop, scope }) {
         if (prop("disableLayer")) return
         const contentEl = () => dom.getContentEl(scope)
@@ -743,15 +747,18 @@ export const machine = createMachine({
           },
         })
       },
-      scrollToHighlightedItem({ context, prop, scope, event }) {
+      scrollToHighlightedItem({ context, prop, scope }) {
         const inputEl = dom.getInputEl(scope)
 
         let cleanups: VoidFunction[] = []
 
         const exec = (immediate: boolean) => {
-          const pointer = event.current().type.includes("POINTER")
+          // don't scroll into view if we're using the pointer (or null when focus-trap autofocuses)
+          const modality = getInteractionModality()
+          if (modality === "pointer") return
+
           const highlightedValue = context.get("highlightedValue")
-          if (pointer || !highlightedValue) return
+          if (!highlightedValue) return
 
           const contentEl = dom.getContentEl(scope)
 
@@ -773,7 +780,10 @@ export const machine = createMachine({
           cleanups.push(raf_cleanup)
         }
 
-        const rafCleanup = raf(() => exec(true))
+        const rafCleanup = raf(() => {
+          setInteractionModality("virtual")
+          exec(true)
+        })
         cleanups.push(rafCleanup)
 
         const observerCleanup = observeAttributes(inputEl, {

diff --git a/packages/machines/listbox/src/listbox.dom.ts b/packages/machines/listbox/src/listbox.dom.ts
@@ -1,13 +1,13 @@
 import type { Scope } from "@zag-js/core"
 
-export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `select:${ctx.id}`
-export const getContentId = (ctx: Scope) => ctx.ids?.content ?? `select:${ctx.id}:content`
-export const getLabelId = (ctx: Scope) => ctx.ids?.label ?? `select:${ctx.id}:label`
-export const getItemId = (ctx: Scope, id: string | number) => ctx.ids?.item?.(id) ?? `select:${ctx.id}:option:${id}`
+export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `listbox:${ctx.id}`
+export const getContentId = (ctx: Scope) => ctx.ids?.content ?? `listbox:${ctx.id}:content`
+export const getLabelId = (ctx: Scope) => ctx.ids?.label ?? `listbox:${ctx.id}:label`
+export const getItemId = (ctx: Scope, id: string | number) => ctx.ids?.item?.(id) ?? `listbox:${ctx.id}:item:${id}`
 export const getItemGroupId = (ctx: Scope, id: string | number) =>
-  ctx.ids?.itemGroup?.(id) ?? `select:${ctx.id}:optgroup:${id}`
+  ctx.ids?.itemGroup?.(id) ?? `listbox:${ctx.id}:item-group:${id}`
 export const getItemGroupLabelId = (ctx: Scope, id: string | number) =>
-  ctx.ids?.itemGroupLabel?.(id) ?? `select:${ctx.id}:optgroup-label:${id}`
+  ctx.ids?.itemGroupLabel?.(id) ?? `listbox:${ctx.id}:item-group-label:${id}`
 
 export const getContentEl = (ctx: Scope) => ctx.getById(getContentId(ctx))
 export const getItemEl = (ctx: Scope, id: string | number) => ctx.getById(getItemId(ctx, id))
diff --git a/packages/machines/listbox/src/listbox.machine.ts b/packages/machines/listbox/src/listbox.machine.ts
@@ -2,7 +2,7 @@ import type { CollectionItem } from "@zag-js/collection"
 import { Selection } from "@zag-js/collection"
 import { setup } from "@zag-js/core"
 import { getByTypeahead, observeAttributes, raf, scrollIntoView } from "@zag-js/dom-query"
-import { getInteractionModality, trackFocusVisible as trackFocusVisibleFn } from "@zag-js/focus-visible"
+import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible"
 import { isEqual } from "@zag-js/utils"
 import { collection } from "./listbox.collection"
 import * as dom from "./listbox.dom"
@@ -173,7 +173,7 @@ export const machine = createMachine({
 
     effects: {
       trackFocusVisible: ({ scope, refs }) => {
-        return trackFocusVisibleFn({
+        return trackFocusVisible({
           root: scope.getRootNode?.(),
           onChange(details) {
             refs.set("focusVisible", details.isFocusVisible)
@@ -189,7 +189,7 @@ export const machine = createMachine({
           const modality = getInteractionModality()
 
           // don't scroll into view if we're using the pointer
-          if (modality !== "keyboard") return
+          if (modality === "pointer") return
 
           const contentEl = dom.getContentEl(scope)
 
@@ -210,7 +210,10 @@ export const machine = createMachine({
           scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" })
         }
 
-        raf(() => exec(true))
+        raf(() => {
+          setInteractionModality("virtual")
+          exec(true)
+        })
 
         const contentEl = () => dom.getContentEl(scope)
         return observeAttributes(contentEl, {

diff --git a/packages/machines/menu/package.json b/packages/machines/menu/package.json
@@ -28,12 +28,13 @@
   "dependencies": {
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/core": "workspace:*",
-    "@zag-js/dom-query": "workspace:*",
-    "@zag-js/rect-utils": "workspace:*",
-    "@zag-js/utils": "workspace:*",
     "@zag-js/dismissable": "workspace:*",
+    "@zag-js/dom-query": "workspace:*",
+    "@zag-js/focus-visible": "workspace:*",
     "@zag-js/popper": "workspace:*",
-    "@zag-js/types": "workspace:*"
+    "@zag-js/rect-utils": "workspace:*",
+    "@zag-js/types": "workspace:*",
+    "@zag-js/utils": "workspace:*"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts
@@ -13,6 +13,7 @@ import {
   raf,
   scrollIntoView,
 } from "@zag-js/dom-query"
+import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible"
 import { getPlacement, getPlacementSide, type Placement } from "@zag-js/popper"
 import { getElementPolygon, isPointInPolygon, type Point } from "@zag-js/rect-utils"
 import { isEqual } from "@zag-js/utils"
@@ -381,7 +382,7 @@ export const machine = createMachine<MenuSchema>({
 
     open: {
       tags: ["open"],
-      effects: ["trackInteractOutside", "trackPositioning", "scrollToHighlightedItem"],
+      effects: ["trackInteractOutside", "trackFocusVisible", "trackPositioning", "scrollToHighlightedItem"],
       entry: ["focusMenu", "resumePointer"],
       on: {
         "CONTROLLED.CLOSE": [
@@ -544,6 +545,9 @@ export const machine = createMachine<MenuSchema>({
         }, 700)
         return () => clearTimeout(timer)
       },
+      trackFocusVisible({ scope }) {
+        return trackFocusVisible({ root: scope.getRootNode?.() })
+      },
       trackPositioning({ context, prop, scope, refs }) {
         if (!!dom.getContextTriggerEl(scope)) return
         const positioning = {
@@ -622,16 +626,21 @@ export const machine = createMachine<MenuSchema>({
           }
         })
       },
-      scrollToHighlightedItem({ event, scope, computed }) {
+      scrollToHighlightedItem({ scope, computed }) {
         const exec = () => {
-          if (event.current().type.startsWith("ITEM_POINTER")) return
+          // don't scroll into view if we're using the pointer (or null when focus-trap autofocuses)
+          const modality = getInteractionModality()
+          if (modality === "pointer") return
 
           const itemEl = scope.getById(computed("highlightedId")!)
           const contentEl = dom.getContentEl(scope)
 
           scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" })
         }
-        raf(() => exec())
+        raf(() => {
+          setInteractionModality("virtual")
+          exec()
+        })
 
         const contentEl = () => dom.getContentEl(scope)
         return observeAttributes(contentEl, {