@smwb/ui-mcp-solid 0.12.1 → 0.13.0

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

@@ -88,6 +88,11 @@
       "required": false,
       "description": "Load Children. Optional. Type: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `tree-view` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

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

@@ -48,6 +48,11 @@
       "required": false,
       "description": "`small`: tighter, for a narrow column or a card."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `empty-state` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

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

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

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

@@ -44,7 +44,7 @@
     "count": {
       "type": "number",
       "required": false,
-      "description": "Render N stacked placeholders."
+      "description": "Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the\nother HTML attributes; `class` and `style` go on each placeholder."
     },
     "animationDelay": {
       "type": "number",
@@ -54,7 +54,12 @@
     "component": {
       "type": "\"span\" | \"div\"",
       "required": false,
-      "description": "Root element."
+      "description": "Element of each placeholder."
+    },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the placeholder; `skeleton` unless given. With `count` > 1 it\nmarks the group, and each placeholder keeps `skeleton`."
     },
     "ref": {
       "type": "Ref<HTMLElement>",

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

@@ -31,7 +31,7 @@
     "message": {
       "type": "JSX.Element",
       "required": true,
-      "description": "Chat message data object."
+      "description": "What the tip says: text or markup."
     },
     "placement": {
       "type": "Placement",
@@ -46,17 +46,17 @@
     "trigger": {
       "type": "TooltipTrigger",
       "required": false,
-      "description": "hover (default): show on pointer enter; click: toggle; manual: use open only."
+      "description": "What shows the tooltip. `hover` (default): the pointer over the target or keyboard focus\nin it, until both have left. Keyboard focus is focus with a focus ring (`:focus-visible`),\nnot the focus a mouse press gives a button. `click`: a click on the target shows or hides\nit. `manual`: `open` alone. Escape hides a `hover` or `click` tooltip."
     },
     "openDelay": {
       "type": "number",
       "required": false,
-      "description": "Open Delay. Optional. Type: number."
+      "description": "Milliseconds from the pointer entering the target, or keyboard focus moving into it, until a hover tooltip shows."
     },
     "closeDelay": {
       "type": "number",
       "required": false,
-      "description": "Close Delay. Optional. Type: number."
+      "description": "Milliseconds from the pointer and keyboard focus both leaving the target until a hover tooltip hides."
     },
     "ref": {
       "type": "Ref<HTMLDivElement>",

package/component-meta/inputs/button/button.json

@@ -89,6 +89,11 @@
       "required": false,
       "description": "Disable the ripple effect."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root; `button`, or `button-link` for a link, unless given."
+    },
     "ref": {
       "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
       "required": false,

package/component-meta/inputs/buttonGroups/buttonGroup.json

@@ -54,6 +54,11 @@
       "required": false,
       "description": "Semantic color propagated to child buttons."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `button-group` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/inputs/checkbox/checkbox.json

@@ -37,7 +37,7 @@
     "readOnly": {
       "type": "boolean",
       "required": false,
-      "description": "Whether the value is read-only."
+      "description": "Keeps the checkbox as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\nIt stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`)."
     },
     "required": {
       "type": "boolean",
@@ -57,7 +57,7 @@
     "indeterminate": {
       "type": "boolean",
       "required": false,
-      "description": "Indeterminate. Optional. Type: boolean."
+      "description": "Shows the checkbox as partly checked, as for a \"select all\" over a partial selection: drawn with a dash and\nannounced as \"mixed\" by screen readers, whatever `checked` is. A click does not clear it: the click toggles\n`checked` as usual and `onChange` reports the new `checked`, while the checkbox stays mixed until this prop turns\nfalse."
     },
     "size": {
       "type": "SelectionControlSize",

package/component-meta/inputs/radioButton/radioButton.json

@@ -38,7 +38,7 @@
     "readOnly": {
       "type": "boolean",
       "required": false,
-      "description": "Whether the value is read-only."
+      "description": "Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and\n`onChange` is not called. It stays focusable.\n\nThe input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,\nonly for its group. Put `role=\"radiogroup\"`, a name and `aria-readonly=\"true\"` on the element around the radios."
     },
     "required": {
       "type": "boolean",
@@ -85,6 +85,11 @@
       "required": false,
       "description": "Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state)."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the `<input>`; `radio` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLInputElement>",
       "required": false,

package/component-meta/inputs/rating/rating.json

@@ -92,7 +92,17 @@
     "id": {
       "type": "string",
       "required": false,
-      "description": "Unique identifier for the root element."
+      "description": "Id of the control: the slider, or the image of a read-only rating."
+    },
+    "aria-label": {
+      "type": "string",
+      "required": false,
+      "description": "What is rated: the accessible name of the slider, \"Rating\" by default. A read-only rating is an image named by\nits value (\"3 of 5\"), after this label."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "required": false,
+      "description": "Ids of more elements that describe the control, after its helper text."
     },
     "onChange": {
       "type": "(value: number) => void",
@@ -102,7 +112,7 @@
     "ref": {
       "type": "Ref<HTMLSpanElement>",
       "required": false,
-      "description": "Ref. Optional. Type: Ref<HTMLSpanElement>."
+      "description": "The control: the slider, or the image of a read-only rating."
     }
   }
 }

package/component-meta/inputs/selectField/dropdownMenu.json

@@ -83,9 +83,9 @@
       "description": "Is Loading. Optional. Type: boolean | undefined."
     },
     "optionRenderer": {
-      "type": "((args: import(\"../../navigation/menu\").MenuItemProps) => JSX.Element) | undefined",
+      "type": "((args: MenuItemProps) => JSX.Element) | undefined",
       "required": false,
-      "description": "Option Renderer. Optional. Type: ((args: import(\"../../navigation/menu\").MenuItemProps) => JSX.Element) | undefined."
+      "description": "Option Renderer. Optional. Type: ((args: MenuItemProps) => JSX.Element) | undefined."
     },
     "container": {
       "type": "HTMLElement | undefined",
@@ -106,6 +106,51 @@
       "type": "number | undefined",
       "required": false,
       "description": "Item Height. Optional. Type: number | undefined."
+    },
+    "listboxId": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Id of the listbox; the options' ids follow from it (`dropdownOptionId`)."
+    },
+    "labelledBy": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Ids of the elements that name the listbox and the search box in the menu."
+    },
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Names the listbox and the search box in the menu when no element does."
+    },
+    "multiple": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Several options can be selected (`aria-multiselectable`)."
+    },
+    "activeIndex": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "Index of the active option, counting `items` and then the create option; -1 for none."
+    },
+    "showActive": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Marks the active option and keeps it in view: the keyboard moved to it."
+    },
+    "searchInputProps": {
+      "type": "(JSX.AriaAttributes & Pick<JSX.InputHTMLAttributes<HTMLInputElement>, \"onKeyDown\">) | undefined",
+      "required": false,
+      "description": "Attributes and handlers of the search box in the menu, which the field makes a combobox."
+    },
+    "searchInputRef": {
+      "type": "((element: HTMLInputElement) => void) | undefined",
+      "required": false,
+      "description": "Search Input Ref. Optional. Type: ((element: HTMLInputElement) => void) | undefined."
+    },
+    "menuRef": {
+      "type": "((element: HTMLDivElement) => void) | undefined",
+      "required": false,
+      "description": "The menu's root element."
     }
   }
 }

package/component-meta/inputs/selectField/selectField.json

@@ -19,9 +19,10 @@
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/menu/menu.entry.less",
       "@smwb/ui-styles/less/components/progressIndicator/progressIndicator.entry.less",
+      "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
       "@smwb/ui-styles/less/components/textField/textField.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/selectField/selectField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chip/chip.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/menu/menu.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/progressIndicator/progressIndicator.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/textField/textField.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/selectField/selectField.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/chip/chip.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/menu/menu.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/progressIndicator/progressIndicator.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/textField/textField.entry.less\";"
   },
   "props": {
     "class": {
@@ -32,7 +33,7 @@
     "value": {
       "type": "SelectValue | undefined",
       "required": false,
-      "description": "Controlled value."
+      "description": "The selected value, or the values of a `multiple` field. Any value but\n`undefined` makes the field controlled: it shows this value and nothing\nelse, and a pick, a chip delete or a clear only asks for a change through\n`onChange`. `null` means nothing is selected. While `value` is `undefined`,\nthe field keeps its own value, starting from `defaultValue`."
     },
     "defaultValue": {
       "type": "null | string | number | (string | number)[]",
@@ -87,7 +88,7 @@
     "search": {
       "type": "true | false | \"menu\"",
       "required": false,
-      "description": "Search. Optional. Type: true | false | \"menu\"."
+      "description": "A search box for the options: `true` puts it in the field, where it takes\nthe focus and is the combobox; `\"menu\"` puts it at the top of the menu,\nwhich moves the focus into it when it opens."
     },
     "chips": {
       "type": "boolean",
@@ -112,7 +113,7 @@
     "label": {
       "type": "string",
       "required": false,
-      "description": "Visible label text."
+      "description": "Visible label, drawn above the field (an `inline` field draws none). It\nnames the combobox, whose value is the selected text: \"Country\", \"Russia\".\nWith `chips` the chips' texts follow it in the name: \"Labels Backend Docs\"."
     },
     "variant": {
       "type": "\"outlined\" | \"filled\"",
@@ -167,7 +168,7 @@
     "optionRenderer": {
       "type": "(args: MenuItemProps) => JSX.Element",
       "required": false,
-      "description": "Option Renderer. Optional. Type: (args: MenuItemProps) => JSX.Element."
+      "description": "Draws an option in place of the default one. It gets the option's props\nand returns its `<li>`: pass `id`, `role`, `aria-selected`, `aria-disabled`,\n`class` and `onClick` on to it, so the option can be reached from the\nkeyboard, read out and picked."
     },
     "clearable": {
       "type": "boolean",
@@ -195,14 +196,14 @@
       "description": "Item Height. Optional. Type: number."
     },
     "aria-label": {
-      "type": "string",
+      "type": "string | undefined",
       "required": false,
-      "description": "Accessible label when no visible title is present."
+      "description": "Accessible name of the combobox. Replaces the name the visible `label`\ngives it; a field without a drawn label needs it."
     },
     "id": {
       "type": "string",
       "required": false,
-      "description": "Unique identifier for the root element."
+      "description": "Id of the control, the part of the field that holds the selected text. It is\nthe combobox, unless `search` puts a search box in it: then the box is."
     },
     "ref": {
       "type": "Ref<HTMLSpanElement>",

package/component-meta/inputs/slider/slider.json

@@ -24,7 +24,7 @@
   },
   "props": {
     "value": {
-      "type": "SliderValue",
+      "type": "SliderValue | undefined",
       "required": false,
       "description": "Controlled value."
     },
@@ -71,7 +71,7 @@
     "valueField": {
       "type": "boolean",
       "required": false,
-      "description": "Value Field. Optional. Type: boolean."
+      "description": "Draws a number field beside the slider for typing the value; a single\n`discrete` slider only. The field is named as the slider is (see `label`\nand `aria-label`)."
     },
     "withTicks": {
       "type": "boolean",
@@ -79,9 +79,9 @@
       "description": "With Ticks. Optional. Type: boolean."
     },
     "label": {
-      "type": "string",
+      "type": "string | undefined",
       "required": false,
-      "description": "Visible label text."
+      "description": "Visible label, drawn above the slider. It names the slider; each thumb of a\nrange adds its own word: with `label=\"Price\"` they read \"Price minimum\" and\n\"Price maximum\"."
     },
     "helperText": {
       "type": "JSX.Element",
@@ -119,9 +119,14 @@
       "description": "Slider tick marks configuration."
     },
     "aria-label": {
-      "type": "string",
+      "type": "string | undefined",
+      "required": false,
+      "description": "Accessible name of the slider. Replaces the name the visible `label` gives\nit; a slider without a label needs it or `aria-labelledby`. Each thumb of a\nrange adds its own word, as with `label`."
+    },
+    "aria-labelledby": {
+      "type": "string | undefined",
       "required": false,
-      "description": "Accessible label when no visible title is present."
+      "description": "Ids of the elements whose text names the slider. It goes on the range input,\nnot the root, and replaces the name the visible `label` gives it; as on any\nelement, it also wins over `aria-label`. Each thumb of a range adds its own\nword, as with `label`."
     },
     "getAriaValueText": {
       "type": "(value: number) => string",

package/component-meta/inputs/textField/textField.json

@@ -24,7 +24,7 @@
     "label": {
       "type": "string | undefined",
       "required": false,
-      "description": "Visible label text."
+      "description": "Visible label; it points to the `<input>`, so it also names the field. Not drawn for an `inline` field."
     },
     "helperText": {
       "type": "JSX.Element",
@@ -56,6 +56,11 @@
       "required": false,
       "description": "Controlled value."
     },
+    "class": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Class name(s) for the root wrapper `<div>`. `style` and `data-*` attributes go to the wrapper too (a `data-testid`\nreplaces its default `text-field`); every other HTML attribute (`aria-*`, `autofocus`, `maxlength`, event handlers)\ngoes to the `<input>`."
+    },
     "placeholder": {
       "type": "string",
       "required": false,
@@ -112,9 +117,9 @@
       "description": "End Adornment. Optional. Type: JSX.Element."
     },
     "id": {
-      "type": "string",
+      "type": "string | undefined",
       "required": false,
-      "description": "Unique identifier for the root element."
+      "description": "Id of the `<input>`; the label points to it. Generated when not given."
     },
     "inline": {
       "type": "boolean",

package/component-meta/inputs/textField/textFieldWrapper.json

@@ -31,6 +31,11 @@
       "required": false,
       "description": "Supplementary hint text displayed below the control."
     },
+    "helperTextId": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Id of the helper text, for the control's `aria-describedby`. Only shown helper text takes it: not the blank line\ndrawn without helper text, and an inline field shows none."
+    },
     "variant": {
       "type": "TextFieldVariant | undefined",
       "required": false,
@@ -64,7 +69,12 @@
     "for": {
       "type": "string | undefined",
       "required": false,
-      "description": "For. Optional. Type: string | undefined."
+      "description": "Id of the control the label names. Without it, the label names nothing."
+    },
+    "labelId": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Id of the `<label>`. A control that `for` cannot label (one that is not a\nform element, such as SelectField's `role=\"button\"`) points\n`aria-labelledby` at it."
     },
     "shrink": {
       "type": "boolean | undefined",
@@ -91,6 +101,11 @@
       "required": false,
       "description": "Inline. Optional. Type: boolean | undefined."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `text-field` unless given."
+    },
     "children": {
       "type": "JSX.Element",
       "required": false,

package/component-meta/inputs/toggle/toggle.json

@@ -33,7 +33,7 @@
     "readOnly": {
       "type": "boolean",
       "required": false,
-      "description": "Whether the value is read-only."
+      "description": "Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\nIt stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`)."
     },
     "required": {
       "type": "boolean",

package/component-meta/inputs/valueSlider/valueSlider.json

@@ -22,6 +22,16 @@
     "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/valueSlider/valueSlider.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/slider/slider.entry.less\";"
   },
   "props": {
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Label text, drawn in the header row beside the readout. It names the slider,\nas `Slider`'s label does; each thumb of a range adds its own word: with\n`label=\"Price\"` they read \"Price minimum\" and \"Price maximum\"."
+    },
+    "aria-label": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Accessible name of the slider. Replaces the name the header `label` gives\nit; a ValueSlider without a label needs it or `aria-labelledby`. Each thumb\nof a range adds its own word, as with `label`."
+    },
     "readout": {
       "type": "boolean | ((value: SliderValue | undefined) => string)",
       "required": false,
@@ -43,7 +53,7 @@
       "description": "Accessible label for the reset control."
     },
     "value": {
-      "type": "SliderValue",
+      "type": "SliderValue | undefined",
       "required": false,
       "description": "Controlled value."
     },
@@ -90,18 +100,13 @@
     "valueField": {
       "type": "boolean",
       "required": false,
-      "description": "Value Field. Optional. Type: boolean."
+      "description": "Draws a number field beside the slider for typing the value; a single\n`discrete` slider only. The field is named as the slider is (see `label`\nand `aria-label`)."
     },
     "withTicks": {
       "type": "boolean",
       "required": false,
       "description": "With Ticks. Optional. Type: boolean."
     },
-    "label": {
-      "type": "string",
-      "required": false,
-      "description": "Visible label text."
-    },
     "helperText": {
       "type": "JSX.Element",
       "required": false,
@@ -137,10 +142,10 @@
       "required": false,
       "description": "Slider tick marks configuration."
     },
-    "aria-label": {
-      "type": "string",
+    "aria-labelledby": {
+      "type": "string | undefined",
       "required": false,
-      "description": "Accessible label when no visible title is present."
+      "description": "Ids of the elements whose text names the slider. It goes on the range input,\nnot the root, and replaces the name the visible `label` gives it; as on any\nelement, it also wins over `aria-label`. Each thumb of a range adds its own\nword, as with `label`."
     },
     "getAriaValueText": {
       "type": "(value: number) => string",

package/component-meta/layout/appLayout/appLayout.json

@@ -83,6 +83,11 @@
       "required": false,
       "description": "Keep the header pinned while content scrolls."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `app-layout` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/layout/divider/divider.json

@@ -51,6 +51,11 @@
       "required": false,
       "description": "Stretch to fill a flex container along the cross axis."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `divider` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/layout/floatingWindow/floatingWindow.json

@@ -194,6 +194,11 @@
       "required": false,
       "description": "Accessible label when no visible title is present."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the window's root `<div>`; `floating-window` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/layout/grid/grid.column.json

@@ -76,6 +76,11 @@
       "required": false,
       "description": "Hide column: boolean (always) or per breakpoint `{ xs:true, md:false }`."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `grid-col` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/layout/grid/grid.container.json

@@ -31,6 +31,11 @@
       "required": false,
       "description": "Remove horizontal gutters."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `grid-container` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/layout/grid/grid.row.json

@@ -46,6 +46,11 @@
       "required": false,
       "description": "Spacing between stacked children."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `grid-row` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

package/component-meta/layout/page/page.json

@@ -36,6 +36,11 @@
       "required": false,
       "description": "Render as a different element (default `main`)."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root element; `page` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLElement>",
       "required": false,

package/component-meta/layout/pageHeader/pageHeader.json

@@ -48,6 +48,11 @@
       "required": false,
       "description": "Render a divider below the header."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<header>`; `page-header` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLElement>",
       "required": false,

package/component-meta/layout/sectionHeader/sectionHeader.json

@@ -59,6 +59,11 @@
       "required": false,
       "description": "A line under the title."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<header>`; `section-header` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLElement>",
       "required": false,

package/component-meta/layout/sheet/sheet.json

@@ -110,6 +110,11 @@
       "required": false,
       "description": "Accessible label when no visible title is present."
     },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the sheet panel (the dialog); `sheet` unless given."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,