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

package/docs/menu.examples.md

@@ -0,0 +1,1651 @@
+<!-- index: ./index.md -->
+# menu
+
+`data-ui="menu"` · List of actions opened from a trigger.
+
+## Examples
+
+### Playground
+
+One menu with every input on it, driven by the controls under the canvas. Change side and align and watch the surface move around the control that opened it.
+
+Excerpt — not a complete module
+
+```html
+<button slButton variant="outline" [slMenuTriggerFor]="document">Document</button>
+<sl-menu #document>
+  <button slMenuItem shortcut="Mod+D">Duplicate</button>
+  <button slMenuItem [disabled]="true">Publish</button>
+  <hr slMenuSeparator />
+  <button slMenuItem tone="danger">Delete…</button>
+</sl-menu>
+```
+
+### Commands
+
+The default: an item runs and the menu closes. The second asks to stay open, which is what a command a reader repeats needs.
+
+Excerpt — not a complete module
+
+```html
+<button slMenuItem (select)="duplicate($event.reason)">Duplicate</button>
+<button slMenuItem [closeOnSelect]="false" (select)="zoomIn()">Zoom in</button>
+```
+
+### Icons
+
+Two items carry a mark and two do not, and every label still starts on the same line: the column exists for the menu rather than for the item.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuItemIcon,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+@Component({
+  selector: 'app-menu-icons',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlIcon,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemIcon,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="invoice">
+      Invoice INV-2041
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #invoice>
+      <button slMenuItem shortcut="Mod+D">
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="copy"></svg></span
+        ></span>
+        Duplicate
+      </button>
+      <button slMenuItem shortcut="Mod+Enter">
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="external"></svg></span
+        ></span>
+        Open in new tab
+      </button>
+      <button slMenuItem shortcut="Mod+P">
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="file-text"></svg></span
+        ></span>
+        Print
+      </button>
+      <button slMenuItem>
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="pin"></svg></span
+        ></span>
+        Pin to dashboard
+      </button>
+      <button slMenuItem shortcut="Shift+Mod+R">Rename…</button>
+      <hr slMenuSeparator />
+      <button slMenuItem shortcut="Mod+Backspace" tone="danger">
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="trash"></svg></span
+        ></span>
+        Delete draft
+      </button>
+    </sl-menu>
+  `,
+})
+export class MenuIcons {}
+```
+
+### Shortcuts
+
+Written once as Mod+S and printed as ⌘S on a Mac and Ctrl+S elsewhere. The legend is hidden from a screen reader, which hears aria-keyshortcuts instead.
+
+Excerpt — not a complete module
+
+```html
+<button slMenuItem shortcut="Mod+S">Save</button>
+<button slMenuItem shortcut="Shift+Mod+S">Save as…</button>
+```
+
+### Checkbox items
+
+Each item holds a state of its own and the menu stays open, so a reader can turn three things on without opening it three times. Space toggles without closing.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlInline } from '@slotted/angular/inline';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-menu-checkbox-items',
+  imports: [SlButton, SlButtonEnd, SlGlyph, SlInline, SlMenu, SlMenuItem, SlMenuTrigger, SlText],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton variant="outline" [slMenuTriggerFor]="show">
+        Show
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #show>
+        <button slMenuCheckboxItem [(checked)]="archived">Archived orders</button>
+        <button slMenuCheckboxItem [(checked)]="test">Test orders</button>
+        <button slMenuCheckboxItem [(checked)]="cancelled">Cancelled orders</button>
+      </sl-menu>
+      <span slText size="sm" tone="muted">{{ summary() }}</span>
+    </div>
+  `,
+})
+export class MenuCheckboxItems {
+  protected readonly archived = signal(false);
+  protected readonly test = signal(false);
+  protected readonly cancelled = signal(true);
+  protected readonly summary = computed(() => {
+    const shown = [
+      this.archived() && 'archived',
+      this.test() && 'test',
+      this.cancelled() && 'cancelled',
+    ].filter(Boolean);
+    return shown.length === 0 ? 'Open orders only' : `Including ${shown.join(', ')}`;
+  });
+}
+```
+
+### Radio items
+
+One value across the group, chosen among the items inside it. The mark sits in the same column an icon would, so the labels stay in line.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';
+
+const GROUPINGS = [
+  { value: 'none', label: 'No grouping' },
+  { value: 'status', label: 'Status' },
+  { value: 'customer', label: 'Customer' },
+  { value: 'warehouse', label: 'Warehouse' },
+];
+
+@Component({
+  selector: 'app-menu-radio-items',
+  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="group">
+      Group by: {{ current() }}
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #group>
+      <sl-menu-radio-group aria-label="Group orders by" [(value)]="grouping">
+        @for (option of groupings; track option.value) {
+          <button slMenuRadioItem [value]="option.value">{{ option.label }}</button>
+        }
+      </sl-menu-radio-group>
+    </sl-menu>
+  `,
+})
+export class MenuRadioItems {
+  protected readonly groupings = GROUPINGS;
+  protected readonly grouping = signal<string | undefined>('status');
+  protected readonly current = computed(
+    () => GROUPINGS.find((option) => option.value === this.grouping())?.label,
+  );
+}
+```
+
+### Groups
+
+A label names the run under it and the group points at it, so a reader hears "Sort by" before the options rather than a heading belonging to nothing.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuGroup,
+  SlMenuItem,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+@Component({
+  selector: 'app-menu-groups',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuGroup,
+    SlMenuItem,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="order">
+      SO-10482
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #order>
+      <sl-menu-group label="Fulfilment">
+        <button slMenuItem>Mark as packed</button>
+        <button slMenuItem>Mark as shipped</button>
+        <button slMenuItem>Print packing slip</button>
+      </sl-menu-group>
+      <hr slMenuSeparator />
+      <sl-menu-group label="Billing">
+        <button slMenuItem>Send invoice</button>
+        <button slMenuItem>Record payment…</button>
+      </sl-menu-group>
+      <hr slMenuSeparator />
+      <sl-menu-group label="Customer">
+        <button slMenuItem>Open Northwind Traders</button>
+        <button slMenuItem>Email the buyer</button>
+      </sl-menu-group>
+    </sl-menu>
+  `,
+})
+export class MenuGroups {}
+```
+
+### Submenus
+
+A menu nested in a menu. Hover opens it after a pause, the inline-end arrow opens it from the keyboard, and the pointer may cut diagonally across the items between.
+
+Excerpt — not a complete module
+
+```html
+<sl-menu #share>
+  <button slMenuItem>Copy link</button>
+  <button slMenuItem [slMenuTriggerFor]="sendTo">Send to</button>
+  <sl-menu #sendTo>
+    <button slMenuItem>Slack</button>
+  </sl-menu>
+</sl-menu>
+```
+
+### Submenu open
+
+The submenu as it lands: its panel one gap out from the parent surface, not against the item, and its first item level with the item that opened it. Every other scene keeps its submenu closed until it is hovered or the inline-end arrow asks for it.
+
+Excerpt — not a complete module
+
+```html
+<sl-menu #sendTo [open]="true">
+  <button slMenuItem>Slack</button>
+</sl-menu>
+```
+
+### Header
+
+An account menu opens with who it belongs to. The avatar starts at the icons' edge, the arrows begin at the first command, and a reader hears the name and the address as the surface's description.
+
+Excerpt — not a complete module
+
+```html
+<sl-menu #account>
+  <div slMenuHeader>
+    <span slAvatar name="Ada Lovelace" size="md" decorative></span>
+    <span data-part="label">Ada Lovelace</span>
+    <span slMenuItemDescription>ada@analytical.engine</span>
+  </div>
+  <hr slMenuSeparator />
+  <button slMenuItem>Profile</button>
+  <button slMenuItem tone="danger">Sign out</button>
+</sl-menu>
+```
+
+### Meta
+
+Counts and the value a submenu holds, in a column of their own: the numbers end on one edge, the shortcuts keep theirs, and a submenu trigger shows its current value before the chevron.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuItemMeta,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+const VIEWS = [
+  { label: 'Awaiting payment', count: '18' },
+  { label: 'Ready to ship', count: '42' },
+  { label: 'On hold', count: '3' },
+  { label: 'Returns', count: '7' },
+];
+
+@Component({
+  selector: 'app-menu-meta',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemMeta,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="viewMenu">
+      All orders
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #viewMenu>
+      <button slMenuItem>All orders <span slMenuItemMeta>1,284</span></button>
+      <hr slMenuSeparator />
+      @for (view of views; track view.label) {
+        <button slMenuItem>
+          {{ view.label }} <span slMenuItemMeta>{{ view.count }}</span>
+        </button>
+      }
+    </sl-menu>
+  `,
+})
+export class MenuMeta {
+  protected readonly views = VIEWS;
+}
+```
+
+### Tone
+
+A destructive command reads as destructive before it is read at all: the tone paints the label, the mark and the highlight together, in all three schemes.
+
+Excerpt — not a complete module
+
+```html
+<button slMenuItem tone="danger" (select)="remove()">
+  Delete document
+  <span slMenuItemDescription>This cannot be undone.</span>
+</button>
+```
+
+### Placement
+
+The surface hangs from the start edge of its control by default, and flips or slides rather than leaving the screen. Both inline values mirror in a right-to-left document.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuTrigger,
+  type MenuAlign,
+  type MenuSide,
+} from '@slotted/angular/menu';
+
+const PLACEMENTS: { label: string; side: MenuSide; align: MenuAlign }[] = [
+  { label: 'Bottom, start', side: 'bottom', align: 'start' },
+  { label: 'Bottom, end', side: 'bottom', align: 'end' },
+  { label: 'Top, start', side: 'top', align: 'start' },
+  { label: 'Inline end', side: 'inline-end', align: 'start' },
+];
+
+@Component({
+  selector: 'app-menu-placement',
+  imports: [SlButton, SlInline, SlMenu, SlMenuItem, SlMenuTrigger],
+  template: `
+    <div slInline align="center" wrap="wrap" [gap]="3">
+      @for (placement of placements; track placement.label) {
+        <button slButton variant="outline" [slMenuTriggerFor]="menu">{{ placement.label }}</button>
+        <sl-menu #menu [align]="placement.align" [side]="placement.side">
+          <button slMenuItem>Rename…</button>
+          <button slMenuItem>Duplicate</button>
+          <button slMenuItem>Archive</button>
+        </sl-menu>
+      }
+    </div>
+  `,
+})
+export class MenuPlacement {
+  protected readonly placements = PLACEMENTS;
+}
+```
+
+### A menu taller than the screen
+
+The surface is bounded by the room the positioner reports and scrolls inside it, so thirty commands never run off the bottom of the window.
+
+Excerpt — not a complete module
+
+```html
+<sl-menu #moveTo aria-label="Move to">
+  @for (folder of folders; track folder) {
+    <button slMenuItem>{{ folder }}</button>
+  }
+</sl-menu>
+```
+
+### States
+
+Disabled, checked, the parent item while its submenu is open, and the surface waiting for its items. A disabled item still takes focus and still runs nothing.
+
+Excerpt — not a complete module
+
+```html
+<sl-menu #labels [loading]="pending()">
+  <button slMenuItem [disabled]="true">Publish</button>
+  <button slMenuCheckboxItem [checked]="true">Show comments</button>
+  <div slMenuEmpty>Loading labels…</div>
+</sl-menu>
+```
+
+### Keyboard
+
+Arrows move and wrap, Home and End reach the ends, typing jumps to a command by name, Escape closes one surface and Tab closes them all and moves on down the page.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuSeparator,
+  SlMenuTrigger,
+  type MenuSelectEvent,
+} from '@slotted/angular/menu';
+import { SlText } from '@slotted/angular/typography';
+
+const FORMATS = ['CSV', 'PDF', 'Excel'];
+
+@Component({
+  selector: 'app-menu-keyboard',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlInline,
+    SlMenu,
+    SlMenuItem,
+    SlMenuSeparator,
+    SlMenuTrigger,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" wrap="wrap" [gap]="3">
+      <button slButton variant="outline" [slMenuTriggerFor]="order">
+        Order
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #order>
+        <button slMenuItem shortcut="Mod+E" (select)="ran('Edit order', $event)">Edit order</button>
+        <button slMenuItem shortcut="Mod+D" (select)="ran('Duplicate', $event)">Duplicate</button>
+        <button slMenuItem [slMenuTriggerFor]="exportAs">Export as</button>
+        <sl-menu #exportAs>
+          @for (format of formats; track format) {
+            <button slMenuItem (select)="ran('Export as ' + format, $event)">{{ format }}</button>
+          }
+        </sl-menu>
+        <hr slMenuSeparator />
+        <button slMenuItem (select)="ran('Archive', $event)">Archive</button>
+      </sl-menu>
+      <span slText size="sm" tone="muted">{{ last() }}</span>
+    </div>
+  `,
+})
+export class MenuKeyboard {
+  protected readonly formats = FORMATS;
+  protected readonly last = signal('Focus Order, then press ArrowDown.');
+
+  protected ran(command: string, event: MenuSelectEvent): void {
+    this.last.set(`${command}, by ${event.reason}`);
+  }
+}
+```
+
+### In context
+
+A row of actions in a table: the trigger is the consumer's own icon button, the menu holds the row's commands, and provideMenuDefaults sets the side once.
+
+Excerpt — not a complete module
+
+```html
+<button slButton variant="ghost" aria-label="Row actions" [slMenuTriggerFor]="rowActions">⋯</button>
+<sl-menu #rowActions>
+  <button slMenuItem>Open</button>
+</sl-menu>
+```
+
+### account-menu.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlAvatar } from '@slotted/angular/avatar';
+import { SlButton, SlButtonStart } from '@slotted/angular/button';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuHeader,
+  SlMenuItem,
+  SlMenuItemDescription,
+  SlMenuItemIcon,
+  SlMenuItemMeta,
+  SlMenuRadioGroup,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+const WORKSPACES = ['Northwind Operations', 'Northwind Europe', 'Northwind Wholesale'];
+
+@Component({
+  selector: 'app-menu-account-menu',
+  imports: [
+    SlAvatar,
+    SlButton,
+    SlButtonStart,
+    SlGlyph,
+    SlIcon,
+    SlMenu,
+    SlMenuHeader,
+    SlMenuItem,
+    SlMenuItemDescription,
+    SlMenuItemIcon,
+    SlMenuItemMeta,
+    SlMenuRadioGroup,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="ghost" [slMenuTriggerFor]="account">
+      <span slButtonStart><span slAvatar decorative name="Maria Chen" size="sm"></span></span>
+      Maria Chen
+    </button>
+    <sl-menu #account align="end">
+      <div slMenuHeader>
+        <span slAvatar decorative name="Maria Chen" size="md"></span>
+        <span data-part="label">Maria Chen</span>
+        <span slMenuItemDescription>maria.chen&#64;northwind.example</span>
+      </div>
+      <hr slMenuSeparator />
+      <button slMenuItem>
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="person"></svg></span
+        ></span>
+        Profile
+      </button>
+      <button slMenuItem>
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="bell"></svg></span
+        ></span>
+        Notifications
+      </button>
+      <button slMenuItem [slMenuTriggerFor]="workspaces">
+        Workspace <span slMenuItemMeta>{{ short() }}</span>
+      </button>
+      <sl-menu #workspaces>
+        <sl-menu-radio-group [(value)]="workspace">
+          @for (name of names; track name) {
+            <button slMenuRadioItem [value]="name">{{ name }}</button>
+          }
+        </sl-menu-radio-group>
+      </sl-menu>
+      <hr slMenuSeparator />
+      <button slMenuItem tone="danger">
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="arrow-left"></svg></span
+        ></span>
+        Sign out
+      </button>
+    </sl-menu>
+  `,
+})
+export class MenuAccountMenu {
+  protected readonly names = WORKSPACES;
+  protected readonly workspace = signal<string | undefined>('Northwind Operations');
+  protected readonly short = computed(() => this.workspace()?.replace('Northwind ', ''));
+}
+```
+
+### column-visibility.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuGroup, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+type Column = 'customer' | 'status' | 'warehouse' | 'total';
+
+const COLUMNS: { key: Column; label: string; numeric?: boolean }[] = [
+  { key: 'customer', label: 'Customer' },
+  { key: 'status', label: 'Status' },
+  { key: 'warehouse', label: 'Warehouse' },
+  { key: 'total', label: 'Total', numeric: true },
+];
+
+const ORDERS: (Record<Column, string> & { id: string })[] = [
+  {
+    id: 'SO-10482',
+    customer: 'Northwind Traders',
+    status: 'Packed',
+    warehouse: 'Rotterdam',
+    total: '$1,240.00',
+  },
+  {
+    id: 'SO-10483',
+    customer: 'Contoso Foods',
+    status: 'Awaiting payment',
+    warehouse: 'Leipzig',
+    total: '$860.50',
+  },
+  {
+    id: 'SO-10484',
+    customer: 'Fabrikam Supply',
+    status: 'Shipped',
+    warehouse: 'Lyon',
+    total: '$2,315.75',
+  },
+];
+
+@Component({
+  selector: 'app-menu-column-visibility',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuGroup,
+    SlMenuItem,
+    SlMenuTrigger,
+    SlStack,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slStack align="end" [gap]="3">
+      <button slButton size="sm" variant="outline" [slMenuTriggerFor]="columnMenu">
+        Columns
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #columnMenu align="end">
+        <sl-menu-group label="Show columns">
+          @for (column of columns; track column.key) {
+            <button
+              slMenuCheckboxItem
+              [checked]="visible()[column.key]"
+              (checkedChange)="toggle(column.key, $event)"
+            >
+              {{ column.label }}
+            </button>
+          }
+        </sl-menu-group>
+      </sl-menu>
+      <div slTable [columns]="shown().length + 1">
+        <div slTableContent>
+          <thead slTableHead>
+            <tr slTableRow>
+              <th slTableColumnHeader>Order</th>
+              @for (column of shown(); track column.key) {
+                <th slTableColumnHeader [numeric]="column.numeric ?? false">{{ column.label }}</th>
+              }
+            </tr>
+          </thead>
+          <tbody slTableBody>
+            @for (order of orders; track order.id) {
+              <tr slTableRow [value]="order.id">
+                <th slTableRowHeader>{{ order.id }}</th>
+                @for (column of shown(); track column.key) {
+                  <td slTableCell [numeric]="column.numeric ?? false">{{ order[column.key] }}</td>
+                }
+              </tr>
+            }
+          </tbody>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class MenuColumnVisibility {
+  protected readonly columns = COLUMNS;
+  protected readonly orders = ORDERS;
+  protected readonly visible = signal<Record<Column, boolean>>({
+    customer: true,
+    status: true,
+    warehouse: false,
+    total: true,
+  });
+  protected readonly shown = computed(() => COLUMNS.filter((column) => this.visible()[column.key]));
+
+  protected toggle(key: Column, checked: boolean): void {
+    this.visible.update((current) => ({ ...current, [key]: checked }));
+  }
+}
+```
+
+### controlled.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlInline } from '@slotted/angular/inline';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import type { ChangeRequest } from '@slotted/core/state';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-menu-controlled',
+  imports: [SlButton, SlButtonEnd, SlGlyph, SlInline, SlMenu, SlMenuItem, SlMenuTrigger, SlText],
+  template: `
+    <div slInline align="center" wrap="wrap" [gap]="3">
+      <button slButton variant="outline" [slMenuTriggerFor]="bulk">
+        Bulk actions
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #bulk [(open)]="open" (openChangeRequest)="record($event)">
+        <button slMenuItem>Mark 12 orders as packed</button>
+        <button slMenuItem>Print 12 packing slips</button>
+        <button slMenuItem>Export selection</button>
+      </sl-menu>
+      <button slButton variant="ghost" (click)="open.set(true)">Open from code</button>
+      <span slText size="sm" tone="muted">{{ last() }}</span>
+    </div>
+  `,
+})
+export class MenuControlled {
+  protected readonly open = signal(false);
+  protected readonly last = signal('Closed');
+
+  protected record(request: ChangeRequest<boolean>): void {
+    this.last.set(`${request.value ? 'Opened' : 'Closed'} by ${request.reason}`);
+  }
+}
+```
+
+### descriptions.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuItemDescription, SlMenuTrigger } from '@slotted/angular/menu';
+
+@Component({
+  selector: 'app-menu-descriptions',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemDescription,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="refund">
+      Refund
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #refund>
+      <button slMenuItem>
+        Full refund
+        <span slMenuItemDescription>Returns $1,240.00 to the card used at checkout.</span>
+      </button>
+      <button slMenuItem>
+        Partial refund…
+        <span slMenuItemDescription>Choose the lines and the amount to return.</span>
+      </button>
+      <button slMenuItem>
+        Store credit
+        <span slMenuItemDescription>Adds $1,240.00 to the customer's account balance.</span>
+      </button>
+    </sl-menu>
+  `,
+})
+export class MenuDescriptions {}
+```
+
+### destructive.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuItemDescription,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+@Component({
+  selector: 'app-menu-destructive',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemDescription,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="supplier">
+      Supplier
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #supplier>
+      <button slMenuItem>Edit details</button>
+      <button slMenuItem tone="success">Approve for purchasing</button>
+      <button slMenuItem tone="warning">Put payments on hold</button>
+      <hr slMenuSeparator />
+      <button slMenuItem tone="danger">
+        Delete supplier…
+        <span slMenuItemDescription
+          >Removes Northwind Traders and its 18 open purchase orders.</span
+        >
+      </button>
+    </sl-menu>
+  `,
+})
+export class MenuDestructive {}
+```
+
+### disabled.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuItemDescription,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+@Component({
+  selector: 'app-menu-disabled',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemDescription,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="shipped">
+      SO-10477 · Shipped
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #shipped>
+      <button slMenuItem>Track shipment</button>
+      <button slMenuItem>Create return…</button>
+      <button slMenuItem [disabled]="true">
+        Edit order
+        <span slMenuItemDescription>A shipped order can no longer be edited.</span>
+      </button>
+      <hr slMenuSeparator />
+      <button slMenuItem tone="danger" [disabled]="true">
+        Cancel order
+        <span slMenuItemDescription>Create a return instead.</span>
+      </button>
+    </sl-menu>
+  `,
+})
+export class MenuDisabled {}
+```
+
+### keep-open.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlInline } from '@slotted/angular/inline';
+import { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-menu-keep-open',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlInline,
+    SlMenu,
+    SlMenuItem,
+    SlMenuSeparator,
+    SlMenuTrigger,
+    SlText,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton variant="outline" [slMenuTriggerFor]="quantity">
+        Adjust quantity
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #quantity>
+        <button slMenuItem [closeOnSelect]="false" (select)="add(1)">Add 1 carton</button>
+        <button slMenuItem [closeOnSelect]="false" (select)="add(10)">Add 10 cartons</button>
+        <button slMenuItem [closeOnSelect]="false" (select)="add(-1)">Remove 1 carton</button>
+        <hr slMenuSeparator />
+        <button slMenuItem (select)="cartons.set(24)">Reset to ordered quantity</button>
+      </sl-menu>
+      <span slText size="sm" tone="muted">{{ cartons() }} cartons</span>
+    </div>
+  `,
+})
+export class MenuKeepOpen {
+  protected readonly cartons = signal(24);
+
+  protected add(count: number): void {
+    this.cartons.update((current) => Math.max(0, current + count));
+  }
+}
+```
+
+### links.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuItemIcon,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+@Component({
+  selector: 'app-menu-links',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlIcon,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemIcon,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="open">
+      Open
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #open>
+      <a slMenuItem href="#order-SO-10482">Order page</a>
+      <a slMenuItem href="#customer-northwind">Customer profile</a>
+      <hr slMenuSeparator />
+      <a
+        slMenuItem
+        href="https://example.com/carriers/track/1Z999AA10123456784"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <span slMenuItemIcon
+          ><span slIcon><svg slGlyph name="external"></svg></span
+        ></span>
+        Carrier tracking
+      </a>
+    </sl-menu>
+  `,
+})
+export class MenuLinks {}
+```
+
+### loading.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuEmpty, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+
+const LABELS = ['Fragile', 'Gift wrap', 'Priority', 'Wholesale'];
+
+@Component({
+  selector: 'app-menu-loading',
+  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuEmpty, SlMenuItem, SlMenuTrigger],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="labelMenu">
+      Labels
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #labelMenu [loading]="labels() === null" (openChange)="load($event)">
+      @if (labels(); as loaded) {
+        @for (label of loaded; track label) {
+          <button slMenuCheckboxItem>{{ label }}</button>
+        }
+      } @else {
+        <div slMenuEmpty>Loading labels…</div>
+      }
+    </sl-menu>
+  `,
+})
+export class MenuLoading {
+  protected readonly labels = signal<string[] | null>(null);
+  private requested = false;
+
+  protected load(open: boolean): void {
+    if (!open || this.requested) return;
+    this.requested = true;
+    setTimeout(() => this.labels.set(LABELS), 1200);
+  }
+}
+```
+
+### long-list.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+
+const LOCATIONS = [
+  'Amsterdam',
+  'Antwerp',
+  'Barcelona',
+  'Berlin',
+  'Bologna',
+  'Bordeaux',
+  'Bratislava',
+  'Brno',
+  'Brussels',
+  'Budapest',
+  'Copenhagen',
+  'Dublin',
+  'Gdańsk',
+  'Geneva',
+  'Hamburg',
+  'Helsinki',
+  'Kraków',
+  'Leipzig',
+  'Lisbon',
+  'Ljubljana',
+  'Lyon',
+  'Madrid',
+  'Milan',
+  'Munich',
+  'Oslo',
+  'Porto',
+  'Prague',
+  'Rotterdam',
+  'Stockholm',
+  'Tallinn',
+  'Valencia',
+  'Vienna',
+  'Vilnius',
+  'Warsaw',
+  'Zagreb',
+  'Zürich',
+];
+
+@Component({
+  selector: 'app-menu-long-list',
+  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuTrigger],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="warehouses">
+      Move to warehouse
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #warehouses>
+      @for (location of locations; track location) {
+        <button slMenuItem>{{ location }}</button>
+      }
+    </sl-menu>
+  `,
+})
+export class MenuLongList {
+  protected readonly locations = LOCATIONS;
+}
+```
+
+### row-actions.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton, SlIconButton } from '@slotted/angular/button';
+import {
+  SlAlertDialog,
+  SlAlertDialogAction,
+  SlAlertDialogCancel,
+  SlAlertDialogIcon,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+} from '@slotted/angular/dialog';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+interface Order {
+  id: string;
+  customer: string;
+  total: string;
+}
+
+const ORDERS: Order[] = [
+  { id: 'SO-10482', customer: 'Northwind Traders', total: '$1,240.00' },
+  { id: 'SO-10483', customer: 'Contoso Foods', total: '$860.50' },
+  { id: 'SO-10484', customer: 'Fabrikam Supply', total: '$2,315.75' },
+];
+
+@Component({
+  selector: 'app-menu-row-actions',
+  imports: [
+    SlAlertDialog,
+    SlAlertDialogAction,
+    SlAlertDialogCancel,
+    SlAlertDialogIcon,
+    SlButton,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlGlyph,
+    SlIconButton,
+    SlMenu,
+    SlMenuItem,
+    SlMenuSeparator,
+    SlMenuTrigger,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  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 align="end">Actions</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (order of orders(); track order.id) {
+            <tr slTableRow [value]="order.id">
+              <th slTableRowHeader>{{ order.id }}</th>
+              <td slTableCell>{{ order.customer }}</td>
+              <td slTableCell numeric>{{ order.total }}</td>
+              <td slTableCell align="end">
+                <button
+                  slIconButton
+                  size="sm"
+                  [attr.aria-label]="'Actions for ' + order.id"
+                  [slMenuTriggerFor]="actions"
+                >
+                  <svg slGlyph name="ellipsis"></svg>
+                </button>
+                <sl-menu #actions align="end">
+                  <button slMenuItem>View order</button>
+                  <button slMenuItem shortcut="Mod+D">Duplicate</button>
+                  <hr slMenuSeparator />
+                  <button slMenuItem tone="danger" (select)="confirm(order)">Delete order…</button>
+                </sl-menu>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+    <sl-alert-dialog [(open)]="confirming">
+      <header slDialogHeader>
+        <span slAlertDialogIcon></span>
+        <h2 slDialogTitle>Delete {{ pending()?.id }}?</h2>
+        <p slDialogDescription>
+          The order for {{ pending()?.customer }} and its invoice are removed. This cannot be
+          undone.
+        </p>
+      </header>
+      <footer slDialogFooter>
+        <button slButton slAlertDialogCancel tone="secondary" variant="outline">Keep order</button>
+        <button slButton slAlertDialogAction tone="danger" (click)="remove()">Delete order</button>
+      </footer>
+    </sl-alert-dialog>
+  `,
+})
+export class MenuRowActions {
+  protected readonly orders = signal(ORDERS);
+  protected readonly pending = signal<Order | null>(null);
+  protected readonly confirming = signal(false);
+
+  protected confirm(order: Order): void {
+    this.pending.set(order);
+    this.confirming.set(true);
+  }
+
+  protected remove(): void {
+    const id = this.pending()?.id;
+    this.orders.update((rows) => rows.filter((row) => row.id !== id));
+  }
+}
+```
+
+### sizes.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import { SlMenu, SlMenuItem, SlMenuTrigger, type MenuSize } from '@slotted/angular/menu';
+
+const SIZES: MenuSize[] = ['sm', 'md', 'lg'];
+
+@Component({
+  selector: 'app-menu-sizes',
+  imports: [SlButton, SlInline, SlMenu, SlMenuItem, SlMenuTrigger],
+  template: `
+    <div slInline align="center" [gap]="3">
+      @for (size of sizes; track size) {
+        <button slButton variant="outline" [size]="size" [slMenuTriggerFor]="menu">
+          Actions, {{ size }}
+        </button>
+        <sl-menu #menu [size]="size">
+          <button slMenuItem shortcut="Mod+E">Edit order</button>
+          <button slMenuItem shortcut="Mod+D">Duplicate</button>
+          <button slMenuItem>Print packing slip</button>
+        </sl-menu>
+      }
+    </div>
+  `,
+})
+export class MenuSizes {
+  protected readonly sizes = SIZES;
+}
+```
+
+### sort-menu.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+interface Order {
+  id: string;
+  customer: string;
+  placed: string;
+  total: number;
+}
+
+const ORDERS: Order[] = [
+  { id: 'SO-10482', customer: 'Northwind Traders', placed: '2026-10-02', total: 1240 },
+  { id: 'SO-10483', customer: 'Contoso Foods', placed: '2026-10-03', total: 860.5 },
+  { id: 'SO-10484', customer: 'Fabrikam Supply', placed: '2026-10-01', total: 2315.75 },
+  { id: 'SO-10485', customer: 'Adventure Works', placed: '2026-10-04', total: 412 },
+];
+
+const SORTS: { value: string; label: string; compare: (a: Order, b: Order) => number }[] = [
+  { value: 'newest', label: 'Newest first', compare: (a, b) => b.placed.localeCompare(a.placed) },
+  { value: 'oldest', label: 'Oldest first', compare: (a, b) => a.placed.localeCompare(b.placed) },
+  { value: 'total-desc', label: 'Highest total', compare: (a, b) => b.total - a.total },
+  { value: 'total-asc', label: 'Lowest total', compare: (a, b) => a.total - b.total },
+  {
+    value: 'customer',
+    label: 'Customer, A to Z',
+    compare: (a, b) => a.customer.localeCompare(b.customer),
+  },
+];
+
+const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
+@Component({
+  selector: 'app-menu-sort-menu',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuItem,
+    SlMenuRadioGroup,
+    SlMenuTrigger,
+    SlStack,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slStack align="end" [gap]="3">
+      <button slButton size="sm" variant="outline" [slMenuTriggerFor]="sortMenu">
+        Sort: {{ current().label }}
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #sortMenu align="end">
+        <sl-menu-radio-group aria-label="Sort orders" [(value)]="sort">
+          @for (option of sorts; track option.value) {
+            <button slMenuRadioItem [value]="option.value">{{ option.label }}</button>
+          }
+        </sl-menu-radio-group>
+      </sl-menu>
+      <div slTable [columns]="4">
+        <div slTableContent>
+          <thead slTableHead>
+            <tr slTableRow>
+              <th slTableColumnHeader>Order</th>
+              <th slTableColumnHeader>Customer</th>
+              <th slTableColumnHeader>Placed</th>
+              <th slTableColumnHeader numeric>Total</th>
+            </tr>
+          </thead>
+          <tbody slTableBody>
+            @for (order of rows(); track order.id) {
+              <tr slTableRow [value]="order.id">
+                <th slTableRowHeader>{{ order.id }}</th>
+                <td slTableCell>{{ order.customer }}</td>
+                <td slTableCell>{{ order.placed }}</td>
+                <td slTableCell numeric>{{ format(order.total) }}</td>
+              </tr>
+            }
+          </tbody>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class MenuSortMenu {
+  protected readonly sorts = SORTS;
+  protected readonly sort = signal<string | undefined>('newest');
+  protected readonly current = computed(
+    () => SORTS.find((option) => option.value === this.sort()) ?? SORTS[0]!,
+  );
+  protected readonly rows = computed(() => [...ORDERS].sort(this.current().compare));
+
+  protected format(total: number): string {
+    return money.format(total);
+  }
+}
+```
+
+### submenus.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import {
+  SlMenu,
+  SlMenuItem,
+  SlMenuItemMeta,
+  SlMenuRadioGroup,
+  SlMenuSeparator,
+  SlMenuTrigger,
+} from '@slotted/angular/menu';
+
+const PEOPLE = ['Maria Chen', 'Tomás Ortega', 'Aiko Tanaka', 'Unassigned'];
+const WAREHOUSES = ['Rotterdam', 'Leipzig', 'Lyon', 'Gdańsk'];
+
+@Component({
+  selector: 'app-menu-submenus',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlMenu,
+    SlMenuItem,
+    SlMenuItemMeta,
+    SlMenuRadioGroup,
+    SlMenuSeparator,
+    SlMenuTrigger,
+  ],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="order">
+      SO-10482
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #order>
+      <button slMenuItem>View order</button>
+      <button slMenuItem [slMenuTriggerFor]="assign">
+        Assign to <span slMenuItemMeta>{{ assignee() }}</span>
+      </button>
+      <sl-menu #assign>
+        <sl-menu-radio-group [(value)]="assignee">
+          @for (person of people; track person) {
+            <button slMenuRadioItem [value]="person">{{ person }}</button>
+          }
+        </sl-menu-radio-group>
+      </sl-menu>
+      <button slMenuItem [slMenuTriggerFor]="move">Move to warehouse</button>
+      <sl-menu #move>
+        @for (warehouse of warehouses; track warehouse) {
+          <button slMenuItem>{{ warehouse }}</button>
+        }
+      </sl-menu>
+      <hr slMenuSeparator />
+      <button slMenuItem tone="danger">Cancel order…</button>
+    </sl-menu>
+  `,
+})
+export class MenuSubmenus {
+  protected readonly people = PEOPLE;
+  protected readonly warehouses = WAREHOUSES;
+  protected readonly assignee = signal<string | undefined>('Maria Chen');
+}
+```
+
+### triggers.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd, SlIconButton } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlInline } from '@slotted/angular/inline';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import {
+  SlSplitButton,
+  SlSplitButtonMenuTrigger,
+  SlSplitButtonPrimary,
+} from '@slotted/angular/split-button';
+
+@Component({
+  selector: 'app-menu-triggers',
+  imports: [
+    SlButton,
+    SlButtonEnd,
+    SlGlyph,
+    SlIconButton,
+    SlInline,
+    SlMenu,
+    SlMenuItem,
+    SlMenuTrigger,
+    SlSplitButton,
+    SlSplitButtonMenuTrigger,
+    SlSplitButtonPrimary,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton variant="outline" [slMenuTriggerFor]="exportMenu">
+        Export
+        <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #exportMenu>
+        <button slMenuItem>CSV for spreadsheets</button>
+        <button slMenuItem>PDF summary</button>
+        <button slMenuItem>Accounting journal</button>
+      </sl-menu>
+
+      <button slIconButton aria-label="More actions for SO-10482" [slMenuTriggerFor]="more">
+        <svg slGlyph name="ellipsis"></svg>
+      </button>
+      <sl-menu #more align="end">
+        <button slMenuItem>Copy order number</button>
+        <button slMenuItem>Add internal note</button>
+        <button slMenuItem>Open customer</button>
+      </sl-menu>
+
+      <div slSplitButton>
+        <button slSplitButtonPrimary>Ship order</button>
+        <button
+          slSplitButtonMenuTrigger
+          aria-label="More ways to ship"
+          [slMenuTriggerFor]="ship"
+        ></button>
+        <sl-menu #ship>
+          <button slMenuItem>Ship and print label</button>
+          <button slMenuItem>Ship part of the order…</button>
+          <button slMenuItem>Schedule for tomorrow</button>
+        </sl-menu>
+      </div>
+    </div>
+  `,
+})
+export class MenuTriggers {}
+```
+
+### typeahead.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonEnd } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuItemMeta, SlMenuTrigger } from '@slotted/angular/menu';
+
+const CARRIERS = [
+  { name: 'DHL Express', transit: '1 day' },
+  { name: 'DPD', transit: '2 days' },
+  { name: 'FedEx', transit: '1 day' },
+  { name: 'GLS', transit: '3 days' },
+  { name: 'PostNL', transit: '2 days' },
+  { name: 'Royal Mail', transit: '3 days' },
+  { name: 'UPS', transit: '2 days' },
+  { name: 'USPS', transit: '5 days' },
+];
+
+@Component({
+  selector: 'app-menu-typeahead',
+  imports: [SlButton, SlButtonEnd, SlGlyph, SlMenu, SlMenuItem, SlMenuItemMeta, SlMenuTrigger],
+  template: `
+    <button slButton variant="outline" [slMenuTriggerFor]="carrierMenu">
+      Ship with
+      <span slButtonEnd><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <sl-menu #carrierMenu>
+      @for (carrier of carriers; track carrier.name) {
+        <button slMenuItem>
+          {{ carrier.name }} <span slMenuItemMeta>{{ carrier.transit }}</span>
+        </button>
+      }
+    </sl-menu>
+  `,
+})
+export class MenuTypeahead {
+  protected readonly carriers = CARRIERS;
+}
+```