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

package/docs/dialog.examples.md

@@ -0,0 +1,2467 @@
+<!-- index: ./index.md -->
+# dialog
+
+`data-ui="dialog"` · Modal dialog and alert dialog.
+
+## Examples
+
+### Playground
+
+A layer opened inside the scene rather than over the page. Press the trigger, then Tab: focus is contained, Escape closes, and focus returns to the button it came from.
+
+Excerpt — not a complete module
+
+```html
+<button slButton [slDialogTrigger]="d">Edit project</button>
+<sl-dialog #d="slDialog" [(open)]="open">
+  <header slDialogHeader>
+    <h2 slDialogTitle>Edit project</h2>
+    <p slDialogDescription>The name is visible to the whole space.</p>
+    <button slDialogClose></button>
+  </header>
+  <div slDialogBody>
+    <input slTextField aria-label="Name" value="Home page redesign" />
+  </div>
+  <footer slDialogFooter>
+    <button slButton variant="ghost" tone="secondary">Cancel</button>
+    <button slButton>Save</button>
+  </footer>
+</sl-dialog>
+```
+
+### How wide the panel is allowed to be
+
+Five named steps rather than a pixel string, because a theme can retune a step and cannot retune width: 600px. full spends the whole layer minus its padding, for a dialog that is a document.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+  type DialogSize,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+const SIZES: { size: DialogSize; title: string; body: string }[] = [
+  {
+    size: 'sm',
+    title: 'Rename warehouse',
+    body: 'Small, 24rem: one field or one question.',
+  },
+  {
+    size: 'md',
+    title: 'Edit customer',
+    body: 'Medium, 32rem, the default: a short form of one column.',
+  },
+  {
+    size: 'lg',
+    title: 'Invoice INV-2041',
+    body: 'Large, 42rem: a record with a table of line items.',
+  },
+  {
+    size: 'xl',
+    title: 'Compare price lists',
+    body: 'Extra large, 56rem: two columns side by side.',
+  },
+  {
+    size: 'full',
+    title: 'Shipment manifest',
+    body: 'Full: the whole layer less its padding, for a document.',
+  },
+];
+
+@Component({
+  selector: 'app-dialog-sizes',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlText,
+  ],
+  template: `
+    <div slInline [gap]="2">
+      @for (option of sizes; track option.size) {
+        <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+          {{ option.size }}
+        </button>
+        <sl-dialog #dialog="slDialog" [size]="option.size">
+          <header slDialogHeader>
+            <h2 slDialogTitle>{{ option.title }}</h2>
+            <button slDialogClose></button>
+          </header>
+          <div slDialogBody>
+            <span slText size="sm">{{ option.body }}</span>
+          </div>
+        </sl-dialog>
+      }
+    </div>
+  `,
+})
+export class DialogSizes {
+  readonly sizes = SIZES;
+}
+```
+
+### Where the panel sits in the layer
+
+center is right for a panel whose height is settled; top is right for one that grows as the reader types, because a centred panel moves under the cursor every time a line is added.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlTextarea } from '@slotted/angular/textarea';
+
+@Component({
+  selector: 'app-dialog-placement',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldLabel,
+    SlTextarea,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+      Add a note
+    </button>
+    <sl-dialog #dialog="slDialog" placement="top" [(open)]="open">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Note on order SO-1182</h2>
+        <p slDialogDescription>The warehouse team sees the note on the pick list.</p>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slField>
+          <label slFieldLabel>Note</label>
+          <textarea
+            slTextarea
+            [rows]="3"
+            [maxRows]="12"
+            placeholder="Leave at the loading dock after 2 pm."
+          ></textarea>
+        </div>
+      </div>
+      <footer slDialogFooter>
+        <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">Cancel</button>
+        <button slButton (click)="open.set(false)">Add note</button>
+      </footer>
+    </sl-dialog>
+  `,
+})
+export class DialogPlacement {
+  readonly open = signal(false);
+}
+```
+
+### What scrolls when the content is long
+
+content bounds the panel to the layer and scrolls the body, so the actions stay on screen; viewport scrolls the whole panel, for content that is read rather than acted on. Radix and React Aria ship neither, and a footer past the fold is the default of following their examples.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const ITEMS = Array.from({ length: 24 }, (_, index) => ({
+  sku: `NW-${String(4100 + index * 7)}`,
+  name: [
+    'Chai, 10 boxes',
+    'Aniseed syrup, 12 bottles',
+    'Cajun seasoning, 48 jars',
+    'Olive oil, 36 bottles',
+    'Dried pears, 12 packs',
+    'Curry sauce, 12 jars',
+  ][index % 6],
+}));
+
+const TERMS = [
+  'Prices are in US dollars and exclude sales tax, which is added at the rate of the delivery address.',
+  'Payment is due 30 days from the invoice date. Balances unpaid after 45 days accrue interest at 1% a month.',
+  'Goods travel at the risk of Northwind Traders until they are signed for at the delivery address.',
+  'Damaged goods are reported within 5 business days of delivery, with photos of the packaging and the label.',
+  'Returns of undamaged goods are accepted within 30 days and are refunded less a 10% restocking fee.',
+  'Orders above $5,000 may be split into several shipments, each invoiced when it leaves the warehouse.',
+  'Either party may end a standing order with 14 days of written notice; shipments already picked are invoiced.',
+  'These terms are governed by the law of the State of Washington.',
+];
+
+@Component({
+  selector: 'app-dialog-scroll',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <div slInline [gap]="2">
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="items">
+        Review 24 line items
+      </button>
+      <sl-dialog #items="slDialog" [(open)]="open">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Purchase order PO-7730</h2>
+          <p slDialogDescription>Only the list scrolls; the actions stay in view.</p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <div slStack [gap]="2">
+            @for (item of lineItems; track item.sku) {
+              <div slInline [gap]="3" justify="between">
+                <span slText size="sm">{{ item.name }}</span>
+                <span slText size="sm" tone="muted">{{ item.sku }}</span>
+              </div>
+            }
+          </div>
+        </div>
+        <footer slDialogFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+            Cancel
+          </button>
+          <button slButton (click)="open.set(false)">Approve order</button>
+        </footer>
+      </sl-dialog>
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="terms">
+        Read the terms of sale
+      </button>
+      <sl-dialog #terms="slDialog" scroll="viewport">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Terms of sale</h2>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <div slStack [gap]="4">
+            @for (term of termsOfSale; track term) {
+              <span slText>{{ term }}</span>
+            }
+          </div>
+        </div>
+      </sl-dialog>
+    </div>
+  `,
+})
+export class DialogScroll {
+  readonly open = signal(false);
+  readonly lineItems = ITEMS;
+  readonly termsOfSale = TERMS;
+}
+```
+
+### The layer, around a box you painted
+
+surface="plain" turns the family’s own paint off — no ground, no border, no radius, no shadow, no rows — and keeps the portal, the scrim, the containment and the dismissal policy. It is what a headless library ships by default, offered here as an axis rather than as the only shape.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog surface="plain" [(open)]="open">
+  <div slCard fill="elevated">
+    <h2 slDialogTitle>A card, inside the layer</h2>
+    <p slDialogDescription>The family paints nothing here.</p>
+  </div>
+</sl-dialog>
+```
+
+### Taking the whole layer on a narrow one
+
+A container query at a literal breakpoint, not a viewport query: the layer answers its own inline size, so a dialog inside a named portal container is as narrow as that container rather than as the window.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog fullScreen="always" [(open)]="open">…</sl-dialog>
+```
+
+### A layer 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 dialog modal without doing all four has severe consequences for the readers who rely on the mark.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog [modal]="false" [(open)]="open">…</sl-dialog>
+```
+
+### Refusing a close, and refusing it once
+
+Six ways to close and one request. A guard on onOpenChange covers Escape, an outside press, the close button and the imperative handle together; Radix reports the same policy through four callbacks.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog [(open)]="open" (openChangeRequest)="refuseWhileSaving($event)">…</sl-dialog>
+```
+
+### Where focus goes, and where it comes back to
+
+By default the first tabbable element, and the trigger again on close. initialFocus names another element — a search input, or the panel itself for content that has to be read before it is operated, which is the APG’s own note.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog [initialFocus]="email" [(open)]="open">
+  <div slDialogBody>
+    <input #email slTextField aria-label="Email" />
+  </div>
+</sl-dialog>
+```
+
+### 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 and Escape all stay operable: a loading dialog 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 {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlSkeleton, SlSkeletonRegion } from '@slotted/angular/skeleton';
+
+interface Invoice {
+  customer: string;
+  issued: string;
+  due: string;
+  amount: string;
+}
+
+const FIELDS: { key: keyof Invoice; term: string; width: string }[] = [
+  { key: 'customer', term: 'Customer', width: '9rem' },
+  { key: 'issued', term: 'Issued', width: '6rem' },
+  { key: 'due', term: 'Due', width: '6rem' },
+  { key: 'amount', term: 'Amount', width: '5rem' },
+];
+
+@Component({
+  selector: 'app-dialog-loading',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlSkeleton,
+    SlSkeletonRegion,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+      View invoice INV-2041
+    </button>
+    <sl-dialog #dialog="slDialog" [loading]="invoice() === null" [(open)]="open">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Invoice INV-2041</h2>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div
+          slSkeletonRegion
+          [delay]="200"
+          [loading]="invoice() === null"
+          [messages]="{ label: 'Loading invoice' }"
+        >
+          <div slDescriptionList>
+            @for (field of fields; track field.key) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ field.term }}</dt>
+                <dd slDescriptionListDescription>
+                  @if (invoice(); as loaded) {
+                    {{ loaded[field.key] }}
+                  } @else {
+                    <span slSkeleton [inlineSize]="field.width"></span>
+                  }
+                </dd>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </sl-dialog>
+  `,
+})
+export class DialogLoading {
+  readonly fields = FIELDS;
+  readonly open = signal(false);
+  readonly invoice = signal<Invoice | null>(null);
+
+  constructor() {
+    effect((onCleanup) => {
+      if (!this.open()) return;
+      this.invoice.set(null);
+      const timer = setTimeout(
+        () =>
+          this.invoice.set({
+            customer: 'Northwind Traders',
+            issued: '12 August 2026',
+            due: '11 September 2026',
+            amount: '$1,240.00',
+          }),
+        1200,
+      );
+      onCleanup(() => clearTimeout(timer));
+    });
+  }
+}
+```
+
+### A layer opened from a layer
+
+Escape reaches the topmost one only, and a layer that refuses stops the request reaching the one beneath it. The depth comes from the single stack dismissable-layer keeps, so nothing here states a z-index.
+
+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 {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';
+
+const CARRIERS = [
+  { value: 'ups', label: 'UPS Ground' },
+  { value: 'fedex', label: 'FedEx Ground' },
+  { value: 'usps', label: 'USPS Priority Mail' },
+];
+
+@Component({
+  selector: 'app-dialog-nested',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldLabel,
+    SlSelect,
+    SlSelectItem,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="order">
+      Open order SO-1182
+    </button>
+    <sl-dialog #order="slDialog">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Order SO-1182</h2>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slDescriptionList>
+          <div slDescriptionListItem>
+            <dt slDescriptionListTerm>Customer</dt>
+            <dd slDescriptionListDescription>Contoso Foods</dd>
+          </div>
+          <div slDescriptionListItem>
+            <dt slDescriptionListTerm>Carrier</dt>
+            <dd slDescriptionListDescription>{{ carrierLabel() }}</dd>
+          </div>
+        </div>
+      </div>
+      <footer slDialogFooter>
+        <button slButton tone="secondary" variant="outline" [slDialogTrigger]="change">
+          Change carrier
+        </button>
+        <sl-dialog #change="slDialog" size="sm" [open]="changing()" (openChange)="toggle($event)">
+          <header slDialogHeader>
+            <h2 slDialogTitle>Change carrier</h2>
+            <button slDialogClose></button>
+          </header>
+          <div slDialogBody>
+            <div slField>
+              <label slFieldLabel>Carrier</label>
+              <sl-select [items]="carriers" [(value)]="draft">
+                @for (option of carriers; track option.value) {
+                  <sl-select-item [value]="option.value">{{ option.label }}</sl-select-item>
+                }
+              </sl-select>
+            </div>
+          </div>
+          <footer slDialogFooter>
+            <button slButton variant="ghost" tone="secondary" (click)="changing.set(false)">
+              Cancel
+            </button>
+            <button slButton (click)="use()">Use carrier</button>
+          </footer>
+        </sl-dialog>
+      </footer>
+    </sl-dialog>
+  `,
+})
+export class DialogNested {
+  readonly carriers = CARRIERS;
+  readonly carrier = signal<SelectSelection>('ups');
+  readonly draft = signal<SelectSelection>('ups');
+  readonly changing = signal(false);
+  readonly carrierLabel = computed(
+    () => CARRIERS.find((option) => option.value === this.carrier())?.label,
+  );
+
+  toggle(next: boolean): void {
+    if (next) this.draft.set(this.carrier());
+    this.changing.set(next);
+  }
+
+  use(): void {
+    this.carrier.set(this.draft());
+    this.changing.set(false);
+  }
+}
+```
+
+### Content the family did not choose
+
+A ninety-character unbroken token in the title would widen a centred panel past both edges of the layer at once; overflow-wrap and a zero minimum are the pair that answer it. Long German and right-to-left strings are in the same scene.
+
+Excerpt — not a complete module
+
+```html
+<h2 slDialogTitle>deployment-pipeline-eu-west-1-production-rollback-2026-09-04T01</h2>
+```
+
+### Replacing a part, and reaching the instance
+
+render substitutes the element of every part, which is how the trigger becomes a Button. The ref on Dialog is a handle with open, close and focus — the three actions a consumer cannot express declaratively.
+
+Excerpt — not a complete module
+
+```html
+<button slButton variant="outline" [slDialogTrigger]="d">Edit project</button>
+```
+
+### Deciding once for the application
+
+Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  provideDialogDefaults,
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-dialog-defaults',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlText,
+  ],
+  providers: [provideDialogDefaults({ placement: 'top', size: 'lg' })],
+  template: `
+    <div slInline [gap]="2">
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="order">
+        Purchase order PO-7730
+      </button>
+      <sl-dialog #order="slDialog">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Purchase order PO-7730</h2>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <span slText size="sm">Large and at the top, from the provider.</span>
+        </div>
+      </sl-dialog>
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="rename">
+        Rename supplier
+      </button>
+      <sl-dialog #rename="slDialog" size="sm">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Rename supplier</h2>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <span slText size="sm">At the top from the provider, and small because it says so.</span>
+        </div>
+      </sl-dialog>
+    </div>
+  `,
+})
+export class DialogDefaults {}
+```
+
+### The pattern’s table, and what it costs
+
+Tab and Shift+Tab wrap inside the layer, Escape closes the topmost one, and the background is inert to the pointer and to the accessibility tree at once. All three are JavaScript here, because the platform’s dialog element is declined.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog [(open)]="open" (openChangeRequest)="report($event.reason, $event.result)">
+  …
+</sl-dialog>
+```
+
+### Playground
+
+A confirmation opened inside the scene. Focus lands on the least destructive action, an outside press does nothing at all, and Escape answers because a member with a cancel action can always cancel.
+
+Excerpt — not a complete module
+
+```html
+<button slButton tone="danger" variant="outline" [slDialogTrigger]="d">Delete project</button>
+<sl-alert-dialog #d="slAlertDialog" [(open)]="open">
+  <header slDialogHeader>
+    <span slAlertDialogIcon></span>
+    <h2 slDialogTitle>Delete this project?</h2>
+    <p slDialogDescription>
+      The project and its 42 documents leave for everyone. This cannot be undone.
+    </p>
+  </header>
+  <footer slDialogFooter>
+    <button slButton variant="outline" tone="secondary" slAlertDialogCancel>Keep project</button>
+    <button slButton tone="danger" slAlertDialogAction>Delete project</button>
+  </footer>
+</sl-alert-dialog>
+```
+
+### What kind of decision this is
+
+Each tone carries its own mark, so the register survives a reader who cannot tell the colours apart and forced colours, where every tone ground becomes one system colour and the silhouette is all that is left.
+
+Excerpt — not a complete module
+
+```html
+<sl-alert-dialog tone="warning" [(open)]="open">…</sl-alert-dialog>
+```
+
+### Two controls, each saying what it does
+
+Labels name the action rather than answering a question — “Excluir projeto”, not “Sim”. The action closes with submit and the cancel with dismiss, so a consumer reading the reason knows which one the reader chose.
+
+Excerpt — not a complete module
+
+```html
+<footer slDialogFooter>
+  <button slButton slAlertDialogCancel>Keep project</button>
+  <button slButton slAlertDialogAction value="deleted">Delete project</button>
+</footer>
+```
+
+### What can and cannot dismiss it
+
+An outside press never closes an alert dialog, whatever the consumer asks for. Ark and React Aria make the role a prop, so setting role="alertdialog" and forgetting the policy ships a destructive confirmation a stray click dismisses.
+
+Excerpt — not a complete module
+
+```html
+<sl-alert-dialog escape="none" [(open)]="open">…</sl-alert-dialog>
+```
+
+### The safest thing under the reader’s hands
+
+Focus lands on the cancel action rather than on the first tabbable element, which is what the APG advises for a step that is not easily reversible. It is a default of the member, not something a consumer remembers to set.
+
+Excerpt — not a complete module
+
+```html
+<sl-alert-dialog initialFocus="cancel" [(open)]="open">…</sl-alert-dialog>
+```
+
+### A confirmation that has more to say
+
+A body between the header and the actions holds the list of what is about to go. The description stays the one sentence aria-describedby announces, so the reader hears the consequence before the detail.
+
+Excerpt — not a complete module
+
+```html
+<header slDialogHeader>
+  <span slAlertDialogIcon></span>
+  <h2 slDialogTitle>Delete 3 documents?</h2>
+  <p slDialogDescription>This cannot be undone.</p>
+</header>
+```
+
+### The actions are the consumer’s own buttons
+
+render hands each control every attribute the family wrote, so the danger button is the library’s Button with the family’s behaviour on it — nothing is reimplemented and nothing is wrapped.
+
+Excerpt — not a complete module
+
+```html
+<button slButton tone="danger" slAlertDialogAction>Delete project</button>
+```
+
+### What the role changes, and what it does not
+
+role="alertdialog" and a mandatory aria-describedby are the two things the pattern adds; the keyboard is the modal dialog’s. The trigger still says aria-haspopup="dialog", because the property has no alertdialog token.
+
+Excerpt — not a complete module
+
+```html
+<p slDialogDescription>The project and its 42 documents leave for everyone.</p>
+```
+
+### alert-tones.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlAlertDialog,
+  SlAlertDialogAction,
+  SlAlertDialogCancel,
+  SlAlertDialogIcon,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+  type DialogTone,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+
+const CONFIRMATIONS: {
+  tone: DialogTone;
+  trigger: string;
+  title: string;
+  description: string;
+  action: string;
+}[] = [
+  {
+    tone: 'accent',
+    trigger: 'Send invoices',
+    title: 'Send 214 invoices?',
+    description: 'Each customer receives the September invoice by email within the hour.',
+    action: 'Send invoices',
+  },
+  {
+    tone: 'warning',
+    trigger: 'Publish prices',
+    title: 'Publish the new prices?',
+    description: 'Open quotes keep their prices; new orders use the new ones from now on.',
+    action: 'Publish prices',
+  },
+  {
+    tone: 'success',
+    trigger: 'Close September',
+    title: 'Close the books for September?',
+    description: 'All 1,180 entries reconcile. Entries dated September can no longer be edited.',
+    action: 'Close September',
+  },
+];
+
+@Component({
+  selector: 'app-dialog-alert-tones',
+  imports: [
+    SlAlertDialog,
+    SlAlertDialogAction,
+    SlAlertDialogCancel,
+    SlAlertDialogIcon,
+    SlButton,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+  ],
+  template: `
+    <div slInline [gap]="2">
+      @for (confirmation of confirmations; track confirmation.tone) {
+        <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+          {{ confirmation.trigger }}
+        </button>
+        <sl-alert-dialog #dialog="slAlertDialog" [tone]="confirmation.tone">
+          <header slDialogHeader>
+            <span slAlertDialogIcon></span>
+            <h2 slDialogTitle>{{ confirmation.title }}</h2>
+            <p slDialogDescription>{{ confirmation.description }}</p>
+          </header>
+          <footer slDialogFooter>
+            <button slButton slAlertDialogCancel tone="secondary" variant="outline">Not now</button>
+            <button slButton slAlertDialogAction [tone]="confirmation.tone">
+              {{ confirmation.action }}
+            </button>
+          </footer>
+        </sl-alert-dialog>
+      }
+    </div>
+  `,
+})
+export class DialogAlertTones {
+  readonly confirmations = CONFIRMATIONS;
+}
+```
+
+### async-submit.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+  type DialogChangeRequest,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-dialog-async-submit',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+        Refund order SO-1182
+      </button>
+      <sl-dialog #dialog="slDialog" [(open)]="open" (openChangeRequest)="guard($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Refund $1,240.00</h2>
+          <p slDialogDescription>To the card ending 4242, for order SO-1182.</p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <span slText size="sm">
+            The payment provider takes a moment to confirm. The dialog stays open until it does.
+          </span>
+        </div>
+        <footer slDialogFooter>
+          <button
+            slButton
+            variant="ghost"
+            tone="secondary"
+            [disabled]="saving()"
+            (click)="open.set(false)"
+          >
+            Cancel
+          </button>
+          <button
+            slButton
+            [loading]="saving()"
+            [messages]="{ loading: 'Issuing refund' }"
+            (click)="refund()"
+          >
+            Issue refund
+          </button>
+        </footer>
+      </sl-dialog>
+      @if (sent()) {
+        <span slText role="status" size="sm" tone="muted">Refund issued.</span>
+      }
+    </div>
+  `,
+})
+export class DialogAsyncSubmit {
+  readonly open = signal(false);
+  readonly saving = signal(false);
+  readonly sent = signal(false);
+
+  guard(request: DialogChangeRequest): void {
+    if (!request.value && this.saving()) request.cancel();
+    if (request.value) this.sent.set(false);
+  }
+
+  refund(): void {
+    this.saving.set(true);
+    setTimeout(() => {
+      this.saving.set(false);
+      this.sent.set(true);
+      this.open.set(false);
+    }, 1500);
+  }
+}
+```
+
+### bulk-edit.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSelect,
+  SlTableSelectAll,
+} from '@slotted/angular/table';
+import { SlText } from '@slotted/angular/typography';
+
+const STATUSES = [
+  { value: 'processing', label: 'Processing', tone: 'accent' },
+  { value: 'hold', label: 'On hold', tone: 'warning' },
+  { value: 'ready', label: 'Ready to ship', tone: 'success' },
+] as const;
+
+const WAREHOUSES = [
+  { value: 'RNO', label: 'Reno, NV' },
+  { value: 'CMH', label: 'Columbus, OH' },
+  { value: 'SAV', label: 'Savannah, GA' },
+];
+
+type Status = (typeof STATUSES)[number]['value'];
+
+const INITIAL: { id: string; customer: string; status: Status; warehouse: string }[] = [
+  { id: 'SO-1182', customer: 'Contoso Foods', status: 'processing', warehouse: 'RNO' },
+  { id: 'SO-1183', customer: 'Fabrikam Grocers', status: 'processing', warehouse: 'CMH' },
+  { id: 'SO-1184', customer: 'Tailspin Market', status: 'hold', warehouse: 'RNO' },
+  { id: 'SO-1185', customer: 'Woodgrove Deli', status: 'processing', warehouse: 'SAV' },
+];
+
+@Component({
+  selector: 'app-dialog-bulk-edit',
+  imports: [
+    SlBadge,
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldLabel,
+    SlInline,
+    SlSelect,
+    SlSelectItem,
+    SlStack,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSelect,
+    SlTableSelectAll,
+    SlText,
+  ],
+  template: `
+    <div slStack [gap]="3">
+      <div slInline align="center" [gap]="3">
+        <span slText size="sm" tone="muted">
+          {{ count() === 0 ? 'Select orders to edit them together.' : count() + ' selected' }}
+        </span>
+        <button
+          slButton
+          focusableWhenDisabled
+          size="sm"
+          tone="secondary"
+          variant="outline"
+          [disabled]="count() === 0"
+          [slDialogTrigger]="dialog"
+        >
+          Edit selected
+        </button>
+        <sl-dialog #dialog="slDialog" [open]="open()" (openChange)="toggle($event)">
+          <header slDialogHeader>
+            <h2 slDialogTitle>Edit {{ editing().length }} {{ noun() }}</h2>
+            <p slDialogDescription>{{ editing().join(', ') }}</p>
+            <button slDialogClose></button>
+          </header>
+          <div slDialogBody>
+            <div slStack [gap]="4">
+              <div slField>
+                <label slFieldLabel>Status</label>
+                <sl-select [items]="statuses" [(value)]="status">
+                  @for (option of statuses; track option.value) {
+                    <sl-select-item [value]="option.value">{{ option.label }}</sl-select-item>
+                  }
+                </sl-select>
+              </div>
+              <div slField>
+                <label slFieldLabel>Ships from</label>
+                <sl-select [items]="warehouses" [(value)]="warehouse">
+                  @for (option of warehouses; track option.value) {
+                    <sl-select-item [value]="option.value">{{ option.label }}</sl-select-item>
+                  }
+                </sl-select>
+              </div>
+            </div>
+          </div>
+          <footer slDialogFooter>
+            <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+              Cancel
+            </button>
+            <button slButton (click)="apply()">Update {{ editing().length }} {{ noun() }}</button>
+          </footer>
+        </sl-dialog>
+      </div>
+      <div slTable selectionMode="multiple" [columns]="5" [(value)]="chosen">
+        <div slTableContent>
+          <thead slTableHead>
+            <tr slTableRow>
+              <th slTableSelectAll></th>
+              <th slTableColumnHeader>Order</th>
+              <th slTableColumnHeader>Customer</th>
+              <th slTableColumnHeader>Status</th>
+              <th slTableColumnHeader>Ships from</th>
+            </tr>
+          </thead>
+          <tbody slTableBody>
+            @for (row of orders(); track row.id) {
+              <tr slTableRow [value]="row.id">
+                <td slTableSelect></td>
+                <th slTableRowHeader>{{ row.id }}</th>
+                <td slTableCell>{{ row.customer }}</td>
+                <td slTableCell>
+                  <span slBadge [tone]="statusOf(row.status).tone">
+                    {{ statusOf(row.status).label }}
+                  </span>
+                </td>
+                <td slTableCell>{{ warehouseOf(row.warehouse) }}</td>
+              </tr>
+            }
+          </tbody>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class DialogBulkEdit {
+  readonly statuses = STATUSES;
+  readonly warehouses = WAREHOUSES;
+  readonly orders = signal(INITIAL);
+  readonly chosen = signal<readonly string[]>([]);
+  readonly editing = signal<readonly string[]>([]);
+  readonly open = signal(false);
+  readonly status = signal<SelectSelection>('ready');
+  readonly warehouse = signal<SelectSelection>('RNO');
+  readonly count = computed(() => this.chosen().length);
+  readonly noun = computed(() => (this.editing().length === 1 ? 'order' : 'orders'));
+
+  statusOf(value: Status) {
+    return STATUSES.find((status) => status.value === value)!;
+  }
+
+  warehouseOf(value: string) {
+    return WAREHOUSES.find((option) => option.value === value)?.label;
+  }
+
+  toggle(next: boolean): void {
+    if (next) this.editing.set(this.chosen());
+    this.open.set(next);
+  }
+
+  apply(): void {
+    const editing = this.editing();
+    const status = this.status() as Status;
+    const warehouse = this.warehouse() as string;
+    this.orders.update((rows) =>
+      rows.map((row) => (editing.includes(row.id) ? { ...row, status, warehouse } : row)),
+    );
+    this.chosen.set([]);
+    this.open.set(false);
+  }
+}
+```
+
+### cancel-order.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlAlertDialog,
+  SlAlertDialogAction,
+  SlAlertDialogCancel,
+  SlAlertDialogIcon,
+  SlDialogBody,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';
+import { SlText } from '@slotted/angular/typography';
+
+const REASONS = [
+  { value: 'customer', label: 'The customer asked to cancel' },
+  { value: 'stock', label: 'Items are out of stock' },
+  { value: 'payment', label: 'The payment was flagged' },
+  { value: 'duplicate', label: 'Duplicate order' },
+];
+
+@Component({
+  selector: 'app-dialog-cancel-order',
+  imports: [
+    SlAlertDialog,
+    SlAlertDialogAction,
+    SlAlertDialogCancel,
+    SlAlertDialogIcon,
+    SlBadge,
+    SlButton,
+    SlDialogBody,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldLabel,
+    SlInline,
+    SlSelect,
+    SlSelectItem,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <span slText weight="medium">Order SO-1182</span>
+      <span slBadge [tone]="cancelled() ? 'danger' : 'accent'">
+        {{ cancelled() ? 'Cancelled' : 'Processing' }}
+      </span>
+      <button
+        slButton
+        focusableWhenDisabled
+        size="sm"
+        tone="danger"
+        variant="outline"
+        [disabled]="cancelled()"
+        [slDialogTrigger]="dialog"
+      >
+        Cancel order
+      </button>
+      <sl-alert-dialog #dialog="slAlertDialog" (openChange)="$event && reason.set(null)">
+        <header slDialogHeader>
+          <span slAlertDialogIcon></span>
+          <h2 slDialogTitle>Cancel order SO-1182?</h2>
+          <p slDialogDescription>
+            Contoso Foods is refunded $1,240.00 and the 6 items go back to stock. The order cannot
+            be reopened.
+          </p>
+        </header>
+        <div slDialogBody>
+          <div slField required>
+            <label slFieldLabel>Reason</label>
+            <sl-select placeholder="Choose a reason" [items]="reasons" [(value)]="reason">
+              @for (option of reasons; track option.value) {
+                <sl-select-item [value]="option.value">{{ option.label }}</sl-select-item>
+              }
+            </sl-select>
+          </div>
+        </div>
+        <footer slDialogFooter>
+          <button slButton slAlertDialogCancel tone="secondary" variant="outline">
+            Keep order
+          </button>
+          <button
+            slButton
+            slAlertDialogAction
+            tone="danger"
+            [disabled]="reason() === null"
+            (click)="cancelled.set(true)"
+          >
+            Cancel order
+          </button>
+        </footer>
+      </sl-alert-dialog>
+    </div>
+  `,
+})
+export class DialogCancelOrder {
+  readonly reasons = REASONS;
+  readonly cancelled = signal(false);
+  readonly reason = signal<SelectSelection>(null);
+}
+```
+
+### create-shipment.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+  type DialogChangeRequest,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlSelect, SlSelectItem, type SelectSelection } 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 CARRIERS = [
+  { value: 'ups', label: 'UPS Ground', description: '3–5 business days' },
+  { value: 'fedex', label: 'FedEx 2Day', description: '2 business days' },
+  { value: 'usps', label: 'USPS Priority Mail', description: '1–3 business days' },
+];
+
+function weightError(value: string): string {
+  if (value.trim() === '') return 'Enter the total weight of the packages.';
+  const weight = Number(value);
+  if (!Number.isFinite(weight) || weight <= 0) return 'Enter a weight above 0, such as 18.4.';
+  return '';
+}
+
+@Component({
+  selector: 'app-dialog-create-shipment',
+  imports: [
+    SlButton,
+    SlCheckbox,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldDescription,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlSelect,
+    SlSelectItem,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton [slDialogTrigger]="dialog">Create shipment</button>
+      <sl-dialog #dialog="slDialog" size="lg" [(open)]="open" (openChangeRequest)="guard($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Create a shipment</h2>
+          <p slDialogDescription>
+            Order SO-1182 for Contoso Foods: 6 items to 1200 Pike St, Seattle.
+          </p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <form id="create-shipment" novalidate (submit)="submit($event)">
+            <div slStack [gap]="5">
+              <div slField>
+                <label slFieldLabel>Carrier</label>
+                <sl-select name="carrier" [items]="carriers" [(value)]="carrier">
+                  @for (option of carriers; track option.value) {
+                    <sl-select-item [value]="option.value" [description]="option.description">
+                      {{ option.label }}
+                    </sl-select-item>
+                  }
+                </sl-select>
+              </div>
+              <div slField required [invalid]="error() !== '' ? true : undefined">
+                <label slFieldLabel>Weight in kilograms</label>
+                <span slFieldDescription>All packages together, as weighed at the dock.</span>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    inputmode="decimal"
+                    name="weight"
+                    [value]="weight()"
+                    (valueChange)="weight.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ error() }}</span>
+              </div>
+              <div slCheckbox defaultChecked name="notify">
+                Email the tracking number to the customer
+              </div>
+            </div>
+          </form>
+        </div>
+        <footer slDialogFooter>
+          <button
+            slButton
+            variant="ghost"
+            tone="secondary"
+            [disabled]="saving()"
+            (click)="open.set(false)"
+          >
+            Cancel
+          </button>
+          <button
+            slButton
+            form="create-shipment"
+            type="submit"
+            [loading]="saving()"
+            [messages]="{ loading: 'Creating shipment' }"
+          >
+            Create shipment
+          </button>
+        </footer>
+      </sl-dialog>
+      @if (created(); as message) {
+        <span slText role="status" size="sm" tone="muted">{{ message }}</span>
+      }
+    </div>
+  `,
+})
+export class DialogCreateShipment {
+  readonly carriers = CARRIERS;
+  readonly open = signal(false);
+  readonly carrier = signal<SelectSelection>('ups');
+  readonly weight = signal('');
+  readonly submitted = signal(false);
+  readonly saving = signal(false);
+  readonly created = signal<string | null>(null);
+  readonly error = computed(() => (this.submitted() ? weightError(this.weight()) : ''));
+
+  guard(request: DialogChangeRequest): void {
+    if (!request.value && this.saving()) {
+      request.cancel();
+      return;
+    }
+    if (request.value) {
+      this.weight.set('');
+      this.submitted.set(false);
+    }
+  }
+
+  submit(event: Event): void {
+    event.preventDefault();
+    this.submitted.set(true);
+    if (weightError(this.weight()) !== '') return;
+    this.saving.set(true);
+    setTimeout(() => {
+      const label = CARRIERS.find((option) => option.value === this.carrier())?.label;
+      this.saving.set(false);
+      this.created.set(`Shipment SH-4472 created with ${label}.`);
+      this.open.set(false);
+    }, 1200);
+  }
+}
+```
+
+### destructive.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlAlertDialog,
+  SlAlertDialogAction,
+  SlAlertDialogCancel,
+  SlAlertDialogIcon,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-dialog-destructive',
+  imports: [
+    SlAlertDialog,
+    SlAlertDialogAction,
+    SlAlertDialogCancel,
+    SlAlertDialogIcon,
+    SlButton,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton tone="danger" variant="outline" [slDialogTrigger]="dialog">
+        Delete price list
+      </button>
+      <sl-alert-dialog #dialog="slAlertDialog">
+        <header slDialogHeader>
+          <span slAlertDialogIcon></span>
+          <h2 slDialogTitle>Delete the 2026 wholesale price list?</h2>
+          <p slDialogDescription>
+            The 412 prices in it are removed, and 9 customers on this list move to retail prices.
+            This cannot be undone.
+          </p>
+        </header>
+        <footer slDialogFooter>
+          <button slButton slAlertDialogCancel tone="secondary" variant="outline">
+            Keep price list
+          </button>
+          <button slButton slAlertDialogAction tone="danger" (click)="deleted.set(true)">
+            Delete price list
+          </button>
+        </footer>
+      </sl-alert-dialog>
+      @if (deleted()) {
+        <span slText role="status" size="sm" tone="muted">
+          The 2026 wholesale price list was deleted.
+        </span>
+      }
+    </div>
+  `,
+})
+export class DialogDestructive {
+  readonly deleted = signal(false);
+}
+```
+
+### dismiss.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-dialog-dismiss',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlText,
+  ],
+  template: `
+    <button slButton [slDialogTrigger]="dialog">Import products</button>
+    <sl-dialog #dialog="slDialog" escape="none" outsidePress="none" [(open)]="open">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Import 1,240 products</h2>
+        <p slDialogDescription>From spring-catalogue.csv into the Northwind price list.</p>
+      </header>
+      <div slDialogBody>
+        <span slText size="sm">
+          38 rows update existing products and 1,202 add new ones. Escape and a press outside the
+          panel leave this dialog open; choose one of the actions.
+        </span>
+      </div>
+      <footer slDialogFooter>
+        <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+          Cancel import
+        </button>
+        <button slButton (click)="open.set(false)">Start import</button>
+      </footer>
+    </sl-dialog>
+  `,
+})
+export class DialogDismiss {
+  readonly open = signal(false);
+}
+```
+
+### form.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldError, 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';
+import { SlText } from '@slotted/angular/typography';
+
+function nameError(value: string): string {
+  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
+}
+
+function emailError(value: string): string {
+  if (value.trim() === '') return 'Enter the address the contact reads.';
+  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
+  return '';
+}
+
+@Component({
+  selector: 'app-dialog-form',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton [slDialogTrigger]="dialog">Add contact</button>
+      <sl-dialog #dialog="slDialog" [open]="open()" (openChange)="toggle($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>New contact</h2>
+          <p slDialogDescription>Contoso Foods, Seattle.</p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <form id="new-contact" novalidate (submit)="submit($event)">
+            <div slStack [gap]="4">
+              <div slField required [invalid]="errors()?.name ? true : undefined">
+                <label slFieldLabel>Full name</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="name"
+                    [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>Email</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="email"
+                    type="email"
+                    [value]="email()"
+                    (valueChange)="email.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.email }}</span>
+              </div>
+            </div>
+          </form>
+        </div>
+        <footer slDialogFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+            Cancel
+          </button>
+          <button slButton type="submit" form="new-contact">Add contact</button>
+        </footer>
+      </sl-dialog>
+      @if (added(); as message) {
+        <span slText role="status" size="sm" tone="muted">{{ message }}</span>
+      }
+    </div>
+  `,
+})
+export class DialogForm {
+  readonly open = signal(false);
+  readonly name = signal('');
+  readonly email = signal('');
+  readonly submitted = signal(false);
+  readonly added = signal<string | null>(null);
+  readonly errors = computed(() =>
+    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,
+  );
+
+  toggle(next: boolean): void {
+    if (next) {
+      this.name.set('');
+      this.email.set('');
+      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.added.set(`${this.name().trim()} was added to Contoso Foods.`);
+    this.open.set(false);
+  }
+}
+```
+
+### full-screen.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const STOPS = [
+  { time: '08:10', place: 'Contoso Foods, 1200 Pike St' },
+  { time: '08:55', place: 'Fabrikam Grocers, 410 Broadway E' },
+  { time: '09:40', place: 'Tailspin Market, 3300 Fremont Ave N' },
+  { time: '10:30', place: 'Woodgrove Deli, 85 Pine St' },
+  { time: '11:15', place: 'Wide World Importers, 2201 1st Ave S' },
+];
+
+@Component({
+  selector: 'app-dialog-full-screen',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+      Open route plan
+    </button>
+    <sl-dialog #dialog="slDialog" fullscreenToggle size="lg">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Route 14, Tuesday 6 October</h2>
+        <p slDialogDescription>5 stops, 38 km, driver Ana Souza.</p>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slStack [gap]="3">
+          @for (stop of stops; track stop.time) {
+            <div slInline [gap]="4">
+              <span slText size="sm" tone="muted">{{ stop.time }}</span>
+              <span slText size="sm">{{ stop.place }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    </sl-dialog>
+  `,
+})
+export class DialogFullScreen {
+  readonly stops = STOPS;
+}
+```
+
+### initial-focus.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/typography';
+
+const CUSTOMERS = [
+  'Contoso Foods',
+  'Fabrikam Grocers',
+  'Northwind Traders',
+  'Tailspin Market',
+  'Wide World Importers',
+  'Woodgrove Deli',
+];
+
+@Component({
+  selector: 'app-dialog-initial-focus',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+      Find a customer
+    </button>
+    <sl-dialog #dialog="slDialog" [initialFocus]="search" (openChange)="$event && query.set('')">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Find a customer</h2>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slStack [gap]="4">
+          <div slTextField>
+            <input
+              #search
+              slTextFieldInput
+              aria-label="Customer name"
+              placeholder="Search by name"
+              type="search"
+              [value]="query()"
+              (valueChange)="query.set($event.value)"
+            />
+          </div>
+          <div slStack [gap]="2">
+            @for (name of matches(); track name) {
+              <span slText size="sm">{{ name }}</span>
+            }
+          </div>
+        </div>
+      </div>
+    </sl-dialog>
+  `,
+})
+export class DialogInitialFocus {
+  readonly query = signal('');
+  readonly matches = computed(() =>
+    CUSTOMERS.filter((name) => name.toLowerCase().includes(this.query().toLowerCase())),
+  );
+}
+```
+
+### menu-action.ts
+
+Example
+
+```ts
+import { Component, ElementRef, signal, viewChild } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+
+@Component({
+  selector: 'app-dialog-menu-action',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlField,
+    SlFieldLabel,
+    SlMenu,
+    SlMenuItem,
+    SlMenuSeparator,
+    SlMenuTrigger,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <button #actions slButton tone="secondary" variant="outline" [slMenuTriggerFor]="menu">
+      Customer actions
+    </button>
+    <sl-menu #menu>
+      <button slMenuItem (select)="open.set(true)">Change credit limit…</button>
+      <button slMenuItem>Export statement</button>
+      <hr slMenuSeparator />
+      <button slMenuItem tone="danger">Suspend account…</button>
+    </sl-menu>
+    <sl-dialog size="sm" [finalFocus]="trigger()?.nativeElement" [(open)]="open">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Credit limit</h2>
+        <p slDialogDescription>Contoso Foods has $18,420.00 outstanding on open invoices.</p>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slField>
+          <label slFieldLabel>Limit in US dollars</label>
+          <div slTextField>
+            <input slTextFieldInput inputmode="decimal" value="25000" />
+          </div>
+        </div>
+      </div>
+      <footer slDialogFooter>
+        <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">Cancel</button>
+        <button slButton (click)="open.set(false)">Save limit</button>
+      </footer>
+    </sl-dialog>
+  `,
+})
+export class DialogMenuAction {
+  readonly open = signal(false);
+  readonly trigger = viewChild('actions', { read: ElementRef });
+}
+```
+
+### non-modal.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const STEPS = [
+  'Pick the 6 lines on the pick list from aisles 4 and 9.',
+  'Pack the olive oil upright, with dividers.',
+  'Print the UPS label and attach it to the top face.',
+];
+
+@Component({
+  selector: 'app-dialog-non-modal',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+      Show packing steps
+    </button>
+    <sl-dialog #dialog="slDialog" outsidePress="none" placement="top" size="sm" [modal]="false">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Packing steps</h2>
+        <p slDialogDescription>Order SO-1182. The page stays usable behind this panel.</p>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slStack [gap]="2">
+          @for (step of steps; track step; let index = $index) {
+            <span slText size="sm">{{ index + 1 }}. {{ step }}</span>
+          }
+        </div>
+      </div>
+    </sl-dialog>
+  `,
+})
+export class DialogNonModal {
+  readonly steps = STEPS;
+}
+```
+
+### parts.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 {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+
+const DETAILS = [
+  { term: 'Carrier', value: 'UPS Ground' },
+  { term: 'Tracking number', value: '1Z 999 AA1 01 2345 6784' },
+  { term: 'Packages', value: '3, 18.4 kg in total' },
+  { term: 'Estimated delivery', value: 'Thursday, 8 October' },
+];
+
+@Component({
+  selector: 'app-dialog-parts',
+  imports: [
+    SlBadge,
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+  ],
+  template: `
+    <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+      View shipment
+    </button>
+    <sl-dialog #dialog="slDialog" [(open)]="open">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Shipment SH-4471</h2>
+        <p slDialogDescription>Order SO-1182 for Contoso Foods, Seattle.</p>
+        <span slBadge tone="accent">In transit</span>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slDescriptionList>
+          @for (detail of details; track detail.term) {
+            <div slDescriptionListItem>
+              <dt slDescriptionListTerm>{{ detail.term }}</dt>
+              <dd slDescriptionListDescription>{{ detail.value }}</dd>
+            </div>
+          }
+        </div>
+      </div>
+      <footer slDialogFooter>
+        <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">Close</button>
+        <button slButton>Print label</button>
+      </footer>
+    </sl-dialog>
+  `,
+})
+export class DialogParts {
+  readonly open = signal(false);
+  readonly details = DETAILS;
+}
+```
+
+### result.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+const OUTCOMES: Record<string, string> = {
+  partial: 'Ships the 4 items in stock today.',
+  wait: 'Holds the order until every item is in stock.',
+};
+
+@Component({
+  selector: 'app-dialog-result',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlInline,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+        Ship order SO-1182
+      </button>
+      <sl-dialog #dialog="slDialog" (closed)="record($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Two items are out of stock</h2>
+          <p slDialogDescription>Aniseed syrup and dried pears are back in stock on 14 October.</p>
+          <button slDialogClose></button>
+        </header>
+        <footer slDialogFooter>
+          <button slButton variant="outline" tone="secondary" (click)="dialog.close('wait')">
+            Wait for all items
+          </button>
+          <button slButton (click)="dialog.close('partial')">Ship 4 items now</button>
+        </footer>
+      </sl-dialog>
+      @if (outcome(); as message) {
+        <span slText size="sm" tone="muted">{{ message }}</span>
+      }
+    </div>
+  `,
+})
+export class DialogResult {
+  readonly outcome = signal<string | null>(null);
+
+  record(result: string | undefined): void {
+    this.outcome.set((result && OUTCOMES[result]) ?? 'Closed without a choice.');
+  }
+}
+```
+
+### row-action.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlVisuallyHidden } from '@slotted/angular/visually-hidden';
+
+const ORDERS = [
+  { id: 'SO-1182', customer: 'Contoso Foods', total: '$1,240.00', amount: '1240.00', card: '4242' },
+  { id: 'SO-1183', customer: 'Fabrikam Grocers', total: '$386.50', amount: '386.50', card: '1881' },
+  {
+    id: 'SO-1184',
+    customer: 'Tailspin Market',
+    total: '$2,075.25',
+    amount: '2075.25',
+    card: '0005',
+  },
+];
+
+type Order = (typeof ORDERS)[number];
+
+@Component({
+  selector: 'app-dialog-row-action',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlField,
+    SlFieldLabel,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTextField,
+    SlTextFieldInput,
+    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]="'Refund ' + row.id"
+                  (click)="refund(row)"
+                >
+                  Refund
+                </button>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+    <sl-dialog size="sm" [(open)]="open">
+      <header slDialogHeader>
+        <h2 slDialogTitle>Refund {{ order().id }}</h2>
+        <p slDialogDescription>
+          {{ order().customer }} paid {{ order().total }} with the card ending {{ order().card }}.
+        </p>
+        <button slDialogClose></button>
+      </header>
+      <div slDialogBody>
+        <div slField>
+          <label slFieldLabel>Amount in US dollars</label>
+          <div slTextField>
+            <input slTextFieldInput inputmode="decimal" [value]="order().amount" />
+          </div>
+        </div>
+      </div>
+      <footer slDialogFooter>
+        <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">Cancel</button>
+        <button slButton (click)="open.set(false)">Issue refund</button>
+      </footer>
+    </sl-dialog>
+  `,
+})
+export class DialogRowAction {
+  readonly orders = ORDERS;
+  readonly open = signal(false);
+  readonly order = signal<Order>(ORDERS[0]!);
+
+  refund(row: Order): void {
+    this.order.set(row);
+    this.open.set(true);
+  }
+}
+```
+
+### unsaved-changes.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlAlertDialog,
+  SlAlertDialogAction,
+  SlAlertDialogCancel,
+  SlAlertDialogIcon,
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+  type DialogChangeRequest,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-dialog-unsaved-changes',
+  imports: [
+    SlAlertDialog,
+    SlAlertDialogAction,
+    SlAlertDialogCancel,
+    SlAlertDialogIcon,
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldLabel,
+    SlInline,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton tone="secondary" variant="outline" [slDialogTrigger]="dialog">
+        Change delivery address
+      </button>
+      <sl-dialog #dialog="slDialog" [(open)]="open" (openChangeRequest)="guard($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>Delivery address</h2>
+          <p slDialogDescription>Applies to order SO-1182 and to later orders.</p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <div slField>
+            <label slFieldLabel>Address</label>
+            <div slTextField>
+              <input slTextFieldInput [value]="draft()" (valueChange)="draft.set($event.value)" />
+            </div>
+          </div>
+        </div>
+        <footer slDialogFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="leave()">Cancel</button>
+          <button slButton (click)="save()">Save address</button>
+        </footer>
+        <sl-alert-dialog tone="warning" [(open)]="confirming">
+          <header slDialogHeader>
+            <span slAlertDialogIcon></span>
+            <h2 slDialogTitle>Discard the new address?</h2>
+            <p slDialogDescription>
+              The address you typed is not saved. The order keeps the previous one.
+            </p>
+          </header>
+          <footer slDialogFooter>
+            <button slButton slAlertDialogCancel tone="secondary" variant="outline">
+              Keep editing
+            </button>
+            <button slButton slAlertDialogAction tone="warning" (click)="open.set(false)">
+              Discard changes
+            </button>
+          </footer>
+        </sl-alert-dialog>
+      </sl-dialog>
+      <span slText size="sm" tone="muted">{{ address() }}</span>
+    </div>
+  `,
+})
+export class DialogUnsavedChanges {
+  readonly open = signal(false);
+  readonly confirming = signal(false);
+  readonly address = signal('Pier 70, Suite 300, Seattle, WA 98121');
+  readonly draft = signal(this.address());
+  readonly dirty = computed(() => this.draft() !== this.address());
+
+  guard(request: DialogChangeRequest): void {
+    if (request.value) {
+      this.draft.set(this.address());
+    } else if (this.dirty()) {
+      request.cancel();
+      this.confirming.set(true);
+    }
+  }
+
+  leave(): void {
+    if (this.dirty()) this.confirming.set(true);
+    else this.open.set(false);
+  }
+
+  save(): void {
+    this.address.set(this.draft());
+    this.open.set(false);
+  }
+}
+```