@cueplusplus/ui 0.1.0 → 0.3.0

package/manifest/components/progress.json

@@ -0,0 +1,95 @@
+{
+  "name": "Progress",
+  "slug": "progress",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "Determinate work, drawn as a filling rule.\n\nWraps Base UI's `Progress`, so `role=\"progressbar\"`, the value formatting and\nthe completion status are the primitive's; this layer adds the console skin:\na sunk `surface-3` track, an accent fill and a 120ms linear width transition\n— linear because a progress bar that eases is lying about its rate.\n\nPassing `value={null}` makes it indeterminate: the fill collapses and the\ntrack pulses instead, which says \"working, size unknown\" without inventing a\nnumber. The pulse stills under `prefers-reduced-motion`.\n\nUse `Meter` instead for a *level* (how full something is); a progress bar is\nfor a *task* (how far along something is).\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Caption above the bar. Rendered as Base UI's `Progress.Label`, so it also\nbecomes the bar's accessible name — pass one, or an `aria-label`."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the frame that holds the header and the track."
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": "5",
+      "description": "Track height in px at the 16px root, emitted as `rem`. Defaults to `5`."
+    },
+    {
+      "name": "showValue",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Show the formatted value opposite the label. Defaults to `false`."
+    },
+    {
+      "name": "trackClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the track."
+    },
+    {
+      "name": "indicatorClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the fill."
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseProgress.Root.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-surface-3",
+    "--cue-text-label"
+  ],
+  "summary": "Determinate work, drawn as a filling rule.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Progress value={40} label=\"Rendering\" showValue />\n<Progress value={null} aria-label=\"Connecting\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/progress",
+  "mdUrl": "/docs/components/progress.md",
+  "jsonUrl": "/r/components/progress.json",
+  "specimens": [
+    {
+      "title": "Progress",
+      "group": "instruments",
+      "components": [
+        "Progress"
+      ],
+      "code": "<div className=\"flex w-full max-w-[36rem] flex-col gap-(--cue-space-5)\">\n  <Progress label=\"Rendering preview\" value={62} showValue />\n  <Progress label={COPY.loading.title} value={null} />\n  <Progress label=\"Tall\" value={30} height={8} showValue />\n</div>",
+      "note": "Determinate and indeterminate, with an optional printed value.",
+      "interaction": "the indeterminate track stills under prefers-reduced-motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/radio-group.json

@@ -0,0 +1,73 @@
+{
+  "name": "RadioGroup",
+  "slug": "radio-group",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One-of-many selection: a roving-tabindex group of {@link Radio}s sharing a\nsingle value.\n\nArrow keys move *and* select, per the WAI-ARIA radio group pattern that Base\nUI implements — so the whole group is one tab stop, which is what keeps a\ndense settings panel navigable.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the stack defaults."
+    },
+    {
+      "name": "orientation",
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "defaultValue": "vertical",
+      "description": "Lay the options out in a column (default) or a row."
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseRadioGroup.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-ui"
+  ],
+  "summary": "One-of-many selection: a roving-tabindex group of {@link Radio}s sharing a single value.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<RadioGroup aria-label=\"Blend mode\" value={mode} onValueChange={setMode}>\n  <Radio value=\"htp\" label=\"HTP\" />\n  <Radio value=\"ltp\" label=\"LTP\" />\n</RadioGroup>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/radio-group",
+  "mdUrl": "/docs/components/radio-group.md",
+  "jsonUrl": "/r/components/radio-group.json",
+  "specimens": [
+    {
+      "title": "RadioGroup",
+      "group": "forms",
+      "components": [
+        "RadioGroup",
+        "Radio"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <RadioGroup aria-label=\"Blend mode\" defaultValue=\"htp\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n  </RadioGroup>\n  <RadioGroup aria-label=\"Blend mode, horizontal\" defaultValue=\"ltp\" orientation=\"horizontal\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n    <Radio value=\"off\" label=\"Off\" disabled />\n  </RadioGroup>\n</div>",
+      "note": "One choice out of a short set, in either orientation.",
+      "interaction": "arrow keys move the selection, and the group is one tab stop."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/radio.json

@@ -0,0 +1,80 @@
+{
+  "name": "Radio",
+  "slug": "radio",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One option inside a {@link RadioGroup}.\n\nRound, to say \"exactly one\" the way a square {@link Checkbox } says \"any\nnumber\". Checked draws an accent rim with an accent core rather than a solid\nfill, so the selected option stays legible against the sunken field colour on\nevery theme.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Inline label rendered beside the dot and wrapped with it in a `<label>`, so\nthe text is both the accessible name and part of the hit target."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the dot defaults."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the density icon ladder for the dot. Defaults to `\"md\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseRadio.Root.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-ui"
+  ],
+  "summary": "One option inside a {@link RadioGroup}.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Radio value=\"htp\" label=\"Highest takes precedence\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/radio",
+  "mdUrl": "/docs/components/radio.md",
+  "jsonUrl": "/r/components/radio.json",
+  "specimens": [
+    {
+      "title": "RadioGroup",
+      "group": "forms",
+      "components": [
+        "RadioGroup",
+        "Radio"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <RadioGroup aria-label=\"Blend mode\" defaultValue=\"htp\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n  </RadioGroup>\n  <RadioGroup aria-label=\"Blend mode, horizontal\" defaultValue=\"ltp\" orientation=\"horizontal\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n    <Radio value=\"off\" label=\"Off\" disabled />\n  </RadioGroup>\n</div>",
+      "note": "One choice out of a short set, in either orientation.",
+      "interaction": "arrow keys move the selection, and the group is one tab stop."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/rating.json

@@ -0,0 +1,141 @@
+{
+  "name": "Rating",
+  "slug": "rating",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A 0–N rating, drawn as marks.\n\nBuilt as a **radio group**, not a row of buttons: exactly one value is in\neffect, arrow keys move between the options, and one Tab stop covers the whole\nwidget. A row of toggle buttons would put five stops in the tab order and\nannounce five unrelated controls.\n\nRead-only renders as a single `img` with the value in its name — an\nun-interactive control that still takes focus is a trap, and five disabled\nradios announce five things where one sentence will do.",
+  "props": [
+    {
+      "name": "value",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "The rating, `0`–`count`. Use with `onValueChange` for a controlled widget."
+    },
+    {
+      "name": "defaultValue",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Initial rating for an uncontrolled widget. Defaults to `0`."
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the new rating; `0` means \"cleared\"."
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "required": false,
+      "defaultValue": "5",
+      "description": "How many marks. Defaults to `5`."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the icon ladder. Defaults to `\"md\"`."
+    },
+    {
+      "name": "allowClear",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Picking the current value clears it back to `0`. Defaults to `true` — a\nrating you cannot take back is a trap, and there is no other affordance for\n\"actually, no opinion\"."
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Render a static readout with no controls."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Grey the marks out and refuse interaction."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the group. Also the prefix of the read-only readout —\n`\"Signal quality: 4 of 5\"`. Synonym of `aria-label`, which wins if both are\ngiven."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the group, for callers who prefer the ARIA spelling."
+    },
+    {
+      "name": "icon",
+      "type": "ElementType<any, keyof IntrinsicElements>",
+      "required": false,
+      "defaultValue": "StarGlyph",
+      "description": "The mark component. Defaults to a filled star."
+    },
+    {
+      "name": "markLabel",
+      "type": "((index: number, count: number) => string)",
+      "required": false,
+      "defaultValue": "(index, total) => `${index} of ${total}`",
+      "description": "Accessible name for mark `index` (1-based) of `count`. Defaults to\n``(index, count) => `${index} of ${count}` ``."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the group."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-space-1"
+  ],
+  "summary": "A 0–N rating, drawn as marks.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Rating label=\"Signal quality\" value={score} onValueChange={setScore} />\n<Rating aria-label=\"Signal quality\" value={4} readOnly size=\"sm\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/rating",
+  "mdUrl": "/docs/components/rating.md",
+  "jsonUrl": "/r/components/rating.json",
+  "specimens": [
+    {
+      "title": "Rating",
+      "group": "forms",
+      "components": [
+        "Rating"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"default\">\n    <Rating label=\"Rig condition\" defaultValue={4} />\n  </Specimen>\n  <Specimen label=\"clearable\">\n    <Rating label=\"Rig condition, clearable\" defaultValue={3} allowClear />\n  </Specimen>\n  <Specimen label=\"read-only\">\n    <Rating label=\"Rig condition, read-only\" value={5} readOnly />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Rating label=\"Rig condition, disabled\" defaultValue={2} disabled />\n  </Specimen>\n</Specimens>",
+      "note": "A radio group of marks, with the value spoken rather than implied by how many glyphs are filled.",
+      "interaction": "arrow keys move; clicking the current mark clears it when `allowClear` is on."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/resizable.json

@@ -0,0 +1,88 @@
+{
+  "name": "Resizable",
+  "slug": "resizable",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui/layout/resizable",
+  "peerDependencies": [
+    "react-resizable-panels"
+  ],
+  "clientOnly": true,
+  "description": "Split panes the user can drag, on `react-resizable-panels`.\n\n`react-resizable-panels` is an **optional peer**: import this from\n`@cueplusplus/ui/layout/resizable`, never from the core barrel, so an app\nwith no split view never installs one.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Group",
+    "Panel",
+    "Handle"
+  ],
+  "parts": [
+    {
+      "name": "Group",
+      "usage": "Resizable.Group",
+      "description": "The frame that owns the layout and divides it between its panels.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentProps<typeof PanelGroup>"
+      ]
+    },
+    {
+      "name": "Panel",
+      "usage": "Resizable.Panel",
+      "description": "One resizable region.\n\n`className` lands on the panel's inner content box, not on the flex child —\nthat is the library's contract, and it exists so a padding or a border cannot\nfight the flex-basis arithmetic that sizes the panel. `min-h-0 min-w-0` is\npart of the recipe: without it a panel containing a scroll area refuses to\nshrink below its content.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentProps<typeof PanelPrimitive>"
+      ]
+    },
+    {
+      "name": "Handle",
+      "usage": "Resizable.Handle",
+      "description": "The draggable seam between two panels.\n\n4px — the widest a separator can be before it reads as a gutter, and the\nnarrowest that is still a comfortable pointer target. It sits at border\ncolour, takes the accent under the pointer, while dragging and on keyboard\nfocus, and keeps a real focus ring because the separator is operable with the\narrow keys.",
+      "props": [
+        {
+          "name": "withGrip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Draw a short grip line down the middle of the handle.\n\nA 4px strip that only colours on hover is easy to miss on first sight; the\ngrip is the standing hint that the seam is draggable, for the price of one\nhairline."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentProps<typeof PanelSeparator>"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-space-6"
+  ],
+  "summary": "Split panes the user can drag, on `react-resizable-panels`.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Resizable.Group orientation=\"horizontal\">\n  <Resizable.Panel id=\"tree\" defaultSize={25} minSize={15}>…</Resizable.Panel>\n  <Resizable.Handle withGrip />\n  <Resizable.Panel id=\"editor\">…</Resizable.Panel>\n</Resizable.Group>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/resizable",
+  "mdUrl": "/docs/components/resizable.md",
+  "jsonUrl": "/r/components/resizable.json",
+  "specimens": [
+    {
+      "title": "Resizable",
+      "group": "layout",
+      "components": [
+        "Resizable"
+      ],
+      "code": "<Resizable.Group\n  orientation=\"horizontal\"\n  className=\"h-[9rem] w-full max-w-[36rem] overflow-hidden rounded-(--radius-surface) border border-border\"\n>\n  <Resizable.Panel id=\"patch\" defaultSize=\"35\" minSize=\"20\">\n    <div className=\"flex h-full items-center justify-center font-mono text-(length:--cue-text-ui) text-fg-muted\">\n      Patch\n    </div>\n  </Resizable.Panel>\n  <Resizable.Handle withGrip />\n  <Resizable.Panel id=\"preview\">\n    <div className=\"flex h-full items-center justify-center font-mono text-(length:--cue-text-ui) text-fg-muted\">\n      Preview\n    </div>\n  </Resizable.Panel>\n</Resizable.Group>",
+      "note": "react-resizable-panels with a 4px handle that goes accent on hover. Also an optional peer, from @cueplusplus/ui/layout/resizable.",
+      "interaction": "the handle is a `separator` with a value: arrow keys resize, Home and End collapse either way."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/row.json

@@ -0,0 +1,109 @@
+{
+  "name": "Row",
+  "slug": "row",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One row of a hairline list: the workhorse of every console panel.\n\nStatic by default and a real `<button>` when `interactive` — never a `<div>`\nwith an `onClick`, so keyboard users get it for free. Vertical rhythm comes\nfrom the density row-padding tokens, so the same list is 22px tall in\nultra-compact and 34px tall in large without touching the markup.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "interactive",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Render as a `<button>` with hover feedback and a focus ring instead of a\nstatic `<div>`. Use for rows that select, open or toggle something."
+    },
+    {
+      "name": "seam",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Drop the hairline and paint the row's own fill, for use inside a\n{@link SeamList}. Without a `SeamList` parent the rows will simply touch."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Disable the interactive form. Ignored when `interactive` is not set."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Row content — normally a label, a spacer and a value or control."
+    }
+  ],
+  "typeReferences": [
+    "React.HTMLAttributes<HTMLElement>",
+    "VariantProps<typeof rowVariants>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {
+    "seam": [
+      "true",
+      "false"
+    ],
+    "interactive": [
+      "true",
+      "false"
+    ]
+  },
+  "defaultVariants": {
+    "seam": "false",
+    "interactive": "false"
+  },
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-font-mono",
+    "--cue-pad-row-x",
+    "--cue-pad-row-y",
+    "--cue-radius-surface",
+    "--cue-space-3",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "The list row, in both of the system's separator idioms.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Panel><Row>Channel 1<span className=\"ml-auto\">255</span></Row></Panel>\n<SeamList>\n  <Row seam interactive onClick={select}>Cue 1</Row>\n  <Row seam interactive onClick={select}>Cue 2</Row>\n</SeamList>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/row",
+  "mdUrl": "/docs/components/row.md",
+  "jsonUrl": "/r/components/row.json",
+  "whenToUse": [
+    "Items in a list inside a `Panel`, separated by hairlines rather than gaps.",
+    "Rows that select, open or toggle something. Pass `interactive` for the button semantics and the focus ring."
+  ],
+  "whenNotToUse": [
+    "Data with shared columns a reader compares across rows. Use `Table`.",
+    "Free-standing blocks with their own padding and rim. Use `Card` or `Item`."
+  ],
+  "commonMistakes": [
+    "Passing `seam` without a `SeamList` parent, which drops the border and leaves the rows touching.",
+    "Making the whole row interactive and then nesting a button inside it, which puts a control inside a control."
+  ],
+  "specimens": [
+    {
+      "title": "Row / SeamList",
+      "group": "chrome",
+      "components": [
+        "Row",
+        "SeamList"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <Panel>\n    <Row>Default row</Row>\n    <Row interactive>Interactive row</Row>\n    <Row interactive disabled>\n      Disabled row\n    </Row>\n  </Panel>\n  <SeamList>\n    <Row seam>Seam row</Row>\n    <Row seam interactive>\n      Seam row, interactive\n    </Row>\n    <Row seam>Seam row</Row>\n  </SeamList>\n</div>",
+      "note": "Hairline rows, and the 1px-gap variant where the gaps themselves are the rule.",
+      "interaction": "pass `interactive` for a hover ground and a focus ring; `disabled` dims and stops pointer events."
+    }
+  ]
+}