@smwb/ui-mcp-solid 0.11.2 → 0.12.0

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

@@ -25,9 +25,19 @@
       "description": "Class. Optional. Type: string."
     },
     "title": {
-      "type": "string",
+      "type": "JSX.Element",
+      "required": false,
+      "description": "Header text or markup (a date, an author, a badge…)."
+    },
+    "subtitle": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "Secondary line under the title."
+    },
+    "variant": {
+      "type": "AccordionVariant",
       "required": false,
-      "description": "Accessible title or tooltip text."
+      "description": "Visual style variant."
     },
     "isOpenByDefault": {
       "type": "boolean",
@@ -59,11 +69,26 @@
       "required": false,
       "description": "Start Adornment. Optional. Type: (isOpen: boolean) => JSX.Element."
     },
+    "endAdornment": {
+      "type": "(isOpen: boolean) => JSX.Element",
+      "required": false,
+      "description": "Rendered after the title, before the expand icon."
+    },
     "noIcon": {
       "type": "boolean",
       "required": false,
       "description": "No Icon. Optional. Type: boolean."
     },
+    "lazy": {
+      "type": "boolean",
+      "required": false,
+      "description": "Create the content on first open instead of up front."
+    },
+    "unmountOnExit": {
+      "type": "boolean",
+      "required": false,
+      "description": "Remove the content once the panel has collapsed (created again on open)."
+    },
     "onToggleClick": {
       "type": "(e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void",
       "required": false,

package/component-meta/dataDisplay/avatar/avatar.avatarGroup.json

@@ -36,6 +36,16 @@
       "required": false,
       "description": "Click handler for the \"+N\" surplus chip."
     },
+    "surplusAriaLabel": {
+      "type": "(count: number) => string",
+      "required": false,
+      "description": "Accessible name of the \"+N\" surplus chip."
+    },
+    "size": {
+      "type": "AvatarSize | number",
+      "required": false,
+      "description": "Size of the \"+N\" surplus chip: match the avatars in the group."
+    },
     "ref": {
       "type": "Ref<HTMLDivElement>",
       "required": false,

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

@@ -0,0 +1,73 @@
+{
+  "name": "Chart",
+  "description": "An ECharts chart in the theme's palette (import from @smwb/ui-solid/chart; echarts is an optional peer): option or option(palette), lazy-loaded ECharts or your own loader, a skeleton until it draws, redrawn on theme switches and resizes (not at zero size).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal",
+    "note": "Renders a same-size skeleton and the summary on the server; ECharts loads and draws in the browser."
+  },
+  "extends": [
+    "Omit<JSX.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/chart/chart.entry.less"
+    ],
+    "dependencies": [
+      "@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/chart/chart.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";"
+  },
+  "props": {
+    "label": {
+      "type": "string",
+      "required": true,
+      "description": "What the chart shows: its accessible name."
+    },
+    "summary": {
+      "type": "string",
+      "required": false,
+      "description": "The chart in words, for screen readers; it is there before the chart draws, and on the server."
+    },
+    "option": {
+      "type": "ChartOption | ((palette: ChartPalette) => ChartOption)",
+      "required": true,
+      "description": "The ECharts option, or a function of the theme's palette that returns it.\nIt is applied whole whenever it or the theme changes."
+    },
+    "height": {
+      "type": "number | string",
+      "required": false,
+      "description": "The chart's height: a number of pixels or any CSS length; 240 by default. It fills the width."
+    },
+    "loader": {
+      "type": "() => Promise<ChartModule>",
+      "required": false,
+      "description": "Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\nlibrary. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\nthat registers only the charts you use with `echarts/core`."
+    },
+    "renderer": {
+      "type": "\"canvas\" | \"svg\"",
+      "required": false,
+      "description": "How ECharts draws: \"canvas\" (default) or \"svg\". Read once, when the chart is created."
+    },
+    "onClick": {
+      "type": "(params: ChartEventParams) => void",
+      "required": false,
+      "description": "A click on an item: a bar, a point, a node."
+    },
+    "onReady": {
+      "type": "(chart: ChartInstance) => void",
+      "required": false,
+      "description": "The ECharts instance, once it has drawn — for other events and actions. Called again if a theme change re-creates it."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

package/component-meta/dataDisplay/descriptionList/descriptionList.descriptionItem.json

@@ -0,0 +1,35 @@
+{
+  "name": "DescriptionItem",
+  "description": "One term and its description inside a DescriptionList.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "JSX.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/descriptionList/descriptionList.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/descriptionList/descriptionList.entry.less\";"
+  },
+  "props": {
+    "term": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "The field's name."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+{
+  "name": "DescriptionList",
+  "description": "Field-value pairs (<dl>) from items or DescriptionItem children; side by side, stacking in a narrow container (container query).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "JSX.HTMLAttributes<HTMLDListElement>"
+  ],
+  "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/descriptionList/descriptionList.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/descriptionList/descriptionList.entry.less\";"
+  },
+  "props": {
+    "items": {
+      "type": "DescriptionListEntry[]",
+      "required": false,
+      "description": "The pairs as data; `DescriptionItem` children work too, and come after them."
+    },
+    "layout": {
+      "type": "DescriptionListLayout",
+      "required": false,
+      "description": "Current chat shell layout mode."
+    },
+    "termWidth": {
+      "type": "number | string",
+      "required": false,
+      "description": "Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default."
+    },
+    "dense": {
+      "type": "boolean",
+      "required": false,
+      "description": "Tighter spacing, for side panels."
+    },
+    "ref": {
+      "type": "Ref<HTMLDListElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDListElement>."
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+{
+  "name": "Kanban",
+  "description": "A board of KanbanColumn children side by side, scrolling sideways (with snap) when they do not fit; columnWidth sets the narrowest column.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "JSX.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/kanban/kanban.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/kanban/kanban.entry.less\";"
+  },
+  "props": {
+    "columnWidth": {
+      "type": "number | string",
+      "required": false,
+      "description": "The narrowest a column gets before the board scrolls sideways: a number of\npixels or any CSS length. 15.5rem by default."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

package/component-meta/dataDisplay/kanban/kanban.kanbanCard.json

@@ -0,0 +1,45 @@
+{
+  "name": "KanbanCard",
+  "description": "A card on a Kanban board: a title clamped to titleLines lines (a link stretched over the card with href) and content below.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<JSX.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/kanban/kanban.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/kanban/kanban.entry.less\";"
+  },
+  "props": {
+    "title": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "The card's title, clamped to `titleLines` lines."
+    },
+    "href": {
+      "type": "string",
+      "required": false,
+      "description": "Makes the title a link, and the whole card open it."
+    },
+    "titleLines": {
+      "type": "number",
+      "required": false,
+      "description": "Lines the title is clamped to: 3 by default."
+    },
+    "ref": {
+      "type": "Ref<HTMLLIElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLLIElement>."
+    }
+  }
+}

package/component-meta/dataDisplay/kanban/kanban.kanbanColumn.json

@@ -0,0 +1,55 @@
+{
+  "name": "KanbanColumn",
+  "description": "A board column (role=group named by its title): a count, an accent stripe, KanbanCard children, an empty placeholder and a footer.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<JSX.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/kanban/kanban.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/kanban/kanban.entry.less\";"
+  },
+  "props": {
+    "title": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "The column's name: text or a badge. It names the column for assistive technology."
+    },
+    "count": {
+      "type": "number | string | null",
+      "required": false,
+      "description": "How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null."
+    },
+    "accent": {
+      "type": "string",
+      "required": false,
+      "description": "The column's colour, a stripe along its top: any CSS colour."
+    },
+    "empty": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "Shown in place of the cards when there are none, e.g. \"Empty\"."
+    },
+    "footer": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "Under the cards, e.g. a link to the rest as a list."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+{
+  "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<JSX.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": {
+    "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": "JSX.Element | ((value: number, max: number) => JSX.Element)",
+      "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."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+{
+  "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<JSX.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": {
+    "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": "JSX.Element",
+      "required": false,
+      "description": "A second line under the name: a role, a date."
+    },
+    "ref": {
+      "type": "Ref<HTMLElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLElement>."
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+{
+  "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": [
+    "JSX.HTMLAttributes<HTMLElement>"
+  ],
+  "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": {
+    "label": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "What the figure counts."
+    },
+    "value": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "The figure — a number, or a short value such as \"3 / 14\"."
+    },
+    "hint": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "A line under the value: a comparison, a period, a caveat."
+    },
+    "icon": {
+      "type": "string | JSX.Element",
+      "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."
+    },
+    "ref": {
+      "type": "Ref<HTMLElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLElement>."
+    }
+  }
+}

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": [
+    "JSX.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": {
+    "minItemWidth": {
+      "type": "number | string",
+      "required": false,
+      "description": "Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -49,6 +49,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. Labels come from `TableCell label`."
+    },
     "paginationSettings": {
       "type": "TablePaginationProps",
       "required": false,

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

@@ -26,6 +26,11 @@
       "required": false,
       "description": "Cell Align. Optional. Type: \"left\" | \"right\" | \"center\"."
     },
+    "label": {
+      "type": "string",
+      "required": false,
+      "description": "The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`)."
+    },
     "ref": {
       "type": "Ref<HTMLTableCellElement>",
       "required": false,

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

@@ -41,7 +41,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."
     },
     "sortDirection": {
       "type": "SortDirection",

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": [
+    "JSX.HTMLAttributes<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": {
+    "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)."
+    },
+    "ref": {
+      "type": "Ref<HTMLOListElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLOListElement>."
+    }
+  }
+}

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<JSX.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": {
+    "label": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "What groups the events — a day, a week, a stage."
+    },
+    "ref": {
+      "type": "Ref<HTMLLIElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLLIElement>."
+    }
+  }
+}

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<JSX.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": {
+    "title": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "The event itself: a line of text, usually a link."
+    },
+    "meta": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "A second line: who, what kind, where."
+    },
+    "time": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "When: a time or a date, at the end of the row."
+    },
+    "icon": {
+      "type": "string | JSX.Element",
+      "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."
+    },
+    "ref": {
+      "type": "Ref<HTMLLIElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLLIElement>."
+    }
+  }
+}

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": "string",
       "required": false,

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

@@ -0,0 +1,57 @@
+{
+  "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<JSX.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": {
+    "title": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "What is empty, e.g. \"No works yet\"."
+    },
+    "icon": {
+      "type": "JSX.Element | string",
+      "required": false,
+      "description": "An icon name, or an icon element. Decorative: the title and the message say it all."
+    },
+    "actions": {
+      "type": "JSX.Element",
+      "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."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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."
     }
   }
 }

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

@@ -37,6 +37,11 @@
       "required": false,
       "description": "Progress Value. Optional. Type: number."
     },
+    "max": {
+      "type": "number",
+      "required": false,
+      "description": "Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14."
+    },
     "color": {
       "type": "ProgressColor",
       "required": false,
@@ -47,6 +52,21 @@
       "required": false,
       "description": "Circular size preset."
     },
+    "fullWidth": {
+      "type": "boolean",
+      "required": false,
+      "description": "Linear: fill the container's width instead of the fixed 240px track."
+    },
+    "width": {
+      "type": "number | string",
+      "required": false,
+      "description": "Linear: the width, in px or any CSS length."
+    },
+    "valueLabel": {
+      "type": "boolean | ((value: number, max: number) => JSX.Element)",
+      "required": false,
+      "description": "Linear, determinate: the value as text beside the bar. `true` shows a\npercentage — or \"3 / 14\" with a custom `max`; a function formats it, e.g.\n`(value, max) => <>{value} of {max}</>`."
+    },
     "aria-label": {
       "type": "string",
       "required": false,

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

@@ -119,6 +119,11 @@
       "required": false,
       "description": "Visual style variant."
     },
+    "size": {
+      "type": "\"small\" | \"medium\" | \"large\"",
+      "required": false,
+      "description": "Height of the field, as for TextField: `small` (40px, for toolbars), `medium` (default) or `large`."
+    },
     "fullWidth": {
       "type": "boolean",
       "required": false,

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

@@ -0,0 +1,68 @@
+{
+  "name": "SectionHeader",
+  "description": "A section's heading row: title (h2–h6), a count, a '?' help hint (hover and keyboard focus), actions at the end, an optional subtitle.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<JSX.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/sectionHeader/sectionHeader.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/tooltip/tooltip.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/sectionHeader/sectionHeader.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/tooltip/tooltip.entry.less\";"
+  },
+  "props": {
+    "title": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "The section's name."
+    },
+    "level": {
+      "type": "2 | 3 | 4 | 5 | 6",
+      "required": false,
+      "description": "Heading level of the title: 2 by default."
+    },
+    "count": {
+      "type": "number | string | null",
+      "required": false,
+      "description": "How many items the section holds, beside the title. Nothing is shown for null."
+    },
+    "help": {
+      "type": "string",
+      "required": false,
+      "description": "How to read the section, behind a \"?\" icon: shown on hover and on keyboard\nfocus, and the icon's accessible name. Text only — the tooltip renders in\nthe browser."
+    },
+    "helpLabel": {
+      "type": "string",
+      "required": false,
+      "description": "The \"?\" icon's accessible name, e.g. \"Explanation: …\"; the help text by default."
+    },
+    "titleId": {
+      "type": "string",
+      "required": false,
+      "description": "Id of the heading, for anchors and aria-labelledby."
+    },
+    "subtitle": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "A line under the title."
+    },
+    "ref": {
+      "type": "Ref<HTMLElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLElement>."
+    }
+  }
+}

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

@@ -34,14 +34,14 @@
       "description": "Index of the active (current) step."
     },
     "orientation": {
-      "type": "\"horizontal\" | \"vertical\"",
+      "type": "StepperOrientation",
       "required": false,
       "description": "Layout orientation."
     },
     "alternativeLabel": {
       "type": "boolean",
       "required": false,
-      "description": "Place the label under the icon (horizontal only)."
+      "description": "Place the label under the icon (in a row: horizontal, or auto while wide)."
     },
     "onStepClick": {
       "type": "(index: number) => void",

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

@@ -54,6 +54,11 @@
       "required": false,
       "description": "Tag. Optional. Type: string."
     },
+    "href": {
+      "type": "string",
+      "required": false,
+      "description": "With `tag=\"a\"`: where the link goes, so the tab stays a real link."
+    },
     "disabled": {
       "type": "boolean",
       "required": false,

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

@@ -14,10 +14,11 @@
       "@smwb/ui-styles/less/components/tabs/tabs.entry.less"
     ],
     "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
       "@smwb/ui-styles/less/components/tabs/tab/tab.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/tabs.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/tabs/tab/tab.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/tabs.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/tabs/tab/tab.entry.less\";"
   },
   "props": {
     "value": {
@@ -38,7 +39,27 @@
     "scrollable": {
       "type": "boolean",
       "required": false,
-      "description": "Scrollable. Optional. Type: boolean."
+      "description": "Let the tab row scroll sideways instead of clipping it. The edge beyond which\nmore tabs are hidden fades out."
+    },
+    "scrollButtons": {
+      "type": "boolean",
+      "required": false,
+      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows."
+    },
+    "dense": {
+      "type": "boolean",
+      "required": false,
+      "description": "Compact tabs: labels as written (no capitals, no letter spacing) and less padding."
+    },
+    "scrollBackAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the button that scrolls back."
+    },
+    "scrollForwardAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the button that scrolls forward."
     },
     "class": {
       "type": "string",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-mcp-solid",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Model Context Protocol server exposing the @smwb/ui-solid (SolidJS) component catalog and customization guide.",
   "license": "MIT",
   "type": "module",
@@ -28,8 +28,8 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@smwb/ui-solid": "^0.11.2",
-    "@smwb/ui-styles": "^1.4.3",
+    "@smwb/ui-solid": "^0.12.0",
+    "@smwb/ui-styles": "^1.5.0",
     "glob": "^13.0.6",
     "typescript": "^6.0.3",
     "vitest": "^2.1.9"