@tempoxyz/ds 0.3.9 → 0.3.11

package/dist/docs/components/drawer.md

@@ -0,0 +1,966 @@
+# Drawer
+
+Slides a modal panel in from an edge of the viewport.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Drawer.tsx)
+
+Figma: [Modal/Drawer](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3740) (`Drawer.Popup`)
+
+## Overview
+
+A drawer is a modal panel that slides in from a viewport edge. A swipe closes it.
+
+## Examples
+
+### Basic
+
+```tsx
+import { Button, Drawer, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger render={<Button variant="secondary" />}>Open drawer</Drawer.Trigger>
+      <Drawer.Popup closeButton>
+        <Drawer.Content>
+          <Drawer.Title>Filters</Drawer.Title>
+          <Drawer.Description>Swipe down or press Escape to close.</Drawer.Description>
+          <div {...styles.actions()}>
+            <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>
+          </div>
+        </Drawer.Content>
+      </Drawer.Popup>
+    </Drawer.Root>
+  )
+}
+
+namespace styles {
+  export const actions = style({ display: 'flex', justifyContent: 'flex-end', marginTop: '32' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Drawer/Basic.tsx)
+
+### SwipeDirection
+
+Set `swipeDirection` on `Drawer.Root` to `down` (default, opens from the bottom), `up`, `left`, or `right`.
+
+```tsx
+import { Button, Drawer, style } from '@tempoxyz/ds'
+
+const edges = { down: 'bottom', left: 'left', right: 'right', up: 'top' } as const
+
+export function Demo() {
+  return (
+    <div {...styles.row()}>
+      {(['down', 'right', 'left', 'up'] as const).map((direction) => (
+        <Drawer.Root key={direction} swipeDirection={direction}>
+          <Drawer.Trigger render={<Button variant="secondary" />}>
+            Open from the {edges[direction]}
+          </Drawer.Trigger>
+          <Drawer.Popup closeButton>
+            <Drawer.Content>
+              <Drawer.Title>Filters</Drawer.Title>
+              <Drawer.Description>Swipe {direction} or press Escape to close.</Drawer.Description>
+              <div {...styles.actions()}>
+                <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>
+              </div>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Root>
+      ))}
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({ display: 'flex', justifyContent: 'flex-end', marginTop: '32' })
+
+  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '12' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Drawer/SwipeDirection.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { Drawer } from '@tempoxyz/ds'
+
+<Drawer.Root>
+  <Drawer.Trigger />
+  <Drawer.Popup>
+    <Drawer.Content>
+      <Drawer.Title />
+      <Drawer.Description />
+      <Drawer.Close />
+    </Drawer.Content>
+  </Drawer.Popup>
+</Drawer.Root>
+```
+
+## Guidelines
+
+### When to Use
+
+* Show a record's details beside its list, such as a payment from Activity.
+* Hold filters for a table or dashboard.
+* Show choices, a short form, or details as a bottom sheet on narrow screens.
+
+### When Not to Use
+
+* Use a [Dialog](/docs/components/dialog) for a short, focused task, such as Rename wallet.
+* Use an [AlertDialog](/docs/components/alert-dialog) to confirm a destructive action.
+* Use a [Popover](/docs/components/popover) for content anchored to its trigger on wide screens.
+* Use [AppShell](/docs/components/app-shell) for navigation. Below 1024px, its sidebar already opens in a drawer.
+* Use a page for content you'd link to, such as a full transaction record.
+
+### Pick an Edge
+
+`swipeDirection` on `Drawer.Root` sets the edge the drawer opens from and the swipe that closes it.
+
+* **Bottom (down):** The default, for bottom sheets on narrow screens.
+* **Right Edge (right):** Details and filters beside a list on wide screens.
+* **Left Edge (left):** Rarely. Use the right edge across a product.
+* **Top (up):** Avoid. It covers the header and sits far from the thumb.
+
+Below 640px, change a `right` drawer to `swipeDirection="down"`, to match a [Dialog](/docs/components/dialog) at that width.
+
+### Give Drawers Content That Needs Room
+
+Use a drawer for content taller than a dialog, such as a payment's full details. A two-button confirmation leaves the panel empty.
+
+**Do:** Open record details in a `right` drawer beside the list they came from.
+
+```tsx
+/**
+ * Do example for "Give Drawers Content That Needs Room" on the Drawer page.
+ * Open record details in a `right` drawer beside the list they came from.
+ * @module
+ */
+import { style } from '@tempoxyz/ds'
+
+const activity = [
+  { amount: '−250.00', name: 'Alex' },
+  { amount: '+1,200.00', name: 'Payroll' },
+  { amount: '−18.40', name: 'Ramen Bar' },
+  { amount: '−75.00', name: 'Sam' },
+]
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+  { label: 'Status', value: 'Confirmed' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.list()}>
+        {activity.map((entry) => (
+          <div key={entry.name} {...styles.row()}>
+            <span>{entry.name}</span>
+            <span>{entry.amount}</span>
+          </div>
+        ))}
+      </div>
+      <div {...styles.scrim()} />
+      <div {...styles.panel()}>
+        <span {...styles.title()}>Payment to Alex</span>
+        {details.map((entry) => (
+          <div key={entry.label} {...styles.detail()}>
+            <span {...styles.label()}>{entry.label}</span>
+            <span {...styles.value()}>{entry.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const detail = style({ display: 'flex', flexDirection: 'column', rowGap: '2px !custom' })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '12rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '18rem !custom',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const list = style({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12',
+    rowGap: '12',
+  })
+
+  export const panel = style({
+    backgroundColor: 'background.elevated',
+    borderBottomLeftRadius: 'sm',
+    borderTopLeftRadius: 'sm',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    insetBlock: '0',
+    insetInlineEnd: '0',
+    padding: '16',
+    position: 'absolute',
+    rowGap: '12',
+    width: '10.5rem !custom',
+  })
+
+  export const row = style({
+    color: 'content.primary',
+    display: 'flex',
+    justifyContent: 'space-between',
+    typography: 'body.b3',
+  })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+**Don't:** Put a short confirmation in a drawer. Use an [AlertDialog](/docs/components/alert-dialog).
+
+```tsx
+/**
+ * Don't example for "Give Drawers Content That Needs Room" on the Drawer page.
+ * Don't put a short confirmation in a drawer. Use an AlertDialog.
+ * @module
+ */
+import { Button, style } from '@tempoxyz/ds'
+
+const keys = ['Production server', 'Staging server', 'Local testing', 'CI pipeline']
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.list()}>
+        {keys.map((key) => (
+          <span key={key} {...styles.row()}>
+            {key}
+          </span>
+        ))}
+      </div>
+      <div {...styles.scrim()} />
+      <div {...styles.panel()}>
+        <span {...styles.title()}>Revoke this API key?</span>
+        <Button size="small">Revoke key</Button>
+        <Button size="small" variant="secondary">
+          Cancel
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '12rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '18rem !custom',
+  })
+
+  export const list = style({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12',
+    rowGap: '12',
+  })
+
+  export const panel = style({
+    backgroundColor: 'background.elevated',
+    borderBottomLeftRadius: 'sm',
+    borderTopLeftRadius: 'sm',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    insetBlock: '0',
+    insetInlineEnd: '0',
+    padding: '16',
+    position: 'absolute',
+    rowGap: '8',
+    width: '10.5rem !custom',
+  })
+
+  export const row = style({ color: 'content.primary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const title = style({
+    color: 'content.primary',
+    marginBottom: '8',
+    typography: 'body.b2Strong',
+  })
+}
+```
+
+### Always Render a Close Control
+
+Swipes aren't discoverable, and some people can't drag. Set `closeButton` on `Drawer.Popup`, or add a `Drawer.Close` action. A read-only details drawer needs no other action.
+
+**Do:** Render a close button, even when a swipe closes the drawer.
+
+```tsx
+/**
+ * Do example for "Always Render a Close Control" on the Drawer page.
+ * Render a close button, even when a swipe closes the drawer.
+ * @module
+ */
+import { Button, style } from '@tempoxyz/ds'
+import { Close } from '@tempoxyz/ds/icons'
+
+const activity = ['Alex', 'Payroll', 'Ramen Bar', 'Sam']
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.list()}>
+        {activity.map((name) => (
+          <span key={name} {...styles.row()}>
+            {name}
+          </span>
+        ))}
+      </div>
+      <div {...styles.scrim()} />
+      <div {...styles.panel()}>
+        <div {...styles.header()}>
+          <span {...styles.title()}>Payment to Alex</span>
+          <Button aria-label="Close" shape="icon" size="small" variant="tertiary">
+            <Close />
+          </Button>
+        </div>
+        {details.map((entry) => (
+          <div key={entry.label} {...styles.detail()}>
+            <span {...styles.label()}>{entry.label}</span>
+            <span {...styles.value()}>{entry.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const detail = style({ display: 'flex', flexDirection: 'column', rowGap: '2px !custom' })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '12rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '18rem !custom',
+  })
+
+  export const header = style({
+    alignItems: 'center',
+    columnGap: '4',
+    display: 'flex',
+    justifyContent: 'space-between',
+    minHeight: '32',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const list = style({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12',
+    rowGap: '12',
+  })
+
+  export const panel = style({
+    backgroundColor: 'background.elevated',
+    borderBottomLeftRadius: 'sm',
+    borderTopLeftRadius: 'sm',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    insetBlock: '0',
+    insetInlineEnd: '0',
+    padding: '16',
+    position: 'absolute',
+    rowGap: '12',
+    width: '11rem !custom',
+  })
+
+  export const row = style({ color: 'content.primary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+**Don't:** Make a swipe or a backdrop press the only way out.
+
+```tsx
+/**
+ * Don't example for "Always Render a Close Control" on the Drawer page.
+ * Don't make a swipe or a backdrop press the only way out.
+ * @module
+ */
+import { style } from '@tempoxyz/ds'
+
+const activity = ['Alex', 'Payroll', 'Ramen Bar', 'Sam']
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.list()}>
+        {activity.map((name) => (
+          <span key={name} {...styles.row()}>
+            {name}
+          </span>
+        ))}
+      </div>
+      <div {...styles.scrim()} />
+      <div {...styles.panel()}>
+        <div {...styles.header()}>
+          <span {...styles.title()}>Payment to Alex</span>
+        </div>
+        {details.map((entry) => (
+          <div key={entry.label} {...styles.detail()}>
+            <span {...styles.label()}>{entry.label}</span>
+            <span {...styles.value()}>{entry.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const detail = style({ display: 'flex', flexDirection: 'column', rowGap: '2px !custom' })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '12rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '18rem !custom',
+  })
+
+  export const header = style({
+    alignItems: 'center',
+    columnGap: '4',
+    display: 'flex',
+    justifyContent: 'space-between',
+    minHeight: '32',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const list = style({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12',
+    rowGap: '12',
+  })
+
+  export const panel = style({
+    backgroundColor: 'background.elevated',
+    borderBottomLeftRadius: 'sm',
+    borderTopLeftRadius: 'sm',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    insetBlock: '0',
+    insetInlineEnd: '0',
+    padding: '16',
+    position: 'absolute',
+    rowGap: '12',
+    width: '11rem !custom',
+  })
+
+  export const row = style({ color: 'content.primary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+### Center the Body of a Bottom Sheet
+
+A `down` drawer spans the viewport width. Wrap its body in `Drawer.Content` to center it at up to 32rem. Mouse and pen drags inside it select text and don't move the drawer.
+
+**Do:** Center the body of a wide bottom sheet with `Drawer.Content`.
+
+```tsx
+/**
+ * Do example for "Center the Body of a Bottom Sheet" on the Drawer page.
+ * Center the body of a wide bottom sheet with `Drawer.Content`.
+ * @module
+ */
+import { Button, style } from '@tempoxyz/ds'
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.scrim()} />
+      <div {...styles.sheet()}>
+        <div {...styles.content()}>
+          <span {...styles.title()}>Payment to Alex</span>
+          {details.map((entry) => (
+            <div key={entry.label} {...styles.detail()}>
+              <span {...styles.label()}>{entry.label}</span>
+              <span {...styles.value()}>{entry.value}</span>
+            </div>
+          ))}
+          <Button size="small" variant="secondary">
+            Share receipt
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  // Drawer.Content centers the body at up to 32rem, drawn here at the preview's scale.
+  export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    marginInline: 'auto !custom',
+    maxWidth: '11rem !custom',
+    rowGap: '8',
+  })
+
+  export const detail = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+  })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '12rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '20rem !custom',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const sheet = style({
+    backgroundColor: 'background.elevated',
+    borderTopLeftRadius: 'sm',
+    borderTopRightRadius: 'sm',
+    bottom: '0',
+    boxSizing: 'border-box',
+    insetInline: '0',
+    padding: '16',
+    position: 'absolute',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+**Don't:** Stretch the body across the full width of the viewport.
+
+```tsx
+/**
+ * Don't example for "Center the Body of a Bottom Sheet" on the Drawer page.
+ * Don't stretch the body across the full width of the viewport.
+ * @module
+ */
+import { Button, style } from '@tempoxyz/ds'
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.scrim()} />
+      <div {...styles.sheet()}>
+        <div {...styles.content()}>
+          <span {...styles.title()}>Payment to Alex</span>
+          {details.map((entry) => (
+            <div key={entry.label} {...styles.detail()}>
+              <span {...styles.label()}>{entry.label}</span>
+              <span {...styles.value()}>{entry.value}</span>
+            </div>
+          ))}
+          <Button size="small" variant="secondary">
+            Share receipt
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const content = style({ display: 'flex', flexDirection: 'column', rowGap: '8' })
+
+  export const detail = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+  })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '12rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '20rem !custom',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const sheet = style({
+    backgroundColor: 'background.elevated',
+    borderTopLeftRadius: 'sm',
+    borderTopRightRadius: 'sm',
+    bottom: '0',
+    boxSizing: 'border-box',
+    insetInline: '0',
+    padding: '16',
+    position: 'absolute',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+### Keep the Main Action in Reach
+
+The popup scrolls on overflow. Put the main action at the end, and keep a bottom sheet short enough to show it without scrolling.
+
+**Do:** Keep the bottom sheet short enough to show its main action.
+
+```tsx
+/**
+ * Do example for "Keep the Main Action in Reach" on the Drawer page.
+ * Keep the bottom sheet short enough to show its main action.
+ * @module
+ */
+import { Button, style } from '@tempoxyz/ds'
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+  { label: 'Fee', value: '0.01 USDC' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.scrim()} />
+      <div {...styles.sheet()}>
+        <span {...styles.title()}>Review payment</span>
+        {details.map((entry) => (
+          <div key={entry.label} {...styles.detail()}>
+            <span {...styles.label()}>{entry.label}</span>
+            <span {...styles.value()}>{entry.value}</span>
+          </div>
+        ))}
+        <Button size="small">Send payment</Button>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const detail = style({ display: 'flex', justifyContent: 'space-between' })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '14rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '12rem !custom',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const sheet = style({
+    backgroundColor: 'background.elevated',
+    borderTopLeftRadius: 'sm',
+    borderTopRightRadius: 'sm',
+    bottom: '0',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    insetInline: '0',
+    padding: '16',
+    position: 'absolute',
+    rowGap: '8',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+**Don't:** Push the main action below the fold of a tall sheet.
+
+```tsx
+/**
+ * Don't example for "Keep the Main Action in Reach" on the Drawer page.
+ * Don't push the main action below the fold of a tall sheet.
+ * @module
+ */
+import { Button, style } from '@tempoxyz/ds'
+
+const details = [
+  { label: 'Amount', value: '250.00 USDC' },
+  { label: 'To', value: '0x3c44…93bc' },
+  { label: 'Fee', value: '0.01 USDC' },
+  { label: 'From', value: 'Main wallet' },
+  { label: 'Network', value: 'Tempo' },
+  { label: 'Memo', value: 'Invoice 1042' },
+  { label: 'Arrives', value: 'Instantly' },
+]
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.scrim()} />
+      <div {...styles.sheet()}>
+        <span {...styles.title()}>Review payment</span>
+        {details.map((entry) => (
+          <div key={entry.label} {...styles.detail()}>
+            <span {...styles.label()}>{entry.label}</span>
+            <span {...styles.value()}>{entry.value}</span>
+          </div>
+        ))}
+        <Button size="small">Send payment</Button>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const detail = style({ display: 'flex', justifyContent: 'space-between' })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    borderColor: 'line.secondary',
+    borderRadius: 'xs',
+    borderStyle: 'solid',
+    borderWidth: 'regular',
+    boxSizing: 'border-box',
+    height: '14rem !custom',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '12rem !custom',
+  })
+
+  export const label = style({ color: 'content.secondary', typography: 'body.b3' })
+
+  export const scrim = style({
+    backgroundColor: 'neutral.100',
+    inset: '0',
+    opacity: 'disabled',
+    position: 'absolute',
+  })
+
+  export const sheet = style({
+    backgroundColor: 'background.elevated',
+    borderTopLeftRadius: 'sm',
+    borderTopRightRadius: 'sm',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    insetInline: '0',
+    padding: '16',
+    position: 'absolute',
+    rowGap: '8',
+    top: '24',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'body.b2Strong' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3Strong' })
+}
+```
+
+## Content
+
+### Name the Record or Task
+
+Render a `Drawer.Title` that names the record or task, such as Payment to Alex or Filters.
+
+## Accessibility
+
+A drawer is a modal dialog. It follows the [WAI-ARIA Authoring Practices modal dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
+
+### Semantics
+
+* **Drawer.Trigger (button):** Announces the dialog and whether it is open.
+* **Drawer.Popup (dialog):** Modal by default.
+* **Drawer.Title (h2):** Names the drawer.
+* **Drawer.Description (p):** Describes the drawer.
+* **Close Button (closeButton):** Adds an icon button named "Close".
+* **Page Behind (inert):** Ignores input and never scrolls with the drawer.
+
+### Keyboard
+
+* **Open or Activate (Enter or Space):** Opens the drawer, or activates the focused control.
+* **Move to the Next Element (Tab):** Moves to the next element, and wraps.
+* **Move to the Previous Element (Shift+Tab):** Moves to the previous element, and wraps.
+* **Close the Drawer (Escape):** Closes the drawer.
+
+### Focus
+
+* **Opening (initialFocus):** Moves to the panel, so a screen reader starts at its title.
+* **Trapping:** Focus stays inside while open.
+* **Backdrop and Swipe:** An outside press or a swipe to its edge closes the drawer.
+* **Closing (finalFocus):** Returns to the trigger, or to `finalFocus`.
+
+### Motion
+
+* **Slide and Swipe (swipeDirection):** Slides in from its edge and follows a swipe.
+* **Reduced Motion (reduce):** Fades in and out instead of sliding.
+
+### Your Responsibilities
+
+* **Render a Title (Drawer.Title):** Without it, the drawer has no accessible name.
+* **Name an Alternative to Gestures:** If instructions name a gesture, name a button too.
+
+## Related
+
+[Dialog](/docs/components/dialog)
+
+Use for short, focused tasks.
+
+[Popover](/docs/components/popover)
+
+Use for anchored content on wide screens.
+
+[AppShell](/docs/components/app-shell)
+
+Use for navigation that collapses into a drawer.
+
+[Responsive Layout](/docs/patterns/responsive-layout)
+
+Covers switching layouts at narrow widths.
+
+[Tables and Lists](/docs/patterns/tables-and-lists)
+
+Covers opening record details.