+ This drawer has open: true without onOpenChange. Swiping, escape, and outside click
+ should have no effect.
+
+ Try swiping down, pressing Escape, or clicking outside. This drawer should never close. +
+Standard controlled mode. Open state is managed by React.
+ ++ This drawer is fully controlled. Swipe, escape, and outside click all work. +
++ Open: {String(open)} +
+ ++ Try scrolling the image carousel horizontally. It should scroll without triggering the drawer drag. +
+ + {/* Horizontal scrollable content inside a vertical-swipe drawer */} ++ This area stays interactive while the drawer is open. Try typing below: +
+ ++ No backdrop, no focus trap, no scroll lock. The page behind stays fully interactive. Close with the button, + drag to dismiss, or Escape. +
++ Drag the slider horizontally. The sheet should not move or steal the gesture while adjusting the range. +
+Swipe up from the bottom edge to open this drawer.
+ +
+ This drawer has open: true without onOpenChange. Swiping, escape, and outside click should
+ have no effect.
+
+ Try swiping down, pressing Escape, or clicking outside. This drawer should never close. +
+Standard controlled mode. Open state is managed by Vue.
+ ++ This drawer is fully controlled. Swipe, escape, and outside click all work. +
++ Open: {{ String(isOpen) }} +
+ +(props: P) => ComputedRef (props: Partial ) => ComputedRef >
}
export const useControls = (props: P): ComputedRef (props: Partial ): ComputedRef
+ Try scrolling the image carousel horizontally. It should scroll without triggering the drawer drag.
+
+ Open and drag the drawer. The background and app shell use stack snapshot props so styles stay coordinated.
+
+ Nested drawers can be styled to stack, while each drawer remains independently focus managed.
+ Review sign-in activity and update your security preferences. This drawer is taller to demonstrate variable-height stacking.
+ This area stays interactive while the drawer is open. Try typing below:
+
+ No backdrop, no focus trap, no scroll lock. The page behind stays fully interactive. Close with the button,
+ drag to dismiss, or Escape.
+
+ Drag the slider horizontally. The sheet should not move or steal the gesture while adjusting the range.
+ Swipe up from the bottom edge to open this drawer.
+ This drawer has
+ Try swiping down, pressing Escape, or clicking outside. This drawer should never close.
+ Standard controlled mode. Open state is managed by Solid.
+ This drawer is fully controlled. Swipe, escape, and outside click all work.
+
+ Open: {String(open())}
+
+ Try scrolling the image carousel horizontally. It should scroll without triggering the drawer drag.
+
+ Open and drag the drawer. The background and app shell use stack snapshot props so styles stay coordinated.
+
+ Nested drawers can be styled to stack, while each drawer remains independently focus managed.
+ Review sign-in activity and update your security preferences. This drawer is taller to demonstrate variable-height stacking.
+ This area stays interactive while the drawer is open. Try typing below:
+
+ No backdrop, no focus trap, no scroll lock. The page behind stays fully interactive. Close with the button,
+ drag to dismiss, or Escape.
+
+ Drag the slider horizontally. The sheet should not move or steal the gesture while adjusting the range.
+ Swipe up from the bottom edge to open this drawer.
+ This drawer has
+ Try swiping down, pressing Escape, or clicking outside. This drawer should never close.
+ Standard controlled mode. Open state is managed by Svelte.
+ This drawer is fully controlled. Swipe, escape, and outside click all work.
+
+ Open: {String(open)}
+
+ Try scrolling the image carousel horizontally. It should scroll without triggering the drawer drag.
+
+ Open and drag the drawer. The background and app shell use stack snapshot props so styles stay coordinated.
+
+ Nested drawers can be styled to stack, while each drawer remains independently focus managed.
+ Review sign-in activity and update your security preferences. This drawer is taller to demonstrate variable-height stacking.
+ This area stays interactive while the drawer is open. Try typing below:
+
+ No backdrop, no focus trap, no scroll lock. The page behind stays fully interactive. Close with the button, drag
+ to dismiss, or Escape.
+
+ Drag the slider horizontally. The sheet should not move or steal the gesture while adjusting the range.
+ Swipe up from the bottom edge to open this drawer.
+
+
+
+
+ Profile Actions
+
+
+
+
+
+
+
+
+
+
-
+
+
@@ -30,12 +31,12 @@ const api = computed(() => drawer.connect(service, normalizeProps))
- Item {{ index }}
+
+
+
+
+
+
+
+
+
+ Cross-Axis Scroll
+
+
+
+
+ {{ i }}
+
+
+
+
+ Item {{ index }}
+
+
+
+
+
+
+ Drawer
+ No drag area
+
+
+ Item {{ index }}
+
+
+
+ Drawer Indent Background
+
+
+
+
+
+ Drawer
+
+
+ Item {{ index }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Security
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Advanced
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Non-modal Drawer
+
+
+
+
+
+
+
+
+ Drawer + native range
+
+
+
+
+
+
+
+
+ Item {{ index }}
+
+
+
+
+
+
+ Drawer
+
+
+ Item {{ index }}
+
+
+
+
+
+
+ Profile Actions
+
+
+
+
+
+
+
+
+
+
+
-
+
+
@@ -38,12 +39,12 @@ export default function Page() {
- Item {index()}}
+
+ )
+}
+
+function ControlledDrawer() {
+ const id = createUniqueId()
+ const [open, setOpen] = createSignal(false)
+ const service = useMachine(drawer.machine, () => ({
+ id,
+ open: open(),
+ onOpenChange({ open: next }) {
+ setOpen(next)
+ },
+ }))
+ const api = createMemo(() => drawer.connect(service, normalizeProps))
+
+ return (
+ Always Open (no onOpenChange)
+ open: true without onOpenChange. Swiping, escape, and outside click
+ should have no effect.
+
+
+
+
+
+ Always Open
+
+
+ )
+}
+
+export default function Page() {
+ const [scenario, setScenario] = createSignal<"always-open" | "controlled">("controlled")
+
+ return (
+ Controlled (open + onOpenChange)
+
+
+
+
+
+ Controlled Drawer
+
+
+
+
+
+
+
+
+
+
+ Cross-Axis Scroll
+
+
+
+
+ {i() + 1}
+
+ )}
+
+
+ Item {index()}}
+
-
diff --git a/examples/solid-ts/src/routes/drawer/draggable-false.tsx b/examples/solid-ts/src/routes/drawer/draggable-false.tsx
new file mode 100644
index 0000000000..ad0024c63d
--- /dev/null
+++ b/examples/solid-ts/src/routes/drawer/draggable-false.tsx
@@ -0,0 +1,51 @@
+import * as drawer from "@zag-js/drawer"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { createMemo, createUniqueId, For } from "solid-js"
+import { drawerControls } from "@zag-js/shared"
+import { Presence } from "../../components/presence"
+import { StateVisualizer } from "../../components/state-visualizer"
+import { Toolbar } from "../../components/toolbar"
+import { useControls } from "../../hooks/use-controls"
+import styles from "../../../../shared/styles/drawer.module.css"
+
+export default function Page() {
+ const controls = useControls(drawerControls)
+
+ const service = useMachine(
+ drawer.machine,
+ controls.mergeProps({
+ id: createUniqueId(),
+ }),
+ )
+
+ const api = createMemo(() => drawer.connect(service, normalizeProps))
+
+ return (
+ <>
+
+
+
@@ -40,7 +41,7 @@ export default function Page() {
- Item {index()}}
+
+
+
+
+ Drawer
+
+ No drag area
+
+
+
+ Item {index()}}
+
+
+ Drawer Indent Background
+
+
+
+
+
+
+ Drawer
+
+
+
+ Item {index() + 1}}
+
+
+
+
+
+
+
+
+
+
+
+
+ Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Security
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Advanced
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Non-modal Drawer
+
+
+
+
+
+
+
+
+ Drawer + native range
+
+
+ setVolume(Number(e.currentTarget.value))}
+ data-testid="drawer-native-range"
+ style={{ width: "100%", "touch-action": "auto" }}
+ />
+
+
+
+
+ Item {index()}}
+
-
diff --git a/examples/solid-ts/src/routes/drawer/swipe-area.tsx b/examples/solid-ts/src/routes/drawer/swipe-area.tsx
new file mode 100644
index 0000000000..de4d43a903
--- /dev/null
+++ b/examples/solid-ts/src/routes/drawer/swipe-area.tsx
@@ -0,0 +1,41 @@
+import * as drawer from "@zag-js/drawer"
+import { normalizeProps, useMachine } from "@zag-js/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 styles from "../../../../shared/styles/drawer.module.css"
+
+export default function Page() {
+ const service = useMachine(drawer.machine, () => ({
+ id: createUniqueId(),
+ }))
+
+ const api = createMemo(() => drawer.connect(service, normalizeProps))
+
+ return (
+ <>
+
+
+
@@ -39,7 +40,7 @@ export default function Page() {
- Item {index()}}
+
+
+
+
+ Drawer
+
+
+ Item {index()}}
+
+
+
+
+ Profile Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if scenario === "always-open"}
+
+
diff --git a/examples/svelte-ts/src/routes/drawer/controlled/DrawerControlledManaged.svelte b/examples/svelte-ts/src/routes/drawer/controlled/DrawerControlledManaged.svelte
new file mode 100644
index 0000000000..8502a249d4
--- /dev/null
+++ b/examples/svelte-ts/src/routes/drawer/controlled/DrawerControlledManaged.svelte
@@ -0,0 +1,50 @@
+
+
+Always Open (no onOpenChange)
+ open: true without onOpenChange. Swiping, escape, and outside click should
+ have no effect.
+
+
+
+
+
+ Always Open
+
+
diff --git a/examples/svelte-ts/src/routes/drawer/cross-axis-scroll/+page.svelte b/examples/svelte-ts/src/routes/drawer/cross-axis-scroll/+page.svelte
new file mode 100644
index 0000000000..1bf6049c1f
--- /dev/null
+++ b/examples/svelte-ts/src/routes/drawer/cross-axis-scroll/+page.svelte
@@ -0,0 +1,53 @@
+
+
+Controlled (open + onOpenChange)
+
+
+
+
+
+ Controlled Drawer
+
+
+
+
+
+ Cross-Axis Scroll
+
+ {#each Array.from({ length: 10 }) as _, i}
+
+
+
+ {i + 1}
+
+ {/each}
+
+ {#each Array.from({ length: 50 }) as _, index}
+
+ Item {index}
+ {/each}
+
+
+
+ Drawer Indent Background
+
+
+
+
+
+ Drawer
+
+ {#each Array.from({ length: 30 }) as _, index}
+
+ Item {index + 1}
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+
+ Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Security
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Advanced
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Non-modal Drawer
+
+
+
+
+
+
+
+
+ Drawer + native range
+
+
+
+
+
+
+ {#each Array.from({ length: 40 }) as _, index}
+
+ Item {index}
+ {/each}
+
+
+
+
+
+ Drawer
+
+ {#each Array.from({ length: 100 }) as _, index}
+
+ Item {index}
+ {/each}
+