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

package/dist/docs/popover.examples.md

@@ -0,0 +1,1067 @@
+<!-- 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
+
+```tsx
+<Popover>
+  <PopoverTrigger render={(props) => <Button {...props}>Filters</Button>} />
+  <PopoverLayer>
+    <PopoverContent>
+      <PopoverHeader>
+        <PopoverTitle>Filter invoices</PopoverTitle>
+        <PopoverClose />
+      </PopoverHeader>
+      <PopoverBody>Unpaid, overdue and disputed.</PopoverBody>
+    </PopoverContent>
+    <PopoverArrow />
+  </PopoverLayer>
+</Popover>;
+```
+
+### 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  type PopoverSize,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+const sizes: PopoverSize[] = ['sm', 'md', 'lg'];
+
+export default function PopoverSizes() {
+  return (
+    <Inline gap={3} justify="center" wrap="wrap">
+      {sizes.map((size) => (
+        <Popover key={size} size={size}>
+          <PopoverTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                {size}
+              </Button>
+            )}
+          />
+          <PopoverLayer>
+            <PopoverContent>
+              <PopoverHeader>
+                <PopoverTitle>Order 10248</PopoverTitle>
+              </PopoverHeader>
+              <PopoverBody>
+                Vins et alcools Chevalier, Reims. Three lines, 440.00 USD, shipped by Federal
+                Shipping on Jul 16.
+              </PopoverBody>
+            </PopoverContent>
+            <PopoverArrow />
+          </PopoverLayer>
+        </Popover>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### As wide as its words, or as wide as the field
+
+width="anchor" reads the anchor’s 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverLayer,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+const warehouses = [
+  { name: 'Seattle', stock: '39 units' },
+  { name: 'Tacoma', stock: '120 units' },
+  { name: 'Portland', stock: 'Out of stock' },
+];
+
+export default function PopoverWidth() {
+  return (
+    <Popover align="start" width="anchor">
+      <PopoverTrigger
+        render={(props) => (
+          <Button {...props} fullWidth tone="secondary" variant="outline">
+            Chai, stock by warehouse
+          </Button>
+        )}
+      />
+      <PopoverLayer>
+        <PopoverContent aria-label="Chai stock by warehouse">
+          <PopoverBody>
+            <DescriptionList>
+              {warehouses.map((warehouse) => (
+                <DescriptionListItem key={warehouse.name}>
+                  <DescriptionListTerm>{warehouse.name}</DescriptionListTerm>
+                  <DescriptionListDescription>{warehouse.stock}</DescriptionListDescription>
+                </DescriptionListItem>
+              ))}
+            </DescriptionList>
+          </PopoverBody>
+        </PopoverContent>
+        <PopoverArrow />
+      </PopoverLayer>
+    </Popover>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverLayer,
+  type PopoverSide,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+const 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.' },
+];
+
+export default function PopoverPlacement() {
+  return (
+    <Inline gap={3} justify="center" wrap="wrap">
+      {sides.map(({ side, text }) => (
+        <Popover key={side} side={side}>
+          <PopoverTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                {side}
+              </Button>
+            )}
+          />
+          <PopoverLayer>
+            <PopoverContent aria-label={`Pickup, ${side}`}>
+              <PopoverBody>{text}</PopoverBody>
+            </PopoverContent>
+            <PopoverArrow />
+          </PopoverLayer>
+        </Popover>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### 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
+
+```tsx
+<Popover align="end">
+  <PopoverAnchor>
+    <Row />
+    <PopoverTrigger render={(props) => <Button {...props}>⋯</Button>} />
+  </PopoverAnchor>
+  <PopoverLayer>{/* … */}</PopoverLayer>
+</Popover>;
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import { Field, FieldLabel } from '@slotted/react/field';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+import { Text } from '@slotted/react/typography';
+
+const customers = [
+  'Alfreds Futterkiste',
+  'Ernst Handel',
+  'Frankenversand',
+  'Königlich Essen',
+  'Wartian Herkku',
+];
+
+export default function PopoverFocus() {
+  const [query, setQuery] = useState('');
+  const matches = customers.filter((name) =>
+    name.toLowerCase().includes(query.trim().toLowerCase()),
+  );
+
+  return (
+    <Popover align="start" initialFocus="input">
+      <PopoverTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            Find a customer
+          </Button>
+        )}
+      />
+      <PopoverLayer>
+        <PopoverContent>
+          <PopoverHeader>
+            <PopoverTitle>Find a customer</PopoverTitle>
+          </PopoverHeader>
+          <PopoverBody>
+            <Stack gap={3}>
+              <Field>
+                <FieldLabel>Company name</FieldLabel>
+                <TextField type="search" value={query} onValueChange={setQuery} />
+              </Field>
+              <Text size="sm" tone="muted">
+                {matches.length === 0 ? 'No customer matches.' : matches.join(', ')}
+              </Text>
+            </Stack>
+          </PopoverBody>
+        </PopoverContent>
+        <PopoverArrow />
+      </PopoverLayer>
+    </Popover>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import { Text } from '@slotted/react/typography';
+
+export default function PopoverDismissal() {
+  const [reason, setReason] = useState('not closed yet');
+
+  return (
+    <Inline align="center" gap={3}>
+      <Popover
+        onOpenChange={(open, request) => {
+          if (!open) setReason(request.reason);
+        }}
+      >
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} tone="secondary" variant="outline">
+              Delivery note
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverTitle>Order 10249 delivery note</PopoverTitle>
+              <PopoverClose />
+            </PopoverHeader>
+            <PopoverBody>
+              Leave at the loading dock behind Toms Spezialitäten. The gate closes at 6:00 PM.
+            </PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+      <Text size="sm" tone="muted">
+        Last closed by: {reason}
+      </Text>
+    </Inline>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+const 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.',
+];
+
+export default function PopoverScrolling() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={(props) => (
+          <Button {...props} tone="secondary" variant="outline">
+            Order 10248 activity
+          </Button>
+        )}
+      />
+      <PopoverLayer>
+        <PopoverContent>
+          <PopoverHeader>
+            <PopoverTitle>Order 10248 activity</PopoverTitle>
+            <PopoverClose />
+          </PopoverHeader>
+          <PopoverBody>
+            <Stack gap={3}>
+              {activity.map((entry) => (
+                <Text key={entry} size="sm">
+                  {entry}
+                </Text>
+              ))}
+            </Stack>
+          </PopoverBody>
+          <PopoverFooter>
+            <Button size="sm" onClick={() => setOpen(false)}>
+              Done
+            </Button>
+          </PopoverFooter>
+        </PopoverContent>
+        <PopoverArrow />
+      </PopoverLayer>
+    </Popover>
+  );
+}
+```
+
+### A panel holding a real form
+
+Fields, a footer of actions and a close control. The controls inside are the consumer’s own and reach their form untouched: the family holds no value of theirs.
+
+Excerpt — not a complete module
+
+```tsx
+<PopoverBody>
+  <Field>
+    <FieldLabel>Amount</FieldLabel>
+    <CurrencyField name="amount" />
+  </Field>
+</PopoverBody>;
+```
+
+### 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
+
+```tsx
+<PopoverFooter>
+  <Tooltip describes="label">
+    <TooltipTrigger render={(props) => <Button {...props}>⌫</Button>} />
+    <TooltipLayer>
+      <TooltipContent>Clear the filters</TooltipContent>
+    </TooltipLayer>
+  </Tooltip>
+</PopoverFooter>;
+```
+
+### 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
+
+```tsx
+<Popover onOpenChange={(open, request) => report(request.reason)}>
+  <PopoverTrigger render={(props) => <Button {...props}>Tab through me</Button>} />
+  <PopoverLayer>{/* … */}</PopoverLayer>
+</Popover>;
+```
+
+### alignment.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  type PopoverAlign,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverLayer,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+const alignments: PopoverAlign[] = ['start', 'center', 'end'];
+
+export default function PopoverAlignment() {
+  return (
+    <Inline gap={3} justify="center" wrap="wrap">
+      {alignments.map((align) => (
+        <Popover key={align} align={align}>
+          <PopoverTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                Align {align}
+              </Button>
+            )}
+          />
+          <PopoverLayer>
+            <PopoverContent aria-label={`Restock, aligned ${align}`}>
+              <PopoverBody>Restock 40 units of Chang from Exotic Liquids by Oct 14.</PopoverBody>
+            </PopoverContent>
+            <PopoverArrow />
+          </PopoverLayer>
+        </Popover>
+      ))}
+    </Inline>
+  );
+}
+```
+
+### arrow-and-offset.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverLayer,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+export default function PopoverArrowAndOffset() {
+  return (
+    <Inline gap={3} justify="center" wrap="wrap">
+      <Popover>
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} tone="secondary" variant="outline">
+              With arrow
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent aria-label="Pickup window">
+            <PopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+      <Popover arrow={false} sideOffset={8}>
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} tone="secondary" variant="outline">
+              No arrow, 8px further
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent aria-label="Pickup window">
+            <PopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+    </Inline>
+  );
+}
+```
+
+### controlled.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import { Radio, RadioGroup } from '@slotted/react/radio-group';
+import { Text } from '@slotted/react/typography';
+
+const pickers = ['Nancy Davolio', 'Andrew Fuller', 'Janet Leverling', 'Margaret Peacock'];
+
+export default function PopoverControlled() {
+  const [open, setOpen] = useState(false);
+  const [picker, setPicker] = useState('Nancy Davolio');
+
+  return (
+    <Inline align="center" gap={3}>
+      <Text size="sm">Order 10251, picked by {picker}</Text>
+      <Popover open={open} onOpenChange={setOpen} align="end">
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} size="sm" tone="secondary" variant="outline">
+              Reassign
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverTitle>Picker for order 10251</PopoverTitle>
+            </PopoverHeader>
+            <PopoverBody>
+              <RadioGroup
+                aria-label="Picker"
+                value={picker}
+                onValueChange={(next) => {
+                  setPicker(next);
+                  setOpen(false);
+                }}
+              >
+                {pickers.map((name) => (
+                  <Radio key={name} value={name}>
+                    {name}
+                  </Radio>
+                ))}
+              </RadioGroup>
+            </PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+    </Inline>
+  );
+}
+```
+
+### defaults.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverDefaultsProvider,
+  PopoverLayer,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+const 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.' },
+];
+
+export default function PopoverDefaults() {
+  return (
+    <PopoverDefaultsProvider arrow={false} size="sm">
+      <Inline gap={3} justify="center" wrap="wrap">
+        {terms.map((term) => (
+          <Popover key={term.label}>
+            <PopoverTrigger
+              render={(props) => (
+                <Button {...props} tone="secondary" variant="outline">
+                  {term.label}
+                </Button>
+              )}
+            />
+            <PopoverLayer>
+              <PopoverContent aria-label={term.label}>
+                <PopoverBody>{term.text}</PopoverBody>
+              </PopoverContent>
+              <PopoverArrow />
+            </PopoverLayer>
+          </Popover>
+        ))}
+        <Popover arrow>
+          <PopoverTrigger
+            render={(props) => (
+              <Button {...props} tone="secondary" variant="outline">
+                Cash in advance
+              </Button>
+            )}
+          />
+          <PopoverLayer>
+            <PopoverContent aria-label="Cash in advance">
+              <PopoverBody>The order ships once the payment has cleared.</PopoverBody>
+            </PopoverContent>
+            <PopoverArrow />
+          </PopoverLayer>
+        </Popover>
+      </Inline>
+    </PopoverDefaultsProvider>
+  );
+}
+```
+
+### form.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import { Field, FieldLabel } from '@slotted/react/field';
+import { Inline } from '@slotted/react/inline';
+import { NumberField } from '@slotted/react/number-field';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+import { Text } from '@slotted/react/typography';
+
+export default function PopoverForm() {
+  const [open, setOpen] = useState(false);
+  const [onHand, setOnHand] = useState(39);
+  const [count, setCount] = useState<number | null>(39);
+  const [note, setNote] = useState('');
+  const dirty = count !== onHand || note !== '';
+
+  return (
+    <Inline align="center" gap={3}>
+      <Text size="sm">Chai: {onHand} units on hand</Text>
+      <Popover
+        initialFocus="input"
+        open={open}
+        onOpenChange={(next, request) => {
+          if (!next && request.reason === 'outsidePress' && dirty) {
+            request.cancel();
+            return;
+          }
+          if (next) {
+            setCount(onHand);
+            setNote('');
+          }
+          setOpen(next);
+        }}
+      >
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} size="sm" tone="secondary" variant="outline">
+              Adjust stock
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverTitle>Adjust Chai stock</PopoverTitle>
+              <PopoverDescription>Seattle warehouse, bin A-14</PopoverDescription>
+            </PopoverHeader>
+            <PopoverBody>
+              <Stack gap={3}>
+                <Field>
+                  <FieldLabel>Counted quantity</FieldLabel>
+                  <NumberField end="units" min={0} value={count} onValueChange={setCount} />
+                </Field>
+                <Field>
+                  <FieldLabel>Reason</FieldLabel>
+                  <TextField value={note} onValueChange={setNote} />
+                </Field>
+              </Stack>
+            </PopoverBody>
+            <PopoverFooter>
+              <Button size="sm" tone="secondary" variant="ghost" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                disabled={count === null}
+                onClick={() => {
+                  if (count !== null) setOnHand(count);
+                  setOpen(false);
+                }}
+              >
+                Save
+              </Button>
+            </PopoverFooter>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+    </Inline>
+  );
+}
+```
+
+### narrow.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+
+export default function PopoverNarrow() {
+  return (
+    <Inline justify="end">
+      <Popover align="start" size="lg">
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} tone="secondary" variant="outline">
+              Volume pricing
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverTitle>Volume pricing for Chai</PopoverTitle>
+            </PopoverHeader>
+            <PopoverBody>
+              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.
+            </PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+    </Inline>
+  );
+}
+```
+
+### table-row.tsx
+
+Example
+
+```tsx
+import { Button } from '@slotted/react/button';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from '@slotted/react/description-list';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/table';
+
+const 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',
+  },
+];
+
+export default function PopoverTableRow() {
+  return (
+    <Table columns={3}>
+      <TableContent>
+        <TableCaption>Shipped orders</TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Order</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader>Shipment</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {orders.map((order) => (
+            <Popover key={order.id} align="end">
+              <PopoverAnchor
+                render={(props) => (
+                  <TableRow {...props} value={order.id}>
+                    <TableRowHeader>{order.id}</TableRowHeader>
+                    <TableCell>{order.customer}</TableCell>
+                    <TableCell>
+                      <PopoverTrigger
+                        render={(triggerProps) => (
+                          <Button {...triggerProps} size="sm" tone="secondary" variant="ghost">
+                            Tracking
+                          </Button>
+                        )}
+                      />
+                    </TableCell>
+                  </TableRow>
+                )}
+              />
+              <PopoverLayer>
+                <PopoverContent>
+                  <PopoverHeader>
+                    <PopoverTitle>Order {order.id} shipment</PopoverTitle>
+                    <PopoverClose />
+                  </PopoverHeader>
+                  <PopoverBody>
+                    <DescriptionList>
+                      <DescriptionListItem>
+                        <DescriptionListTerm>Carrier</DescriptionListTerm>
+                        <DescriptionListDescription>{order.carrier}</DescriptionListDescription>
+                      </DescriptionListItem>
+                      <DescriptionListItem>
+                        <DescriptionListTerm>Tracking</DescriptionListTerm>
+                        <DescriptionListDescription>{order.tracking}</DescriptionListDescription>
+                      </DescriptionListItem>
+                      <DescriptionListItem>
+                        <DescriptionListTerm>Shipped</DescriptionListTerm>
+                        <DescriptionListDescription>{order.shipped}</DescriptionListDescription>
+                      </DescriptionListItem>
+                    </DescriptionList>
+                  </PopoverBody>
+                </PopoverContent>
+                <PopoverArrow />
+              </PopoverLayer>
+            </Popover>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### toolbar.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+
+import { Button } from '@slotted/react/button';
+import { Checkbox } from '@slotted/react/checkbox';
+import { CheckboxGroup } from '@slotted/react/checkbox-group';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverLayer,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@slotted/react/popover';
+import { Toolbar, ToolbarSpacer } from '@slotted/react/toolbar';
+import { Text } from '@slotted/react/typography';
+
+const 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 },
+];
+
+export default function PopoverToolbar() {
+  const [shown, setShown] = useState<readonly string[]>(['pending', 'shipped']);
+  const count = statuses
+    .filter((status) => shown.includes(status.value))
+    .reduce((sum, status) => sum + status.orders, 0);
+
+  return (
+    <Toolbar aria-label="Orders">
+      <Popover align="start">
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} size="sm" tone="secondary" variant="ghost">
+              Status
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverTitle>Show orders that are</PopoverTitle>
+            </PopoverHeader>
+            <PopoverBody>
+              <CheckboxGroup aria-label="Status" value={shown} onValueChange={setShown}>
+                {statuses.map((status) => (
+                  <Checkbox key={status.value} value={status.value}>
+                    {status.label}
+                  </Checkbox>
+                ))}
+              </CheckboxGroup>
+            </PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+      <Popover align="start">
+        <PopoverTrigger
+          render={(props) => (
+            <Button {...props} size="sm" tone="secondary" variant="ghost">
+              Columns
+            </Button>
+          )}
+        />
+        <PopoverLayer>
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverTitle>Columns</PopoverTitle>
+            </PopoverHeader>
+            <PopoverBody>
+              <CheckboxGroup aria-label="Columns" defaultValue={['customer', 'total']}>
+                <Checkbox value="customer">Customer</Checkbox>
+                <Checkbox value="ship-via">Ship via</Checkbox>
+                <Checkbox value="total">Total</Checkbox>
+              </CheckboxGroup>
+            </PopoverBody>
+          </PopoverContent>
+          <PopoverArrow />
+        </PopoverLayer>
+      </Popover>
+      <ToolbarSpacer />
+      <Text size="sm" tone="muted">
+        {count} orders
+      </Text>
+    </Toolbar>
+  );
+}
+```