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

package/docs/drawer.examples.md

@@ -0,0 +1,1929 @@
+<!-- index: ./index.md -->
+# drawer
+
+`data-ui="drawer"` · Panel that slides in from an edge.
+
+## Examples
+
+### Playground
+
+A drawer opened inside the scene rather than over the page. Press the trigger, then Tab: focus is contained, Escape closes, and focus returns to the button it came from.
+
+Excerpt — not a complete module
+
+```html
+<button slButton [slDrawerTrigger]="d">Abrir detalhes</button>
+<sl-drawer #d="slDrawer">
+  <header slDrawerHeader>
+    <h2 slDrawerTitle>Fatura 4471</h2>
+    <p slDrawerDescription>Emitida em 12 de agosto.</p>
+    <button slDrawerClose></button>
+  </header>
+  <div slDrawerBody>
+    <input slTextField aria-label="Observação" />
+  </div>
+  <footer slDrawerFooter>
+    <button slButton size="sm" variant="ghost" tone="secondary">Cancelar</button>
+    <button slButton size="sm">Salvar</button>
+  </footer>
+</sl-drawer>
+```
+
+### A layer over the page, or a panel beside it
+
+One axis rather than two components, because an application binds it to its own breakpoint: swapping one element for another there would take the panel’s scroll position, its focus and every uncontrolled control with it.
+
+Excerpt — not a complete module
+
+```html
+<div style="display: grid; grid-template-columns: auto minmax(0, 1fr)">
+  <sl-drawer [mode]="wide() ? 'inline' : 'overlay'" [(open)]="open" side="start">
+    <nav slDrawerBody aria-label="Seções">…</nav>
+  </sl-drawer>
+  <main>…</main>
+</div>
+```
+
+### Which edge it comes from
+
+start and end rather than left and right, so the whole layout mirrors in a right-to-left document with no second stylesheet. Only the exit slide is physical, and it takes one rule per inline side.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer side="bottom" [(open)]="open">
+  <div slDrawerBody>…</div>
+</sl-drawer>
+```
+
+### How much room the panel takes
+
+Five named steps rather than a pixel string, because a theme can retune a step and cannot retune width: 400px. A drawer wider than the layer is clamped to it, which is what makes a side drawer full-bleed on a phone.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer size="lg">…</sl-drawer>
+
+<!-- An exact measure is the token the steps resolve into. -->
+<sl-drawer style="--slotted-drawer-extent: 27rem">…</sl-drawer>
+```
+
+### An edge the reader can move — with a keyboard
+
+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.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerHeader,
+  SlDrawerResizer,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+
+const LINES = [
+  { term: 'Arabica beans, 5 kg', value: '6 cases, $420.00' },
+  { term: 'Oat milk, 12 × 1 L', value: '4 cases, $192.00' },
+  { term: 'Paper cups, 16 oz, 1,000 per case', value: '4 cases, $628.00' },
+];
+
+@Component({
+  selector: 'app-drawer-resize',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerHeader,
+    SlDrawerResizer,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+      View order lines
+    </button>
+    <sl-drawer #drawer="slDrawer" [maxExtent]="0.8" [minExtent]="0.25" [(extent)]="extent">
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Order SO-1182 lines</h2>
+        <p slDrawerDescription>Width: {{ width() }}.</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div slDescriptionList>
+          @for (line of lines; track line.term) {
+            <div slDescriptionListItem>
+              <dt slDescriptionListTerm>{{ line.term }}</dt>
+              <dd slDescriptionListDescription>{{ line.value }}</dd>
+            </div>
+          }
+        </div>
+      </div>
+      <div slDrawerResizer></div>
+    </sl-drawer>
+  `,
+})
+export class DrawerResize {
+  readonly lines = LINES;
+  readonly extent = signal<number | undefined>(undefined);
+  readonly width = computed(() => {
+    const extent = this.extent();
+    return extent === undefined ? 'the md step' : `${Math.round(extent * 100)}% of the window`;
+  });
+}
+```
+
+### Stops the sheet lands on
+
+A snap point is a stop of the same separator, so the arrows that move it move between them — which is the condition the guide puts on shipping snap points at all. A drag released below the first stop asks to close.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer side="bottom" [snapPoints]="[0.3, 0.6, 0.95]" [(extent)]="extent">
+  <div slDrawerResizer></div>
+  <div slDrawerBody>…</div>
+</sl-drawer>
+```
+
+### A bottom sheet as a phone draws one
+
+The sheet measures what it holds — the default size on top and bottom — stops at forty rems on a wide layer, and moves under a touch anywhere on its body. A downward drag with the list at its top moves the sheet; an upward one grows it to the next stop — the height of its content among them — before the list scrolls; a fling faster than 500 px/s goes to the next stop or closes. A tap on the grabber walks the stops.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerFooter,
+  SlDrawerHeader,
+  SlDrawerResizer,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';
+import { SlInline } from '@slotted/angular/inline';
+import { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';
+import { SlText } from '@slotted/angular/typography';
+
+const WINDOWS = [
+  { value: 'morning', label: 'Thursday 8 October, 8 AM to noon' },
+  { value: 'afternoon', label: 'Thursday 8 October, 1 to 5 PM' },
+  { value: 'friday', label: 'Friday 9 October, 8 AM to noon' },
+];
+
+@Component({
+  selector: 'app-drawer-sheet',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerFooter,
+    SlDrawerHeader,
+    SlDrawerResizer,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlFieldGroup,
+    SlFieldGroupLegend,
+    SlInline,
+    SlRadio,
+    SlRadioGroup,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <span slText size="sm">Pickup: {{ pickupLabel() }}</span>
+      <button slButton size="sm" tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+        Reschedule
+      </button>
+      <sl-drawer #drawer="slDrawer" side="bottom" [open]="open()" (openChange)="toggle($event)">
+        <div slDrawerResizer></div>
+        <header slDrawerHeader>
+          <h2 slDrawerTitle>Reschedule pickup</h2>
+          <p slDrawerDescription>Shipment SH-4471, UPS Ground from Reno, NV.</p>
+          <button slDrawerClose></button>
+        </header>
+        <div slDrawerBody>
+          <fieldset slFieldGroup>
+            <legend slFieldGroupLegend>Pickup window</legend>
+            <div slRadioGroup [value]="draft()" (valueChange)="draft.set($event.value ?? draft())">
+              @for (window of windows; track window.value) {
+                <div slRadio [value]="window.value">{{ window.label }}</div>
+              }
+            </div>
+          </fieldset>
+        </div>
+        <footer slDrawerFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+            Cancel
+          </button>
+          <button slButton (click)="reschedule()">Reschedule</button>
+        </footer>
+      </sl-drawer>
+    </div>
+  `,
+})
+export class DrawerSheet {
+  readonly windows = WINDOWS;
+  readonly open = signal(false);
+  readonly pickup = signal('morning');
+  readonly draft = signal(this.pickup());
+  readonly pickupLabel = computed(
+    () => WINDOWS.find((window) => window.value === this.pickup())?.label,
+  );
+
+  toggle(next: boolean): void {
+    if (next) this.draft.set(this.pickup());
+    this.open.set(next);
+  }
+
+  reschedule(): void {
+    this.pickup.set(this.draft());
+    this.open.set(false);
+  }
+}
+```
+
+### A sheet over a page that stays in use
+
+Below scrimFrom the scrim is not painted and a press reaches the page — the sheet over a map. It is written beside [modal]="false" and outsidePress="none", because an undimmed page that stayed inert would promise something it does not do. Move the sheet past sixty per cent and the scrim fades in.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer
+  side="bottom"
+  [snapPoints]="[0.25, 0.6, 0.95]"
+  [(extent)]="extent"
+  [scrimFrom]="0.6"
+  [modal]="false"
+  outsidePress="none"
+>
+  …
+</sl-drawer>
+```
+
+### A sheet above the virtual keyboard
+
+On a phone the keyboard shrinks the visual viewport and leaves fixed layers under the keys. The open layer reads what the keyboard covers and recedes by it, so the sheet — and its footer — land above the keys. The button beside the scene writes the same property the binding writes, 260 pixels, to show it on a screen without one.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer side="bottom" [(open)]="reminding">
+  <header slDrawerHeader><h2 slDrawerTitle>Enviar lembrete</h2></header>
+  <div slDrawerBody>
+    <input slTextField aria-label="Nota para o cliente" />
+  </div>
+  <footer slDrawerFooter>…</footer>
+</sl-drawer>
+```
+
+### A drawer the page behind can still be used
+
+modal="false" writes no aria-modal, makes nothing inert, locks no scroll and contains no focus. The APG warns that marking a container modal without doing all four is worse for a screen-reader reader than not marking it at all.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer [modal]="false" [(open)]="open">
+  <div slDrawerBody>…</div>
+</sl-drawer>
+```
+
+### Refusing a close, and refusing it once
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer [(open)]="open" (openChangeRequest)="guard($event)">…</sl-drawer>
+```
+
+### Where focus goes, and where it comes back to
+
+An overlay drawer takes focus on open and gives it back on close. An inline one takes nothing — a sidebar that stole focus every time a breakpoint crossed would be unusable — and still gives it back when it closes under the reader’s hands.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer [initialFocus]="search">
+  <div slDrawerBody>
+    <input #search slTextField aria-label="Buscar" />
+  </div>
+</sl-drawer>
+```
+
+### Open before the content arrived
+
+The body carries aria-busy and keeps a floor so the panel does not jump to size when the data lands. The header, the close button, Escape and the separator all stay operable: a drawer a reader cannot leave is the worse failure of the two.
+
+Example
+
+```ts
+import { Component, effect, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlSkeleton, SlSkeletonRegion } from '@slotted/angular/skeleton';
+
+interface Shipment {
+  carrier: string;
+  tracking: string;
+  packages: string;
+  delivery: string;
+}
+
+const FIELDS: { key: keyof Shipment; term: string; width: string }[] = [
+  { key: 'carrier', term: 'Carrier', width: '6rem' },
+  { key: 'tracking', term: 'Tracking number', width: '11rem' },
+  { key: 'packages', term: 'Packages', width: '8rem' },
+  { key: 'delivery', term: 'Estimated delivery', width: '9rem' },
+];
+
+@Component({
+  selector: 'app-drawer-loading',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlSkeleton,
+    SlSkeletonRegion,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+      Track shipment SH-4471
+    </button>
+    <sl-drawer #drawer="slDrawer" [loading]="shipment() === null" [(open)]="open">
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Shipment SH-4471</h2>
+        <p slDrawerDescription>Order SO-1182 for Contoso Foods, Seattle.</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div
+          slSkeletonRegion
+          [delay]="200"
+          [loading]="shipment() === null"
+          [messages]="{ label: 'Loading shipment' }"
+          [minDuration]="400"
+        >
+          <div slDescriptionList>
+            @for (field of fields; track field.key) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ field.term }}</dt>
+                <dd slDescriptionListDescription>
+                  @if (shipment(); as loaded) {
+                    {{ loaded[field.key] }}
+                  } @else {
+                    <span slSkeleton [inlineSize]="field.width"></span>
+                  }
+                </dd>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </sl-drawer>
+  `,
+})
+export class DrawerLoading {
+  readonly fields = FIELDS;
+  readonly open = signal(false);
+  readonly shipment = signal<Shipment | null>(null);
+
+  constructor() {
+    effect((onCleanup) => {
+      if (!this.open()) return;
+      this.shipment.set(null);
+      const timer = setTimeout(
+        () =>
+          this.shipment.set({
+            carrier: 'UPS Ground',
+            tracking: '1Z 999 AA1 01 2345 6784',
+            packages: '3, 18.4 kg in total',
+            delivery: 'Thursday, 8 October',
+          }),
+        1200,
+      );
+      onCleanup(() => clearTimeout(timer));
+    });
+  }
+}
+```
+
+### A drawer opened from a drawer
+
+Escape reaches the topmost layer only, and a layer that refuses it stops the request reaching the one beneath. The depth comes from the single stack dismissable-layer keeps, so nothing here states a z-index.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+
+const ORDER = [
+  { term: 'Customer', value: 'Contoso Foods' },
+  { term: 'Items', value: '14 cases, 3 products' },
+  { term: 'Total', value: '$1,240.00' },
+];
+
+const CUSTOMER = [
+  { term: 'Account', value: 'C-0042' },
+  { term: 'Contact', value: 'Ana Ruiz, ap@contoso.com' },
+  { term: 'Open orders', value: '3, $4,815.50 in total' },
+  { term: 'Payment terms', value: 'Net 30' },
+];
+
+@Component({
+  selector: 'app-drawer-nested',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlInline,
+    SlStack,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="order">
+      View order SO-1182
+    </button>
+    <sl-drawer #order="slDrawer">
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Order SO-1182</h2>
+        <p slDrawerDescription>Placed on 2 October 2026.</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div slStack [gap]="5">
+          <div slDescriptionList>
+            @for (detail of orderDetails; track detail.term) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ detail.term }}</dt>
+                <dd slDescriptionListDescription>{{ detail.value }}</dd>
+              </div>
+            }
+          </div>
+          <div slInline>
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              [slDrawerTrigger]="customer"
+            >
+              View customer
+            </button>
+          </div>
+          <sl-drawer #customer="slDrawer" size="sm">
+            <header slDrawerHeader>
+              <h2 slDrawerTitle>Contoso Foods</h2>
+              <p slDrawerDescription>Customer since March 2021.</p>
+              <button slDrawerClose></button>
+            </header>
+            <div slDrawerBody>
+              <div slDescriptionList>
+                @for (detail of customerDetails; track detail.term) {
+                  <div slDescriptionListItem>
+                    <dt slDescriptionListTerm>{{ detail.term }}</dt>
+                    <dd slDescriptionListDescription>{{ detail.value }}</dd>
+                  </div>
+                }
+              </div>
+            </div>
+          </sl-drawer>
+        </div>
+      </div>
+    </sl-drawer>
+  `,
+})
+export class DrawerNested {
+  readonly orderDetails = ORDER;
+  readonly customerDetails = CUSTOMER;
+}
+```
+
+### Content the family did not choose
+
+A ninety-character token in a title breaks rather than widening the panel, and a body longer than the layer scrolls while the actions hold still. MUI and Angular Material ship no layout, so a footer past the fold is the default of following either.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer>
+  <header slDrawerHeader>
+    <h2 slDrawerTitle>{{ fileName }}</h2>
+  </header>
+  <div slDrawerBody>{{ longText }}</div>
+  <footer slDrawerFooter><button slButton>Salvar</button></footer>
+</sl-drawer>
+```
+
+### The parts are the consumer’s own elements
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<button slButton variant="outline" [slDrawerTrigger]="d">Abrir</button>
+<sl-drawer #d="slDrawer" mode="inline" side="start">
+  <nav slDrawerBody aria-label="Seções">…</nav>
+</sl-drawer>
+```
+
+### What an application decides once
+
+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.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  provideDrawerDefaults,
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-drawer-defaults',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlInline,
+    SlText,
+  ],
+  providers: [provideDrawerDefaults({ side: 'start', size: 'sm' })],
+  template: `
+    <div slInline [gap]="2">
+      <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="warehouses">
+        Warehouses
+      </button>
+      <sl-drawer #warehouses="slDrawer">
+        <header slDrawerHeader>
+          <h2 slDrawerTitle>Warehouses</h2>
+          <button slDrawerClose></button>
+        </header>
+        <div slDrawerBody>
+          <span slText size="sm">From the start edge and small, both from the provider.</span>
+        </div>
+      </sl-drawer>
+      <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="carriers">
+        Carriers
+      </button>
+      <sl-drawer #carriers="slDrawer" size="lg">
+        <header slDrawerHeader>
+          <h2 slDrawerTitle>Carriers</h2>
+          <button slDrawerClose></button>
+        </header>
+        <div slDrawerBody>
+          <span slText size="sm">
+            From the start edge, from the provider, and large because this drawer says so.
+          </span>
+        </div>
+      </sl-drawer>
+    </div>
+  `,
+})
+export class DrawerDefaults {}
+```
+
+### What a reader hears, and what they can reach
+
+The title names the panel and the separator; the trigger says expanded in both modes and haspopup in one. Tab wraps inside a modal panel, and the closed panel of an inline drawer is inert so the collapse the eye reads and the tab order agree.
+
+Excerpt — not a complete module
+
+```html
+<sl-drawer mode="inline" side="start">
+  <header slDrawerHeader><h2 slDrawerTitle>Coleções</h2></header>
+  <div slDrawerResizer></div>
+</sl-drawer>
+```
+
+### detail-panel.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerHeader,
+  SlDrawerTitle,
+} from '@slotted/angular/drawer';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+import { SlVisuallyHidden } from '@slotted/angular/visually-hidden';
+
+const ORDERS = [
+  {
+    id: 'SO-1182',
+    customer: 'Contoso Foods',
+    city: 'Seattle, WA',
+    status: 'Ready to ship',
+    tone: 'accent',
+    items: '14 cases, 3 products',
+    total: '$1,240.00',
+  },
+  {
+    id: 'SO-1183',
+    customer: 'Fabrikam Grocers',
+    city: 'Portland, OR',
+    status: 'Shipped',
+    tone: 'success',
+    items: '6 cases, 2 products',
+    total: '$386.50',
+  },
+  {
+    id: 'SO-1184',
+    customer: 'Tailspin Market',
+    city: 'Boise, ID',
+    status: 'On hold',
+    tone: 'warning',
+    items: '22 cases, 5 products',
+    total: '$2,075.25',
+  },
+  {
+    id: 'SO-1185',
+    customer: 'Adventure Works',
+    city: 'Denver, CO',
+    status: 'Ready to ship',
+    tone: 'accent',
+    items: '9 cases, 4 products',
+    total: '$918.00',
+  },
+] as const;
+
+type Order = (typeof ORDERS)[number];
+
+@Component({
+  selector: 'app-drawer-detail-panel',
+  imports: [
+    SlBadge,
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlInline,
+    SlStack,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlVisuallyHidden,
+  ],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent>
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader numeric>Total</th>
+            <th slTableColumnHeader><span slVisuallyHidden>Actions</span></th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (row of orders; track row.id) {
+            <tr slTableRow [value]="row.id">
+              <th slTableRowHeader>{{ row.id }}</th>
+              <td slTableCell>{{ row.customer }}</td>
+              <td slTableCell numeric>{{ row.total }}</td>
+              <td slTableCell>
+                <button
+                  slButton
+                  size="sm"
+                  tone="secondary"
+                  variant="ghost"
+                  [attr.aria-label]="'View ' + row.id"
+                  (click)="view(row)"
+                >
+                  View
+                </button>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+    <sl-drawer [modal]="false" outsidePress="none" [scrimFrom]="1" size="sm" [(open)]="open">
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Order {{ order().id }}</h2>
+        <p slDrawerDescription>{{ order().customer }}, {{ order().city }}</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div slStack [gap]="4">
+          <div slInline>
+            <span slBadge [tone]="order().tone">{{ order().status }}</span>
+          </div>
+          <div slDescriptionList>
+            <div slDescriptionListItem>
+              <dt slDescriptionListTerm>Items</dt>
+              <dd slDescriptionListDescription>{{ order().items }}</dd>
+            </div>
+            <div slDescriptionListItem>
+              <dt slDescriptionListTerm>Total</dt>
+              <dd slDescriptionListDescription>{{ order().total }}</dd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </sl-drawer>
+  `,
+})
+export class DrawerDetailPanel {
+  readonly orders = ORDERS;
+  readonly open = signal(false);
+  readonly order = signal<Order>(ORDERS[0]);
+
+  view(row: Order): void {
+    this.order.set(row);
+    this.open.set(true);
+  }
+}
+```
+
+### filters.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import { SlCheckboxGroup } from '@slotted/angular/checkbox-group';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerFooter,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';
+import { SlInline } from '@slotted/angular/inline';
+import { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const ORDERS = [
+  { id: 'SO-1182', status: 'processing', warehouse: 'RNO' },
+  { id: 'SO-1183', status: 'shipped', warehouse: 'CMH' },
+  { id: 'SO-1184', status: 'on-hold', warehouse: 'RNO' },
+  { id: 'SO-1185', status: 'processing', warehouse: 'SAV' },
+  { id: 'SO-1186', status: 'shipped', warehouse: 'RNO' },
+  { id: 'SO-1187', status: 'processing', warehouse: 'CMH' },
+  { id: 'SO-1188', status: 'on-hold', warehouse: 'SAV' },
+  { id: 'SO-1189', status: 'processing', warehouse: 'RNO' },
+];
+
+interface Filters {
+  statuses: readonly string[];
+  warehouse: string;
+}
+
+const ALL: Filters = { statuses: ['processing', 'shipped', 'on-hold'], warehouse: 'any' };
+
+const matching = (filters: Filters) =>
+  ORDERS.filter(
+    (order) =>
+      filters.statuses.includes(order.status) &&
+      (filters.warehouse === 'any' || order.warehouse === filters.warehouse),
+  ).length;
+
+@Component({
+  selector: 'app-drawer-filters',
+  imports: [
+    SlButton,
+    SlCheckbox,
+    SlCheckboxGroup,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerFooter,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlFieldGroup,
+    SlFieldGroupLegend,
+    SlInline,
+    SlRadio,
+    SlRadioGroup,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <span slText size="sm">{{ shown() }} of {{ total }} orders</span>
+      <button slButton size="sm" tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+        Filters
+      </button>
+      <sl-drawer #drawer="slDrawer" size="sm" [open]="open()" (openChange)="toggle($event)">
+        <header slDrawerHeader>
+          <h2 slDrawerTitle>Filter orders</h2>
+          <button slDrawerClose></button>
+        </header>
+        <div slDrawerBody>
+          <div slStack [gap]="6">
+            <fieldset slFieldGroup>
+              <legend slFieldGroupLegend>Status</legend>
+              <div
+                slCheckboxGroup
+                [value]="draft().statuses"
+                (valueChange)="draft.set({ statuses: $event.value, warehouse: draft().warehouse })"
+              >
+                <div slCheckbox value="processing">Processing</div>
+                <div slCheckbox value="shipped">Shipped</div>
+                <div slCheckbox value="on-hold">On hold</div>
+              </div>
+            </fieldset>
+            <fieldset slFieldGroup>
+              <legend slFieldGroupLegend>Warehouse</legend>
+              <div
+                slRadioGroup
+                [value]="draft().warehouse"
+                (valueChange)="
+                  draft.set({ statuses: draft().statuses, warehouse: $event.value ?? 'any' })
+                "
+              >
+                <div slRadio value="any">Any warehouse</div>
+                <div slRadio value="RNO">Reno, NV</div>
+                <div slRadio value="CMH">Columbus, OH</div>
+                <div slRadio value="SAV">Savannah, GA</div>
+              </div>
+            </fieldset>
+          </div>
+        </div>
+        <footer slDrawerFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="draft.set(all)">Reset</button>
+          <button slButton (click)="apply()">Show {{ count() }} orders</button>
+        </footer>
+      </sl-drawer>
+    </div>
+  `,
+})
+export class DrawerFilters {
+  readonly all = ALL;
+  readonly total = ORDERS.length;
+  readonly open = signal(false);
+  readonly applied = signal<Filters>(ALL);
+  readonly draft = signal<Filters>(ALL);
+  readonly shown = computed(() => matching(this.applied()));
+  readonly count = computed(() => matching(this.draft()));
+
+  toggle(next: boolean): void {
+    if (next) this.draft.set(this.applied());
+    this.open.set(next);
+  }
+
+  apply(): void {
+    this.applied.set(this.draft());
+    this.open.set(false);
+  }
+}
+```
+
+### form.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerFooter,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlSelect, SlSelectItem } from '@slotted/angular/select';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/typography';
+
+const TERMS = [
+  { value: 'due', label: 'Due on receipt' },
+  { value: 'net-15', label: 'Net 15' },
+  { value: 'net-30', label: 'Net 30' },
+  { value: 'net-60', label: 'Net 60' },
+];
+
+const CUSTOMER = { name: 'Contoso Foods', email: 'ap@contoso.com', terms: 'net-30' };
+
+const termsLabel = (value: string) => TERMS.find((option) => option.value === value)?.label;
+
+function nameError(value: string): string {
+  return value.trim() === '' ? 'Enter the name printed on invoices.' : '';
+}
+
+function emailError(value: string): string {
+  if (value.trim() === '') return 'Enter the address invoices are sent to.';
+  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ap@contoso.com.';
+  return '';
+}
+
+@Component({
+  selector: 'app-drawer-form',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerFooter,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlField,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlSelect,
+    SlSelectItem,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <span slText role="status" size="sm" tone="muted">
+        {{ customer().name }}, {{ customer().email }}, {{ termsLabel(customer().terms) }}
+      </span>
+      <button slButton [slDrawerTrigger]="drawer">Edit customer</button>
+      <sl-drawer #drawer="slDrawer" [open]="open()" (openChange)="toggle($event)">
+        <header slDrawerHeader>
+          <h2 slDrawerTitle>Edit customer</h2>
+          <p slDrawerDescription>Account C-0042, customer since March 2021.</p>
+          <button slDrawerClose></button>
+        </header>
+        <div slDrawerBody>
+          <form id="edit-customer" novalidate (submit)="submit($event)">
+            <div slStack [gap]="4">
+              <div slField required [invalid]="errors()?.name ? true : undefined">
+                <label slFieldLabel>Company name</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="organization"
+                    [value]="name()"
+                    (valueChange)="name.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.name }}</span>
+              </div>
+              <div slField required [invalid]="errors()?.email ? true : undefined">
+                <label slFieldLabel>Billing email</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    type="email"
+                    [value]="email()"
+                    (valueChange)="email.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.email }}</span>
+              </div>
+              <div slField>
+                <label slFieldLabel>Payment terms</label>
+                <sl-select [items]="terms" [(value)]="term">
+                  @for (option of terms; track option.value) {
+                    <sl-select-item [value]="option.value">{{ option.label }}</sl-select-item>
+                  }
+                </sl-select>
+              </div>
+            </div>
+          </form>
+        </div>
+        <footer slDrawerFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+            Cancel
+          </button>
+          <button slButton type="submit" form="edit-customer">Save customer</button>
+        </footer>
+      </sl-drawer>
+    </div>
+  `,
+})
+export class DrawerForm {
+  readonly terms = TERMS;
+  readonly termsLabel = termsLabel;
+  readonly open = signal(false);
+  readonly customer = signal(CUSTOMER);
+  readonly name = signal(CUSTOMER.name);
+  readonly email = signal(CUSTOMER.email);
+  readonly term = signal<string | null>(CUSTOMER.terms);
+  readonly submitted = signal(false);
+  readonly errors = computed(() =>
+    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,
+  );
+
+  toggle(next: boolean): void {
+    if (next) {
+      this.name.set(this.customer().name);
+      this.email.set(this.customer().email);
+      this.term.set(this.customer().terms);
+      this.submitted.set(false);
+    }
+    this.open.set(next);
+  }
+
+  submit(event: Event): void {
+    event.preventDefault();
+    this.submitted.set(true);
+    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;
+    this.customer.set({
+      name: this.name().trim(),
+      email: this.email().trim(),
+      terms: this.term() ?? this.customer().terms,
+    });
+    this.open.set(false);
+  }
+}
+```
+
+### inline.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlButton } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import { SlCheckboxGroup } from '@slotted/angular/checkbox-group';
+import { SlDrawer, SlDrawerBody, SlDrawerTrigger } from '@slotted/angular/drawer';
+import { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const STATUSES = [
+  { value: 'processing', label: 'Processing', tone: 'accent' },
+  { value: 'shipped', label: 'Shipped', tone: 'success' },
+  { value: 'on-hold', label: 'On hold', tone: 'warning' },
+] as const;
+
+const ORDERS = [
+  { id: 'SO-1182', customer: 'Contoso Foods', status: 'processing' },
+  { id: 'SO-1183', customer: 'Fabrikam Grocers', status: 'shipped' },
+  { id: 'SO-1184', customer: 'Tailspin Market', status: 'on-hold' },
+  { id: 'SO-1185', customer: 'Adventure Works', status: 'processing' },
+  { id: 'SO-1186', customer: 'Litware Deli', status: 'shipped' },
+] as const;
+
+@Component({
+  selector: 'app-drawer-inline',
+  imports: [
+    SlBadge,
+    SlButton,
+    SlCheckbox,
+    SlCheckboxGroup,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerTrigger,
+    SlFieldGroup,
+    SlFieldGroupLegend,
+    SlInline,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <div slStack [gap]="3">
+      <div slInline>
+        <button slButton size="sm" tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+          Filters
+        </button>
+      </div>
+      <div
+        style="
+          display: flex;
+          flex-wrap: wrap;
+          min-block-size: 16rem;
+          border: 1px solid var(--slotted-border-subtle);
+          border-radius: var(--slotted-radius-lg);
+          overflow: hidden;
+        "
+      >
+        <sl-drawer #drawer="slDrawer" mode="inline" side="start" size="sm" [(open)]="open">
+          <div slDrawerBody>
+            <fieldset slFieldGroup>
+              <legend slFieldGroupLegend>Status</legend>
+              <div slCheckboxGroup [value]="statuses()" (valueChange)="statuses.set($event.value)">
+                @for (status of options; track status.value) {
+                  <div slCheckbox [value]="status.value">{{ status.label }}</div>
+                }
+              </div>
+            </fieldset>
+          </div>
+        </sl-drawer>
+        <div slStack [gap]="3" style="flex: 1 1 12rem; padding: var(--slotted-space-6)">
+          <span slText size="sm" tone="muted">{{ shown().length }} of {{ total }} orders</span>
+          @for (order of shown(); track order.id) {
+            <div slInline align="center" [gap]="3" justify="between">
+              <div slStack [gap]="0">
+                <span slText size="sm" weight="semibold">{{ order.id }}</span>
+                <span slText size="sm" tone="muted">{{ order.customer }}</span>
+              </div>
+              <span slBadge [tone]="statusOf(order.status).tone">
+                {{ statusOf(order.status).label }}
+              </span>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class DrawerInline {
+  readonly options = STATUSES;
+  readonly total = ORDERS.length;
+  readonly open = signal(true);
+  readonly statuses = signal<readonly string[]>(['processing', 'on-hold']);
+  readonly shown = computed(() => ORDERS.filter((order) => this.statuses().includes(order.status)));
+
+  statusOf(value: string) {
+    return STATUSES.find((item) => item.value === value)!;
+  }
+}
+```
+
+### long-content.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerFooter,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const EVENTS = [
+  { at: 'Oct 6, 7:42 AM', what: 'Out for delivery, Seattle, WA' },
+  { at: 'Oct 6, 5:10 AM', what: 'Arrived at the delivery facility, Seattle, WA' },
+  { at: 'Oct 5, 11:58 PM', what: 'Departed facility, Portland, OR' },
+  { at: 'Oct 5, 9:20 PM', what: 'Arrived at facility, Portland, OR' },
+  { at: 'Oct 5, 2:04 PM', what: 'Departed facility, Medford, OR' },
+  { at: 'Oct 5, 10:37 AM', what: 'Arrived at facility, Medford, OR' },
+  { at: 'Oct 4, 11:15 PM', what: 'Departed facility, Sacramento, CA' },
+  { at: 'Oct 4, 6:48 PM', what: 'Arrived at facility, Sacramento, CA' },
+  { at: 'Oct 4, 1:30 PM', what: 'Departed facility, Reno, NV' },
+  { at: 'Oct 4, 9:02 AM', what: 'Processed at the origin facility, Reno, NV' },
+  { at: 'Oct 3, 6:15 PM', what: 'Picked up from the Northwind warehouse, Reno, NV' },
+  { at: 'Oct 3, 4:40 PM', what: 'Weighed and labelled: 3 packages, 18.4 kg' },
+  { at: 'Oct 3, 2:12 PM', what: 'Packed at station 4, Reno, NV' },
+  { at: 'Oct 3, 11:05 AM', what: 'Picked from aisles 12, 14 and 21' },
+  { at: 'Oct 2, 4:55 PM', what: 'Released to the warehouse' },
+  { at: 'Oct 2, 4:31 PM', what: 'Payment captured, card ending 4242' },
+];
+
+@Component({
+  selector: 'app-drawer-long-content',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerFooter,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+      Tracking history
+    </button>
+    <sl-drawer #drawer="slDrawer" [(open)]="open">
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Tracking 1Z999AA10123456784</h2>
+        <p slDrawerDescription>Shipment SH-4471, 16 events since 2 October.</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div slStack [gap]="4">
+          @for (event of events; track event.at) {
+            <div slStack [gap]="0">
+              <span slText size="sm" tone="muted">{{ event.at }}</span>
+              <span slText size="sm">{{ event.what }}</span>
+            </div>
+          }
+        </div>
+      </div>
+      <footer slDrawerFooter>
+        <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">Close</button>
+        <button slButton>Email to customer</button>
+      </footer>
+    </sl-drawer>
+  `,
+})
+export class DrawerLongContent {
+  readonly events = EVENTS;
+  readonly open = signal(false);
+}
+```
+
+### non-modal.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+const RATES = [
+  { term: 'UPS Ground', value: '$38.40, 3 business days' },
+  { term: 'FedEx Home Delivery', value: '$41.15, 3 business days' },
+  { term: 'UPS 2nd Day Air', value: '$96.80, 2 business days' },
+  { term: 'FedEx Priority Overnight', value: '$184.25, next business day' },
+];
+
+@Component({
+  selector: 'app-drawer-non-modal',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlField,
+    SlFieldDescription,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slStack [gap]="4">
+      <div slField>
+        <label slFieldLabel>Shipping charge</label>
+        <div slTextField>
+          <input slTextFieldInput inputmode="decimal" placeholder="0.00" />
+        </div>
+        <span slFieldDescription>Charged to Contoso Foods on invoice INV-2041.</span>
+      </div>
+      <div slInline>
+        <button slButton size="sm" tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+          Show carrier rates
+        </button>
+      </div>
+      <sl-drawer #drawer="slDrawer" [modal]="false" outsidePress="none" [scrimFrom]="1" size="sm">
+        <header slDrawerHeader>
+          <h2 slDrawerTitle>Carrier rates</h2>
+          <p slDrawerDescription>3 packages, 18.4 kg, Reno to Seattle.</p>
+          <button slDrawerClose></button>
+        </header>
+        <div slDrawerBody>
+          <div slDescriptionList>
+            @for (rate of rates; track rate.term) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ rate.term }}</dt>
+                <dd slDescriptionListDescription>{{ rate.value }}</dd>
+              </div>
+            }
+          </div>
+        </div>
+      </sl-drawer>
+    </div>
+  `,
+})
+export class DrawerNonModal {
+  readonly rates = RATES;
+}
+```
+
+### pin.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerFooter,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextarea } from '@slotted/angular/textarea';
+
+const DETAILS = [
+  { term: 'Customer', value: 'Contoso Foods, Seattle' },
+  { term: 'Items', value: '14 cases, 3 products' },
+  { term: 'Warehouse', value: 'Reno, NV' },
+];
+
+@Component({
+  selector: 'app-drawer-pin',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerFooter,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlField,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlTextarea,
+  ],
+  template: `
+    <div slStack [gap]="3">
+      <div slInline>
+        <button slButton size="sm" tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+          Notes
+        </button>
+      </div>
+      <div
+        style="
+          display: flex;
+          flex-wrap: wrap;
+          min-block-size: 18rem;
+          border: 1px solid var(--slotted-border-subtle);
+          border-radius: var(--slotted-radius-lg);
+          overflow: hidden;
+        "
+      >
+        <div style="flex: 1 1 12rem; padding: var(--slotted-space-6)">
+          <div slDescriptionList>
+            @for (detail of details; track detail.term) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ detail.term }}</dt>
+                <dd slDescriptionListDescription>{{ detail.value }}</dd>
+              </div>
+            }
+          </div>
+        </div>
+        <sl-drawer
+          #drawer="slDrawer"
+          size="sm"
+          [mode]="pinned() ? 'inline' : 'overlay'"
+          [(open)]="open"
+        >
+          <header slDrawerHeader>
+            <h2 slDrawerTitle>Notes on SO-1182</h2>
+            <button slDrawerClose></button>
+          </header>
+          <div slDrawerBody>
+            <div slField>
+              <label slFieldLabel>Note for the warehouse</label>
+              <textarea
+                slTextarea
+                placeholder="Pallet height, dock number, contact on site"
+              ></textarea>
+            </div>
+          </div>
+          <footer slDrawerFooter>
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              (click)="pinned.set(!pinned())"
+            >
+              {{ pinned() ? 'Unpin' : 'Pin beside the order' }}
+            </button>
+          </footer>
+        </sl-drawer>
+      </div>
+    </div>
+  `,
+})
+export class DrawerPin {
+  readonly details = DETAILS;
+  readonly open = signal(false);
+  readonly pinned = signal(false);
+}
+```
+
+### sides.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+const SIDES = [
+  {
+    side: 'start',
+    label: 'Start',
+    title: 'Warehouses',
+    body: 'Reno, Columbus and Savannah. A panel from the start edge suits navigation between sites.',
+  },
+  {
+    side: 'end',
+    label: 'End',
+    title: 'Order SO-1182',
+    body: 'Contoso Foods, 14 cases. The end edge is the default and suits the details of a row.',
+  },
+  {
+    side: 'top',
+    label: 'Top',
+    title: 'Carrier notice',
+    body: 'UPS pickups from Reno run two hours late today. A panel from the top suits a notice that belongs to the whole screen.',
+  },
+  {
+    side: 'bottom',
+    label: 'Bottom',
+    title: '3 orders selected',
+    body: 'SO-1182, SO-1183 and SO-1184. A sheet from the bottom suits actions on a phone, within reach of the thumb.',
+  },
+] as const;
+
+@Component({
+  selector: 'app-drawer-sides',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlInline,
+    SlText,
+  ],
+  template: `
+    <div slInline [gap]="2">
+      @for (item of sides; track item.side) {
+        <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+          {{ item.label }}
+        </button>
+        <sl-drawer #drawer="slDrawer" [side]="item.side">
+          <header slDrawerHeader>
+            <h2 slDrawerTitle>{{ item.title }}</h2>
+            <button slDrawerClose></button>
+          </header>
+          <div slDrawerBody>
+            <span slText size="sm">{{ item.body }}</span>
+          </div>
+        </sl-drawer>
+      }
+    </div>
+  `,
+})
+export class DrawerSides {
+  readonly sides = SIDES;
+}
+```
+
+### sizes.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+const SIZES = [
+  { size: 'sm', body: '18rem. One field or a short list, such as the carrier for a shipment.' },
+  { size: 'md', body: '24rem, the default. The details of an order or a short form.' },
+  { size: 'lg', body: '30rem. A record with a table of lines, such as the items of an order.' },
+  { size: 'xl', body: '40rem. Two columns, such as a customer and their open orders.' },
+  { size: 'full', body: 'The whole screen. A task that needs every column, such as a pick list.' },
+] as const;
+
+@Component({
+  selector: 'app-drawer-sizes',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlInline,
+    SlText,
+  ],
+  template: `
+    <div slInline [gap]="2">
+      @for (item of sizes; track item.size) {
+        <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+          {{ item.size }}
+        </button>
+        <sl-drawer #drawer="slDrawer" [size]="item.size">
+          <header slDrawerHeader>
+            <h2 slDrawerTitle>Shipment SH-4471</h2>
+            <button slDrawerClose></button>
+          </header>
+          <div slDrawerBody>
+            <span slText size="sm">{{ item.body }}</span>
+          </div>
+        </sl-drawer>
+      }
+    </div>
+  `,
+})
+export class DrawerSizes {
+  readonly sizes = SIZES;
+}
+```
+
+### snap-points.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerHeader,
+  SlDrawerResizer,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const SHIPMENTS = [
+  { id: 'SH-4471', to: 'Contoso Foods, Seattle', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4472', to: 'Fabrikam Grocers, Portland', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4473', to: 'Tailspin Market, Boise', status: 'Delayed', tone: 'warning' },
+  { id: 'SH-4474', to: 'Adventure Works, Denver', status: 'In transit', tone: 'accent' },
+  {
+    id: 'SH-4475',
+    to: 'Litware Deli, Salt Lake City',
+    status: 'Out for delivery',
+    tone: 'success',
+  },
+  { id: 'SH-4476', to: 'Proseware Cafe, Spokane', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4477', to: 'Wingtip Bakery, Eugene', status: 'Delayed', tone: 'warning' },
+  { id: 'SH-4478', to: 'Coho Winery, Walla Walla', status: 'Out for delivery', tone: 'success' },
+  { id: 'SH-4479', to: 'Northwind Outlet, Reno', status: 'In transit', tone: 'accent' },
+  { id: 'SH-4480', to: 'Fourth Coffee, Tacoma', status: 'In transit', tone: 'accent' },
+] as const;
+
+@Component({
+  selector: 'app-drawer-snap-points',
+  imports: [
+    SlBadge,
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerHeader,
+    SlDrawerResizer,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlInline,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+      Shipments in transit
+    </button>
+    <sl-drawer #drawer="slDrawer" side="bottom" [snapPoints]="[0.4, 0.9]" [(extent)]="extent">
+      <div slDrawerResizer></div>
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Shipments in transit</h2>
+        <p slDrawerDescription>10 shipments left the Reno warehouse this week.</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div slStack [gap]="3">
+          @for (shipment of shipments; track shipment.id) {
+            <div slInline align="center" [gap]="3" justify="between">
+              <div slStack [gap]="0">
+                <span slText size="sm" weight="semibold">{{ shipment.id }}</span>
+                <span slText size="sm" tone="muted">{{ shipment.to }}</span>
+              </div>
+              <span slBadge [tone]="shipment.tone">{{ shipment.status }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    </sl-drawer>
+  `,
+})
+export class DrawerSnapPoints {
+  readonly shipments = SHIPMENTS;
+  readonly extent = signal<number | undefined>(0.4);
+}
+```
+
+### unsaved-changes.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDrawer,
+  SlDrawerBody,
+  SlDrawerClose,
+  SlDrawerDescription,
+  SlDrawerFooter,
+  SlDrawerHeader,
+  SlDrawerTitle,
+  SlDrawerTrigger,
+} from '@slotted/angular/drawer';
+import type { DrawerChangeRequest } from '@slotted/angular/drawer';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInlineMessage } from '@slotted/angular/inline-message';
+import { SlTextarea } from '@slotted/angular/textarea';
+
+@Component({
+  selector: 'app-drawer-unsaved-changes',
+  imports: [
+    SlButton,
+    SlDrawer,
+    SlDrawerBody,
+    SlDrawerClose,
+    SlDrawerDescription,
+    SlDrawerFooter,
+    SlDrawerHeader,
+    SlDrawerTitle,
+    SlDrawerTrigger,
+    SlField,
+    SlFieldLabel,
+    SlInlineMessage,
+    SlTextarea,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDrawerTrigger]="drawer">
+      Delivery instructions
+    </button>
+    <sl-drawer #drawer="slDrawer" [(open)]="open" (openChangeRequest)="guard($event)">
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>Delivery instructions</h2>
+        <p slDrawerDescription>Order SO-1182, printed on the packing slip.</p>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div slField>
+          <label slFieldLabel>Instructions for the carrier</label>
+          <textarea slTextarea [value]="draft()" (valueChange)="edit($event.value)"></textarea>
+        </div>
+      </div>
+      <footer slDrawerFooter>
+        @if (confirming()) {
+          <p slInlineMessage live="polite" tone="warning">
+            Discard your changes to the instructions?
+          </p>
+          <button slButton variant="ghost" tone="secondary" (click)="confirming.set(false)">
+            Keep editing
+          </button>
+          <button slButton tone="danger" (click)="close()">Discard</button>
+        } @else {
+          <button slButton variant="ghost" tone="secondary" (click)="cancel()">Cancel</button>
+          <button slButton (click)="save()">Save</button>
+        }
+      </footer>
+    </sl-drawer>
+  `,
+})
+export class DrawerUnsavedChanges {
+  readonly open = signal(false);
+  readonly saved = signal('Leave at the loading dock, door 3.');
+  readonly draft = signal(this.saved());
+  readonly confirming = signal(false);
+
+  guard(request: DrawerChangeRequest): void {
+    if (request.value) {
+      this.draft.set(this.saved());
+      this.confirming.set(false);
+    } else if (this.draft() !== this.saved()) {
+      request.cancel();
+      this.confirming.set(true);
+    }
+  }
+
+  edit(value: string): void {
+    this.draft.set(value);
+    this.confirming.set(false);
+  }
+
+  cancel(): void {
+    if (this.draft() === this.saved()) this.close();
+    else this.confirming.set(true);
+  }
+
+  save(): void {
+    this.saved.set(this.draft());
+    this.close();
+  }
+
+  close(): void {
+    this.confirming.set(false);
+    this.open.set(false);
+  }
+}
+```