bestax-mcp 1.15.2 → 1.15.3

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.33.1"
+    "version": "5.34.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -60,6 +60,7 @@
         "ContextMenu",
         "Dialog",
         "Dropdown",
+        "EmptyState",
         "HoverCard",
         "Loading",
         "Menu",
@@ -495,6 +496,17 @@
       "propCount": 4,
       "exampleCount": 8
     },
+    {
+      "name": "EmptyState",
+      "kind": "component",
+      "category": "components",
+      "purpose": "The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen.",
+      "slug": "components/emptystate",
+      "import": "import { EmptyState } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 33,
+      "exampleCount": 10
+    },
     {
       "name": "Field",
       "kind": "component",
@@ -1571,6 +1583,17 @@
     "--bulma-dropdown-item-selected-l": ["Dropdown"],
     "--bulma-dropdown-item-selected-s": ["Dropdown"],
     "--bulma-dropdown-menu-min-width": ["Dropdown"],
+    "--bulma-empty-state-description-color": ["EmptyState"],
+    "--bulma-empty-state-description-max-width": ["EmptyState"],
+    "--bulma-empty-state-description-size": ["EmptyState"],
+    "--bulma-empty-state-gap": ["EmptyState"],
+    "--bulma-empty-state-icon-size": ["EmptyState"],
+    "--bulma-empty-state-indicator-background": ["EmptyState"],
+    "--bulma-empty-state-indicator-color": ["EmptyState"],
+    "--bulma-empty-state-indicator-radius": ["EmptyState"],
+    "--bulma-empty-state-indicator-size": ["EmptyState"],
+    "--bulma-empty-state-padding": ["EmptyState"],
+    "--bulma-empty-state-title-size": ["EmptyState"],
     "--bulma-field-block-spacing": ["Field"],
     "--bulma-file-active-background-l-delta": ["File"],
     "--bulma-file-active-border-l-delta": ["File"],

package/data/components/EmptyState.json

@@ -0,0 +1,512 @@
+{
+  "name": "EmptyState",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/emptystate",
+  "docsUrl": "https://bestax.io/docs/api/components/emptystate",
+  "examples": [
+    {
+      "title": "Basic Usage",
+      "code": "<Box>\n  <EmptyState\n    icon=\"folder-open\"\n    title=\"No projects yet\"\n    description=\"Projects you create or join show up here.\"\n  >\n    <Button color=\"primary\">New project</Button>\n  </EmptyState>\n</Box>"
+    },
+    {
+      "title": "More Than One Action",
+      "code": "<Box>\n  <EmptyState\n    icon=\"folder-open\"\n    title=\"No projects yet\"\n    description=\"Projects you create or join show up here.\"\n  >\n    <EmptyState.Actions>\n      <Button color=\"primary\">New project</Button>\n      <Button>Import</Button>\n    </EmptyState.Actions>\n  </EmptyState>\n</Box>"
+    },
+    {
+      "title": "Sizes",
+      "code": "<Columns isMultiline>\n  {(['small', 'normal', 'medium', 'large'] as const).map(size => (\n    <Column key={size} size=\"half\" display=\"flex\" flexDirection=\"column\">\n      <Box\n        flexGrow=\"1\"\n        display=\"flex\"\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n      >\n        <EmptyState\n          size={size}\n          icon=\"inbox\"\n          title=\"No messages\"\n          description=\"Messages people send you show up here.\"\n        >\n          <Button>Write a message</Button>\n        </EmptyState>\n      </Box>\n    </Column>\n  ))}\n</Columns>"
+    },
+    {
+      "title": "Colors",
+      "code": "<Columns isMultiline>\n  <Column size=\"one-third\">\n    <Box>\n      <EmptyState\n        size=\"small\"\n        color=\"primary\"\n        icon=\"folder-open\"\n        title=\"No projects yet\"\n      />\n    </Box>\n  </Column>\n  <Column size=\"one-third\">\n    <Box>\n      <EmptyState\n        size=\"small\"\n        color=\"link\"\n        icon=\"bookmark\"\n        title=\"No bookmarks yet\"\n      />\n    </Box>\n  </Column>\n  <Column size=\"one-third\">\n    <Box>\n      <EmptyState\n        size=\"small\"\n        color=\"info\"\n        icon=\"upload\"\n        title=\"Nothing uploaded yet\"\n      />\n    </Box>\n  </Column>\n  <Column size=\"one-third\">\n    <Box>\n      <EmptyState size=\"small\" color=\"success\" icon=\"check\" title=\"All done\" />\n    </Box>\n  </Column>\n  <Column size=\"one-third\">\n    <Box>\n      <EmptyState\n        size=\"small\"\n        color=\"warning\"\n        icon=\"box-archive\"\n        title=\"No backups yet\"\n      />\n    </Box>\n  </Column>\n  <Column size=\"one-third\">\n    <Box>\n      <EmptyState\n        size=\"small\"\n        color=\"danger\"\n        icon=\"trash\"\n        title=\"The trash is empty\"\n      />\n    </Box>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Variants",
+      "code": "<Columns>\n  <Column>\n    <Box>\n      <EmptyState size=\"small\" icon=\"bell\" title=\"No alerts\" />\n    </Box>\n  </Column>\n  <Column>\n    <Box>\n      <EmptyState size=\"small\" variant=\"filled\" icon=\"bell\" title=\"No alerts\" />\n    </Box>\n  </Column>\n  <Column>\n    <Box>\n      <EmptyState size=\"small\" color=\"success\" icon=\"check\" title=\"All done\" />\n    </Box>\n  </Column>\n  <Column>\n    <Box>\n      <EmptyState\n        size=\"small\"\n        color=\"success\"\n        variant=\"filled\"\n        icon=\"check\"\n        title=\"All done\"\n      />\n    </Box>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Alignment",
+      "code": "<Box>\n  <EmptyState\n    align=\"left\"\n    color=\"primary\"\n    icon=\"users\"\n    title=\"No one else is here yet\"\n    description=\"Invite the people you work with, and they'll show up in this list.\"\n  >\n    <EmptyState.Actions>\n      <Button color=\"primary\">Invite people</Button>\n      <Button>Copy invite link</Button>\n    </EmptyState.Actions>\n  </EmptyState>\n</Box>"
+    },
+    {
+      "title": "In a Card",
+      "code": "<Columns>\n  <Column>\n    <Card header=\"Invoices\">\n      <EmptyState\n        size=\"small\"\n        align=\"left\"\n        color=\"success\"\n        variant=\"filled\"\n        icon=\"check\"\n        title=\"All paid up\"\n        titleAs=\"h3\"\n        description=\"New invoices show up here when they arrive.\"\n      />\n    </Card>\n  </Column>\n  <Column>\n    <Card header=\"Files\">\n      <EmptyState\n        size=\"small\"\n        icon=\"cloud-arrow-up\"\n        title=\"Nothing uploaded yet\"\n        titleAs=\"h3\"\n        description=\"Files you add to this project show up here.\"\n      >\n        <Button size=\"small\" color=\"info\">\n          Upload files\n        </Button>\n      </EmptyState>\n    </Card>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "A Search With No Results",
+      "code": "function example() {\n  const projects = ['Apollo', 'Gemini', 'Mercury'];\n  const [query, setQuery] = useState('kraken');\n  const searchRef = React.useRef<HTMLInputElement>(null);\n  const term = query.trim().toLowerCase();\n  const shown = projects.filter(name => name.toLowerCase().includes(term));\n\n  function clear() {\n    setQuery('');\n    // The button goes away with the empty state, so focus goes back to the field.\n    searchRef.current?.focus();\n  }\n\n  return (\n    <Box>\n      <Title as=\"h2\" textSize=\"5\">\n        Projects\n      </Title>\n      <Field label=\"Search projects\">\n        <Control>\n          <Input\n            ref={searchRef}\n            type=\"search\"\n            value={query}\n            onChange={e => setQuery(e.target.value)}\n          />\n        </Control>\n      </Field>\n      {/* Always in the page, so a change to its text is announced. */}\n      <Paragraph role=\"status\" aria-atomic=\"true\" visibility=\"sr-only\">\n        {shown.length === 0\n          ? 'No projects match the search'\n          : `${shown.length} of ${projects.length} projects`}\n      </Paragraph>\n      {shown.length === 0 ? (\n        <EmptyState\n          icon=\"magnifying-glass\"\n          title={`No projects match “${query}”`}\n          titleAs=\"h3\"\n          description=\"Check the spelling, or clear the search.\"\n        >\n          <Button onClick={clear}>Clear search</Button>\n        </EmptyState>\n      ) : (\n        <UnorderedList>\n          {shown.map(name => (\n            <ListItem key={name}>{name}</ListItem>\n          ))}\n        </UnorderedList>\n      )}\n    </Box>\n  );\n}"
+    },
+    {
+      "title": "A First-Run Screen",
+      "code": "<Hero color=\"primary\">\n  <Hero.Body>\n    <EmptyState\n      size=\"large\"\n      icon=\"rocket\"\n      title=\"Welcome to your workspace\"\n      titleAs=\"h1\"\n      description=\"Make a project to get started. You can invite people once it's set up.\"\n    >\n      <Button color=\"primary\" isInverted>\n        Make a project\n      </Button>\n    </EmptyState>\n  </Hero.Body>\n</Hero>"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<Box>\n  <EmptyState align=\"left\" color=\"warning\">\n    <EmptyState.Indicator>\n      <Icon name=\"star\" variant=\"regular\" />\n    </EmptyState.Indicator>\n    <EmptyState.Title as=\"h3\">No favorites yet</EmptyState.Title>\n    <EmptyState.Description>\n      Star a project to keep it here. A few to start with:\n    </EmptyState.Description>\n    <UnorderedList>\n      <ListItem>\n        <a href=\"#apollo\">Apollo</a>\n      </ListItem>\n      <ListItem>\n        <a href=\"#gemini\">Gemini</a>\n      </ListItem>\n    </UnorderedList>\n    <EmptyState.Actions size=\"small\">\n      <Button color=\"warning\">Browse projects</Button>\n      <Button>Not now</Button>\n    </EmptyState.Actions>\n  </EmptyState>\n</Box>"
+    }
+  ],
+  "accessibility": "- **The title is a heading:** it's always one, `h1` to `h6`, and `h2` by default. Pick the level\n  under the heading of the list it stands in for: an `h2` on a page, an `h3` or an `h4` in a Card.\n  `titleAs` sets it for the `title` prop and `as` sets it on `EmptyState.Title`, and nothing about\n  the size changes it. The size comes from the EmptyState, so `EmptyState.Title` doesn't take\n  `Title`'s `size`.\n- **The picture is decoration:** the indicator has `aria-hidden=\"true\"`, so everything in it is\n  hidden, an `Icon` with an `ariaLabel` included. Say what it means in the title or the\n  description.\n- **No role and no live region:** an empty state is content, and the heading makes it findable. It\n  doesn't announce itself, since it arrives already filled, would read its buttons along with it,\n  and is gone when results come back. After a search or a filter, announce the result with a\n  `role=\"status\"` region that's in the page the whole time, beside the search field, as in\n  [A Search With No Results](https://bestax.io/docs/api/components/emptystate#a-search-with-no-results). Primer's\n  [loading pattern](https://primer.style/product/ui-patterns/loading/) describes the same thing.\n- **Focus:** nothing in the component moves focus. A \"Clear search\" button goes away with the\n  empty state, so its click handler puts focus back in the search field rather than leaving it on\n  the page's `<body>`.\n- **Not for loading or errors:** while the data loads, show a [`Skeleton`](https://bestax.io/docs/api/elements/skeleton)\n  or a [`Loader`](https://bestax.io/docs/api/elements/loader), so \"No projects yet\" doesn't flash before the projects\n  arrive. A load that failed is a [`Message`](https://bestax.io/docs/api/components/message) or a\n  [`Notification`](https://bestax.io/docs/api/elements/notification).\n- **Contrast:** the description is the color of the text around it, so it keeps the contrast its\n  container has, a colored Hero included, and the title is Bulma's title color. The circle is\n  decoration, so it doesn't owe a contrast ratio, but every pairing reads in light and dark mode.\n- **Forced colors:** in Windows high contrast mode the icon takes the system's text color and\n  stays visible. The circle's fill drops out, since it's decoration.\n- **No motion:** nothing animates.",
+  "related": [
+    "Buttons",
+    "Icon",
+    "Loader",
+    "Media",
+    "Message",
+    "Skeleton",
+    "Title",
+    "useBulmaClasses"
+  ],
+  "storybook": "https://bestax.io/storybook/?path=/story/components-emptystate--default",
+  "summary": "The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen. It's a column of a picture in a circle, a heading, a line of text and the actions, with one layout whether it's written with the `icon`, `title` and `description` props or with the parts. The children always render as written, after the parts the props render. It has no role and no live region. It arrives already filled and goes away when results come back, so it can't announce a search that matched nothing: keep a `role=\"status\"` region beside the search field for that, in the page the whole time. While the data loads, show a `Skeleton` or a `Loader` instead, so \"No projects yet\" doesn't flash first, and show a load that failed in a `Message` or a `Notification`.",
+  "import": "import { EmptyState } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/EmptyState.tsx",
+  "rootClass": "empty-state",
+  "parts": [
+    {
+      "path": "EmptyState",
+      "summary": "The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen. It's a column of a picture in a circle, a heading, a line of text and the actions, with one layout whether it's written with the `icon`, `title` and `description` props or with the parts. The children always render as written, after the parts the props render. It has no role and no live region. It arrives already filled and goes away when results come back, so it can't announce a search that matched nothing: keep a `role=\"status\"` region beside the search field for that, in the page the whole time. While the data loads, show a `Skeleton` or a `Loader` instead, so \"No projects yet\" doesn't flash first, and show a load that failed in a `Message` or a `Notification`.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The picture in the indicator's circle. A string is an `Icon` name, drawn from the icon library `ConfigProvider` sets. Anything else (an `<Icon>` with its own `variant` or `library`, an SVG, an `<img>`) renders as it is. It's decorative and hidden from assistive tech, so the title says what it means.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The heading, rendered as `EmptyState.Title`. It's always a real heading, at the level `titleAs` sets.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "titleAs",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "default": "'h2'",
+          "description": "The heading level for `title`: the level under the heading of the list it stands in for, such as `h3` for a list under an `h2`. Only this sets the level, and the size comes from `size`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "A sentence or two under the title, rendered as `EmptyState.Description`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Rendered as written, after whatever `icon`, `title` and `description` render. One button can go straight in, and it sits centered under the text. Group two or more in `EmptyState.Actions`, or they stack. Without the props, write the parts here in the order they're shown: `EmptyState.Indicator`, `.Title`, `.Description`, then the actions.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "The indicator's color. It colors the circle and its icon, not the text. Without it the circle is neutral, since an empty list isn't a status.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "variant",
+          "type": "'light' | 'filled'",
+          "default": "'light'",
+          "description": "`light` is a soft tint of `color` behind the icon in the color. `filled` is the color itself, with the icon in its invert.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": "'normal'",
+          "description": "Sizes the indicator, the title, the description and the spacing together.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "align",
+          "type": "'center' | 'left'",
+          "default": "'center'",
+          "description": "`center` stacks everything in a centered column. `left` puts the indicator beside the text, at the start of the line, so on the right in a right-to-left page, and keeps the block at least as tall as the circle whatever block padding is in effect. Without an indicator, it only puts the text at the start of the line. In `left`, the padding at the start of the line is what makes room for the indicator, so pad it with `py` rather than `p` or `px`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the root `<div>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "EmptyState.Indicator",
+      "summary": "The circle the picture sits in, hidden from assistive tech whatever is in it.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The picture: an `Icon`, an SVG or an `<img>`. The indicator is hidden from assistive tech, an `Icon` with an `ariaLabel` included, so anything it means goes in the title or the description.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "EmptyState.Title",
+      "summary": "The heading, a Bulma `Title` at the level `as` sets, `h2` by default, and at the EmptyState's size.",
+      "component": null,
+      "props": [
+        {
+          "name": "as",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "default": "'h2'",
+          "description": "The heading level: the level under the heading of the list the empty state stands in for.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "hasSkeleton",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies the `has-skeleton` class to part of the content.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Title content.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "skeleton",
+          "type": "boolean",
+          "default": null,
+          "description": "Applies the `is-skeleton` class to the entire component.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <h1>–<h6> / <p> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "EmptyState.Description",
+      "summary": "A sentence or two under the title, in the color of the text around it.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Content to render inside the paragraph.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <p> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "EmptyState.Actions",
+      "summary": "A row of buttons, centered under the text or at the start of the line beside the indicator.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper for the button group.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Text color alias: renders `has-text-<color>`, exactly like `textColor`. Not a filled variant (no `.buttons.is-<color>` CSS exists; color the individual `Button`s instead). Prefer `textColor`, which takes precedence when both are set; use `bgColor` for a colored surface.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper for the button group.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "hasAddons",
+          "type": "boolean",
+          "default": "false",
+          "description": "Group buttons together as addons (removes spacing between them).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the button group.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The button elements to render inside the group.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-empty-state-gap",
+      "sass": "$empty-state-gap",
+      "default": "1rem",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-padding",
+      "sass": "$empty-state-padding",
+      "default": "3rem",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-indicator-size",
+      "sass": "$empty-state-indicator-size",
+      "default": "3rem",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-indicator-radius",
+      "sass": "$empty-state-indicator-radius",
+      "default": "var(--bulma-radius-rounded)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-indicator-background",
+      "sass": "$empty-state-indicator-background",
+      "default": "var(--bulma-background)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-indicator-color",
+      "sass": "$empty-state-indicator-color",
+      "default": "var(--bulma-text-weak)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-icon-size",
+      "sass": "$empty-state-icon-size",
+      "default": "1.5rem",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-title-size",
+      "sass": "$empty-state-title-size",
+      "default": "var(--bulma-size-5)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-description-size",
+      "sass": "$empty-state-description-size",
+      "default": "var(--bulma-size-6)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-description-color",
+      "sass": "$empty-state-description-color",
+      "default": "currentColor",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-empty-state-description-max-width",
+      "sass": "$empty-state-description-max-width",
+      "default": "32em",
+      "scope": "root"
+    }
+  ]
+}

package/data/components/SubTitle.json

@@ -38,7 +38,7 @@
       "code": "<Block>\n  <Title as=\"p\" size=\"1\">\n    Title 1\n  </Title>\n  <SubTitle as=\"p\" size=\"3\">\n    Subtitle 3\n  </SubTitle>\n</Block>"
     }
   ],
-  "accessibility": "- **Semantic HTML:** Use appropriate heading levels for document structure.\n- **Screen readers:** Subtitles should be used in conjunction with titles for clarity.\n\n:::tip\n`SubTitle` is visually styled as a heading, but its semantic level depends on the `as` prop.\n:::",
+  "accessibility": "- **Semantic HTML:** Use appropriate heading levels for document structure.\n- **Screen readers:** Subtitles should be used in conjunction with titles for clarity.\n\n:::tip\n`SubTitle` is visually styled as a heading. Its level comes from `size` when it has one and from\n`as` when it doesn't, and with neither it's an `<h1>`. `as=\"p\"` makes it a paragraph whatever its\nsize, and the `textSize` helper sizes it without changing the level.\n:::",
   "related": ["Block", "Title", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-subtitle--default",
   "summary": "The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).",
@@ -64,7 +64,7 @@
           "name": "size",
           "type": "'1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6",
           "default": null,
-          "description": "Size of the subtitle (Bulma sizes `1`-`6`, as a string or number).",
+          "description": "Size of the subtitle (Bulma sizes `1`-`6`, as a string or number). It also picks the heading level: unless `as` is `p`, `size=\"5\"` renders an `<h5>`, whatever `as` says. For a heading whose level and size differ, set the level with `as` and the size with the `textSize` helper.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -73,7 +73,7 @@
           "name": "as",
           "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'",
           "default": "'h1'",
-          "description": "HTML element to render as (h1-h6 or p).",
+          "description": "HTML element to render as (`h1`-`h6` or `p`). With neither `as` nor `size` set it's an `<h1>`, so a subtitle that isn't a heading of its own takes `as=\"p\"`. A `size` overrides `as` unless it's `p`, so `as=\"h3\" size=\"5\"` renders an `<h5>`. To keep the level `as` sets, size the subtitle with the `textSize` helper instead.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Title.json

@@ -36,7 +36,7 @@
       "code": "<Block>\n  <Title as=\"p\" size=\"1\">\n    Title 1\n  </Title>\n  <SubTitle as=\"p\" size=\"3\">\n    Subtitle 3\n  </SubTitle>\n</Block>"
     }
   ],
-  "accessibility": "- **Semantic HTML:** Use appropriate heading levels for document structure.\n- **Spacing:** Use `isSpaced` for extra margin when needed.\n- **Screen readers:** Headings are key landmarks, so set the correct `as` and `size` prop for hierarchy.\n\n:::tip\nWhen using `as=\"p\"`, the element is visually styled as a heading but semantically a paragraph.\n:::",
+  "accessibility": "- **Semantic HTML:** Use appropriate heading levels for document structure.\n- **Spacing:** Use `isSpaced` for extra margin when needed.\n- **Screen readers:** Headings are key landmarks, so give each one the level the page's hierarchy\n  needs. `size` picks that level as well as the size, unless `as` is `p`: `as=\"h2\" size=\"4\"`\n  renders an `<h4>`. For a heading whose level and size differ, set the level with `as` and the\n  size with the `textSize` helper, as in `<Title as=\"h2\" textSize=\"4\">`.\n\n:::tip\nWhen using `as=\"p\"`, the element is visually styled as a heading but semantically a paragraph.\n:::",
   "related": ["Block", "SubTitle", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-title--default",
   "summary": "The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).",
@@ -62,7 +62,7 @@
           "name": "size",
           "type": "'1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6",
           "default": null,
-          "description": "Size of the title (Bulma sizes `1`-`6`, as a string or number).",
+          "description": "Size of the title (Bulma sizes `1`-`6`, as a string or number). It also picks the heading level: unless `as` is `p`, `size=\"4\"` renders an `<h4>`, whatever `as` says. For a heading whose level and size differ, set the level with `as` and the size with the `textSize` helper.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -80,7 +80,7 @@
           "name": "as",
           "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'",
           "default": "'h1'",
-          "description": "HTML element to render as (h1-h6 or p).",
+          "description": "HTML element to render as (`h1`-`h6` or `p`). A `size` overrides it unless it's `p`, so `as=\"h2\" size=\"4\"` renders an `<h4>`. To keep the level `as` sets, size the title with the `textSize` helper instead.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/skills/bestax-custom-component/references/component-catalog.md

@@ -37,7 +37,7 @@ instead of hand-writing markup.
 - Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
   escape-hatch variants of the convenience wrappers above them; see the Form docs.
 
-99 documented components. Generated from the API docs — every exported
+100 documented components. Generated from the API docs — every exported
 component is guaranteed to appear (the generator fails if one lacks an API page).
 
 ## Elements
@@ -89,6 +89,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [ContextMenu](https://bestax.io/docs/api/components/contextmenu) — The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.
 - [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides ready-made confirm and alert dialogs, so a destructive action stays one `await dialog.confirm()` call away.
 - [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
+- [EmptyState](https://bestax.io/docs/api/components/emptystate) — The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen.
 - [HoverCard](https://bestax.io/docs/api/components/hovercard) — The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
 - [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
 - [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.

package/data/skills/bestax-layout-scaffold/SKILL.md

@@ -87,6 +87,16 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   `Steps value={i}/onStepClick items={[{label, icon?}]}` (child form is `Steps.Step`, not
   `Steps.Item`). `Reveal cascade` staggers only its **direct children** — to stagger a grid,
   put `<Reveal delay={i * 80}>` inside each `Cell`, not around the container.
+- **An empty list, table or search with no results is `EmptyState`**, not a hand-built `Box`
+  of `Icon`, `Title` and `Buttons isCentered`:
+  `<EmptyState icon="folder-open" title="No projects yet" titleAs="h3" description="…">` with
+  its one `<Button>` as a child (two or more go in `EmptyState.Actions`). Its `title` is always a
+  heading, so set `titleAs` to the level under the list's own heading. It has no live region:
+  after a search or a filter, keep a `Paragraph` with `role="status"`, `aria-atomic="true"` and
+  `visibility="sr-only"` beside the search field the whole time, saying the count, and have
+  "Clear search" put focus back in the field. While data loads show a `Skeleton` or a `Loader`,
+  and a failed load is a `Message` or a `Notification`, never an EmptyState. The archetypes
+  reference has the full pattern under Card grid.
 - Link lists (footer nav, sidebars): a bare `UnorderedList` of `ListItem`s is already
   marker-less and flush — Bulma's reset unstyles `ul` — so no prop or CSS is needed;
   bullets appear only inside `Content`.
@@ -221,6 +231,8 @@ inline `style`.
 - [ ] Do not use `Tile` — it is not shipped.
 - [ ] Action feedback goes through `Toast`, a confirmation through `Dialog`, a text-styled
       action through `LinkButton` — not `Notification`, `Modal` or a bare `<a>`.
+- [ ] An empty list or a search with no results renders `EmptyState`, and a search or a filter
+      keeps a `role="status"` region beside its field that says the count.
 - [ ] Style with helper props, not inline `style` — translate via the mapping table; values
       with no helper get a named class in the stylesheet, never `style={{}}`. No raw Bulma
       `className`s either (`Span`/`Paragraph` wrap bare text; `Th`/`Td` take `textAlign`/`textWeight`).

package/data/skills/bestax-layout-scaffold/references/archetypes.md

@@ -239,6 +239,63 @@ build the whole grid with `Grid`/`Cell` (`<Grid isFixed fixedColsMobile={1} fixe
 fixedColsDesktop={3} gap={4}>`) — CSS Grid keeps cells equal-height for free; see the
 `Grid / Cell` section in `layout-components.md`.
 
+**Nothing to show:** when the collection is empty, or a search or a filter matches nothing,
+render an `EmptyState` in the grid's place rather than composing one from `Box`, `Icon` and
+`Title`. Its `title` is always a heading: set `titleAs` to the level under the section's own
+heading. It doesn't announce itself, so a search keeps a status region beside its field the
+whole time, saying the count, and "Clear search" puts focus back in the field, since the button
+goes away with the empty state:
+
+```tsx
+const searchRef = useRef<HTMLInputElement>(null);
+const shown = items.filter(item =>
+  item.name.toLowerCase().includes(query.trim().toLowerCase())
+);
+
+<>
+  <Field label="Search products">
+    <Control>
+      <Input
+        ref={searchRef}
+        type="search"
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+      />
+    </Control>
+  </Field>
+  {/* Always in the page, so a change to its text is announced. */}
+  <Paragraph role="status" aria-atomic="true" visibility="sr-only">
+    {shown.length === 0
+      ? 'No products match the search'
+      : `${shown.length} products`}
+  </Paragraph>
+  {shown.length === 0 ? (
+    <EmptyState
+      icon="magnifying-glass"
+      title={`No products match “${query}”`}
+      titleAs="h2"
+      description="Check the spelling, or clear the search."
+    >
+      <Button
+        onClick={() => {
+          setQuery('');
+          searchRef.current?.focus();
+        }}
+      >
+        Clear search
+      </Button>
+    </EmptyState>
+  ) : (
+    <Columns isMultiline>{/* the cards, as above */}</Columns>
+  )}
+</>;
+```
+
+With nothing in the collection at all, the same component says so and offers the first step:
+`<EmptyState icon="box-open" title="No products yet" titleAs="h2" description="…">` with one
+`<Button color="primary">` as its child, or two or more in `EmptyState.Actions`. While the items
+load, show a `Skeleton` or a `Loader` instead, so the empty state doesn't flash first.
+
 ---
 
 ## Combining archetypes

package/data/skills/bestax-migrate/references/bloomer/prop-map.md

@@ -161,13 +161,13 @@ value is flagged. The same conversion covers the modifiers bestax has no prop fo
 
 ## Refs
 
-bloomer forwarded no refs. bestax forwards a ref from the form controls, plus `Avatar`,
-`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Kbd`, `Kbd.Group`, `Link`,
+bloomer forwarded no refs. bestax forwards a ref from the form controls, plus `Avatar`, `Button`,
+`Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`,
 `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
-`Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast`
-and `ToggleButton` — pass `ref` directly on those. "The form controls" means the inputs
-themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around
-them forward nothing.
+`Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast` and
+`ToggleButton` — pass `ref` directly on those. "The form controls" means the inputs themselves: the
+`Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward
+nothing.
 
 A `ref` on anything else is unsupported, and the two React majors fail differently: React 18
 drops it and logs "Function components cannot be given refs", while React 19 hands it to the

package/data/skills/bestax-migrate/references/rbx/prop-map.md

@@ -156,14 +156,14 @@ becomes.
 Beside a `ref` the element already has, a rename leaves `innerRef` in place with a `prop:innerRef`
 TODO rather than write a second `ref`; keep whichever one you meant.
 
-An existing `ref` is passed through untouched — which is safe only where the bestax target
-forwards one. rbx forwards a ref on every component; bestax does so on the form controls, plus
-`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Kbd`, `Kbd.Group`,
-`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
-`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`,
-`Sidebar`, `Toast` and `ToggleButton`. "The form controls" there means the inputs themselves: the
-`Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward
-nothing, and `Field` is a target this codemod emits.
+An existing `ref` is passed through untouched — which is safe only where the bestax target forwards
+one. rbx forwards a ref on every component; bestax does so on the form controls, plus `Avatar`,
+`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`,
+`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
+`Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Toast` and
+`ToggleButton`. "The form controls" there means the inputs themselves: the `Field`, `Field.Label`,
+`Field.Body`, `Checkboxes` and `Radios` wrappers around them forward nothing, and `Field` is a
+target this codemod emits.
 
 Carry a `ref` onto anything else — `Card`, `Box`, `Section`, `Message`, `Tabs` and most of the
 catalogue — and it is unsupported, but the two React majors fail differently. React 18 drops

package/data/skills/bestax-migrate/references/react-bulma-components/unmappables.md

@@ -144,14 +144,14 @@ that lists the sizes that component takes: use one of them, or drop the prop.
 
 ## `domRef`
 
-bestax components don't take `domRef`, but many forward a plain `ref` — the form controls,
-plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Kbd`, `Kbd.Group`,
-`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
+bestax components don't take `domRef`, but many forward a plain `ref` — the form controls, plus
+`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`,
+`Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
 `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`,
 `Sidebar`, `Toast` and `ToggleButton`. On those, rename `domRef` to `ref` and it works; do not
-restructure the markup. "The form controls" means the inputs themselves: the `Field`,
-`Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them forward nothing, and
-`Field` is a target this codemod emits.
+restructure the markup. "The form controls" means the inputs themselves: the `Field`, `Field.Label`,
+`Field.Body`, `Checkboxes` and `Radios` wrappers around them forward nothing, and `Field` is a
+target this codemod emits.
 
 Everywhere else the rename is not enough, and the two React majors differ: React 18 drops the
 ref and logs "Function components cannot be given refs", while React 19 passes it through as

package/data/skills/bestax-optimize/references/modular-build.md

@@ -74,7 +74,7 @@ is **more complete** than the docs page's Option C example, which omits several)
 
 **Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
 `loading`, `collapse`, `tooltip`, `popover`, `hovercard`, `contextmenu`, `steps`, `sidebar`,
-`toast`, `dialog`, `carousel`, `tabs`, `reveal`, `avatar`, `avatars`, `badge`
+`toast`, `dialog`, `carousel`, `tabs`, `reveal`, `avatar`, `avatars`, `badge`, `emptystate`
 
 **Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
 `checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,

package/data/skills/bestax-theming/references/css-variables.md

@@ -311,6 +311,20 @@ The field around the two inputs. Its calendar is the `DateInput` one, with the v
 `--bulma-dialog-radius`, `--bulma-dialog-shadow`, `--bulma-dialog-title-color`,
 `--bulma-dialog-title-size`, `--bulma-dialog-title-weight`, `--bulma-dialog-width`
 
+### EmptyState
+
+Declared on the root, `.empty-state`. Each size class (`.is-small`, `.is-medium`, `.is-large`)
+sets its own gap, padding, indicator and icon sizes, and title and description sizes, so retune a
+size on that class. The color classes and `.is-filled` set the indicator's background and color
+from Bulma's scheme tokens, so the circle follows dark mode with no override. The description is
+`currentColor`, so it reads on whatever surface holds it.
+
+`--bulma-empty-state-description-color`, `--bulma-empty-state-description-max-width`,
+`--bulma-empty-state-description-size`, `--bulma-empty-state-gap`, `--bulma-empty-state-icon-size`,
+`--bulma-empty-state-indicator-background`, `--bulma-empty-state-indicator-color`,
+`--bulma-empty-state-indicator-radius`, `--bulma-empty-state-indicator-size`,
+`--bulma-empty-state-padding`, `--bulma-empty-state-title-size`
+
 ### HoverCard
 
 All are declared on the card, `.hover-card-content`, so a card rendered with `appendToBody` keeps

package/data/skills/bestax-theming/references/themeable-components.md

@@ -56,13 +56,14 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Input`            | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isRounded`, `isStatic`                                                                                                                        |
 | `Avatar`           | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `16x16 \| 24x24 \| 32x32 \| 48x48 \| 64x64 \| 96x96 \| 128x128 \| number` | initials/icon background (auto-derived from `name` when unset); also `shape`                                                                        |
 | `Badge`            | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | pill background; default `danger`                                                                                                                   |
-| `Title`            | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | also `isSpaced`                                                                                                                                     |
-| `SubTitle`         | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | —                                                                                                                                                   |
+| `Title`            | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | also `isSpaced`; `size` also sets the heading level unless `as="p"`: pair `as` with `textSize` instead                                              |
+| `SubTitle`         | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | `size` also sets the heading level unless `as="p"` (an `<h1>` with neither): pair `as` with `textSize` instead                                      |
 | `Autocomplete`     | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
 | `Checkbox`         | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | the 6 only                                                                                                                                          |
 | `DateInput`        | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
 | `DateRangeInput`   | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`; `color` also fills the calendar range                                                                                             |
 | `DateTimeInput`    | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
+| `EmptyState`       | `primary \| link \| info \| success \| warning \| danger` (the indicator circle and its icon only, never the text)                                                        | `small \| normal \| medium \| large`                                      | also `variant`: `light` (default) \| `filled`; neutral with no `color`; tint text with `textColor`; `--bulma-empty-state-*`                         |
 | `File`             | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isBoxed`, `isFullwidth`                                                                                                                       |
 | `Hero`             | every `validColors` member + `inherit`/`current` (the `-bis`/`-ter` shades, the greys, `inherit` and `current` deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large \| fullheight \| fullheight-with-navbar`        | section background                                                                                                                                  |
 | `Kbd`              | — (no `color`: the edge and fill are mixed from the text color, so `textColor` tints them; `bgColor` replaces the fill, so pair it with a `textColor`)                    | — (sized in `em` from the text around it; size it with `textSize`)        | one keycap look, no `variant`; `Kbd.Group` takes `textColor` too; retheme through `--bulma-kbd-*`                                                   |

package/data/skills.json

@@ -10,7 +10,7 @@
         {
           "id": "component-catalog",
           "file": "references/component-catalog.md",
-          "bytes": 19769
+          "bytes": 19985
         },
         {
           "id": "library-contributor",
@@ -59,7 +59,7 @@
         {
           "id": "archetypes",
           "file": "references/archetypes.md",
-          "bytes": 8276
+          "bytes": 10240
         },
         {
           "id": "layout-components",
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 24625
+          "bytes": 24639
         },
         {
           "id": "bloomer-unmappables",
@@ -128,7 +128,7 @@
         {
           "id": "rbx-prop-map",
           "file": "references/rbx/prop-map.md",
-          "bytes": 12390
+          "bytes": 12404
         },
         {
           "id": "rbx-unmappables",
@@ -148,7 +148,7 @@
         {
           "id": "react-bulma-components-unmappables",
           "file": "references/react-bulma-components/unmappables.md",
-          "bytes": 12252
+          "bytes": 12266
         }
       ],
       "examples": []
@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 10298
+          "bytes": 10312
         }
       ],
       "examples": []
@@ -176,12 +176,12 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 33582
+          "bytes": 34455
         },
         {
           "id": "themeable-components",
           "file": "references/themeable-components.md",
-          "bytes": 22998
+          "bytes": 23417
         }
       ],
       "examples": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "mcpName": "io.github.allxsmith/bestax-mcp",
   "description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
   "type": "module",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.31.0",
     "zod": "^4.4.3",
-    "@allxsmith/bestax-bulma": "^5.33.1"
+    "@allxsmith/bestax-bulma": "^5.34.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",