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

package/dist/docs/command-palette.md

@@ -0,0 +1,467 @@
+<!-- index: ./index.md -->
+# command-palette
+
+`data-ui="command-palette"` · Searchable dialog of commands and destinations.
+
+## Import
+
+```tsx
+import { CommandPalette, CommandPaletteDefaultsProvider, CommandPaletteTrigger } from '@slotted/react';
+```
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette groups={groups} items={items} onSelect={(item) => run(item.id)}>
+  <CommandPaletteTrigger render={(props) => <Button {...props}>Search</Button>} />
+</CommandPalette>;
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | div | yes |
+| `trigger` | button | no |
+| `header` | div | yes |
+| `search` | span | no |
+| `busy` | span | no |
+| `pages` | ol | no |
+| `page` | button | no |
+| `input` | input | yes |
+| `clear` | button | yes |
+| `close` | button | no |
+| `list` | div | yes |
+| `group` | div | no |
+| `group-label` | div | no |
+| `item` | div \| a | no |
+| `icon` | span | no |
+| `label` | span | no |
+| `match` | mark | no |
+| `description` | span | no |
+| `meta` | span | no |
+| `shortcut` | span | no |
+| `arrow` | span | no |
+| `separator` | div | no |
+| `empty` | div | no |
+| `status` | div | yes |
+| `placeholder` | div | no |
+| `footer` | div | no |
+| `hint` | span | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `items` | `CommandPaletteItem[]` | — | CommandPalette | The commands: id, label, keywords, description, group, icon, meta, shortcut, href, target, disabled, onSelect, children |
+| `groups` | `CommandGroup[]` | — | CommandPalette | The headings and their order; a group not listed is drawn after them under its own id |
+| `rank` | `CommandRanker \| null` | the core ranker | CommandPalette | (item, query) => number \| null. Absent takes the locale-sensitive core ranker; null shows the items as they came |
+| `locale` | `string` | — | CommandPalette | BCP 47, for the comparison the default ranker and the match mark make |
+| `limit` | `number` | — | CommandPalette | How many rows to draw at most, across groups in reading order |
+| `open` | `boolean` | — | CommandPalette | The consumer’s value; present at all puts the layer in controlled mode |
+| `defaultOpen` | `boolean` | false | CommandPalette | The value an uncontrolled palette starts from, read once |
+| `query` | `string` | — | CommandPalette | The consumer’s text; present at all puts the query in controlled mode |
+| `defaultQuery` | `string` | '' | CommandPalette | The text an uncontrolled palette starts from |
+| `highlightedId` | `string \| null` | — | CommandPalette | The current row, controlled |
+| `defaultHighlightedId` | `string \| null` | null | CommandPalette | The current row an uncontrolled palette starts from; autoHighlight moves it to the first row |
+| `pages` | `string[]` | — | CommandPalette | The ids of the open pages, oldest first, controlled |
+| `defaultPages` | `string[]` | [] | CommandPalette | The pages an uncontrolled palette starts on |
+| `recent` | `string[]` | — | CommandPalette | The ids the reader ran recently, newest first, controlled |
+| `defaultRecent` | `string[]` | [] | CommandPalette | The recents an uncontrolled palette starts with |
+| `presentation` | `'dialog' \| 'inline'` | dialog | CommandPalette | dialog composes the dialog family; inline draws the panel where it was written |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | CommandPalette | The dialog’s measure and the row’s control step |
+| `outsidePress` | `'close' \| 'none'` | close | CommandPalette | Whether a press on the scrim closes the palette |
+| `loop` | `boolean` | true | CommandPalette | Whether ArrowDown on the last row wraps to the first |
+| `autoHighlight` | `boolean` | true | CommandPalette | Whether the first enabled row is current on open and after every change of the rows |
+| `closeOnSelect` | `boolean` | true | CommandPalette | Whether running a row closes the palette; keepOpen() on the request holds it open once |
+| `clearOnClose` | `boolean` | true | CommandPalette | Whether closing empties the query and the pages, each through its own request |
+| `highlightMatch` | `boolean` | true | CommandPalette | Whether the run the query matched is marked in the label |
+| `hotkey` | `string \| null` | mod+k | CommandPalette | The chord that opens the palette from anywhere; null for none. A bare key stays quiet in an editable field |
+| `recentLimit` | `number` | 5 | CommandPalette | How many recents are kept |
+| `loading` | `boolean` | false | CommandPalette | The ring in the header, three skeleton rows when there is nothing to show, aria-busy on the list, the loading message in the status row |
+| `disabled` | `boolean` | false | CommandPalette | Disables the field, the trigger and the hotkey |
+| `messages` | `Partial<CommandPaletteMessages>` | — | CommandPalette | Words laid over the language in force, key by key: the dialog’s name (label), the field’s name and placeholder (input, placeholder), the empty, loading, count and error sentences, the recents heading, the clear, close and back controls, and the footer’s hints |
+| `children` | `ReactNode` | — | CommandPalette | The trigger, rendered where it was written; the panel is the family’s and goes into the layer |
+| `render` | `(props: CommandPaletteTriggerRootProps) => ReactNode` | — | CommandPaletteTrigger | Substitutes the trigger’s element. Attach the ref it hands you beside your own: it is the layer’s focus origin |
+| `renderItem` | `(item, state: { current, disabled, pending, label, query }) => ReactNode` | — | CommandPalette | Replaces the row’s content; the option element and its wiring stay the family’s. state.label is the marked label |
+| `empty` | `ReactNode` | — | CommandPalette | Replaces the empty message |
+| `footer` | `ReactNode \| null` | — | CommandPalette | Replaces the footer; null removes it |
+| `inputProps` | `ComponentPropsWithRef<'input'>` | — | CommandPalette | Native props for the field, ref included; onKeyDown and onChange run before the family’s and preventDefault() skips it |
+| `container` | `Element \| null` | — | CommandPalette | A parent for the layer alone, instead of the portal root made beside the trigger |
+| `ref` | `Ref<CommandPaletteHandle>` | — | CommandPalette | open(), close(), toggle(), focus(), setQuery(), scrollToId(), and the input element |
+| `CommandPaletteDefaultsProvider` | `Partial<CommandPaletteDefaults>` | — | a subtree | Every axis, set once; an explicit prop still wins |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `onOpenChange` | `(open: boolean, request: ChangeRequest<boolean>)` | Before the palette opens or closes; reason is pointer, keyboard, escape, outsidePress, select, dismiss or programmatic. request.cancel() refuses it. |
+| `onQueryChange` | `(query: string, request: ChangeRequest<string>)` | Before the query moves: keyboard as the reader types, clear from the clear control or Escape, select when a page opens, programmatic on close and from the handle. |
+| `onHighlightedIdChange` | `(id: string \| null, request: ChangeRequest<string \| null>)` | Before the current row moves: pointer, keyboard, or programmatic when the rows changed under it. |
+| `onPagesChange` | `(pages: readonly string[], request: ChangeRequest<readonly string[]>)` | Before a page opens or closes: select from Enter on a row with children, pointer from a click on one or on the trail, keyboard from Backspace or Escape, programmatic on close. |
+| `onRecentChange` | `(recent: readonly string[], request: ChangeRequest<readonly string[]>)` | After a row ran, with its id moved to the front and the array cut at recentLimit; reason select. |
+| `onSelect` | `(item, request: { item, reason, source, keepOpen() })` | When a row runs, after the row’s own onSelect and after a returned promise fulfilled; reason pointer or keyboard. Never for a disabled row or a row that opens a page. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `presentation` | `dialog`, `inline` | `dialog` |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `outsidePress` | `close`, `none` | `close` |
+| `loop` | `true`, `false` | `true` |
+| `autoHighlight` | `true`, `false` | `true` |
+| `closeOnSelect` | `true`, `false` | `true` |
+| `clearOnClose` | `true`, `false` | `true` |
+| `highlightMatch` | `true`, `false` | `true` |
+| `loading` | `true`, `false` | `false` |
+| `disabled` | `true`, `false` | `false` |
+
+## Rules
+
+- The field carries role="combobox" with aria-expanded="true", aria-controls naming the list and aria-autocomplete="list"; the list carries role="listbox" and each row role="option". DOM focus stays on the field for the whole interaction and the current row is named by aria-activedescendant and marked aria-selected — the WAI-ARIA combobox pattern with a listbox popup, whose note says exactly this.
+- The layer is the dialog family’s: role="dialog", aria-modal, the page inert behind the scrim, focus contained and returned to the trigger. Its name is the label message; the field’s name is the input message, and the list borrows it.
+- A row with a shortcut carries aria-keyshortcuts in the platform’s own words — Meta+Shift+D on a Mac, Control+Shift+D elsewhere — while the drawn keys are aria-hidden; a sequence has no syntax in the attribute and is drawn only. A disabled row is announced with aria-disabled, stays in the list, and is skipped by every movement key.
+- The result count, the loading sentence and the failure of a rejected handler are one visually hidden role="status" row, spoken through the shared live announcer so the same sentence is never said twice in a row.
+- Escape is three steps in a fixed order — clear the query, return one page, close — so a reader who typed does not lose the palette on the first press; the footer draws the same keys the family answers.
+- The panel answers its own width: below 360 pixels the description and the meta go and the binding stays; inside a dialog on a narrow screen the panel takes the whole layer.
+
+## Tokens
+
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-command-palette-active`, `--slotted-command-palette-border-color`, `--slotted-command-palette-footer-surface`, `--slotted-command-palette-highlight`, `--slotted-command-palette-highlight-ring`, `--slotted-command-palette-hover`, `--slotted-command-palette-item-radius`, `--slotted-command-palette-list-max-block-size`, `--slotted-command-palette-list-padding`, `--slotted-command-palette-measure`, `--slotted-command-palette-page-surface`, `--slotted-command-palette-placeholder-fade`, `--slotted-command-palette-radius`, `--slotted-command-palette-separator-color`, `--slotted-command-palette-shadow`, `--slotted-command-palette-surface`, `--slotted-command-palette-text`, `--slotted-command-palette-text-muted`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-lg`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+
+## Examples
+
+### Every part, inline
+
+The same panel with no layer around it, so every part can be pointed at: the header with its mark and clear, the grouped list, the current row, a row with a description and a binding, and the footer of hints.
+
+Excerpt — not a complete module
+
+```tsx
+const items = [
+  {
+    id: 'deploy',
+    label: 'Deploy to production',
+    description: 'Ship the current release of api-gateway',
+    keywords: ['ship', 'release'],
+    group: 'actions',
+    icon: <RocketIcon />,
+    shortcut: 'mod+shift+d',
+    onSelect: () => deploy(),
+  },
+];
+```
+
+### Groups, in the order the product declares
+
+groups gives each heading its label and its place; an item whose group is not listed lands under its own id, after them, and an item with no group closes the list.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette
+  groups={[
+    { id: 'nav', label: 'Go to' },
+    { id: 'actions', label: 'Actions' },
+  ]}
+  items={items}
+  presentation="inline"
+/>;
+```
+
+### Ranking, and the adapter
+
+Type “dep”: a label that starts with it outranks a word that starts with it, which outranks a run inside a word, which outranks a keyword; groups reorder by their best row. The third panel hands the order to a ranker of the product’s own.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette defaultQuery="dep" items={items} presentation="inline" />;
+
+// A server has already ranked the list: show it as it came.
+<CommandPalette items={results} presentation="inline" rank={null} />;
+
+// Or score it yourself.
+<CommandPalette
+  items={items}
+  presentation="inline"
+  rank={(item, query) => (item.label.toLowerCase().includes(query) ? item.weight : null)}
+/>;
+```
+
+### Pages, stacked
+
+A row with children opens a page: the trail appears before the field, the children take the list, and Backspace on an empty query or Escape returns one page. pages is state the product may own.
+
+Excerpt — not a complete module
+
+```tsx
+const items = [
+  {
+    id: 'team',
+    label: 'Switch team…',
+    children: [
+      { id: 'acme', label: 'Acme Robotics', onSelect: () => switchTo('acme') },
+      { id: 'globex', label: 'Globex Freight', onSelect: () => switchTo('globex') },
+    ],
+  },
+];
+
+<CommandPalette defaultPages={['team']} items={items} presentation="inline" />;
+```
+
+### What the reader ran last
+
+With nothing typed, the recents open the list under their own heading; running a row moves it to the front and cuts the array at recentLimit. Persisting it is the product’s — it receives the array.
+
+Excerpt — not a complete module
+
+```tsx
+const [recent, setRecent] = useState(() => JSON.parse(localStorage.getItem('recent') ?? '[]'));
+
+<CommandPalette
+  items={items}
+  onRecentChange={(next) => {
+    setRecent(next);
+    localStorage.setItem('recent', JSON.stringify(next));
+  }}
+  presentation="inline"
+  recent={recent}
+  recentLimit={3}
+/>;
+```
+
+### Shortcuts, drawn for the platform
+
+One notation, mod+shift+d, becomes ⌘⇧D on a Mac and Ctrl+Shift+D elsewhere, and is announced as Meta+Shift+D or Control+Shift+D. A sequence such as g i is drawn and not announced. The palette binds none of them: the three lines below do.
+
+Excerpt — not a complete module
+
+```tsx
+useEffect(() => {
+  const onKey = (event: KeyboardEvent) => {
+    const hit = items.find(
+      (item) => item.shortcut && matchesShortcut(event, item.shortcut, platform),
+    );
+    if (hit) hit.onSelect?.();
+  };
+  document.addEventListener('keydown', onKey);
+  return () => document.removeEventListener('keydown', onKey);
+}, [items, platform]);
+```
+
+### Rows that are places
+
+A row with href renders as a link with role option: Enter follows it, ⌘Enter opens it in a new tab because the browser, not the palette, answers the modifier. meta says what kind of place it is.
+
+Excerpt — not a complete module
+
+```tsx
+const items = [
+  { id: 'billing', label: 'Billing', href: '/settings/billing', meta: 'Page' },
+  { id: 'invoice', label: 'Download last invoice', onSelect: () => download() },
+];
+```
+
+### A command that takes a while
+
+A handler that returns a promise keeps the palette open and the row busy, refuses a second run of the same row until it settles, then closes; a rejection keeps it open and the status row says why. Press the first row and wait two seconds.
+
+Excerpt — not a complete module
+
+```tsx
+const items = [
+  { id: 'restart', label: 'Restart api-gateway', onSelect: () => api.restart('api-gateway') },
+  {
+    id: 'purge',
+    label: 'Purge CDN cache',
+    onSelect: () => Promise.reject(new Error('Not allowed')),
+  },
+];
+```
+
+### While the results travel
+
+loading swaps the magnifier for the ring, draws three skeleton rows when there is nothing to show yet, and says the loading message in the status row. The palette debounces nothing: the product does, in three lines.
+
+Excerpt — not a complete module
+
+```tsx
+const [query, setQuery] = useState('');
+const [loading, setLoading] = useState(false);
+const [results, setResults] = useState([]);
+
+useEffect(() => {
+  setLoading(true);
+  const timer = setTimeout(
+    () =>
+      search(query)
+        .then(setResults)
+        .finally(() => setLoading(false)),
+    200,
+  );
+  return () => clearTimeout(timer);
+}, [query]);
+
+<CommandPalette
+  items={results}
+  loading={loading}
+  onQueryChange={setQuery}
+  query={query}
+  rank={null}
+/>;
+```
+
+### Nothing matched
+
+The empty part takes the list, the count row says “0 results”, and the root carries data-empty. The second panel replaces the sentence with the product’s own node.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette
+  defaultQuery="xylophone"
+  empty={<span>No command matches. Try a service name.</span>}
+  items={items}
+  presentation="inline"
+/>;
+```
+
+### Without a layer
+
+presentation="inline" draws the panel where it was written — here inside a popover on an “Assign to” button — with no scrim, no hotkey and no Escape to close. It is the filtered menu that menu refused.
+
+Excerpt — not a complete module
+
+```tsx
+<Popover>
+  <PopoverTrigger render={(props) => <Button {...props}>Assign to…</Button>} />
+  <PopoverContent>
+    <CommandPalette items={people} presentation="inline" footer={null} />
+  </PopoverContent>
+</Popover>;
+```
+
+### Three measures
+
+size is the dialog’s measure — 24, 32 and 42 rems — and the row’s step: sm rows read the small control geometry, lg rows the large, and the header stands one step above the rows in each.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette items={items} presentation="inline" size="sm" />;
+<CommandPalette items={items} presentation="inline" size="lg" />;
+```
+
+### Every state a row can be in
+
+At rest, current from the keyboard, busy while its handler runs, disabled but announced and kept in place, opening a page, and a link. Hover a row that is not current for the quieter wash.
+
+Excerpt — not a complete module
+
+```tsx
+const items = [
+  {
+    id: 'delete',
+    label: 'Delete workspace',
+    description: 'Requires the owner role',
+    disabled: true,
+  },
+];
+```
+
+### Content the family did not choose
+
+A German label of sixty characters, a description longer than the row, a binding of four keys and a row with no icon beside rows that have one: the label gives way, the binding never does, and the icon column keeps every label on one line.
+
+Excerpt — not a complete module
+
+```tsx
+const items = [
+  {
+    id: 'sync',
+    label: 'Benachrichtigungseinstellungen für alle Arbeitsbereiche synchronisieren',
+    shortcut: 'mod+shift+alt+p',
+  },
+];
+```
+
+### The chord that opens it
+
+mod+k by default, matched on the document in the capture phase with preventDefault, so Firefox’s search bar does not answer first. A bare key such as / stays quiet inside a text field; hotkey={null} turns it off. Focus the page and press ⌘K or Ctrl+K.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette hotkey="mod+p" items={items} />;
+<CommandPalette hotkey="/" items={items} />;
+<CommandPalette hotkey={null} items={items} />;
+```
+
+### Set once for the application
+
+The provider holds every axis, and SlottedProvider the language the family speaks: the panel below reads Portuguese words, a size and a hotkey it did not state itself.
+
+Excerpt — not a complete module
+
+```tsx
+<SlottedProvider locale="pt-BR">
+  <CommandPaletteDefaultsProvider hotkey="mod+p" size="sm">
+    <App />
+  </CommandPaletteDefaultsProvider>
+</SlottedProvider>;
+```
+
+### In an application’s top bar
+
+The trigger is a search-shaped Button with a Kbd in it, rendered through render so the palette hands it the wiring and the ref; the row content is the product’s own through renderItem, with an avatar where the icon column is.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette
+  items={items}
+  renderItem={(item, state) => (
+    <>
+      <span data-part="icon">
+        <Avatar name={item.label} size="xs" />
+      </span>
+      <span data-part="label">{state.label}</span>
+    </>
+  )}
+>
+  <CommandPaletteTrigger
+    render={(props) => (
+      <Button {...props} tone="secondary" variant="outline">
+        Search <Kbd size="sm">⌘K</Kbd>
+      </Button>
+    )}
+  />
+</CommandPalette>;
+```
+
+### The keys
+
+Arrows move and wrap, PageUp and PageDown move ten and stop, Ctrl+Home and Ctrl+End reach the ends, Home and End keep moving the caret, Enter runs, Escape clears then returns a page then closes, Backspace on an empty query returns a page.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette items={items} presentation="inline" />;
+```
+
+### What a screen reader meets
+
+The dialog is named by the label message, the field by the input message, the list by the same; the current row is aria-selected and named by aria-activedescendant; the count, the wait and a failure are one live region. Open the tree to read it.
+
+Excerpt — not a complete module
+
+```tsx
+<CommandPalette
+  items={items}
+  messages={{ input: 'Search deployments', label: 'Deployment commands' }}
+/>;
+```

package/dist/docs/container.json

@@ -0,0 +1,156 @@
+{
+  "family": "container",
+  "ui": "container",
+  "binding": "react",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Centers content at a maximum width."
+  },
+  "axes": {
+    "size": [
+      "measure",
+      "content",
+      "wide",
+      "full",
+      "bleed"
+    ],
+    "inset": [
+      "0",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ],
+    "align": [
+      "center",
+      "start",
+      "end"
+    ]
+  },
+  "members": {
+    "container": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "content",
+        "inset": "6",
+        "align": "center"
+      },
+      "capabilities": [
+        "size"
+      ],
+      "states": [
+        "default"
+      ],
+      "parts": [
+        "root",
+        "breakout"
+      ]
+    }
+  },
+  "docs": {
+    "container": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "size",
+          "type": "'measure' | 'content' | 'wide' | 'full' | 'bleed'",
+          "defaultValue": "content",
+          "appliesTo": "Container",
+          "description": "What the column bounds. measure is the comfortable reading line, counted in characters; full is the space the frame gives up to --slotted-container-full, 120rem; bleed removes the maximum. Both keep the inset"
+        },
+        {
+          "name": "inset",
+          "type": "0 | 1 | … | 12",
+          "defaultValue": "6",
+          "appliesTo": "Container",
+          "description": "The gap between the column and the edge of the space the container was given, as a step on the space scale"
+        },
+        {
+          "name": "align",
+          "type": "'center' | 'start' | 'end'",
+          "defaultValue": "center",
+          "appliesTo": "Container",
+          "description": "Where the column sits when there is space left over. Logical, so a right-to-left document mirrors"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Container, ContainerBreakout",
+          "description": "Renders a different root element"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "Container has no role and no ARIA. It bounds what the consumer wrote, and the children keep whatever semantics they already had. Render a main, a section or an article through render so the document says what it means.",
+        "size=\"measure\" bounds the line at 65ch. WCAG 2.2 SC 1.4.8 asks for no more than 80 characters per line, and technique C20 asks that the width be set in a relative measurement; ch is relative to the inherited type, so the bound follows a reader who enlarges the text rather than fighting them.",
+        "Every other step is stated in rem, so the whole page grows with the browser zoom WCAG SC 1.4.4 requires.",
+        "The column collapses continuously through min(), and every child is allowed to shrink below its content, so a long unbroken token overflows its own box rather than widening the page — the two-axis scroll SC 1.4.10 refuses.",
+        "Nothing reorders children. Visual order stays DOM order, which is what SC 1.3.2 asks for, and a breakout is read where it is written.",
+        "The root is a grid, so a run of text written directly inside it becomes an item nothing can place in the column. Wrap text in an element."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-container-content",
+    "--slotted-container-full",
+    "--slotted-container-measure",
+    "--slotted-container-wide",
+    "--slotted-space-1",
+    "--slotted-space-10",
+    "--slotted-space-11",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9"
+  ],
+  "examples": [
+    {
+      "id": "container-react-page",
+      "title": "A reading page holding a table that reaches both edges",
+      "note": null,
+      "language": "tsx",
+      "source": "<Container render={(props) => <main {...props} />} size=\"measure\">\n  <Stack gap={6}>\n    <Heading level={1}>Usage this month</Heading>\n    <Text>Billed per seat, settled with the invoice.</Text>\n  </Stack>\n  <ContainerBreakout>\n    <UsageTable />\n  </ContainerBreakout>\n  <Text>Bounded content resumes at the same column.</Text>\n</Container>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "container-react-nested",
+      "title": "Bounded content returns inside a breakout",
+      "note": null,
+      "language": "tsx",
+      "source": "<Container size=\"measure\">\n  <Article />\n  <ContainerBreakout style={{ background: 'var(--slotted-surface-sunken)' }}>\n    <Container size=\"wide\" inset={9}>\n      <RelatedAccounts />\n    </Container>\n  </ContainerBreakout>\n</Container>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "container-react-defaults",
+      "title": "An application decides once what its pages are bounded to",
+      "note": null,
+      "language": "tsx",
+      "source": "<ContainerDefaultsProvider inset={8} size=\"wide\">\n  <App />\n</ContainerDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "container-maxima",
+      "title": "Retuning the maxima, which is the whole theming story",
+      "note": null,
+      "language": "css",
+      "source": "[data-slotted-theme='acme'] {\n  --slotted-container-measure: 60ch;\n  --slotted-container-content: 48rem;\n  --slotted-container-wide: 90rem;\n}\n",
+      "verdict": "excerpt"
+    }
+  ]
+}