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

package/dist/docs/dialog.json

@@ -0,0 +1,1138 @@
+{
+  "family": "dialog",
+  "ui": "dialog",
+  "binding": "react",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Modal dialog and alert dialog."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full"
+    ],
+    "placement": [
+      "center",
+      "top"
+    ],
+    "scroll": [
+      "content",
+      "viewport"
+    ],
+    "surface": [
+      "panel",
+      "plain"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "fullScreen": [
+      "never",
+      "narrow",
+      "always"
+    ],
+    "modal": [
+      true,
+      false
+    ],
+    "escape": [
+      "close",
+      "none"
+    ],
+    "outsidePress": [
+      "close",
+      "none"
+    ],
+    "back": [
+      "close",
+      "none"
+    ],
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "initialFocus": [
+      "first",
+      "container",
+      "cancel"
+    ]
+  },
+  "members": {
+    "dialog": {
+      "nativeElement": "div",
+      "role": "dialog",
+      "defaults": {
+        "size": "md",
+        "placement": "center",
+        "scroll": "content",
+        "surface": "panel",
+        "mount": "active",
+        "fullScreen": "narrow",
+        "modal": true,
+        "escape": "close",
+        "outsidePress": "close",
+        "back": "close",
+        "initialFocus": "first",
+        "loading": false,
+        "fullscreenToggle": false
+      },
+      "fixed": {},
+      "capabilities": [
+        "open",
+        "size",
+        "appearance",
+        "placement",
+        "loading",
+        "wiring",
+        "fullscreen"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "loading",
+        "fullscreen"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "backdrop",
+        "viewport",
+        "content",
+        "header",
+        "title",
+        "description",
+        "body",
+        "footer",
+        "close",
+        "fullscreen"
+      ]
+    },
+    "alertDialog": {
+      "nativeElement": "div",
+      "role": "alertdialog",
+      "defaults": {
+        "size": "sm",
+        "placement": "center",
+        "scroll": "content",
+        "surface": "panel",
+        "mount": "active",
+        "fullScreen": "never",
+        "modal": true,
+        "escape": "close",
+        "outsidePress": "none",
+        "back": "close",
+        "initialFocus": "cancel",
+        "tone": "danger",
+        "loading": false
+      },
+      "fixed": {
+        "outsidePress": true,
+        "modal": true
+      },
+      "capabilities": [
+        "open",
+        "size",
+        "appearance",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "backdrop",
+        "viewport",
+        "content",
+        "header",
+        "icon",
+        "title",
+        "description",
+        "body",
+        "footer",
+        "cancel",
+        "action"
+      ]
+    }
+  },
+  "docs": {
+    "dialog": {
+      "imports": {
+        "source": "import { Dialog, DialogBody, DialogClose, DialogContent, DialogDefaultsProvider, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, in a portal",
+          "required": true,
+          "purpose": "The layer, fixed over the viewport. It carries data-ui=\"dialog\", one attribute per axis, data-open and data-loading, and a z-index of --slotted-z-index-overlay plus the depth of the layer stack, so a dialog opened over another sits above it. It is also the container that fullScreen=\"narrow\" measures, so full screen follows the width of the layer rather than the width of the window."
+        },
+        {
+          "part": "trigger",
+          "element": "button, or the element render returns",
+          "required": false,
+          "purpose": "The control that opens the dialog. It stays where it is written while the layer is rendered in a portal, and carries aria-haspopup, aria-expanded and aria-controls. A press on it does not count as a press outside the dialog. Rendered as a Button, the element keeps the button’s data-part=\"root\"."
+        },
+        {
+          "part": "backdrop",
+          "element": "div",
+          "required": true,
+          "purpose": "The scrim behind the panel, painted from --slotted-scrim. It does not scroll. A non-modal dialog does not paint it and lets the pointer through to the page."
+        },
+        {
+          "part": "viewport",
+          "element": "div",
+          "required": true,
+          "purpose": "The box that positions the panel and, with scroll=\"viewport\", the box that scrolls. A panel taller than the layer aligns to the top edge, so its title stays on screen."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+        },
+        {
+          "part": "header",
+          "element": "header, or the element render returns",
+          "required": false,
+          "purpose": "Three columns: the mark, the words and the corner buttons. A title that wraps makes the row taller and never pushes the close button off the line. Any other content written in the header, such as a badge, is placed in the words column under the description."
+        },
+        {
+          "part": "title",
+          "element": "h2, or the element render returns",
+          "required": false,
+          "purpose": "The visible name of the dialog. The panel points aria-labelledby at it only while it is rendered."
+        },
+        {
+          "part": "description",
+          "element": "p, or the element render returns",
+          "required": false,
+          "purpose": "The sentence that says what the dialog is for. The panel points aria-describedby at it only while it is rendered. It is optional in Dialog and required in AlertDialog."
+        },
+        {
+          "part": "body",
+          "element": "div, or the element render returns",
+          "required": false,
+          "purpose": "The row that scrolls. It carries aria-busy while loading is set. Scrolling it to the end does not scroll the page behind a non-modal dialog."
+        },
+        {
+          "part": "footer",
+          "element": "footer, or the element render returns",
+          "required": false,
+          "purpose": "The actions: a row aligned to the end that wraps when the buttons do not fit, on the sunken surface. Each row of the panel draws the rule above itself, so a panel without a body draws one rule, not two."
+        },
+        {
+          "part": "close",
+          "element": "button",
+          "required": false,
+          "purpose": "The ✕ button. Its target is at least 24 by 24 pixels. It closes the dialog with the reason dismiss, carrying its value as the result."
+        },
+        {
+          "part": "fullscreen",
+          "element": "button",
+          "required": false,
+          "purpose": "The button that expands the panel to the whole layer and restores it, rendered by DialogHeader when fullscreenToggle is set. It sits before the close button, carries aria-pressed, and its mark shows what the next press does."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Whether the dialog is open. Passing it makes the state controlled: the dialog asks through onOpenChange and waits for the new value."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Whether an uncontrolled dialog starts open. Read once."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+          "defaultValue": "md",
+          "appliesTo": "Dialog, DialogDefaultsProvider",
+          "description": "The maximum width of the panel: 24rem, 32rem, 42rem, 56rem, or the whole layer less its padding. For another width, set --slotted-dialog-measure."
+        },
+        {
+          "name": "placement",
+          "type": "'center' | 'top'",
+          "defaultValue": "center",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "Where the panel sits in the layer. Use top for content that grows while the reader types, so the panel does not move with each new line."
+        },
+        {
+          "name": "scroll",
+          "type": "'content' | 'viewport'",
+          "defaultValue": "content",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "What scrolls when the content is long. content keeps the panel inside the layer and scrolls the body, so the actions stay on screen; viewport lets the panel grow and scrolls the layer. With content, the layer still scrolls when the header and footer alone are taller than it."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "When the layer is in the document. active renders it while open and removes it after the closing animation, lazy renders it on the first open and keeps it, eager renders it from the start and hides it with content-visibility and inert while closed."
+        },
+        {
+          "name": "escape",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "Whether Escape asks the dialog to close. Escape reaches the topmost dialog only."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Marks the body with aria-busy and gives it a minimum height while the content is on its way. The header, the close button and Escape stay available."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DialogMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Replaces words of the language in force, key by key: the accessible names of the close and full-screen buttons (close, fullScreen). An aria-label on DialogClose takes precedence."
+        },
+        {
+          "name": "initialFocus",
+          "type": "'first' | 'container' | 'cancel' | RefObject | false",
+          "defaultValue": "first",
+          "appliesTo": "Dialog",
+          "description": "Where focus goes when the dialog opens: the first focusable element, the panel itself (container), the cancel part, the element of a ref, or nowhere (false). Use container for content that is read before it is used, such as a list or a table."
+        },
+        {
+          "name": "finalFocus",
+          "type": "RefObject | false",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Where focus goes when the dialog closes. Unset, focus returns to the element that had it when the dialog opened, usually the trigger. false leaves focus where it is."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DialogClose, AlertDialogCancel, AlertDialogAction",
+          "description": "The result this button closes the dialog with, read from request.result in onOpenChange. AlertDialogCancel defaults to \"cancel\" and AlertDialogAction to \"confirm\"."
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Dialog, DialogDefaultsProvider",
+          "description": "Whether the page behind is inert, its scroll locked and focus kept inside the panel. false does none of this, paints no scrim, lets the pointer reach the page and writes no aria-modal."
+        },
+        {
+          "name": "outsidePress",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Dialog, DialogDefaultsProvider",
+          "description": "Whether a press outside the panel asks the dialog to close. AlertDialog fixes it at none."
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Dialog, DialogDefaultsProvider",
+          "description": "Whether the browser’s way back, a back button or a phone’s back gesture, closes a modal dialog instead of leaving the page. Each open modal dialog adds one history entry, and the close request carries the reason back."
+        },
+        {
+          "name": "surface",
+          "type": "'panel' | 'plain'",
+          "defaultValue": "panel",
+          "appliesTo": "Dialog, DialogDefaultsProvider",
+          "description": "Whether Dialog paints the panel. plain removes the background, border, radius, shadow, rows and padding, and keeps the portal, the scrim, focus handling and the dismissal policy, for a panel of your own such as a Card or an image viewer. A plain panel does not keep its footer on screen for a long body."
+        },
+        {
+          "name": "fullScreen",
+          "type": "'never' | 'narrow' | 'always'",
+          "defaultValue": "narrow",
+          "appliesTo": "Dialog, DialogDefaultsProvider",
+          "description": "When the panel fills the whole layer, without margins or radius. narrow does so while the layer is narrower than 480 pixels, measured with a container query on the layer."
+        },
+        {
+          "name": "fullscreenToggle",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Dialog",
+          "description": "Adds a button to the header that expands the panel to the whole layer and restores it, for content the reader wants more room for."
+        },
+        {
+          "name": "fullscreen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Dialog",
+          "description": "Whether the panel is expanded by the toggle. Passing it makes the state controlled, with onFullscreenChange."
+        },
+        {
+          "name": "defaultFullscreen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Dialog",
+          "description": "Whether an uncontrolled panel opens expanded. Read once."
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Replaces the element a part renders and passes it every attribute the part writes. Use it to make the trigger, the cancel and the action a Button."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<DialogHandle> on Dialog, Ref<HTMLElement> on every part",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog, every part",
+          "description": "On a part, the element. On Dialog and AlertDialog, a handle with open(), close(result), focus() and content, the panel element once it is rendered."
+        },
+        {
+          "name": "--slotted-dialog-measure",
+          "type": "length",
+          "defaultValue": "from size",
+          "appliesTo": "the root part",
+          "description": "The maximum width of the panel, for a width the five sizes do not hold, such as a two-column form at 46rem. Set it with a style attribute on one dialog, with a rule for a region, or once in the theme. It takes precedence over size."
+        },
+        {
+          "name": "container",
+          "type": "Element | null",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "The element this dialog is rendered into, instead of the shared portal root. To change the portal root for the whole document, call setPortalContainer from @slotted/core/portal."
+        },
+        {
+          "name": "useDialog()",
+          "type": "() => DialogContextValue",
+          "defaultValue": "—",
+          "appliesTo": "inside Dialog or AlertDialog",
+          "description": "What the parts read: the open state, the ids, the resolved axes and close(reason, result). It throws outside Dialog and AlertDialog."
+        },
+        {
+          "name": "DialogDefaultsProvider",
+          "type": "{ size, placement, scroll, surface, mount, fullScreen, modal, escape, outsidePress, back }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets these ten values once for every dialog under it. A value set on one dialog takes precedence."
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: DialogChangeRequest)",
+          "when": "Before the dialog opens or closes, whatever caused it. The request carries the new value, the previous value, the reason (pointer, keyboard, dismiss, escape, outsidePress, back, submit or programmatic), the result of the close, the originating event, and cancel(), which keeps the dialog as it is. One handler therefore guards the ✕, Escape, a press outside, the way back and the ref handle together."
+        },
+        {
+          "name": "onFullscreenChange",
+          "payload": "(fullscreen: boolean, request: DialogFullscreenRequest)",
+          "when": "Before the panel expands to the whole layer or is restored. The request carries the new value, the previous value, the reason (pointer, keyboard or programmatic), the originating event, and cancel(), which keeps the panel as it is."
+        },
+        {
+          "name": "onClick, onKeyDown and the other native events, on every part",
+          "payload": "the element’s own event",
+          "when": "Whenever the element fires them. Your handler runs before the dialog’s own, and calling preventDefault() in it cancels the dialog’s behaviour, such as opening on a trigger press or closing on a close press."
+        }
+      ],
+      "accessibility": [
+        "Dialog follows the WAI-ARIA dialog (modal) pattern. While a modal dialog is open, Tab and Shift+Tab move through the focusable elements inside it and wrap from the last to the first and back. Escape closes the topmost dialog only; a dialog that refuses the close keeps the Escape from reaching the dialog beneath it.",
+        "The panel carries role=\"dialog\", aria-labelledby pointing at the title and aria-describedby pointing at the description, each only while that part is rendered. An aria-label of your own on DialogContent replaces aria-labelledby.",
+        "aria-modal=\"true\" is written only while the dialog is modal. A modal dialog makes everything outside it inert, which removes the page from the accessibility tree and from the pointer, and locks the page scroll. modal={false} does none of this and writes no aria-modal.",
+        "When the dialog opens, focus moves to its first focusable element, to the element initialFocus names, or to the panel itself with initialFocus=\"container\", for content that is read before it is used. When it closes, focus returns to the element that had it when the dialog opened, or to the element finalFocus names. If that element has left the document, focus goes to its nearest ancestor still in the document.",
+        "Containment, inertness and Escape are implemented in JavaScript rather than with the native dialog element, so every overlay of the library shares one stacking order: a select opened inside a dialog paints above it. Without JavaScript, there is no dialog.",
+        "The close button’s target is at least 24 by 24 pixels, and its mark is drawn from a glyph, not a character.",
+        "The panel has a border as well as a shadow, so its edge stays visible under forced colours, where shadows are removed and the scrim becomes opaque."
+      ]
+    },
+    "alertDialog": {
+      "imports": {
+        "source": "import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogIcon, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, in a portal",
+          "required": true,
+          "purpose": "The layer, fixed over the viewport. It carries data-ui=\"dialog\", one attribute per axis, data-open and data-loading, and a z-index of --slotted-z-index-overlay plus the depth of the layer stack, so a dialog opened over another sits above it. It is also the container that fullScreen=\"narrow\" measures, so full screen follows the width of the layer rather than the width of the window."
+        },
+        {
+          "part": "trigger",
+          "element": "button, or the element render returns",
+          "required": false,
+          "purpose": "The control that opens the dialog. It stays where it is written while the layer is rendered in a portal, and carries aria-haspopup, aria-expanded and aria-controls. A press on it does not count as a press outside the dialog. Rendered as a Button, the element keeps the button’s data-part=\"root\"."
+        },
+        {
+          "part": "backdrop",
+          "element": "div",
+          "required": true,
+          "purpose": "The scrim behind the panel, painted from --slotted-scrim. It does not scroll. A non-modal dialog does not paint it and lets the pointer through to the page."
+        },
+        {
+          "part": "viewport",
+          "element": "div",
+          "required": true,
+          "purpose": "The box that positions the panel and, with scroll=\"viewport\", the box that scrolls. A panel taller than the layer aligns to the top edge, so its title stays on screen."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+        },
+        {
+          "part": "header",
+          "element": "header, or the element render returns",
+          "required": false,
+          "purpose": "Three columns: the mark, the words and the corner buttons. A title that wraps makes the row taller and never pushes the close button off the line. Any other content written in the header, such as a badge, is placed in the words column under the description."
+        },
+        {
+          "part": "title",
+          "element": "h2, or the element render returns",
+          "required": false,
+          "purpose": "The visible name of the dialog. The panel points aria-labelledby at it only while it is rendered."
+        },
+        {
+          "part": "description",
+          "element": "p, or the element render returns",
+          "required": true,
+          "purpose": "The sentence that says what is about to happen. Required: the alertdialog pattern makes aria-describedby mandatory, and AlertDialog throws an error when it is missing."
+        },
+        {
+          "part": "body",
+          "element": "div, or the element render returns",
+          "required": false,
+          "purpose": "The row that scrolls. It carries aria-busy while loading is set. Scrolling it to the end does not scroll the page behind a non-modal dialog."
+        },
+        {
+          "part": "footer",
+          "element": "footer, or the element render returns",
+          "required": false,
+          "purpose": "The actions: a row aligned to the end that wraps when the buttons do not fit, on the sunken surface. Each row of the panel draws the rule above itself, so a panel without a body draws one rule, not two."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The mark of the tone, drawn from a glyph, so the kind of decision does not depend on colour alone. Under forced colours it is the only signal of the tone."
+        },
+        {
+          "part": "cancel",
+          "element": "button",
+          "required": true,
+          "purpose": "The least destructive answer, and where focus lands when the dialog opens. It closes with the reason dismiss and the result \"cancel\". Rendered as a Button, the element keeps the button’s data-part=\"root\"."
+        },
+        {
+          "part": "action",
+          "element": "button",
+          "required": true,
+          "purpose": "The action being confirmed. It closes with the reason submit and the result \"confirm\". Rendered as a Button, the element keeps the button’s data-part=\"root\"."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Whether the dialog is open. Passing it makes the state controlled: the dialog asks through onOpenChange and waits for the new value."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Whether an uncontrolled dialog starts open. Read once."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+          "defaultValue": "sm",
+          "appliesTo": "AlertDialog",
+          "description": "The maximum width of the panel. AlertDialog defaults to sm, 24rem."
+        },
+        {
+          "name": "placement",
+          "type": "'center' | 'top'",
+          "defaultValue": "center",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "Where the panel sits in the layer. Use top for content that grows while the reader types, so the panel does not move with each new line."
+        },
+        {
+          "name": "scroll",
+          "type": "'content' | 'viewport'",
+          "defaultValue": "content",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "What scrolls when the content is long. content keeps the panel inside the layer and scrolls the body, so the actions stay on screen; viewport lets the panel grow and scrolls the layer. With content, the layer still scrolls when the header and footer alone are taller than it."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "When the layer is in the document. active renders it while open and removes it after the closing animation, lazy renders it on the first open and keeps it, eager renders it from the start and hides it with content-visibility and inert while closed."
+        },
+        {
+          "name": "escape",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "Dialog, AlertDialog, DialogDefaultsProvider",
+          "description": "Whether Escape asks the dialog to close. Escape reaches the topmost dialog only."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Marks the body with aria-busy and gives it a minimum height while the content is on its way. The header, the close button and Escape stay available."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DialogMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Replaces words of the language in force, key by key: the accessible names of the close and full-screen buttons (close, fullScreen). An aria-label on DialogClose takes precedence."
+        },
+        {
+          "name": "initialFocus",
+          "type": "'first' | 'container' | 'cancel' | RefObject | false",
+          "defaultValue": "cancel",
+          "appliesTo": "AlertDialog",
+          "description": "Where focus goes when the dialog opens. The default, cancel, is the least destructive answer."
+        },
+        {
+          "name": "finalFocus",
+          "type": "RefObject | false",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "Where focus goes when the dialog closes. Unset, focus returns to the element that had it when the dialog opened, usually the trigger. false leaves focus where it is."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DialogClose, AlertDialogCancel, AlertDialogAction",
+          "description": "The result this button closes the dialog with, read from request.result in onOpenChange. AlertDialogCancel defaults to \"cancel\" and AlertDialogAction to \"confirm\"."
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "danger",
+          "appliesTo": "AlertDialog",
+          "description": "The kind of decision. It sets the mark AlertDialogIcon draws and its colour."
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "AlertDialog",
+          "description": "Fixed: an alert dialog is always modal."
+        },
+        {
+          "name": "outsidePress",
+          "type": "'close' | 'none'",
+          "defaultValue": "none",
+          "appliesTo": "AlertDialog",
+          "description": "Fixed: a press outside never closes an alert dialog."
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "AlertDialog",
+          "description": "Whether the browser’s way back cancels the confirmation, as Escape does. The close request carries the reason back."
+        },
+        {
+          "name": "surface",
+          "type": "'panel' | 'plain'",
+          "defaultValue": "panel",
+          "appliesTo": "AlertDialog",
+          "description": "Whether AlertDialog paints the panel. plain removes the paint and keeps the behaviour."
+        },
+        {
+          "name": "fullScreen",
+          "type": "'never' | 'narrow' | 'always'",
+          "defaultValue": "never",
+          "appliesTo": "AlertDialog",
+          "description": "When the panel fills the whole layer. AlertDialog keeps its margins at every width by default."
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Replaces the element a part renders and passes it every attribute the part writes. Use it to make the trigger, the cancel and the action a Button."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<DialogHandle> on Dialog, Ref<HTMLElement> on every part",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog, every part",
+          "description": "On a part, the element. On Dialog and AlertDialog, a handle with open(), close(result), focus() and content, the panel element once it is rendered."
+        },
+        {
+          "name": "--slotted-dialog-measure",
+          "type": "length",
+          "defaultValue": "from size",
+          "appliesTo": "the root part",
+          "description": "The maximum width of the panel, for a width the five sizes do not hold, such as a two-column form at 46rem. Set it with a style attribute on one dialog, with a rule for a region, or once in the theme. It takes precedence over size."
+        },
+        {
+          "name": "container",
+          "type": "Element | null",
+          "defaultValue": "—",
+          "appliesTo": "Dialog, AlertDialog",
+          "description": "The element this dialog is rendered into, instead of the shared portal root. To change the portal root for the whole document, call setPortalContainer from @slotted/core/portal."
+        },
+        {
+          "name": "useDialog()",
+          "type": "() => DialogContextValue",
+          "defaultValue": "—",
+          "appliesTo": "inside Dialog or AlertDialog",
+          "description": "What the parts read: the open state, the ids, the resolved axes and close(reason, result). It throws outside Dialog and AlertDialog."
+        },
+        {
+          "name": "DialogDefaultsProvider",
+          "type": "{ size, placement, scroll, surface, mount, fullScreen, modal, escape, outsidePress, back }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets these ten values once for every dialog under it. A value set on one dialog takes precedence."
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: DialogChangeRequest)",
+          "when": "Before the dialog opens or closes, whatever caused it. The request carries the new value, the previous value, the reason (pointer, keyboard, dismiss, escape, outsidePress, back, submit or programmatic), the result of the close, the originating event, and cancel(), which keeps the dialog as it is. One handler therefore guards the ✕, Escape, a press outside, the way back and the ref handle together."
+        },
+        {
+          "name": "onFullscreenChange",
+          "payload": "(fullscreen: boolean, request: DialogFullscreenRequest)",
+          "when": "Before the panel expands to the whole layer or is restored. The request carries the new value, the previous value, the reason (pointer, keyboard or programmatic), the originating event, and cancel(), which keeps the panel as it is."
+        },
+        {
+          "name": "onClick, onKeyDown and the other native events, on every part",
+          "payload": "the element’s own event",
+          "when": "Whenever the element fires them. Your handler runs before the dialog’s own, and calling preventDefault() in it cancels the dialog’s behaviour, such as opening on a trigger press or closing on a close press."
+        }
+      ],
+      "accessibility": [
+        "AlertDialog follows the WAI-ARIA alert dialog pattern: the modal dialog pattern with role=\"alertdialog\" and a required description. The keyboard is the same: Tab and Shift+Tab wrap inside the panel, and Escape closes it.",
+        "aria-describedby is required. AlertDialog throws an error when no DialogDescription is rendered, so a confirmation is never announced without the sentence that says what it does.",
+        "Focus starts on AlertDialogCancel, the least destructive answer, as the pattern advises for a step that cannot be undone easily.",
+        "A press outside never closes an alert dialog, and it is always modal. Escape closes it, which answers with the cancel; set escape=\"none\" when cancelling is not safe either.",
+        "There is no close part: the reader answers with the cancel or the action. Rendering DialogClose inside AlertDialog throws an error.",
+        "The tone is carried by the icon’s shape as well as by its colour, so it survives forced colours and readers who cannot tell the colours apart."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-dialog-body-color",
+    "--slotted-dialog-border-color",
+    "--slotted-dialog-close-active-background",
+    "--slotted-dialog-close-color",
+    "--slotted-dialog-close-hover-background",
+    "--slotted-dialog-color",
+    "--slotted-dialog-description-color",
+    "--slotted-dialog-footer-surface",
+    "--slotted-dialog-measure",
+    "--slotted-dialog-radius",
+    "--slotted-dialog-rule-color",
+    "--slotted-dialog-scrim",
+    "--slotted-dialog-surface",
+    "--slotted-dialog-title-color",
+    "--slotted-dialog-title-font-family",
+    "--slotted-duration-long",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--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-md",
+    "--slotted-radius-lg",
+    "--slotted-radius-sm",
+    "--slotted-scrim",
+    "--slotted-shadow-lg",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-surface-raised",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-text",
+    "--slotted-z-index-overlay"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A layer 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": "<Dialog>\n  <DialogTrigger>Edit project</DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Edit project</DialogTitle>\n      <DialogDescription>The name is visible to the whole space.</DialogDescription>\n      <DialogClose />\n    </DialogHeader>\n    <DialogBody>\n      <TextField aria-label=\"Name\" defaultValue=\"Home page redesign\" />\n    </DialogBody>\n    <DialogFooter>\n      <Button variant=\"ghost\" tone=\"secondary\">\n        Cancel\n      </Button>\n      <Button>Save</Button>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "How wide the panel is allowed to be",
+      "note": "Five named steps rather than a pixel string, because a theme can retune a step and cannot retune width: 600px. full spends the whole layer minus its padding, for a dialog that is a document.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  type DialogSize,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nconst SIZES: { size: DialogSize; title: string; body: string }[] = [\n  {\n    size: 'sm',\n    title: 'Rename warehouse',\n    body: 'Small, 24rem: one field or one question.',\n  },\n  {\n    size: 'md',\n    title: 'Edit customer',\n    body: 'Medium, 32rem, the default: a short form of one column.',\n  },\n  {\n    size: 'lg',\n    title: 'Invoice INV-2041',\n    body: 'Large, 42rem: a record with a table of line items.',\n  },\n  {\n    size: 'xl',\n    title: 'Compare price lists',\n    body: 'Extra large, 56rem: two columns side by side.',\n  },\n  {\n    size: 'full',\n    title: 'Shipment manifest',\n    body: 'Full: the whole layer less its padding, for a document.',\n  },\n];\n\nexport default function DialogSizes() {\n  return (\n    <Inline gap={2}>\n      {SIZES.map((option) => (\n        <Dialog key={option.size} size={option.size}>\n          <DialogTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                {option.size}\n              </Button>\n            )}\n          />\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>{option.title}</DialogTitle>\n              <DialogClose />\n            </DialogHeader>\n            <DialogBody>\n              <Text size=\"sm\">{option.body}</Text>\n            </DialogBody>\n          </DialogContent>\n        </Dialog>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Where the panel sits in the layer",
+      "note": "center is right for a panel whose height is settled; top is right for one that grows as the reader types, because a centred panel moves under the cursor every time a line is added.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Textarea } from '@slotted/react/textarea';\n\nexport default function DialogPlacement() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen} placement=\"top\">\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Add a note\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Note on order SO-1182</DialogTitle>\n          <DialogDescription>The warehouse team sees the note on the pick list.</DialogDescription>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\n          <Field>\n            <FieldLabel>Note</FieldLabel>\n            <Textarea rows={3} maxRows={12} placeholder=\"Leave at the loading dock after 2 pm.\" />\n          </Field>\n        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Cancel\n          </Button>\n          <Button onClick={() => setOpen(false)}>Add note</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scroll",
+      "title": "What scrolls when the content is long",
+      "note": "content bounds the panel to the layer and scrolls the body, so the actions stay on screen; viewport scrolls the whole panel, for content that is read rather than acted on. Radix and React Aria ship neither, and a footer past the fold is the default of following their examples.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst ITEMS = Array.from({ length: 24 }, (_, index) => ({\n  sku: `NW-${String(4100 + index * 7)}`,\n  name: [\n    'Chai, 10 boxes',\n    'Aniseed syrup, 12 bottles',\n    'Cajun seasoning, 48 jars',\n    'Olive oil, 36 bottles',\n    'Dried pears, 12 packs',\n    'Curry sauce, 12 jars',\n  ][index % 6],\n}));\n\nconst TERMS = [\n  'Prices are in US dollars and exclude sales tax, which is added at the rate of the delivery address.',\n  'Payment is due 30 days from the invoice date. Balances unpaid after 45 days accrue interest at 1% a month.',\n  'Goods travel at the risk of Northwind Traders until they are signed for at the delivery address.',\n  'Damaged goods are reported within 5 business days of delivery, with photos of the packaging and the label.',\n  'Returns of undamaged goods are accepted within 30 days and are refunded less a 10% restocking fee.',\n  'Orders above $5,000 may be split into several shipments, each invoiced when it leaves the warehouse.',\n  'Either party may end a standing order with 14 days of written notice; shipments already picked are invoiced.',\n  'These terms are governed by the law of the State of Washington.',\n];\n\nexport default function DialogScroll() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Inline gap={2}>\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Review 24 line items\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Purchase order PO-7730</DialogTitle>\n            <DialogDescription>Only the list scrolls; the actions stay in view.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Stack gap={2}>\n              {ITEMS.map((item) => (\n                <Inline key={item.sku} gap={3} justify=\"between\">\n                  <Text size=\"sm\">{item.name}</Text>\n                  <Text size=\"sm\" tone=\"muted\">\n                    {item.sku}\n                  </Text>\n                </Inline>\n              ))}\n            </Stack>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button onClick={() => setOpen(false)}>Approve order</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog scroll=\"viewport\">\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Read the terms of sale\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Terms of sale</DialogTitle>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Stack gap={4}>\n              {TERMS.map((term) => (\n                <Text key={term}>{term}</Text>\n              ))}\n            </Stack>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "surface",
+      "title": "The layer, around a box you painted",
+      "note": "surface=\"plain\" turns the family’s own paint off — no ground, no border, no radius, no shadow, no rows — and keeps the portal, the scrim, the containment and the dismissal policy. It is what a headless library ships by default, offered here as an axis rather than as the only shape.",
+      "language": "tsx",
+      "source": "<Dialog surface=\"plain\">\n  <DialogTrigger>View the media</DialogTrigger>\n  <DialogContent>\n    <Card fill=\"elevated\">\n      <DialogTitle>A card, inside the layer</DialogTitle>\n      <DialogDescription>The family paints nothing here.</DialogDescription>\n    </Card>\n  </DialogContent>\n</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fullScreen",
+      "title": "Taking the whole layer on a narrow one",
+      "note": "A container query at a literal breakpoint, not a viewport query: the layer answers its own inline size, so a dialog inside a named portal container is as narrow as that container rather than as the window.",
+      "language": "tsx",
+      "source": "<Dialog fullScreen=\"always\">\n  <DialogTrigger>New invoice</DialogTrigger>\n  <DialogContent>…</DialogContent>\n</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "modal",
+      "title": "A layer 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 dialog modal without doing all four has severe consequences for the readers who rely on the mark.",
+      "language": "tsx",
+      "source": "<Dialog modal={false}>\n  <DialogTrigger>Order details</DialogTrigger>\n  <DialogContent>…</DialogContent>\n</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "policy",
+      "title": "Refusing a close, and refusing it once",
+      "note": "Six ways to close and one request. A guard on onOpenChange covers Escape, an outside press, the close button and the imperative handle together; Radix reports the same policy through four callbacks.",
+      "language": "tsx",
+      "source": "<Dialog\n  open={open}\n  onOpenChange={(next, request) => {\n    if (!next && saving) return request.cancel();\n    setOpen(next);\n  }}\n>\n  …\n</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "focus",
+      "title": "Where focus goes, and where it comes back to",
+      "note": "By default the first tabbable element, and the trigger again on close. initialFocus names another element — a search input, or the panel itself for content that has to be read before it is operated, which is the APG’s own note.",
+      "language": "tsx",
+      "source": "const search = useRef<HTMLInputElement>(null);\n\n<Dialog initialFocus={search}>\n  <DialogTrigger>Search</DialogTrigger>\n  <DialogContent>\n    <DialogBody>\n      <TextField aria-label=\"Search\" ref={search} />\n    </DialogBody>\n  </DialogContent>\n</Dialog>;\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 and Escape all stay operable: a loading dialog 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  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Skeleton, SkeletonRegion } from '@slotted/react/skeleton';\n\ninterface Invoice {\n  customer: string;\n  issued: string;\n  due: string;\n  amount: string;\n}\n\nconst FIELDS: { key: keyof Invoice; term: string; width: string }[] = [\n  { key: 'customer', term: 'Customer', width: '9rem' },\n  { key: 'issued', term: 'Issued', width: '6rem' },\n  { key: 'due', term: 'Due', width: '6rem' },\n  { key: 'amount', term: 'Amount', width: '5rem' },\n];\n\nexport default function DialogLoading() {\n  const [open, setOpen] = useState(false);\n  const [invoice, setInvoice] = useState<Invoice | null>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    setInvoice(null);\n    const timer = setTimeout(\n      () =>\n        setInvoice({\n          customer: 'Northwind Traders',\n          issued: '12 August 2026',\n          due: '11 September 2026',\n          amount: '$1,240.00',\n        }),\n      1200,\n    );\n    return () => clearTimeout(timer);\n  }, [open]);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen} loading={invoice === null}>\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            View invoice INV-2041\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Invoice INV-2041</DialogTitle>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\n          <SkeletonRegion\n            delay={200}\n            loading={invoice === null}\n            messages={{ label: 'Loading invoice' }}\n          >\n            <DescriptionList>\n              {FIELDS.map((field) => (\n                <DescriptionListItem key={field.key}>\n                  <DescriptionListTerm>{field.term}</DescriptionListTerm>\n                  <DescriptionListDescription>\n                    {invoice === null ? <Skeleton inlineSize={field.width} /> : invoice[field.key]}\n                  </DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n          </SkeletonRegion>\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "nested",
+      "title": "A layer opened from a layer",
+      "note": "Escape reaches the topmost one only, and a layer that refuses stops the request reaching the one beneath it. The depth comes from the single stack dismissable-layer keeps, so nothing here states a z-index.",
+      "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  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst CARRIERS = [\n  { value: 'ups', label: 'UPS Ground' },\n  { value: 'fedex', label: 'FedEx Ground' },\n  { value: 'usps', label: 'USPS Priority Mail' },\n];\n\nconst labelOf = (value: string) => CARRIERS.find((carrier) => carrier.value === value)?.label;\n\nexport default function DialogNested() {\n  const [carrier, setCarrier] = useState('ups');\n  const [changing, setChanging] = useState(false);\n  const [draft, setDraft] = useState(carrier);\n\n  return (\n    <Dialog>\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Open order SO-1182\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Order SO-1182</DialogTitle>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\n          <DescriptionList>\n            <DescriptionListItem>\n              <DescriptionListTerm>Customer</DescriptionListTerm>\n              <DescriptionListDescription>Contoso Foods</DescriptionListDescription>\n            </DescriptionListItem>\n            <DescriptionListItem>\n              <DescriptionListTerm>Carrier</DescriptionListTerm>\n              <DescriptionListDescription>{labelOf(carrier)}</DescriptionListDescription>\n            </DescriptionListItem>\n          </DescriptionList>\n        </DialogBody>\n        <DialogFooter>\n          <Dialog\n            open={changing}\n            onOpenChange={(next) => {\n              if (next) setDraft(carrier);\n              setChanging(next);\n            }}\n            size=\"sm\"\n          >\n            <DialogTrigger\n              render={(props) => (\n                <Button {...props} tone=\"secondary\" variant=\"outline\">\n                  Change carrier\n                </Button>\n              )}\n            />\n            <DialogContent>\n              <DialogHeader>\n                <DialogTitle>Change carrier</DialogTitle>\n                <DialogClose />\n              </DialogHeader>\n              <DialogBody>\n                <Field>\n                  <FieldLabel>Carrier</FieldLabel>\n                  <Select\n                    items={CARRIERS}\n                    value={draft}\n                    onValueChange={(next) => {\n                      if (typeof next === 'string') setDraft(next);\n                    }}\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {CARRIERS.map((option) => (\n                        <SelectItem key={option.value} value={option.value}>\n                          {option.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </DialogBody>\n              <DialogFooter>\n                <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setChanging(false)}>\n                  Cancel\n                </Button>\n                <Button\n                  onClick={() => {\n                    setCarrier(draft);\n                    setChanging(false);\n                  }}\n                >\n                  Use carrier\n                </Button>\n              </DialogFooter>\n            </DialogContent>\n          </Dialog>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A ninety-character unbroken token in the title would widen a centred panel past both edges of the layer at once; overflow-wrap and a zero minimum are the pair that answer it. Long German and right-to-left strings are in the same scene.",
+      "language": "tsx",
+      "source": "<DialogTitle>deployment-pipeline-eu-west-1-production-rollback-2026-09-04T01</DialogTitle>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Replacing a part, and reaching the instance",
+      "note": "render substitutes the element of every part, which is how the trigger becomes a Button. The ref on Dialog is a handle with open, close and focus — the three actions a consumer cannot express declaratively.",
+      "language": "tsx",
+      "source": "<DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Deciding once for the application",
+      "note": "Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDefaultsProvider,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogDefaults() {\n  return (\n    <DialogDefaultsProvider placement=\"top\" size=\"lg\">\n      <Inline gap={2}>\n        <Dialog>\n          <DialogTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                Purchase order PO-7730\n              </Button>\n            )}\n          />\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Purchase order PO-7730</DialogTitle>\n              <DialogClose />\n            </DialogHeader>\n            <DialogBody>\n              <Text size=\"sm\">Large and at the top, from the provider.</Text>\n            </DialogBody>\n          </DialogContent>\n        </Dialog>\n        <Dialog size=\"sm\">\n          <DialogTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                Rename supplier\n              </Button>\n            )}\n          />\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Rename supplier</DialogTitle>\n              <DialogClose />\n            </DialogHeader>\n            <DialogBody>\n              <Text size=\"sm\">At the top from the provider, and small because it says so.</Text>\n            </DialogBody>\n          </DialogContent>\n        </Dialog>\n      </Inline>\n    </DialogDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "accessibility",
+      "title": "The pattern’s table, and what it costs",
+      "note": "Tab and Shift+Tab wrap inside the layer, Escape closes the topmost one, and the background is inert to the pointer and to the accessibility tree at once. All three are JavaScript here, because the platform’s dialog element is declined.",
+      "language": "tsx",
+      "source": "<Dialog onOpenChange={(open, request) => report(request.reason, request.result)}>…</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A confirmation opened inside the scene. Focus lands on the least destructive action, an outside press does nothing at all, and Escape answers because a member with a cancel action can always cancel.",
+      "language": "tsx",
+      "source": "<AlertDialog>\n  <DialogTrigger>Delete project</DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <AlertDialogIcon />\n      <DialogTitle>Delete this project?</DialogTitle>\n      <DialogDescription>\n        The project and its 42 documents leave for everyone. This cannot be undone.\n      </DialogDescription>\n    </DialogHeader>\n    <DialogFooter>\n      <AlertDialogCancel\n        render={(props) => <Button {...props} variant=\"outline\" tone=\"secondary\" />}\n      >\n        Keep project\n      </AlertDialogCancel>\n      <AlertDialogAction render={(props) => <Button {...props} tone=\"danger\" />}>\n        Delete project\n      </AlertDialogAction>\n    </DialogFooter>\n  </DialogContent>\n</AlertDialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tones",
+      "title": "What kind of decision this is",
+      "note": "Each tone carries its own mark, so the register survives a reader who cannot tell the colours apart and forced colours, where every tone ground becomes one system colour and the silhouette is all that is left.",
+      "language": "tsx",
+      "source": "<AlertDialog tone=\"warning\">\n  <DialogTrigger>Leave without saving</DialogTrigger>\n  <DialogContent>…</DialogContent>\n</AlertDialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "actions",
+      "title": "Two controls, each saying what it does",
+      "note": "Labels name the action rather than answering a question — “Excluir projeto”, not “Sim”. The action closes with submit and the cancel with dismiss, so a consumer reading the reason knows which one the reader chose.",
+      "language": "tsx",
+      "source": "<DialogFooter>\n  <AlertDialogCancel>Keep project</AlertDialogCancel>\n  <AlertDialogAction value=\"deleted\">Delete project</AlertDialogAction>\n</DialogFooter>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "policy",
+      "title": "What can and cannot dismiss it",
+      "note": "An outside press never closes an alert dialog, whatever the consumer asks for. Ark and React Aria make the role a prop, so setting role=\"alertdialog\" and forgetting the policy ships a destructive confirmation a stray click dismisses.",
+      "language": "tsx",
+      "source": "<AlertDialog escape=\"none\">\n  <DialogTrigger>End the migration</DialogTrigger>\n  <DialogContent>…</DialogContent>\n</AlertDialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "focus",
+      "title": "The safest thing under the reader’s hands",
+      "note": "Focus lands on the cancel action rather than on the first tabbable element, which is what the APG advises for a step that is not easily reversible. It is a default of the member, not something a consumer remembers to set.",
+      "language": "tsx",
+      "source": "<AlertDialog initialFocus=\"cancel\">\n  <DialogTrigger>Delete</DialogTrigger>\n  <DialogContent>…</DialogContent>\n</AlertDialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "A confirmation that has more to say",
+      "note": "A body between the header and the actions holds the list of what is about to go. The description stays the one sentence aria-describedby announces, so the reader hears the consequence before the detail.",
+      "language": "tsx",
+      "source": "<DialogHeader>\n  <AlertDialogIcon />\n  <DialogTitle>Delete 3 documents?</DialogTitle>\n  <DialogDescription>This cannot be undone.</DialogDescription>\n</DialogHeader>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "The actions are the consumer’s own buttons",
+      "note": "render hands each control every attribute the family wrote, so the danger button is the library’s Button with the family’s behaviour on it — nothing is reimplemented and nothing is wrapped.",
+      "language": "tsx",
+      "source": "<AlertDialogAction render={(props) => <Button {...props} tone=\"danger\" />}>\n  Delete project\n</AlertDialogAction>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What the role changes, and what it does not",
+      "note": "role=\"alertdialog\" and a mandatory aria-describedby are the two things the pattern adds; the keyboard is the modal dialog’s. The trigger still says aria-haspopup=\"dialog\", because the property has no alertdialog token.",
+      "language": "tsx",
+      "source": "<DialogDescription>The project and its 42 documents leave for everyone.</DialogDescription>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "alert-tones",
+      "title": "alert-tones.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogIcon,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  type DialogTone,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\n\nconst CONFIRMATIONS: {\n  tone: DialogTone;\n  trigger: string;\n  title: string;\n  description: string;\n  action: string;\n}[] = [\n  {\n    tone: 'accent',\n    trigger: 'Send invoices',\n    title: 'Send 214 invoices?',\n    description: 'Each customer receives the September invoice by email within the hour.',\n    action: 'Send invoices',\n  },\n  {\n    tone: 'warning',\n    trigger: 'Publish prices',\n    title: 'Publish the new prices?',\n    description: 'Open quotes keep their prices; new orders use the new ones from now on.',\n    action: 'Publish prices',\n  },\n  {\n    tone: 'success',\n    trigger: 'Close September',\n    title: 'Close the books for September?',\n    description: 'All 1,180 entries reconcile. Entries dated September can no longer be edited.',\n    action: 'Close September',\n  },\n];\n\nexport default function DialogAlertTones() {\n  return (\n    <Inline gap={2}>\n      {CONFIRMATIONS.map((confirmation) => (\n        <AlertDialog key={confirmation.tone} tone={confirmation.tone}>\n          <DialogTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                {confirmation.trigger}\n              </Button>\n            )}\n          />\n          <DialogContent>\n            <DialogHeader>\n              <AlertDialogIcon />\n              <DialogTitle>{confirmation.title}</DialogTitle>\n              <DialogDescription>{confirmation.description}</DialogDescription>\n            </DialogHeader>\n            <DialogFooter>\n              <AlertDialogCancel\n                render={(props) => (\n                  <Button {...props} tone=\"secondary\" variant=\"outline\">\n                    Not now\n                  </Button>\n                )}\n              />\n              <AlertDialogAction\n                render={(props) => (\n                  <Button {...props} tone={confirmation.tone}>\n                    {confirmation.action}\n                  </Button>\n                )}\n              />\n            </DialogFooter>\n          </DialogContent>\n        </AlertDialog>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "async-submit",
+      "title": "async-submit.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogAsyncSubmit() {\n  const [open, setOpen] = useState(false);\n  const [saving, setSaving] = useState(false);\n  const [sent, setSent] = useState(false);\n\n  const refund = () => {\n    setSaving(true);\n    setTimeout(() => {\n      setSaving(false);\n      setSent(true);\n      setOpen(false);\n    }, 1500);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next, request) => {\n          if (!next && saving) return request.cancel();\n          if (next) setSent(false);\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Refund order SO-1182\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Refund $1,240.00</DialogTitle>\n            <DialogDescription>To the card ending 4242, for order SO-1182.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Text size=\"sm\">\n              The payment provider takes a moment to confirm. The dialog stays open until it does.\n            </Text>\n          </DialogBody>\n          <DialogFooter>\n            <Button\n              disabled={saving}\n              variant=\"ghost\"\n              tone=\"secondary\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button loading={saving} messages={{ loading: 'Issuing refund' }} onClick={refund}>\n              Issue refund\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {sent ? (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          Refund issued.\n        </Text>\n      ) : null}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogBasic() {\n  const [open, setOpen] = useState(false);\n  const [email, setEmail] = useState('ap@northwindtraders.com');\n  const [draft, setDraft] = useState(email);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text size=\"sm\">{email}</Text>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (next) setDraft(email);\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n              Edit billing email\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Billing email</DialogTitle>\n            <DialogDescription>\n              Invoices and payment receipts for Northwind Traders go to this address.\n            </DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Field>\n              <FieldLabel>Email</FieldLabel>\n              <TextField type=\"email\" value={draft} onValueChange={setDraft} />\n            </Field>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              onClick={() => {\n                setEmail(draft);\n                setOpen(false);\n              }}\n            >\n              Save\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bulk-edit",
+      "title": "bulk-edit.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  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n} from '@slotted/react/table';\nimport { Text } from '@slotted/react/typography';\n\nconst STATUSES = [\n  { value: 'processing', label: 'Processing', tone: 'accent' },\n  { value: 'hold', label: 'On hold', tone: 'warning' },\n  { value: 'ready', label: 'Ready to ship', tone: 'success' },\n] as const;\n\nconst WAREHOUSES = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\ntype Status = (typeof STATUSES)[number]['value'];\n\nconst INITIAL: { id: string; customer: string; status: Status; warehouse: string }[] = [\n  { id: 'SO-1182', customer: 'Contoso Foods', status: 'processing', warehouse: 'RNO' },\n  { id: 'SO-1183', customer: 'Fabrikam Grocers', status: 'processing', warehouse: 'CMH' },\n  { id: 'SO-1184', customer: 'Tailspin Market', status: 'hold', warehouse: 'RNO' },\n  { id: 'SO-1185', customer: 'Woodgrove Deli', status: 'processing', warehouse: 'SAV' },\n];\n\nconst statusOf = (value: Status) => STATUSES.find((status) => status.value === value)!;\nconst warehouseOf = (value: string) => WAREHOUSES.find((option) => option.value === value)?.label;\n\nexport default function DialogBulkEdit() {\n  const [orders, setOrders] = useState(INITIAL);\n  const [chosen, setChosen] = useState<readonly string[]>([]);\n  const [editing, setEditing] = useState<readonly string[]>([]);\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState<Status>('ready');\n  const [warehouse, setWarehouse] = useState('RNO');\n  const count = chosen.length;\n  const noun = editing.length === 1 ? 'order' : 'orders';\n\n  const apply = () => {\n    setOrders((rows) =>\n      rows.map((row) => (editing.includes(row.id) ? { ...row, status, warehouse } : row)),\n    );\n    setChosen([]);\n    setOpen(false);\n  };\n\n  return (\n    <Stack gap={3}>\n      <Inline align=\"center\" gap={3}>\n        <Text size=\"sm\" tone=\"muted\">\n          {count === 0 ? 'Select orders to edit them together.' : `${count} selected`}\n        </Text>\n        <Dialog\n          open={open}\n          onOpenChange={(next) => {\n            if (next) setEditing(chosen);\n            setOpen(next);\n          }}\n        >\n          <DialogTrigger\n            render={(props) => (\n              <Button\n                {...props}\n                disabled={count === 0}\n                focusableWhenDisabled\n                size=\"sm\"\n                tone=\"secondary\"\n                variant=\"outline\"\n              >\n                Edit selected\n              </Button>\n            )}\n          />\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>\n                Edit {editing.length} {noun}\n              </DialogTitle>\n              <DialogDescription>{editing.join(', ')}</DialogDescription>\n              <DialogClose />\n            </DialogHeader>\n            <DialogBody>\n              <Stack gap={4}>\n                <Field>\n                  <FieldLabel>Status</FieldLabel>\n                  <Select\n                    items={[...STATUSES]}\n                    value={status}\n                    onValueChange={(next) => {\n                      if (typeof next === 'string') setStatus(next as Status);\n                    }}\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {STATUSES.map((option) => (\n                        <SelectItem key={option.value} value={option.value}>\n                          {option.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field>\n                  <FieldLabel>Ships from</FieldLabel>\n                  <Select\n                    items={WAREHOUSES}\n                    value={warehouse}\n                    onValueChange={(next) => {\n                      if (typeof next === 'string') setWarehouse(next);\n                    }}\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {WAREHOUSES.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            </DialogBody>\n            <DialogFooter>\n              <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={apply}>\n                Update {editing.length} {noun}\n              </Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      </Inline>\n      <Table columns={5} selectionMode=\"multiple\" value={chosen} onValueChange={setChosen}>\n        <TableContent>\n          <TableHead>\n            <TableRow>\n              <TableSelectAll />\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader>Status</TableColumnHeader>\n              <TableColumnHeader>Ships from</TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {orders.map((row) => (\n              <TableRow key={row.id} value={row.id}>\n                <TableSelect />\n                <TableRowHeader>{row.id}</TableRowHeader>\n                <TableCell>{row.customer}</TableCell>\n                <TableCell>\n                  <Badge tone={statusOf(row.status).tone}>{statusOf(row.status).label}</Badge>\n                </TableCell>\n                <TableCell>{warehouseOf(row.warehouse)}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "cancel-order",
+      "title": "cancel-order.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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogIcon,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Text } from '@slotted/react/typography';\n\nconst REASONS = [\n  { value: 'customer', label: 'The customer asked to cancel' },\n  { value: 'stock', label: 'Items are out of stock' },\n  { value: 'payment', label: 'The payment was flagged' },\n  { value: 'duplicate', label: 'Duplicate order' },\n];\n\nexport default function DialogCancelOrder() {\n  const [cancelled, setCancelled] = useState(false);\n  const [reason, setReason] = useState<string | null>(null);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text weight=\"medium\">Order SO-1182</Text>\n      <Badge tone={cancelled ? 'danger' : 'accent'}>{cancelled ? 'Cancelled' : 'Processing'}</Badge>\n      <AlertDialog onOpenChange={(open) => open && setReason(null)}>\n        <DialogTrigger\n          render={(props) => (\n            <Button\n              {...props}\n              disabled={cancelled}\n              focusableWhenDisabled\n              size=\"sm\"\n              tone=\"danger\"\n              variant=\"outline\"\n            >\n              Cancel order\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <AlertDialogIcon />\n            <DialogTitle>Cancel order SO-1182?</DialogTitle>\n            <DialogDescription>\n              Contoso Foods is refunded $1,240.00 and the 6 items go back to stock. The order cannot\n              be reopened.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogBody>\n            <Field required>\n              <FieldLabel>Reason</FieldLabel>\n              <Select\n                items={REASONS}\n                value={reason}\n                onValueChange={(next) => setReason(typeof next === 'string' ? next : null)}\n              >\n                <SelectTrigger>\n                  <SelectValue placeholder=\"Choose a reason\" />\n                </SelectTrigger>\n                <SelectContent>\n                  {REASONS.map((option) => (\n                    <SelectItem key={option.value} value={option.value}>\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </Field>\n          </DialogBody>\n          <DialogFooter>\n            <AlertDialogCancel\n              render={(props) => (\n                <Button {...props} tone=\"secondary\" variant=\"outline\">\n                  Keep order\n                </Button>\n              )}\n            />\n            <AlertDialogAction\n              onClick={() => setCancelled(true)}\n              render={(props) => (\n                <Button {...props} disabled={reason === null} tone=\"danger\">\n                  Cancel order\n                </Button>\n              )}\n            />\n          </DialogFooter>\n        </DialogContent>\n      </AlertDialog>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "create-shipment",
+      "title": "create-shipment.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState, type SubmitEvent } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Checkbox } from '@slotted/react/checkbox';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\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 CARRIERS = [\n  { value: 'ups', label: 'UPS Ground', description: '3–5 business days' },\n  { value: 'fedex', label: 'FedEx 2Day', description: '2 business days' },\n  { value: 'usps', label: 'USPS Priority Mail', description: '1–3 business days' },\n];\n\nfunction weightError(value: string): string {\n  if (value.trim() === '') return 'Enter the total weight of the packages.';\n  const weight = Number(value);\n  if (!Number.isFinite(weight) || weight <= 0) return 'Enter a weight above 0, such as 18.4.';\n  return '';\n}\n\nexport default function DialogCreateShipment() {\n  const [open, setOpen] = useState(false);\n  const [carrier, setCarrier] = useState('ups');\n  const [weight, setWeight] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n  const [saving, setSaving] = useState(false);\n  const [created, setCreated] = useState<string | null>(null);\n  const error = submitted ? weightError(weight) : '';\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    if (weightError(weight) !== '') return;\n    setSaving(true);\n    setTimeout(() => {\n      const label = CARRIERS.find((option) => option.value === carrier)?.label;\n      setSaving(false);\n      setCreated(`Shipment SH-4472 created with ${label}.`);\n      setOpen(false);\n    }, 1200);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next, request) => {\n          if (!next && saving) return request.cancel();\n          if (next) {\n            setWeight('');\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n        size=\"lg\"\n      >\n        <DialogTrigger render={(props) => <Button {...props}>Create shipment</Button>} />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Create a shipment</DialogTitle>\n            <DialogDescription>\n              Order SO-1182 for Contoso Foods: 6 items to 1200 Pike St, Seattle.\n            </DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <form id=\"create-shipment\" noValidate onSubmit={submit}>\n              <Stack gap={5}>\n                <Field>\n                  <FieldLabel>Carrier</FieldLabel>\n                  <Select\n                    items={CARRIERS}\n                    name=\"carrier\"\n                    value={carrier}\n                    onValueChange={(next) => {\n                      if (typeof next === 'string') setCarrier(next);\n                    }}\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {CARRIERS.map((option) => (\n                        <SelectItem\n                          key={option.value}\n                          description={option.description}\n                          value={option.value}\n                        >\n                          {option.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field required invalid={error !== '' ? true : undefined}>\n                  <FieldLabel>Weight in kilograms</FieldLabel>\n                  <FieldDescription>\n                    All packages together, as weighed at the dock.\n                  </FieldDescription>\n                  <TextField\n                    inputMode=\"decimal\"\n                    name=\"weight\"\n                    value={weight}\n                    onValueChange={setWeight}\n                  />\n                  <FieldError live=\"polite\" reserve>\n                    {error}\n                  </FieldError>\n                </Field>\n                <Checkbox defaultChecked name=\"notify\">\n                  Email the tracking number to the customer\n                </Checkbox>\n              </Stack>\n            </form>\n          </DialogBody>\n          <DialogFooter>\n            <Button\n              disabled={saving}\n              variant=\"ghost\"\n              tone=\"secondary\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              form=\"create-shipment\"\n              loading={saving}\n              messages={{ loading: 'Creating shipment' }}\n              type=\"submit\"\n            >\n              Create shipment\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {created === null ? null : (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          {created}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "destructive",
+      "title": "destructive.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogIcon,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogDestructive() {\n  const [deleted, setDeleted] = useState(false);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <AlertDialog>\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} tone=\"danger\" variant=\"outline\">\n              Delete price list\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <AlertDialogIcon />\n            <DialogTitle>Delete the 2026 wholesale price list?</DialogTitle>\n            <DialogDescription>\n              The 412 prices in it are removed, and 9 customers on this list move to retail prices.\n              This cannot be undone.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialogCancel\n              render={(props) => (\n                <Button {...props} tone=\"secondary\" variant=\"outline\">\n                  Keep price list\n                </Button>\n              )}\n            />\n            <AlertDialogAction\n              onClick={() => setDeleted(true)}\n              render={(props) => (\n                <Button {...props} tone=\"danger\">\n                  Delete price list\n                </Button>\n              )}\n            />\n          </DialogFooter>\n        </DialogContent>\n      </AlertDialog>\n      {deleted ? (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          The 2026 wholesale price list was deleted.\n        </Text>\n      ) : null}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dismiss",
+      "title": "dismiss.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogDismiss() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen} escape=\"none\" outsidePress=\"none\">\n      <DialogTrigger render={(props) => <Button {...props}>Import products</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Import 1,240 products</DialogTitle>\n          <DialogDescription>\n            From spring-catalogue.csv into the Northwind price list.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody>\n          <Text size=\"sm\">\n            38 rows update existing products and 1,202 add new ones. Escape and a press outside the\n            panel leave this dialog open; choose one of the actions.\n          </Text>\n        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Cancel import\n          </Button>\n          <Button onClick={() => setOpen(false)}>Start import</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\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  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\nexport default function DialogForm() {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n  const [added, setAdded] = useState<string | null>(null);\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    setAdded(`${name.trim()} was added to Contoso Foods.`);\n    setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (next) {\n            setName('');\n            setEmail('');\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>New contact</DialogTitle>\n            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <form id=\"new-contact\" noValidate onSubmit={submit}>\n              <Stack gap={4}>\n                <Field required invalid={errors?.name ? true : undefined}>\n                  <FieldLabel>Full name</FieldLabel>\n                  <TextField autoComplete=\"name\" 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>Email</FieldLabel>\n                  <TextField\n                    autoComplete=\"email\"\n                    type=\"email\"\n                    value={email}\n                    onValueChange={setEmail}\n                  />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.email}\n                  </FieldError>\n                </Field>\n              </Stack>\n            </form>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"new-contact\">\n              Add contact\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {added === null ? null : (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          {added}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "full-screen",
+      "title": "full-screen.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst STOPS = [\n  { time: '08:10', place: 'Contoso Foods, 1200 Pike St' },\n  { time: '08:55', place: 'Fabrikam Grocers, 410 Broadway E' },\n  { time: '09:40', place: 'Tailspin Market, 3300 Fremont Ave N' },\n  { time: '10:30', place: 'Woodgrove Deli, 85 Pine St' },\n  { time: '11:15', place: 'Wide World Importers, 2201 1st Ave S' },\n];\n\nexport default function DialogFullScreen() {\n  return (\n    <Dialog fullscreenToggle size=\"lg\">\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Open route plan\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Route 14, Tuesday 6 October</DialogTitle>\n          <DialogDescription>5 stops, 38 km, driver Ana Souza.</DialogDescription>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\n          <Stack gap={3}>\n            {STOPS.map((stop) => (\n              <Inline key={stop.time} gap={4}>\n                <Text size=\"sm\" tone=\"muted\">\n                  {stop.time}\n                </Text>\n                <Text size=\"sm\">{stop.place}</Text>\n              </Inline>\n            ))}\n          </Stack>\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "initial-focus",
+      "title": "initial-focus.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nconst CUSTOMERS = [\n  'Contoso Foods',\n  'Fabrikam Grocers',\n  'Northwind Traders',\n  'Tailspin Market',\n  'Wide World Importers',\n  'Woodgrove Deli',\n];\n\nexport default function DialogInitialFocus() {\n  const search = useRef<HTMLInputElement>(null);\n  const [query, setQuery] = useState('');\n  const matches = CUSTOMERS.filter((name) => name.toLowerCase().includes(query.toLowerCase()));\n\n  return (\n    <Dialog initialFocus={search} onOpenChange={(open) => open && setQuery('')}>\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Find a customer\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Find a customer</DialogTitle>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\n          <Stack gap={4}>\n            <TextField\n              ref={search}\n              aria-label=\"Customer name\"\n              placeholder=\"Search by name\"\n              type=\"search\"\n              value={query}\n              onValueChange={setQuery}\n            />\n            <Stack gap={2}>\n              {matches.map((name) => (\n                <Text key={name} size=\"sm\">\n                  {name}\n                </Text>\n              ))}\n            </Stack>\n          </Stack>\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "menu-action",
+      "title": "menu-action.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';\nimport { TextField } from '@slotted/react/text-field';\n\nexport default function DialogMenuAction() {\n  const actions = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Menu>\n        <MenuTrigger\n          ref={actions}\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Customer actions\n            </Button>\n          )}\n        />\n        <MenuContent>\n          <MenuItem onSelect={() => setOpen(true)}>Change credit limit…</MenuItem>\n          <MenuItem>Export statement</MenuItem>\n          <MenuSeparator />\n          <MenuItem tone=\"danger\">Suspend account…</MenuItem>\n        </MenuContent>\n      </Menu>\n      <Dialog open={open} onOpenChange={setOpen} finalFocus={actions} size=\"sm\">\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Credit limit</DialogTitle>\n            <DialogDescription>\n              Contoso Foods has $18,420.00 outstanding on open invoices.\n            </DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Field>\n              <FieldLabel>Limit in US dollars</FieldLabel>\n              <TextField inputMode=\"decimal\" defaultValue=\"25000\" />\n            </Field>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button onClick={() => setOpen(false)}>Save limit</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\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  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst STEPS = [\n  'Pick the 6 lines on the pick list from aisles 4 and 9.',\n  'Pack the olive oil upright, with dividers.',\n  'Print the UPS label and attach it to the top face.',\n];\n\nexport default function DialogNonModal() {\n  return (\n    <Dialog modal={false} outsidePress=\"none\" placement=\"top\" size=\"sm\">\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Show packing steps\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Packing steps</DialogTitle>\n          <DialogDescription>\n            Order SO-1182. The page stays usable behind this panel.\n          </DialogDescription>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\n          <Stack gap={2}>\n            {STEPS.map((step, index) => (\n              <Text key={step} size=\"sm\">\n                {index + 1}. {step}\n              </Text>\n            ))}\n          </Stack>\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "parts",
+      "title": "parts.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  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\n\nconst DETAILS = [\n  { term: 'Carrier', value: 'UPS Ground' },\n  { term: 'Tracking number', value: '1Z 999 AA1 01 2345 6784' },\n  { term: 'Packages', value: '3, 18.4 kg in total' },\n  { term: 'Estimated delivery', value: 'Thursday, 8 October' },\n];\n\nexport default function DialogParts() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            View shipment\n          </Button>\n        )}\n      />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Shipment SH-4471</DialogTitle>\n          <DialogDescription>Order SO-1182 for Contoso Foods, Seattle.</DialogDescription>\n          <Badge tone=\"accent\">In transit</Badge>\n          <DialogClose />\n        </DialogHeader>\n        <DialogBody>\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        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Close\n          </Button>\n          <Button>Print label</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "result",
+      "title": "result.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  type DialogHandle,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\nconst OUTCOMES: Record<string, string> = {\n  partial: 'Ships the 4 items in stock today.',\n  wait: 'Holds the order until every item is in stock.',\n};\n\nexport default function DialogResult() {\n  const dialog = useRef<DialogHandle>(null);\n  const [outcome, setOutcome] = useState<string | null>(null);\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        ref={dialog}\n        onOpenChange={(open, request) => {\n          if (!open) {\n            setOutcome((request.result && OUTCOMES[request.result]) ?? 'Closed without a choice.');\n          }\n        }}\n      >\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Ship order SO-1182\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Two items are out of stock</DialogTitle>\n            <DialogDescription>\n              Aniseed syrup and dried pears are back in stock on 14 October.\n            </DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogFooter>\n            <Button\n              variant=\"outline\"\n              tone=\"secondary\"\n              onClick={() => dialog.current?.close('wait')}\n            >\n              Wait for all items\n            </Button>\n            <Button onClick={() => dialog.current?.close('partial')}>Ship 4 items now</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {outcome === null ? null : (\n        <Text size=\"sm\" tone=\"muted\">\n          {outcome}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "row-action",
+      "title": "row-action.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { TextField } from '@slotted/react/text-field';\nimport { VisuallyHidden } from '@slotted/react/visually-hidden';\n\nconst ORDERS = [\n  { id: 'SO-1182', customer: 'Contoso Foods', total: '$1,240.00', amount: '1240.00', card: '4242' },\n  { id: 'SO-1183', customer: 'Fabrikam Grocers', total: '$386.50', amount: '386.50', card: '1881' },\n  {\n    id: 'SO-1184',\n    customer: 'Tailspin Market',\n    total: '$2,075.25',\n    amount: '2075.25',\n    card: '0005',\n  },\n];\n\ntype Order = (typeof ORDERS)[number];\n\nexport default function DialogRowAction() {\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={`Refund ${row.id}`}\n                    size=\"sm\"\n                    tone=\"secondary\"\n                    variant=\"ghost\"\n                    onClick={() => {\n                      setOrder(row);\n                      setOpen(true);\n                    }}\n                  >\n                    Refund\n                  </Button>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n      <Dialog open={open} onOpenChange={setOpen} size=\"sm\">\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Refund {order.id}</DialogTitle>\n            <DialogDescription>\n              {order.customer} paid {order.total} with the card ending {order.card}.\n            </DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Field>\n              <FieldLabel>Amount in US dollars</FieldLabel>\n              <TextField key={order.id} inputMode=\"decimal\" defaultValue={order.amount} />\n            </Field>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button onClick={() => setOpen(false)}>Issue refund</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogIcon,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogUnsavedChanges() {\n  const [open, setOpen] = useState(false);\n  const [confirming, setConfirming] = useState(false);\n  const [address, setAddress] = useState('Pier 70, Suite 300, Seattle, WA 98121');\n  const [draft, setDraft] = useState(address);\n  const dirty = draft !== address;\n\n  const leave = () => {\n    if (dirty) setConfirming(true);\n    else setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next, request) => {\n          if (next) {\n            setDraft(address);\n            setOpen(true);\n          } else if (dirty) {\n            request.cancel();\n            setConfirming(true);\n          } else {\n            setOpen(false);\n          }\n        }}\n      >\n        <DialogTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Change delivery address\n            </Button>\n          )}\n        />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Delivery address</DialogTitle>\n            <DialogDescription>Applies to order SO-1182 and to later orders.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <Field>\n              <FieldLabel>Address</FieldLabel>\n              <TextField value={draft} onValueChange={setDraft} />\n            </Field>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={leave}>\n              Cancel\n            </Button>\n            <Button\n              onClick={() => {\n                setAddress(draft);\n                setOpen(false);\n              }}\n            >\n              Save address\n            </Button>\n          </DialogFooter>\n          <AlertDialog open={confirming} onOpenChange={setConfirming} tone=\"warning\">\n            <DialogContent>\n              <DialogHeader>\n                <AlertDialogIcon />\n                <DialogTitle>Discard the new address?</DialogTitle>\n                <DialogDescription>\n                  The address you typed is not saved. The order keeps the previous one.\n                </DialogDescription>\n              </DialogHeader>\n              <DialogFooter>\n                <AlertDialogCancel\n                  render={(props) => (\n                    <Button {...props} tone=\"secondary\" variant=\"outline\">\n                      Keep editing\n                    </Button>\n                  )}\n                />\n                <AlertDialogAction\n                  onClick={() => setOpen(false)}\n                  render={(props) => (\n                    <Button {...props} tone=\"warning\">\n                      Discard changes\n                    </Button>\n                  )}\n                />\n              </DialogFooter>\n            </DialogContent>\n          </AlertDialog>\n        </DialogContent>\n      </Dialog>\n      <Text size=\"sm\" tone=\"muted\">\n        {address}\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}