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

package/docs/popover.examples.md

@@ -0,0 +1,1235 @@
+<!-- index: ./index.md -->
+# popover
+
+`data-ui="popover"` · Floating panel anchored to a trigger.
+
+## Examples
+
+### A panel on a button
+
+Press the button: the panel opens, takes the focus and says its own name. Escape closes it and the focus goes back where it came from.
+
+Excerpt — not a complete module
+
+```html
+<ng-container slPopover>
+  <button slButton slPopoverTrigger type="button">Filters</button>
+  <ng-template slPopoverLayer>
+    <div slPopoverContent>
+      <div slPopoverHeader>
+        <div slPopoverTitle>Filter invoices</div>
+        <button slPopoverClose></button>
+      </div>
+      <div slPopoverBody>Unpaid, overdue and disputed.</div>
+    </div>
+    <div slPopoverArrow></div>
+  </ng-template>
+</ng-container>
+```
+
+### Three width steps
+
+Sixteen, twenty and twenty-four rems. The inset and the title step move with the width, and the controls inside move with the density.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import type { PopoverSize } from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-sizes',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+  ],
+  template: `
+    <div slInline [gap]="3" justify="center" wrap="wrap">
+      @for (size of sizes; track size) {
+        <ng-container slPopover [size]="size">
+          <button slButton tone="secondary" variant="outline" slPopoverTrigger>{{ size }}</button>
+          <ng-template slPopoverLayer>
+            <div slPopoverContent>
+              <div slPopoverHeader>
+                <div slPopoverTitle>Order 10248</div>
+              </div>
+              <div slPopoverBody>
+                Vins et alcools Chevalier, Reims. Three lines, 440.00 USD, shipped by Federal
+                Shipping on Jul 16.
+              </div>
+            </div>
+            <div slPopoverArrow></div>
+          </ng-template>
+        </ng-container>
+      }
+    </div>
+  `,
+})
+export class PopoverSizes {
+  readonly sizes: PopoverSize[] = ['sm', 'md', 'lg'];
+}
+```
+
+### As wide as its words, or as wide as the field
+
+width="anchor" reads the anchor measured width, which is the one case Radix publishes a custom property for and the shape a filter panel under a search field needs.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverLayer,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-width',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverLayer,
+    SlPopoverTrigger,
+  ],
+  template: `
+    <ng-container slPopover align="start" width="anchor">
+      <button slButton fullWidth tone="secondary" variant="outline" slPopoverTrigger>
+        Chai, stock by warehouse
+      </button>
+      <ng-template slPopoverLayer>
+        <div slPopoverContent aria-label="Chai stock by warehouse">
+          <div slPopoverBody>
+            <div slDescriptionList>
+              @for (warehouse of warehouses; track warehouse.name) {
+                <div slDescriptionListItem>
+                  <dt slDescriptionListTerm>{{ warehouse.name }}</dt>
+                  <dd slDescriptionListDescription>{{ warehouse.stock }}</dd>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+        <div slPopoverArrow></div>
+      </ng-template>
+    </ng-container>
+  `,
+})
+export class PopoverWidth {
+  readonly warehouses = [
+    { name: 'Seattle', stock: '39 units' },
+    { name: 'Tacoma', stock: '120 units' },
+    { name: 'Portland', stock: 'Out of stock' },
+  ];
+}
+```
+
+### Which edge it takes
+
+The four physical sides and the two logical ones. Switch the toolbar to rtl: inline-start and inline-end swap, left and right stay where they are.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverLayer,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import type { PopoverSide } from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-placement',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverLayer,
+    SlPopoverTrigger,
+  ],
+  template: `
+    <div slInline [gap]="3" justify="center" wrap="wrap">
+      @for (item of sides; track item.side) {
+        <ng-container slPopover [side]="item.side">
+          <button slButton tone="secondary" variant="outline" slPopoverTrigger>
+            {{ item.side }}
+          </button>
+          <ng-template slPopoverLayer>
+            <div slPopoverContent [attr.aria-label]="'Pickup, ' + item.side">
+              <div slPopoverBody>{{ item.text }}</div>
+            </div>
+            <div slPopoverArrow></div>
+          </ng-template>
+        </ng-container>
+      }
+    </div>
+  `,
+})
+export class PopoverPlacement {
+  readonly sides: { side: PopoverSide; text: string }[] = [
+    { side: 'top', text: 'Speedy Express collects at 4:00 PM.' },
+    { side: 'bottom', text: 'United Package collects at 5:30 PM.' },
+    { side: 'inline-start', text: 'Federal Shipping collects at 11:00 AM.' },
+    { side: 'inline-end', text: 'Northwind Courier collects at 2:00 PM.' },
+  ];
+}
+```
+
+### Pointing at something other than the button
+
+The panel hangs off the whole row and the button only opens it. Nothing is written on the anchor: it is measured and nothing else.
+
+Excerpt — not a complete module
+
+```html
+<ng-container slPopover align="end">
+  <div slPopoverAnchor>
+    <span>Invoice 2026-014</span>
+    <button slButton slPopoverTrigger type="button">More</button>
+  </div>
+  <ng-template slPopoverLayer></ng-template>
+</ng-container>
+```
+
+### Where the keyboard goes
+
+The first panel takes the focus itself; the second sends it to its search field; the third leaves it on the trigger. Close each one and watch where the focus comes back to.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-popover-focus',
+  imports: [
+    SlButton,
+    SlField,
+    SlFieldLabel,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <ng-container slPopover align="start" initialFocus="input">
+      <button slButton tone="secondary" variant="outline" slPopoverTrigger>Find a customer</button>
+      <ng-template slPopoverLayer>
+        <div slPopoverContent>
+          <div slPopoverHeader>
+            <div slPopoverTitle>Find a customer</div>
+          </div>
+          <div slPopoverBody>
+            <div slStack [gap]="3">
+              <div slField>
+                <label slFieldLabel>Company name</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    type="search"
+                    [value]="query()"
+                    (valueChange)="query.set($event.value)"
+                  />
+                </div>
+              </div>
+              <span slText size="sm" tone="muted">{{ summary() }}</span>
+            </div>
+          </div>
+        </div>
+        <div slPopoverArrow></div>
+      </ng-template>
+    </ng-container>
+  `,
+})
+export class PopoverFocus {
+  readonly customers = [
+    'Alfreds Futterkiste',
+    'Ernst Handel',
+    'Frankenversand',
+    'Königlich Essen',
+    'Wartian Herkku',
+  ];
+  readonly query = signal('');
+  readonly summary = computed(() => {
+    const query = this.query().trim().toLowerCase();
+    const matches = this.customers.filter((name) => name.toLowerCase().includes(query));
+    return matches.length === 0 ? 'No customer matches.' : matches.join(', ');
+  });
+}
+```
+
+### Every way it closes, and the reason it carries
+
+Escape, a press outside, the close control, the trigger again. Each one reports a different reason, and a consumer may refuse any of them before anything moves.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverClose,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+  type PopoverChangeRequest,
+} from '@slotted/angular/popover';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-popover-dismissal',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverClose,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <ng-container slPopover (openChangeRequest)="record($event)">
+        <button slButton tone="secondary" variant="outline" slPopoverTrigger>Delivery note</button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            <div slPopoverHeader>
+              <div slPopoverTitle>Order 10249 delivery note</div>
+              <button slPopoverClose></button>
+            </div>
+            <div slPopoverBody>
+              Leave at the loading dock behind Toms Spezialitäten. The gate closes at 6:00 PM.
+            </div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+      <span slText size="sm" tone="muted">Last closed by: {{ reason() }}</span>
+    </div>
+  `,
+})
+export class PopoverDismissal {
+  readonly reason = signal('not closed yet');
+
+  record(request: PopoverChangeRequest): void {
+    if (!request.value) this.reason.set(request.reason);
+  }
+}
+```
+
+### More content than room
+
+The body is the only part that scrolls, bounded by the height the engine says is left. The title and the actions keep theirs, and the fade at the cut says there is more.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverClose,
+  SlPopoverContent,
+  SlPopoverFooter,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-popover-scrolling',
+  imports: [
+    SlButton,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverClose,
+    SlPopoverContent,
+    SlPopoverFooter,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <ng-container slPopover [(open)]="open">
+      <button slButton tone="secondary" variant="outline" slPopoverTrigger>
+        Order 10248 activity
+      </button>
+      <ng-template slPopoverLayer>
+        <div slPopoverContent>
+          <div slPopoverHeader>
+            <div slPopoverTitle>Order 10248 activity</div>
+            <button slPopoverClose></button>
+          </div>
+          <div slPopoverBody>
+            <div slStack [gap]="3">
+              @for (entry of activity; track entry) {
+                <span slText size="sm">{{ entry }}</span>
+              }
+            </div>
+          </div>
+          <div slPopoverFooter>
+            <button slButton size="sm" (click)="open.set(false)">Done</button>
+          </div>
+        </div>
+        <div slPopoverArrow></div>
+      </ng-template>
+    </ng-container>
+  `,
+})
+export class PopoverScrolling {
+  readonly open = signal(false);
+  readonly activity = [
+    'Jul 4, 9:12 AM. Order placed by Vins et alcools Chevalier.',
+    'Jul 4, 9:40 AM. Payment authorised, 440.00 USD.',
+    'Jul 5, 8:05 AM. Allocated to the Seattle warehouse.',
+    'Jul 5, 2:30 PM. Picked by Nancy Davolio.',
+    'Jul 6, 10:15 AM. Packed in two cartons, 14.2 kg.',
+    'Jul 8, 11:00 AM. Customs documents filed for France.',
+    'Jul 16, 4:00 PM. Collected by Federal Shipping.',
+    'Jul 18, 7:20 AM. Arrived at the Le Havre hub.',
+    'Jul 19, 9:45 AM. Out for delivery in Reims.',
+    'Jul 19, 3:10 PM. Delivered, signed by P. Henriot.',
+  ];
+}
+```
+
+### A panel holding a real form
+
+Fields, a footer of actions and a close control. The controls inside are the consumer own and reach their form untouched: the family holds no value of theirs.
+
+Excerpt — not a complete module
+
+```html
+<div slPopoverBody>
+  <div slField>
+    <label slFieldLabel>Amount</label>
+    <input slFieldControl slTextFieldInput />
+  </div>
+</div>
+```
+
+### A tooltip on a control inside the panel
+
+Two layers at once. The tooltip is a later layer, so it draws above the panel and Escape reaches it first; the panel closes on the second Escape and not before.
+
+Excerpt — not a complete module
+
+```html
+<div slPopoverFooter>
+  <ng-container slTooltip describes="label">
+    <button slButton slTooltipTrigger type="button">Clear</button>
+    <ng-template slTooltipLayer>
+      <div slTooltipContent>Clear the filters</div>
+    </ng-template>
+  </ng-container>
+</div>
+```
+
+### What the keyboard does
+
+Enter or Space opens it. Tab walks the panel and, past the last control, closes it and returns to the trigger — one extra Tab, and the reading order intact.
+
+Excerpt — not a complete module
+
+```html
+<ng-container slPopover (openChangeRequest)="reason = $event.reason">
+  <button slButton slPopoverTrigger type="button">Tab through me</button>
+  <ng-template slPopoverLayer></ng-template>
+</ng-container>
+```
+
+### alignment.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverLayer,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import type { PopoverAlign } from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-alignment',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverLayer,
+    SlPopoverTrigger,
+  ],
+  template: `
+    <div slInline [gap]="3" justify="center" wrap="wrap">
+      @for (align of alignments; track align) {
+        <ng-container slPopover [align]="align">
+          <button slButton tone="secondary" variant="outline" slPopoverTrigger>
+            Align {{ align }}
+          </button>
+          <ng-template slPopoverLayer>
+            <div slPopoverContent [attr.aria-label]="'Restock, aligned ' + align">
+              <div slPopoverBody>Restock 40 units of Chang from Exotic Liquids by Oct 14.</div>
+            </div>
+            <div slPopoverArrow></div>
+          </ng-template>
+        </ng-container>
+      }
+    </div>
+  `,
+})
+export class PopoverAlignment {
+  readonly alignments: PopoverAlign[] = ['start', 'center', 'end'];
+}
+```
+
+### arrow-and-offset.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverLayer,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-arrow-and-offset',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverLayer,
+    SlPopoverTrigger,
+  ],
+  template: `
+    <div slInline [gap]="3" justify="center" wrap="wrap">
+      <ng-container slPopover>
+        <button slButton tone="secondary" variant="outline" slPopoverTrigger>With arrow</button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent aria-label="Pickup window">
+            <div slPopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+      <ng-container slPopover [arrow]="false" [sideOffset]="8">
+        <button slButton tone="secondary" variant="outline" slPopoverTrigger>
+          No arrow, 8px further
+        </button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent aria-label="Pickup window">
+            <div slPopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+    </div>
+  `,
+})
+export class PopoverArrowAndOffset {}
+```
+
+### controlled.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-popover-controlled',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlRadio,
+    SlRadioGroup,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <span slText size="sm">Order 10251, picked by {{ picker() }}</span>
+      <ng-container slPopover [(open)]="open" align="end">
+        <button slButton size="sm" tone="secondary" variant="outline" slPopoverTrigger>
+          Reassign
+        </button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            <div slPopoverHeader>
+              <div slPopoverTitle>Picker for order 10251</div>
+            </div>
+            <div slPopoverBody>
+              <div
+                slRadioGroup
+                aria-label="Picker"
+                [value]="picker()"
+                (valueChange)="choose($event.value)"
+              >
+                @for (name of pickers; track name) {
+                  <div slRadio [value]="name">{{ name }}</div>
+                }
+              </div>
+            </div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+    </div>
+  `,
+})
+export class PopoverControlled {
+  readonly pickers = ['Nancy Davolio', 'Andrew Fuller', 'Janet Leverling', 'Margaret Peacock'];
+  readonly open = signal(false);
+  readonly picker = signal('Nancy Davolio');
+
+  choose(name: string | undefined): void {
+    if (name !== undefined) this.picker.set(name);
+    this.open.set(false);
+  }
+}
+```
+
+### defaults.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  providePopoverDefaults,
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverLayer,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-defaults',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverLayer,
+    SlPopoverTrigger,
+  ],
+  providers: [providePopoverDefaults({ arrow: false, size: 'sm' })],
+  template: `
+    <div slInline [gap]="3" justify="center" wrap="wrap">
+      @for (term of terms; track term.label) {
+        <ng-container slPopover>
+          <button slButton tone="secondary" variant="outline" slPopoverTrigger>
+            {{ term.label }}
+          </button>
+          <ng-template slPopoverLayer>
+            <div slPopoverContent [attr.aria-label]="term.label">
+              <div slPopoverBody>{{ term.text }}</div>
+            </div>
+            <div slPopoverArrow></div>
+          </ng-template>
+        </ng-container>
+      }
+      <ng-container slPopover [arrow]="true">
+        <button slButton tone="secondary" variant="outline" slPopoverTrigger>
+          Cash in advance
+        </button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent aria-label="Cash in advance">
+            <div slPopoverBody>The order ships once the payment has cleared.</div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+    </div>
+  `,
+})
+export class PopoverDefaults {
+  readonly terms = [
+    { label: 'Net 30', text: 'Payment is due 30 days after the invoice date.' },
+    { label: 'Net 60', text: 'Payment is due 60 days after the invoice date.' },
+  ];
+}
+```
+
+### form.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlNumberField, SlNumberFieldEnd, SlNumberFieldInput } from '@slotted/angular/number-field';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverDescription,
+  SlPopoverFooter,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+  type PopoverChangeRequest,
+} from '@slotted/angular/popover';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-popover-form',
+  imports: [
+    SlButton,
+    SlField,
+    SlFieldLabel,
+    SlInline,
+    SlNumberField,
+    SlNumberFieldEnd,
+    SlNumberFieldInput,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverDescription,
+    SlPopoverFooter,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <span slText size="sm">Chai: {{ onHand() }} units on hand</span>
+      <ng-container
+        slPopover
+        initialFocus="input"
+        [(open)]="open"
+        (openChangeRequest)="guard($event)"
+      >
+        <button slButton size="sm" tone="secondary" variant="outline" slPopoverTrigger>
+          Adjust stock
+        </button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            <div slPopoverHeader>
+              <div slPopoverTitle>Adjust Chai stock</div>
+              <p slPopoverDescription>Seattle warehouse, bin A-14</p>
+            </div>
+            <div slPopoverBody>
+              <div slStack [gap]="3">
+                <div slField>
+                  <label slFieldLabel>Counted quantity</label>
+                  <div slNumberField>
+                    <input
+                      slNumberFieldInput
+                      min="0"
+                      [value]="count()"
+                      (valueChange)="count.set($event.value)"
+                    />
+                    <span slNumberFieldEnd>units</span>
+                  </div>
+                </div>
+                <div slField>
+                  <label slFieldLabel>Reason</label>
+                  <div slTextField>
+                    <input
+                      slTextFieldInput
+                      [value]="note()"
+                      (valueChange)="note.set($event.value)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div slPopoverFooter>
+              <button slButton size="sm" tone="secondary" variant="ghost" (click)="open.set(false)">
+                Cancel
+              </button>
+              <button slButton size="sm" [disabled]="count() === null" (click)="save()">
+                Save
+              </button>
+            </div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+    </div>
+  `,
+})
+export class PopoverForm {
+  readonly open = signal(false);
+  readonly onHand = signal(39);
+  readonly count = signal<number | null>(39);
+  readonly note = signal('');
+  readonly dirty = computed(() => this.count() !== this.onHand() || this.note() !== '');
+
+  guard(request: PopoverChangeRequest): void {
+    if (!request.value && request.reason === 'outsidePress' && this.dirty()) {
+      request.cancel();
+      return;
+    }
+    if (request.value) {
+      this.count.set(this.onHand());
+      this.note.set('');
+    }
+  }
+
+  save(): void {
+    const count = this.count();
+    if (count !== null) this.onHand.set(count);
+    this.open.set(false);
+  }
+}
+```
+
+### narrow.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+
+@Component({
+  selector: 'app-popover-narrow',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+  ],
+  template: `
+    <div slInline justify="end">
+      <ng-container slPopover align="start" size="lg">
+        <button slButton tone="secondary" variant="outline" slPopoverTrigger>Volume pricing</button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            <div slPopoverHeader>
+              <div slPopoverTitle>Volume pricing for Chai</div>
+            </div>
+            <div slPopoverBody>
+              18.00 USD a case up to 24 cases, 16.20 USD from 25 cases, and 15.30 USD from 100
+              cases. Prices apply to orders shipped from the Seattle warehouse.
+            </div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+    </div>
+  `,
+})
+export class PopoverNarrow {}
+```
+
+### table-row.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 {
+  SlPopover,
+  SlPopoverAnchor,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverClose,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCaption,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+@Component({
+  selector: 'app-popover-table-row',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlPopover,
+    SlPopoverAnchor,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverClose,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlTable,
+    SlTableBody,
+    SlTableCaption,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="3">
+      <div slTableContent>
+        <caption slTableCaption>
+          Shipped orders
+        </caption>
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader>Shipment</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (order of orders; track order.id) {
+            <ng-container slPopover align="end">
+              <tr slTableRow slPopoverAnchor [value]="order.id">
+                <th slTableRowHeader>{{ order.id }}</th>
+                <td slTableCell>{{ order.customer }}</td>
+                <td slTableCell>
+                  <button slButton size="sm" tone="secondary" variant="ghost" slPopoverTrigger>
+                    Tracking
+                  </button>
+                </td>
+              </tr>
+              <ng-template slPopoverLayer>
+                <div slPopoverContent>
+                  <div slPopoverHeader>
+                    <div slPopoverTitle>Order {{ order.id }} shipment</div>
+                    <button slPopoverClose></button>
+                  </div>
+                  <div slPopoverBody>
+                    <div slDescriptionList>
+                      <div slDescriptionListItem>
+                        <dt slDescriptionListTerm>Carrier</dt>
+                        <dd slDescriptionListDescription>{{ order.carrier }}</dd>
+                      </div>
+                      <div slDescriptionListItem>
+                        <dt slDescriptionListTerm>Tracking</dt>
+                        <dd slDescriptionListDescription>{{ order.tracking }}</dd>
+                      </div>
+                      <div slDescriptionListItem>
+                        <dt slDescriptionListTerm>Shipped</dt>
+                        <dd slDescriptionListDescription>{{ order.shipped }}</dd>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div slPopoverArrow></div>
+              </ng-template>
+            </ng-container>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class PopoverTableRow {
+  readonly orders = [
+    {
+      id: '10248',
+      customer: 'Vins et alcools Chevalier',
+      carrier: 'Federal Shipping',
+      tracking: 'FS-4471-0921',
+      shipped: 'Jul 16',
+    },
+    {
+      id: '10249',
+      customer: 'Toms Spezialitäten',
+      carrier: 'Speedy Express',
+      tracking: 'SE-2210-3384',
+      shipped: 'Jul 10',
+    },
+    {
+      id: '10250',
+      customer: 'Hanari Carnes',
+      carrier: 'United Package',
+      tracking: 'UP-9035-1172',
+      shipped: 'Jul 12',
+    },
+  ];
+}
+```
+
+### toolbar.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 {
+  SlPopover,
+  SlPopoverArrow,
+  SlPopoverBody,
+  SlPopoverContent,
+  SlPopoverHeader,
+  SlPopoverLayer,
+  SlPopoverTitle,
+  SlPopoverTrigger,
+} from '@slotted/angular/popover';
+import { SlToolbar, SlToolbarSpacer } from '@slotted/angular/toolbar';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-popover-toolbar',
+  imports: [
+    SlButton,
+    SlCheckbox,
+    SlCheckboxGroup,
+    SlPopover,
+    SlPopoverArrow,
+    SlPopoverBody,
+    SlPopoverContent,
+    SlPopoverHeader,
+    SlPopoverLayer,
+    SlPopoverTitle,
+    SlPopoverTrigger,
+    SlText,
+    SlToolbar,
+    SlToolbarSpacer,
+  ],
+  template: `
+    <div slToolbar aria-label="Orders">
+      <ng-container slPopover align="start">
+        <button slButton size="sm" tone="secondary" variant="ghost" slPopoverTrigger>Status</button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            <div slPopoverHeader>
+              <div slPopoverTitle>Show orders that are</div>
+            </div>
+            <div slPopoverBody>
+              <div
+                slCheckboxGroup
+                aria-label="Status"
+                [value]="shown()"
+                (valueChange)="shown.set($event.value)"
+              >
+                @for (status of statuses; track status.value) {
+                  <div slCheckbox [value]="status.value">{{ status.label }}</div>
+                }
+              </div>
+            </div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+      <ng-container slPopover align="start">
+        <button slButton size="sm" tone="secondary" variant="ghost" slPopoverTrigger>
+          Columns
+        </button>
+        <ng-template slPopoverLayer>
+          <div slPopoverContent>
+            <div slPopoverHeader>
+              <div slPopoverTitle>Columns</div>
+            </div>
+            <div slPopoverBody>
+              <div slCheckboxGroup aria-label="Columns" [defaultValue]="['customer', 'total']">
+                <div slCheckbox value="customer">Customer</div>
+                <div slCheckbox value="ship-via">Ship via</div>
+                <div slCheckbox value="total">Total</div>
+              </div>
+            </div>
+          </div>
+          <div slPopoverArrow></div>
+        </ng-template>
+      </ng-container>
+      <div slToolbarSpacer></div>
+      <span slText size="sm" tone="muted">{{ count() }} orders</span>
+    </div>
+  `,
+})
+export class PopoverToolbar {
+  readonly statuses = [
+    { value: 'pending', label: 'Pending', orders: 14 },
+    { value: 'shipped', label: 'Shipped', orders: 27 },
+    { value: 'delivered', label: 'Delivered', orders: 112 },
+    { value: 'returned', label: 'Returned', orders: 3 },
+  ];
+  readonly shown = signal<readonly string[]>(['pending', 'shipped']);
+  readonly count = computed(() =>
+    this.statuses
+      .filter((status) => this.shown().includes(status.value))
+      .reduce((sum, status) => sum + status.orders, 0),
+  );
+}
+```