bestax-mcp 1.14.7 → 1.14.8

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.30.0"
+    "version": "5.31.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -226,7 +226,7 @@
       "slug": "elements/buttons",
       "import": "import { Buttons } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 45,
+      "propCount": 59,
       "exampleCount": 8
     },
     {
@@ -1118,7 +1118,7 @@
       "import": "import { ToggleButton } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 14,
-      "exampleCount": 11
+      "exampleCount": 12
     },
     {
       "name": "Tooltip",
@@ -1260,52 +1260,52 @@
     "--bulma-breadcrumb-item-padding-horizontal": ["Breadcrumb"],
     "--bulma-breadcrumb-item-padding-vertical": ["Breadcrumb"],
     "--bulma-breadcrumb-item-separator-color": ["Breadcrumb"],
-    "--bulma-button-active-background-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-active-border-color": ["Button", "ToggleButton"],
-    "--bulma-button-active-border-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-active-color": ["Button", "ToggleButton"],
-    "--bulma-button-background-l": ["Button", "ToggleButton"],
-    "--bulma-button-background-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-border-color": ["Button", "ToggleButton"],
-    "--bulma-button-border-l": ["Button", "ToggleButton"],
-    "--bulma-button-border-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-border-style": ["Button", "ToggleButton"],
-    "--bulma-button-border-width": ["Button", "ToggleButton"],
-    "--bulma-button-color-l": ["Button", "ToggleButton"],
-    "--bulma-button-disabled-background-color": ["Button", "ToggleButton"],
-    "--bulma-button-disabled-border-color": ["Button", "ToggleButton"],
-    "--bulma-button-disabled-opacity": ["Button", "ToggleButton"],
-    "--bulma-button-disabled-shadow": ["Button", "ToggleButton"],
-    "--bulma-button-family": ["Button", "ToggleButton"],
-    "--bulma-button-focus-border-color": ["Button", "ToggleButton"],
-    "--bulma-button-focus-border-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-focus-box-shadow-color": ["Button", "ToggleButton"],
-    "--bulma-button-focus-box-shadow-size": ["Button", "ToggleButton"],
-    "--bulma-button-ghost-background": ["Button", "ToggleButton"],
-    "--bulma-button-ghost-border-color": ["Button", "ToggleButton"],
-    "--bulma-button-ghost-color": ["Button", "ToggleButton"],
-    "--bulma-button-ghost-decoration": ["Button", "ToggleButton"],
-    "--bulma-button-ghost-hover-color": ["Button", "ToggleButton"],
-    "--bulma-button-ghost-hover-decoration": ["Button", "ToggleButton"],
-    "--bulma-button-h": ["Button", "ToggleButton"],
-    "--bulma-button-hover-background-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-hover-border-l-delta": ["Button", "ToggleButton"],
-    "--bulma-button-l": ["Button", "ToggleButton"],
-    "--bulma-button-outer-shadow-a": ["Button", "ToggleButton"],
-    "--bulma-button-outer-shadow-h": ["Button", "ToggleButton"],
-    "--bulma-button-outer-shadow-l": ["Button", "ToggleButton"],
-    "--bulma-button-outer-shadow-s": ["Button", "ToggleButton"],
-    "--bulma-button-padding-horizontal": ["Button", "ToggleButton"],
-    "--bulma-button-padding-vertical": ["Button", "ToggleButton"],
-    "--bulma-button-s": ["Button", "ToggleButton"],
-    "--bulma-button-static-background-color": ["Button", "ToggleButton"],
-    "--bulma-button-static-border-color": ["Button", "ToggleButton"],
-    "--bulma-button-static-color": ["Button", "ToggleButton"],
-    "--bulma-button-text-color": ["Button", "ToggleButton"],
-    "--bulma-button-text-decoration": ["Button", "ToggleButton"],
-    "--bulma-button-text-hover-background-color": ["Button", "ToggleButton"],
-    "--bulma-button-text-hover-color": ["Button", "ToggleButton"],
-    "--bulma-button-weight": ["Button", "ToggleButton"],
+    "--bulma-button-active-background-l-delta": ["Button"],
+    "--bulma-button-active-border-color": ["Button"],
+    "--bulma-button-active-border-l-delta": ["Button"],
+    "--bulma-button-active-color": ["Button"],
+    "--bulma-button-background-l": ["Button"],
+    "--bulma-button-background-l-delta": ["Button"],
+    "--bulma-button-border-color": ["Button"],
+    "--bulma-button-border-l": ["Button"],
+    "--bulma-button-border-l-delta": ["Button"],
+    "--bulma-button-border-style": ["Button"],
+    "--bulma-button-border-width": ["Button"],
+    "--bulma-button-color-l": ["Button"],
+    "--bulma-button-disabled-background-color": ["Button"],
+    "--bulma-button-disabled-border-color": ["Button"],
+    "--bulma-button-disabled-opacity": ["Button"],
+    "--bulma-button-disabled-shadow": ["Button"],
+    "--bulma-button-family": ["Button"],
+    "--bulma-button-focus-border-color": ["Button"],
+    "--bulma-button-focus-border-l-delta": ["Button"],
+    "--bulma-button-focus-box-shadow-color": ["Button"],
+    "--bulma-button-focus-box-shadow-size": ["Button"],
+    "--bulma-button-ghost-background": ["Button"],
+    "--bulma-button-ghost-border-color": ["Button"],
+    "--bulma-button-ghost-color": ["Button"],
+    "--bulma-button-ghost-decoration": ["Button"],
+    "--bulma-button-ghost-hover-color": ["Button"],
+    "--bulma-button-ghost-hover-decoration": ["Button"],
+    "--bulma-button-h": ["Button"],
+    "--bulma-button-hover-background-l-delta": ["Button"],
+    "--bulma-button-hover-border-l-delta": ["Button"],
+    "--bulma-button-l": ["Button"],
+    "--bulma-button-outer-shadow-a": ["Button"],
+    "--bulma-button-outer-shadow-h": ["Button"],
+    "--bulma-button-outer-shadow-l": ["Button"],
+    "--bulma-button-outer-shadow-s": ["Button"],
+    "--bulma-button-padding-horizontal": ["Button"],
+    "--bulma-button-padding-vertical": ["Button"],
+    "--bulma-button-s": ["Button"],
+    "--bulma-button-static-background-color": ["Button"],
+    "--bulma-button-static-border-color": ["Button"],
+    "--bulma-button-static-color": ["Button"],
+    "--bulma-button-text-color": ["Button"],
+    "--bulma-button-text-decoration": ["Button"],
+    "--bulma-button-text-hover-background-color": ["Button"],
+    "--bulma-button-text-hover-color": ["Button"],
+    "--bulma-button-weight": ["Button"],
     "--bulma-card-background-color": ["Card"],
     "--bulma-card-color": ["Card"],
     "--bulma-card-content-background-color": ["Card"],
@@ -1912,7 +1912,7 @@
     "--bulma-loading-cancel-hover-color": ["Loading"],
     "--bulma-loading-cancel-radius": ["Loading"],
     "--bulma-loading-cancel-size": ["Loading"],
-    "--bulma-loading-color": ["Button", "ToggleButton"],
+    "--bulma-loading-color": ["Button"],
     "--bulma-loading-content-gap": ["Loading"],
     "--bulma-loading-icon-border-width": ["Loading"],
     "--bulma-loading-icon-border-width-large": ["Loading"],

package/data/components/Buttons.json

@@ -35,7 +35,7 @@
     },
     {
       "title": "Compound (dot-notation) usage",
-      "code": "<Buttons>\n  <Buttons.Button color=\"primary\">Save</Buttons.Button>\n  <Buttons.Button>Cancel</Buttons.Button>\n  <Buttons.LinkButton>Learn more</Buttons.LinkButton>\n</Buttons>"
+      "code": "<>\n  <Buttons>\n    <Buttons.Button color=\"primary\">Save</Buttons.Button>\n    <Buttons.Button>Cancel</Buttons.Button>\n    <Buttons.LinkButton>Learn more</Buttons.LinkButton>\n  </Buttons>\n  <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n    <Buttons.ToggleButton defaultPressed>Bold</Buttons.ToggleButton>\n    <Buttons.ToggleButton>Italic</Buttons.ToggleButton>\n    <Buttons.ToggleButton>Underline</Buttons.ToggleButton>\n  </Buttons>\n</>"
     }
   ],
   "accessibility": "- Grouping buttons in a `<div class=\"buttons\">` has no negative impact on accessibility.\n- Ensure each `Button` has a clear label (text or `aria-label`).\n- For a set of toggles that each turn on and off on their own, use [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton) in `Buttons hasAddons`, and give the `Buttons` `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group, so use [`Radios`](https://bestax.io/docs/api/form/radios) for it.\n\n:::tip\nYou can use all Bulma helper props (spacing, color, alignment) with `Buttons` for even more control.\n:::",
@@ -508,6 +508,153 @@
       ],
       "catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
       "types": []
+    },
+    {
+      "path": "Buttons.ToggleButton",
+      "summary": "The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`. It's always a `<button type=\"button\">`, so it never submits a form and carries no form value: a setting saved with a form is a `Checkbox` or a `Switch`. A set of toggles that each turn on and off on their own goes in `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group rather than a row of these: use `Radios`.",
+      "component": "ToggleButton",
+      "props": [
+        {
+          "name": "pressed",
+          "type": "boolean",
+          "default": null,
+          "description": "Whether it's pressed, when you hold the state. Setting it makes the toggle controlled: a click only calls `onPressedChange`, and nothing changes until you pass the new value. Pick this or `defaultPressed` for the button's lifetime.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether it starts pressed, when it holds its own state.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onPressedChange",
+          "type": "(pressed: boolean) => void",
+          "default": null,
+          "description": "Called with the new state each time it's toggled, whether or not `pressed` is set. An `onClick` that calls `preventDefault()` stops the toggle, and this doesn't fire.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": "'link'",
+          "description": "The fill while it's pressed. Not pressed, it's a plain button, so the fill is the difference people see. `white`, `light`, `dark` and `black` aren't offered, since in one theme or the other each fills about as light or dark as a plain button already is. Of the rest, a pale one such as `warning` changes less than the default `link`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The label, which stays the same in both states: a screen reader announces whether it's pressed, so \"Mute\" stays \"Mute\". An icon can swap, but an icon-only toggle needs an `aria-label` that doesn't. A label that changes (\"Play\", then \"Pause\") belongs on a plain `Button`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "default": "false",
+          "description": "Shows Bulma's spinner in place of the label and holds the toggle where it is: a click, Enter or Space does nothing, so neither `onClick` nor `onPressedChange` fires, until it's cleared. Set it while a change is saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and stays focusable, so focus isn't lost mid-save. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the button.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button rounded.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isFullwidth",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button full-width.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isFullWidth",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button full-width.",
+          "required": false,
+          "inherited": true,
+          "deprecated": true,
+          "deprecationNote": "Use `isFullwidth` instead — `isFullwidth` wins if both are set."
+        },
+        {
+          "name": "isFocused",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies focused styling (visual only).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isHovered",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies hovered styling (visual only).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies disabled styling.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Custom class name.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLButtonElement>",
+          "default": null,
+          "description": "Ref forwarded to the `<button>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <button> attributes and Bulma helper props",
+      "types": []
     }
   ],
   "cssVars": []

package/data/components/Dropdown.json

@@ -42,17 +42,17 @@
       "code": "<Dropdown label=\"Dropdown Menu\" active>\n  <Dropdown.Item>First Item</Dropdown.Item>\n  <Dropdown.Item>Second Item</Dropdown.Item>\n  <Dropdown.Divider />\n  <Dropdown.Item>Third Item</Dropdown.Item>\n</Dropdown>"
     }
   ],
-  "accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- The items are the only focusable things inside `role=\"menu\"`. A click between them, on a divider say, focuses the menu itself, so the arrow keys still reach the items from there.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n  submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n  renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n  focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n  <kbd>Escape</kbd> closes an open menu.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n  <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n  and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n  naturally.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n  `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n  default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n  its own.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n  as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n  it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n  `aria-disabled=\"true\"`) and dividers are skipped during arrow-key navigation.\n\n:::note\nThere is no typeahead and no built-in outside-click handling inside the menu beyond the\nexisting click-outside-to-close behavior — add those yourself if your use case needs them.\n:::",
+  "accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- The items are the only focusable things inside `role=\"menu\"`. A click between them, on a divider say, focuses the menu itself, so the arrow keys still reach the items from there.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n  submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n  renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n  focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n  <kbd>Escape</kbd> closes an open menu. On the trigger of a menu that's already open,\n  <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> focus the first/last item and\n  <kbd>Enter</kbd>/<kbd>Space</kbd> close it.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n  <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n  and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n  naturally.\n- Typing a letter moves to the next item whose text starts with it, and typing it again cycles\n  through the items that do. Letters typed in quick succession add up to one search, so\n  <kbd>d</kbd> then <kbd>u</kbd> lands on \"Duplicate\" past \"Download\". Text hidden with\n  `aria-hidden`, such as an icon's ligature name, doesn't count, and a new search starts each\n  time the menu opens. Typing searches once focus is in the menu, where the trigger's keys\n  above put it. A letter typed on the trigger itself does nothing.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n  `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n  default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n  its own. Holding the key down runs it once.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n  as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n  it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n  `aria-disabled=\"true\"`) and dividers are skipped by the arrow keys and by typing.\n- For a panel built around fields, [`Popover`](https://bestax.io/docs/api/components/popover) fits better: `role=\"menu\"` owns\n  menu items, and the default `closeOnClick` shuts the menu on a click anywhere in it, a field\n  included. Anything focusable you put in the menu anyway that isn't an item (a field, a\n  button, a checkbox, a link without a menu-item role) keeps its own keys, so its arrows,\n  <kbd>Home</kbd>, <kbd>End</kbd> and letters don't move to the items. A field needs\n  `closeOnClick={false}`, or a click into it closes the menu. <kbd>Escape</kbd> and\n  <kbd>Tab</kbd> still close the menu from any of them.",
   "related": ["Button", "ContextMenu", "Popover", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-dropdown--default",
-  "summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",
+  "summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI. Down, Enter and Space on the trigger open the menu on its first enabled item, and Up opens it on its last. On the trigger of a menu that's already open, Down and Up move focus to its first and last item. In the menu, the arrow keys, Home and End move between the items, and Enter and Space run the focused one the way a click does. Typing a letter moves to the next item whose text starts with it, skipping disabled ones, and letters typed in quick succession add up to one search. Typing searches once focus is in the menu, so a letter typed on the trigger does nothing. Escape closes the menu and focuses the trigger, and Tab closes it and lets focus move on. Anything focusable in the menu that isn't an item, such as a field, keeps its own keys apart from Escape and Tab. For a panel built around fields, use `Popover`.",
   "import": "import { Dropdown, Button, Field, Control, Span } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/components/Dropdown.tsx",
   "rootClass": "dropdown",
   "parts": [
     {
       "path": "Dropdown",
-      "summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",
+      "summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI. Down, Enter and Space on the trigger open the menu on its first enabled item, and Up opens it on its last. On the trigger of a menu that's already open, Down and Up move focus to its first and last item. In the menu, the arrow keys, Home and End move between the items, and Enter and Space run the focused one the way a click does. Typing a letter moves to the next item whose text starts with it, skipping disabled ones, and letters typed in quick succession add up to one search. Typing searches once focus is in the menu, so a letter typed on the trigger does nothing. Escape closes the menu and focuses the trigger, and Tab closes it and lets focus move on. Anything focusable in the menu that isn't an item, such as a field, keeps its own keys apart from Escape and Tab. For a panel built around fields, use `Popover`.",
       "component": null,
       "props": [
         {

package/data/components/ToggleButton.json

@@ -45,12 +45,16 @@
       "title": "Stopping a Toggle",
       "code": "<ToggleButton\n  onClick={event => {\n    const turningOn =\n      event.currentTarget.getAttribute('aria-pressed') === 'false';\n    if (turningOn && !window.confirm('Anyone with the link will see it.')) {\n      event.preventDefault();\n    }\n  }}\n>\n  Public\n</ToggleButton>"
     },
+    {
+      "title": "Loading",
+      "code": "function example() {\n  const [pinned, setPinned] = useState(false);\n  const [saving, setSaving] = useState(false);\n\n  // Stands in for the request that saves the change.\n  useEffect(() => {\n    if (!saving) return undefined;\n    const timer = setTimeout(() => setSaving(false), 1500);\n    return () => clearTimeout(timer);\n  }, [saving]);\n\n  return (\n    <ToggleButton\n      pressed={pinned}\n      isLoading={saving}\n      onPressedChange={next => {\n        setPinned(next);\n        setSaving(true);\n      }}\n    >\n      Pin\n    </ToggleButton>\n  );\n}"
+    },
     {
       "title": "Disabled",
       "code": "<Buttons>\n  <ToggleButton isDisabled>Show archived</ToggleButton>\n  <ToggleButton isDisabled defaultPressed>\n    Show archived\n  </ToggleButton>\n</Buttons>"
     }
   ],
-  "accessibility": "`ToggleButton` follows the toggle button in the\n[APG button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/):\n\n- **Role and state:** it's a native `<button>` with `aria-pressed` set to `\"true\"` or `\"false\"`\n  from the first render, server markup included, so it's announced as a toggle button, pressed or\n  not pressed. It's never `\"mixed\"`.\n- **Keyboard:** <kbd>Enter</kbd> and <kbd>Space</kbd> toggle it, as on any button, and focus stays\n  on it.\n- **The label stays put:** APG says \"it is critical the label on a toggle does not change when its\n  state changes.\" Mute stays \"Mute\". An icon can change, but the `aria-label` doesn't. A label that\n  changes, \"Play\" and then \"Pause\", belongs on a plain `Button` with no `aria-pressed`. Nothing can\n  check this at runtime, so it's yours to keep.\n- **Icon-only toggles** need an `aria-label`, as on `Button`.\n- **On is easy to see:** the default `link` fill turns a light button solid blue, and a dark one\n  bright in dark mode, so it's a change in lightness and not only in hue. `color` leaves out the\n  fills that wouldn't be: `white`, `light`, `dark` and `black` each match a plain button's\n  lightness in one theme or the other. That's also why the pressed look isn't\n  `Button`'s `isActive` shade:\n  [WCAG's own example](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) of a\n  button marked only by a darker shade of its color \"would not pass Use of color\".\n- **A set has a name:** give the `Buttons` around a set of toggles `role=\"group\"` and an\n  `aria-label`.\n- **One choice from several** is a radio group, not a set of toggles, so it's `Radios`.",
+  "accessibility": "`ToggleButton` follows the toggle button in the\n[APG button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/):\n\n- **Role and state:** it's a native `<button>` with `aria-pressed` set to `\"true\"` or `\"false\"`\n  from the first render, server markup included, so it's announced as a toggle button, pressed or\n  not pressed. It's never `\"mixed\"`.\n- **Keyboard:** <kbd>Enter</kbd> and <kbd>Space</kbd> toggle it, as on any button, and focus stays\n  on it.\n- **Loading:** while `isLoading` is set, it carries `aria-busy=\"true\"` and `aria-disabled=\"true\"`,\n  so a screen reader can tell it won't respond, and keys hold it still the same as the pointer\n  does. It keeps focus, since `aria-disabled` doesn't take it away the way `disabled` would.\n- **The label stays put:** APG says \"it is critical the label on a toggle does not change when its\n  state changes.\" Mute stays \"Mute\". An icon can change, but the `aria-label` doesn't. A label that\n  changes, \"Play\" and then \"Pause\", belongs on a plain `Button` with no `aria-pressed`. Nothing can\n  check this at runtime, so it's yours to keep.\n- **Icon-only toggles** need an `aria-label`, as on `Button`.\n- **On is easy to see:** the default `link` fill turns a light button solid blue, and a dark one\n  bright in dark mode, so it's a change in lightness and not only in hue. `color` leaves out the\n  fills that wouldn't be: `white`, `light`, `dark` and `black` each match a plain button's\n  lightness in one theme or the other. That's also why the pressed look isn't\n  `Button`'s `isActive` shade:\n  [WCAG's own example](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) of a\n  button marked only by a darker shade of its color \"would not pass Use of color\".\n- **A set has a name:** give the `Buttons` around a set of toggles `role=\"group\"` and an\n  `aria-label`.\n- **One choice from several** is a radio group, not a set of toggles, so it's `Radios`.",
   "related": [
     "Button",
     "Buttons",
@@ -64,7 +68,7 @@
   "summary": "The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`. It's always a `<button type=\"button\">`, so it never submits a form and carries no form value: a setting saved with a form is a `Checkbox` or a `Switch`. A set of toggles that each turn on and off on their own goes in `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group rather than a row of these: use `Radios`.",
   "import": "import { ToggleButton } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/elements/ToggleButton.tsx",
-  "rootClass": "button",
+  "rootClass": null,
   "parts": [
     {
       "path": "ToggleButton",
@@ -93,7 +97,7 @@
           "name": "onPressedChange",
           "type": "(pressed: boolean) => void",
           "default": null,
-          "description": "Called with the new state each time it's toggled, by a click, Enter or Space, whether or not `pressed` is set. An `onClick` that calls `preventDefault()` stops the toggle, and this doesn't fire.",
+          "description": "Called with the new state each time it's toggled, whether or not `pressed` is set. An `onClick` that calls `preventDefault()` stops the toggle, and this doesn't fire.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -116,6 +120,15 @@
           "inherited": false,
           "deprecated": false
         },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "default": "false",
+          "description": "Shows Bulma's spinner in place of the label and holds the toggle where it is: a click, Enter or Space does nothing, so neither `onClick` nor `onPressedChange` fires, until it's cleared. Set it while a change is saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and stays focusable, so focus isn't lost mid-save. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "size",
           "type": "'small' | 'normal' | 'medium' | 'large'",
@@ -134,15 +147,6 @@
           "inherited": true,
           "deprecated": false
         },
-        {
-          "name": "isLoading",
-          "type": "boolean",
-          "default": "false",
-          "description": "Displays a loading spinner. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
         {
           "name": "isFullwidth",
           "type": "boolean",
@@ -214,288 +218,5 @@
       "types": []
     }
   ],
-  "cssVars": [
-    {
-      "css": "--bulma-button-family",
-      "sass": "$button-family",
-      "default": "false",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-weight",
-      "sass": "$button-weight",
-      "default": "var(--bulma-weight-medium)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-border-color",
-      "sass": "$button-border-color",
-      "default": "var(--bulma-border)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-border-style",
-      "sass": "$button-border-style",
-      "default": "solid",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-border-width",
-      "sass": "$button-border-width",
-      "default": "var(--bulma-control-border-width)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-padding-vertical",
-      "sass": "$button-padding-vertical",
-      "default": "0.5em",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-padding-horizontal",
-      "sass": "$button-padding-horizontal",
-      "default": "1em",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-focus-border-color",
-      "sass": "$button-focus-border-color",
-      "default": "var(--bulma-link-focus-border)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-focus-box-shadow-size",
-      "sass": "$button-focus-box-shadow-size",
-      "default": "0 0 0 0.125em",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-focus-box-shadow-color",
-      "sass": "$button-focus-box-shadow-color",
-      "default": "hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 0.25)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-active-color",
-      "sass": "$button-active-color",
-      "default": "var(--bulma-link-active)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-active-border-color",
-      "sass": "$button-active-border-color",
-      "default": "var(--bulma-link-active-border)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-text-color",
-      "sass": "$button-text-color",
-      "default": "var(--bulma-text)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-text-decoration",
-      "sass": "$button-text-decoration",
-      "default": "underline",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-text-hover-background-color",
-      "sass": "$button-text-hover-background-color",
-      "default": "var(--bulma-background)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-text-hover-color",
-      "sass": "$button-text-hover-color",
-      "default": "var(--bulma-text-strong)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-ghost-background",
-      "sass": "$button-ghost-background",
-      "default": "none",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-ghost-border-color",
-      "sass": "$button-ghost-border-color",
-      "default": "transparent",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-ghost-color",
-      "sass": "$button-ghost-color",
-      "default": "var(--bulma-link-text)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-ghost-decoration",
-      "sass": "$button-ghost-decoration",
-      "default": "none",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-ghost-hover-color",
-      "sass": "$button-ghost-hover-color",
-      "default": "var(--bulma-link)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-ghost-hover-decoration",
-      "sass": "$button-ghost-hover-decoration",
-      "default": "underline",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-disabled-background-color",
-      "sass": "$button-disabled-background-color",
-      "default": "var(--bulma-scheme-main)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-disabled-border-color",
-      "sass": "$button-disabled-border-color",
-      "default": "var(--bulma-border)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-disabled-shadow",
-      "sass": "$button-disabled-shadow",
-      "default": "none",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-disabled-opacity",
-      "sass": "$button-disabled-opacity",
-      "default": "0.5",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-static-color",
-      "sass": "$button-static-color",
-      "default": "var(--bulma-text-weak)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-static-background-color",
-      "sass": "$button-static-background-color",
-      "default": "var(--bulma-scheme-main-ter)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-static-border-color",
-      "sass": "$button-static-border-color",
-      "default": "var(--bulma-border)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-h",
-      "sass": "$button-h",
-      "default": "var(--bulma-scheme-h)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-s",
-      "sass": "$button-s",
-      "default": "var(--bulma-scheme-s)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-l",
-      "sass": "$button-l",
-      "default": "var(--bulma-scheme-main-l)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-background-l",
-      "sass": "$button-background-l",
-      "default": "var(--bulma-scheme-main-l)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-background-l-delta",
-      "sass": "$button-background-l-delta",
-      "default": "0%",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-hover-background-l-delta",
-      "sass": "$button-hover-background-l-delta",
-      "default": "var(--bulma-hover-background-l-delta)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-active-background-l-delta",
-      "sass": "$button-active-background-l-delta",
-      "default": "var(--bulma-active-background-l-delta)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-color-l",
-      "sass": "$button-color-l",
-      "default": "var(--bulma-text-strong-l)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-border-l",
-      "sass": "$button-border-l",
-      "default": "var(--bulma-border-l)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-border-l-delta",
-      "sass": "$button-border-l-delta",
-      "default": "0%",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-hover-border-l-delta",
-      "sass": "$button-hover-border-l-delta",
-      "default": "var(--bulma-hover-border-l-delta)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-active-border-l-delta",
-      "sass": "$button-active-border-l-delta",
-      "default": "var(--bulma-active-border-l-delta)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-focus-border-l-delta",
-      "sass": "$button-focus-border-l-delta",
-      "default": "var(--bulma-focus-border-l-delta)",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-outer-shadow-h",
-      "sass": "$button-outer-shadow-h",
-      "default": "0",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-outer-shadow-s",
-      "sass": "$button-outer-shadow-s",
-      "default": "0%",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-outer-shadow-l",
-      "sass": "$button-outer-shadow-l",
-      "default": "20%",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-button-outer-shadow-a",
-      "sass": "$button-outer-shadow-a",
-      "default": "0.05",
-      "scope": "root"
-    },
-    {
-      "css": "--bulma-loading-color",
-      "sass": null,
-      "default": "hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))",
-      "scope": "root"
-    }
-  ]
+  "cssVars": []
 }

package/data/components/Tooltip.json

@@ -27,7 +27,7 @@
     },
     {
       "title": "Dashed Underline",
-      "code": "function example() {\n  return (\n    <Paragraph>\n      The term{' '}\n      <Tooltip label=\"Application Programming Interface\" dashed>\n        <Span>API</Span>\n      </Tooltip>{' '}\n      is commonly used in software development.\n    </Paragraph>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Paragraph>\n      The term{' '}\n      <Tooltip label=\"Application Programming Interface\" dashed>\n        <abbr tabIndex={0}>API</abbr>\n      </Tooltip>{' '}\n      is commonly used in software development.\n    </Paragraph>\n  );\n}"
     },
     {
       "title": "With Delay",
@@ -39,28 +39,28 @@
     },
     {
       "title": "On Icons",
-      "code": "function example() {\n  return (\n    <Block display=\"flex\" p=\"6\">\n      <Tooltip label=\"Delete item\" color=\"danger\" position=\"bottom\">\n        <Span cursor=\"pointer\">\n          <Icon name=\"fas fa-trash\" />\n        </Span>\n      </Tooltip>\n      <Tooltip label=\"Edit item\" color=\"info\" position=\"bottom\">\n        <Span cursor=\"pointer\">\n          <Icon name=\"fas fa-edit\" />\n        </Span>\n      </Tooltip>\n      <Tooltip label=\"Download\" color=\"success\" position=\"bottom\">\n        <Span cursor=\"pointer\">\n          <Icon name=\"fas fa-download\" />\n        </Span>\n      </Tooltip>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Buttons p=\"6\">\n      <Tooltip label=\"Moves it to the trash\" color=\"danger\" position=\"bottom\">\n        <Button aria-label=\"Delete\">\n          <Icon name=\"fas fa-trash\" />\n        </Button>\n      </Tooltip>\n      <Tooltip label=\"Opens it for editing\" color=\"info\" position=\"bottom\">\n        <Button aria-label=\"Edit\">\n          <Icon name=\"fas fa-edit\" />\n        </Button>\n      </Tooltip>\n      <Tooltip label=\"Saves a copy as a PDF\" color=\"success\" position=\"bottom\">\n        <Button aria-label=\"Download\">\n          <Icon name=\"fas fa-download\" />\n        </Button>\n      </Tooltip>\n    </Buttons>\n  );\n}"
     },
     {
       "title": "Form Field Help",
-      "code": "function example() {\n  return (\n    <Field>\n      <label className=\"label\">\n        Password{' '}\n        <Tooltip\n          label=\"Must be at least 8 characters with one number and one special character\"\n          multiline\n          color=\"info\"\n        >\n          <Span cursor=\"help\">\n            <Icon name=\"fas fa-question-circle\" size=\"small\" />\n          </Span>\n        </Tooltip>\n      </label>\n      <Control>\n        <Input type=\"password\" placeholder=\"Enter password\" />\n      </Control>\n    </Field>\n  );\n}"
+      "code": "function example() {\n  const id = React.useId();\n  return (\n    <Field>\n      <Block display=\"flex\" alignItems=\"center\" mb=\"2\">\n        <label className=\"label mb-0\" htmlFor={id}>\n          Password\n        </label>\n        <Tooltip\n          label=\"Must be at least 8 characters with one number and one special character\"\n          multiline\n          color=\"info\"\n        >\n          <Button size=\"small\" color=\"ghost\" aria-label=\"Password rules\">\n            <Icon name=\"fas fa-question-circle\" />\n          </Button>\n        </Tooltip>\n      </Block>\n      <Control>\n        <Input id={id} type=\"password\" placeholder=\"Enter password\" />\n      </Control>\n    </Field>\n  );\n}"
     },
     {
       "title": "Abbreviations",
-      "code": "function example() {\n  return (\n    <Paragraph style={{ lineHeight: 1.8 }}>\n      Hover over{' '}\n      <Tooltip label=\"Cascading Style Sheets\" color=\"info\" dashed>\n        <Span>CSS</Span>\n      </Tooltip>{' '}\n      or{' '}\n      <Tooltip label=\"HyperText Markup Language\" color=\"info\" dashed>\n        <Span>HTML</Span>\n      </Tooltip>{' '}\n      to see their full names.\n    </Paragraph>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Paragraph style={{ lineHeight: 1.8 }}>\n      Hover over{' '}\n      <Tooltip label=\"Cascading Style Sheets\" color=\"info\" dashed>\n        <abbr tabIndex={0}>CSS</abbr>\n      </Tooltip>{' '}\n      or{' '}\n      <Tooltip label=\"HyperText Markup Language\" color=\"info\" dashed>\n        <abbr tabIndex={0}>HTML</abbr>\n      </Tooltip>{' '}\n      to see their full names.\n    </Paragraph>\n  );\n}"
     }
   ],
-  "accessibility": "`Tooltip` is built to\n[WCAG's Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)\ncriterion:\n\n- **Dismissible:** <kbd>Escape</kbd> hides a shown tooltip wherever focus is, without you moving the\n  pointer or focus, and it stays hidden until the pointer or focus leaves the trigger and comes\n  back, or, with `openOnTap`, until the next tap on the trigger. The key goes on as well, to\n  whatever has focus, so a control in the trigger, such as a `Dropdown`, still gets its own Escape.\n  Inside a `Popover` or `Modal`, one Escape hides the tooltip and closes that too, since a tooltip\n  only adds to what's there.\n- **Hoverable:** the pointer can move from the trigger onto a shown tooltip, straight across the gap\n  between them, and it stays. A hidden tooltip, or one only `active` shows, lets the pointer through\n  to whatever is under it.\n- **Persistent:** no timer hides a tooltip that's hovered or focused.\n\nAnd around it:\n\n- Keyboard focus on the trigger shows the tooltip, as hover does. Focus that a click or a tap brings\n  doesn't, and neither does a touch pointer, so tapping the trigger just does what the trigger does.\n  `openOnTap` shows it with a tap, for a trigger with no tap action of its own.\n- An `active` tooltip is always shown, whatever the pointer, focus and Escape do.\n- Tooltip content has `role=\"tooltip\"`, and `aria-hidden` while it's hidden.\n- The trigger isn't linked to the tooltip with `aria-describedby`, so a screen reader doesn't\n  announce the tooltip with it. Give an icon-only trigger its own name, such as an `aria-label`.\n- The `dashed` style provides a visual cue that more information is available.",
+  "accessibility": "`Tooltip` is built to\n[WCAG's Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)\ncriterion:\n\n- **Dismissible:** <kbd>Escape</kbd> hides a shown tooltip wherever focus is, without you moving the\n  pointer or focus, and it stays hidden until the pointer or focus leaves the trigger and comes\n  back, or, with `openOnTap`, until the next tap on the trigger. The key goes on as well, to\n  whatever has focus, so a control in the trigger, such as a `Dropdown`, still gets its own Escape.\n  Inside a `Popover` or `Modal`, one Escape hides the tooltip and closes that too, since a tooltip\n  only adds to what's there.\n- **Hoverable:** the pointer can move from the trigger onto a shown tooltip, straight across the gap\n  between them, and it stays. A hidden tooltip, or one only `active` shows, lets the pointer through\n  to whatever is under it.\n- **Persistent:** no timer hides a tooltip that's hovered or focused.\n\nAnd around it:\n\n- Keyboard focus on the trigger shows the tooltip, as hover does. Focus that a click or a tap brings\n  doesn't, and neither does a touch pointer, so tapping the trigger just does what the trigger does.\n  `openOnTap` shows it with a tap, for a trigger with no tap action of its own.\n- An `active` tooltip is always shown, whatever the pointer, focus and Escape do.\n- Tooltip content has `role=\"tooltip\"`. While it's hidden, the stylesheet gives it\n  `visibility: hidden`, which keeps it out of the accessibility tree.\n- The tooltip describes its trigger. The trigger's `aria-describedby` points at it, after any ids it\n  already had, so a screen reader reads the tooltip when the trigger takes focus. A hidden tooltip\n  still counts as a description, so that's before any `delay` runs out. `content` is read as plain\n  text.\n- That takes a single element as `children`, which passes `aria-describedby` on to its DOM node, as\n  native elements and bestax components do, and takes focus itself: a button, a link, or a `Span`\n  with `tabIndex={0}`. Something focusable inside it doesn't get the link, and text, a fragment or\n  several elements get none. A development build warns when the first element Tab reaches in the\n  trigger doesn't carry the link, or there isn't one.\n- A tooltip describes and doesn't name, so give an icon-only trigger a name of its own, such as an\n  `aria-label`, as [On Icons](https://bestax.io/docs/api/components/tooltip#on-icons) does.\n- The `dashed` style provides a visual cue that more information is available.",
   "related": ["Button", "HoverCard", "Icon", "Popover"],
   "storybook": null,
-  "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element. Hovering the trigger or giving it keyboard focus shows it. Touch doesn't, unless `openOnTap` is on, and neither does focus a click or a tap brings, so tapping the trigger just does what the trigger does. The pointer can move onto a shown tooltip. Escape hides it wherever focus is, without moving the pointer or focus, and it stays hidden until one of them leaves the trigger and comes back, or, with `openOnTap`, until the next tap on the trigger. The key always goes on too, to whatever has focus or a `Modal` or `Popover` around it, since a tooltip only adds to what's there.",
+  "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element. Hovering the trigger or giving it keyboard focus shows it. Touch doesn't, unless `openOnTap` is on, and neither does focus a click or a tap brings, so tapping the trigger just does what the trigger does. The pointer can move onto a shown tooltip. Escape hides it wherever focus is, without moving the pointer or focus, and it stays hidden until one of them leaves the trigger and comes back, or, with `openOnTap`, until the next tap on the trigger. The key always goes on too, to whatever has focus or a `Modal` or `Popover` around it, since a tooltip only adds to what's there. The tooltip is its trigger's description, so a screen reader reads it as the trigger takes focus, whether it's showing yet or not.",
   "import": "import { Tooltip } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/components/Tooltip.tsx",
   "rootClass": "tooltip",
   "parts": [
     {
       "path": "Tooltip",
-      "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element. Hovering the trigger or giving it keyboard focus shows it. Touch doesn't, unless `openOnTap` is on, and neither does focus a click or a tap brings, so tapping the trigger just does what the trigger does. The pointer can move onto a shown tooltip. Escape hides it wherever focus is, without moving the pointer or focus, and it stays hidden until one of them leaves the trigger and comes back, or, with `openOnTap`, until the next tap on the trigger. The key always goes on too, to whatever has focus or a `Modal` or `Popover` around it, since a tooltip only adds to what's there.",
+      "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element. Hovering the trigger or giving it keyboard focus shows it. Touch doesn't, unless `openOnTap` is on, and neither does focus a click or a tap brings, so tapping the trigger just does what the trigger does. The pointer can move onto a shown tooltip. Escape hides it wherever focus is, without moving the pointer or focus, and it stays hidden until one of them leaves the trigger and comes back, or, with `openOnTap`, until the next tap on the trigger. The key always goes on too, to whatever has focus or a `Modal` or `Popover` around it, since a tooltip only adds to what's there. The tooltip is its trigger's description, so a screen reader reads it as the trigger takes focus, whether it's showing yet or not.",
       "component": null,
       "props": [
         {
@@ -76,7 +76,7 @@
           "name": "content",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Rich tooltip content (alternative to `label`), to read rather than use. Nothing in it should take focus or a click: it isn't in the Tab order while hidden, focus there isn't counted as being in the tooltip, and Escape hiding it would drop that focus. For links or buttons, use `HoverCard` or `Popover`.",
+          "description": "Rich tooltip content (alternative to `label`), to read rather than use. Nothing in it should take focus or a click: it isn't in the Tab order while hidden, focus there isn't counted as being in the tooltip, and Escape hiding it would drop that focus. For links or buttons, use `HoverCard` or `Popover`. A screen reader reads it as plain text, since it's the trigger's description.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -195,7 +195,7 @@
           "name": "children",
           "type": "React.ReactNode",
           "default": null,
-          "description": "The element that triggers the tooltip.",
+          "description": "The element that triggers the tooltip. Its `aria-describedby` points at the tooltip, after any ids it already had, so a screen reader reads the tooltip as its description when it takes focus, even while the tooltip is hidden. That takes a single element which passes `aria-describedby` on to its DOM node, as native elements and bestax components do, and takes focus itself, such as a button, a link or a `Span` with `tabIndex={0}`: something focusable inside it doesn't get the link, and text, a fragment or several elements get none. A development build warns when the first element Tab reaches in the trigger doesn't carry the link, or there isn't one.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/skills/bestax-custom-component/SKILL.md

@@ -68,9 +68,9 @@ A button that turns something on or off and stays that way (Bold, Mute, Show arc
 `aria-pressed`. It's always `type="button"`, holds its own state (`defaultPressed`) or takes
 `pressed` with `onPressedChange`, and fills with `color` (default `link`) only while pressed.
 Its label stays the same in both states, and an icon-only one needs an `aria-label`. A set goes
-in `Buttons hasAddons role="group" aria-label="…"`. A row where only one can be on is a radio
-group, so it's `Radios`, never toggles that switch each other off. A setting saved with a form is
-a `Switch` or a `Checkbox`.
+in `Buttons hasAddons role="group" aria-label="…"`, where it's also `Buttons.ToggleButton`. A row
+where only one can be on is a radio group, so it's `Radios`, never toggles that switch each other
+off. A setting saved with a form is a `Switch` or a `Checkbox`.
 
 A panel opened from a button (a filter form, share options, an inline edit) is `Popover`: use
 it rather than building one. It anchors the panel, moves focus in and back, and closes on

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

@@ -61,8 +61,8 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   arrow-key focus), `Dropdown active/onActiveChange`,
   `ToggleButton pressed/defaultPressed onPressedChange` for a button that stays on or off (not
   `Button isActive`, which sets no `aria-pressed`; the label stays the same in both states; a
-  set goes in `Buttons hasAddons role="group"` with an `aria-label`, and a row where only one
-  can be on is `Radios`),
+  set goes in `Buttons hasAddons role="group"` with an `aria-label`, where it's also
+  `Buttons.ToggleButton`, and a row where only one can be on is `Radios`),
   `Popover trigger={<Button>…</Button>} open/defaultOpen onOpenChange` (`trigger` is one
   element, not a node: Popover clones it to add the click and ARIA, so never wrap it in a
   clickable of your own; build the panel from `Popover.Header`/`Body`/`Footer`/`Close`, and a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.14.7",
+  "version": "1.14.8",
   "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.30.0"
+    "@allxsmith/bestax-bulma": "^5.31.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",