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

package/docs/dialog.json

@@ -0,0 +1,1141 @@
+{
+  "family": "dialog",
+  "ui": "dialog",
+  "binding": "angular",
+  "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 { SlDialog, SlDialogBody, SlDialogClose, SlDialogDescription, SlDialogFooter, SlDialogHeader, SlDialogTitle, SlDialogTrigger, provideDialogDefaults } from '@slotted/angular/dialog';",
+        "selector": "sl-dialog, [slDialogTrigger], [slDialogHeader], [slDialogTitle], [slDialogDescription], [slDialogBody], [slDialogFooter], [slDialogClose]",
+        "exportAs": "slDialog, slDialogTrigger, slDialogHeader, slDialogTitle, slDialogClose"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, in a portal; the sl-dialog host stays where it is written",
+          "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": "your own element, with slDialogTrigger on it",
+          "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. On slButton, 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": "your own header, with slDialogHeader on it",
+          "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": "your own heading, with slDialogTitle on it",
+          "required": false,
+          "purpose": "The visible name of the dialog. The panel points aria-labelledby at it only while it is rendered."
+        },
+        {
+          "part": "description",
+          "element": "your own element, with slDialogDescription on it",
+          "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 sl-dialog and required in sl-alert-dialog."
+        },
+        {
+          "part": "body",
+          "element": "your own element, with slDialogBody on it",
+          "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": "your own footer, with slDialogFooter on it",
+          "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": "your own button, with slDialogClose on it",
+          "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, appended by slDialogHeader 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": "false",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "description": "Whether the dialog is open. A model: bind [(open)] to a signal, whose initial value is the starting state. (openChangeRequest) can refuse a change before it is written."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+          "defaultValue": "md",
+          "appliesTo": "sl-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "description": "Whether Escape asks the dialog to close. Escape reaches the topmost dialog only."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "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": "sl-dialog, sl-alert-dialog",
+          "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 slDialogClose takes precedence."
+        },
+        {
+          "name": "initialFocus",
+          "type": "'first' | 'container' | 'cancel' | HTMLElement | false",
+          "defaultValue": "first",
+          "appliesTo": "sl-dialog",
+          "description": "Where focus goes when the dialog opens: the first focusable element, the panel itself (container), the cancel part, an element such as a template reference to an input, or nowhere (false). Use container for content that is read before it is used, such as a list or a table."
+        },
+        {
+          "name": "finalFocus",
+          "type": "HTMLElement | false",
+          "defaultValue": "—",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "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": "slDialogClose, slAlertDialogCancel, slAlertDialogAction",
+          "description": "The result this button closes the dialog with, read from request.result in (openChangeRequest) and from (closed). slAlertDialogCancel defaults to \"cancel\" and slAlertDialogAction to \"confirm\"."
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-dialog, provideDialogDefaults",
+          "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": "sl-dialog, provideDialogDefaults",
+          "description": "Whether a press outside the panel asks the dialog to close. sl-alert-dialog fixes it at none."
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "sl-dialog, provideDialogDefaults",
+          "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": "sl-dialog, provideDialogDefaults",
+          "description": "Whether sl-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 slCard 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": "sl-dialog, provideDialogDefaults",
+          "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": "sl-dialog",
+          "description": "Adds a button to slDialogHeader that expands the panel to the whole layer and restores it, for content the reader wants more room for."
+        },
+        {
+          "name": "fullscreen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-dialog",
+          "description": "Whether the panel is expanded by the toggle. A model: bind [(fullscreen)] to a signal, whose initial value is the starting state."
+        }
+      ],
+      "composition": [
+        {
+          "name": "directives on your own elements",
+          "type": "attribute selector",
+          "defaultValue": "—",
+          "appliesTo": "slDialogTrigger, slDialogHeader, slDialogTitle, slDialogDescription, slDialogBody, slDialogFooter, slDialogClose, slAlertDialogIcon, slAlertDialogCancel, slAlertDialogAction",
+          "description": "Every part except the layer is a directive on an element you write, so the trigger, the cancel and the action can be a slButton."
+        },
+        {
+          "name": "exportAs",
+          "type": "'slDialog' | 'slAlertDialog'",
+          "defaultValue": "—",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "description": "A template reference variable reaches the instance. [slDialogTrigger]=\"dialog\" links a trigger to it from anywhere in the same template."
+        },
+        {
+          "name": "openDialog(), close(result), focus()",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "the instance",
+          "description": "Open the dialog, close it with a result, or move focus into the panel, from the template or from code. There is no service that opens a component as a dialog: render sl-dialog in the template, under @if when it should exist only while open."
+        },
+        {
+          "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": "sl-dialog, sl-alert-dialog",
+          "description": "The element this dialog is rendered into, instead of the shared portal root. The layer takes the theme, scheme, density and direction of the place where sl-dialog is written, with or without a trigger."
+        },
+        {
+          "name": "provideDialogDefaults()",
+          "type": "{ size, placement, scroll, surface, mount, fullScreen, modal, escape, outsidePress, back }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Sets these ten values once for every dialog under the injector, through DIALOG_DEFAULTS. A value set on one dialog takes precedence."
+        }
+      ],
+      "events": [
+        {
+          "name": "(openChangeRequest)",
+          "payload": "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 close() together."
+        },
+        {
+          "name": "(openChange)",
+          "payload": "boolean",
+          "when": "After the open state changed, so a template can bind [(open)]. It carries the new state only; the reason is on (openChangeRequest)."
+        },
+        {
+          "name": "(fullscreenChangeRequest)",
+          "payload": "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": "(fullscreenChange)",
+          "payload": "boolean",
+          "when": "After the expanded state changed, so a template can bind [(fullscreen)]."
+        },
+        {
+          "name": "(closed)",
+          "payload": "string | undefined",
+          "when": "Once the dialog has closed, with the result of the close: the value of the button that closed it, the argument of close(result), or undefined."
+        }
+      ],
+      "accessibility": [
+        "sl-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 sl-dialog moves to the panel and 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 { SlAlertDialog, SlAlertDialogAction, SlAlertDialogCancel, SlAlertDialogIcon, SlDialogBody, SlDialogDescription, SlDialogFooter, SlDialogHeader, SlDialogTitle, SlDialogTrigger } from '@slotted/angular/dialog';",
+        "selector": "sl-alert-dialog, [slDialogTrigger], [slAlertDialogIcon], [slAlertDialogCancel], [slAlertDialogAction]",
+        "exportAs": "slAlertDialog, slAlertDialogCancel, slAlertDialogAction"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, in a portal; the sl-dialog host stays where it is written",
+          "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": "your own element, with slDialogTrigger on it",
+          "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. On slButton, 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": "your own header, with slDialogHeader on it",
+          "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": "your own heading, with slDialogTitle on it",
+          "required": false,
+          "purpose": "The visible name of the dialog. The panel points aria-labelledby at it only while it is rendered."
+        },
+        {
+          "part": "description",
+          "element": "your own element, with slDialogDescription on it",
+          "required": true,
+          "purpose": "The sentence that says what is about to happen. Required: the alertdialog pattern makes aria-describedby mandatory, and sl-alert-dialog throws an error when it is missing."
+        },
+        {
+          "part": "body",
+          "element": "your own element, with slDialogBody on it",
+          "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": "your own footer, with slDialogFooter on it",
+          "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": "your own element, with slAlertDialogIcon on it",
+          "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": "your own button, with slAlertDialogCancel on it",
+          "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\". On slButton, the element keeps the button’s data-part=\"root\"."
+        },
+        {
+          "part": "action",
+          "element": "your own button, with slAlertDialogAction on it",
+          "required": true,
+          "purpose": "The action being confirmed. It closes with the reason submit and the result \"confirm\". On slButton, the element keeps the button’s data-part=\"root\"."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "description": "Whether the dialog is open. A model: bind [(open)] to a signal, whose initial value is the starting state. (openChangeRequest) can refuse a change before it is written."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+          "defaultValue": "sm",
+          "appliesTo": "sl-alert-dialog",
+          "description": "The maximum width of the panel. sl-alert-dialog defaults to sm, 24rem."
+        },
+        {
+          "name": "placement",
+          "type": "'center' | 'top'",
+          "defaultValue": "center",
+          "appliesTo": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "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": "sl-dialog, sl-alert-dialog, provideDialogDefaults",
+          "description": "Whether Escape asks the dialog to close. Escape reaches the topmost dialog only."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "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": "sl-dialog, sl-alert-dialog",
+          "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 slDialogClose takes precedence."
+        },
+        {
+          "name": "initialFocus",
+          "type": "'first' | 'container' | 'cancel' | HTMLElement | false",
+          "defaultValue": "cancel",
+          "appliesTo": "sl-alert-dialog",
+          "description": "Where focus goes when the dialog opens. The default, cancel, is the least destructive answer."
+        },
+        {
+          "name": "finalFocus",
+          "type": "HTMLElement | false",
+          "defaultValue": "—",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "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": "slDialogClose, slAlertDialogCancel, slAlertDialogAction",
+          "description": "The result this button closes the dialog with, read from request.result in (openChangeRequest) and from (closed). slAlertDialogCancel defaults to \"cancel\" and slAlertDialogAction to \"confirm\"."
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "danger",
+          "appliesTo": "sl-alert-dialog",
+          "description": "The kind of decision. It sets the mark slAlertDialogIcon draws and its colour."
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-alert-dialog",
+          "description": "Fixed: an alert dialog is always modal."
+        },
+        {
+          "name": "outsidePress",
+          "type": "'close' | 'none'",
+          "defaultValue": "none",
+          "appliesTo": "sl-alert-dialog",
+          "description": "Fixed: a press outside never closes an alert dialog."
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "sl-alert-dialog",
+          "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": "sl-alert-dialog",
+          "description": "Whether sl-alert-dialog paints the panel. plain removes the paint and keeps the behaviour."
+        },
+        {
+          "name": "fullScreen",
+          "type": "'never' | 'narrow' | 'always'",
+          "defaultValue": "never",
+          "appliesTo": "sl-alert-dialog",
+          "description": "When the panel fills the whole layer. sl-alert-dialog keeps its margins at every width by default."
+        }
+      ],
+      "composition": [
+        {
+          "name": "directives on your own elements",
+          "type": "attribute selector",
+          "defaultValue": "—",
+          "appliesTo": "slDialogTrigger, slDialogHeader, slDialogTitle, slDialogDescription, slDialogBody, slDialogFooter, slDialogClose, slAlertDialogIcon, slAlertDialogCancel, slAlertDialogAction",
+          "description": "Every part except the layer is a directive on an element you write, so the trigger, the cancel and the action can be a slButton."
+        },
+        {
+          "name": "exportAs",
+          "type": "'slDialog' | 'slAlertDialog'",
+          "defaultValue": "—",
+          "appliesTo": "sl-dialog, sl-alert-dialog",
+          "description": "A template reference variable reaches the instance. [slDialogTrigger]=\"dialog\" links a trigger to it from anywhere in the same template."
+        },
+        {
+          "name": "openDialog(), close(result), focus()",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "the instance",
+          "description": "Open the dialog, close it with a result, or move focus into the panel, from the template or from code. There is no service that opens a component as a dialog: render sl-dialog in the template, under @if when it should exist only while open."
+        },
+        {
+          "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": "sl-dialog, sl-alert-dialog",
+          "description": "The element this dialog is rendered into, instead of the shared portal root. The layer takes the theme, scheme, density and direction of the place where sl-dialog is written, with or without a trigger."
+        },
+        {
+          "name": "provideDialogDefaults()",
+          "type": "{ size, placement, scroll, surface, mount, fullScreen, modal, escape, outsidePress, back }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Sets these ten values once for every dialog under the injector, through DIALOG_DEFAULTS. A value set on one dialog takes precedence."
+        }
+      ],
+      "events": [
+        {
+          "name": "(openChangeRequest)",
+          "payload": "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 close() together."
+        },
+        {
+          "name": "(openChange)",
+          "payload": "boolean",
+          "when": "After the open state changed, so a template can bind [(open)]. It carries the new state only; the reason is on (openChangeRequest)."
+        },
+        {
+          "name": "(fullscreenChangeRequest)",
+          "payload": "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": "(fullscreenChange)",
+          "payload": "boolean",
+          "when": "After the expanded state changed, so a template can bind [(fullscreen)]."
+        },
+        {
+          "name": "(closed)",
+          "payload": "string | undefined",
+          "when": "Once the dialog has closed, with the result of the close: the value of the button that closed it, the argument of close(result), or undefined."
+        }
+      ],
+      "accessibility": [
+        "sl-alert-dialog 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. sl-alert-dialog throws an error when no slDialogDescription is rendered while it is open, so a confirmation is never announced without the sentence that says what it does.",
+        "Focus starts on slAlertDialogCancel, 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. slDialogClose inside sl-alert-dialog 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": "html",
+      "source": "<button slButton [slDialogTrigger]=\"d\">Edit project</button>\n<sl-dialog #d=\"slDialog\" [(open)]=\"open\">\n  <header slDialogHeader>\n    <h2 slDialogTitle>Edit project</h2>\n    <p slDialogDescription>The name is visible to the whole space.</p>\n    <button slDialogClose></button>\n  </header>\n  <div slDialogBody>\n    <input slTextField aria-label=\"Name\" value=\"Home page redesign\" />\n  </div>\n  <footer slDialogFooter>\n    <button slButton variant=\"ghost\" tone=\"secondary\">Cancel</button>\n    <button slButton>Save</button>\n  </footer>\n</sl-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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n  type DialogSize,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-sizes',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline [gap]=\"2\">\n      @for (option of sizes; track option.size) {\n        <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n          {{ option.size }}\n        </button>\n        <sl-dialog #dialog=\"slDialog\" [size]=\"option.size\">\n          <header slDialogHeader>\n            <h2 slDialogTitle>{{ option.title }}</h2>\n            <button slDialogClose></button>\n          </header>\n          <div slDialogBody>\n            <span slText size=\"sm\">{{ option.body }}</span>\n          </div>\n        </sl-dialog>\n      }\n    </div>\n  `,\n})\nexport class DialogSizes {\n  readonly sizes = SIZES;\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlTextarea } from '@slotted/angular/textarea';\n\n@Component({\n  selector: 'app-dialog-placement',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldLabel,\n    SlTextarea,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n      Add a note\n    </button>\n    <sl-dialog #dialog=\"slDialog\" placement=\"top\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Note on order SO-1182</h2>\n        <p slDialogDescription>The warehouse team sees the note on the pick list.</p>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slField>\n          <label slFieldLabel>Note</label>\n          <textarea\n            slTextarea\n            [rows]=\"3\"\n            [maxRows]=\"12\"\n            placeholder=\"Leave at the loading dock after 2 pm.\"\n          ></textarea>\n        </div>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">Cancel</button>\n        <button slButton (click)=\"open.set(false)\">Add note</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogPlacement {\n  readonly open = signal(false);\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-scroll',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"items\">\n        Review 24 line items\n      </button>\n      <sl-dialog #items=\"slDialog\" [(open)]=\"open\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Purchase order PO-7730</h2>\n          <p slDialogDescription>Only the list scrolls; the actions stay in view.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <div slStack [gap]=\"2\">\n            @for (item of lineItems; track item.sku) {\n              <div slInline [gap]=\"3\" justify=\"between\">\n                <span slText size=\"sm\">{{ item.name }}</span>\n                <span slText size=\"sm\" tone=\"muted\">{{ item.sku }}</span>\n              </div>\n            }\n          </div>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton (click)=\"open.set(false)\">Approve order</button>\n        </footer>\n      </sl-dialog>\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"terms\">\n        Read the terms of sale\n      </button>\n      <sl-dialog #terms=\"slDialog\" scroll=\"viewport\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Terms of sale</h2>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <div slStack [gap]=\"4\">\n            @for (term of termsOfSale; track term) {\n              <span slText>{{ term }}</span>\n            }\n          </div>\n        </div>\n      </sl-dialog>\n    </div>\n  `,\n})\nexport class DialogScroll {\n  readonly open = signal(false);\n  readonly lineItems = ITEMS;\n  readonly termsOfSale = TERMS;\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": "html",
+      "source": "<sl-dialog surface=\"plain\" [(open)]=\"open\">\n  <div slCard fill=\"elevated\">\n    <h2 slDialogTitle>A card, inside the layer</h2>\n    <p slDialogDescription>The family paints nothing here.</p>\n  </div>\n</sl-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": "html",
+      "source": "<sl-dialog fullScreen=\"always\" [(open)]=\"open\">…</sl-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": "html",
+      "source": "<sl-dialog [modal]=\"false\" [(open)]=\"open\">…</sl-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": "html",
+      "source": "<sl-dialog [(open)]=\"open\" (openChangeRequest)=\"refuseWhileSaving($event)\">…</sl-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": "html",
+      "source": "<sl-dialog [initialFocus]=\"email\" [(open)]=\"open\">\n  <div slDialogBody>\n    <input #email slTextField aria-label=\"Email\" />\n  </div>\n</sl-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": "ts",
+      "source": "import { Component, effect, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlSkeleton, SlSkeletonRegion } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-loading',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlSkeleton,\n    SlSkeletonRegion,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n      View invoice INV-2041\n    </button>\n    <sl-dialog #dialog=\"slDialog\" [loading]=\"invoice() === null\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Invoice INV-2041</h2>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div\n          slSkeletonRegion\n          [delay]=\"200\"\n          [loading]=\"invoice() === null\"\n          [messages]=\"{ label: 'Loading invoice' }\"\n        >\n          <div slDescriptionList>\n            @for (field of fields; track field.key) {\n              <div slDescriptionListItem>\n                <dt slDescriptionListTerm>{{ field.term }}</dt>\n                <dd slDescriptionListDescription>\n                  @if (invoice(); as loaded) {\n                    {{ loaded[field.key] }}\n                  } @else {\n                    <span slSkeleton [inlineSize]=\"field.width\"></span>\n                  }\n                </dd>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </sl-dialog>\n  `,\n})\nexport class DialogLoading {\n  readonly fields = FIELDS;\n  readonly open = signal(false);\n  readonly invoice = signal<Invoice | null>(null);\n\n  constructor() {\n    effect((onCleanup) => {\n      if (!this.open()) return;\n      this.invoice.set(null);\n      const timer = setTimeout(\n        () =>\n          this.invoice.set({\n            customer: 'Northwind Traders',\n            issued: '12 August 2026',\n            due: '11 September 2026',\n            amount: '$1,240.00',\n          }),\n        1200,\n      );\n      onCleanup(() => clearTimeout(timer));\n    });\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": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-nested',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldLabel,\n    SlSelect,\n    SlSelectItem,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"order\">\n      Open order SO-1182\n    </button>\n    <sl-dialog #order=\"slDialog\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Order SO-1182</h2>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slDescriptionList>\n          <div slDescriptionListItem>\n            <dt slDescriptionListTerm>Customer</dt>\n            <dd slDescriptionListDescription>Contoso Foods</dd>\n          </div>\n          <div slDescriptionListItem>\n            <dt slDescriptionListTerm>Carrier</dt>\n            <dd slDescriptionListDescription>{{ carrierLabel() }}</dd>\n          </div>\n        </div>\n      </div>\n      <footer slDialogFooter>\n        <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"change\">\n          Change carrier\n        </button>\n        <sl-dialog #change=\"slDialog\" size=\"sm\" [open]=\"changing()\" (openChange)=\"toggle($event)\">\n          <header slDialogHeader>\n            <h2 slDialogTitle>Change carrier</h2>\n            <button slDialogClose></button>\n          </header>\n          <div slDialogBody>\n            <div slField>\n              <label slFieldLabel>Carrier</label>\n              <sl-select [items]=\"carriers\" [(value)]=\"draft\">\n                @for (option of carriers; track option.value) {\n                  <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n                }\n              </sl-select>\n            </div>\n          </div>\n          <footer slDialogFooter>\n            <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"changing.set(false)\">\n              Cancel\n            </button>\n            <button slButton (click)=\"use()\">Use carrier</button>\n          </footer>\n        </sl-dialog>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogNested {\n  readonly carriers = CARRIERS;\n  readonly carrier = signal<SelectSelection>('ups');\n  readonly draft = signal<SelectSelection>('ups');\n  readonly changing = signal(false);\n  readonly carrierLabel = computed(\n    () => CARRIERS.find((option) => option.value === this.carrier())?.label,\n  );\n\n  toggle(next: boolean): void {\n    if (next) this.draft.set(this.carrier());\n    this.changing.set(next);\n  }\n\n  use(): void {\n    this.carrier.set(this.draft());\n    this.changing.set(false);\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": "html",
+      "source": "<h2 slDialogTitle>deployment-pipeline-eu-west-1-production-rollback-2026-09-04T01</h2>\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": "html",
+      "source": "<button slButton variant=\"outline\" [slDialogTrigger]=\"d\">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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  provideDialogDefaults,\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-defaults',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlText,\n  ],\n  providers: [provideDialogDefaults({ placement: 'top', size: 'lg' })],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"order\">\n        Purchase order PO-7730\n      </button>\n      <sl-dialog #order=\"slDialog\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Purchase order PO-7730</h2>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <span slText size=\"sm\">Large and at the top, from the provider.</span>\n        </div>\n      </sl-dialog>\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"rename\">\n        Rename supplier\n      </button>\n      <sl-dialog #rename=\"slDialog\" size=\"sm\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Rename supplier</h2>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <span slText size=\"sm\">At the top from the provider, and small because it says so.</span>\n        </div>\n      </sl-dialog>\n    </div>\n  `,\n})\nexport class DialogDefaults {}\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": "html",
+      "source": "<sl-dialog [(open)]=\"open\" (openChangeRequest)=\"report($event.reason, $event.result)\">\n  …\n</sl-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": "html",
+      "source": "<button slButton tone=\"danger\" variant=\"outline\" [slDialogTrigger]=\"d\">Delete project</button>\n<sl-alert-dialog #d=\"slAlertDialog\" [(open)]=\"open\">\n  <header slDialogHeader>\n    <span slAlertDialogIcon></span>\n    <h2 slDialogTitle>Delete this project?</h2>\n    <p slDialogDescription>\n      The project and its 42 documents leave for everyone. This cannot be undone.\n    </p>\n  </header>\n  <footer slDialogFooter>\n    <button slButton variant=\"outline\" tone=\"secondary\" slAlertDialogCancel>Keep project</button>\n    <button slButton tone=\"danger\" slAlertDialogAction>Delete project</button>\n  </footer>\n</sl-alert-dialog>\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": "html",
+      "source": "<sl-alert-dialog tone=\"warning\" [(open)]=\"open\">…</sl-alert-dialog>\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": "html",
+      "source": "<footer slDialogFooter>\n  <button slButton slAlertDialogCancel>Keep project</button>\n  <button slButton slAlertDialogAction value=\"deleted\">Delete project</button>\n</footer>\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": "html",
+      "source": "<sl-alert-dialog escape=\"none\" [(open)]=\"open\">…</sl-alert-dialog>\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": "html",
+      "source": "<sl-alert-dialog initialFocus=\"cancel\" [(open)]=\"open\">…</sl-alert-dialog>\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": "html",
+      "source": "<header slDialogHeader>\n  <span slAlertDialogIcon></span>\n  <h2 slDialogTitle>Delete 3 documents?</h2>\n  <p slDialogDescription>This cannot be undone.</p>\n</header>\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": "html",
+      "source": "<button slButton tone=\"danger\" slAlertDialogAction>Delete project</button>\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": "html",
+      "source": "<p slDialogDescription>The project and its 42 documents leave for everyone.</p>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "alert-tones",
+      "title": "alert-tones.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlAlertDialog,\n  SlAlertDialogAction,\n  SlAlertDialogCancel,\n  SlAlertDialogIcon,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n  type DialogTone,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-alert-tones',\n  imports: [\n    SlAlertDialog,\n    SlAlertDialogAction,\n    SlAlertDialogCancel,\n    SlAlertDialogIcon,\n    SlButton,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n  ],\n  template: `\n    <div slInline [gap]=\"2\">\n      @for (confirmation of confirmations; track confirmation.tone) {\n        <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n          {{ confirmation.trigger }}\n        </button>\n        <sl-alert-dialog #dialog=\"slAlertDialog\" [tone]=\"confirmation.tone\">\n          <header slDialogHeader>\n            <span slAlertDialogIcon></span>\n            <h2 slDialogTitle>{{ confirmation.title }}</h2>\n            <p slDialogDescription>{{ confirmation.description }}</p>\n          </header>\n          <footer slDialogFooter>\n            <button slButton slAlertDialogCancel tone=\"secondary\" variant=\"outline\">Not now</button>\n            <button slButton slAlertDialogAction [tone]=\"confirmation.tone\">\n              {{ confirmation.action }}\n            </button>\n          </footer>\n        </sl-alert-dialog>\n      }\n    </div>\n  `,\n})\nexport class DialogAlertTones {\n  readonly confirmations = CONFIRMATIONS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "async-submit",
+      "title": "async-submit.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n  type DialogChangeRequest,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-async-submit',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n        Refund order SO-1182\n      </button>\n      <sl-dialog #dialog=\"slDialog\" [(open)]=\"open\" (openChangeRequest)=\"guard($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Refund $1,240.00</h2>\n          <p slDialogDescription>To the card ending 4242, for order SO-1182.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <span slText size=\"sm\">\n            The payment provider takes a moment to confirm. The dialog stays open until it does.\n          </span>\n        </div>\n        <footer slDialogFooter>\n          <button\n            slButton\n            variant=\"ghost\"\n            tone=\"secondary\"\n            [disabled]=\"saving()\"\n            (click)=\"open.set(false)\"\n          >\n            Cancel\n          </button>\n          <button\n            slButton\n            [loading]=\"saving()\"\n            [messages]=\"{ loading: 'Issuing refund' }\"\n            (click)=\"refund()\"\n          >\n            Issue refund\n          </button>\n        </footer>\n      </sl-dialog>\n      @if (sent()) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">Refund issued.</span>\n      }\n    </div>\n  `,\n})\nexport class DialogAsyncSubmit {\n  readonly open = signal(false);\n  readonly saving = signal(false);\n  readonly sent = signal(false);\n\n  guard(request: DialogChangeRequest): void {\n    if (!request.value && this.saving()) request.cancel();\n    if (request.value) this.sent.set(false);\n  }\n\n  refund(): void {\n    this.saving.set(true);\n    setTimeout(() => {\n      this.saving.set(false);\n      this.sent.set(true);\n      this.open.set(false);\n    }, 1500);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-basic',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldLabel,\n    SlInline,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <span slText size=\"sm\">{{ email() }}</span>\n      <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n        Edit billing email\n      </button>\n      <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Billing email</h2>\n          <p slDialogDescription>\n            Invoices and payment receipts for Northwind Traders go to this address.\n          </p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <div slField>\n            <label slFieldLabel>Email</label>\n            <div slTextField>\n              <input\n                slTextFieldInput\n                type=\"email\"\n                [value]=\"draft()\"\n                (valueChange)=\"draft.set($event.value)\"\n              />\n            </div>\n          </div>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton (click)=\"save()\">Save</button>\n        </footer>\n      </sl-dialog>\n    </div>\n  `,\n})\nexport class DialogBasic {\n  readonly open = signal(false);\n  readonly email = signal('ap@northwindtraders.com');\n  readonly draft = signal(this.email());\n\n  toggle(next: boolean): void {\n    if (next) this.draft.set(this.email());\n    this.open.set(next);\n  }\n\n  save(): void {\n    this.email.set(this.draft());\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bulk-edit",
+      "title": "bulk-edit.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSelect,\n  SlTableSelectAll,\n} from '@slotted/angular/table';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-bulk-edit',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldLabel,\n    SlInline,\n    SlSelect,\n    SlSelectItem,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSelect,\n    SlTableSelectAll,\n    SlText,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slInline align=\"center\" [gap]=\"3\">\n        <span slText size=\"sm\" tone=\"muted\">\n          {{ count() === 0 ? 'Select orders to edit them together.' : count() + ' selected' }}\n        </span>\n        <button\n          slButton\n          focusableWhenDisabled\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n          [disabled]=\"count() === 0\"\n          [slDialogTrigger]=\"dialog\"\n        >\n          Edit selected\n        </button>\n        <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n          <header slDialogHeader>\n            <h2 slDialogTitle>Edit {{ editing().length }} {{ noun() }}</h2>\n            <p slDialogDescription>{{ editing().join(', ') }}</p>\n            <button slDialogClose></button>\n          </header>\n          <div slDialogBody>\n            <div slStack [gap]=\"4\">\n              <div slField>\n                <label slFieldLabel>Status</label>\n                <sl-select [items]=\"statuses\" [(value)]=\"status\">\n                  @for (option of statuses; track option.value) {\n                    <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n                  }\n                </sl-select>\n              </div>\n              <div slField>\n                <label slFieldLabel>Ships from</label>\n                <sl-select [items]=\"warehouses\" [(value)]=\"warehouse\">\n                  @for (option of warehouses; track option.value) {\n                    <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n                  }\n                </sl-select>\n              </div>\n            </div>\n          </div>\n          <footer slDialogFooter>\n            <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n              Cancel\n            </button>\n            <button slButton (click)=\"apply()\">Update {{ editing().length }} {{ noun() }}</button>\n          </footer>\n        </sl-dialog>\n      </div>\n      <div slTable selectionMode=\"multiple\" [columns]=\"5\" [(value)]=\"chosen\">\n        <div slTableContent>\n          <thead slTableHead>\n            <tr slTableRow>\n              <th slTableSelectAll></th>\n              <th slTableColumnHeader>Order</th>\n              <th slTableColumnHeader>Customer</th>\n              <th slTableColumnHeader>Status</th>\n              <th slTableColumnHeader>Ships from</th>\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (row of orders(); track row.id) {\n              <tr slTableRow [value]=\"row.id\">\n                <td slTableSelect></td>\n                <th slTableRowHeader>{{ row.id }}</th>\n                <td slTableCell>{{ row.customer }}</td>\n                <td slTableCell>\n                  <span slBadge [tone]=\"statusOf(row.status).tone\">\n                    {{ statusOf(row.status).label }}\n                  </span>\n                </td>\n                <td slTableCell>{{ warehouseOf(row.warehouse) }}</td>\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DialogBulkEdit {\n  readonly statuses = STATUSES;\n  readonly warehouses = WAREHOUSES;\n  readonly orders = signal(INITIAL);\n  readonly chosen = signal<readonly string[]>([]);\n  readonly editing = signal<readonly string[]>([]);\n  readonly open = signal(false);\n  readonly status = signal<SelectSelection>('ready');\n  readonly warehouse = signal<SelectSelection>('RNO');\n  readonly count = computed(() => this.chosen().length);\n  readonly noun = computed(() => (this.editing().length === 1 ? 'order' : 'orders'));\n\n  statusOf(value: Status) {\n    return STATUSES.find((status) => status.value === value)!;\n  }\n\n  warehouseOf(value: string) {\n    return WAREHOUSES.find((option) => option.value === value)?.label;\n  }\n\n  toggle(next: boolean): void {\n    if (next) this.editing.set(this.chosen());\n    this.open.set(next);\n  }\n\n  apply(): void {\n    const editing = this.editing();\n    const status = this.status() as Status;\n    const warehouse = this.warehouse() as string;\n    this.orders.update((rows) =>\n      rows.map((row) => (editing.includes(row.id) ? { ...row, status, warehouse } : row)),\n    );\n    this.chosen.set([]);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "cancel-order",
+      "title": "cancel-order.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlAlertDialog,\n  SlAlertDialogAction,\n  SlAlertDialogCancel,\n  SlAlertDialogIcon,\n  SlDialogBody,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-cancel-order',\n  imports: [\n    SlAlertDialog,\n    SlAlertDialogAction,\n    SlAlertDialogCancel,\n    SlAlertDialogIcon,\n    SlBadge,\n    SlButton,\n    SlDialogBody,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldLabel,\n    SlInline,\n    SlSelect,\n    SlSelectItem,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <span slText weight=\"medium\">Order SO-1182</span>\n      <span slBadge [tone]=\"cancelled() ? 'danger' : 'accent'\">\n        {{ cancelled() ? 'Cancelled' : 'Processing' }}\n      </span>\n      <button\n        slButton\n        focusableWhenDisabled\n        size=\"sm\"\n        tone=\"danger\"\n        variant=\"outline\"\n        [disabled]=\"cancelled()\"\n        [slDialogTrigger]=\"dialog\"\n      >\n        Cancel order\n      </button>\n      <sl-alert-dialog #dialog=\"slAlertDialog\" (openChange)=\"$event && reason.set(null)\">\n        <header slDialogHeader>\n          <span slAlertDialogIcon></span>\n          <h2 slDialogTitle>Cancel order SO-1182?</h2>\n          <p slDialogDescription>\n            Contoso Foods is refunded $1,240.00 and the 6 items go back to stock. The order cannot\n            be reopened.\n          </p>\n        </header>\n        <div slDialogBody>\n          <div slField required>\n            <label slFieldLabel>Reason</label>\n            <sl-select placeholder=\"Choose a reason\" [items]=\"reasons\" [(value)]=\"reason\">\n              @for (option of reasons; track option.value) {\n                <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n              }\n            </sl-select>\n          </div>\n        </div>\n        <footer slDialogFooter>\n          <button slButton slAlertDialogCancel tone=\"secondary\" variant=\"outline\">\n            Keep order\n          </button>\n          <button\n            slButton\n            slAlertDialogAction\n            tone=\"danger\"\n            [disabled]=\"reason() === null\"\n            (click)=\"cancelled.set(true)\"\n          >\n            Cancel order\n          </button>\n        </footer>\n      </sl-alert-dialog>\n    </div>\n  `,\n})\nexport class DialogCancelOrder {\n  readonly reasons = REASONS;\n  readonly cancelled = signal(false);\n  readonly reason = signal<SelectSelection>(null);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "create-shipment",
+      "title": "create-shipment.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlCheckbox } from '@slotted/angular/checkbox';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n  type DialogChangeRequest,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-create-shipment',\n  imports: [\n    SlButton,\n    SlCheckbox,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldDescription,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlSelect,\n    SlSelectItem,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton [slDialogTrigger]=\"dialog\">Create shipment</button>\n      <sl-dialog #dialog=\"slDialog\" size=\"lg\" [(open)]=\"open\" (openChangeRequest)=\"guard($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Create a shipment</h2>\n          <p slDialogDescription>\n            Order SO-1182 for Contoso Foods: 6 items to 1200 Pike St, Seattle.\n          </p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <form id=\"create-shipment\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"5\">\n              <div slField>\n                <label slFieldLabel>Carrier</label>\n                <sl-select name=\"carrier\" [items]=\"carriers\" [(value)]=\"carrier\">\n                  @for (option of carriers; track option.value) {\n                    <sl-select-item [value]=\"option.value\" [description]=\"option.description\">\n                      {{ option.label }}\n                    </sl-select-item>\n                  }\n                </sl-select>\n              </div>\n              <div slField required [invalid]=\"error() !== '' ? true : undefined\">\n                <label slFieldLabel>Weight in kilograms</label>\n                <span slFieldDescription>All packages together, as weighed at the dock.</span>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    inputmode=\"decimal\"\n                    name=\"weight\"\n                    [value]=\"weight()\"\n                    (valueChange)=\"weight.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ error() }}</span>\n              </div>\n              <div slCheckbox defaultChecked name=\"notify\">\n                Email the tracking number to the customer\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDialogFooter>\n          <button\n            slButton\n            variant=\"ghost\"\n            tone=\"secondary\"\n            [disabled]=\"saving()\"\n            (click)=\"open.set(false)\"\n          >\n            Cancel\n          </button>\n          <button\n            slButton\n            form=\"create-shipment\"\n            type=\"submit\"\n            [loading]=\"saving()\"\n            [messages]=\"{ loading: 'Creating shipment' }\"\n          >\n            Create shipment\n          </button>\n        </footer>\n      </sl-dialog>\n      @if (created(); as message) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogCreateShipment {\n  readonly carriers = CARRIERS;\n  readonly open = signal(false);\n  readonly carrier = signal<SelectSelection>('ups');\n  readonly weight = signal('');\n  readonly submitted = signal(false);\n  readonly saving = signal(false);\n  readonly created = signal<string | null>(null);\n  readonly error = computed(() => (this.submitted() ? weightError(this.weight()) : ''));\n\n  guard(request: DialogChangeRequest): void {\n    if (!request.value && this.saving()) {\n      request.cancel();\n      return;\n    }\n    if (request.value) {\n      this.weight.set('');\n      this.submitted.set(false);\n    }\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    if (weightError(this.weight()) !== '') return;\n    this.saving.set(true);\n    setTimeout(() => {\n      const label = CARRIERS.find((option) => option.value === this.carrier())?.label;\n      this.saving.set(false);\n      this.created.set(`Shipment SH-4472 created with ${label}.`);\n      this.open.set(false);\n    }, 1200);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "destructive",
+      "title": "destructive.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlAlertDialog,\n  SlAlertDialogAction,\n  SlAlertDialogCancel,\n  SlAlertDialogIcon,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-destructive',\n  imports: [\n    SlAlertDialog,\n    SlAlertDialogAction,\n    SlAlertDialogCancel,\n    SlAlertDialogIcon,\n    SlButton,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton tone=\"danger\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n        Delete price list\n      </button>\n      <sl-alert-dialog #dialog=\"slAlertDialog\">\n        <header slDialogHeader>\n          <span slAlertDialogIcon></span>\n          <h2 slDialogTitle>Delete the 2026 wholesale price list?</h2>\n          <p slDialogDescription>\n            The 412 prices in it are removed, and 9 customers on this list move to retail prices.\n            This cannot be undone.\n          </p>\n        </header>\n        <footer slDialogFooter>\n          <button slButton slAlertDialogCancel tone=\"secondary\" variant=\"outline\">\n            Keep price list\n          </button>\n          <button slButton slAlertDialogAction tone=\"danger\" (click)=\"deleted.set(true)\">\n            Delete price list\n          </button>\n        </footer>\n      </sl-alert-dialog>\n      @if (deleted()) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">\n          The 2026 wholesale price list was deleted.\n        </span>\n      }\n    </div>\n  `,\n})\nexport class DialogDestructive {\n  readonly deleted = signal(false);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dismiss",
+      "title": "dismiss.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-dismiss',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlText,\n  ],\n  template: `\n    <button slButton [slDialogTrigger]=\"dialog\">Import products</button>\n    <sl-dialog #dialog=\"slDialog\" escape=\"none\" outsidePress=\"none\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Import 1,240 products</h2>\n        <p slDialogDescription>From spring-catalogue.csv into the Northwind price list.</p>\n      </header>\n      <div slDialogBody>\n        <span slText 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        </span>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n          Cancel import\n        </button>\n        <button slButton (click)=\"open.set(false)\">Start import</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogDismiss {\n  readonly open = signal(false);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-form',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton [slDialogTrigger]=\"dialog\">Add contact</button>\n      <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>New contact</h2>\n          <p slDialogDescription>Contoso Foods, Seattle.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <form id=\"new-contact\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"4\">\n              <div slField required [invalid]=\"errors()?.name ? true : undefined\">\n                <label slFieldLabel>Full name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"name\"\n                    [value]=\"name()\"\n                    (valueChange)=\"name.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.name }}</span>\n              </div>\n              <div slField required [invalid]=\"errors()?.email ? true : undefined\">\n                <label slFieldLabel>Email</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"email\"\n                    type=\"email\"\n                    [value]=\"email()\"\n                    (valueChange)=\"email.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.email }}</span>\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton type=\"submit\" form=\"new-contact\">Add contact</button>\n        </footer>\n      </sl-dialog>\n      @if (added(); as message) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogForm {\n  readonly open = signal(false);\n  readonly name = signal('');\n  readonly email = signal('');\n  readonly submitted = signal(false);\n  readonly added = signal<string | null>(null);\n  readonly errors = computed(() =>\n    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,\n  );\n\n  toggle(next: boolean): void {\n    if (next) {\n      this.name.set('');\n      this.email.set('');\n      this.submitted.set(false);\n    }\n    this.open.set(next);\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;\n    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "full-screen",
+      "title": "full-screen.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-full-screen',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n      Open route plan\n    </button>\n    <sl-dialog #dialog=\"slDialog\" fullscreenToggle size=\"lg\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Route 14, Tuesday 6 October</h2>\n        <p slDialogDescription>5 stops, 38 km, driver Ana Souza.</p>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slStack [gap]=\"3\">\n          @for (stop of stops; track stop.time) {\n            <div slInline [gap]=\"4\">\n              <span slText size=\"sm\" tone=\"muted\">{{ stop.time }}</span>\n              <span slText size=\"sm\">{{ stop.place }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    </sl-dialog>\n  `,\n})\nexport class DialogFullScreen {\n  readonly stops = STOPS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "initial-focus",
+      "title": "initial-focus.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-initial-focus',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n      Find a customer\n    </button>\n    <sl-dialog #dialog=\"slDialog\" [initialFocus]=\"search\" (openChange)=\"$event && query.set('')\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Find a customer</h2>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slStack [gap]=\"4\">\n          <div slTextField>\n            <input\n              #search\n              slTextFieldInput\n              aria-label=\"Customer name\"\n              placeholder=\"Search by name\"\n              type=\"search\"\n              [value]=\"query()\"\n              (valueChange)=\"query.set($event.value)\"\n            />\n          </div>\n          <div slStack [gap]=\"2\">\n            @for (name of matches(); track name) {\n              <span slText size=\"sm\">{{ name }}</span>\n            }\n          </div>\n        </div>\n      </div>\n    </sl-dialog>\n  `,\n})\nexport class DialogInitialFocus {\n  readonly query = signal('');\n  readonly matches = computed(() =>\n    CUSTOMERS.filter((name) => name.toLowerCase().includes(this.query().toLowerCase())),\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "menu-action",
+      "title": "menu-action.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, ElementRef, signal, viewChild } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\n\n@Component({\n  selector: 'app-dialog-menu-action',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlField,\n    SlFieldLabel,\n    SlMenu,\n    SlMenuItem,\n    SlMenuSeparator,\n    SlMenuTrigger,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <button #actions slButton tone=\"secondary\" variant=\"outline\" [slMenuTriggerFor]=\"menu\">\n      Customer actions\n    </button>\n    <sl-menu #menu>\n      <button slMenuItem (select)=\"open.set(true)\">Change credit limit…</button>\n      <button slMenuItem>Export statement</button>\n      <hr slMenuSeparator />\n      <button slMenuItem tone=\"danger\">Suspend account…</button>\n    </sl-menu>\n    <sl-dialog size=\"sm\" [finalFocus]=\"trigger()?.nativeElement\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Credit limit</h2>\n        <p slDialogDescription>Contoso Foods has $18,420.00 outstanding on open invoices.</p>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slField>\n          <label slFieldLabel>Limit in US dollars</label>\n          <div slTextField>\n            <input slTextFieldInput inputmode=\"decimal\" value=\"25000\" />\n          </div>\n        </div>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">Cancel</button>\n        <button slButton (click)=\"open.set(false)\">Save limit</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogMenuAction {\n  readonly open = signal(false);\n  readonly trigger = viewChild('actions', { read: ElementRef });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "non-modal",
+      "title": "non-modal.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-non-modal',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n      Show packing steps\n    </button>\n    <sl-dialog #dialog=\"slDialog\" outsidePress=\"none\" placement=\"top\" size=\"sm\" [modal]=\"false\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Packing steps</h2>\n        <p slDialogDescription>Order SO-1182. The page stays usable behind this panel.</p>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slStack [gap]=\"2\">\n          @for (step of steps; track step; let index = $index) {\n            <span slText size=\"sm\">{{ index + 1 }}. {{ step }}</span>\n          }\n        </div>\n      </div>\n    </sl-dialog>\n  `,\n})\nexport class DialogNonModal {\n  readonly steps = STEPS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "parts",
+      "title": "parts.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-parts',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n      View shipment\n    </button>\n    <sl-dialog #dialog=\"slDialog\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Shipment SH-4471</h2>\n        <p slDialogDescription>Order SO-1182 for Contoso Foods, Seattle.</p>\n        <span slBadge tone=\"accent\">In transit</span>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slDescriptionList>\n          @for (detail of details; track detail.term) {\n            <div slDescriptionListItem>\n              <dt slDescriptionListTerm>{{ detail.term }}</dt>\n              <dd slDescriptionListDescription>{{ detail.value }}</dd>\n            </div>\n          }\n        </div>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">Close</button>\n        <button slButton>Print label</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogParts {\n  readonly open = signal(false);\n  readonly details = DETAILS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "result",
+      "title": "result.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-result',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n        Ship order SO-1182\n      </button>\n      <sl-dialog #dialog=\"slDialog\" (closed)=\"record($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Two items are out of stock</h2>\n          <p slDialogDescription>Aniseed syrup and dried pears are back in stock on 14 October.</p>\n          <button slDialogClose></button>\n        </header>\n        <footer slDialogFooter>\n          <button slButton variant=\"outline\" tone=\"secondary\" (click)=\"dialog.close('wait')\">\n            Wait for all items\n          </button>\n          <button slButton (click)=\"dialog.close('partial')\">Ship 4 items now</button>\n        </footer>\n      </sl-dialog>\n      @if (outcome(); as message) {\n        <span slText size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogResult {\n  readonly outcome = signal<string | null>(null);\n\n  record(result: string | undefined): void {\n    this.outcome.set((result && OUTCOMES[result]) ?? 'Closed without a choice.');\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "row-action",
+      "title": "row-action.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlVisuallyHidden } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-row-action',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlField,\n    SlFieldLabel,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTextField,\n    SlTextFieldInput,\n    SlVisuallyHidden,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent>\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Total</th>\n            <th slTableColumnHeader><span slVisuallyHidden>Actions</span></th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (row of orders; track row.id) {\n            <tr slTableRow [value]=\"row.id\">\n              <th slTableRowHeader>{{ row.id }}</th>\n              <td slTableCell>{{ row.customer }}</td>\n              <td slTableCell numeric>{{ row.total }}</td>\n              <td slTableCell>\n                <button\n                  slButton\n                  size=\"sm\"\n                  tone=\"secondary\"\n                  variant=\"ghost\"\n                  [attr.aria-label]=\"'Refund ' + row.id\"\n                  (click)=\"refund(row)\"\n                >\n                  Refund\n                </button>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n    <sl-dialog size=\"sm\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Refund {{ order().id }}</h2>\n        <p slDialogDescription>\n          {{ order().customer }} paid {{ order().total }} with the card ending {{ order().card }}.\n        </p>\n        <button slDialogClose></button>\n      </header>\n      <div slDialogBody>\n        <div slField>\n          <label slFieldLabel>Amount in US dollars</label>\n          <div slTextField>\n            <input slTextFieldInput inputmode=\"decimal\" [value]=\"order().amount\" />\n          </div>\n        </div>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">Cancel</button>\n        <button slButton (click)=\"open.set(false)\">Issue refund</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogRowAction {\n  readonly orders = ORDERS;\n  readonly open = signal(false);\n  readonly order = signal<Order>(ORDERS[0]!);\n\n  refund(row: Order): void {\n    this.order.set(row);\n    this.open.set(true);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "unsaved-changes",
+      "title": "unsaved-changes.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlAlertDialog,\n  SlAlertDialogAction,\n  SlAlertDialogCancel,\n  SlAlertDialogIcon,\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n  type DialogChangeRequest,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-unsaved-changes',\n  imports: [\n    SlAlertDialog,\n    SlAlertDialogAction,\n    SlAlertDialogCancel,\n    SlAlertDialogIcon,\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldLabel,\n    SlInline,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDialogTrigger]=\"dialog\">\n        Change delivery address\n      </button>\n      <sl-dialog #dialog=\"slDialog\" [(open)]=\"open\" (openChangeRequest)=\"guard($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>Delivery address</h2>\n          <p slDialogDescription>Applies to order SO-1182 and to later orders.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <div slField>\n            <label slFieldLabel>Address</label>\n            <div slTextField>\n              <input slTextFieldInput [value]=\"draft()\" (valueChange)=\"draft.set($event.value)\" />\n            </div>\n          </div>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"leave()\">Cancel</button>\n          <button slButton (click)=\"save()\">Save address</button>\n        </footer>\n        <sl-alert-dialog tone=\"warning\" [(open)]=\"confirming\">\n          <header slDialogHeader>\n            <span slAlertDialogIcon></span>\n            <h2 slDialogTitle>Discard the new address?</h2>\n            <p slDialogDescription>\n              The address you typed is not saved. The order keeps the previous one.\n            </p>\n          </header>\n          <footer slDialogFooter>\n            <button slButton slAlertDialogCancel tone=\"secondary\" variant=\"outline\">\n              Keep editing\n            </button>\n            <button slButton slAlertDialogAction tone=\"warning\" (click)=\"open.set(false)\">\n              Discard changes\n            </button>\n          </footer>\n        </sl-alert-dialog>\n      </sl-dialog>\n      <span slText size=\"sm\" tone=\"muted\">{{ address() }}</span>\n    </div>\n  `,\n})\nexport class DialogUnsavedChanges {\n  readonly open = signal(false);\n  readonly confirming = signal(false);\n  readonly address = signal('Pier 70, Suite 300, Seattle, WA 98121');\n  readonly draft = signal(this.address());\n  readonly dirty = computed(() => this.draft() !== this.address());\n\n  guard(request: DialogChangeRequest): void {\n    if (request.value) {\n      this.draft.set(this.address());\n    } else if (this.dirty()) {\n      request.cancel();\n      this.confirming.set(true);\n    }\n  }\n\n  leave(): void {\n    if (this.dirty()) this.confirming.set(true);\n    else this.open.set(false);\n  }\n\n  save(): void {\n    this.address.set(this.draft());\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}