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

package/dist/docs/drawer.json

@@ -0,0 +1,756 @@
+{
+  "family": "drawer",
+  "ui": "drawer",
+  "binding": "react",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Panel that slides in from an edge."
+  },
+  "axes": {
+    "mode": [
+      "overlay",
+      "inline"
+    ],
+    "side": [
+      "start",
+      "end",
+      "top",
+      "bottom"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full",
+      "content"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "modal": [
+      true,
+      false
+    ],
+    "escape": [
+      "close",
+      "none"
+    ],
+    "outsidePress": [
+      "close",
+      "none"
+    ],
+    "back": [
+      "close",
+      "none"
+    ],
+    "drag": [
+      "panel",
+      "resizer"
+    ]
+  },
+  "members": {
+    "drawer": {
+      "nativeElement": "div",
+      "role": "dialog",
+      "defaults": {
+        "mode": "overlay",
+        "side": "end",
+        "size": "md",
+        "mount": "active",
+        "modal": true,
+        "escape": "close",
+        "outsidePress": "close",
+        "back": "close",
+        "drag": "panel",
+        "minExtent": 0.2,
+        "maxExtent": 1,
+        "loading": false,
+        "scrimFrom": 0
+      },
+      "fixed": {
+        "modalUnderInline": false
+      },
+      "capabilities": [
+        "open",
+        "extent",
+        "size",
+        "placement",
+        "appearance",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "loading",
+        "dragging"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "backdrop",
+        "panel",
+        "resizer",
+        "line",
+        "grip",
+        "header",
+        "title",
+        "description",
+        "body",
+        "footer",
+        "close"
+      ]
+    }
+  },
+  "docs": {
+    "drawer": {
+      "imports": {
+        "source": "import { Drawer, DrawerBody, DrawerClose, DrawerDefaultsProvider, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerResizer, DrawerTitle, DrawerTrigger } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, in a portal under mode=\"overlay\"",
+          "required": true,
+          "purpose": "The layer. Under mode=\"overlay\" it is fixed to the viewport and stacked above the page; under mode=\"inline\" it is a box in your own layout, and its own width or height is what opens and closes. It carries data-ui=\"drawer\", every axis as a data attribute, and data-open, data-loading and data-dragging."
+        },
+        {
+          "part": "trigger",
+          "element": "button, or the element render returns",
+          "required": false,
+          "purpose": "The control that opens and closes the drawer, rendered where it is written. It carries aria-expanded and aria-controls in both modes, and aria-haspopup=\"dialog\" only under mode=\"overlay\", because an inline drawer is a disclosure. A press on it is never read as a press outside the drawer."
+        },
+        {
+          "part": "backdrop",
+          "element": "div",
+          "required": false,
+          "purpose": "The scrim behind the panel, painted from --slotted-drawer-scrim under mode=\"overlay\" whether the drawer is modal or not, and not painted while the measure is below scrimFrom. It takes a press like the page would, so a press on it is a press outside the drawer. Set --slotted-drawer-scrim: transparent to paint none."
+        },
+        {
+          "part": "panel",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The surface, aligned to side. Under mode=\"overlay\" it carries role=\"dialog\", and aria-modal=\"true\" while modal; under mode=\"inline\" it has no role, so use render to make it a nav or an aside. Its rows are the header, the body and the footer, and only the body scrolls."
+        },
+        {
+          "part": "resizer",
+          "element": "div with role=\"separator\"",
+          "required": false,
+          "purpose": "The separator the reader drags, or focuses and moves with the keyboard, to resize the panel. Rendering it is what makes the drawer resizable. It carries role=\"separator\", tabindex=\"0\", aria-orientation, aria-valuenow, aria-valuemin and aria-valuemax as percentages, aria-controls naming the panel and aria-labelledby naming the title. On start and end it sits on the panel’s inner edge; on top and bottom it is the grip above the header."
+        },
+        {
+          "part": "line",
+          "element": "span",
+          "required": true,
+          "purpose": "A hairline on each side of the grip on start and end, which runs the whole edge under the pointer, under focus and during a drag. It is not drawn on top and bottom."
+        },
+        {
+          "part": "grip",
+          "element": "span[aria-hidden]",
+          "required": true,
+          "purpose": "The mark the pointer aims at: a dot grid on start and end, and a pill above the header on top and bottom. It is hidden from assistive technology, because the separator around it is already named and valued."
+        },
+        {
+          "part": "header",
+          "element": "header, or the element render returns",
+          "required": false,
+          "purpose": "Lays out the title and the description in one column and the close button in another, so a title that wraps grows the row instead of moving the button."
+        },
+        {
+          "part": "title",
+          "element": "h2, or the element render returns",
+          "required": false,
+          "purpose": "The visible name of the drawer. The panel and the separator point at it with aria-labelledby, and only while it is rendered."
+        },
+        {
+          "part": "description",
+          "element": "p, or the element render returns",
+          "required": false,
+          "purpose": "The sentence under the title. The panel points at it with aria-describedby while it is rendered."
+        },
+        {
+          "part": "body",
+          "element": "div, or the element render returns",
+          "required": false,
+          "purpose": "The row that scrolls, and the row that carries aria-busy while loading is set. A wheel that reaches its end does not scroll the page behind. inset=\"none\" removes its padding, for content that brings its own, such as a list that runs to the panel’s edges."
+        },
+        {
+          "part": "footer",
+          "element": "footer, or the element render returns",
+          "required": false,
+          "purpose": "The actions, in a wrapping row aligned to the end, on a sunken surface with a rule above it."
+        },
+        {
+          "part": "close",
+          "element": "button",
+          "required": false,
+          "purpose": "The ✕ button. Its target is at least --slotted-target-min in both directions. It closes the drawer with the reason dismiss, and its value is the result of that close."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "Whether the drawer is open, when you own the state. Update it from onOpenChange."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "Whether an uncontrolled drawer starts open. It is read once, on mount."
+        },
+        {
+          "name": "extent",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "The panel’s measure, when you own it: a fraction from 0 to 1 of the screen, or of your layout under mode=\"inline\". undefined means the size step decides. Update it from onExtentChange."
+        },
+        {
+          "name": "defaultExtent",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "The measure an uncontrolled drawer starts at. It is read once, on mount."
+        },
+        {
+          "name": "minExtent",
+          "type": "number",
+          "defaultValue": "0.2",
+          "appliesTo": "Drawer",
+          "description": "The smallest measure the reader can set, and the separator’s aria-valuemin. A drag released below it asks to close the drawer, with the reason pointer."
+        },
+        {
+          "name": "maxExtent",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "Drawer",
+          "description": "The largest measure the reader can set, and the separator’s aria-valuemax. With snap points, both limits default to the first and the last stop."
+        },
+        {
+          "name": "snapPoints",
+          "type": "readonly number[]",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "The stops the measure moves between, as fractions. With them an arrow key moves to the next stop, Home and End go to the first and the last, and a drag is released onto the nearest."
+        },
+        {
+          "name": "mode",
+          "type": "'overlay' | 'inline'",
+          "defaultValue": "overlay",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "overlay puts the drawer over the page, in a portal; inline puts it in your own layout. The value can change while the drawer is open, and the panel’s content and the state of its fields are kept across the change."
+        },
+        {
+          "name": "side",
+          "type": "'start' | 'end' | 'top' | 'bottom'",
+          "defaultValue": "end",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "The edge the panel comes from. start and end follow the writing direction, so the drawer changes sides in a right-to-left document."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full' | 'content'",
+          "defaultValue": "md",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. When unset, content on top and bottom and md on start and end. A step wider than the screen is held to it."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "When an overlay layer is in the document: active only while it is open or closing, lazy from the first open on, and eager from the start, inert while closed. An inline drawer is always in the document."
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "Whether the page behind is inert, its scroll is locked and focus is contained in the panel, and whether the panel carries aria-modal. The scrim is painted either way. Always false under mode=\"inline\"."
+        },
+        {
+          "name": "escape",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "Whether Escape asks to close the drawer. Escape reaches only the topmost layer, and a layer that refuses it does not pass it to the one below."
+        },
+        {
+          "name": "outsidePress",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "Whether a press outside the layer, the scrim included, asks to close the drawer. It has no effect under mode=\"inline\"."
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "Whether the browser’s back button or a phone’s back gesture closes a modal drawer instead of leaving the page. The drawer holds one history entry while it is open. It has no effect under mode=\"inline\"."
+        },
+        {
+          "name": "drag",
+          "type": "'panel' | 'resizer'",
+          "defaultValue": "panel",
+          "appliesTo": "Drawer, DrawerDefaultsProvider",
+          "description": "What a touch moves a bottom sheet by: panel, anywhere on the panel, or resizer, the separator only. With panel, a drag that starts in a list scrolled away from its top scrolls the list. A mouse or a pen always drags the separator."
+        },
+        {
+          "name": "scrimFrom",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Drawer",
+          "description": "While the measure is below this fraction, the scrim is not painted, a press reaches the page, and the root carries data-undimmed. Use it with modal={false} and outsidePress=\"none\"."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Drawer",
+          "description": "Marks the body as busy with aria-busy and gives it a minimum height, so the panel does not jump when the content arrives. The header, the ✕, Escape and the separator stay available."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DrawerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "Words laid over the current language, key by key: close, the name of the ✕. An aria-label on DrawerClose takes precedence."
+        },
+        {
+          "name": "initialFocus",
+          "type": "'first' | 'container' | RefObject | false",
+          "defaultValue": "first",
+          "appliesTo": "Drawer",
+          "description": "Where focus goes when an overlay drawer opens: first, the first focusable element; container, the panel itself, for content that is read before it is used; a ref; or false, nowhere. An inline drawer moves no focus."
+        },
+        {
+          "name": "finalFocus",
+          "type": "RefObject | false",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "Where focus goes when the drawer closes, as a ref, or false for nowhere. When unset, it returns to the element that had focus when the drawer opened, usually the trigger."
+        },
+        {
+          "name": "inset",
+          "type": "'none'",
+          "defaultValue": "—",
+          "appliesTo": "DrawerBody",
+          "description": "none removes the body’s padding, for content that brings its own inset, such as a page or a list that runs to the panel’s edges."
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "defaultValue": "16",
+          "appliesTo": "DrawerResizer",
+          "description": "How far one arrow key moves the separator, in pixels, when there are no snap points."
+        },
+        {
+          "name": "largeStep",
+          "type": "number",
+          "defaultValue": "64",
+          "appliesTo": "DrawerResizer",
+          "description": "How far Shift and an arrow key move the separator, in pixels, when there are no snap points."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DrawerClose",
+          "description": "The result of a close from this button, carried on the close request as result."
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Replaces the element a part renders and passes it every attribute the drawer wrote. On DrawerPanel it replaces the panel, not the layer, which is how an inline drawer becomes a nav or an aside."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<DrawerHandle> on Drawer, Ref<HTMLElement> on every part",
+          "defaultValue": "—",
+          "appliesTo": "Drawer, every part",
+          "description": "On a part, the element. On Drawer, a handle with open(), close(result), focus() and panel, the panel element once it is in the document."
+        },
+        {
+          "name": "container",
+          "type": "Element | null",
+          "defaultValue": "—",
+          "appliesTo": "Drawer",
+          "description": "An element to portal this layer into instead of the shared portal root, for an application shell with its own stacking context. setPortalContainer from @slotted/core/portal sets one for the whole document."
+        },
+        {
+          "name": "useDrawer()",
+          "type": "() => DrawerContextValue",
+          "defaultValue": "—",
+          "appliesTo": "inside Drawer",
+          "description": "Reads the drawer inside Drawer: whether it is open, the measure, the ids, the resolved axes and close(reason, result). It throws outside a drawer."
+        },
+        {
+          "name": "DrawerDefaultsProvider",
+          "type": "{ mode, side, size, mount, modal, escape, outsidePress, back, drag }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets these nine axes for every drawer under it. A value set on one drawer still wins."
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: DrawerChangeRequest)",
+          "when": "Before the drawer opens or closes, for every way it can: the trigger, the ✕, Escape, a press outside, the back gesture and the handle. The request carries value, previous, reason (pointer, keyboard, dismiss, escape, outsidePress, back or programmatic), result, the source event and cancel(), which keeps the drawer as it is."
+        },
+        {
+          "name": "onExtentChange",
+          "payload": "(extent: number | undefined, request: DrawerExtentRequest)",
+          "when": "Before the panel’s measure changes, with the reason pointer for a drag or a tap on the grip, keyboard for an arrow key, Home, End or Enter, and programmatic for a change from code. A drag of the separator fires on every pointer move and can report a value below minExtent; a drag of a sheet’s body fires once, on release, with the stop it landed on. undefined means the panel is back on its size step, or on the height of its content under size=\"content\"."
+        },
+        {
+          "name": "onClick, onKeyDown, onPointerDown, on every part",
+          "payload": "the element’s own events",
+          "when": "Whenever the element fires them. Your handler runs first, and preventDefault() in it cancels the drawer’s own behaviour for that event."
+        }
+      ],
+      "accessibility": [
+        "Under mode=\"overlay\" the drawer follows the WAI-ARIA dialog (modal) pattern. While it is modal, Tab and Shift+Tab move through the panel and wrap at its ends. Escape closes it, and reaches only the topmost layer, so one press never closes two drawers.",
+        "Under mode=\"inline\" the panel has no role, because a navigation drawer is a navigation landmark and a filter panel is complementary; give it one with render. The trigger has no aria-haspopup there, because an inline drawer is a disclosure, not a popup.",
+        "aria-modal=\"true\" is written only while the drawer is modal, which is the only state in which the page behind is inert. modal is always false under mode=\"inline\".",
+        "The separator follows the WAI-ARIA window splitter pattern. The arrow keys move it in the direction they point, Home and End go to the limits, and Enter collapses the panel to its minimum and then restores it. Enter never closes the drawer; Escape does. The values are percentages, and there is no aria-valuetext, so a screen reader announces 40 rather than 40 per cent.",
+        "A bottom sheet moves under a touch on its body as well as on its separator, and every stop a finger reaches, the height of the content among them, is also reachable with the arrow keys on the separator. A touch drag never starts on a field, on selected text, or on an element whose touch-action already takes vertical movement.",
+        "A closed panel is inert in both modes, so its controls are in neither the tab order nor the accessibility tree.",
+        "Focus moves into an overlay panel when it opens, to the first focusable element unless initialFocus names another, and returns on close to the element that had it before; if that element has left the document, focus goes to its nearest ancestor still in it. An inline drawer moves no focus when it opens, and on close restores focus only when focus is inside the panel or on the page body.",
+        "The ✕ button and the separator are each at least --slotted-target-min across, so both meet the WCAG 2.2 minimum target size of 24 by 24 pixels."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-drawer-body-color",
+    "--slotted-drawer-border-color",
+    "--slotted-drawer-close-active-background",
+    "--slotted-drawer-close-color",
+    "--slotted-drawer-close-hover-background",
+    "--slotted-drawer-color",
+    "--slotted-drawer-description-color",
+    "--slotted-drawer-extent",
+    "--slotted-drawer-extent-lg",
+    "--slotted-drawer-extent-md",
+    "--slotted-drawer-extent-sm",
+    "--slotted-drawer-extent-xl",
+    "--slotted-drawer-footer-surface",
+    "--slotted-drawer-radius",
+    "--slotted-drawer-resizer-line-active-color",
+    "--slotted-drawer-resizer-line-color",
+    "--slotted-drawer-rule-color",
+    "--slotted-drawer-scrim",
+    "--slotted-drawer-sheet-inline-size",
+    "--slotted-drawer-surface",
+    "--slotted-drawer-title-color",
+    "--slotted-drawer-title-font-family",
+    "--slotted-duration-instant",
+    "--slotted-duration-long",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-radius-full",
+    "--slotted-radius-lg",
+    "--slotted-radius-sm",
+    "--slotted-scrim",
+    "--slotted-shadow-lg",
+    "--slotted-space-11",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface-raised",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-overlay"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer>\n  <DrawerTrigger>Abrir detalhes</DrawerTrigger>\n  <DrawerPanel>\n    <DrawerHeader>\n      <DrawerTitle>Fatura 4471</DrawerTitle>\n      <DrawerDescription>Emitida em 12 de agosto.</DrawerDescription>\n      <DrawerClose />\n    </DrawerHeader>\n    <DrawerBody>\n      <TextField label=\"Observação\" />\n    </DrawerBody>\n    <DrawerFooter>\n      <Button variant=\"ghost\" tone=\"secondary\">\n        Cancelar\n      </Button>\n      <Button>Salvar</Button>\n    </DrawerFooter>\n  </DrawerPanel>\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "mode",
+      "title": "A layer over the page, or a panel beside it",
+      "note": "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.",
+      "language": "tsx",
+      "source": "const wide = useMediaQuery('(min-width: 60rem)');\n\n<div style={{ display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)' }}>\n  <Drawer mode={wide ? 'inline' : 'overlay'} open={open} side=\"start\">\n    <DrawerPanel render={(props) => <nav {...props} aria-label=\"Seções\" />}>…</DrawerPanel>\n  </Drawer>\n  <main>…</main>\n</div>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "side",
+      "title": "Which edge it comes from",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer side=\"bottom\">\n  <DrawerTrigger>Filtrar</DrawerTrigger>\n  <DrawerPanel>…</DrawerPanel>\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "size",
+      "title": "How much room the panel takes",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer size=\"lg\">…</Drawer>;\n\n// An exact measure is the token the steps resolve into.\n<Drawer style={{ '--slotted-drawer-extent': '27rem' }}>…</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "resize",
+      "title": "An edge the reader can move — with a keyboard",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerResizer,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\n\nconst LINES = [\n  { term: 'Arabica beans, 5 kg', value: '6 cases, $420.00' },\n  { term: 'Oat milk, 12 × 1 L', value: '4 cases, $192.00' },\n  { term: 'Paper cups, 16 oz, 1,000 per case', value: '4 cases, $628.00' },\n];\n\nexport default function DrawerResize() {\n  const [extent, setExtent] = useState<number | undefined>(undefined);\n  const width = extent === undefined ? 'the md step' : `${Math.round(extent * 100)}% of the window`;\n\n  return (\n    <Drawer extent={extent} maxExtent={0.8} minExtent={0.25} onExtentChange={setExtent}>\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            View order lines\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerHeader>\n          <DrawerTitle>Order SO-1182 lines</DrawerTitle>\n          <DrawerDescription>Width: {width}.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <DescriptionList>\n            {LINES.map((line) => (\n              <DescriptionListItem key={line.term}>\n                <DescriptionListTerm>{line.term}</DescriptionListTerm>\n                <DescriptionListDescription>{line.value}</DescriptionListDescription>\n              </DescriptionListItem>\n            ))}\n          </DescriptionList>\n        </DrawerBody>\n        <DrawerResizer />\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "snapPoints",
+      "title": "Stops the sheet lands on",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer side=\"bottom\" snapPoints={[0.3, 0.6, 0.95]} defaultExtent={0.3}>\n  <DrawerPanel>\n    <DrawerResizer />\n    <DrawerBody>…</DrawerBody>\n  </DrawerPanel>\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sheet",
+      "title": "A bottom sheet as a phone draws one",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerResizer,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { FieldGroup, FieldGroupContent, FieldGroupLegend } from '@slotted/react/field-group';\nimport { Inline } from '@slotted/react/inline';\nimport { Radio, RadioGroup } from '@slotted/react/radio-group';\nimport { Text } from '@slotted/react/typography';\n\nconst WINDOWS = [\n  { value: 'morning', label: 'Thursday 8 October, 8 AM to noon' },\n  { value: 'afternoon', label: 'Thursday 8 October, 1 to 5 PM' },\n  { value: 'friday', label: 'Friday 9 October, 8 AM to noon' },\n];\n\nexport default function DrawerSheet() {\n  const [open, setOpen] = useState(false);\n  const [pickup, setPickup] = useState('morning');\n  const [draft, setDraft] = useState(pickup);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text size=\"sm\">Pickup: {WINDOWS.find((window) => window.value === pickup)?.label}</Text>\n      <Drawer\n        open={open}\n        onOpenChange={(next) => {\n          if (next) setDraft(pickup);\n          setOpen(next);\n        }}\n        side=\"bottom\"\n      >\n        <DrawerTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n              Reschedule\n            </Button>\n          )}\n        />\n        <DrawerPanel>\n          <DrawerResizer />\n          <DrawerHeader>\n            <DrawerTitle>Reschedule pickup</DrawerTitle>\n            <DrawerDescription>Shipment SH-4471, UPS Ground from Reno, NV.</DrawerDescription>\n            <DrawerClose />\n          </DrawerHeader>\n          <DrawerBody>\n            <FieldGroup>\n              <FieldGroupLegend>Pickup window</FieldGroupLegend>\n              <FieldGroupContent>\n                <RadioGroup value={draft} onValueChange={setDraft}>\n                  {WINDOWS.map((window) => (\n                    <Radio key={window.value} value={window.value}>\n                      {window.label}\n                    </Radio>\n                  ))}\n                </RadioGroup>\n              </FieldGroupContent>\n            </FieldGroup>\n          </DrawerBody>\n          <DrawerFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              onClick={() => {\n                setPickup(draft);\n                setOpen(false);\n              }}\n            >\n              Reschedule\n            </Button>\n          </DrawerFooter>\n        </DrawerPanel>\n      </Drawer>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scrimFrom",
+      "title": "A sheet over a page that stays in use",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer\n  side=\"bottom\"\n  snapPoints={[0.25, 0.6, 0.95]}\n  defaultExtent={0.25}\n  scrimFrom={0.6}\n  modal={false}\n  outsidePress=\"none\"\n>\n  …\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "A sheet above the virtual keyboard",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer side=\"bottom\">\n  <DrawerPanel>\n    <DrawerHeader>\n      <DrawerTitle>Enviar lembrete</DrawerTitle>\n    </DrawerHeader>\n    <DrawerBody>\n      <TextField aria-label=\"Nota para o cliente\" />\n    </DrawerBody>\n    <DrawerFooter>…</DrawerFooter>\n  </DrawerPanel>\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "modal",
+      "title": "A drawer the page behind can still be used",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer modal={false}>\n  <DrawerTrigger>Detalhes do pedido</DrawerTrigger>\n  <DrawerPanel>…</DrawerPanel>\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "policy",
+      "title": "Refusing a close, and refusing it once",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<Drawer\n  open={open}\n  onOpenChange={(next, request) => {\n    if (!next && saving) return request.cancel();\n    setOpen(next);\n  }}\n>\n  …\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "focus",
+      "title": "Where focus goes, and where it comes back to",
+      "note": "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.",
+      "language": "tsx",
+      "source": "const search = useRef<HTMLInputElement>(null);\n\n<Drawer initialFocus={search}>\n  <DrawerTrigger>Buscar</DrawerTrigger>\n  <DrawerPanel>\n    <DrawerBody>\n      <TextField label=\"Buscar\" ref={search} />\n    </DrawerBody>\n  </DrawerPanel>\n</Drawer>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "Open before the content arrived",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { useEffect, useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Skeleton, SkeletonRegion } from '@slotted/react/skeleton';\n\ninterface Shipment {\n  carrier: string;\n  tracking: string;\n  packages: string;\n  delivery: string;\n}\n\nconst FIELDS: { key: keyof Shipment; term: string; width: string }[] = [\n  { key: 'carrier', term: 'Carrier', width: '6rem' },\n  { key: 'tracking', term: 'Tracking number', width: '11rem' },\n  { key: 'packages', term: 'Packages', width: '8rem' },\n  { key: 'delivery', term: 'Estimated delivery', width: '9rem' },\n];\n\nexport default function DrawerLoading() {\n  const [open, setOpen] = useState(false);\n  const [shipment, setShipment] = useState<Shipment | null>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    setShipment(null);\n    const timer = setTimeout(\n      () =>\n        setShipment({\n          carrier: 'UPS Ground',\n          tracking: '1Z 999 AA1 01 2345 6784',\n          packages: '3, 18.4 kg in total',\n          delivery: 'Thursday, 8 October',\n        }),\n      1200,\n    );\n    return () => clearTimeout(timer);\n  }, [open]);\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen} loading={shipment === null}>\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Track shipment SH-4471\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerHeader>\n          <DrawerTitle>Shipment SH-4471</DrawerTitle>\n          <DrawerDescription>Order SO-1182 for Contoso Foods, Seattle.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <SkeletonRegion\n            delay={200}\n            loading={shipment === null}\n            messages={{ label: 'Loading shipment' }}\n            minDuration={400}\n          >\n            <DescriptionList>\n              {FIELDS.map((field) => (\n                <DescriptionListItem key={field.key}>\n                  <DescriptionListTerm>{field.term}</DescriptionListTerm>\n                  <DescriptionListDescription>\n                    {shipment === null ? (\n                      <Skeleton inlineSize={field.width} />\n                    ) : (\n                      shipment[field.key]\n                    )}\n                  </DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n          </SkeletonRegion>\n        </DrawerBody>\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "nested",
+      "title": "A drawer opened from a drawer",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\n\nconst ORDER = [\n  { term: 'Customer', value: 'Contoso Foods' },\n  { term: 'Items', value: '14 cases, 3 products' },\n  { term: 'Total', value: '$1,240.00' },\n];\n\nconst CUSTOMER = [\n  { term: 'Account', value: 'C-0042' },\n  { term: 'Contact', value: 'Ana Ruiz, ap@contoso.com' },\n  { term: 'Open orders', value: '3, $4,815.50 in total' },\n  { term: 'Payment terms', value: 'Net 30' },\n];\n\nexport default function DrawerNested() {\n  return (\n    <Drawer>\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            View order SO-1182\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerHeader>\n          <DrawerTitle>Order SO-1182</DrawerTitle>\n          <DrawerDescription>Placed on 2 October 2026.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <Stack gap={5}>\n            <DescriptionList>\n              {ORDER.map((detail) => (\n                <DescriptionListItem key={detail.term}>\n                  <DescriptionListTerm>{detail.term}</DescriptionListTerm>\n                  <DescriptionListDescription>{detail.value}</DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n            <Inline>\n              <Drawer size=\"sm\">\n                <DrawerTrigger\n                  render={(props) => (\n                    <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n                      View customer\n                    </Button>\n                  )}\n                />\n                <DrawerPanel>\n                  <DrawerHeader>\n                    <DrawerTitle>Contoso Foods</DrawerTitle>\n                    <DrawerDescription>Customer since March 2021.</DrawerDescription>\n                    <DrawerClose />\n                  </DrawerHeader>\n                  <DrawerBody>\n                    <DescriptionList>\n                      {CUSTOMER.map((detail) => (\n                        <DescriptionListItem key={detail.term}>\n                          <DescriptionListTerm>{detail.term}</DescriptionListTerm>\n                          <DescriptionListDescription>{detail.value}</DescriptionListDescription>\n                        </DescriptionListItem>\n                      ))}\n                    </DescriptionList>\n                  </DrawerBody>\n                </DrawerPanel>\n              </Drawer>\n            </Inline>\n          </Stack>\n        </DrawerBody>\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<DrawerPanel>\n  <DrawerHeader>\n    <DrawerTitle>{fileName}</DrawerTitle>\n  </DrawerHeader>\n  <DrawerBody>{longText}</DrawerBody>\n  <DrawerFooter>\n    <Button>Salvar</Button>\n  </DrawerFooter>\n</DrawerPanel>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "The parts are the consumer’s own elements",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<DrawerTrigger render={(props) => <Button {...props} variant=\"outline\" />}>Abrir</DrawerTrigger>;\n\n<DrawerPanel render={(props) => <nav {...props} aria-label=\"Seções\" />}>…</DrawerPanel>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "What an application decides once",
+      "note": "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.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDefaultsProvider,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DrawerDefaults() {\n  return (\n    <DrawerDefaultsProvider side=\"start\" size=\"sm\">\n      <Inline gap={2}>\n        <Drawer>\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                Warehouses\n              </Button>\n            )}\n          />\n          <DrawerPanel>\n            <DrawerHeader>\n              <DrawerTitle>Warehouses</DrawerTitle>\n              <DrawerClose />\n            </DrawerHeader>\n            <DrawerBody>\n              <Text size=\"sm\">From the start edge and small, both from the provider.</Text>\n            </DrawerBody>\n          </DrawerPanel>\n        </Drawer>\n        <Drawer size=\"lg\">\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                Carriers\n              </Button>\n            )}\n          />\n          <DrawerPanel>\n            <DrawerHeader>\n              <DrawerTitle>Carriers</DrawerTitle>\n              <DrawerClose />\n            </DrawerHeader>\n            <DrawerBody>\n              <Text size=\"sm\">\n                From the start edge, from the provider, and large because this drawer says so.\n              </Text>\n            </DrawerBody>\n          </DrawerPanel>\n        </Drawer>\n      </Inline>\n    </DrawerDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears, and what they can reach",
+      "note": "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.",
+      "language": "tsx",
+      "source": "<DrawerPanel>\n  <DrawerHeader>\n    <DrawerTitle>Coleções</DrawerTitle>\n  </DrawerHeader>\n  <DrawerResizer />\n</DrawerPanel>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Badge } from '@slotted/react/badge';\nimport { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\n\nconst DETAILS = [\n  { term: 'Ship to', value: '1200 Harbor Ave, Seattle, WA' },\n  { term: 'Payment', value: 'Captured, card ending 4242' },\n  { term: 'Items', value: '14 cases, 3 products' },\n  { term: 'Warehouse', value: 'Reno, NV' },\n  { term: 'Total', value: '$1,240.00' },\n];\n\nexport default function DrawerBasic() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            View order SO-1182\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerHeader>\n          <DrawerTitle>Order SO-1182</DrawerTitle>\n          <DrawerDescription>Contoso Foods, placed on 2 October 2026.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <Stack gap={4}>\n            <Inline>\n              <Badge tone=\"accent\">Ready to ship</Badge>\n            </Inline>\n            <DescriptionList>\n              {DETAILS.map((detail) => (\n                <DescriptionListItem key={detail.term}>\n                  <DescriptionListTerm>{detail.term}</DescriptionListTerm>\n                  <DescriptionListDescription>{detail.value}</DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n          </Stack>\n        </DrawerBody>\n        <DrawerFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Close\n          </Button>\n          <Button onClick={() => setOpen(false)}>Create shipment</Button>\n        </DrawerFooter>\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "detail-panel",
+      "title": "detail-panel.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Badge } from '@slotted/react/badge';\nimport { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { VisuallyHidden } from '@slotted/react/visually-hidden';\n\nconst ORDERS = [\n  {\n    id: 'SO-1182',\n    customer: 'Contoso Foods',\n    city: 'Seattle, WA',\n    status: 'Ready to ship',\n    tone: 'accent',\n    items: '14 cases, 3 products',\n    total: '$1,240.00',\n  },\n  {\n    id: 'SO-1183',\n    customer: 'Fabrikam Grocers',\n    city: 'Portland, OR',\n    status: 'Shipped',\n    tone: 'success',\n    items: '6 cases, 2 products',\n    total: '$386.50',\n  },\n  {\n    id: 'SO-1184',\n    customer: 'Tailspin Market',\n    city: 'Boise, ID',\n    status: 'On hold',\n    tone: 'warning',\n    items: '22 cases, 5 products',\n    total: '$2,075.25',\n  },\n  {\n    id: 'SO-1185',\n    customer: 'Adventure Works',\n    city: 'Denver, CO',\n    status: 'Ready to ship',\n    tone: 'accent',\n    items: '9 cases, 4 products',\n    total: '$918.00',\n  },\n] as const;\n\ntype Order = (typeof ORDERS)[number];\n\nexport default function DrawerDetailPanel() {\n  const [open, setOpen] = useState(false);\n  const [order, setOrder] = useState<Order>(ORDERS[0]);\n\n  return (\n    <>\n      <Table columns={4}>\n        <TableContent>\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader numeric>Total</TableColumnHeader>\n              <TableColumnHeader>\n                <VisuallyHidden>Actions</VisuallyHidden>\n              </TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {ORDERS.map((row) => (\n              <TableRow key={row.id} value={row.id}>\n                <TableRowHeader>{row.id}</TableRowHeader>\n                <TableCell>{row.customer}</TableCell>\n                <TableCell numeric>{row.total}</TableCell>\n                <TableCell>\n                  <Button\n                    aria-label={`View ${row.id}`}\n                    size=\"sm\"\n                    tone=\"secondary\"\n                    variant=\"ghost\"\n                    onClick={() => {\n                      setOrder(row);\n                      setOpen(true);\n                    }}\n                  >\n                    View\n                  </Button>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n      <Drawer\n        modal={false}\n        open={open}\n        onOpenChange={setOpen}\n        outsidePress=\"none\"\n        scrimFrom={1}\n        size=\"sm\"\n      >\n        <DrawerPanel>\n          <DrawerHeader>\n            <DrawerTitle>Order {order.id}</DrawerTitle>\n            <DrawerDescription>\n              {order.customer}, {order.city}\n            </DrawerDescription>\n            <DrawerClose />\n          </DrawerHeader>\n          <DrawerBody>\n            <Stack gap={4}>\n              <Inline>\n                <Badge tone={order.tone}>{order.status}</Badge>\n              </Inline>\n              <DescriptionList>\n                <DescriptionListItem>\n                  <DescriptionListTerm>Items</DescriptionListTerm>\n                  <DescriptionListDescription>{order.items}</DescriptionListDescription>\n                </DescriptionListItem>\n                <DescriptionListItem>\n                  <DescriptionListTerm>Total</DescriptionListTerm>\n                  <DescriptionListDescription>{order.total}</DescriptionListDescription>\n                </DescriptionListItem>\n              </DescriptionList>\n            </Stack>\n          </DrawerBody>\n        </DrawerPanel>\n      </Drawer>\n    </>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filters",
+      "title": "filters.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Checkbox } from '@slotted/react/checkbox';\nimport { CheckboxGroup } from '@slotted/react/checkbox-group';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { FieldGroup, FieldGroupContent, FieldGroupLegend } from '@slotted/react/field-group';\nimport { Inline } from '@slotted/react/inline';\nimport { Radio, RadioGroup } from '@slotted/react/radio-group';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst ORDERS = [\n  { id: 'SO-1182', status: 'processing', warehouse: 'RNO' },\n  { id: 'SO-1183', status: 'shipped', warehouse: 'CMH' },\n  { id: 'SO-1184', status: 'on-hold', warehouse: 'RNO' },\n  { id: 'SO-1185', status: 'processing', warehouse: 'SAV' },\n  { id: 'SO-1186', status: 'shipped', warehouse: 'RNO' },\n  { id: 'SO-1187', status: 'processing', warehouse: 'CMH' },\n  { id: 'SO-1188', status: 'on-hold', warehouse: 'SAV' },\n  { id: 'SO-1189', status: 'processing', warehouse: 'RNO' },\n];\n\ninterface Filters {\n  statuses: readonly string[];\n  warehouse: string;\n}\n\nconst ALL: Filters = { statuses: ['processing', 'shipped', 'on-hold'], warehouse: 'any' };\n\nconst matching = (filters: Filters) =>\n  ORDERS.filter(\n    (order) =>\n      filters.statuses.includes(order.status) &&\n      (filters.warehouse === 'any' || order.warehouse === filters.warehouse),\n  ).length;\n\nexport default function DrawerFilters() {\n  const [open, setOpen] = useState(false);\n  const [applied, setApplied] = useState<Filters>(ALL);\n  const [draft, setDraft] = useState<Filters>(applied);\n  const count = matching(draft);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text size=\"sm\">\n        {matching(applied)} of {ORDERS.length} orders\n      </Text>\n      <Drawer\n        open={open}\n        onOpenChange={(next) => {\n          if (next) setDraft(applied);\n          setOpen(next);\n        }}\n        size=\"sm\"\n      >\n        <DrawerTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n              Filters\n            </Button>\n          )}\n        />\n        <DrawerPanel>\n          <DrawerHeader>\n            <DrawerTitle>Filter orders</DrawerTitle>\n            <DrawerClose />\n          </DrawerHeader>\n          <DrawerBody>\n            <Stack gap={6}>\n              <FieldGroup>\n                <FieldGroupLegend>Status</FieldGroupLegend>\n                <FieldGroupContent>\n                  <CheckboxGroup\n                    value={draft.statuses}\n                    onValueChange={(statuses) => setDraft({ ...draft, statuses })}\n                  >\n                    <Checkbox value=\"processing\">Processing</Checkbox>\n                    <Checkbox value=\"shipped\">Shipped</Checkbox>\n                    <Checkbox value=\"on-hold\">On hold</Checkbox>\n                  </CheckboxGroup>\n                </FieldGroupContent>\n              </FieldGroup>\n              <FieldGroup>\n                <FieldGroupLegend>Warehouse</FieldGroupLegend>\n                <FieldGroupContent>\n                  <RadioGroup\n                    value={draft.warehouse}\n                    onValueChange={(warehouse) => setDraft({ ...draft, warehouse })}\n                  >\n                    <Radio value=\"any\">Any warehouse</Radio>\n                    <Radio value=\"RNO\">Reno, NV</Radio>\n                    <Radio value=\"CMH\">Columbus, OH</Radio>\n                    <Radio value=\"SAV\">Savannah, GA</Radio>\n                  </RadioGroup>\n                </FieldGroupContent>\n              </FieldGroup>\n            </Stack>\n          </DrawerBody>\n          <DrawerFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setDraft(ALL)}>\n              Reset\n            </Button>\n            <Button\n              onClick={() => {\n                setApplied(draft);\n                setOpen(false);\n              }}\n            >\n              Show {count} orders\n            </Button>\n          </DrawerFooter>\n        </DrawerPanel>\n      </Drawer>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState, type SubmitEvent } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nconst TERMS: SelectOption[] = [\n  { value: 'due', label: 'Due on receipt' },\n  { value: 'net-15', label: 'Net 15' },\n  { value: 'net-30', label: 'Net 30' },\n  { value: 'net-60', label: 'Net 60' },\n];\n\nconst CUSTOMER = { name: 'Contoso Foods', email: 'ap@contoso.com', terms: 'net-30' };\n\nconst termsLabel = (value: string) => TERMS.find((option) => option.value === value)?.label;\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the name printed on invoices.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address invoices are sent to.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ap@contoso.com.';\n  return '';\n}\n\nexport default function DrawerForm() {\n  const [open, setOpen] = useState(false);\n  const [customer, setCustomer] = useState(CUSTOMER);\n  const [name, setName] = useState(customer.name);\n  const [email, setEmail] = useState(customer.email);\n  const [terms, setTerms] = useState(customer.terms);\n  const [submitted, setSubmitted] = useState(false);\n  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    if (nameError(name) !== '' || emailError(email) !== '') return;\n    setCustomer({ name: name.trim(), email: email.trim(), terms });\n    setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text role=\"status\" size=\"sm\" tone=\"muted\">\n        {customer.name}, {customer.email}, {termsLabel(customer.terms)}\n      </Text>\n      <Drawer\n        open={open}\n        onOpenChange={(next) => {\n          if (next) {\n            setName(customer.name);\n            setEmail(customer.email);\n            setTerms(customer.terms);\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n      >\n        <DrawerTrigger render={(props) => <Button {...props}>Edit customer</Button>} />\n        <DrawerPanel>\n          <DrawerHeader>\n            <DrawerTitle>Edit customer</DrawerTitle>\n            <DrawerDescription>Account C-0042, customer since March 2021.</DrawerDescription>\n            <DrawerClose />\n          </DrawerHeader>\n          <DrawerBody>\n            <form id=\"edit-customer\" noValidate onSubmit={submit}>\n              <Stack gap={4}>\n                <Field required invalid={errors?.name ? true : undefined}>\n                  <FieldLabel>Company name</FieldLabel>\n                  <TextField autoComplete=\"organization\" value={name} onValueChange={setName} />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.name}\n                  </FieldError>\n                </Field>\n                <Field required invalid={errors?.email ? true : undefined}>\n                  <FieldLabel>Billing email</FieldLabel>\n                  <TextField type=\"email\" value={email} onValueChange={setEmail} />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.email}\n                  </FieldError>\n                </Field>\n                <Field>\n                  <FieldLabel>Payment terms</FieldLabel>\n                  <Select\n                    items={TERMS}\n                    value={terms}\n                    onValueChange={(value) =>\n                      setTerms(typeof value === 'string' ? value : customer.terms)\n                    }\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {TERMS.map((option) => (\n                        <SelectItem key={option.value} value={option.value}>\n                          {option.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </Stack>\n            </form>\n          </DrawerBody>\n          <DrawerFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"edit-customer\">\n              Save customer\n            </Button>\n          </DrawerFooter>\n        </DrawerPanel>\n      </Drawer>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "inline",
+      "title": "inline.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Badge } from '@slotted/react/badge';\nimport { Button } from '@slotted/react/button';\nimport { Checkbox } from '@slotted/react/checkbox';\nimport { CheckboxGroup } from '@slotted/react/checkbox-group';\nimport { Drawer, DrawerBody, DrawerPanel, DrawerTrigger } from '@slotted/react/drawer';\nimport { FieldGroup, FieldGroupContent, FieldGroupLegend } from '@slotted/react/field-group';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst STATUSES = [\n  { value: 'processing', label: 'Processing', tone: 'accent' },\n  { value: 'shipped', label: 'Shipped', tone: 'success' },\n  { value: 'on-hold', label: 'On hold', tone: 'warning' },\n] as const;\n\nconst ORDERS = [\n  { id: 'SO-1182', customer: 'Contoso Foods', status: 'processing' },\n  { id: 'SO-1183', customer: 'Fabrikam Grocers', status: 'shipped' },\n  { id: 'SO-1184', customer: 'Tailspin Market', status: 'on-hold' },\n  { id: 'SO-1185', customer: 'Adventure Works', status: 'processing' },\n  { id: 'SO-1186', customer: 'Litware Deli', status: 'shipped' },\n] as const;\n\nexport default function DrawerInline() {\n  const [statuses, setStatuses] = useState<readonly string[]>(['processing', 'on-hold']);\n  const shown = ORDERS.filter((order) => statuses.includes(order.status));\n\n  return (\n    <Drawer defaultOpen mode=\"inline\" side=\"start\" size=\"sm\">\n      <Stack gap={3}>\n        <Inline>\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n                Filters\n              </Button>\n            )}\n          />\n        </Inline>\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            minBlockSize: '16rem',\n            border: '1px solid var(--slotted-border-subtle)',\n            borderRadius: 'var(--slotted-radius-lg)',\n            overflow: 'hidden',\n          }}\n        >\n          <DrawerPanel>\n            <DrawerBody>\n              <FieldGroup>\n                <FieldGroupLegend>Status</FieldGroupLegend>\n                <FieldGroupContent>\n                  <CheckboxGroup value={statuses} onValueChange={setStatuses}>\n                    {STATUSES.map((status) => (\n                      <Checkbox key={status.value} value={status.value}>\n                        {status.label}\n                      </Checkbox>\n                    ))}\n                  </CheckboxGroup>\n                </FieldGroupContent>\n              </FieldGroup>\n            </DrawerBody>\n          </DrawerPanel>\n          <Stack gap={3} style={{ flex: '1 1 12rem', padding: 'var(--slotted-space-6)' }}>\n            <Text size=\"sm\" tone=\"muted\">\n              {shown.length} of {ORDERS.length} orders\n            </Text>\n            {shown.map((order) => {\n              const status = STATUSES.find((item) => item.value === order.status)!;\n              return (\n                <Inline key={order.id} align=\"center\" gap={3} justify=\"between\">\n                  <Stack gap={0}>\n                    <Text size=\"sm\" weight=\"semibold\">\n                      {order.id}\n                    </Text>\n                    <Text size=\"sm\" tone=\"muted\">\n                      {order.customer}\n                    </Text>\n                  </Stack>\n                  <Badge tone={status.tone}>{status.label}</Badge>\n                </Inline>\n              );\n            })}\n          </Stack>\n        </div>\n      </Stack>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-content",
+      "title": "long-content.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst EVENTS = [\n  { at: 'Oct 6, 7:42 AM', what: 'Out for delivery, Seattle, WA' },\n  { at: 'Oct 6, 5:10 AM', what: 'Arrived at the delivery facility, Seattle, WA' },\n  { at: 'Oct 5, 11:58 PM', what: 'Departed facility, Portland, OR' },\n  { at: 'Oct 5, 9:20 PM', what: 'Arrived at facility, Portland, OR' },\n  { at: 'Oct 5, 2:04 PM', what: 'Departed facility, Medford, OR' },\n  { at: 'Oct 5, 10:37 AM', what: 'Arrived at facility, Medford, OR' },\n  { at: 'Oct 4, 11:15 PM', what: 'Departed facility, Sacramento, CA' },\n  { at: 'Oct 4, 6:48 PM', what: 'Arrived at facility, Sacramento, CA' },\n  { at: 'Oct 4, 1:30 PM', what: 'Departed facility, Reno, NV' },\n  { at: 'Oct 4, 9:02 AM', what: 'Processed at the origin facility, Reno, NV' },\n  { at: 'Oct 3, 6:15 PM', what: 'Picked up from the Northwind warehouse, Reno, NV' },\n  { at: 'Oct 3, 4:40 PM', what: 'Weighed and labelled: 3 packages, 18.4 kg' },\n  { at: 'Oct 3, 2:12 PM', what: 'Packed at station 4, Reno, NV' },\n  { at: 'Oct 3, 11:05 AM', what: 'Picked from aisles 12, 14 and 21' },\n  { at: 'Oct 2, 4:55 PM', what: 'Released to the warehouse' },\n  { at: 'Oct 2, 4:31 PM', what: 'Payment captured, card ending 4242' },\n];\n\nexport default function DrawerLongContent() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Tracking history\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerHeader>\n          <DrawerTitle>Tracking 1Z999AA10123456784</DrawerTitle>\n          <DrawerDescription>Shipment SH-4471, 16 events since 2 October.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <Stack gap={4}>\n            {EVENTS.map((event) => (\n              <Stack key={event.at} gap={0}>\n                <Text size=\"sm\" tone=\"muted\">\n                  {event.at}\n                </Text>\n                <Text size=\"sm\">{event.what}</Text>\n              </Stack>\n            ))}\n          </Stack>\n        </DrawerBody>\n        <DrawerFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Close\n          </Button>\n          <Button>Email to customer</Button>\n        </DrawerFooter>\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "non-modal",
+      "title": "non-modal.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\n\nconst RATES = [\n  { term: 'UPS Ground', value: '$38.40, 3 business days' },\n  { term: 'FedEx Home Delivery', value: '$41.15, 3 business days' },\n  { term: 'UPS 2nd Day Air', value: '$96.80, 2 business days' },\n  { term: 'FedEx Priority Overnight', value: '$184.25, next business day' },\n];\n\nexport default function DrawerNonModal() {\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Shipping charge</FieldLabel>\n        <TextField inputMode=\"decimal\" placeholder=\"0.00\" />\n        <FieldDescription>Charged to Contoso Foods on invoice INV-2041.</FieldDescription>\n      </Field>\n      <Inline>\n        <Drawer modal={false} outsidePress=\"none\" scrimFrom={1} size=\"sm\">\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n                Show carrier rates\n              </Button>\n            )}\n          />\n          <DrawerPanel>\n            <DrawerHeader>\n              <DrawerTitle>Carrier rates</DrawerTitle>\n              <DrawerDescription>3 packages, 18.4 kg, Reno to Seattle.</DrawerDescription>\n              <DrawerClose />\n            </DrawerHeader>\n            <DrawerBody>\n              <DescriptionList>\n                {RATES.map((rate) => (\n                  <DescriptionListItem key={rate.term}>\n                    <DescriptionListTerm>{rate.term}</DescriptionListTerm>\n                    <DescriptionListDescription>{rate.value}</DescriptionListDescription>\n                  </DescriptionListItem>\n                ))}\n              </DescriptionList>\n            </DrawerBody>\n          </DrawerPanel>\n        </Drawer>\n      </Inline>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pin",
+      "title": "pin.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Textarea } from '@slotted/react/textarea';\n\nconst DETAILS = [\n  { term: 'Customer', value: 'Contoso Foods, Seattle' },\n  { term: 'Items', value: '14 cases, 3 products' },\n  { term: 'Warehouse', value: 'Reno, NV' },\n];\n\nexport default function DrawerPin() {\n  const [open, setOpen] = useState(false);\n  const [pinned, setPinned] = useState(false);\n\n  return (\n    <Drawer mode={pinned ? 'inline' : 'overlay'} open={open} onOpenChange={setOpen} size=\"sm\">\n      <Stack gap={3}>\n        <Inline>\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n                Notes\n              </Button>\n            )}\n          />\n        </Inline>\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            minBlockSize: '18rem',\n            border: '1px solid var(--slotted-border-subtle)',\n            borderRadius: 'var(--slotted-radius-lg)',\n            overflow: 'hidden',\n          }}\n        >\n          <div style={{ flex: '1 1 12rem', padding: 'var(--slotted-space-6)' }}>\n            <DescriptionList>\n              {DETAILS.map((detail) => (\n                <DescriptionListItem key={detail.term}>\n                  <DescriptionListTerm>{detail.term}</DescriptionListTerm>\n                  <DescriptionListDescription>{detail.value}</DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n          </div>\n          <DrawerPanel>\n            <DrawerHeader>\n              <DrawerTitle>Notes on SO-1182</DrawerTitle>\n              <DrawerClose />\n            </DrawerHeader>\n            <DrawerBody>\n              <Field>\n                <FieldLabel>Note for the warehouse</FieldLabel>\n                <Textarea placeholder=\"Pallet height, dock number, contact on site\" />\n              </Field>\n            </DrawerBody>\n            <DrawerFooter>\n              <Button\n                size=\"sm\"\n                tone=\"secondary\"\n                variant=\"outline\"\n                onClick={() => setPinned(!pinned)}\n              >\n                {pinned ? 'Unpin' : 'Pin beside the order'}\n              </Button>\n            </DrawerFooter>\n          </DrawerPanel>\n        </div>\n      </Stack>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sides",
+      "title": "sides.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nconst SIDES = [\n  {\n    side: 'start',\n    label: 'Start',\n    title: 'Warehouses',\n    body: 'Reno, Columbus and Savannah. A panel from the start edge suits navigation between sites.',\n  },\n  {\n    side: 'end',\n    label: 'End',\n    title: 'Order SO-1182',\n    body: 'Contoso Foods, 14 cases. The end edge is the default and suits the details of a row.',\n  },\n  {\n    side: 'top',\n    label: 'Top',\n    title: 'Carrier notice',\n    body: 'UPS pickups from Reno run two hours late today. A panel from the top suits a notice that belongs to the whole screen.',\n  },\n  {\n    side: 'bottom',\n    label: 'Bottom',\n    title: '3 orders selected',\n    body: 'SO-1182, SO-1183 and SO-1184. A sheet from the bottom suits actions on a phone, within reach of the thumb.',\n  },\n] as const;\n\nexport default function DrawerSides() {\n  return (\n    <Inline gap={2}>\n      {SIDES.map((item) => (\n        <Drawer key={item.side} side={item.side}>\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                {item.label}\n              </Button>\n            )}\n          />\n          <DrawerPanel>\n            <DrawerHeader>\n              <DrawerTitle>{item.title}</DrawerTitle>\n              <DrawerClose />\n            </DrawerHeader>\n            <DrawerBody>\n              <Text size=\"sm\">{item.body}</Text>\n            </DrawerBody>\n          </DrawerPanel>\n        </Drawer>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "sizes.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nconst SIZES = [\n  { size: 'sm', body: '18rem. One field or a short list, such as the carrier for a shipment.' },\n  { size: 'md', body: '24rem, the default. The details of an order or a short form.' },\n  { size: 'lg', body: '30rem. A record with a table of lines, such as the items of an order.' },\n  { size: 'xl', body: '40rem. Two columns, such as a customer and their open orders.' },\n  { size: 'full', body: 'The whole screen. A task that needs every column, such as a pick list.' },\n] as const;\n\nexport default function DrawerSizes() {\n  return (\n    <Inline gap={2}>\n      {SIZES.map((item) => (\n        <Drawer key={item.size} size={item.size}>\n          <DrawerTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                {item.size}\n              </Button>\n            )}\n          />\n          <DrawerPanel>\n            <DrawerHeader>\n              <DrawerTitle>Shipment SH-4471</DrawerTitle>\n              <DrawerClose />\n            </DrawerHeader>\n            <DrawerBody>\n              <Text size=\"sm\">{item.body}</Text>\n            </DrawerBody>\n          </DrawerPanel>\n        </Drawer>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "snap-points",
+      "title": "snap-points.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Badge } from '@slotted/react/badge';\nimport { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerResizer,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst SHIPMENTS = [\n  { id: 'SH-4471', to: 'Contoso Foods, Seattle', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4472', to: 'Fabrikam Grocers, Portland', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4473', to: 'Tailspin Market, Boise', status: 'Delayed', tone: 'warning' },\n  { id: 'SH-4474', to: 'Adventure Works, Denver', status: 'In transit', tone: 'accent' },\n  {\n    id: 'SH-4475',\n    to: 'Litware Deli, Salt Lake City',\n    status: 'Out for delivery',\n    tone: 'success',\n  },\n  { id: 'SH-4476', to: 'Proseware Cafe, Spokane', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4477', to: 'Wingtip Bakery, Eugene', status: 'Delayed', tone: 'warning' },\n  { id: 'SH-4478', to: 'Coho Winery, Walla Walla', status: 'Out for delivery', tone: 'success' },\n  { id: 'SH-4479', to: 'Northwind Outlet, Reno', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4480', to: 'Fourth Coffee, Tacoma', status: 'In transit', tone: 'accent' },\n] as const;\n\nexport default function DrawerSnapPoints() {\n  return (\n    <Drawer defaultExtent={0.4} side=\"bottom\" snapPoints={[0.4, 0.9]}>\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Shipments in transit\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerResizer />\n        <DrawerHeader>\n          <DrawerTitle>Shipments in transit</DrawerTitle>\n          <DrawerDescription>10 shipments left the Reno warehouse this week.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <Stack gap={3}>\n            {SHIPMENTS.map((shipment) => (\n              <Inline key={shipment.id} align=\"center\" gap={3} justify=\"between\">\n                <Stack gap={0}>\n                  <Text size=\"sm\" weight=\"semibold\">\n                    {shipment.id}\n                  </Text>\n                  <Text size=\"sm\" tone=\"muted\">\n                    {shipment.to}\n                  </Text>\n                </Stack>\n                <Badge tone={shipment.tone}>{shipment.status}</Badge>\n              </Inline>\n            ))}\n          </Stack>\n        </DrawerBody>\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "unsaved-changes",
+      "title": "unsaved-changes.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@slotted/react/drawer';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { InlineMessage } from '@slotted/react/inline-message';\nimport { Textarea } from '@slotted/react/textarea';\n\nexport default function DrawerUnsavedChanges() {\n  const [open, setOpen] = useState(false);\n  const [saved, setSaved] = useState('Leave at the loading dock, door 3.');\n  const [draft, setDraft] = useState(saved);\n  const [confirming, setConfirming] = useState(false);\n\n  const close = () => {\n    setConfirming(false);\n    setOpen(false);\n  };\n\n  return (\n    <Drawer\n      open={open}\n      onOpenChange={(next, request) => {\n        if (next) {\n          setDraft(saved);\n          setConfirming(false);\n        } else if (draft !== saved) {\n          request.cancel();\n          setConfirming(true);\n          return;\n        }\n        setOpen(next);\n      }}\n    >\n      <DrawerTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Delivery instructions\n          </Button>\n        )}\n      />\n      <DrawerPanel>\n        <DrawerHeader>\n          <DrawerTitle>Delivery instructions</DrawerTitle>\n          <DrawerDescription>Order SO-1182, printed on the packing slip.</DrawerDescription>\n          <DrawerClose />\n        </DrawerHeader>\n        <DrawerBody>\n          <Field>\n            <FieldLabel>Instructions for the carrier</FieldLabel>\n            <Textarea\n              value={draft}\n              onValueChange={(value) => {\n                setDraft(value);\n                setConfirming(false);\n              }}\n            />\n          </Field>\n        </DrawerBody>\n        <DrawerFooter>\n          {confirming ? (\n            <>\n              <InlineMessage live=\"polite\" tone=\"warning\">\n                Discard your changes to the instructions?\n              </InlineMessage>\n              <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setConfirming(false)}>\n                Keep editing\n              </Button>\n              <Button tone=\"danger\" onClick={close}>\n                Discard\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button\n                variant=\"ghost\"\n                tone=\"secondary\"\n                onClick={() => (draft === saved ? close() : setConfirming(true))}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => {\n                  setSaved(draft);\n                  close();\n                }}\n              >\n                Save\n              </Button>\n            </>\n          )}\n        </DrawerFooter>\n      </DrawerPanel>\n    </Drawer>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}