@smwb/ui-mcp-react 2.7.0 → 2.9.0

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

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

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

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

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

@@ -40,6 +40,11 @@
       "type": "string",
       "required": false,
       "description": "Additional CSS class name(s) for the root element."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root element; `page` unless given."
     }
   }
 }

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

@@ -52,6 +52,11 @@
       "type": "string",
       "required": false,
       "description": "Additional CSS class name(s) for the root element."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<header>`; `page-header` unless given."
     }
   }
 }

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

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

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

@@ -66,6 +66,26 @@
       "required": false,
       "description": "Reverse Header Actions. Optional. Type: boolean."
     },
+    "closeAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the header close button (default \"Close sheet\")."
+    },
+    "expandAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\ncycles normal, expanded, collapsed and back, and its name always says what the next press does; the\nname changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded."
+    },
+    "collapseAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\")."
+    },
+    "restoreAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\")."
+    },
     "size": {
       "type": "string",
       "required": false,
@@ -115,6 +135,11 @@
       "type": "string",
       "required": false,
       "description": "Accessible label when no visible title is present."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the sheet panel (the dialog); `sheet` unless given."
     }
   }
 }

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

@@ -55,6 +55,11 @@
       "type": "string",
       "required": false,
       "description": "Additional CSS class name(s) for the root element."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<div>`; `stack` unless given."
     }
   }
 }

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

@@ -0,0 +1,101 @@
+{
+  "name": "TabGroups",
+  "description": "Tab groups in a split area: move tabs between groups by drag and drop or keyboard, split right or down, resize, close the last tab to close a group; the layout is a versioned JSON (layout/onLayoutChange).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal",
+    "note": "Renders the groups, tab rows and selected panels on the server; drag and drop and resizing run in the browser."
+  },
+  "extends": [
+    "Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"onChange\">"
+  ],
+  "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/tabGroups/tabGroups.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less",
+      "@smwb/ui-styles/less/components/menu/menu.entry.less",
+      "@smwb/ui-styles/less/components/tabs/tabs.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/tabGroups/tabGroups.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/kbd/kbd.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/tabs/tabs.entry.less\";"
+  },
+  "props": {
+    "layout": {
+      "type": "TabGroupsLayout | undefined",
+      "required": false,
+      "description": "The arrangement to draw: the split tree, the tabs of every group and which of them is\nselected. Controlled while it is not `undefined` — the component then draws what it is given\nand an owner that ignores `onLayoutChange` sees nothing move."
+    },
+    "defaultLayout": {
+      "type": "TabGroupsLayout | undefined",
+      "required": false,
+      "description": "The layout of the uncontrolled mode's first render: one empty group by default."
+    },
+    "onLayoutChange": {
+      "type": "((layout: TabGroupsLayout, change: TabGroupsChange) => void) | undefined",
+      "required": false,
+      "description": "Called with the new layout and what changed (`select`, `activate`, `move`, `split`, `close`,\n`resize`) in the controlled and the uncontrolled mode alike. Store the layout here; the\n`change` says which of them are worth writing (an `activate` is a focus move, not an edit)."
+    },
+    "getTab": {
+      "type": "(tabId: string) => TabGroupsTab | undefined",
+      "required": true,
+      "description": "What a tab shows, by its id: `undefined` draws the id as the label."
+    },
+    "renderPanel": {
+      "type": "(tabId: string) => React.ReactNode",
+      "required": true,
+      "description": "The content of a tab's panel, by its id. Called from the first time the tab is selected and\nkept mounted after that, so a panel keeps its state while hidden and while its tab moves."
+    },
+    "onTabClose": {
+      "type": "| ((tabId: string, event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => boolean | void) | undefined",
+      "required": false,
+      "description": "Asked before a tab closes (its close button, Delete or Backspace, a middle press or its\n`actions`), with what asked for it. Return `false` to keep the tab; anything else closes it."
+    },
+    "empty": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Drawn, centred, when nothing is open: the only group has no tabs."
+    },
+    "minGroupSize": {
+      "type": "number",
+      "required": false,
+      "description": "The smallest a group can be resized to, in px of its split; 120 by default."
+    },
+    "keyboardStep": {
+      "type": "number",
+      "required": false,
+      "description": "A separator's arrow-key step, in percent of its split; 5 by default, as `ScreenDivider`."
+    },
+    "groupActions": {
+      "type": "boolean",
+      "required": false,
+      "description": "Draw each group's actions button and its menu; true by default."
+    },
+    "dense": {
+      "type": "boolean",
+      "required": false,
+      "description": "Compact tab rows (`Tabs`' `dense`); false by default."
+    },
+    "labels": {
+      "type": "Partial<TabGroupsLabels> | undefined",
+      "required": false,
+      "description": "The component's texts, to localise them. English by default."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Base of the generated ids and the root's own id. Generated by default."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root element; \"tab-groups\" by default."
+    }
+  }
+}

package/component-meta/navigation/appBar/appBar.json

@@ -66,15 +66,35 @@
       "required": false,
       "description": "Accessible title or tooltip text."
     },
+    "titleAs": {
+      "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+      "required": false,
+      "description": "Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,\nfor the page's main heading. Only the tag changes — a heading is drawn with\nthe bar's own font size, weight and no margins, so it looks exactly like the\ndiv. The heading's text is the `title` itself, so pass a string or plain\nmarkup rather than a `Typography` heading."
+    },
     "midContentAlign": {
       "type": "\"middle\" | \"left\" | \"right\"",
       "required": false,
       "description": "Mid Content Align. Optional. Type: \"middle\" | \"left\" | \"right\"."
     },
+    "variant": {
+      "type": "\"default\" | \"window\"",
+      "required": false,
+      "description": "`window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window\nControls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,\nand room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`."
+    },
+    "windowControls": {
+      "type": "\"auto\" | \"left\" | \"right\" | \"none\"",
+      "required": false,
+      "description": "With `variant=\"window\"`: where the OS window buttons are, so the bar's content keeps clear of them.\n`auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron\n`titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: \"hiddenInset\"`),\n`right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is\nthe `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default)."
+    },
     "color": {
       "type": "AppBarColor",
       "required": false,
       "description": "Semantic background color."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given."
     }
   }
 }

package/component-meta/navigation/breadcrumbs/breadcrumbs.json

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

package/component-meta/navigation/commandPalette/commandPalette.json

@@ -0,0 +1,161 @@
+{
+  "name": "CommandPalette",
+  "description": "Command Palette component from the navigation module.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/commandPalette/commandPalette.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less",
+      "@smwb/ui-styles/less/components/modal/modal.entry.less",
+      "@smwb/ui-styles/less/components/skeleton/skeleton.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/commandPalette/commandPalette.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/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/modal/modal.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";"
+  },
+  "props": {
+    "open": {
+      "type": "boolean",
+      "required": false,
+      "description": "Controlled open state. The palette is controlled while this is not `undefined`."
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "required": false,
+      "description": "Open state used while `open` is `undefined`; `false` by default."
+    },
+    "onOpenChange": {
+      "type": "(open: boolean) => void",
+      "required": false,
+      "description": "Called for every request to open or close: Escape, a backdrop click, and choosing an item\nwhile `closeOnSelect`. Called in the controlled and in the uncontrolled mode."
+    },
+    "groups": {
+      "type": "CommandPaletteGroup[]",
+      "required": false,
+      "description": "Static groups, filtered locally by `filter`. A group left with no items is hidden, heading included."
+    },
+    "recent": {
+      "type": "CommandPaletteItem[]",
+      "required": false,
+      "description": "Recently used items, kept by the app: it owns the list and updates it from `onSelect`. Shown as\nthe first group while the trimmed query is empty, never filtered, and hidden while searching."
+    },
+    "recentLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Heading of the recent group; `\"Recent\"` by default. That group is `{ id: \"recent\", label: recentLabel, items: recent }` in `onSelect`."
+    },
+    "query": {
+      "type": "string",
+      "required": false,
+      "description": "Controlled query. The palette is controlled while this is not `undefined`."
+    },
+    "defaultQuery": {
+      "type": "string",
+      "required": false,
+      "description": "Query used while `query` is `undefined`; `\"\"` by default. An uncontrolled field goes back to it\neach time the palette opens."
+    },
+    "onQueryChange": {
+      "type": "(query: string) => void",
+      "required": false,
+      "description": "Called for every edit of the field, in the controlled and in the uncontrolled mode."
+    },
+    "filter": {
+      "type": "CommandPaletteFilter | false",
+      "required": false,
+      "description": "Local matching of `groups`; commandPaletteFilter by default (every word of the query\noccurs in the label, the subtitle or a keyword, ignoring case and accents). `false` shows\n`groups` as given, for an app that filters or ranks them itself. Never applied to `recent` or\nto the results of `source`."
+    },
+    "source": {
+      "type": "CommandPaletteSource",
+      "required": false,
+      "description": "Loads results for the trimmed query, appended after the static groups. Called after `debounce`\nmilliseconds of quiet typing and only for a query of at least `minQueryLength` characters;\n`signal` is aborted when a newer query, a close or an unmount makes the answer useless. While a\nrequest is pending its predecessors' groups are not shown, and a rejection that is not an abort\nshows `errorText`."
+    },
+    "debounce": {
+      "type": "number",
+      "required": false,
+      "description": "Milliseconds of quiet typing before `source` is called; `200` by default."
+    },
+    "minQueryLength": {
+      "type": "number",
+      "required": false,
+      "description": "`source` is called only when the trimmed query has at least this many characters; `1` by\ndefault, so an empty query loads nothing. `0` also loads for the empty query."
+    },
+    "loading": {
+      "type": "boolean",
+      "required": false,
+      "description": "App-driven loading: shows the skeleton like a pending `source`; `false` by default."
+    },
+    "onSelect": {
+      "type": "(item: CommandPaletteItem, group: CommandPaletteGroup) => void",
+      "required": false,
+      "description": "Called for every chosen item, after the item's own `onSelect`. The place for the app to run the\ncommand and to update its `recent` list."
+    },
+    "closeOnSelect": {
+      "type": "boolean",
+      "required": false,
+      "description": "Ask to close (`onOpenChange(false)`) when an item is chosen; `true` by default."
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false,
+      "description": "Placeholder of the field; `\"Type a command or search…\"` by default. It is not the field's name."
+    },
+    "searchLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the field and, through `aria-labelledby`, of the listbox; `\"Search commands\"` by default."
+    },
+    "noResultsText": {
+      "type": "string",
+      "required": false,
+      "description": "Shown and announced when nothing matches; `\"No results\"` by default."
+    },
+    "errorText": {
+      "type": "string",
+      "required": false,
+      "description": "Shown and announced when `source` rejects; `\"Couldn't load results\"` by default."
+    },
+    "resultsAnnouncement": {
+      "type": "(count: number) => string",
+      "required": false,
+      "description": "Text of the polite status once a search has settled; `\"1 result\"` / `\"N results\"` by default.\nNot used for zero results, which announce `noResultsText`."
+    },
+    "footer": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Slot under the results, e.g. key hints built with `Kbd`. Drawn only when given."
+    },
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Added to the dialog element, after `smwb-command-palette`."
+    },
+    "aria-label": {
+      "type": "string",
+      "required": false,
+      "description": "Name of the dialog; `\"Command palette\"` by default. Not set when `aria-labelledby` is given."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "required": false,
+      "description": "Id of the element that names the dialog. Wins over `aria-label`."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "required": false,
+      "description": "Id of the element that describes the dialog."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the dialog element; `\"command-palette\"` unless given."
+    }
+  }
+}

package/component-meta/navigation/menu/menu.json

@@ -7,7 +7,7 @@
     "note": "The trigger renders on the server; the menu surface mounts on the client."
   },
   "extends": [
-    "MenuFloatingProps &\n  React.HTMLAttributes<HTMLElement> & {\n    variant?: \"static\" | \"floating\";\n    dense?: boolean;\n  }"
+    "MenuFloatingProps &\n  React.HTMLAttributes<HTMLElement> & {\n    variant?: \"static\" | \"floating\";\n    dense?: boolean;\n    /**\n     * Role of the list inside the menu, `menu` by default. A component that draws\n     * a list of its own on the menu's surface sets `presentation`: SelectField's\n     * options are a `listbox` inside it.\n     */\n    listRole?: React.AriaRole;\n  }"
   ],
   "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
   "styles": {

package/component-meta/navigation/menu/menuItem.json

@@ -26,7 +26,7 @@
     "disabled": {
       "type": "boolean",
       "required": false,
-      "description": "Whether the control is disabled and non-interactive."
+      "description": "Greys the item out and marks it `aria-disabled`. It takes no focus, the arrow keys\nskip it, and neither a click nor Enter or Space chooses it."
     },
     "selected": {
       "type": "boolean",

package/component-meta/navigation/pagination/pagination.json

@@ -97,6 +97,11 @@
       "type": "(page: number) => void",
       "required": false,
       "description": "Callback fired when the value changes."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<nav>`; `pagination` unless given."
     }
   }
 }

package/component-meta/navigation/sidebar/sidebar.json

@@ -78,6 +78,11 @@
       "type": "string",
       "required": false,
       "description": "Accessible label for the built-in collapse toggle."
+    },
+    "contained": {
+      "type": "boolean",
+      "required": false,
+      "description": "Place the rail inside its container instead of pinning it to the window.\nThe sidebar stays in the page flow (`position: relative`), keeps its\nvariant width as a non-shrinking flex item and scrolls a long menu inside\nitself, so sibling content flows beside it and reflows when it collapses.\nGive the container a definite height (e.g. a fixed-height flex row) to\nmake the rail fill it; with an auto-height container the rail sizes\nitself to the menu. Defaults to `false`: the sidebar stays viewport-fixed."
     }
   }
 }

package/component-meta/navigation/stepper/stepper.json

@@ -52,6 +52,11 @@
       "type": "(index: number) => void",
       "required": false,
       "description": "Makes steps clickable; receives the clicked step index."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the stepper `<div>`; `stepper` unless given."
     }
   }
 }

package/component-meta/navigation/tabs/tab/tab.json

@@ -18,9 +18,10 @@
       "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less"
     ],
     "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.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/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.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/tabs/tab/tab.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\";"
   },
   "props": {
     "label": {
@@ -33,6 +34,11 @@
       "required": false,
       "description": "Is Active. Optional. Type: boolean."
     },
+    "tabStop": {
+      "type": "boolean",
+      "required": false,
+      "description": "Whether the tab is the one in the page's Tab order (`tabIndex` 0, the others -1). `Tabs` sets\nit: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\nis the stop while `isActive`."
+    },
     "contentRef": {
       "type": "React.Ref<unknown>",
       "required": false,
@@ -41,7 +47,7 @@
     "icon": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "Icon node or image source."
+      "description": "Content before the label: a status marker (running, done, failed). The slot is decorative, so\nthe tab's accessible name stays the label alone and nothing is read out twice. An icon that has\nto be announced belongs in `label`, where you can give it words."
     },
     "stacked": {
       "type": "boolean",
@@ -51,17 +57,37 @@
     "tag": {
       "type": "React.ElementType",
       "required": false,
-      "description": "Tag. Optional. Type: React.ElementType."
+      "description": "The element to render. A tab with an `href` is an `a` unless you say otherwise."
     },
     "href": {
       "type": "string",
       "required": false,
-      "description": "With `tag=\"a\"`: where the link goes, so the tab stays a real link."
+      "description": "Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\nno `target`: a tab never opens another window), so it opens in place and middle click, copy\nlink and the like work. A router takes over the plain click in `onClick` with\n`event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n(Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n\"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\nThe one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\neditor, and its default is prevented so nothing opens."
     },
     "disabled": {
       "type": "boolean",
       "required": false,
       "description": "Whether the control is disabled and non-interactive."
+    },
+    "closable": {
+      "type": "boolean",
+      "required": false,
+      "description": "Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n(Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A middle\npress on the tab asks for the same thing (`reason` \"middleClick\") without selecting it. The tab\ndoes not close itself: `onClose` asks for it and the owner removes the `Tab`. The button is a\nsibling of the tab, not inside its `role=\"tab\"`, so the tab's accessible name is its label alone.\nIt is out of the Tab order (`tabIndex` -1), so the row keeps one tab stop, and a press on it takes\nno focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\ntab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\nhas a disabled button.\n\nThe button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\nwho cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\ntab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n(axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n\nTo switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n`actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\nrecreates the tab and drops its focus."
+    },
+    "onClose": {
+      "type": "(event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => void",
+      "required": false,
+      "description": "Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n\"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\nprevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\nor the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\nthe `Tab`."
+    },
+    "closeLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\")."
+    },
+    "actions": {
+      "type": "React.ReactNode | ((api: TabActionsApi) => React.ReactNode)",
+      "required": false,
+      "description": "Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\nor any control. Give a function to get `{ close }` (see `TabActionsApi`). Like the close button\nthe content is a sibling of the tab, so it is not part of the tab's name; the tab's own `ref`,\n`className` and handlers stay on the `role=\"tab\"` element. It stays in the accessibility tree as\nwritten, inside the tab list (see `closable`).\n\nThe row has one tab stop, so give the trigger `tabIndex={-1}`. Shift+F10 or the Menu key on the\nfocused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\nand clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\ncontrol names its popup in `aria-controls`, the first enabled `menuitem` in that element then\ntakes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\nEscape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n\nThe row clips what overflows it: draw the menu in a portal, anchored to the trigger and with the\n`id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with its\nevent, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab removed\nsome other way leaves focus on the page."
     }
   }
 }

package/component-meta/navigation/tabs/tabPanel/tabPanel.json

@@ -0,0 +1,42 @@
+{
+  "name": "TabPanel",
+  "description": "Content panel of one tab, linked to it by aria-labelledby; shown while the tab is selected. Goes in the panels of Tabs.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "React.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/tabs/tabPanel/tabPanel.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/tabs/tabs.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/tabs/tabPanel/tabPanel.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
+  },
+  "props": {
+    "index": {
+      "type": "number",
+      "required": true,
+      "description": "The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\nshows while that tab is selected and is hidden otherwise."
+    },
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Extra class on the panel."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "The panel's content. It stays in the document while the panel is hidden."
+    }
+  }
+}