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

package/dist/docs/menu.examples.md

@@ -0,0 +1,1513 @@
+<!-- index: ./index.md -->
+# menu
+
+`data-ui="menu"` · List of actions opened from a trigger.
+
+## Examples
+
+### Playground
+
+One menu with every axis 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
+
+```tsx
+<Menu>
+  <MenuTrigger render={(props) => <Button {...props} variant="outline" />}>Document</MenuTrigger>
+  <MenuContent>
+    <MenuItem shortcut="Mod+D">Duplicate</MenuItem>
+    <MenuItem disabled>Publish</MenuItem>
+    <MenuSeparator />
+    <MenuItem tone="danger">Delete…</MenuItem>
+  </MenuContent>
+</Menu>;
+```
+
+### Commands
+
+The default: an item runs and the menu closes. The second item asks to stay open, which is what a command a reader repeats needs.
+
+Excerpt — not a complete module
+
+```tsx
+<>
+  <MenuItem onSelect={(event) => duplicate(event.reason)}>Duplicate</MenuItem>
+  <MenuItem closeOnSelect={false} onSelect={zoomIn}>
+    Zoom in
+  </MenuItem>
+</>;
+```
+
+### 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph, type GlyphName, Icon } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+
+const mark = (name: GlyphName) => (
+  <Icon>
+    <Glyph name={name} />
+  </Icon>
+);
+
+export default function MenuIcons() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Invoice INV-2041
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem icon={mark('copy')} shortcut="Mod+D">
+          Duplicate
+        </MenuItem>
+        <MenuItem icon={mark('external')} shortcut="Mod+Enter">
+          Open in new tab
+        </MenuItem>
+        <MenuItem icon={mark('file-text')} shortcut="Mod+P">
+          Print
+        </MenuItem>
+        <MenuItem icon={mark('pin')}>Pin to dashboard</MenuItem>
+        <MenuItem shortcut="Shift+Mod+R">Rename…</MenuItem>
+        <MenuSeparator />
+        <MenuItem icon={mark('trash')} shortcut="Mod+Backspace" tone="danger">
+          Delete draft
+        </MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### 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
+
+```tsx
+<>
+  <MenuItem shortcut="Mod+S">Save</MenuItem>
+  <MenuItem shortcut="Shift+Mod+S">Save as…</MenuItem>
+</>;
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Inline } from '@slotted/react/inline';
+import { Menu, MenuCheckboxItem, MenuContent, MenuTrigger } from '@slotted/react/menu';
+import { Text } from '@slotted/react/typography';
+
+export default function MenuCheckboxItems() {
+  const [archived, setArchived] = useState(false);
+  const [test, setTest] = useState(false);
+  const [cancelled, setCancelled] = useState(true);
+  const shown = [archived && 'archived', test && 'test', cancelled && 'cancelled'].filter(Boolean);
+
+  return (
+    <Inline align="center" gap={3}>
+      <Menu>
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+              Show
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuCheckboxItem checked={archived} onCheckedChange={setArchived}>
+            Archived orders
+          </MenuCheckboxItem>
+          <MenuCheckboxItem checked={test} onCheckedChange={setTest}>
+            Test orders
+          </MenuCheckboxItem>
+          <MenuCheckboxItem checked={cancelled} onCheckedChange={setCancelled}>
+            Cancelled orders
+          </MenuCheckboxItem>
+        </MenuContent>
+      </Menu>
+      <Text size="sm" tone="muted">
+        {shown.length === 0 ? 'Open orders only' : `Including ${shown.join(', ')}`}
+      </Text>
+    </Inline>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger } from '@slotted/react/menu';
+
+const GROUPINGS = [
+  { value: 'none', label: 'No grouping' },
+  { value: 'status', label: 'Status' },
+  { value: 'customer', label: 'Customer' },
+  { value: 'warehouse', label: 'Warehouse' },
+];
+
+export default function MenuRadioItems() {
+  const [grouping, setGrouping] = useState('status');
+  const current = GROUPINGS.find((option) => option.value === grouping)?.label;
+
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Group by: {current}
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuRadioGroup aria-label="Group orders by" onValueChange={setGrouping} value={grouping}>
+          {GROUPINGS.map((option) => (
+            <MenuRadioItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuRadioItem>
+          ))}
+        </MenuRadioGroup>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import {
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuSeparator,
+  MenuTrigger,
+} from '@slotted/react/menu';
+
+export default function MenuGroups() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            SO-10482
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuGroup label="Fulfilment">
+          <MenuItem>Mark as packed</MenuItem>
+          <MenuItem>Mark as shipped</MenuItem>
+          <MenuItem>Print packing slip</MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuGroup label="Billing">
+          <MenuItem>Send invoice</MenuItem>
+          <MenuItem>Record payment…</MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuGroup label="Customer">
+          <MenuItem>Open Northwind Traders</MenuItem>
+          <MenuItem>Email the buyer</MenuItem>
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### 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
+
+```tsx
+<MenuContent>
+  <MenuItem>Copy link</MenuItem>
+  <Menu>
+    <MenuTrigger>Send to</MenuTrigger>
+    <MenuContent>
+      <MenuItem>Slack</MenuItem>
+    </MenuContent>
+  </Menu>
+</MenuContent>;
+```
+
+### 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
+
+```tsx
+<Menu defaultOpen>
+  <MenuTrigger>Send to</MenuTrigger>
+  <MenuContent>
+    <MenuItem>Slack</MenuItem>
+  </MenuContent>
+</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
+
+```tsx
+<MenuContent>
+  <MenuHeader>
+    <Avatar name="Ada Lovelace" size="md" />
+    <MenuItemLabel>Ada Lovelace</MenuItemLabel>
+    <MenuItemDescription>ada@analytical.engine</MenuItemDescription>
+  </MenuHeader>
+  <MenuSeparator />
+  <MenuItem
+    icon={
+      <Icon>
+        <Glyph name="person" />
+      </Icon>
+    }
+  >
+    Profile
+  </MenuItem>
+  <MenuItem tone="danger">Sign out</MenuItem>
+</MenuContent>;
+```
+
+### 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+
+const VIEWS = [
+  { label: 'Awaiting payment', count: '18' },
+  { label: 'Ready to ship', count: '42' },
+  { label: 'On hold', count: '3' },
+  { label: 'Returns', count: '7' },
+];
+
+export default function MenuMeta() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            All orders
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem meta="1,284">All orders</MenuItem>
+        <MenuSeparator />
+        {VIEWS.map((view) => (
+          <MenuItem key={view.label} meta={view.count}>
+            {view.label}
+          </MenuItem>
+        ))}
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### 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
+
+```tsx
+<MenuItem tone="danger" onSelect={remove}>
+  Delete document
+</MenuItem>;
+```
+
+### 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import { Menu, MenuAlign, MenuContent, MenuItem, MenuSide, MenuTrigger } from '@slotted/react/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' },
+];
+
+export default function MenuPlacement() {
+  return (
+    <Inline align="center" gap={3} wrap="wrap">
+      {PLACEMENTS.map((placement) => (
+        <Menu align={placement.align} key={placement.label} side={placement.side}>
+          <MenuTrigger
+            render={(props) => (
+              <Button {...props} variant="outline">
+                {placement.label}
+              </Button>
+            )}
+          />
+          <MenuContent>
+            <MenuItem>Rename…</MenuItem>
+            <MenuItem>Duplicate</MenuItem>
+            <MenuItem>Archive</MenuItem>
+          </MenuContent>
+        </Menu>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### 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
+
+```tsx
+<MenuContent aria-label="Move to">
+  {folders.map((folder) => (
+    <MenuItem key={folder}>{folder}</MenuItem>
+  ))}
+</MenuContent>;
+```
+
+### 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
+
+```tsx
+<MenuContent loading={pending}>
+  <MenuItem disabled>Publish</MenuItem>
+  <MenuCheckboxItem checked>Show comments</MenuCheckboxItem>
+  <MenuEmpty>Loading labels…</MenuEmpty>
+</MenuContent>;
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Inline } from '@slotted/react/inline';
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuSelectEvent,
+  MenuSeparator,
+  MenuTrigger,
+} from '@slotted/react/menu';
+import { Text } from '@slotted/react/typography';
+
+const FORMATS = ['CSV', 'PDF', 'Excel'];
+
+export default function MenuKeyboard() {
+  const [last, setLast] = useState('Focus Order, then press ArrowDown.');
+  const ran = (command: string) => (event: MenuSelectEvent) =>
+    setLast(`${command}, by ${event.reason}`);
+
+  return (
+    <Inline align="center" gap={3} wrap="wrap">
+      <Menu>
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+              Order
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuItem onSelect={ran('Edit order')} shortcut="Mod+E">
+            Edit order
+          </MenuItem>
+          <MenuItem onSelect={ran('Duplicate')} shortcut="Mod+D">
+            Duplicate
+          </MenuItem>
+          <Menu>
+            <MenuTrigger>Export as</MenuTrigger>
+            <MenuContent>
+              {FORMATS.map((format) => (
+                <MenuItem key={format} onSelect={ran(`Export as ${format}`)}>
+                  {format}
+                </MenuItem>
+              ))}
+            </MenuContent>
+          </Menu>
+          <MenuSeparator />
+          <MenuItem onSelect={ran('Archive')}>Archive</MenuItem>
+        </MenuContent>
+      </Menu>
+      <Text size="sm" tone="muted">
+        {last}
+      </Text>
+    </Inline>
+  );
+}
+```
+
+### 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 the defaults provider sets the side once.
+
+Excerpt — not a complete module
+
+```tsx
+<MenuDefaultsProvider side="bottom" align="end">
+  <Menu>
+    <MenuTrigger render={(props) => <Button {...props} variant="ghost" aria-label="Row actions" />}>
+      ⋯
+    </MenuTrigger>
+    <MenuContent>
+      <MenuItem>Open</MenuItem>
+    </MenuContent>
+  </Menu>
+</MenuDefaultsProvider>;
+```
+
+### account-menu.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Avatar } from '@slotted/react/avatar';
+import { Button } from '@slotted/react/button';
+import { Glyph, type GlyphName, Icon } from '@slotted/react/icon';
+import {
+  Menu,
+  MenuContent,
+  MenuHeader,
+  MenuItem,
+  MenuItemDescription,
+  MenuItemLabel,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuTrigger,
+} from '@slotted/react/menu';
+
+const WORKSPACES = ['Northwind Operations', 'Northwind Europe', 'Northwind Wholesale'];
+
+const mark = (name: GlyphName) => (
+  <Icon>
+    <Glyph name={name} />
+  </Icon>
+);
+
+export default function MenuAccountMenu() {
+  const [workspace, setWorkspace] = useState('Northwind Operations');
+
+  return (
+    <Menu align="end">
+      <MenuTrigger
+        render={(props) => (
+          <Button
+            {...props}
+            start={<Avatar decorative name="Maria Chen" size="sm" />}
+            variant="ghost"
+          >
+            Maria Chen
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuHeader>
+          <Avatar decorative name="Maria Chen" size="md" />
+          <MenuItemLabel>Maria Chen</MenuItemLabel>
+          <MenuItemDescription>maria.chen@northwind.example</MenuItemDescription>
+        </MenuHeader>
+        <MenuSeparator />
+        <MenuItem icon={mark('person')}>Profile</MenuItem>
+        <MenuItem icon={mark('bell')}>Notifications</MenuItem>
+        <Menu>
+          <MenuTrigger meta={workspace.replace('Northwind ', '')}>Workspace</MenuTrigger>
+          <MenuContent>
+            <MenuRadioGroup onValueChange={setWorkspace} value={workspace}>
+              {WORKSPACES.map((name) => (
+                <MenuRadioItem key={name} value={name}>
+                  {name}
+                </MenuRadioItem>
+              ))}
+            </MenuRadioGroup>
+          </MenuContent>
+        </Menu>
+        <MenuSeparator />
+        <MenuItem icon={mark('arrow-left')} tone="danger">
+          Sign out
+        </MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### column-visibility.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuTrigger } from '@slotted/react/menu';
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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',
+  },
+];
+
+export default function MenuColumnVisibility() {
+  const [visible, setVisible] = useState<Record<Column, boolean>>({
+    customer: true,
+    status: true,
+    warehouse: false,
+    total: true,
+  });
+  const shown = COLUMNS.filter((column) => visible[column.key]);
+
+  return (
+    <Stack align="end" gap={3}>
+      <Menu align="end">
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} size="sm" variant="outline">
+              Columns
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuGroup label="Show columns">
+            {COLUMNS.map((column) => (
+              <MenuCheckboxItem
+                checked={visible[column.key]}
+                key={column.key}
+                onCheckedChange={(checked) =>
+                  setVisible((current) => ({ ...current, [column.key]: checked }))
+                }
+              >
+                {column.label}
+              </MenuCheckboxItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </Menu>
+      <Table columns={shown.length + 1}>
+        <TableContent>
+          <TableHead>
+            <TableRow>
+              <TableColumnHeader>Order</TableColumnHeader>
+              {shown.map((column) => (
+                <TableColumnHeader key={column.key} numeric={column.numeric}>
+                  {column.label}
+                </TableColumnHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {ORDERS.map((order) => (
+              <TableRow key={order.id} value={order.id}>
+                <TableRowHeader>{order.id}</TableRowHeader>
+                {shown.map((column) => (
+                  <TableCell key={column.key} numeric={column.numeric}>
+                    {order[column.key]}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContent>
+      </Table>
+    </Stack>
+  );
+}
+```
+
+### controlled.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Inline } from '@slotted/react/inline';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';
+import { Text } from '@slotted/react/typography';
+
+export default function MenuControlled() {
+  const [open, setOpen] = useState(false);
+  const [last, setLast] = useState('Closed');
+
+  return (
+    <Inline align="center" gap={3} wrap="wrap">
+      <Menu
+        onOpenChange={(next, request) => {
+          setOpen(next);
+          setLast(`${next ? 'Opened' : 'Closed'} by ${request.reason}`);
+        }}
+        open={open}
+      >
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+              Bulk actions
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuItem>Mark 12 orders as packed</MenuItem>
+          <MenuItem>Print 12 packing slips</MenuItem>
+          <MenuItem>Export selection</MenuItem>
+        </MenuContent>
+      </Menu>
+      <Button onClick={() => setOpen(true)} variant="ghost">
+        Open from code
+      </Button>
+      <Text size="sm" tone="muted">
+        {last}
+      </Text>
+    </Inline>
+  );
+}
+```
+
+### descriptions.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';
+
+export default function MenuDescriptions() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Refund
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem description="Returns $1,240.00 to the card used at checkout.">
+          Full refund
+        </MenuItem>
+        <MenuItem description="Choose the lines and the amount to return.">
+          Partial refund…
+        </MenuItem>
+        <MenuItem description="Adds $1,240.00 to the customer's account balance.">
+          Store credit
+        </MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### destructive.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+
+export default function MenuDestructive() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Supplier
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem>Edit details</MenuItem>
+        <MenuItem tone="success">Approve for purchasing</MenuItem>
+        <MenuItem tone="warning">Put payments on hold</MenuItem>
+        <MenuSeparator />
+        <MenuItem
+          description="Removes Northwind Traders and its 18 open purchase orders."
+          tone="danger"
+        >
+          Delete supplier…
+        </MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### disabled.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+
+export default function MenuDisabled() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            SO-10477 · Shipped
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem>Track shipment</MenuItem>
+        <MenuItem>Create return…</MenuItem>
+        <MenuItem description="A shipped order can no longer be edited." disabled>
+          Edit order
+        </MenuItem>
+        <MenuSeparator />
+        <MenuItem description="Create a return instead." disabled tone="danger">
+          Cancel order
+        </MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### keep-open.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Inline } from '@slotted/react/inline';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+import { Text } from '@slotted/react/typography';
+
+export default function MenuKeepOpen() {
+  const [cartons, setCartons] = useState(24);
+
+  return (
+    <Inline align="center" gap={3}>
+      <Menu>
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+              Adjust quantity
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuItem closeOnSelect={false} onSelect={() => setCartons((count) => count + 1)}>
+            Add 1 carton
+          </MenuItem>
+          <MenuItem closeOnSelect={false} onSelect={() => setCartons((count) => count + 10)}>
+            Add 10 cartons
+          </MenuItem>
+          <MenuItem
+            closeOnSelect={false}
+            onSelect={() => setCartons((count) => Math.max(0, count - 1))}
+          >
+            Remove 1 carton
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem onSelect={() => setCartons(24)}>Reset to ordered quantity</MenuItem>
+        </MenuContent>
+      </Menu>
+      <Text size="sm" tone="muted">
+        {cartons} cartons
+      </Text>
+    </Inline>
+  );
+}
+```
+
+### links.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph, Icon } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+
+export default function MenuLinks() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Open
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem render={(props) => <a {...props} href="#order-SO-10482" />}>Order page</MenuItem>
+        <MenuItem render={(props) => <a {...props} href="#customer-northwind" />}>
+          Customer profile
+        </MenuItem>
+        <MenuSeparator />
+        <MenuItem
+          icon={
+            <Icon>
+              <Glyph name="external" />
+            </Icon>
+          }
+          render={(props) => (
+            <a
+              {...props}
+              href="https://example.com/carriers/track/1Z999AA10123456784"
+              rel="noreferrer"
+              target="_blank"
+            />
+          )}
+        >
+          Carrier tracking
+        </MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### loading.tsx
+
+Example
+
+```tsx
+import { useRef, useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuCheckboxItem, MenuContent, MenuEmpty, MenuTrigger } from '@slotted/react/menu';
+
+const LABELS = ['Fragile', 'Gift wrap', 'Priority', 'Wholesale'];
+
+export default function MenuLoading() {
+  const [labels, setLabels] = useState<string[] | null>(null);
+  const requested = useRef(false);
+
+  const load = (open: boolean) => {
+    if (!open || requested.current) return;
+    requested.current = true;
+    setTimeout(() => setLabels(LABELS), 1200);
+  };
+
+  return (
+    <Menu onOpenChange={load}>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Labels
+          </Button>
+        )}
+      />
+      <MenuContent loading={labels === null}>
+        {labels === null ? (
+          <MenuEmpty>Loading labels…</MenuEmpty>
+        ) : (
+          labels.map((label) => <MenuCheckboxItem key={label}>{label}</MenuCheckboxItem>)
+        )}
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### long-list.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/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',
+];
+
+export default function MenuLongList() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Move to warehouse
+          </Button>
+        )}
+      />
+      <MenuContent>
+        {LOCATIONS.map((location) => (
+          <MenuItem key={location}>{location}</MenuItem>
+        ))}
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### row-actions.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button, IconButton } from '@slotted/react/button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogIcon,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@slotted/react/dialog';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@slotted/react/menu';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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' },
+];
+
+export default function MenuRowActions() {
+  const [orders, setOrders] = useState(ORDERS);
+  const [pending, setPending] = useState<Order | null>(null);
+  const [confirming, setConfirming] = useState(false);
+
+  return (
+    <>
+      <Table columns={4}>
+        <TableContent>
+          <TableHead>
+            <TableRow>
+              <TableColumnHeader>Order</TableColumnHeader>
+              <TableColumnHeader>Customer</TableColumnHeader>
+              <TableColumnHeader numeric>Total</TableColumnHeader>
+              <TableColumnHeader align="end">Actions</TableColumnHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {orders.map((order) => (
+              <TableRow key={order.id} value={order.id}>
+                <TableRowHeader>{order.id}</TableRowHeader>
+                <TableCell>{order.customer}</TableCell>
+                <TableCell numeric>{order.total}</TableCell>
+                <TableCell align="end">
+                  <Menu align="end">
+                    <MenuTrigger
+                      render={(props) => (
+                        <IconButton {...props} aria-label={`Actions for ${order.id}`} size="sm">
+                          <Glyph name="ellipsis" />
+                        </IconButton>
+                      )}
+                    />
+                    <MenuContent>
+                      <MenuItem>View order</MenuItem>
+                      <MenuItem shortcut="Mod+D">Duplicate</MenuItem>
+                      <MenuSeparator />
+                      <MenuItem
+                        onSelect={() => {
+                          setPending(order);
+                          setConfirming(true);
+                        }}
+                        tone="danger"
+                      >
+                        Delete order…
+                      </MenuItem>
+                    </MenuContent>
+                  </Menu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContent>
+      </Table>
+      <AlertDialog onOpenChange={setConfirming} open={confirming}>
+        <DialogContent>
+          <DialogHeader>
+            <AlertDialogIcon />
+            <DialogTitle>Delete {pending?.id}?</DialogTitle>
+            <DialogDescription>
+              The order for {pending?.customer} and its invoice are removed. This cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <AlertDialogCancel
+              render={(props) => (
+                <Button {...props} tone="secondary" variant="outline">
+                  Keep order
+                </Button>
+              )}
+            />
+            <AlertDialogAction
+              onClick={() => setOrders((rows) => rows.filter((row) => row.id !== pending?.id))}
+              render={(props) => (
+                <Button {...props} tone="danger">
+                  Delete order
+                </Button>
+              )}
+            />
+          </DialogFooter>
+        </DialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+```
+
+### sizes.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import { Menu, MenuContent, MenuItem, MenuSize, MenuTrigger } from '@slotted/react/menu';
+
+const SIZES: MenuSize[] = ['sm', 'md', 'lg'];
+
+export default function MenuSizes() {
+  return (
+    <Inline align="center" gap={3}>
+      {SIZES.map((size) => (
+        <Menu key={size} size={size}>
+          <MenuTrigger
+            render={(props) => (
+              <Button {...props} size={size} variant="outline">
+                Actions, {size}
+              </Button>
+            )}
+          />
+          <MenuContent>
+            <MenuItem shortcut="Mod+E">Edit order</MenuItem>
+            <MenuItem shortcut="Mod+D">Duplicate</MenuItem>
+            <MenuItem>Print packing slip</MenuItem>
+          </MenuContent>
+        </Menu>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### sort-menu.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger } from '@slotted/react/menu';
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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' });
+
+export default function MenuSortMenu() {
+  const [sort, setSort] = useState('newest');
+  const current = SORTS.find((option) => option.value === sort) ?? SORTS[0]!;
+  const rows = [...ORDERS].sort(current.compare);
+
+  return (
+    <Stack align="end" gap={3}>
+      <Menu align="end">
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} size="sm" variant="outline">
+              Sort: {current.label}
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuRadioGroup aria-label="Sort orders" onValueChange={setSort} value={sort}>
+            {SORTS.map((option) => (
+              <MenuRadioItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuRadioItem>
+            ))}
+          </MenuRadioGroup>
+        </MenuContent>
+      </Menu>
+      <Table columns={4}>
+        <TableContent>
+          <TableHead>
+            <TableRow>
+              <TableColumnHeader>Order</TableColumnHeader>
+              <TableColumnHeader>Customer</TableColumnHeader>
+              <TableColumnHeader>Placed</TableColumnHeader>
+              <TableColumnHeader numeric>Total</TableColumnHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((order) => (
+              <TableRow key={order.id} value={order.id}>
+                <TableRowHeader>{order.id}</TableRowHeader>
+                <TableCell>{order.customer}</TableCell>
+                <TableCell>{order.placed}</TableCell>
+                <TableCell numeric>{money.format(order.total)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContent>
+      </Table>
+    </Stack>
+  );
+}
+```
+
+### submenus.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuTrigger,
+} from '@slotted/react/menu';
+
+const PEOPLE = ['Maria Chen', 'Tomás Ortega', 'Aiko Tanaka', 'Unassigned'];
+const WAREHOUSES = ['Rotterdam', 'Leipzig', 'Lyon', 'Gdańsk'];
+
+export default function MenuSubmenus() {
+  const [assignee, setAssignee] = useState('Maria Chen');
+
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            SO-10482
+          </Button>
+        )}
+      />
+      <MenuContent>
+        <MenuItem>View order</MenuItem>
+        <Menu>
+          <MenuTrigger meta={assignee}>Assign to</MenuTrigger>
+          <MenuContent>
+            <MenuRadioGroup onValueChange={setAssignee} value={assignee}>
+              {PEOPLE.map((person) => (
+                <MenuRadioItem key={person} value={person}>
+                  {person}
+                </MenuRadioItem>
+              ))}
+            </MenuRadioGroup>
+          </MenuContent>
+        </Menu>
+        <Menu>
+          <MenuTrigger>Move to warehouse</MenuTrigger>
+          <MenuContent>
+            {WAREHOUSES.map((warehouse) => (
+              <MenuItem key={warehouse}>{warehouse}</MenuItem>
+            ))}
+          </MenuContent>
+        </Menu>
+        <MenuSeparator />
+        <MenuItem tone="danger">Cancel order…</MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+
+### triggers.tsx
+
+Example
+
+```tsx
+import { Button, IconButton } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Inline } from '@slotted/react/inline';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/menu';
+import {
+  SplitButton,
+  SplitButtonMenu,
+  SplitButtonMenuTrigger,
+  SplitButtonPrimary,
+} from '@slotted/react/split-button';
+
+export default function MenuTriggers() {
+  return (
+    <Inline align="center" gap={3}>
+      <Menu>
+        <MenuTrigger
+          render={(props) => (
+            <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+              Export
+            </Button>
+          )}
+        />
+        <MenuContent>
+          <MenuItem>CSV for spreadsheets</MenuItem>
+          <MenuItem>PDF summary</MenuItem>
+          <MenuItem>Accounting journal</MenuItem>
+        </MenuContent>
+      </Menu>
+
+      <Menu align="end">
+        <MenuTrigger
+          render={(props) => (
+            <IconButton {...props} aria-label="More actions for SO-10482">
+              <Glyph name="ellipsis" />
+            </IconButton>
+          )}
+        />
+        <MenuContent>
+          <MenuItem>Copy order number</MenuItem>
+          <MenuItem>Add internal note</MenuItem>
+          <MenuItem>Open customer</MenuItem>
+        </MenuContent>
+      </Menu>
+
+      <SplitButton>
+        <SplitButtonPrimary>Ship order</SplitButtonPrimary>
+        <SplitButtonMenu>
+          <SplitButtonMenuTrigger aria-label="More ways to ship" />
+          <MenuContent>
+            <MenuItem>Ship and print label</MenuItem>
+            <MenuItem>Ship part of the order…</MenuItem>
+            <MenuItem>Schedule for tomorrow</MenuItem>
+          </MenuContent>
+        </SplitButtonMenu>
+      </SplitButton>
+    </Inline>
+  );
+}
+```
+
+### typeahead.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Glyph } from '@slotted/react/icon';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '@slotted/react/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' },
+];
+
+export default function MenuTypeahead() {
+  return (
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} end={<Glyph name="chevron-down" />} variant="outline">
+            Ship with
+          </Button>
+        )}
+      />
+      <MenuContent>
+        {CARRIERS.map((carrier) => (
+          <MenuItem key={carrier.name} meta={carrier.transit}>
+            {carrier.name}
+          </MenuItem>
+        ))}
+      </MenuContent>
+    </Menu>
+  );
+}
+```