@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/drawer.examples.md

@@ -0,0 +1,1795 @@
+<!-- index: ./index.md -->
+# drawer
+
+`data-ui="drawer"` · Panel that slides in from an edge.
+
+## Examples
+
+### Playground
+
+A drawer opened inside the scene rather than over the page. Press the trigger, then Tab: focus is contained, Escape closes, and focus returns to the button it came from.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer>
+  <DrawerTrigger>Abrir detalhes</DrawerTrigger>
+  <DrawerPanel>
+    <DrawerHeader>
+      <DrawerTitle>Fatura 4471</DrawerTitle>
+      <DrawerDescription>Emitida em 12 de agosto.</DrawerDescription>
+      <DrawerClose />
+    </DrawerHeader>
+    <DrawerBody>
+      <TextField label="Observação" />
+    </DrawerBody>
+    <DrawerFooter>
+      <Button variant="ghost" tone="secondary">
+        Cancelar
+      </Button>
+      <Button>Salvar</Button>
+    </DrawerFooter>
+  </DrawerPanel>
+</Drawer>;
+```
+
+### A layer over the page, or a panel beside it
+
+One axis rather than two components, because an application binds it to its own breakpoint: swapping one element for another there would take the panel’s scroll position, its focus and every uncontrolled field with it.
+
+Excerpt — not a complete module
+
+```tsx
+const wide = useMediaQuery('(min-width: 60rem)');
+
+<div style={{ display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)' }}>
+  <Drawer mode={wide ? 'inline' : 'overlay'} open={open} side="start">
+    <DrawerPanel render={(props) => <nav {...props} aria-label="Seções" />}>…</DrawerPanel>
+  </Drawer>
+  <main>…</main>
+</div>;
+```
+
+### Which edge it comes from
+
+start and end rather than left and right, so the whole layout mirrors in a right-to-left document with no second stylesheet. Only the exit slide is physical, and it takes one rule per inline side.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer side="bottom">
+  <DrawerTrigger>Filtrar</DrawerTrigger>
+  <DrawerPanel>…</DrawerPanel>
+</Drawer>;
+```
+
+### How much room the panel takes
+
+Five named steps rather than a pixel string, because a theme can retune a step and cannot retune width: 400px. A drawer wider than the layer is clamped to it, which is what makes a side drawer full-bleed on a phone.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer size="lg">…</Drawer>;
+
+// An exact measure is the token the steps resolve into.
+<Drawer style={{ '--slotted-drawer-extent': '27rem' }}>…</Drawer>;
+```
+
+### An edge the reader can move — with a keyboard
+
+Rendering the separator is the capability; there is no resizable prop. Arrow keys move it sixteen pixels at a time and sixty-four with Shift, Home and End reach the limits, Enter collapses and restores, and a double click puts the panel back on the measure its size step gives it — which is the Window Splitter pattern, and which no surveyed drawer answers.
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerResizer,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+
+const LINES = [
+  { term: 'Arabica beans, 5 kg', value: '6 cases, $420.00' },
+  { term: 'Oat milk, 12 × 1 L', value: '4 cases, $192.00' },
+  { term: 'Paper cups, 16 oz, 1,000 per case', value: '4 cases, $628.00' },
+];
+
+export default function DrawerResize() {
+  const [extent, setExtent] = useState<number | undefined>(undefined);
+  const width = extent === undefined ? 'the md step' : `${Math.round(extent * 100)}% of the window`;
+
+  return (
+    <Drawer extent={extent} maxExtent={0.8} minExtent={0.25} onExtentChange={setExtent}>
+      <DrawerTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            View order lines
+          </Button>
+        )}
+      />
+      <DrawerPanel>
+        <DrawerHeader>
+          <DrawerTitle>Order SO-1182 lines</DrawerTitle>
+          <DrawerDescription>Width: {width}.</DrawerDescription>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <DescriptionList>
+            {LINES.map((line) => (
+              <DescriptionListItem key={line.term}>
+                <DescriptionListTerm>{line.term}</DescriptionListTerm>
+                <DescriptionListDescription>{line.value}</DescriptionListDescription>
+              </DescriptionListItem>
+            ))}
+          </DescriptionList>
+        </DrawerBody>
+        <DrawerResizer />
+      </DrawerPanel>
+    </Drawer>
+  );
+}
+```
+
+### Stops the sheet lands on
+
+A snap point is a stop of the same separator, so the arrows that move it move between them — which is the condition the guide puts on shipping snap points at all. A drag released below the first stop asks to close.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer side="bottom" snapPoints={[0.3, 0.6, 0.95]} defaultExtent={0.3}>
+  <DrawerPanel>
+    <DrawerResizer />
+    <DrawerBody>…</DrawerBody>
+  </DrawerPanel>
+</Drawer>;
+```
+
+### A bottom sheet as a phone draws one
+
+The sheet measures what it holds — the default size on top and bottom — stops at forty rems on a wide layer, and moves under a touch anywhere on its body. A downward drag with the list at its top moves the sheet; an upward one grows it to the next stop — the height of its content among them — before the list scrolls; a fling faster than 500 px/s goes to the next stop or closes. A tap on the grabber walks the stops.
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerResizer,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { FieldGroup, FieldGroupContent, FieldGroupLegend } from '@slotted/react/field-group';
+import { Inline } from '@slotted/react/inline';
+import { Radio, RadioGroup } from '@slotted/react/radio-group';
+import { Text } from '@slotted/react/typography';
+
+const WINDOWS = [
+  { value: 'morning', label: 'Thursday 8 October, 8 AM to noon' },
+  { value: 'afternoon', label: 'Thursday 8 October, 1 to 5 PM' },
+  { value: 'friday', label: 'Friday 9 October, 8 AM to noon' },
+];
+
+export default function DrawerSheet() {
+  const [open, setOpen] = useState(false);
+  const [pickup, setPickup] = useState('morning');
+  const [draft, setDraft] = useState(pickup);
+
+  return (
+    <Inline align="center" gap={3}>
+      <Text size="sm">Pickup: {WINDOWS.find((window) => window.value === pickup)?.label}</Text>
+      <Drawer
+        open={open}
+        onOpenChange={(next) => {
+          if (next) setDraft(pickup);
+          setOpen(next);
+        }}
+        side="bottom"
+      >
+        <DrawerTrigger
+          render={(props) => (
+            <Button {...props} size="sm" tone="secondary" variant="outline">
+              Reschedule
+            </Button>
+          )}
+        />
+        <DrawerPanel>
+          <DrawerResizer />
+          <DrawerHeader>
+            <DrawerTitle>Reschedule pickup</DrawerTitle>
+            <DrawerDescription>Shipment SH-4471, UPS Ground from Reno, NV.</DrawerDescription>
+            <DrawerClose />
+          </DrawerHeader>
+          <DrawerBody>
+            <FieldGroup>
+              <FieldGroupLegend>Pickup window</FieldGroupLegend>
+              <FieldGroupContent>
+                <RadioGroup value={draft} onValueChange={setDraft}>
+                  {WINDOWS.map((window) => (
+                    <Radio key={window.value} value={window.value}>
+                      {window.label}
+                    </Radio>
+                  ))}
+                </RadioGroup>
+              </FieldGroupContent>
+            </FieldGroup>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                setPickup(draft);
+                setOpen(false);
+              }}
+            >
+              Reschedule
+            </Button>
+          </DrawerFooter>
+        </DrawerPanel>
+      </Drawer>
+    </Inline>
+  );
+}
+```
+
+### A sheet over a page that stays in use
+
+Below scrimFrom the scrim is not painted and a press reaches the page — the sheet over a map. It is written beside modal={false} and outsidePress="none", because an undimmed page that stayed inert would promise something it does not do. Drag the sheet past sixty per cent and the scrim fades in.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer
+  side="bottom"
+  snapPoints={[0.25, 0.6, 0.95]}
+  defaultExtent={0.25}
+  scrimFrom={0.6}
+  modal={false}
+  outsidePress="none"
+>
+  …
+</Drawer>;
+```
+
+### A sheet above the virtual keyboard
+
+On a phone the keyboard shrinks the visual viewport and leaves fixed layers under the keys. The open layer reads what the keyboard covers and recedes by it, so the sheet — and its footer — land above the keys. The button beside the scene writes the same property the binding writes, 260 pixels, to show it on a screen without one.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer side="bottom">
+  <DrawerPanel>
+    <DrawerHeader>
+      <DrawerTitle>Enviar lembrete</DrawerTitle>
+    </DrawerHeader>
+    <DrawerBody>
+      <TextField aria-label="Nota para o cliente" />
+    </DrawerBody>
+    <DrawerFooter>…</DrawerFooter>
+  </DrawerPanel>
+</Drawer>;
+```
+
+### A drawer the page behind can still be used
+
+modal={false} writes no aria-modal, makes nothing inert, locks no scroll and contains no focus. The APG warns that marking a container modal without doing all four is worse for a screen-reader reader than not marking it at all.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer modal={false}>
+  <DrawerTrigger>Detalhes do pedido</DrawerTrigger>
+  <DrawerPanel>…</DrawerPanel>
+</Drawer>;
+```
+
+### Refusing a close, and refusing it once
+
+Five ways to close and one request. A guard on onOpenChange covers Escape, an outside press, the close button, the trigger and the imperative handle together; Angular Material’s disableClose refuses two of them and Ant needs two booleans for one.
+
+Excerpt — not a complete module
+
+```tsx
+<Drawer
+  open={open}
+  onOpenChange={(next, request) => {
+    if (!next && saving) return request.cancel();
+    setOpen(next);
+  }}
+>
+  …
+</Drawer>;
+```
+
+### Where focus goes, and where it comes back to
+
+An overlay drawer takes focus on open and gives it back on close. An inline one takes nothing — a sidebar that stole focus every time a breakpoint crossed would be unusable — and still gives it back when it closes under the reader’s hands.
+
+Excerpt — not a complete module
+
+```tsx
+const search = useRef<HTMLInputElement>(null);
+
+<Drawer initialFocus={search}>
+  <DrawerTrigger>Buscar</DrawerTrigger>
+  <DrawerPanel>
+    <DrawerBody>
+      <TextField label="Buscar" ref={search} />
+    </DrawerBody>
+  </DrawerPanel>
+</Drawer>;
+```
+
+### Open before the content arrived
+
+The body carries aria-busy and keeps a floor so the panel does not jump to size when the data lands. The header, the close button, Escape and the separator all stay operable: a drawer a reader cannot leave is the worse failure of the two.
+
+Example
+
+```tsx
+import { useEffect, useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Skeleton, SkeletonRegion } from '@slotted/react/skeleton';
+
+interface Shipment {
+  carrier: string;
+  tracking: string;
+  packages: string;
+  delivery: string;
+}
+
+const FIELDS: { key: keyof Shipment; term: string; width: string }[] = [
+  { key: 'carrier', term: 'Carrier', width: '6rem' },
+  { key: 'tracking', term: 'Tracking number', width: '11rem' },
+  { key: 'packages', term: 'Packages', width: '8rem' },
+  { key: 'delivery', term: 'Estimated delivery', width: '9rem' },
+];
+
+export default function DrawerLoading() {
+  const [open, setOpen] = useState(false);
+  const [shipment, setShipment] = useState<Shipment | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setShipment(null);
+    const timer = setTimeout(
+      () =>
+        setShipment({
+          carrier: 'UPS Ground',
+          tracking: '1Z 999 AA1 01 2345 6784',
+          packages: '3, 18.4 kg in total',
+          delivery: 'Thursday, 8 October',
+        }),
+      1200,
+    );
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} loading={shipment === null}>
+      <DrawerTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            Track shipment SH-4471
+          </Button>
+        )}
+      />
+      <DrawerPanel>
+        <DrawerHeader>
+          <DrawerTitle>Shipment SH-4471</DrawerTitle>
+          <DrawerDescription>Order SO-1182 for Contoso Foods, Seattle.</DrawerDescription>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <SkeletonRegion
+            delay={200}
+            loading={shipment === null}
+            messages={{ label: 'Loading shipment' }}
+            minDuration={400}
+          >
+            <DescriptionList>
+              {FIELDS.map((field) => (
+                <DescriptionListItem key={field.key}>
+                  <DescriptionListTerm>{field.term}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {shipment === null ? (
+                      <Skeleton inlineSize={field.width} />
+                    ) : (
+                      shipment[field.key]
+                    )}
+                  </DescriptionListDescription>
+                </DescriptionListItem>
+              ))}
+            </DescriptionList>
+          </SkeletonRegion>
+        </DrawerBody>
+      </DrawerPanel>
+    </Drawer>
+  );
+}
+```
+
+### A drawer opened from a drawer
+
+Escape reaches the topmost layer only, and a layer that refuses it stops the request reaching the one beneath. The depth comes from the single stack dismissable-layer keeps, so nothing here states a z-index.
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+
+const ORDER = [
+  { term: 'Customer', value: 'Contoso Foods' },
+  { term: 'Items', value: '14 cases, 3 products' },
+  { term: 'Total', value: '$1,240.00' },
+];
+
+const CUSTOMER = [
+  { term: 'Account', value: 'C-0042' },
+  { term: 'Contact', value: 'Ana Ruiz, ap@contoso.com' },
+  { term: 'Open orders', value: '3, $4,815.50 in total' },
+  { term: 'Payment terms', value: 'Net 30' },
+];
+
+export default function DrawerNested() {
+  return (
+    <Drawer>
+      <DrawerTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            View order SO-1182
+          </Button>
+        )}
+      />
+      <DrawerPanel>
+        <DrawerHeader>
+          <DrawerTitle>Order SO-1182</DrawerTitle>
+          <DrawerDescription>Placed on 2 October 2026.</DrawerDescription>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <Stack gap={5}>
+            <DescriptionList>
+              {ORDER.map((detail) => (
+                <DescriptionListItem key={detail.term}>
+                  <DescriptionListTerm>{detail.term}</DescriptionListTerm>
+                  <DescriptionListDescription>{detail.value}</DescriptionListDescription>
+                </DescriptionListItem>
+              ))}
+            </DescriptionList>
+            <Inline>
+              <Drawer size="sm">
+                <DrawerTrigger
+                  render={(props) => (
+                    <Button {...props} size="sm" tone="secondary" variant="outline">
+                      View customer
+                    </Button>
+                  )}
+                />
+                <DrawerPanel>
+                  <DrawerHeader>
+                    <DrawerTitle>Contoso Foods</DrawerTitle>
+                    <DrawerDescription>Customer since March 2021.</DrawerDescription>
+                    <DrawerClose />
+                  </DrawerHeader>
+                  <DrawerBody>
+                    <DescriptionList>
+                      {CUSTOMER.map((detail) => (
+                        <DescriptionListItem key={detail.term}>
+                          <DescriptionListTerm>{detail.term}</DescriptionListTerm>
+                          <DescriptionListDescription>{detail.value}</DescriptionListDescription>
+                        </DescriptionListItem>
+                      ))}
+                    </DescriptionList>
+                  </DrawerBody>
+                </DrawerPanel>
+              </Drawer>
+            </Inline>
+          </Stack>
+        </DrawerBody>
+      </DrawerPanel>
+    </Drawer>
+  );
+}
+```
+
+### Content the family did not choose
+
+A ninety-character token in a title breaks rather than widening the panel, and a body longer than the layer scrolls while the actions hold still. Radix, MUI and Angular Material ship no layout, so a footer past the fold is the default of following any of them.
+
+Excerpt — not a complete module
+
+```tsx
+<DrawerPanel>
+  <DrawerHeader>
+    <DrawerTitle>{fileName}</DrawerTitle>
+  </DrawerHeader>
+  <DrawerBody>{longText}</DrawerBody>
+  <DrawerFooter>
+    <Button>Salvar</Button>
+  </DrawerFooter>
+</DrawerPanel>;
+```
+
+### The parts are the consumer’s own elements
+
+render hands each part every attribute the family wrote, so the trigger is the library’s Button and an inline panel is a nav — nothing is reimplemented and nothing is wrapped. An empty list inside the body is result-state, which owns that question.
+
+Excerpt — not a complete module
+
+```tsx
+<DrawerTrigger render={(props) => <Button {...props} variant="outline" />}>Abrir</DrawerTrigger>;
+
+<DrawerPanel render={(props) => <nav {...props} aria-label="Seções" />}>…</DrawerPanel>;
+```
+
+### What an application decides once
+
+Seven axes set for a whole subtree rather than repeated on every drawer in a product. A drawer that states any of them itself still wins, because an explicit consumer value always does.
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDefaultsProvider,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Inline } from '@slotted/react/inline';
+import { Text } from '@slotted/react/typography';
+
+export default function DrawerDefaults() {
+  return (
+    <DrawerDefaultsProvider side="start" size="sm">
+      <Inline gap={2}>
+        <Drawer>
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                Warehouses
+              </Button>
+            )}
+          />
+          <DrawerPanel>
+            <DrawerHeader>
+              <DrawerTitle>Warehouses</DrawerTitle>
+              <DrawerClose />
+            </DrawerHeader>
+            <DrawerBody>
+              <Text size="sm">From the start edge and small, both from the provider.</Text>
+            </DrawerBody>
+          </DrawerPanel>
+        </Drawer>
+        <Drawer size="lg">
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                Carriers
+              </Button>
+            )}
+          />
+          <DrawerPanel>
+            <DrawerHeader>
+              <DrawerTitle>Carriers</DrawerTitle>
+              <DrawerClose />
+            </DrawerHeader>
+            <DrawerBody>
+              <Text size="sm">
+                From the start edge, from the provider, and large because this drawer says so.
+              </Text>
+            </DrawerBody>
+          </DrawerPanel>
+        </Drawer>
+      </Inline>
+    </DrawerDefaultsProvider>
+  );
+}
+```
+
+### What a reader hears, and what they can reach
+
+The title names the panel and the separator; the trigger says expanded in both modes and haspopup in one. Tab wraps inside a modal panel, and the closed panel of an inline drawer is inert so the collapse the eye reads and the tab order agree.
+
+Excerpt — not a complete module
+
+```tsx
+<DrawerPanel>
+  <DrawerHeader>
+    <DrawerTitle>Coleções</DrawerTitle>
+  </DrawerHeader>
+  <DrawerResizer />
+</DrawerPanel>;
+```
+
+### detail-panel.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Badge } from '@slotted/react/badge';
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+} from '@slotted/react/drawer';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/table';
+import { VisuallyHidden } from '@slotted/react/visually-hidden';
+
+const ORDERS = [
+  {
+    id: 'SO-1182',
+    customer: 'Contoso Foods',
+    city: 'Seattle, WA',
+    status: 'Ready to ship',
+    tone: 'accent',
+    items: '14 cases, 3 products',
+    total: '$1,240.00',
+  },
+  {
+    id: 'SO-1183',
+    customer: 'Fabrikam Grocers',
+    city: 'Portland, OR',
+    status: 'Shipped',
+    tone: 'success',
+    items: '6 cases, 2 products',
+    total: '$386.50',
+  },
+  {
+    id: 'SO-1184',
+    customer: 'Tailspin Market',
+    city: 'Boise, ID',
+    status: 'On hold',
+    tone: 'warning',
+    items: '22 cases, 5 products',
+    total: '$2,075.25',
+  },
+  {
+    id: 'SO-1185',
+    customer: 'Adventure Works',
+    city: 'Denver, CO',
+    status: 'Ready to ship',
+    tone: 'accent',
+    items: '9 cases, 4 products',
+    total: '$918.00',
+  },
+] as const;
+
+type Order = (typeof ORDERS)[number];
+
+export default function DrawerDetailPanel() {
+  const [open, setOpen] = useState(false);
+  const [order, setOrder] = useState<Order>(ORDERS[0]);
+
+  return (
+    <>
+      <Table columns={4}>
+        <TableContent>
+          <TableHead>
+            <TableRow>
+              <TableColumnHeader>Order</TableColumnHeader>
+              <TableColumnHeader>Customer</TableColumnHeader>
+              <TableColumnHeader numeric>Total</TableColumnHeader>
+              <TableColumnHeader>
+                <VisuallyHidden>Actions</VisuallyHidden>
+              </TableColumnHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {ORDERS.map((row) => (
+              <TableRow key={row.id} value={row.id}>
+                <TableRowHeader>{row.id}</TableRowHeader>
+                <TableCell>{row.customer}</TableCell>
+                <TableCell numeric>{row.total}</TableCell>
+                <TableCell>
+                  <Button
+                    aria-label={`View ${row.id}`}
+                    size="sm"
+                    tone="secondary"
+                    variant="ghost"
+                    onClick={() => {
+                      setOrder(row);
+                      setOpen(true);
+                    }}
+                  >
+                    View
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContent>
+      </Table>
+      <Drawer
+        modal={false}
+        open={open}
+        onOpenChange={setOpen}
+        outsidePress="none"
+        scrimFrom={1}
+        size="sm"
+      >
+        <DrawerPanel>
+          <DrawerHeader>
+            <DrawerTitle>Order {order.id}</DrawerTitle>
+            <DrawerDescription>
+              {order.customer}, {order.city}
+            </DrawerDescription>
+            <DrawerClose />
+          </DrawerHeader>
+          <DrawerBody>
+            <Stack gap={4}>
+              <Inline>
+                <Badge tone={order.tone}>{order.status}</Badge>
+              </Inline>
+              <DescriptionList>
+                <DescriptionListItem>
+                  <DescriptionListTerm>Items</DescriptionListTerm>
+                  <DescriptionListDescription>{order.items}</DescriptionListDescription>
+                </DescriptionListItem>
+                <DescriptionListItem>
+                  <DescriptionListTerm>Total</DescriptionListTerm>
+                  <DescriptionListDescription>{order.total}</DescriptionListDescription>
+                </DescriptionListItem>
+              </DescriptionList>
+            </Stack>
+          </DrawerBody>
+        </DrawerPanel>
+      </Drawer>
+    </>
+  );
+}
+```
+
+### filters.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import { Checkbox } from '@slotted/react/checkbox';
+import { CheckboxGroup } from '@slotted/react/checkbox-group';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { FieldGroup, FieldGroupContent, FieldGroupLegend } from '@slotted/react/field-group';
+import { Inline } from '@slotted/react/inline';
+import { Radio, RadioGroup } from '@slotted/react/radio-group';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+const ORDERS = [
+  { id: 'SO-1182', status: 'processing', warehouse: 'RNO' },
+  { id: 'SO-1183', status: 'shipped', warehouse: 'CMH' },
+  { id: 'SO-1184', status: 'on-hold', warehouse: 'RNO' },
+  { id: 'SO-1185', status: 'processing', warehouse: 'SAV' },
+  { id: 'SO-1186', status: 'shipped', warehouse: 'RNO' },
+  { id: 'SO-1187', status: 'processing', warehouse: 'CMH' },
+  { id: 'SO-1188', status: 'on-hold', warehouse: 'SAV' },
+  { id: 'SO-1189', status: 'processing', warehouse: 'RNO' },
+];
+
+interface Filters {
+  statuses: readonly string[];
+  warehouse: string;
+}
+
+const ALL: Filters = { statuses: ['processing', 'shipped', 'on-hold'], warehouse: 'any' };
+
+const matching = (filters: Filters) =>
+  ORDERS.filter(
+    (order) =>
+      filters.statuses.includes(order.status) &&
+      (filters.warehouse === 'any' || order.warehouse === filters.warehouse),
+  ).length;
+
+export default function DrawerFilters() {
+  const [open, setOpen] = useState(false);
+  const [applied, setApplied] = useState<Filters>(ALL);
+  const [draft, setDraft] = useState<Filters>(applied);
+  const count = matching(draft);
+
+  return (
+    <Inline align="center" gap={3}>
+      <Text size="sm">
+        {matching(applied)} of {ORDERS.length} orders
+      </Text>
+      <Drawer
+        open={open}
+        onOpenChange={(next) => {
+          if (next) setDraft(applied);
+          setOpen(next);
+        }}
+        size="sm"
+      >
+        <DrawerTrigger
+          render={(props) => (
+            <Button {...props} size="sm" tone="secondary" variant="outline">
+              Filters
+            </Button>
+          )}
+        />
+        <DrawerPanel>
+          <DrawerHeader>
+            <DrawerTitle>Filter orders</DrawerTitle>
+            <DrawerClose />
+          </DrawerHeader>
+          <DrawerBody>
+            <Stack gap={6}>
+              <FieldGroup>
+                <FieldGroupLegend>Status</FieldGroupLegend>
+                <FieldGroupContent>
+                  <CheckboxGroup
+                    value={draft.statuses}
+                    onValueChange={(statuses) => setDraft({ ...draft, statuses })}
+                  >
+                    <Checkbox value="processing">Processing</Checkbox>
+                    <Checkbox value="shipped">Shipped</Checkbox>
+                    <Checkbox value="on-hold">On hold</Checkbox>
+                  </CheckboxGroup>
+                </FieldGroupContent>
+              </FieldGroup>
+              <FieldGroup>
+                <FieldGroupLegend>Warehouse</FieldGroupLegend>
+                <FieldGroupContent>
+                  <RadioGroup
+                    value={draft.warehouse}
+                    onValueChange={(warehouse) => setDraft({ ...draft, warehouse })}
+                  >
+                    <Radio value="any">Any warehouse</Radio>
+                    <Radio value="RNO">Reno, NV</Radio>
+                    <Radio value="CMH">Columbus, OH</Radio>
+                    <Radio value="SAV">Savannah, GA</Radio>
+                  </RadioGroup>
+                </FieldGroupContent>
+              </FieldGroup>
+            </Stack>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="ghost" tone="secondary" onClick={() => setDraft(ALL)}>
+              Reset
+            </Button>
+            <Button
+              onClick={() => {
+                setApplied(draft);
+                setOpen(false);
+              }}
+            >
+              Show {count} orders
+            </Button>
+          </DrawerFooter>
+        </DrawerPanel>
+      </Drawer>
+    </Inline>
+  );
+}
+```
+
+### form.tsx
+
+Example
+
+```tsx
+import { useState, type SubmitEvent } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Field, FieldError, FieldLabel } from '@slotted/react/field';
+import { Inline } from '@slotted/react/inline';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  type SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@slotted/react/select';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+import { Text } from '@slotted/react/typography';
+
+const TERMS: SelectOption[] = [
+  { value: 'due', label: 'Due on receipt' },
+  { value: 'net-15', label: 'Net 15' },
+  { value: 'net-30', label: 'Net 30' },
+  { value: 'net-60', label: 'Net 60' },
+];
+
+const CUSTOMER = { name: 'Contoso Foods', email: 'ap@contoso.com', terms: 'net-30' };
+
+const termsLabel = (value: string) => TERMS.find((option) => option.value === value)?.label;
+
+function nameError(value: string): string {
+  return value.trim() === '' ? 'Enter the name printed on invoices.' : '';
+}
+
+function emailError(value: string): string {
+  if (value.trim() === '') return 'Enter the address invoices are sent to.';
+  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ap@contoso.com.';
+  return '';
+}
+
+export default function DrawerForm() {
+  const [open, setOpen] = useState(false);
+  const [customer, setCustomer] = useState(CUSTOMER);
+  const [name, setName] = useState(customer.name);
+  const [email, setEmail] = useState(customer.email);
+  const [terms, setTerms] = useState(customer.terms);
+  const [submitted, setSubmitted] = useState(false);
+  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;
+
+  const submit = (event: SubmitEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitted(true);
+    if (nameError(name) !== '' || emailError(email) !== '') return;
+    setCustomer({ name: name.trim(), email: email.trim(), terms });
+    setOpen(false);
+  };
+
+  return (
+    <Inline align="center" gap={3}>
+      <Text role="status" size="sm" tone="muted">
+        {customer.name}, {customer.email}, {termsLabel(customer.terms)}
+      </Text>
+      <Drawer
+        open={open}
+        onOpenChange={(next) => {
+          if (next) {
+            setName(customer.name);
+            setEmail(customer.email);
+            setTerms(customer.terms);
+            setSubmitted(false);
+          }
+          setOpen(next);
+        }}
+      >
+        <DrawerTrigger render={(props) => <Button {...props}>Edit customer</Button>} />
+        <DrawerPanel>
+          <DrawerHeader>
+            <DrawerTitle>Edit customer</DrawerTitle>
+            <DrawerDescription>Account C-0042, customer since March 2021.</DrawerDescription>
+            <DrawerClose />
+          </DrawerHeader>
+          <DrawerBody>
+            <form id="edit-customer" noValidate onSubmit={submit}>
+              <Stack gap={4}>
+                <Field required invalid={errors?.name ? true : undefined}>
+                  <FieldLabel>Company name</FieldLabel>
+                  <TextField autoComplete="organization" value={name} onValueChange={setName} />
+                  <FieldError live="polite" reserve>
+                    {errors?.name}
+                  </FieldError>
+                </Field>
+                <Field required invalid={errors?.email ? true : undefined}>
+                  <FieldLabel>Billing email</FieldLabel>
+                  <TextField type="email" value={email} onValueChange={setEmail} />
+                  <FieldError live="polite" reserve>
+                    {errors?.email}
+                  </FieldError>
+                </Field>
+                <Field>
+                  <FieldLabel>Payment terms</FieldLabel>
+                  <Select
+                    items={TERMS}
+                    value={terms}
+                    onValueChange={(value) =>
+                      setTerms(typeof value === 'string' ? value : customer.terms)
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TERMS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </Stack>
+            </form>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" form="edit-customer">
+              Save customer
+            </Button>
+          </DrawerFooter>
+        </DrawerPanel>
+      </Drawer>
+    </Inline>
+  );
+}
+```
+
+### inline.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Badge } from '@slotted/react/badge';
+import { Button } from '@slotted/react/button';
+import { Checkbox } from '@slotted/react/checkbox';
+import { CheckboxGroup } from '@slotted/react/checkbox-group';
+import { Drawer, DrawerBody, DrawerPanel, DrawerTrigger } from '@slotted/react/drawer';
+import { FieldGroup, FieldGroupContent, FieldGroupLegend } from '@slotted/react/field-group';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+const STATUSES = [
+  { value: 'processing', label: 'Processing', tone: 'accent' },
+  { value: 'shipped', label: 'Shipped', tone: 'success' },
+  { value: 'on-hold', label: 'On hold', tone: 'warning' },
+] as const;
+
+const ORDERS = [
+  { id: 'SO-1182', customer: 'Contoso Foods', status: 'processing' },
+  { id: 'SO-1183', customer: 'Fabrikam Grocers', status: 'shipped' },
+  { id: 'SO-1184', customer: 'Tailspin Market', status: 'on-hold' },
+  { id: 'SO-1185', customer: 'Adventure Works', status: 'processing' },
+  { id: 'SO-1186', customer: 'Litware Deli', status: 'shipped' },
+] as const;
+
+export default function DrawerInline() {
+  const [statuses, setStatuses] = useState<readonly string[]>(['processing', 'on-hold']);
+  const shown = ORDERS.filter((order) => statuses.includes(order.status));
+
+  return (
+    <Drawer defaultOpen mode="inline" side="start" size="sm">
+      <Stack gap={3}>
+        <Inline>
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} size="sm" tone="secondary" variant="outline">
+                Filters
+              </Button>
+            )}
+          />
+        </Inline>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            minBlockSize: '16rem',
+            border: '1px solid var(--slotted-border-subtle)',
+            borderRadius: 'var(--slotted-radius-lg)',
+            overflow: 'hidden',
+          }}
+        >
+          <DrawerPanel>
+            <DrawerBody>
+              <FieldGroup>
+                <FieldGroupLegend>Status</FieldGroupLegend>
+                <FieldGroupContent>
+                  <CheckboxGroup value={statuses} onValueChange={setStatuses}>
+                    {STATUSES.map((status) => (
+                      <Checkbox key={status.value} value={status.value}>
+                        {status.label}
+                      </Checkbox>
+                    ))}
+                  </CheckboxGroup>
+                </FieldGroupContent>
+              </FieldGroup>
+            </DrawerBody>
+          </DrawerPanel>
+          <Stack gap={3} style={{ flex: '1 1 12rem', padding: 'var(--slotted-space-6)' }}>
+            <Text size="sm" tone="muted">
+              {shown.length} of {ORDERS.length} orders
+            </Text>
+            {shown.map((order) => {
+              const status = STATUSES.find((item) => item.value === order.status)!;
+              return (
+                <Inline key={order.id} align="center" gap={3} justify="between">
+                  <Stack gap={0}>
+                    <Text size="sm" weight="semibold">
+                      {order.id}
+                    </Text>
+                    <Text size="sm" tone="muted">
+                      {order.customer}
+                    </Text>
+                  </Stack>
+                  <Badge tone={status.tone}>{status.label}</Badge>
+                </Inline>
+              );
+            })}
+          </Stack>
+        </div>
+      </Stack>
+    </Drawer>
+  );
+}
+```
+
+### long-content.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+const EVENTS = [
+  { at: 'Oct 6, 7:42 AM', what: 'Out for delivery, Seattle, WA' },
+  { at: 'Oct 6, 5:10 AM', what: 'Arrived at the delivery facility, Seattle, WA' },
+  { at: 'Oct 5, 11:58 PM', what: 'Departed facility, Portland, OR' },
+  { at: 'Oct 5, 9:20 PM', what: 'Arrived at facility, Portland, OR' },
+  { at: 'Oct 5, 2:04 PM', what: 'Departed facility, Medford, OR' },
+  { at: 'Oct 5, 10:37 AM', what: 'Arrived at facility, Medford, OR' },
+  { at: 'Oct 4, 11:15 PM', what: 'Departed facility, Sacramento, CA' },
+  { at: 'Oct 4, 6:48 PM', what: 'Arrived at facility, Sacramento, CA' },
+  { at: 'Oct 4, 1:30 PM', what: 'Departed facility, Reno, NV' },
+  { at: 'Oct 4, 9:02 AM', what: 'Processed at the origin facility, Reno, NV' },
+  { at: 'Oct 3, 6:15 PM', what: 'Picked up from the Northwind warehouse, Reno, NV' },
+  { at: 'Oct 3, 4:40 PM', what: 'Weighed and labelled: 3 packages, 18.4 kg' },
+  { at: 'Oct 3, 2:12 PM', what: 'Packed at station 4, Reno, NV' },
+  { at: 'Oct 3, 11:05 AM', what: 'Picked from aisles 12, 14 and 21' },
+  { at: 'Oct 2, 4:55 PM', what: 'Released to the warehouse' },
+  { at: 'Oct 2, 4:31 PM', what: 'Payment captured, card ending 4242' },
+];
+
+export default function DrawerLongContent() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            Tracking history
+          </Button>
+        )}
+      />
+      <DrawerPanel>
+        <DrawerHeader>
+          <DrawerTitle>Tracking 1Z999AA10123456784</DrawerTitle>
+          <DrawerDescription>Shipment SH-4471, 16 events since 2 October.</DrawerDescription>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <Stack gap={4}>
+            {EVENTS.map((event) => (
+              <Stack key={event.at} gap={0}>
+                <Text size="sm" tone="muted">
+                  {event.at}
+                </Text>
+                <Text size="sm">{event.what}</Text>
+              </Stack>
+            ))}
+          </Stack>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+          <Button>Email to customer</Button>
+        </DrawerFooter>
+      </DrawerPanel>
+    </Drawer>
+  );
+}
+```
+
+### non-modal.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+
+const RATES = [
+  { term: 'UPS Ground', value: '$38.40, 3 business days' },
+  { term: 'FedEx Home Delivery', value: '$41.15, 3 business days' },
+  { term: 'UPS 2nd Day Air', value: '$96.80, 2 business days' },
+  { term: 'FedEx Priority Overnight', value: '$184.25, next business day' },
+];
+
+export default function DrawerNonModal() {
+  return (
+    <Stack gap={4}>
+      <Field>
+        <FieldLabel>Shipping charge</FieldLabel>
+        <TextField inputMode="decimal" placeholder="0.00" />
+        <FieldDescription>Charged to Contoso Foods on invoice INV-2041.</FieldDescription>
+      </Field>
+      <Inline>
+        <Drawer modal={false} outsidePress="none" scrimFrom={1} size="sm">
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} size="sm" tone="secondary" variant="outline">
+                Show carrier rates
+              </Button>
+            )}
+          />
+          <DrawerPanel>
+            <DrawerHeader>
+              <DrawerTitle>Carrier rates</DrawerTitle>
+              <DrawerDescription>3 packages, 18.4 kg, Reno to Seattle.</DrawerDescription>
+              <DrawerClose />
+            </DrawerHeader>
+            <DrawerBody>
+              <DescriptionList>
+                {RATES.map((rate) => (
+                  <DescriptionListItem key={rate.term}>
+                    <DescriptionListTerm>{rate.term}</DescriptionListTerm>
+                    <DescriptionListDescription>{rate.value}</DescriptionListDescription>
+                  </DescriptionListItem>
+                ))}
+              </DescriptionList>
+            </DrawerBody>
+          </DrawerPanel>
+        </Drawer>
+      </Inline>
+    </Stack>
+  );
+}
+```
+
+### pin.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Field, FieldLabel } from '@slotted/react/field';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { Textarea } from '@slotted/react/textarea';
+
+const DETAILS = [
+  { term: 'Customer', value: 'Contoso Foods, Seattle' },
+  { term: 'Items', value: '14 cases, 3 products' },
+  { term: 'Warehouse', value: 'Reno, NV' },
+];
+
+export default function DrawerPin() {
+  const [open, setOpen] = useState(false);
+  const [pinned, setPinned] = useState(false);
+
+  return (
+    <Drawer mode={pinned ? 'inline' : 'overlay'} open={open} onOpenChange={setOpen} size="sm">
+      <Stack gap={3}>
+        <Inline>
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} size="sm" tone="secondary" variant="outline">
+                Notes
+              </Button>
+            )}
+          />
+        </Inline>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            minBlockSize: '18rem',
+            border: '1px solid var(--slotted-border-subtle)',
+            borderRadius: 'var(--slotted-radius-lg)',
+            overflow: 'hidden',
+          }}
+        >
+          <div style={{ flex: '1 1 12rem', padding: 'var(--slotted-space-6)' }}>
+            <DescriptionList>
+              {DETAILS.map((detail) => (
+                <DescriptionListItem key={detail.term}>
+                  <DescriptionListTerm>{detail.term}</DescriptionListTerm>
+                  <DescriptionListDescription>{detail.value}</DescriptionListDescription>
+                </DescriptionListItem>
+              ))}
+            </DescriptionList>
+          </div>
+          <DrawerPanel>
+            <DrawerHeader>
+              <DrawerTitle>Notes on SO-1182</DrawerTitle>
+              <DrawerClose />
+            </DrawerHeader>
+            <DrawerBody>
+              <Field>
+                <FieldLabel>Note for the warehouse</FieldLabel>
+                <Textarea placeholder="Pallet height, dock number, contact on site" />
+              </Field>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                size="sm"
+                tone="secondary"
+                variant="outline"
+                onClick={() => setPinned(!pinned)}
+              >
+                {pinned ? 'Unpin' : 'Pin beside the order'}
+              </Button>
+            </DrawerFooter>
+          </DrawerPanel>
+        </div>
+      </Stack>
+    </Drawer>
+  );
+}
+```
+
+### sides.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Inline } from '@slotted/react/inline';
+import { Text } from '@slotted/react/typography';
+
+const SIDES = [
+  {
+    side: 'start',
+    label: 'Start',
+    title: 'Warehouses',
+    body: 'Reno, Columbus and Savannah. A panel from the start edge suits navigation between sites.',
+  },
+  {
+    side: 'end',
+    label: 'End',
+    title: 'Order SO-1182',
+    body: 'Contoso Foods, 14 cases. The end edge is the default and suits the details of a row.',
+  },
+  {
+    side: 'top',
+    label: 'Top',
+    title: 'Carrier notice',
+    body: 'UPS pickups from Reno run two hours late today. A panel from the top suits a notice that belongs to the whole screen.',
+  },
+  {
+    side: 'bottom',
+    label: 'Bottom',
+    title: '3 orders selected',
+    body: 'SO-1182, SO-1183 and SO-1184. A sheet from the bottom suits actions on a phone, within reach of the thumb.',
+  },
+] as const;
+
+export default function DrawerSides() {
+  return (
+    <Inline gap={2}>
+      {SIDES.map((item) => (
+        <Drawer key={item.side} side={item.side}>
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                {item.label}
+              </Button>
+            )}
+          />
+          <DrawerPanel>
+            <DrawerHeader>
+              <DrawerTitle>{item.title}</DrawerTitle>
+              <DrawerClose />
+            </DrawerHeader>
+            <DrawerBody>
+              <Text size="sm">{item.body}</Text>
+            </DrawerBody>
+          </DrawerPanel>
+        </Drawer>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### sizes.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Inline } from '@slotted/react/inline';
+import { Text } from '@slotted/react/typography';
+
+const SIZES = [
+  { size: 'sm', body: '18rem. One field or a short list, such as the carrier for a shipment.' },
+  { size: 'md', body: '24rem, the default. The details of an order or a short form.' },
+  { size: 'lg', body: '30rem. A record with a table of lines, such as the items of an order.' },
+  { size: 'xl', body: '40rem. Two columns, such as a customer and their open orders.' },
+  { size: 'full', body: 'The whole screen. A task that needs every column, such as a pick list.' },
+] as const;
+
+export default function DrawerSizes() {
+  return (
+    <Inline gap={2}>
+      {SIZES.map((item) => (
+        <Drawer key={item.size} size={item.size}>
+          <DrawerTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                {item.size}
+              </Button>
+            )}
+          />
+          <DrawerPanel>
+            <DrawerHeader>
+              <DrawerTitle>Shipment SH-4471</DrawerTitle>
+              <DrawerClose />
+            </DrawerHeader>
+            <DrawerBody>
+              <Text size="sm">{item.body}</Text>
+            </DrawerBody>
+          </DrawerPanel>
+        </Drawer>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### snap-points.tsx
+
+Example
+
+```tsx
+import { Badge } from '@slotted/react/badge';
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerResizer,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+const SHIPMENTS = [
+  { id: 'SH-4471', to: 'Contoso Foods, Seattle', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4472', to: 'Fabrikam Grocers, Portland', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4473', to: 'Tailspin Market, Boise', status: 'Delayed', tone: 'warning' },
+  { id: 'SH-4474', to: 'Adventure Works, Denver', status: 'In transit', tone: 'accent' },
+  {
+    id: 'SH-4475',
+    to: 'Litware Deli, Salt Lake City',
+    status: 'Out for delivery',
+    tone: 'success',
+  },
+  { id: 'SH-4476', to: 'Proseware Cafe, Spokane', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4477', to: 'Wingtip Bakery, Eugene', status: 'Delayed', tone: 'warning' },
+  { id: 'SH-4478', to: 'Coho Winery, Walla Walla', status: 'Out for delivery', tone: 'success' },
+  { id: 'SH-4479', to: 'Northwind Outlet, Reno', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4480', to: 'Fourth Coffee, Tacoma', status: 'In transit', tone: 'accent' },
+] as const;
+
+export default function DrawerSnapPoints() {
+  return (
+    <Drawer defaultExtent={0.4} side="bottom" snapPoints={[0.4, 0.9]}>
+      <DrawerTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            Shipments in transit
+          </Button>
+        )}
+      />
+      <DrawerPanel>
+        <DrawerResizer />
+        <DrawerHeader>
+          <DrawerTitle>Shipments in transit</DrawerTitle>
+          <DrawerDescription>10 shipments left the Reno warehouse this week.</DrawerDescription>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <Stack gap={3}>
+            {SHIPMENTS.map((shipment) => (
+              <Inline key={shipment.id} align="center" gap={3} justify="between">
+                <Stack gap={0}>
+                  <Text size="sm" weight="semibold">
+                    {shipment.id}
+                  </Text>
+                  <Text size="sm" tone="muted">
+                    {shipment.to}
+                  </Text>
+                </Stack>
+                <Badge tone={shipment.tone}>{shipment.status}</Badge>
+              </Inline>
+            ))}
+          </Stack>
+        </DrawerBody>
+      </DrawerPanel>
+    </Drawer>
+  );
+}
+```
+
+### unsaved-changes.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@slotted/react/drawer';
+import { Field, FieldLabel } from '@slotted/react/field';
+import { InlineMessage } from '@slotted/react/inline-message';
+import { Textarea } from '@slotted/react/textarea';
+
+export default function DrawerUnsavedChanges() {
+  const [open, setOpen] = useState(false);
+  const [saved, setSaved] = useState('Leave at the loading dock, door 3.');
+  const [draft, setDraft] = useState(saved);
+  const [confirming, setConfirming] = useState(false);
+
+  const close = () => {
+    setConfirming(false);
+    setOpen(false);
+  };
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={(next, request) => {
+        if (next) {
+          setDraft(saved);
+          setConfirming(false);
+        } else if (draft !== saved) {
+          request.cancel();
+          setConfirming(true);
+          return;
+        }
+        setOpen(next);
+      }}
+    >
+      <DrawerTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            Delivery instructions
+          </Button>
+        )}
+      />
+      <DrawerPanel>
+        <DrawerHeader>
+          <DrawerTitle>Delivery instructions</DrawerTitle>
+          <DrawerDescription>Order SO-1182, printed on the packing slip.</DrawerDescription>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <Field>
+            <FieldLabel>Instructions for the carrier</FieldLabel>
+            <Textarea
+              value={draft}
+              onValueChange={(value) => {
+                setDraft(value);
+                setConfirming(false);
+              }}
+            />
+          </Field>
+        </DrawerBody>
+        <DrawerFooter>
+          {confirming ? (
+            <>
+              <InlineMessage live="polite" tone="warning">
+                Discard your changes to the instructions?
+              </InlineMessage>
+              <Button variant="ghost" tone="secondary" onClick={() => setConfirming(false)}>
+                Keep editing
+              </Button>
+              <Button tone="danger" onClick={close}>
+                Discard
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="ghost"
+                tone="secondary"
+                onClick={() => (draft === saved ? close() : setConfirming(true))}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() => {
+                  setSaved(draft);
+                  close();
+                }}
+              >
+                Save
+              </Button>
+            </>
+          )}
+        </DrawerFooter>
+      </DrawerPanel>
+    </Drawer>
+  );
+}
+```