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

package/dist/docs/container.md

@@ -0,0 +1,90 @@
+<!-- index: ./index.md -->
+# container
+
+`data-ui="container"` · Centers content at a maximum width.
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<Container render={(props) => <main {...props} />} size="measure">
+  <Stack gap={6}>
+    <Heading level={1}>Usage this month</Heading>
+    <Text>Billed per seat, settled with the invoice.</Text>
+  </Stack>
+  <ContainerBreakout>
+    <UsageTable />
+  </ContainerBreakout>
+  <Text>Bounded content resumes at the same column.</Text>
+</Container>;
+```
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `size` | `'measure' \| 'content' \| 'wide' \| 'full' \| 'bleed'` | content | Container | 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 |
+| `inset` | `0 \| 1 \| … \| 12` | 6 | Container | The gap between the column and the edge of the space the container was given, as a step on the space scale |
+| `align` | `'center' \| 'start' \| 'end'` | center | Container | Where the column sits when there is space left over. Logical, so a right-to-left document mirrors |
+| `render` | `(props) => ReactNode` | — | Container, ContainerBreakout | Renders a different root element |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `size` | `measure`, `content`, `wide`, `full`, `bleed` | `content` |
+| `inset` | `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12` | `6` |
+| `align` | `center`, `start`, `end` | `center` |
+
+## Rules
+
+- 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
+
+### Bounded content returns inside a breakout
+
+Excerpt — not a complete module
+
+```tsx
+<Container size="measure">
+  <Article />
+  <ContainerBreakout style={{ background: 'var(--slotted-surface-sunken)' }}>
+    <Container size="wide" inset={9}>
+      <RelatedAccounts />
+    </Container>
+  </ContainerBreakout>
+</Container>;
+```
+
+### An application decides once what its pages are bounded to
+
+Excerpt — not a complete module
+
+```tsx
+<ContainerDefaultsProvider inset={8} size="wide">
+  <App />
+</ContainerDefaultsProvider>;
+```
+
+### Retuning the maxima, which is the whole theming story
+
+Excerpt — not a complete module
+
+```css
+[data-slotted-theme='acme'] {
+  --slotted-container-measure: 60ch;
+  --slotted-container-content: 48rem;
+  --slotted-container-wide: 90rem;
+}
+```

package/dist/docs/context-menu.json

@@ -0,0 +1,243 @@
+{
+  "family": "context-menu",
+  "ui": "context-menu",
+  "binding": "react",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Menu opened by right click on a target."
+  },
+  "axes": {
+    "longPress": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "contextMenu": {
+      "nativeElement": "div",
+      "defaults": {
+        "longPress": true,
+        "longPressDelay": 500,
+        "disabled": false
+      },
+      "capabilities": [
+        "open",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "open",
+        "pressed",
+        "disabled"
+      ],
+      "parts": [
+        "root"
+      ]
+    }
+  },
+  "docs": {
+    "contextMenu": {
+      "imports": {
+        "source": "import { ContextMenu, ContextMenuTrigger, ContextMenuDefaultsProvider } from '@slotted/react';\nimport { MenuContent, MenuItem, MenuSeparator } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The target: the region the menu opens on. It carries data-ui=\"context-menu\", data-open while the menu shows, data-pressed during a long press and data-disabled while the browser's menu is the one that opens. The menu is the menu family unchanged — data-ui=\"menu\"."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean | undefined",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenu",
+          "description": "Whether the menu shows. Present at all puts the menu in controlled mode: it asks and waits."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenu",
+          "description": "The value an uncontrolled menu starts from, read once. A menu open from the start hangs from the target."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenu",
+          "description": "Asked before the menu opens or closes, with the reason and the originating event, and refusable."
+        },
+        {
+          "name": "longPress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "ContextMenu",
+          "description": "Whether holding the target on touch and pen opens the menu."
+        },
+        {
+          "name": "longPressDelay",
+          "type": "number",
+          "defaultValue": "500",
+          "appliesTo": "ContextMenu",
+          "description": "Milliseconds the press is held before the menu opens; movement past ten pixels or lifting first cancels it."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "ContextMenu",
+          "description": "The family never opens and the browser's own menu passes through. The target carries data-disabled."
+        },
+        {
+          "name": "size, side, align, closeOnSelect, loop, typeahead, …",
+          "type": "MenuProps",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenu",
+          "description": "Every prop of Menu except anchor and finalFocus, which the family decides, reaches the menu it renders."
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenuTrigger",
+          "description": "Renders the consumer's own element as the target — a tr, a li — with the identity, the state and the listeners on it."
+        }
+      ],
+      "composition": [
+        {
+          "name": "ContextMenuDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets longPress, longPressDelay and disabled once for a subtree. A menu that states one itself still wins. The surface reads MenuDefaultsProvider."
+        },
+        {
+          "name": "MenuContent, MenuItem, …",
+          "type": "components",
+          "defaultValue": "—",
+          "appliesTo": "Inside a ContextMenu",
+          "description": "The surface is the menu family unchanged: submenus, checkbox and radio items, groups, shortcuts, typeahead and tone reach the context menu without a second API. Nothing is re-exported."
+        },
+        {
+          "name": "ref",
+          "type": "prop",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenu",
+          "description": "A MenuHandle carrying open(), close() and focus(). open() hangs the menu from the target."
+        },
+        {
+          "name": "aria-label",
+          "type": "attribute",
+          "defaultValue": "—",
+          "appliesTo": "MenuContent",
+          "description": "The surface is named after the target's text unless given one — right for a row, wrong for a canvas."
+        },
+        {
+          "name": "native props",
+          "type": "attributes",
+          "defaultValue": "—",
+          "appliesTo": "ContextMenuTrigger",
+          "description": "Anything a div takes reaches the target, and a consumer's own onContextMenu or onPointerDown runs before the family's; preventDefault from it stops the family."
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: MenuChangeRequest)",
+          "when": "Before the menu opens or closes. The request carries pointer (a secondary click or a long press), keyboard (Shift+F10, the Menu key), escape, outsidePress (a press anywhere else, the target included), select, dismiss or programmatic, the originating event, and cancel(). Moving to a new point while open emits nothing, because open did not change."
+        }
+      ],
+      "accessibility": [
+        "The platform supplies the gesture: the contextmenu event is the secondary click, the Menu key and Shift+F10 on every desktop, and the family answers all three with preventDefault while it is enabled and with nothing while it is disabled, so a reader is never left with no menu at all.",
+        "The family writes no aria-haspopup on the target — it is not permitted on a generic element, and no surveyed library writes it — so a screen reader is not told the region has a menu. That is why every command in a context menu also exists by another path, and the reference page shows the path.",
+        "Focus goes to the first item on open and, on Escape or after a command, back to whatever held it when the menu opened — the checkbox in the row, the tile itself — rather than to a trigger that never had it. A press elsewhere leaves focus where the reader put it.",
+        "The family writes no tabindex: a target the page made focusable can be opened from the keyboard, and one it did not cannot. A tab stop on every wrapped region would be one a grid with roving focus cannot afford."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-width-thin",
+    "--slotted-context-menu-mark-color",
+    "--slotted-context-menu-mark-width",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "The menu hangs from the tile because it opened from script; right-click anywhere on the tile and it moves to the point. The controls under the canvas change the long press and disable the family, which hands the click to the browser.",
+      "language": "tsx",
+      "source": "<ContextMenu>\n  <ContextMenuTrigger className=\"tile\">…</ContextMenuTrigger>\n  <MenuContent aria-label=\"Document actions\">\n    <MenuItem>Open</MenuItem>\n    <MenuItem tone=\"danger\">Move to trash</MenuItem>\n  </MenuContent>\n</ContextMenu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "target",
+      "title": "The target",
+      "note": "The tile is the target and paints nothing at rest; while the menu shows, an inward one-pixel mark laid over the tile says which one the commands act on, following the tile’s own corner. The tile on the right was opened from script, so the menu hangs from it the way a keyboard opening places it. A target wrapped around a card would frame the card’s round corners with a square: make the card the target.",
+      "language": "tsx",
+      "source": "<ContextMenu defaultOpen>\n  <ContextMenuTrigger className=\"tile\" tabIndex={0}>\n    …\n  </ContextMenuTrigger>\n  <MenuContent>…</MenuContent>\n</ContextMenu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "rows",
+      "title": "One menu for many rows",
+      "note": "A list of files with one ContextMenu around all of them. Right-click any row: the request carries the event, the handler reads the row from it, and the menu names the file it acts on. Mounting a menu per row is the shape this composition exists to avoid.",
+      "language": "tsx",
+      "source": "const [file, setFile] = useState<string | null>(null);\n\n<ContextMenu\n  onOpenChange={(open, request) => {\n    if (!open) return;\n    const row = (request.source as Event).target as HTMLElement;\n    setFile(row.closest('[data-file]')?.getAttribute('data-file') ?? null);\n  }}\n>\n  <ContextMenuTrigger render={(props) => <ul {...props} />}>\n    {files.map((name) => (\n      <li key={name} data-file={name}>\n        {name}\n      </li>\n    ))}\n  </ContextMenuTrigger>\n  <MenuContent aria-label={file ?? 'File actions'}>…</MenuContent>\n</ContextMenu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "From the keyboard",
+      "note": "Tab to the tile — it is focusable because the page said so, with tabIndex — and press Shift+F10 or the Menu key. The menu hangs from the tile rather than from wherever the pointer last was, focus lands on the first item, and Escape brings it back to the tile.",
+      "language": "tsx",
+      "source": "<ContextMenu>\n  <ContextMenuTrigger tabIndex={0} aria-label=\"Release notes 4.2\">\n    …\n  </ContextMenuTrigger>\n  <MenuContent>…</MenuContent>\n</ContextMenu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "touch",
+      "title": "On touch",
+      "note": "There is no secondary button on a touch screen: holding the tile for half a second opens the menu at the finger, while text selection and the platform's callout are held off for the duration of the press. Lifting or moving past ten pixels before then cancels it, so a scroll that starts on the tile is still a scroll.",
+      "language": "tsx",
+      "source": "<ContextMenuDefaultsProvider longPressDelay={400}>\n  <ContextMenu>\n    <ContextMenuTrigger>…</ContextMenuTrigger>\n    <MenuContent>…</MenuContent>\n  </ContextMenu>\n</ContextMenuDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "other-path",
+      "title": "The other path",
+      "note": "A context menu is found by convention, and a reader who never right-clicks must still reach every command in it: the same actions sit behind the Actions button on the tile, as a menu opened the ordinary way. The two surfaces are one MenuContent rendered twice.",
+      "language": "tsx",
+      "source": "const actions = (\n  <MenuContent aria-label=\"Document actions\">\n    <MenuItem>Open</MenuItem>\n    <MenuItem>Rename</MenuItem>\n  </MenuContent>\n);\n\n<ContextMenu>\n  <ContextMenuTrigger className=\"tile\">\n    <Menu>\n      <MenuTrigger\n        render={(props) => (\n          <Button {...props} variant=\"ghost\">\n            Actions\n          </Button>\n        )}\n      />\n      {actions}\n    </Menu>\n  </ContextMenuTrigger>\n  {actions}\n</ContextMenu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "disabled",
+      "title": "Disabled",
+      "note": "A disabled family suppresses nothing: the browser's own menu opens on the secondary click, because taking both away would leave the reader with none. The target says so with data-disabled and paints nothing, since the content it wraps still works.",
+      "language": "tsx",
+      "source": "<ContextMenu disabled>\n  <ContextMenuTrigger>…</ContextMenuTrigger>\n  <MenuContent>…</MenuContent>\n</ContextMenu>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Three tiles: at rest nothing is painted; open draws the inward mark in the colour that separates two surfaces; disabled paints nothing either; pressed exists only for the half second a finger is held, and turns off selection rather than painting.",
+      "language": "css",
+      "source": "[data-ui='context-menu'][data-open] {\n  --slotted-context-menu-mark-color: var(--slotted-tone-accent-border);\n}\n[data-ui='context-menu'][data-pressed] {\n  opacity: 0.9;\n}\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/dist/docs/context-menu.md

@@ -0,0 +1,206 @@
+<!-- index: ./index.md -->
+# context-menu
+
+`data-ui="context-menu"` · Menu opened by right click on a target.
+
+## Import
+
+```tsx
+import { ContextMenu, ContextMenuTrigger, ContextMenuDefaultsProvider } from '@slotted/react';
+import { MenuContent, MenuItem, MenuSeparator } from '@slotted/react';
+```
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger className="tile">…</ContextMenuTrigger>
+  <MenuContent aria-label="Document actions">
+    <MenuItem>Open</MenuItem>
+    <MenuItem tone="danger">Move to trash</MenuItem>
+  </MenuContent>
+</ContextMenu>;
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | div, or the element render returns | yes |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean \| undefined` | — | ContextMenu | Whether the menu shows. Present at all puts the menu in controlled mode: it asks and waits. |
+| `defaultOpen` | `boolean` | — | ContextMenu | The value an uncontrolled menu starts from, read once. A menu open from the start hangs from the target. |
+| `onOpenChange` | `(open, request) => void` | — | ContextMenu | Asked before the menu opens or closes, with the reason and the originating event, and refusable. |
+| `longPress` | `boolean` | true | ContextMenu | Whether holding the target on touch and pen opens the menu. |
+| `longPressDelay` | `number` | 500 | ContextMenu | Milliseconds the press is held before the menu opens; movement past ten pixels or lifting first cancels it. |
+| `disabled` | `boolean` | false | ContextMenu | The family never opens and the browser's own menu passes through. The target carries data-disabled. |
+| `size, side, align, closeOnSelect, loop, typeahead, …` | `MenuProps` | — | ContextMenu | Every prop of Menu except anchor and finalFocus, which the family decides, reaches the menu it renders. |
+| `render` | `(props) => ReactNode` | — | ContextMenuTrigger | Renders the consumer's own element as the target — a tr, a li — with the identity, the state and the listeners on it. |
+| `ContextMenuDefaultsProvider` | `component` | — | Application | Sets longPress, longPressDelay and disabled once for a subtree. A menu that states one itself still wins. The surface reads MenuDefaultsProvider. |
+| `MenuContent, MenuItem, …` | `components` | — | Inside a ContextMenu | The surface is the menu family unchanged: submenus, checkbox and radio items, groups, shortcuts, typeahead and tone reach the context menu without a second API. Nothing is re-exported. |
+| `ref` | `prop` | — | ContextMenu | A MenuHandle carrying open(), close() and focus(). open() hangs the menu from the target. |
+| `aria-label` | `attribute` | — | MenuContent | The surface is named after the target's text unless given one — right for a row, wrong for a canvas. |
+| `native props` | `attributes` | — | ContextMenuTrigger | Anything a div takes reaches the target, and a consumer's own onContextMenu or onPointerDown runs before the family's; preventDefault from it stops the family. |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `onOpenChange` | `(open: boolean, request: MenuChangeRequest)` | Before the menu opens or closes. The request carries pointer (a secondary click or a long press), keyboard (Shift+F10, the Menu key), escape, outsidePress (a press anywhere else, the target included), select, dismiss or programmatic, the originating event, and cancel(). Moving to a new point while open emits nothing, because open did not change. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `longPress` | `true`, `false` | `true` |
+| `disabled` | `true`, `false` | `false` |
+
+## Rules
+
+- The platform supplies the gesture: the contextmenu event is the secondary click, the Menu key and Shift+F10 on every desktop, and the family answers all three with preventDefault while it is enabled and with nothing while it is disabled, so a reader is never left with no menu at all.
+- The family writes no aria-haspopup on the target — it is not permitted on a generic element, and no surveyed library writes it — so a screen reader is not told the region has a menu. That is why every command in a context menu also exists by another path, and the reference page shows the path.
+- Focus goes to the first item on open and, on Escape or after a command, back to whatever held it when the menu opened — the checkbox in the row, the tile itself — rather than to a trigger that never had it. A press elsewhere leaves focus where the reader put it.
+- The family writes no tabindex: a target the page made focusable can be opened from the keyboard, and one it did not cannot. A tab stop on every wrapped region would be one a grid with roving focus cannot afford.
+
+## Tokens
+
+`--slotted-border-strong`, `--slotted-border-width-thin`, `--slotted-context-menu-mark-color`, `--slotted-context-menu-mark-width`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`
+
+## Examples
+
+### The target
+
+The tile is the target and paints nothing at rest; while the menu shows, an inward one-pixel mark laid over the tile says which one the commands act on, following the tile’s own corner. The tile on the right was opened from script, so the menu hangs from it the way a keyboard opening places it. A target wrapped around a card would frame the card’s round corners with a square: make the card the target.
+
+Excerpt — not a complete module
+
+```tsx
+<ContextMenu defaultOpen>
+  <ContextMenuTrigger className="tile" tabIndex={0}>
+    …
+  </ContextMenuTrigger>
+  <MenuContent>…</MenuContent>
+</ContextMenu>;
+```
+
+### One menu for many rows
+
+A list of files with one ContextMenu around all of them. Right-click any row: the request carries the event, the handler reads the row from it, and the menu names the file it acts on. Mounting a menu per row is the shape this composition exists to avoid.
+
+Excerpt — not a complete module
+
+```tsx
+const [file, setFile] = useState<string | null>(null);
+
+<ContextMenu
+  onOpenChange={(open, request) => {
+    if (!open) return;
+    const row = (request.source as Event).target as HTMLElement;
+    setFile(row.closest('[data-file]')?.getAttribute('data-file') ?? null);
+  }}
+>
+  <ContextMenuTrigger render={(props) => <ul {...props} />}>
+    {files.map((name) => (
+      <li key={name} data-file={name}>
+        {name}
+      </li>
+    ))}
+  </ContextMenuTrigger>
+  <MenuContent aria-label={file ?? 'File actions'}>…</MenuContent>
+</ContextMenu>;
+```
+
+### From the keyboard
+
+Tab to the tile — it is focusable because the page said so, with tabIndex — and press Shift+F10 or the Menu key. The menu hangs from the tile rather than from wherever the pointer last was, focus lands on the first item, and Escape brings it back to the tile.
+
+Excerpt — not a complete module
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger tabIndex={0} aria-label="Release notes 4.2">
+    …
+  </ContextMenuTrigger>
+  <MenuContent>…</MenuContent>
+</ContextMenu>;
+```
+
+### On touch
+
+There is no secondary button on a touch screen: holding the tile for half a second opens the menu at the finger, while text selection and the platform's callout are held off for the duration of the press. Lifting or moving past ten pixels before then cancels it, so a scroll that starts on the tile is still a scroll.
+
+Excerpt — not a complete module
+
+```tsx
+<ContextMenuDefaultsProvider longPressDelay={400}>
+  <ContextMenu>
+    <ContextMenuTrigger>…</ContextMenuTrigger>
+    <MenuContent>…</MenuContent>
+  </ContextMenu>
+</ContextMenuDefaultsProvider>;
+```
+
+### The other path
+
+A context menu is found by convention, and a reader who never right-clicks must still reach every command in it: the same actions sit behind the Actions button on the tile, as a menu opened the ordinary way. The two surfaces are one MenuContent rendered twice.
+
+Excerpt — not a complete module
+
+```tsx
+const actions = (
+  <MenuContent aria-label="Document actions">
+    <MenuItem>Open</MenuItem>
+    <MenuItem>Rename</MenuItem>
+  </MenuContent>
+);
+
+<ContextMenu>
+  <ContextMenuTrigger className="tile">
+    <Menu>
+      <MenuTrigger
+        render={(props) => (
+          <Button {...props} variant="ghost">
+            Actions
+          </Button>
+        )}
+      />
+      {actions}
+    </Menu>
+  </ContextMenuTrigger>
+  {actions}
+</ContextMenu>;
+```
+
+### Disabled
+
+A disabled family suppresses nothing: the browser's own menu opens on the secondary click, because taking both away would leave the reader with none. The target says so with data-disabled and paints nothing, since the content it wraps still works.
+
+Excerpt — not a complete module
+
+```tsx
+<ContextMenu disabled>
+  <ContextMenuTrigger>…</ContextMenuTrigger>
+  <MenuContent>…</MenuContent>
+</ContextMenu>;
+```
+
+### States
+
+Three tiles: at rest nothing is painted; open draws the inward mark in the colour that separates two surfaces; disabled paints nothing either; pressed exists only for the half second a finger is held, and turns off selection rather than painting.
+
+Excerpt — not a complete module
+
+```css
+[data-ui='context-menu'][data-open] {
+  --slotted-context-menu-mark-color: var(--slotted-tone-accent-border);
+}
+[data-ui='context-menu'][data-pressed] {
+  opacity: 0.9;
+}
+```