@smwb/ui-mcp-react 2.8.0 → 2.10.0

package/component-meta/dataDisplay/badge/badge.json

@@ -32,9 +32,9 @@
       "description": "Badge Content. Optional. Type: React.ReactNode."
     },
     "color": {
-      "type": "\"primary\" | \"success\" | \"danger\"",
+      "type": "\"primary\" | \"success\" | \"danger\" | \"warning\"",
       "required": false,
-      "description": "Semantic color token."
+      "description": "Semantic color; `warning` is amber, and carries dark ink to stay readable at this size."
     },
     "variant": {
       "type": "\"inside\" | \"outside\"",

package/component-meta/dataDisplay/chat/chat.chatFooterComposer.json

@@ -0,0 +1,24 @@
+{
+  "name": "ChatFooterComposer",
+  "description": "Props for the `Composer` Chat draws as its footer. The props Chat owns itself — `onSendMessage` (the composer's\n`onSend`), `busy`, `onStop`, `composerPlaceholder` (`placeholder`), `composerDisabled` (`disabled`), the file upload\nprops (`onAttach`, `accept`, `multiple`, `maxFiles`) and `dropTarget` (always `false`: the Chat shell is the drop\ntarget) — are left out, Chat passes them and does not let a caller override them.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<\n  ComposerProps,\n  | \"onSend\"\n  | \"busy\"\n  | \"onStop\"\n  | \"disabled\"\n  | \"placeholder\"\n  | \"onAttach\"\n  | \"accept\"\n  | \"multiple\"\n  | \"maxFiles\"\n  | \"dropTarget\"\n>"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/chat/chat.entry.less"
+    ],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";"
+  },
+  "props": {}
+}

package/component-meta/dataDisplay/chat/chat.json

@@ -20,6 +20,7 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/avatar/avatar.entry.less",
+      "@smwb/ui-styles/less/components/composer/composer.entry.less",
       "@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less",
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
@@ -27,7 +28,7 @@
       "@smwb/ui-styles/less/components/textField/textField.entry.less",
       "@smwb/ui-styles/less/components/typography/typography.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/typography/typography.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/composer/composer.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/typography/typography.entry.less\";"
   },
   "props": {
     "className": {
@@ -145,6 +146,26 @@
       "required": false,
       "description": "On Send Message. Optional. Type: (text: string) => void | Promise<void>."
     },
+    "busy": {
+      "type": "boolean",
+      "required": false,
+      "description": "The agent is replying: the composer's send button turns into Stop and calls `onStop`, the keys do not send, the\ntext stays editable. Not the same as `loading` (the message list skeleton). The default composer only."
+    },
+    "onStop": {
+      "type": "() => void",
+      "required": false,
+      "description": "Called when Stop is pressed while `busy` (and not `composerDisabled`). The default composer only."
+    },
+    "composerProps": {
+      "type": "ChatFooterComposerProps",
+      "required": false,
+      "description": "More props for the built-in `Composer`: `toolbar`, `attachments`, `maxLength`, `counter`, `minRows`, `maxRows`,\n`layout`, `sendKey` (default here `\"enter\"`), `value`/`defaultValue`/`onValueChange`, `clearOnSend`, `autoFocus`,\n`inputRef`, `aria-*`, `sendLabel`, `stopLabel`, `attachLabel`, `className`, `data-*`, … Chat's own props\n(`onSendMessage`, `busy`, `onStop`, `composerPlaceholder`, `composerDisabled`, the file upload props) win."
+    },
+    "legacyComposer": {
+      "type": "boolean",
+      "required": false,
+      "description": "Deprecated: draws the old `ChatComposer` (Enter sends, TextField DOM, `chat-composer*` test ids) instead of the\nbuilt-in `Composer`. Kept for the migration and removed with `ChatComposer` in the next major; `busy`, `onStop`\nand `composerProps` are ignored in this mode."
+    },
     "composerPlaceholder": {
       "type": "string",
       "required": false,
@@ -158,12 +179,12 @@
     "composerShiftEnterNewline": {
       "type": "boolean",
       "required": false,
-      "description": "Composer Shift Enter Newline. Optional. Type: boolean."
+      "description": "Deprecated: works with `legacyComposer` only — the built-in `Composer` always inserts a newline on Shift+Enter.\nPass it together with `legacyComposer` until that is removed."
     },
     "composerCtrlEnterNewline": {
       "type": "boolean",
       "required": false,
-      "description": "Composer Ctrl Enter Newline. Optional. Type: boolean."
+      "description": "Deprecated: works with `legacyComposer` only — with the built-in `Composer` Ctrl/⌘+Enter sends. Pass it together\nwith `legacyComposer` until that is removed."
     },
     "fileUpload": {
       "type": "boolean",

package/component-meta/dataDisplay/chat/chatComposer.json

@@ -1,6 +1,6 @@
 {
   "name": "ChatComposer",
-  "description": "Chat Composer component from the dataDisplay module.",
+  "description": "Deprecated: the old chat input (Enter sends, TextField-based). Use Composer; Chat draws a Composer by default (legacyComposer keeps this one during the migration).",
   "ssr": {
     "safe": true,
     "rendering": "universal"

package/component-meta/dataDisplay/chat/chatLayout.json

@@ -20,6 +20,7 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/avatar/avatar.entry.less",
+      "@smwb/ui-styles/less/components/composer/composer.entry.less",
       "@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less",
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
@@ -27,7 +28,7 @@
       "@smwb/ui-styles/less/components/textField/textField.entry.less",
       "@smwb/ui-styles/less/components/typography/typography.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/typography/typography.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/composer/composer.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/typography/typography.entry.less\";"
   },
   "props": {
     "className": {

package/component-meta/dataDisplay/chat/chatOverlayLayout.json

@@ -20,6 +20,7 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/avatar/avatar.entry.less",
+      "@smwb/ui-styles/less/components/composer/composer.entry.less",
       "@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less",
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
@@ -27,7 +28,7 @@
       "@smwb/ui-styles/less/components/textField/textField.entry.less",
       "@smwb/ui-styles/less/components/typography/typography.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/typography/typography.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chat/chat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/composer/composer.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/typography/typography.entry.less\";"
   },
   "props": {
     "className": {

package/component-meta/dataDisplay/dagView/dagView.json

@@ -0,0 +1,165 @@
+{
+  "name": "DagView",
+  "description": "A dependency graph (DAG): nodes laid out in layers (LR or TB) with arrowed edges, status colours from theme tokens, any node content through renderNode, single selection that lights the selected node's edges, and pan/zoom by mouse, wheel, trackpad, touch and keyboard (role=listbox of options).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\">"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/dagView/dagView.entry.less"
+    ],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/dagView/dagView.entry.less\";"
+  },
+  "props": {
+    "label": {
+      "type": "string",
+      "required": true,
+      "description": "What the graph shows: its accessible name."
+    },
+    "summary": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "The graph in words, for screen readers; it is there on the server too."
+    },
+    "nodes": {
+      "type": "readonly DagViewNode<T>[]",
+      "required": true,
+      "description": "The nodes. A change of status, label or data alone does not lay the graph out again."
+    },
+    "edges": {
+      "type": "readonly DagViewEdge[]",
+      "required": true,
+      "description": "The edges, from the node depended on to the node that depends on it."
+    },
+    "renderNode": {
+      "type": "((node: DagViewNode<T>, state: DagViewNodeState) => React.ReactNode) | undefined",
+      "required": false,
+      "description": "Draws a node's content inside its box; the default shows a status dot,\nthe label and the status word. `node` and `state` are a snapshot of the\nrender they are passed to. Keep the content non-interactive where you can:\na node is an ARIA option, whose content assistive technology may read as\nplain text, and a click in it also selects the node. Links and buttons in\nit are left out of the Tab order except in the node that is the graph's\nTab stop."
+    },
+    "direction": {
+      "type": "DagDirection | undefined",
+      "required": false,
+      "description": "Which way the layers run: \"LR\" (left to right, default) or \"TB\" (top to bottom)."
+    },
+    "nodeWidth": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "A node's width in pixels, unless the node sets its own; 180 by default."
+    },
+    "nodeHeight": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "A node's height in pixels, unless the node sets its own; 56 by default."
+    },
+    "rankGap": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "The space between layers in pixels; 64 by default."
+    },
+    "nodeGap": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "The space between nodes in a layer in pixels; 24 by default."
+    },
+    "layout": {
+      "type": "((input: DagLayoutInput) => DagLayoutResult) | undefined",
+      "required": false,
+      "description": "Lays the graph out in place of the built-in layout, e.g. with dagre or elk. It must be\nsynchronous. The layout re-runs when the graph's shape changes; swapping this function\nalone does not."
+    },
+    "selectedId": {
+      "type": "string | null | undefined",
+      "required": false,
+      "description": "The selected node's id (controlled); null selects nothing."
+    },
+    "defaultSelectedId": {
+      "type": "string | null | undefined",
+      "required": false,
+      "description": "The node selected at first (uncontrolled)."
+    },
+    "onSelectedChange": {
+      "type": "((id: string | null) => void) | undefined",
+      "required": false,
+      "description": "A node was selected (its id) or the selection was cleared (null)."
+    },
+    "onNodeClick": {
+      "type": "((node: DagViewNode<T>, event: React.MouseEvent | React.KeyboardEvent) => void) | undefined",
+      "required": false,
+      "description": "A node was clicked, or chosen with Enter or Space. Not called for a disabled node."
+    },
+    "dimUnrelated": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Fades the nodes and edges that are not next to the selected node."
+    },
+    "viewport": {
+      "type": "DagViewViewport | undefined",
+      "required": false,
+      "description": "Where the graph is (controlled)."
+    },
+    "defaultViewport": {
+      "type": "DagViewViewport | undefined",
+      "required": false,
+      "description": "Where the graph is at first (uncontrolled); with `fit={false}` the page does not move after it loads."
+    },
+    "onViewportChange": {
+      "type": "((viewport: DagViewViewport) => void) | undefined",
+      "required": false,
+      "description": "The view moved or zoomed: at most once per frame during a gesture."
+    },
+    "fit": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Fits the graph in view once it is in the page, and again when its nodes or edges change; true by default."
+    },
+    "minZoom": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "The smallest zoom; 0.1 by default."
+    },
+    "maxZoom": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "The largest zoom; 2 by default."
+    },
+    "wheel": {
+      "type": "\"zoom\" | \"pan\" | \"none\" | undefined",
+      "required": false,
+      "description": "What a plain mouse wheel does: \"zoom\" (default), \"pan\", or \"none\" (the page scrolls). Ctrl+wheel and a trackpad pinch always zoom."
+    },
+    "controls": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Shows the zoom in, zoom out and fit buttons; true by default."
+    },
+    "labels": {
+      "type": "Partial<DagViewLabels> | undefined",
+      "required": false,
+      "description": "Texts for assistive technology and the buttons, over the English defaults."
+    },
+    "height": {
+      "type": "number | string | undefined",
+      "required": false,
+      "description": "The graph's height: a number of pixels or any CSS length; 480 by default,\nfrom the stylesheet, so a height in `style` works too. It fills the width."
+    },
+    "apiRef": {
+      "type": "((api: DagViewApi) => void) | undefined",
+      "required": false,
+      "description": "Gets the functions that move the view from outside."
+    },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `dag-view` unless given."
+    }
+  }
+}

package/component-meta/dataDisplay/diffStat/diffStat.json

@@ -0,0 +1,65 @@
+{
+  "name": "DiffStat",
+  "description": "The size of a change: \"+N −M\" (U+2212 minus) in the theme's success and error, with an optional five-cell bar of the same proportions and a compact tab variant; one accessible name (\"added N, removed M\", overridable with format) instead of the digits read twice (role=img).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLSpanElement>, \"role\">"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/diffStat/diffStat.entry.less"
+    ],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/diffStat/diffStat.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "added": {
+      "type": "number",
+      "required": true,
+      "description": "Lines added; the figure behind \"+N\". NaN, `undefined`, Infinity and negatives count as 0."
+    },
+    "removed": {
+      "type": "number",
+      "required": true,
+      "description": "Lines removed; the figure behind \"−M\". NaN, `undefined`, Infinity and negatives count as 0."
+    },
+    "bar": {
+      "type": "boolean",
+      "required": false,
+      "description": "The five cells beside the figures. Shown by default, hidden in `compact`; set it either way."
+    },
+    "compact": {
+      "type": "boolean",
+      "required": false,
+      "description": "The tab variant: smaller figures, and no bar unless `bar` asks for one."
+    },
+    "format": {
+      "type": "DiffStatFormat",
+      "required": false,
+      "description": "How the accessible name is made from the two counts, as numbers: `DEFAULT_DIFF_STAT_FORMAT` unless given."
+    },
+    "group": {
+      "type": "(value: number) => string",
+      "required": false,
+      "description": "How each figure is written (it gets the count as `diffStatCount` takes it): `groupDiffStatCount` — three digits per group — unless given."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<span>`; `diff-stat` unless given."
+    }
+  }
+}

package/component-meta/dataDisplay/kbd/kbd.json

@@ -0,0 +1,55 @@
+{
+  "name": "Kbd",
+  "description": "A keyboard shortcut as key caps (<kbd>): `Mod` is Command on macOS and Ctrl elsewhere, Mac names become symbols; for a tooltip, a menu item or a command palette.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLElement>, \"children\">"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less"
+    ],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "keys": {
+      "type": "string[]",
+      "required": true,
+      "description": "The keys of the shortcut in order, e.g. `[\"Mod\", \"K\"]` or `[\"Shift\", \"Enter\"]`. `Mod` is the\nCommand key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,\n`Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the\nsymbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,\nEsc, Tab, Backspace and Del, whatever their case. `\" \"` and `Space` are the Space key, `+` and\n`Plus` the plus key.\nArrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given\n(a single letter in upper case)."
+    },
+    "platform": {
+      "type": "KbdPlatform",
+      "required": false,
+      "description": "The platform whose keys are drawn. Without it the browser's own is used: `other` on the\nserver and in the first client render (so that hydration matches), `mac` right after on a Mac.\nSet it for a fixed look, in stories and in tests."
+    },
+    "separator": {
+      "type": "string",
+      "required": false,
+      "description": "Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols\nstand side by side; `\"\"` draws none. It is for the eye only; assistive technology reads `label`."
+    },
+    "label": {
+      "type": "string",
+      "required": false,
+      "description": "What assistive technology reads instead of the key caps. By default the key names, joined\nwith `+` on `other` (\"Ctrl+K\") and with a space on `mac` (\"Command K\")."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<kbd>`; `kbd` unless given."
+    }
+  }
+}

package/component-meta/dataDisplay/list/listItem.json

@@ -30,7 +30,7 @@
     "selected": {
       "type": "boolean",
       "required": false,
-      "description": "Controlled selected tab index or value."
+      "description": "Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page\nwith `aria-current=\"page\"`, because `aria-selected` is not a state a list item can have; on another row it\nstays `aria-selected`."
     },
     "dense": {
       "type": "boolean",
@@ -50,12 +50,27 @@
     "endAdornment": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "End Adornment. Optional. Type: React.ReactNode."
+      "description": "Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control\n(a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`."
+    },
+    "href": {
+      "type": "string",
+      "required": false,
+      "description": "Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be\nfocused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control\nbelongs in the `endAdornment`. A disabled row has no `href`. A router takes the\nplain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,\nAlt, or a button other than the main one) to the browser, as a router's `Link` does."
+    },
+    "target": {
+      "type": "string | null",
+      "required": false,
+      "description": "Where the link (with `href`) opens. By default `\"_blank\"`: a new tab, as for `Button`. Pass `null` for an\ninternal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other\nstring is used as is."
+    },
+    "rel": {
+      "type": "string",
+      "required": false,
+      "description": "The `rel` of the link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or window,\nand none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\nif you still want it; an empty string drops the attribute."
     },
     "onClick": {
       "type": "React.MouseEventHandler<HTMLLIElement>",
       "required": false,
-      "description": "Callback fired when the element is clicked."
+      "description": "Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the\nbrowser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its\nown, the link is."
     }
   }
 }

package/component-meta/dataDisplay/qrCode/qrCode.json

@@ -0,0 +1,60 @@
+{
+  "name": "QrCode",
+  "description": "QR code of a value as an SVG image (role=img), dark modules on white in every theme, with a quiet zone, size, caption and error-correction level.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<React.HTMLAttributes<HTMLElement>, \"children\" | \"role\">"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/qrCode/qrCode.entry.less"
+    ],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/qrCode/qrCode.entry.less\";"
+  },
+  "props": {
+    "value": {
+      "type": "string",
+      "required": true,
+      "description": "Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes."
+    },
+    "size": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "Side of the code, quiet zone included, in pixels. Default 192."
+    },
+    "caption": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Shown under the code (a `<figcaption>`), e.g. \"Scan with the phone app\"."
+    },
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Accessible name of the image. Default \"QR code\"."
+    },
+    "errorCorrection": {
+      "type": "QrCodeErrorCorrection | undefined",
+      "required": false,
+      "description": "Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered."
+    },
+    "quietZone": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning."
+    },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root; `qr-code` unless given."
+    }
+  }
+}

package/component-meta/dataDisplay/statusDot/statusDot.json

@@ -0,0 +1,60 @@
+{
+  "name": "StatusDot",
+  "description": "Small status marker dot coloured by status or theme colour, with a pulse for active (role=img).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLSpanElement>, \"role\" | \"children\" | \"aria-label\">"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/statusDot/statusDot.entry.less"
+    ],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/statusDot/statusDot.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Class name(s) for the dot's root `<span>`."
+    },
+    "status": {
+      "type": "StatusDotStatus | undefined",
+      "required": false,
+      "description": "What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,\n`error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is\n`unknown`."
+    },
+    "color": {
+      "type": "StatusDotColor | undefined",
+      "required": false,
+      "description": "A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a\n`status`, the status still sets the shape."
+    },
+    "size": {
+      "type": "StatusDotSize | undefined",
+      "required": false,
+      "description": "`md` (12px) unless given; `sm` is 8px."
+    },
+    "pulse": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the\nuser prefers reduced motion."
+    },
+    "label": {
+      "type": "string",
+      "required": true,
+      "description": "What the dot means in words, e.g. \"Working\": the accessible name, read by assistive technology."
+    },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root; `status-dot` unless given."
+    }
+  }
+}