@smwb/ui-mcp-react 2.6.3 → 2.8.0

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

@@ -0,0 +1,75 @@
+{
+  "name": "Meter",
+  "description": "Share of a whole, 'X of Y': a bar with the figures beside it, coloured by thresholds (role=meter).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLDivElement>, \"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/meter/meter.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/meter/meter.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "value": {
+      "type": "number",
+      "required": true,
+      "description": "How many are done (X of Y)."
+    },
+    "max": {
+      "type": "number",
+      "required": true,
+      "description": "How many there are in all (X of Y)."
+    },
+    "label": {
+      "type": "string",
+      "required": true,
+      "description": "What is measured — the accessible name, e.g. \"Requirements accepted\"."
+    },
+    "text": {
+      "type": "ReactNode | ((value: number, max: number) => ReactNode)",
+      "required": false,
+      "description": "Visible text instead of \"X of Y\": markup, or a function of (value, max)."
+    },
+    "ofLabel": {
+      "type": "string",
+      "required": false,
+      "description": "The word between the figures in the default text and in aria-valuetext."
+    },
+    "thresholds": {
+      "type": "readonly MeterThreshold[]",
+      "required": false,
+      "description": "Colour by share of `max`: the last threshold the share reaches wins."
+    },
+    "color": {
+      "type": "MeterColor",
+      "required": false,
+      "description": "A fixed colour, instead of the thresholds."
+    },
+    "hideText": {
+      "type": "boolean",
+      "required": false,
+      "description": "The bar only; the text stays available to assistive technology."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<div>`; `meter` unless given."
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+{
+  "name": "PersonChip",
+  "description": "A person as an avatar (image or initials on a steady colour) and a name; a link to their card with href; avatar-only when compact.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLElement>, \"title\">"
+  ],
+  "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/personChip/personChip.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/avatar/avatar.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/personChip/personChip.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/avatar/avatar.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "name": {
+      "type": "string",
+      "required": true,
+      "description": "The person's name: shown beside the avatar, and the source of its initials."
+    },
+    "src": {
+      "type": "string",
+      "required": false,
+      "description": "Avatar image; initials on a colour without it or when it fails."
+    },
+    "href": {
+      "type": "string",
+      "required": false,
+      "description": "Link to the person's card."
+    },
+    "compact": {
+      "type": "boolean",
+      "required": false,
+      "description": "The avatar only; the name becomes its tooltip and accessible name."
+    },
+    "size": {
+      "type": "AvatarSize | number",
+      "required": false,
+      "description": "Avatar size: a preset or pixels. 24px by default."
+    },
+    "colorSeed": {
+      "type": "string",
+      "required": false,
+      "description": "Seed for the avatar colour (an id); the name by default."
+    },
+    "color": {
+      "type": "string",
+      "required": false,
+      "description": "A fixed avatar colour instead of the derived one."
+    },
+    "meta": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "A second line under the name: a role, a date."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root; `person-chip` unless given."
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+{
+  "name": "Stat",
+  "description": "A figure with its label, hint and optional icon: a KPI tile with a toned accent edge, or a plain stat; can be a link.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLElement>, \"title\">"
+  ],
+  "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/stat/stat.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.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/stat/stat.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "label": {
+      "type": "ReactNode",
+      "required": true,
+      "description": "What the figure counts."
+    },
+    "value": {
+      "type": "ReactNode",
+      "required": true,
+      "description": "The figure — a number, or a short value such as \"3 / 14\"."
+    },
+    "hint": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "A line under the value: a comparison, a period, a caveat."
+    },
+    "icon": {
+      "type": "string | ReactNode",
+      "required": false,
+      "description": "An icon beside the figure: a Material Symbols name or an element."
+    },
+    "tone": {
+      "type": "StatTone",
+      "required": false,
+      "description": "Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too."
+    },
+    "variant": {
+      "type": "\"tile\" | \"plain\"",
+      "required": false,
+      "description": "`tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures."
+    },
+    "href": {
+      "type": "string",
+      "required": false,
+      "description": "Make the whole stat a link to what the figure is made of."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root; `stat` unless given."
+    }
+  }
+}

package/component-meta/dataDisplay/stat/stat.statGroup.json

@@ -0,0 +1,35 @@
+{
+  "name": "StatGroup",
+  "description": "Responsive grid row of stats: as many columns as fit, each at least minItemWidth wide.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "HTMLAttributes<HTMLDivElement>"
+  ],
+  "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/stat/stat.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/stat/stat.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "minItemWidth": {
+      "type": "number | string",
+      "required": false,
+      "description": "Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default."
+    }
+  }
+}

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

@@ -51,6 +51,11 @@
       "required": false,
       "description": "Optional accessible caption rendered for screen readers."
     },
+    "stackBelow": {
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "description": "Show each row as a card — cells one under another, each with its column's\nlabel — while the table's container is narrower than this breakpoint:\n`sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\nthe table has decides, not the window.\n\nA cell's label is its `TableCell label`, or else the label of the head cell\nof its column: the head cell's `label`, or the text of its content. Columns\ncount as in HTML: by position in the row, with `colSpan`, after the columns\nthat `rowSpan` cells of the rows above take in the same head or body. A cell\nspanning several columns takes no label from the head and fills the card's\nwidth, and a head cell spanning several columns labels none of them. With\nseveral head rows, the lowest head cell over a column names it.\n\nThe columns come from the elements written: rows written as `TableRow` in\n`TableHead` or `TableBody`, and cells in a row (arrays and fragments\nincluded). A component that renders a row counts as a row whose cells span\nno rows down, and a component that renders cells counts as one cell, with\nits own `colSpan` and `rowSpan`: give the cells after such a component, or\nthe component's own cells, a `label`."
+    },
     "paginationSettings": {
       "type": "TablePaginationProps",
       "required": false,

package/component-meta/dataDisplay/table/tableCell.json

@@ -30,6 +30,16 @@
       "type": "\"left\" | \"right\" | \"center\"",
       "required": false,
       "description": "Cell Align. Optional. Type: \"left\" | \"right\" | \"center\"."
+    },
+    "label": {
+      "type": "string | false",
+      "required": false,
+      "description": "The column's name, shown next to the value when the table stacks rows as\ncards (`Table stackBelow`). Without it, the cell takes the label of its\ncolumn's head cell; `false` keeps the cell unlabelled, so it fills the\ncard's width (an action, a sub-row). A caller's own `data-label` counts as a\ngiven label too."
+    },
+    "data-label": {
+      "type": "string",
+      "required": false,
+      "description": "The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it."
     }
   }
 }

package/component-meta/dataDisplay/table/tableHeadCell.json

@@ -46,7 +46,7 @@
     "sortable": {
       "type": "boolean",
       "required": false,
-      "description": "Enables the interactive sort affordance with keyboard/aria support."
+      "description": "Enables the interactive sort affordance with keyboard/aria support.\n\nThe children sit inside the sort control, and controls among them keep\ntheir own input: Enter and Space sort only while the sort control itself\nhas focus, and a click sorts unless it lands in a nested control (input,\nbutton, link, label, anything focusable) or in a portal. Content that is not\na control, such as click-to-edit text, keeps its click from sorting by\ncalling `preventDefault()` on it. A nested control's name, or its value,\nbecomes part of the sort control's accessible name: put controls in\n`actions` instead."
     },
     "sortDirection": {
       "type": "SortDirection",
@@ -57,6 +57,16 @@
       "type": "() => void",
       "required": false,
       "description": "Invoked when the user activates the sort control."
+    },
+    "actions": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "The column's controls — a filter field, a menu button, a column resizer —\ndrawn after the sort control, outside it. Their names and values stay out\nof the sort control's accessible name, and their keys and clicks never\nreach it. Rendered whether or not the cell is sortable.\n\nThe column header is then named after the children alone: the cell's\n`aria-labelledby` points at the sort control, unless the cell is given\n`aria-label` or `aria-labelledby`. Named from its content, the header would\ntake in the controls' names and values too."
+    },
+    "label": {
+      "type": "string",
+      "required": false,
+      "description": "The column's name for its body cells while the table stacks rows as cards\n(`Table stackBelow`). Without it, the text of the children is the name; give\n`label` where they hold no text of their own (an icon, a translated message\ncomponent) or more than the name. An empty `label` leaves the column's cells\nunlabelled, so they fill the card's width."
     }
   }
 }

package/component-meta/dataDisplay/table/tableRow.json

@@ -35,6 +35,11 @@
       "type": "boolean",
       "required": false,
       "description": "Reflects expandable-row state (adds aria-expanded + styling)."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the `<tr>`; `table-row` unless given."
     }
   }
 }

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

@@ -24,6 +24,11 @@
     "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/thumbCard/thumbCard.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less\";"
   },
   "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\nhandlers go to the root too, but `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*` attributes go to\nthe card's content, `.smwb-thumb-card__content` (the image and the caption): that is the card's button when it has\n`onSelect`, and the element to focus."
+    },
     "src": {
       "type": "string",
       "required": false,
@@ -32,17 +37,22 @@
     "caption": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "Caption. Optional. Type: React.ReactNode."
+      "description": "Text under the image. With `onSelect` it is part of the card's button and names it, so keep controls out of it:\nthey go in `topStart` / `topEnd`."
     },
     "selected": {
       "type": "boolean",
       "required": false,
-      "description": "Controlled selected tab index or value."
+      "description": "Outlines the image; with `onSelect`, the card's button is also `aria-pressed=\"true\"`."
     },
     "onSelect": {
       "type": "() => void",
       "required": false,
-      "description": "Makes the card a selectable button (keyboard + `aria-pressed`)."
+      "description": "Makes the card selectable: its content (the image and the caption) becomes a toggle button with `aria-pressed`,\nselected by a click and by Enter / Space. The corner slots are not part of that button but its siblings, laid over\nthe image, so their controls keep their own names, clicks and keys.\n\nA click selects the card unless it lands in a control in a slot (button, link, input, anything focusable) or in a\nportal opened from the card. Slot content that is not a control keeps its click from selecting the card by calling\n`preventDefault()` on it."
+    },
+    "onClick": {
+      "type": "React.MouseEventHandler<HTMLDivElement> | undefined",
+      "required": false,
+      "description": "Runs on each click on the card, before `onSelect`, but not while the card is `disabled`.\nA click on a control in a slot runs it too, without selecting the card.\nEnter / Space select the card without a click, so they call only `onSelect`."
     },
     "fallback": {
       "type": "React.ReactNode",
@@ -57,12 +67,12 @@
     "topStart": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "Top-left overlay slot (e.g. a favourite star)."
+      "description": "Top-left overlay slot (e.g. a favourite star). It sits over the image, outside the card's button, so controls here\nkeep their own names, clicks and keys; see `onSelect`."
     },
     "topEnd": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "Top-right overlay slot (e.g. a kebab menu)."
+      "description": "Top-right overlay slot (e.g. a kebab menu). It sits over the image, outside the card's button, so controls here\nkeep their own names, clicks and keys; see `onSelect`."
     },
     "lazy": {
       "type": "boolean",
@@ -72,7 +82,7 @@
     "disabled": {
       "type": "boolean",
       "required": false,
-      "description": "Whether the control is disabled and non-interactive."
+      "description": "Dims the card and ignores clicks on it: neither `onClick` nor `onSelect` runs.\nKeys do not select it either, and there is no hover preview. With `onSelect`\nthe card is still a button, `aria-disabled` and out of the tab order."
     },
     "hoverDelay": {
       "type": "number",

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

@@ -0,0 +1,42 @@
+{
+  "name": "Timeline",
+  "description": "Feed of events on a vertical line (<ol>): TimelineItem children, optionally grouped by TimelineGroup.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "OlHTMLAttributes<HTMLOListElement>"
+  ],
+  "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/timeline/timeline.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.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/timeline/timeline.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "dense": {
+      "type": "boolean",
+      "required": false,
+      "description": "Tighter rows, for side panels."
+    },
+    "stickyLabels": {
+      "type": "boolean",
+      "required": false,
+      "description": "Keep a group's label in view while its events scroll past (in a scrolling container)."
+    }
+  }
+}

package/component-meta/dataDisplay/timeline/timeline.timelineGroup.json

@@ -0,0 +1,35 @@
+{
+  "name": "TimelineGroup",
+  "description": "A labelled run of timeline events, e.g. one day.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<LiHTMLAttributes<HTMLLIElement>, \"title\">"
+  ],
+  "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/timeline/timeline.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/timeline/timeline.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "label": {
+      "type": "ReactNode",
+      "required": true,
+      "description": "What groups the events — a day, a week, a stage."
+    }
+  }
+}

package/component-meta/dataDisplay/timeline/timeline.timelineItem.json

@@ -0,0 +1,55 @@
+{
+  "name": "TimelineItem",
+  "description": "One timeline event: a toned mark (icon or dot), title and meta lines, a time, and content below.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLLIElement>, \"title\">"
+  ],
+  "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/timeline/timeline.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/timeline/timeline.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "title": {
+      "type": "ReactNode",
+      "required": true,
+      "description": "The event itself: a line of text, usually a link."
+    },
+    "meta": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "A second line: who, what kind, where."
+    },
+    "time": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "When: a time or a date, at the end of the row."
+    },
+    "icon": {
+      "type": "string | ReactNode",
+      "required": false,
+      "description": "The event's mark on the line: a Material Symbols name or an element. A dot without it."
+    },
+    "tone": {
+      "type": "TimelineTone",
+      "required": false,
+      "description": "Colour of the mark."
+    }
+  }
+}

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

@@ -87,6 +87,11 @@
       "type": "(item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>",
       "required": false,
       "description": "Lazily resolves children the first time a node is expanded."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<div>`; `tree-view` unless given."
     }
   }
 }

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

@@ -46,6 +46,16 @@
       "required": false,
       "description": "Truncate with an ellipsis on a single line."
     },
+    "lines": {
+      "type": "number",
+      "required": false,
+      "description": "Truncate with an ellipsis after this many lines."
+    },
+    "tabularNums": {
+      "type": "boolean",
+      "required": false,
+      "description": "Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables."
+    },
     "component": {
       "type": "keyof JSX.IntrinsicElements",
       "required": false,

package/component-meta/feedBack/emptyState/emptyState.json

@@ -0,0 +1,62 @@
+{
+  "name": "EmptyState",
+  "description": "What a list, table or panel shows when it has nothing: an icon, a title, the message (children) and actions; a centred block or an inline muted line, medium or small.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<HTMLAttributes<HTMLDivElement>, \"title\">"
+  ],
+  "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/emptyState/emptyState.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.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/emptyState/emptyState.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";"
+  },
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS class name(s) for the root element."
+    },
+    "title": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "What is empty, e.g. \"No works yet\"."
+    },
+    "icon": {
+      "type": "ReactNode | string",
+      "required": false,
+      "description": "An icon name, or an icon element. Decorative: the title and the message say it all."
+    },
+    "actions": {
+      "type": "ReactNode",
+      "required": false,
+      "description": "What the reader can do about it: buttons or links."
+    },
+    "variant": {
+      "type": "\"block\" | \"inline\"",
+      "required": false,
+      "description": "`block` (default): centred, for an empty page, panel or card.\n`inline`: a muted line of text, for a list, a table or a column that came\nout empty; an action follows the last word."
+    },
+    "size": {
+      "type": "\"small\" | \"medium\"",
+      "required": false,
+      "description": "`small`: tighter, for a narrow column or a card."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<div>`; `empty-state` unless given."
+    }
+  }
+}

package/component-meta/feedBack/message/message.json

@@ -52,6 +52,11 @@
       "type": "string",
       "required": false,
       "description": "Accessible label for the close button."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<div>`; `message` unless given."
     }
   }
 }

package/component-meta/feedBack/progressIndicator/progressIndicator.circularProgress.json

@@ -20,7 +20,7 @@
     "progressValue": {
       "type": "number",
       "required": false,
-      "description": "Progress Value. Optional. Type: number."
+      "description": "Percent, 0–100."
     }
   }
 }