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

package/docs/drawer.json

@@ -0,0 +1,753 @@
+{
+  "family": "drawer",
+  "ui": "drawer",
+  "binding": "angular",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Panel that slides in from an edge."
+  },
+  "axes": {
+    "mode": [
+      "overlay",
+      "inline"
+    ],
+    "side": [
+      "start",
+      "end",
+      "top",
+      "bottom"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full",
+      "content"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "modal": [
+      true,
+      false
+    ],
+    "escape": [
+      "close",
+      "none"
+    ],
+    "outsidePress": [
+      "close",
+      "none"
+    ],
+    "back": [
+      "close",
+      "none"
+    ],
+    "drag": [
+      "panel",
+      "resizer"
+    ]
+  },
+  "members": {
+    "drawer": {
+      "nativeElement": "div",
+      "role": "dialog",
+      "defaults": {
+        "mode": "overlay",
+        "side": "end",
+        "size": "md",
+        "mount": "active",
+        "modal": true,
+        "escape": "close",
+        "outsidePress": "close",
+        "back": "close",
+        "drag": "panel",
+        "minExtent": 0.2,
+        "maxExtent": 1,
+        "loading": false,
+        "scrimFrom": 0
+      },
+      "fixed": {
+        "modalUnderInline": false
+      },
+      "capabilities": [
+        "open",
+        "extent",
+        "size",
+        "placement",
+        "appearance",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "loading",
+        "dragging"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "backdrop",
+        "panel",
+        "resizer",
+        "line",
+        "grip",
+        "header",
+        "title",
+        "description",
+        "body",
+        "footer",
+        "close"
+      ]
+    }
+  },
+  "docs": {
+    "drawer": {
+      "imports": {
+        "source": "import { SlDrawer, SlDrawerBody, SlDrawerClose, SlDrawerDescription, SlDrawerFooter, SlDrawerHeader, SlDrawerResizer, SlDrawerTitle, SlDrawerTrigger, provideDrawerDefaults } from '@slotted/angular/drawer';",
+        "selector": "<sl-drawer>, exportAs slDrawer"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div inside <sl-drawer>, moved into a portal under mode=\"overlay\"",
+          "required": true,
+          "purpose": "The layer. Under mode=\"overlay\" it is fixed to the viewport and stacked above the page; under mode=\"inline\" it is a box in your own layout, and its own width or height is what opens and closes. It carries data-ui=\"drawer\", every axis as a data attribute, and data-open, data-loading and data-dragging. The <sl-drawer> host renders display: contents where you wrote it, and the layer keeps the theme, density and direction of that place."
+        },
+        {
+          "part": "trigger",
+          "element": "your own element, with slDrawerTrigger on it",
+          "required": false,
+          "purpose": "The control that opens and closes the drawer, rendered where it is written. It carries aria-expanded and aria-controls in both modes, and aria-haspopup=\"dialog\" only under mode=\"overlay\", because an inline drawer is a disclosure. A press on it is never read as a press outside the drawer."
+        },
+        {
+          "part": "backdrop",
+          "element": "div",
+          "required": false,
+          "purpose": "The scrim behind the panel, painted from --slotted-drawer-scrim under mode=\"overlay\" whether the drawer is modal or not, and not painted while the measure is below scrimFrom. It takes a press like the page would, so a press on it is a press outside the drawer. Set --slotted-drawer-scrim: transparent to paint none."
+        },
+        {
+          "part": "panel",
+          "element": "div, holding the projected content",
+          "required": true,
+          "purpose": "The surface, aligned to side. Under mode=\"overlay\" it carries role=\"dialog\", and aria-modal=\"true\" while modal; under mode=\"inline\" it has no role, so put a landmark such as <nav slDrawerBody> inside it. Its rows are the header, the body and the footer, and only the body scrolls. An aria-label written on <sl-drawer> is moved to it."
+        },
+        {
+          "part": "resizer",
+          "element": "your own element, with slDrawerResizer on it",
+          "required": false,
+          "purpose": "The separator the reader drags, or focuses and moves with the keyboard, to resize the panel. Rendering it is what makes the drawer resizable. It carries role=\"separator\", tabindex=\"0\", aria-orientation, aria-valuenow, aria-valuemin and aria-valuemax as percentages, aria-controls naming the panel and aria-labelledby naming the title. On start and end it sits on the panel’s inner edge; on top and bottom it is the grip above the header."
+        },
+        {
+          "part": "line",
+          "element": "span",
+          "required": true,
+          "purpose": "A hairline on each side of the grip on start and end, which runs the whole edge under the pointer, under focus and during a drag. It is not drawn on top and bottom."
+        },
+        {
+          "part": "grip",
+          "element": "span[aria-hidden]",
+          "required": true,
+          "purpose": "The mark the pointer aims at: a dot grid on start and end, and a pill above the header on top and bottom. It is hidden from assistive technology, because the separator around it is already named and valued."
+        },
+        {
+          "part": "header",
+          "element": "your own element, with slDrawerHeader on it",
+          "required": false,
+          "purpose": "Lays out the title and the description in one column and the close button in another, so a title that wraps grows the row instead of moving the button."
+        },
+        {
+          "part": "title",
+          "element": "your own heading, with slDrawerTitle on it",
+          "required": false,
+          "purpose": "The visible name of the drawer. The panel and the separator point at it with aria-labelledby, and only while it is rendered."
+        },
+        {
+          "part": "description",
+          "element": "your own element, with slDrawerDescription on it",
+          "required": false,
+          "purpose": "The sentence under the title. The panel points at it with aria-describedby while it is rendered."
+        },
+        {
+          "part": "body",
+          "element": "your own element, with slDrawerBody on it",
+          "required": false,
+          "purpose": "The row that scrolls, and the row that carries aria-busy while loading is set. A wheel that reaches its end does not scroll the page behind. inset=\"none\" removes its padding, for content that brings its own, such as a list that runs to the panel’s edges."
+        },
+        {
+          "part": "footer",
+          "element": "your own element, with slDrawerFooter on it",
+          "required": false,
+          "purpose": "The actions, in a wrapping row aligned to the end, on a sunken surface with a rule above it."
+        },
+        {
+          "part": "close",
+          "element": "your own button, with slDrawerClose on it",
+          "required": false,
+          "purpose": "The ✕ button. Its target is at least --slotted-target-min in both directions. It closes the drawer with the reason dismiss, and its value is the result of that close."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "<sl-drawer>",
+          "description": "Whether the drawer is open. A model, so [(open)] binds both halves and there is no defaultOpen."
+        },
+        {
+          "name": "extent",
+          "type": "model<number | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "The panel’s measure: a fraction from 0 to 1 of the screen, or of your layout under mode=\"inline\". undefined means the size step decides. A model, so [(extent)] binds both halves."
+        },
+        {
+          "name": "minExtent",
+          "type": "number",
+          "defaultValue": "0.2",
+          "appliesTo": "<sl-drawer>",
+          "description": "The smallest measure the reader can set, and the separator’s aria-valuemin. A drag released below it asks to close the drawer, with the reason pointer."
+        },
+        {
+          "name": "maxExtent",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "<sl-drawer>",
+          "description": "The largest measure the reader can set, and the separator’s aria-valuemax. With snap points, both limits default to the first and the last stop."
+        },
+        {
+          "name": "snapPoints",
+          "type": "readonly number[]",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "The stops the measure moves between, as fractions. With them an arrow key moves to the next stop, Home and End go to the first and the last, and a drag is released onto the nearest."
+        },
+        {
+          "name": "mode",
+          "type": "'overlay' | 'inline'",
+          "defaultValue": "overlay",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "overlay puts the drawer over the page, in a portal; inline puts it in your own layout. The value can change while the drawer is open, and the panel’s content and the state of its fields are kept across the change."
+        },
+        {
+          "name": "side",
+          "type": "'start' | 'end' | 'top' | 'bottom'",
+          "defaultValue": "end",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "The edge the panel comes from. start and end follow the writing direction, so the drawer changes sides in a right-to-left document."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full' | 'content'",
+          "defaultValue": "md",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. When unset, content on top and bottom and md on start and end. A step wider than the screen is held to it."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "When an overlay layer is in the document: active only while it is open or closing, lazy from the first open on, and eager from the start, inert while closed. An inline drawer is always in the document."
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "Whether the page behind is inert, its scroll is locked and focus is contained in the panel, and whether the panel carries aria-modal. The scrim is painted either way. Always false under mode=\"inline\"."
+        },
+        {
+          "name": "escape",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "Whether Escape asks to close the drawer. Escape reaches only the topmost layer, and a layer that refuses it does not pass it to the one below."
+        },
+        {
+          "name": "outsidePress",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "Whether a press outside the layer, the scrim included, asks to close the drawer. It has no effect under mode=\"inline\"."
+        },
+        {
+          "name": "back",
+          "type": "'close' | 'none'",
+          "defaultValue": "close",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "Whether the browser’s back button or a phone’s back gesture closes a modal drawer instead of leaving the page. The drawer holds one history entry while it is open. It has no effect under mode=\"inline\"."
+        },
+        {
+          "name": "drag",
+          "type": "'panel' | 'resizer'",
+          "defaultValue": "panel",
+          "appliesTo": "<sl-drawer>, provideDrawerDefaults",
+          "description": "What a touch moves a bottom sheet by: panel, anywhere on the panel, or resizer, the separator only. With panel, a drag that starts in a list scrolled away from its top scrolls the list. A mouse or a pen always drags the separator."
+        },
+        {
+          "name": "scrimFrom",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "<sl-drawer>",
+          "description": "While the measure is below this fraction, the scrim is not painted, a press reaches the page, and the root carries data-undimmed. Use it with [modal]=\"false\" and outsidePress=\"none\"."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "<sl-drawer>",
+          "description": "Marks the body as busy with aria-busy and gives it a minimum height, so the panel does not jump when the content arrives. The header, the ✕, Escape and the separator stay available."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DrawerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "Words laid over the current language, key by key: close, the name of the ✕. An aria-label on slDrawerClose takes precedence."
+        },
+        {
+          "name": "initialFocus",
+          "type": "'first' | 'container' | HTMLElement | false",
+          "defaultValue": "first",
+          "appliesTo": "<sl-drawer>",
+          "description": "Where focus goes when an overlay drawer opens: first, the first focusable element; container, the panel itself, for content that is read before it is used; an element; or false, nowhere. An inline drawer moves no focus."
+        },
+        {
+          "name": "finalFocus",
+          "type": "HTMLElement | false",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "Where focus goes when the drawer closes, as an element, or false for nowhere. When unset, it returns to the element that had focus when the drawer opened, usually the trigger."
+        },
+        {
+          "name": "inset",
+          "type": "'none'",
+          "defaultValue": "—",
+          "appliesTo": "slDrawerBody",
+          "description": "none removes the body’s padding, for content that brings its own inset, such as a page or a list that runs to the panel’s edges."
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "defaultValue": "16",
+          "appliesTo": "slDrawerResizer",
+          "description": "How far one arrow key moves the separator, in pixels, when there are no snap points."
+        },
+        {
+          "name": "largeStep",
+          "type": "number",
+          "defaultValue": "64",
+          "appliesTo": "slDrawerResizer",
+          "description": "How far Shift and an arrow key move the separator, in pixels, when there are no snap points."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slDrawerClose",
+          "description": "The result of a close from this button, carried on the close request as result."
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs",
+          "type": "'slDrawer'",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "A template reference variable, #drawer=\"slDrawer\", reaches the drawer, which is how a trigger anywhere in the same template opens it."
+        },
+        {
+          "name": "ng-content",
+          "type": "—",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "The drawer’s content is your own elements with the part directives on them, projected into the panel. Under mount=\"active\" the layer is built only while the drawer is open."
+        },
+        {
+          "name": "openDrawer(), close(result), focus()",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "Open the drawer, close it with a result, and move focus into the panel, from code. Each opens or closes with the reason programmatic."
+        },
+        {
+          "name": "container",
+          "type": "Element | null",
+          "defaultValue": "—",
+          "appliesTo": "<sl-drawer>",
+          "description": "An element to portal this layer into instead of the shared portal root, for an application shell with its own stacking context. setPortalContainer from @slotted/core/portal sets one for the whole document."
+        },
+        {
+          "name": "provideDrawerDefaults()",
+          "type": "{ mode, side, size, mount, modal, escape, outsidePress, back, drag }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Sets these nine axes for every drawer in the injector, through DRAWER_DEFAULTS. A value set on one drawer still wins."
+        }
+      ],
+      "events": [
+        {
+          "name": "openChange",
+          "payload": "boolean",
+          "when": "The two-way half of open, which [(open)] binds. It fires once the drawer has opened or closed."
+        },
+        {
+          "name": "openChangeRequest",
+          "payload": "DrawerChangeRequest",
+          "when": "Before the drawer opens or closes, for every way it can: the trigger, the ✕, Escape, a press outside, the back gesture and a call from code. The request carries value, previous, reason (pointer, keyboard, dismiss, escape, outsidePress, back or programmatic), result, the source event and cancel(), which keeps the drawer as it is."
+        },
+        {
+          "name": "extentChange",
+          "payload": "number | undefined",
+          "when": "The two-way half of extent, which [(extent)] binds. It fires once the measure has changed."
+        },
+        {
+          "name": "extentChangeRequest",
+          "payload": "DrawerExtentRequest",
+          "when": "Before the panel’s measure changes, with the reason pointer for a drag or a tap on the grip, keyboard for an arrow key, Home, End or Enter, and programmatic for a change from code. A drag of the separator fires on every pointer move and can report a value below minExtent; a drag of a sheet’s body fires once, on release, with the stop it landed on. undefined means the panel is back on its size step, or on the height of its content under size=\"content\"."
+        },
+        {
+          "name": "closed",
+          "payload": "string | undefined",
+          "when": "Once the drawer has closed, with the result of the close, or undefined for a close that carried none."
+        }
+      ],
+      "accessibility": [
+        "Under mode=\"overlay\" the drawer follows the WAI-ARIA dialog (modal) pattern. While it is modal, Tab and Shift+Tab move through the panel and wrap at its ends. Escape closes it, and reaches only the topmost layer, so one press never closes two drawers.",
+        "Under mode=\"inline\" the panel has no role, because a navigation drawer is a navigation landmark and a filter panel is complementary; write the landmark yourself, such as <nav slDrawerBody>. The trigger has no aria-haspopup there, because an inline drawer is a disclosure, not a popup.",
+        "aria-modal=\"true\" is written only while the drawer is modal, which is the only state in which the page behind is inert. modal is always false under mode=\"inline\". An aria-label written on <sl-drawer> is moved to the panel, which is the element the role is on.",
+        "The separator follows the WAI-ARIA window splitter pattern. The arrow keys move it in the direction they point, Home and End go to the limits, and Enter collapses the panel to its minimum and then restores it. Enter never closes the drawer; Escape does. The values are percentages, and there is no aria-valuetext, so a screen reader announces 40 rather than 40 per cent.",
+        "A bottom sheet moves under a touch on its body as well as on its separator, and every stop a finger reaches, the height of the content among them, is also reachable with the arrow keys on the separator. A touch drag never starts on a field, on selected text, or on an element whose touch-action already takes vertical movement.",
+        "A closed panel is inert in both modes, so its controls are in neither the tab order nor the accessibility tree.",
+        "Focus moves into an overlay panel when it opens, to the first focusable element unless initialFocus names another, and returns on close to the element that had it before; if that element has left the document, focus goes to its nearest ancestor still in it. An inline drawer moves no focus when it opens, and on close restores focus only when focus is inside the panel or on the page body.",
+        "The ✕ button and the separator are each at least --slotted-target-min across, so both meet the WCAG 2.2 minimum target size of 24 by 24 pixels."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-drawer-body-color",
+    "--slotted-drawer-border-color",
+    "--slotted-drawer-close-active-background",
+    "--slotted-drawer-close-color",
+    "--slotted-drawer-close-hover-background",
+    "--slotted-drawer-color",
+    "--slotted-drawer-description-color",
+    "--slotted-drawer-extent",
+    "--slotted-drawer-extent-lg",
+    "--slotted-drawer-extent-md",
+    "--slotted-drawer-extent-sm",
+    "--slotted-drawer-extent-xl",
+    "--slotted-drawer-footer-surface",
+    "--slotted-drawer-radius",
+    "--slotted-drawer-resizer-line-active-color",
+    "--slotted-drawer-resizer-line-color",
+    "--slotted-drawer-rule-color",
+    "--slotted-drawer-scrim",
+    "--slotted-drawer-sheet-inline-size",
+    "--slotted-drawer-surface",
+    "--slotted-drawer-title-color",
+    "--slotted-drawer-title-font-family",
+    "--slotted-duration-instant",
+    "--slotted-duration-long",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-radius-full",
+    "--slotted-radius-lg",
+    "--slotted-radius-sm",
+    "--slotted-scrim",
+    "--slotted-shadow-lg",
+    "--slotted-space-11",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface-raised",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-overlay"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A drawer opened inside the scene rather than over the page. Press the trigger, then Tab: focus is contained, Escape closes, and focus returns to the button it came from.",
+      "language": "html",
+      "source": "<button slButton [slDrawerTrigger]=\"d\">Abrir detalhes</button>\n<sl-drawer #d=\"slDrawer\">\n  <header slDrawerHeader>\n    <h2 slDrawerTitle>Fatura 4471</h2>\n    <p slDrawerDescription>Emitida em 12 de agosto.</p>\n    <button slDrawerClose></button>\n  </header>\n  <div slDrawerBody>\n    <input slTextField aria-label=\"Observação\" />\n  </div>\n  <footer slDrawerFooter>\n    <button slButton size=\"sm\" variant=\"ghost\" tone=\"secondary\">Cancelar</button>\n    <button slButton size=\"sm\">Salvar</button>\n  </footer>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "mode",
+      "title": "A layer over the page, or a panel beside it",
+      "note": "One axis rather than two components, because an application binds it to its own breakpoint: swapping one element for another there would take the panel’s scroll position, its focus and every uncontrolled control with it.",
+      "language": "html",
+      "source": "<div style=\"display: grid; grid-template-columns: auto minmax(0, 1fr)\">\n  <sl-drawer [mode]=\"wide() ? 'inline' : 'overlay'\" [(open)]=\"open\" side=\"start\">\n    <nav slDrawerBody aria-label=\"Seções\">…</nav>\n  </sl-drawer>\n  <main>…</main>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "side",
+      "title": "Which edge it comes from",
+      "note": "start and end rather than left and right, so the whole layout mirrors in a right-to-left document with no second stylesheet. Only the exit slide is physical, and it takes one rule per inline side.",
+      "language": "html",
+      "source": "<sl-drawer side=\"bottom\" [(open)]=\"open\">\n  <div slDrawerBody>…</div>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "size",
+      "title": "How much room the panel takes",
+      "note": "Five named steps rather than a pixel string, because a theme can retune a step and cannot retune width: 400px. A drawer wider than the layer is clamped to it, which is what makes a side drawer full-bleed on a phone.",
+      "language": "html",
+      "source": "<sl-drawer size=\"lg\">…</sl-drawer>\n\n<!-- An exact measure is the token the steps resolve into. -->\n<sl-drawer style=\"--slotted-drawer-extent: 27rem\">…</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "resize",
+      "title": "An edge the reader can move — with a keyboard",
+      "note": "Putting slDrawerResizer on an element is the capability; there is no resizable input. Arrow keys move it sixteen pixels at a time and sixty-four with Shift, Home and End reach the limits, Enter collapses and restores, and a double click puts the panel back on the measure its size step gives it — which is the Window Splitter pattern, and which no surveyed drawer answers.",
+      "language": "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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerHeader,\n  SlDrawerResizer,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\n\nconst LINES = [\n  { term: 'Arabica beans, 5 kg', value: '6 cases, $420.00' },\n  { term: 'Oat milk, 12 × 1 L', value: '4 cases, $192.00' },\n  { term: 'Paper cups, 16 oz, 1,000 per case', value: '4 cases, $628.00' },\n];\n\n@Component({\n  selector: 'app-drawer-resize',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerHeader,\n    SlDrawerResizer,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n      View order lines\n    </button>\n    <sl-drawer #drawer=\"slDrawer\" [maxExtent]=\"0.8\" [minExtent]=\"0.25\" [(extent)]=\"extent\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Order SO-1182 lines</h2>\n        <p slDrawerDescription>Width: {{ width() }}.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slDescriptionList>\n          @for (line of lines; track line.term) {\n            <div slDescriptionListItem>\n              <dt slDescriptionListTerm>{{ line.term }}</dt>\n              <dd slDescriptionListDescription>{{ line.value }}</dd>\n            </div>\n          }\n        </div>\n      </div>\n      <div slDrawerResizer></div>\n    </sl-drawer>\n  `,\n})\nexport class DrawerResize {\n  readonly lines = LINES;\n  readonly extent = signal<number | undefined>(undefined);\n  readonly width = computed(() => {\n    const extent = this.extent();\n    return extent === undefined ? 'the md step' : `${Math.round(extent * 100)}% of the window`;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "snapPoints",
+      "title": "Stops the sheet lands on",
+      "note": "A snap point is a stop of the same separator, so the arrows that move it move between them — which is the condition the guide puts on shipping snap points at all. A drag released below the first stop asks to close.",
+      "language": "html",
+      "source": "<sl-drawer side=\"bottom\" [snapPoints]=\"[0.3, 0.6, 0.95]\" [(extent)]=\"extent\">\n  <div slDrawerResizer></div>\n  <div slDrawerBody>…</div>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sheet",
+      "title": "A bottom sheet as a phone draws one",
+      "note": "The sheet measures what it holds — the default size on top and bottom — stops at forty rems on a wide layer, and moves under a touch anywhere on its body. A downward drag with the list at its top moves the sheet; an upward one grows it to the next stop — the height of its content among them — before the list scrolls; a fling faster than 500 px/s goes to the next stop or closes. A tap on the grabber walks the stops.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerResizer,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlText } from '@slotted/angular/typography';\n\nconst WINDOWS = [\n  { value: 'morning', label: 'Thursday 8 October, 8 AM to noon' },\n  { value: 'afternoon', label: 'Thursday 8 October, 1 to 5 PM' },\n  { value: 'friday', label: 'Friday 9 October, 8 AM to noon' },\n];\n\n@Component({\n  selector: 'app-drawer-sheet',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerResizer,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlFieldGroup,\n    SlFieldGroupLegend,\n    SlInline,\n    SlRadio,\n    SlRadioGroup,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <span slText size=\"sm\">Pickup: {{ pickupLabel() }}</span>\n      <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n        Reschedule\n      </button>\n      <sl-drawer #drawer=\"slDrawer\" side=\"bottom\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <div slDrawerResizer></div>\n        <header slDrawerHeader>\n          <h2 slDrawerTitle>Reschedule pickup</h2>\n          <p slDrawerDescription>Shipment SH-4471, UPS Ground from Reno, NV.</p>\n          <button slDrawerClose></button>\n        </header>\n        <div slDrawerBody>\n          <fieldset slFieldGroup>\n            <legend slFieldGroupLegend>Pickup window</legend>\n            <div slRadioGroup [value]=\"draft()\" (valueChange)=\"draft.set($event.value ?? draft())\">\n              @for (window of windows; track window.value) {\n                <div slRadio [value]=\"window.value\">{{ window.label }}</div>\n              }\n            </div>\n          </fieldset>\n        </div>\n        <footer slDrawerFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton (click)=\"reschedule()\">Reschedule</button>\n        </footer>\n      </sl-drawer>\n    </div>\n  `,\n})\nexport class DrawerSheet {\n  readonly windows = WINDOWS;\n  readonly open = signal(false);\n  readonly pickup = signal('morning');\n  readonly draft = signal(this.pickup());\n  readonly pickupLabel = computed(\n    () => WINDOWS.find((window) => window.value === this.pickup())?.label,\n  );\n\n  toggle(next: boolean): void {\n    if (next) this.draft.set(this.pickup());\n    this.open.set(next);\n  }\n\n  reschedule(): void {\n    this.pickup.set(this.draft());\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scrimFrom",
+      "title": "A sheet over a page that stays in use",
+      "note": "Below scrimFrom the scrim is not painted and a press reaches the page — the sheet over a map. It is written beside [modal]=\"false\" and outsidePress=\"none\", because an undimmed page that stayed inert would promise something it does not do. Move the sheet past sixty per cent and the scrim fades in.",
+      "language": "html",
+      "source": "<sl-drawer\n  side=\"bottom\"\n  [snapPoints]=\"[0.25, 0.6, 0.95]\"\n  [(extent)]=\"extent\"\n  [scrimFrom]=\"0.6\"\n  [modal]=\"false\"\n  outsidePress=\"none\"\n>\n  …\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "A sheet above the virtual keyboard",
+      "note": "On a phone the keyboard shrinks the visual viewport and leaves fixed layers under the keys. The open layer reads what the keyboard covers and recedes by it, so the sheet — and its footer — land above the keys. The button beside the scene writes the same property the binding writes, 260 pixels, to show it on a screen without one.",
+      "language": "html",
+      "source": "<sl-drawer side=\"bottom\" [(open)]=\"reminding\">\n  <header slDrawerHeader><h2 slDrawerTitle>Enviar lembrete</h2></header>\n  <div slDrawerBody>\n    <input slTextField aria-label=\"Nota para o cliente\" />\n  </div>\n  <footer slDrawerFooter>…</footer>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "modal",
+      "title": "A drawer the page behind can still be used",
+      "note": "modal=\"false\" writes no aria-modal, makes nothing inert, locks no scroll and contains no focus. The APG warns that marking a container modal without doing all four is worse for a screen-reader reader than not marking it at all.",
+      "language": "html",
+      "source": "<sl-drawer [modal]=\"false\" [(open)]=\"open\">\n  <div slDrawerBody>…</div>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "policy",
+      "title": "Refusing a close, and refusing it once",
+      "note": "Five ways to close and one output. A guard on openChangeRequest covers Escape, an outside press, the close button, the trigger and the imperative call together; Angular Material’s disableClose refuses two of them.",
+      "language": "html",
+      "source": "<sl-drawer [(open)]=\"open\" (openChangeRequest)=\"guard($event)\">…</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "focus",
+      "title": "Where focus goes, and where it comes back to",
+      "note": "An overlay drawer takes focus on open and gives it back on close. An inline one takes nothing — a sidebar that stole focus every time a breakpoint crossed would be unusable — and still gives it back when it closes under the reader’s hands.",
+      "language": "html",
+      "source": "<sl-drawer [initialFocus]=\"search\">\n  <div slDrawerBody>\n    <input #search slTextField aria-label=\"Buscar\" />\n  </div>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "Open before the content arrived",
+      "note": "The body carries aria-busy and keeps a floor so the panel does not jump to size when the data lands. The header, the close button, Escape and the separator all stay operable: a drawer a reader cannot leave is the worse failure of the two.",
+      "language": "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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlSkeleton, SlSkeletonRegion } from '@slotted/angular/skeleton';\n\ninterface Shipment {\n  carrier: string;\n  tracking: string;\n  packages: string;\n  delivery: string;\n}\n\nconst FIELDS: { key: keyof Shipment; term: string; width: string }[] = [\n  { key: 'carrier', term: 'Carrier', width: '6rem' },\n  { key: 'tracking', term: 'Tracking number', width: '11rem' },\n  { key: 'packages', term: 'Packages', width: '8rem' },\n  { key: 'delivery', term: 'Estimated delivery', width: '9rem' },\n];\n\n@Component({\n  selector: 'app-drawer-loading',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlSkeleton,\n    SlSkeletonRegion,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n      Track shipment SH-4471\n    </button>\n    <sl-drawer #drawer=\"slDrawer\" [loading]=\"shipment() === null\" [(open)]=\"open\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Shipment SH-4471</h2>\n        <p slDrawerDescription>Order SO-1182 for Contoso Foods, Seattle.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div\n          slSkeletonRegion\n          [delay]=\"200\"\n          [loading]=\"shipment() === null\"\n          [messages]=\"{ label: 'Loading shipment' }\"\n          [minDuration]=\"400\"\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 (shipment(); 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-drawer>\n  `,\n})\nexport class DrawerLoading {\n  readonly fields = FIELDS;\n  readonly open = signal(false);\n  readonly shipment = signal<Shipment | null>(null);\n\n  constructor() {\n    effect((onCleanup) => {\n      if (!this.open()) return;\n      this.shipment.set(null);\n      const timer = setTimeout(\n        () =>\n          this.shipment.set({\n            carrier: 'UPS Ground',\n            tracking: '1Z 999 AA1 01 2345 6784',\n            packages: '3, 18.4 kg in total',\n            delivery: 'Thursday, 8 October',\n          }),\n        1200,\n      );\n      onCleanup(() => clearTimeout(timer));\n    });\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "nested",
+      "title": "A drawer opened from a drawer",
+      "note": "Escape reaches the topmost layer only, and a layer that refuses it stops the request reaching the one beneath. The depth comes from the single stack dismissable-layer keeps, so nothing here states a z-index.",
+      "language": "ts",
+      "source": "import { Component } 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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\n\nconst ORDER = [\n  { term: 'Customer', value: 'Contoso Foods' },\n  { term: 'Items', value: '14 cases, 3 products' },\n  { term: 'Total', value: '$1,240.00' },\n];\n\nconst CUSTOMER = [\n  { term: 'Account', value: 'C-0042' },\n  { term: 'Contact', value: 'Ana Ruiz, ap@contoso.com' },\n  { term: 'Open orders', value: '3, $4,815.50 in total' },\n  { term: 'Payment terms', value: 'Net 30' },\n];\n\n@Component({\n  selector: 'app-drawer-nested',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlInline,\n    SlStack,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"order\">\n      View order SO-1182\n    </button>\n    <sl-drawer #order=\"slDrawer\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Order SO-1182</h2>\n        <p slDrawerDescription>Placed on 2 October 2026.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slStack [gap]=\"5\">\n          <div slDescriptionList>\n            @for (detail of orderDetails; 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 slInline>\n            <button\n              slButton\n              size=\"sm\"\n              tone=\"secondary\"\n              variant=\"outline\"\n              [slDrawerTrigger]=\"customer\"\n            >\n              View customer\n            </button>\n          </div>\n          <sl-drawer #customer=\"slDrawer\" size=\"sm\">\n            <header slDrawerHeader>\n              <h2 slDrawerTitle>Contoso Foods</h2>\n              <p slDrawerDescription>Customer since March 2021.</p>\n              <button slDrawerClose></button>\n            </header>\n            <div slDrawerBody>\n              <div slDescriptionList>\n                @for (detail of customerDetails; 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          </sl-drawer>\n        </div>\n      </div>\n    </sl-drawer>\n  `,\n})\nexport class DrawerNested {\n  readonly orderDetails = ORDER;\n  readonly customerDetails = CUSTOMER;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A ninety-character token in a title breaks rather than widening the panel, and a body longer than the layer scrolls while the actions hold still. MUI and Angular Material ship no layout, so a footer past the fold is the default of following either.",
+      "language": "html",
+      "source": "<sl-drawer>\n  <header slDrawerHeader>\n    <h2 slDrawerTitle>{{ fileName }}</h2>\n  </header>\n  <div slDrawerBody>{{ longText }}</div>\n  <footer slDrawerFooter><button slButton>Salvar</button></footer>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "The parts are the consumer’s own elements",
+      "note": "Every part is a directive on an element the consumer wrote, so the trigger is the library’s button and an inline panel’s content is a nav — nothing is reimplemented and nothing is wrapped. An empty list inside the body is result-state, which owns that question.",
+      "language": "html",
+      "source": "<button slButton variant=\"outline\" [slDrawerTrigger]=\"d\">Abrir</button>\n<sl-drawer #d=\"slDrawer\" mode=\"inline\" side=\"start\">\n  <nav slDrawerBody aria-label=\"Seções\">…</nav>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "What an application decides once",
+      "note": "Seven axes set for a whole injector rather than repeated on every drawer in a product. A drawer that states any of them itself still wins, because an explicit consumer value always does.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  provideDrawerDefaults,\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-drawer-defaults',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlInline,\n    SlText,\n  ],\n  providers: [provideDrawerDefaults({ side: 'start', size: 'sm' })],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"warehouses\">\n        Warehouses\n      </button>\n      <sl-drawer #warehouses=\"slDrawer\">\n        <header slDrawerHeader>\n          <h2 slDrawerTitle>Warehouses</h2>\n          <button slDrawerClose></button>\n        </header>\n        <div slDrawerBody>\n          <span slText size=\"sm\">From the start edge and small, both from the provider.</span>\n        </div>\n      </sl-drawer>\n      <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"carriers\">\n        Carriers\n      </button>\n      <sl-drawer #carriers=\"slDrawer\" size=\"lg\">\n        <header slDrawerHeader>\n          <h2 slDrawerTitle>Carriers</h2>\n          <button slDrawerClose></button>\n        </header>\n        <div slDrawerBody>\n          <span slText size=\"sm\">\n            From the start edge, from the provider, and large because this drawer says so.\n          </span>\n        </div>\n      </sl-drawer>\n    </div>\n  `,\n})\nexport class DrawerDefaults {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears, and what they can reach",
+      "note": "The title names the panel and the separator; the trigger says expanded in both modes and haspopup in one. Tab wraps inside a modal panel, and the closed panel of an inline drawer is inert so the collapse the eye reads and the tab order agree.",
+      "language": "html",
+      "source": "<sl-drawer mode=\"inline\" side=\"start\">\n  <header slDrawerHeader><h2 slDrawerTitle>Coleções</h2></header>\n  <div slDrawerResizer></div>\n</sl-drawer>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\n\nconst DETAILS = [\n  { term: 'Ship to', value: '1200 Harbor Ave, Seattle, WA' },\n  { term: 'Payment', value: 'Captured, card ending 4242' },\n  { term: 'Items', value: '14 cases, 3 products' },\n  { term: 'Warehouse', value: 'Reno, NV' },\n  { term: 'Total', value: '$1,240.00' },\n];\n\n@Component({\n  selector: 'app-drawer-basic',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlInline,\n    SlStack,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n      View order SO-1182\n    </button>\n    <sl-drawer #drawer=\"slDrawer\" [(open)]=\"open\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Order SO-1182</h2>\n        <p slDrawerDescription>Contoso Foods, placed on 2 October 2026.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slStack [gap]=\"4\">\n          <div slInline>\n            <span slBadge tone=\"accent\">Ready to ship</span>\n          </div>\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      </div>\n      <footer slDrawerFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">Close</button>\n        <button slButton (click)=\"open.set(false)\">Create shipment</button>\n      </footer>\n    </sl-drawer>\n  `,\n})\nexport class DrawerBasic {\n  readonly open = signal(false);\n  readonly details = DETAILS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "detail-panel",
+      "title": "detail-panel.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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerHeader,\n  SlDrawerTitle,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlVisuallyHidden } from '@slotted/angular/visually-hidden';\n\nconst ORDERS = [\n  {\n    id: 'SO-1182',\n    customer: 'Contoso Foods',\n    city: 'Seattle, WA',\n    status: 'Ready to ship',\n    tone: 'accent',\n    items: '14 cases, 3 products',\n    total: '$1,240.00',\n  },\n  {\n    id: 'SO-1183',\n    customer: 'Fabrikam Grocers',\n    city: 'Portland, OR',\n    status: 'Shipped',\n    tone: 'success',\n    items: '6 cases, 2 products',\n    total: '$386.50',\n  },\n  {\n    id: 'SO-1184',\n    customer: 'Tailspin Market',\n    city: 'Boise, ID',\n    status: 'On hold',\n    tone: 'warning',\n    items: '22 cases, 5 products',\n    total: '$2,075.25',\n  },\n  {\n    id: 'SO-1185',\n    customer: 'Adventure Works',\n    city: 'Denver, CO',\n    status: 'Ready to ship',\n    tone: 'accent',\n    items: '9 cases, 4 products',\n    total: '$918.00',\n  },\n] as const;\n\ntype Order = (typeof ORDERS)[number];\n\n@Component({\n  selector: 'app-drawer-detail-panel',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlInline,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\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]=\"'View ' + row.id\"\n                  (click)=\"view(row)\"\n                >\n                  View\n                </button>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n    <sl-drawer [modal]=\"false\" outsidePress=\"none\" [scrimFrom]=\"1\" size=\"sm\" [(open)]=\"open\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Order {{ order().id }}</h2>\n        <p slDrawerDescription>{{ order().customer }}, {{ order().city }}</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slStack [gap]=\"4\">\n          <div slInline>\n            <span slBadge [tone]=\"order().tone\">{{ order().status }}</span>\n          </div>\n          <div slDescriptionList>\n            <div slDescriptionListItem>\n              <dt slDescriptionListTerm>Items</dt>\n              <dd slDescriptionListDescription>{{ order().items }}</dd>\n            </div>\n            <div slDescriptionListItem>\n              <dt slDescriptionListTerm>Total</dt>\n              <dd slDescriptionListDescription>{{ order().total }}</dd>\n            </div>\n          </div>\n        </div>\n      </div>\n    </sl-drawer>\n  `,\n})\nexport class DrawerDetailPanel {\n  readonly orders = ORDERS;\n  readonly open = signal(false);\n  readonly order = signal<Order>(ORDERS[0]);\n\n  view(row: Order): void {\n    this.order.set(row);\n    this.open.set(true);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filters",
+      "title": "filters.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 { SlCheckboxGroup } from '@slotted/angular/checkbox-group';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\nconst ORDERS = [\n  { id: 'SO-1182', status: 'processing', warehouse: 'RNO' },\n  { id: 'SO-1183', status: 'shipped', warehouse: 'CMH' },\n  { id: 'SO-1184', status: 'on-hold', warehouse: 'RNO' },\n  { id: 'SO-1185', status: 'processing', warehouse: 'SAV' },\n  { id: 'SO-1186', status: 'shipped', warehouse: 'RNO' },\n  { id: 'SO-1187', status: 'processing', warehouse: 'CMH' },\n  { id: 'SO-1188', status: 'on-hold', warehouse: 'SAV' },\n  { id: 'SO-1189', status: 'processing', warehouse: 'RNO' },\n];\n\ninterface Filters {\n  statuses: readonly string[];\n  warehouse: string;\n}\n\nconst ALL: Filters = { statuses: ['processing', 'shipped', 'on-hold'], warehouse: 'any' };\n\nconst matching = (filters: Filters) =>\n  ORDERS.filter(\n    (order) =>\n      filters.statuses.includes(order.status) &&\n      (filters.warehouse === 'any' || order.warehouse === filters.warehouse),\n  ).length;\n\n@Component({\n  selector: 'app-drawer-filters',\n  imports: [\n    SlButton,\n    SlCheckbox,\n    SlCheckboxGroup,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlFieldGroup,\n    SlFieldGroupLegend,\n    SlInline,\n    SlRadio,\n    SlRadioGroup,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <span slText size=\"sm\">{{ shown() }} of {{ total }} orders</span>\n      <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n        Filters\n      </button>\n      <sl-drawer #drawer=\"slDrawer\" size=\"sm\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDrawerHeader>\n          <h2 slDrawerTitle>Filter orders</h2>\n          <button slDrawerClose></button>\n        </header>\n        <div slDrawerBody>\n          <div slStack [gap]=\"6\">\n            <fieldset slFieldGroup>\n              <legend slFieldGroupLegend>Status</legend>\n              <div\n                slCheckboxGroup\n                [value]=\"draft().statuses\"\n                (valueChange)=\"draft.set({ statuses: $event.value, warehouse: draft().warehouse })\"\n              >\n                <div slCheckbox value=\"processing\">Processing</div>\n                <div slCheckbox value=\"shipped\">Shipped</div>\n                <div slCheckbox value=\"on-hold\">On hold</div>\n              </div>\n            </fieldset>\n            <fieldset slFieldGroup>\n              <legend slFieldGroupLegend>Warehouse</legend>\n              <div\n                slRadioGroup\n                [value]=\"draft().warehouse\"\n                (valueChange)=\"\n                  draft.set({ statuses: draft().statuses, warehouse: $event.value ?? 'any' })\n                \"\n              >\n                <div slRadio value=\"any\">Any warehouse</div>\n                <div slRadio value=\"RNO\">Reno, NV</div>\n                <div slRadio value=\"CMH\">Columbus, OH</div>\n                <div slRadio value=\"SAV\">Savannah, GA</div>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <footer slDrawerFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"draft.set(all)\">Reset</button>\n          <button slButton (click)=\"apply()\">Show {{ count() }} orders</button>\n        </footer>\n      </sl-drawer>\n    </div>\n  `,\n})\nexport class DrawerFilters {\n  readonly all = ALL;\n  readonly total = ORDERS.length;\n  readonly open = signal(false);\n  readonly applied = signal<Filters>(ALL);\n  readonly draft = signal<Filters>(ALL);\n  readonly shown = computed(() => matching(this.applied()));\n  readonly count = computed(() => matching(this.draft()));\n\n  toggle(next: boolean): void {\n    if (next) this.draft.set(this.applied());\n    this.open.set(next);\n  }\n\n  apply(): void {\n    this.applied.set(this.draft());\n    this.open.set(false);\n  }\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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlSelect, SlSelectItem } 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 TERMS = [\n  { value: 'due', label: 'Due on receipt' },\n  { value: 'net-15', label: 'Net 15' },\n  { value: 'net-30', label: 'Net 30' },\n  { value: 'net-60', label: 'Net 60' },\n];\n\nconst CUSTOMER = { name: 'Contoso Foods', email: 'ap@contoso.com', terms: 'net-30' };\n\nconst termsLabel = (value: string) => TERMS.find((option) => option.value === value)?.label;\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the name printed on invoices.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address invoices are sent to.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ap@contoso.com.';\n  return '';\n}\n\n@Component({\n  selector: 'app-drawer-form',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlField,\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      <span slText role=\"status\" size=\"sm\" tone=\"muted\">\n        {{ customer().name }}, {{ customer().email }}, {{ termsLabel(customer().terms) }}\n      </span>\n      <button slButton [slDrawerTrigger]=\"drawer\">Edit customer</button>\n      <sl-drawer #drawer=\"slDrawer\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDrawerHeader>\n          <h2 slDrawerTitle>Edit customer</h2>\n          <p slDrawerDescription>Account C-0042, customer since March 2021.</p>\n          <button slDrawerClose></button>\n        </header>\n        <div slDrawerBody>\n          <form id=\"edit-customer\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"4\">\n              <div slField required [invalid]=\"errors()?.name ? true : undefined\">\n                <label slFieldLabel>Company name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"organization\"\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>Billing email</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\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 slField>\n                <label slFieldLabel>Payment terms</label>\n                <sl-select [items]=\"terms\" [(value)]=\"term\">\n                  @for (option of terms; track option.value) {\n                    <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n                  }\n                </sl-select>\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDrawerFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton type=\"submit\" form=\"edit-customer\">Save customer</button>\n        </footer>\n      </sl-drawer>\n    </div>\n  `,\n})\nexport class DrawerForm {\n  readonly terms = TERMS;\n  readonly termsLabel = termsLabel;\n  readonly open = signal(false);\n  readonly customer = signal(CUSTOMER);\n  readonly name = signal(CUSTOMER.name);\n  readonly email = signal(CUSTOMER.email);\n  readonly term = signal<string | null>(CUSTOMER.terms);\n  readonly submitted = signal(false);\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(this.customer().name);\n      this.email.set(this.customer().email);\n      this.term.set(this.customer().terms);\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.customer.set({\n      name: this.name().trim(),\n      email: this.email().trim(),\n      terms: this.term() ?? this.customer().terms,\n    });\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "inline",
+      "title": "inline.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 { SlCheckbox } from '@slotted/angular/checkbox';\nimport { SlCheckboxGroup } from '@slotted/angular/checkbox-group';\nimport { SlDrawer, SlDrawerBody, SlDrawerTrigger } from '@slotted/angular/drawer';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\nconst STATUSES = [\n  { value: 'processing', label: 'Processing', tone: 'accent' },\n  { value: 'shipped', label: 'Shipped', tone: 'success' },\n  { value: 'on-hold', label: 'On hold', tone: 'warning' },\n] as const;\n\nconst ORDERS = [\n  { id: 'SO-1182', customer: 'Contoso Foods', status: 'processing' },\n  { id: 'SO-1183', customer: 'Fabrikam Grocers', status: 'shipped' },\n  { id: 'SO-1184', customer: 'Tailspin Market', status: 'on-hold' },\n  { id: 'SO-1185', customer: 'Adventure Works', status: 'processing' },\n  { id: 'SO-1186', customer: 'Litware Deli', status: 'shipped' },\n] as const;\n\n@Component({\n  selector: 'app-drawer-inline',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlCheckbox,\n    SlCheckboxGroup,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerTrigger,\n    SlFieldGroup,\n    SlFieldGroupLegend,\n    SlInline,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slInline>\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n          Filters\n        </button>\n      </div>\n      <div\n        style=\"\n          display: flex;\n          flex-wrap: wrap;\n          min-block-size: 16rem;\n          border: 1px solid var(--slotted-border-subtle);\n          border-radius: var(--slotted-radius-lg);\n          overflow: hidden;\n        \"\n      >\n        <sl-drawer #drawer=\"slDrawer\" mode=\"inline\" side=\"start\" size=\"sm\" [(open)]=\"open\">\n          <div slDrawerBody>\n            <fieldset slFieldGroup>\n              <legend slFieldGroupLegend>Status</legend>\n              <div slCheckboxGroup [value]=\"statuses()\" (valueChange)=\"statuses.set($event.value)\">\n                @for (status of options; track status.value) {\n                  <div slCheckbox [value]=\"status.value\">{{ status.label }}</div>\n                }\n              </div>\n            </fieldset>\n          </div>\n        </sl-drawer>\n        <div slStack [gap]=\"3\" style=\"flex: 1 1 12rem; padding: var(--slotted-space-6)\">\n          <span slText size=\"sm\" tone=\"muted\">{{ shown().length }} of {{ total }} orders</span>\n          @for (order of shown(); track order.id) {\n            <div slInline align=\"center\" [gap]=\"3\" justify=\"between\">\n              <div slStack [gap]=\"0\">\n                <span slText size=\"sm\" weight=\"semibold\">{{ order.id }}</span>\n                <span slText size=\"sm\" tone=\"muted\">{{ order.customer }}</span>\n              </div>\n              <span slBadge [tone]=\"statusOf(order.status).tone\">\n                {{ statusOf(order.status).label }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DrawerInline {\n  readonly options = STATUSES;\n  readonly total = ORDERS.length;\n  readonly open = signal(true);\n  readonly statuses = signal<readonly string[]>(['processing', 'on-hold']);\n  readonly shown = computed(() => ORDERS.filter((order) => this.statuses().includes(order.status)));\n\n  statusOf(value: string) {\n    return STATUSES.find((item) => item.value === value)!;\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-content",
+      "title": "long-content.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\nconst EVENTS = [\n  { at: 'Oct 6, 7:42 AM', what: 'Out for delivery, Seattle, WA' },\n  { at: 'Oct 6, 5:10 AM', what: 'Arrived at the delivery facility, Seattle, WA' },\n  { at: 'Oct 5, 11:58 PM', what: 'Departed facility, Portland, OR' },\n  { at: 'Oct 5, 9:20 PM', what: 'Arrived at facility, Portland, OR' },\n  { at: 'Oct 5, 2:04 PM', what: 'Departed facility, Medford, OR' },\n  { at: 'Oct 5, 10:37 AM', what: 'Arrived at facility, Medford, OR' },\n  { at: 'Oct 4, 11:15 PM', what: 'Departed facility, Sacramento, CA' },\n  { at: 'Oct 4, 6:48 PM', what: 'Arrived at facility, Sacramento, CA' },\n  { at: 'Oct 4, 1:30 PM', what: 'Departed facility, Reno, NV' },\n  { at: 'Oct 4, 9:02 AM', what: 'Processed at the origin facility, Reno, NV' },\n  { at: 'Oct 3, 6:15 PM', what: 'Picked up from the Northwind warehouse, Reno, NV' },\n  { at: 'Oct 3, 4:40 PM', what: 'Weighed and labelled: 3 packages, 18.4 kg' },\n  { at: 'Oct 3, 2:12 PM', what: 'Packed at station 4, Reno, NV' },\n  { at: 'Oct 3, 11:05 AM', what: 'Picked from aisles 12, 14 and 21' },\n  { at: 'Oct 2, 4:55 PM', what: 'Released to the warehouse' },\n  { at: 'Oct 2, 4:31 PM', what: 'Payment captured, card ending 4242' },\n];\n\n@Component({\n  selector: 'app-drawer-long-content',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n      Tracking history\n    </button>\n    <sl-drawer #drawer=\"slDrawer\" [(open)]=\"open\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Tracking 1Z999AA10123456784</h2>\n        <p slDrawerDescription>Shipment SH-4471, 16 events since 2 October.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slStack [gap]=\"4\">\n          @for (event of events; track event.at) {\n            <div slStack [gap]=\"0\">\n              <span slText size=\"sm\" tone=\"muted\">{{ event.at }}</span>\n              <span slText size=\"sm\">{{ event.what }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <footer slDrawerFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">Close</button>\n        <button slButton>Email to customer</button>\n      </footer>\n    </sl-drawer>\n  `,\n})\nexport class DrawerLongContent {\n  readonly events = EVENTS;\n  readonly open = signal(false);\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  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlField, SlFieldDescription, 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';\n\nconst RATES = [\n  { term: 'UPS Ground', value: '$38.40, 3 business days' },\n  { term: 'FedEx Home Delivery', value: '$41.15, 3 business days' },\n  { term: 'UPS 2nd Day Air', value: '$96.80, 2 business days' },\n  { term: 'FedEx Priority Overnight', value: '$184.25, next business day' },\n];\n\n@Component({\n  selector: 'app-drawer-non-modal',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Shipping charge</label>\n        <div slTextField>\n          <input slTextFieldInput inputmode=\"decimal\" placeholder=\"0.00\" />\n        </div>\n        <span slFieldDescription>Charged to Contoso Foods on invoice INV-2041.</span>\n      </div>\n      <div slInline>\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n          Show carrier rates\n        </button>\n      </div>\n      <sl-drawer #drawer=\"slDrawer\" [modal]=\"false\" outsidePress=\"none\" [scrimFrom]=\"1\" size=\"sm\">\n        <header slDrawerHeader>\n          <h2 slDrawerTitle>Carrier rates</h2>\n          <p slDrawerDescription>3 packages, 18.4 kg, Reno to Seattle.</p>\n          <button slDrawerClose></button>\n        </header>\n        <div slDrawerBody>\n          <div slDescriptionList>\n            @for (rate of rates; track rate.term) {\n              <div slDescriptionListItem>\n                <dt slDescriptionListTerm>{{ rate.term }}</dt>\n                <dd slDescriptionListDescription>{{ rate.value }}</dd>\n              </div>\n            }\n          </div>\n        </div>\n      </sl-drawer>\n    </div>\n  `,\n})\nexport class DrawerNonModal {\n  readonly rates = RATES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pin",
+      "title": "pin.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, 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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextarea } from '@slotted/angular/textarea';\n\nconst DETAILS = [\n  { term: 'Customer', value: 'Contoso Foods, Seattle' },\n  { term: 'Items', value: '14 cases, 3 products' },\n  { term: 'Warehouse', value: 'Reno, NV' },\n];\n\n@Component({\n  selector: 'app-drawer-pin',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlField,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlTextarea,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slInline>\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n          Notes\n        </button>\n      </div>\n      <div\n        style=\"\n          display: flex;\n          flex-wrap: wrap;\n          min-block-size: 18rem;\n          border: 1px solid var(--slotted-border-subtle);\n          border-radius: var(--slotted-radius-lg);\n          overflow: hidden;\n        \"\n      >\n        <div style=\"flex: 1 1 12rem; padding: var(--slotted-space-6)\">\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        <sl-drawer\n          #drawer=\"slDrawer\"\n          size=\"sm\"\n          [mode]=\"pinned() ? 'inline' : 'overlay'\"\n          [(open)]=\"open\"\n        >\n          <header slDrawerHeader>\n            <h2 slDrawerTitle>Notes on SO-1182</h2>\n            <button slDrawerClose></button>\n          </header>\n          <div slDrawerBody>\n            <div slField>\n              <label slFieldLabel>Note for the warehouse</label>\n              <textarea\n                slTextarea\n                placeholder=\"Pallet height, dock number, contact on site\"\n              ></textarea>\n            </div>\n          </div>\n          <footer slDrawerFooter>\n            <button\n              slButton\n              size=\"sm\"\n              tone=\"secondary\"\n              variant=\"outline\"\n              (click)=\"pinned.set(!pinned())\"\n            >\n              {{ pinned() ? 'Unpin' : 'Pin beside the order' }}\n            </button>\n          </footer>\n        </sl-drawer>\n      </div>\n    </div>\n  `,\n})\nexport class DrawerPin {\n  readonly details = DETAILS;\n  readonly open = signal(false);\n  readonly pinned = signal(false);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sides",
+      "title": "sides.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\nconst SIDES = [\n  {\n    side: 'start',\n    label: 'Start',\n    title: 'Warehouses',\n    body: 'Reno, Columbus and Savannah. A panel from the start edge suits navigation between sites.',\n  },\n  {\n    side: 'end',\n    label: 'End',\n    title: 'Order SO-1182',\n    body: 'Contoso Foods, 14 cases. The end edge is the default and suits the details of a row.',\n  },\n  {\n    side: 'top',\n    label: 'Top',\n    title: 'Carrier notice',\n    body: 'UPS pickups from Reno run two hours late today. A panel from the top suits a notice that belongs to the whole screen.',\n  },\n  {\n    side: 'bottom',\n    label: 'Bottom',\n    title: '3 orders selected',\n    body: 'SO-1182, SO-1183 and SO-1184. A sheet from the bottom suits actions on a phone, within reach of the thumb.',\n  },\n] as const;\n\n@Component({\n  selector: 'app-drawer-sides',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline [gap]=\"2\">\n      @for (item of sides; track item.side) {\n        <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n          {{ item.label }}\n        </button>\n        <sl-drawer #drawer=\"slDrawer\" [side]=\"item.side\">\n          <header slDrawerHeader>\n            <h2 slDrawerTitle>{{ item.title }}</h2>\n            <button slDrawerClose></button>\n          </header>\n          <div slDrawerBody>\n            <span slText size=\"sm\">{{ item.body }}</span>\n          </div>\n        </sl-drawer>\n      }\n    </div>\n  `,\n})\nexport class DrawerSides {\n  readonly sides = SIDES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "sizes.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\nconst SIZES = [\n  { size: 'sm', body: '18rem. One field or a short list, such as the carrier for a shipment.' },\n  { size: 'md', body: '24rem, the default. The details of an order or a short form.' },\n  { size: 'lg', body: '30rem. A record with a table of lines, such as the items of an order.' },\n  { size: 'xl', body: '40rem. Two columns, such as a customer and their open orders.' },\n  { size: 'full', body: 'The whole screen. A task that needs every column, such as a pick list.' },\n] as const;\n\n@Component({\n  selector: 'app-drawer-sizes',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline [gap]=\"2\">\n      @for (item of sizes; track item.size) {\n        <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n          {{ item.size }}\n        </button>\n        <sl-drawer #drawer=\"slDrawer\" [size]=\"item.size\">\n          <header slDrawerHeader>\n            <h2 slDrawerTitle>Shipment SH-4471</h2>\n            <button slDrawerClose></button>\n          </header>\n          <div slDrawerBody>\n            <span slText size=\"sm\">{{ item.body }}</span>\n          </div>\n        </sl-drawer>\n      }\n    </div>\n  `,\n})\nexport class DrawerSizes {\n  readonly sizes = SIZES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "snap-points",
+      "title": "snap-points.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  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerHeader,\n  SlDrawerResizer,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\nconst SHIPMENTS = [\n  { id: 'SH-4471', to: 'Contoso Foods, Seattle', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4472', to: 'Fabrikam Grocers, Portland', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4473', to: 'Tailspin Market, Boise', status: 'Delayed', tone: 'warning' },\n  { id: 'SH-4474', to: 'Adventure Works, Denver', status: 'In transit', tone: 'accent' },\n  {\n    id: 'SH-4475',\n    to: 'Litware Deli, Salt Lake City',\n    status: 'Out for delivery',\n    tone: 'success',\n  },\n  { id: 'SH-4476', to: 'Proseware Cafe, Spokane', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4477', to: 'Wingtip Bakery, Eugene', status: 'Delayed', tone: 'warning' },\n  { id: 'SH-4478', to: 'Coho Winery, Walla Walla', status: 'Out for delivery', tone: 'success' },\n  { id: 'SH-4479', to: 'Northwind Outlet, Reno', status: 'In transit', tone: 'accent' },\n  { id: 'SH-4480', to: 'Fourth Coffee, Tacoma', status: 'In transit', tone: 'accent' },\n] as const;\n\n@Component({\n  selector: 'app-drawer-snap-points',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerHeader,\n    SlDrawerResizer,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlInline,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n      Shipments in transit\n    </button>\n    <sl-drawer #drawer=\"slDrawer\" side=\"bottom\" [snapPoints]=\"[0.4, 0.9]\" [(extent)]=\"extent\">\n      <div slDrawerResizer></div>\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Shipments in transit</h2>\n        <p slDrawerDescription>10 shipments left the Reno warehouse this week.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slStack [gap]=\"3\">\n          @for (shipment of shipments; track shipment.id) {\n            <div slInline align=\"center\" [gap]=\"3\" justify=\"between\">\n              <div slStack [gap]=\"0\">\n                <span slText size=\"sm\" weight=\"semibold\">{{ shipment.id }}</span>\n                <span slText size=\"sm\" tone=\"muted\">{{ shipment.to }}</span>\n              </div>\n              <span slBadge [tone]=\"shipment.tone\">{{ shipment.status }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    </sl-drawer>\n  `,\n})\nexport class DrawerSnapPoints {\n  readonly shipments = SHIPMENTS;\n  readonly extent = signal<number | undefined>(0.4);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "unsaved-changes",
+      "title": "unsaved-changes.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDrawer,\n  SlDrawerBody,\n  SlDrawerClose,\n  SlDrawerDescription,\n  SlDrawerFooter,\n  SlDrawerHeader,\n  SlDrawerTitle,\n  SlDrawerTrigger,\n} from '@slotted/angular/drawer';\nimport type { DrawerChangeRequest } from '@slotted/angular/drawer';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInlineMessage } from '@slotted/angular/inline-message';\nimport { SlTextarea } from '@slotted/angular/textarea';\n\n@Component({\n  selector: 'app-drawer-unsaved-changes',\n  imports: [\n    SlButton,\n    SlDrawer,\n    SlDrawerBody,\n    SlDrawerClose,\n    SlDrawerDescription,\n    SlDrawerFooter,\n    SlDrawerHeader,\n    SlDrawerTitle,\n    SlDrawerTrigger,\n    SlField,\n    SlFieldLabel,\n    SlInlineMessage,\n    SlTextarea,\n  ],\n  template: `\n    <button slButton tone=\"secondary\" variant=\"outline\" [slDrawerTrigger]=\"drawer\">\n      Delivery instructions\n    </button>\n    <sl-drawer #drawer=\"slDrawer\" [(open)]=\"open\" (openChangeRequest)=\"guard($event)\">\n      <header slDrawerHeader>\n        <h2 slDrawerTitle>Delivery instructions</h2>\n        <p slDrawerDescription>Order SO-1182, printed on the packing slip.</p>\n        <button slDrawerClose></button>\n      </header>\n      <div slDrawerBody>\n        <div slField>\n          <label slFieldLabel>Instructions for the carrier</label>\n          <textarea slTextarea [value]=\"draft()\" (valueChange)=\"edit($event.value)\"></textarea>\n        </div>\n      </div>\n      <footer slDrawerFooter>\n        @if (confirming()) {\n          <p slInlineMessage live=\"polite\" tone=\"warning\">\n            Discard your changes to the instructions?\n          </p>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"confirming.set(false)\">\n            Keep editing\n          </button>\n          <button slButton tone=\"danger\" (click)=\"close()\">Discard</button>\n        } @else {\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"cancel()\">Cancel</button>\n          <button slButton (click)=\"save()\">Save</button>\n        }\n      </footer>\n    </sl-drawer>\n  `,\n})\nexport class DrawerUnsavedChanges {\n  readonly open = signal(false);\n  readonly saved = signal('Leave at the loading dock, door 3.');\n  readonly draft = signal(this.saved());\n  readonly confirming = signal(false);\n\n  guard(request: DrawerChangeRequest): void {\n    if (request.value) {\n      this.draft.set(this.saved());\n      this.confirming.set(false);\n    } else if (this.draft() !== this.saved()) {\n      request.cancel();\n      this.confirming.set(true);\n    }\n  }\n\n  edit(value: string): void {\n    this.draft.set(value);\n    this.confirming.set(false);\n  }\n\n  cancel(): void {\n    if (this.draft() === this.saved()) this.close();\n    else this.confirming.set(true);\n  }\n\n  save(): void {\n    this.saved.set(this.draft());\n    this.close();\n  }\n\n  close(): void {\n    this.confirming.set(false);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}