bestax-mcp 1.15.3 → 1.15.4

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.34.0"
+    "version": "5.34.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [

package/data/components/Field.json

@@ -86,7 +86,7 @@
       "code": "<Field horizontal>\n  <Field.Label size=\"normal\">\n    <label className=\"label\" htmlFor=\"compound-name\">\n      Name\n    </label>\n  </Field.Label>\n  <Field.Body>\n    <Field.Control>\n      <Input id=\"compound-name\" placeholder=\"Jane Doe\" />\n    </Field.Control>\n  </Field.Body>\n</Field>"
     }
   ],
-  "accessibility": "- For a single control, prefer the control's own `label` prop, with `horizontal` for a side-by-side row. It renders this `Field` and its label and wires the `for` itself, to your `id` when you pass one: `<Input label=\"Email\" id=\"email\" horizontal />`.\n- The `label` prop names the one control the Field holds. A composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase`, or `DateTimeInputBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id the label's `for` points at, so clicking the label focuses the control and assistive technology announces it. An `inline` picker renders no input, so it takes nothing.\n- A control with an `id` of its own keeps it and never takes the generated one, so `<Field label=\"Email\"><Input id=\"email\" /></Field>` renders a label that names nothing. Leave the `id` off, or pass the same value as `labelProps={{ htmlFor: 'email' }}`. Pass `labelProps={{ htmlFor: undefined }}` to opt out of the association entirely.\n- A range `Slider` takes that id on its low thumb, and its thumbs also point `aria-labelledby` at the label (at `labelProps.id` when you set one), so under a label of \"Price range\" they announce as \"Price range Minimum value\" and \"Price range Maximum value\". An `ariaLabel` entry names its thumb instead, and an `aria-label` or `aria-labelledby` on the Slider takes the label's place in both names. A label you wire by hand with `labelProps={{ htmlFor }}` gets no generated id, so it reaches the thumbs' names only when you give it an `id` there too, as in `labelProps={{ htmlFor: 'price', id: 'price-label' }}`.\n- An `Autocomplete` points its open suggestion list's `aria-labelledby` at the label the same way, so under a label of \"Country\" the list announces as \"Country\" rather than its fallback name, \"Suggestions\". A label you wire by hand needs an `id` in `labelProps` for this too, as in `labelProps={{ htmlFor: 'country', id: 'country-label' }}`.\n- A group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) can't take a `for`, so the label gets an id (yours from `labelProps.id`, otherwise a generated one) and the group points `aria-labelledby` at it. An `aria-label` or `aria-labelledby` you set on the group wins over the Field's label, as it does over a group's own `label`.\n- Association is skipped for `grouped`/`hasAddons` fields (they hold several controls), and a `Field` nested inside a labeled one starts its own scope. A horizontal Field wraps its children in a `Field.Body` of its own and keeps the association, but the pattern with an inner `Field` in that body needs it wired by hand. A label you wire by hand names the control its `for` points at in a `grouped` or `hasAddons` field too, and with an `id` in `labelProps` it names a range `Slider`'s thumbs and an `Autocomplete`'s list there as well. No group points at it on its own.\n- Two controls in one plain labeled Field would both adopt its id. Give each an `id` of its own and label it individually.\n- Once a labeled Field's content has mounted, its label keeps the generated `for` only while one of the inputs above holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `for`, so hydration matches, and an input that mounts later puts it back. A `for` you set with `labelProps={{ htmlFor }}` always stays. `Checkbox`, `Radio` and `Switch` take nothing from the label on their own: each is named by its own children, so put the text there, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Where you point content at the label by hand, as with a group in an inner `Field`, `labelProps={{ id }}` is enough in the browser, and `labelProps={{ id, htmlFor: undefined }}` keeps the `for` out of server-rendered HTML too.\n- Grouped/horizontal layouts use Bulma’s grid for layout.",
+  "accessibility": "- For a single control, prefer the control's own `label` prop, with `horizontal` for a side-by-side row. It renders this `Field` and its label and wires the `for` itself, to your `id` when you pass one: `<Input label=\"Email\" id=\"email\" horizontal />`.\n- The `label` prop names the one control the Field holds. A composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase`, or `DateTimeInputBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id the label's `for` points at, so clicking the label focuses the control and assistive technology announces it. An `inline` picker renders no input, so it takes nothing.\n- A control with an `id` of its own keeps it and never takes the generated one, so `<Field label=\"Email\"><Input id=\"email\" /></Field>` renders a label that names nothing. Leave the `id` off, or pass the same value as `labelProps={{ htmlFor: 'email' }}`. Pass `labelProps={{ htmlFor: undefined }}` to opt out of the association entirely.\n- A range `Slider` takes that id on its low thumb, and its thumbs also point `aria-labelledby` at the label (at `labelProps.id` when you set one), so under a label of \"Price range\" they announce as \"Price range Minimum value\" and \"Price range Maximum value\". An `ariaLabel` entry names its thumb instead, and an `aria-label` or `aria-labelledby` on the Slider takes the label's place in both names. A label you wire by hand with `labelProps={{ htmlFor }}` gets no generated id, so it reaches the thumbs' names only when you give it an `id` there too, as in `labelProps={{ htmlFor: 'price', id: 'price-label' }}`.\n- An `Autocomplete` or a `Taginput` points its open suggestion list's `aria-labelledby` at the label the same way, so under a label of \"Country\" the list announces as \"Country\" rather than its fallback name, \"Suggestions\". A label you wire by hand needs an `id` in `labelProps` for this too, as in `labelProps={{ htmlFor: 'country', id: 'country-label' }}`.\n- A group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) can't take a `for`, so the label gets an id (yours from `labelProps.id`, otherwise a generated one) and the group points `aria-labelledby` at it. An `aria-label` or `aria-labelledby` you set on the group wins over the Field's label, as it does over a group's own `label`.\n- Association is skipped for `grouped`/`hasAddons` fields (they hold several controls), and a `Field` nested inside a labeled one starts its own scope. A horizontal Field wraps its children in a `Field.Body` of its own and keeps the association, but the pattern with an inner `Field` in that body needs it wired by hand. A label you wire by hand names the control its `for` points at in a `grouped` or `hasAddons` field too, and with an `id` in `labelProps` it names a range `Slider`'s thumbs and an `Autocomplete`'s or `Taginput`'s list there as well. No group points at it on its own.\n- Two controls in one plain labeled Field would both adopt its id. Give each an `id` of its own and label it individually.\n- Once a labeled Field's content has mounted, its label keeps the generated `for` only while one of the inputs above holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `for`, so hydration matches, and an input that mounts later puts it back. A `for` you set with `labelProps={{ htmlFor }}` always stays. `Checkbox`, `Radio` and `Switch` take nothing from the label on their own: each is named by its own children, so put the text there, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Where you point content at the label by hand, as with a group in an inner `Field`, `labelProps={{ id }}` is enough in the browser, and `labelProps={{ id, htmlFor: undefined }}` keeps the `for` out of server-rendered HTML too.\n- Grouped/horizontal layouts use Bulma’s grid for layout.",
   "related": [
     "Checkbox",
     "Checkboxes",
@@ -149,7 +149,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete` also names its open suggestion list after the label through `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own.",
+          "description": "Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete` or a `Taginput` also names its open suggestion list after the label through `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -167,7 +167,7 @@
           "name": "labelProps",
           "type": "React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }",
           "default": null,
-          "description": "Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider` or an `Autocomplete` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too.",
+          "description": "Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s or `Taginput`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider`, an `Autocomplete` or a `Taginput` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -226,7 +226,7 @@
     },
     {
       "path": "Field.Label",
-      "summary": "FieldLabel component for rendering a Bulma field label. It renders the label column of a horizontal `Field` (a `div` with the `field-label` class), not a `<label>`, so text placed straight in it names nothing. Put a `<label>` with the `label` class inside it and point its `htmlFor` at the control's `id`, or give the horizontal `Field` a `label` prop, which renders this column and its `<label>` for you. A `<label>` you put here names the control through its `htmlFor` alone: a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s label only when its `label` prop renders it and it names the control. Where it would not name the control on its own, as in an inner `Field`, pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.",
+      "summary": "FieldLabel component for rendering a Bulma field label. It renders the label column of a horizontal `Field` (a `div` with the `field-label` class), not a `<label>`, so text placed straight in it names nothing. Put a `<label>` with the `label` class inside it and point its `htmlFor` at the control's `id`, or give the horizontal `Field` a `label` prop, which renders this column and its `<label>` for you. A `<label>` you put here names the control through its `htmlFor` alone: a range `Slider`'s thumbs and an `Autocomplete`'s or `Taginput`'s suggestion list point `aria-labelledby` at a `Field`'s label only when its `label` prop renders it and it names the control. Where it would not name the control on its own, as in an inner `Field`, pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.",
       "component": null,
       "props": [
         {

package/data/components/Taginput.json

@@ -58,7 +58,7 @@
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Tags\"\n      labelProps={{ htmlFor: 'tags-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control>\n            <Taginput\n              id=\"tags-field-control\"\n              icon=\"tags\"\n              defaultValue={['React', 'TypeScript']}\n              placeholder=\"Add a tag...\"\n              tagColor=\"primary\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],
-  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one). While the label is wired it also names the input; without one, the input falls back to `aria-label=\"Add tag\"`. Inside a labeled `Field`, that `Field`'s label names the input the same way and replaces the fallback.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- When `maxTags` is reached the text input is not rendered, so the label renders without a `for` attribute.\n- Tags are keyboard navigable\n- Delete buttons have proper `aria-label`\n- Autocomplete dropdown follows ARIA listbox pattern",
+  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one). While the label is wired it also names the input; without one, the input falls back to `aria-label=\"Add tag\"`. Inside a labeled `Field`, that `Field`'s label names the input the same way and replaces the fallback.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- When `maxTags` is reached the text input is not rendered, so the label renders without a `for` attribute.\n- Tags are keyboard navigable\n- Delete buttons have proper `aria-label`\n- With `data`, the input is a `role=\"combobox\"` with `aria-autocomplete=\"list\"` and `aria-haspopup=\"listbox\"`. Its `aria-expanded` is true only while the suggestion list is on screen, and while it is, `aria-controls` points at the list. While no suggestion matches there's no list, so it stays false. Without `data` there's never a list, so the input stays a plain text field\n- Focus stays in the input, which points `aria-activedescendant` at the highlighted suggestion as the arrow keys or the mouse move it\n- The list is a `role=\"listbox\"` named through `aria-labelledby` by the label that names the input, when that label has an id: the `label` prop's label always has one, and so does a `Field`'s label that the `Field` wires itself. A `Field` label you wire by hand with `labelProps.htmlFor`, which is how the horizontal examples above name the Taginput, needs an `id` in its `labelProps` as well. Otherwise the list falls back to `aria-label=\"Suggestions\"`\n- The list holds only the suggestions, each a `role=\"option\"` with an id of its own, and the highlighted one has `aria-selected=\"true\"`",
   "related": ["Autocomplete", "Input", "Tag"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-taginput",
   "summary": "The `Taginput` component provides a tag/chip input field for managing multiple tags.",
@@ -75,7 +75,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here; it then replaces the `aria-label=\"Add tag\"` fallback too.",
+          "description": "Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here; it then replaces the `aria-label=\"Add tag\"` fallback too. With `data`, the label naming the input also names the open suggestion list, through `aria-labelledby`, when it has an id: this label always does, and an outer `Field`'s does unless you wired it by hand without an `id` in its `labelProps`. Otherwise the list is named \"Suggestions\".",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -84,7 +84,7 @@
           "name": "labelProps",
           "type": "React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }",
           "default": null,
-          "description": "Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).",
+          "description": "Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). With `data`, while the label names the input, the suggestion list's `aria-labelledby` points at it, through an `id` here when you give one and a generated one otherwise.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -119,8 +119,8 @@
         {
           "name": "data",
           "type": "string[]",
-          "default": "[]",
-          "description": "Autocomplete suggestions.",
+          "default": null,
+          "description": "Autocomplete suggestions. With `data` set, even to an empty array, the text input is a `role=\"combobox\"` that controls the suggestion list and points `aria-activedescendant` at the highlighted suggestion. Without it there's no list, so the input stays a plain text field.",
           "required": false,
           "inherited": false,
           "deprecated": false

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

@@ -174,7 +174,7 @@ the children with `gap`. Before writing `style={{ … }}` anywhere, translate ea
 | `textAlign: 'center'`                    | `textAlign="centered"` (also `left`, `right`, `justified`)                                                                                                     |
 | `color: '#…'`                            | `textColor` with the nearest Bulma color: `primary`, `link`, `info`, `success`, `warning`, `danger`, `white`, `black`, `grey` (+ `grey-light`, `grey-dark`, …) |
 | `backgroundColor: '#…'`                  | `bgColor` (same palette)                                                                                                                                       |
-| `fontSize: …`                            | `textSize="1"`…`"7"` (`1` largest) — for headings use `Title`/`SubTitle` `size`                                                                                |
+| `fontSize: …`                            | `textSize="1"`…`"7"` (`1` largest). On `Title`/`SubTitle`, `as` sets the level and `size` picks it too, so an `<h3>` at size 4 is `as="h3" textSize="4"`       |
 | `fontWeight: …`                          | `textWeight`: `light`, `normal`, `medium`, `semibold`, `bold`                                                                                                  |
 | `textTransform`, italics                 | `textTransform`: `uppercase`, `lowercase`, `capitalized`, `italic`                                                                                             |
 | `display: 'flex'` + flex properties      | same-named props: `display="flex"`, `flexDirection`, `justifyContent`, `alignItems`, `flexWrap`                                                                |

package/data/skills/bestax-form/SKILL.md

@@ -148,18 +148,18 @@ unmatched `for` out of server-rendered HTML.
 
 A `range` `Slider` points the `for` at its low thumb and starts both thumbs' names with the label
 ("Price range Minimum value"); its `ariaLabel={[low, high]}` replaces those names outright, so
-leave it off when a label already names the Slider. Those thumbs and an `Autocomplete`'s
-suggestion list point `aria-labelledby` at the label's `id`, which a label wired by hand has only
-when you pass one, `labelProps={{ htmlFor, id }}`; without it they keep their fallback names
-("Minimum value"/"Maximum value", "Suggestions"). A `<label htmlFor>` you put in `Field.Label`
-yourself (`references/patterns.md`) names its control through the `for` alone, so label a row
-holding either with the `Field`'s `label` prop. An `aria-label` or `aria-labelledby` you give a
-group wins over any label, and a `Checkbox`, `Radio` or `Switch` takes nothing from a `Field` on
-its own: its children name it, and a `Field`'s label names one only when you wire it as you would
-any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. A
-labeled `Field` whose `for` nothing takes (a group, a `Checkbox`, `Radio` or `Switch`, an input
-with an `id` of its own, your own markup) drops it once mounted, though server-rendered HTML keeps
-it. `labelProps={{ htmlFor: undefined }}` opts out of the association entirely.
+leave it off when a label already names the Slider. Those thumbs and an `Autocomplete`'s or
+`Taginput`'s suggestion list point `aria-labelledby` at the label's `id`, which a label wired by
+hand has only when you pass one, `labelProps={{ htmlFor, id }}`; without it they keep their
+fallback names ("Minimum value"/"Maximum value", "Suggestions"). A `<label htmlFor>` you put in
+`Field.Label` yourself (`references/patterns.md`) names its control through the `for` alone, so
+label a row holding either with the `Field`'s `label` prop. An `aria-label` or `aria-labelledby`
+you give a group wins over any label, and a `Checkbox`, `Radio` or `Switch` takes nothing from a
+`Field` on its own: its children name it, and a `Field`'s label names one only when you wire it as
+you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's
+`id`. A labeled `Field` whose `for` nothing takes (a group, a `Checkbox`, `Radio` or `Switch`, an
+input with an `id` of its own, your own markup) drops it once mounted, though server-rendered HTML
+keeps it. `labelProps={{ htmlFor: undefined }}` opts out of the association entirely.
 
 ## Convenience vs composed
 

package/data/skills/bestax-form/references/api.md

@@ -19,7 +19,7 @@ Container and layout. Compound parts: `Field.Label`, `Field.Body`.
 | `labelProps`            | label attributes                                  | Props for the `<label>`. An explicit `htmlFor` (even `undefined`) takes over the association; otherwise it is set automatically. For its `id`, see below.                                                                          |
 | `textColor` / `bgColor` | Bulma color                                       | Helper colors for the field.                                                                                                                                                                                                       |
 
-An `id` in `labelProps` is what a group's, a range `Slider`'s and an `Autocomplete` suggestion list's `aria-labelledby` points at. A label wired by hand with `htmlFor` gets no generated id, so give it one, `labelProps={{ htmlFor, id }}`, for a range `Slider` or an `Autocomplete`. No group points at a label wired by hand.
+An `id` in `labelProps` is what a group's, a range `Slider`'s and an `Autocomplete` or `Taginput` suggestion list's `aria-labelledby` points at. A label wired by hand with `htmlFor` gets no generated id, so give it one, `labelProps={{ htmlFor, id }}`, for a range `Slider`, an `Autocomplete` or a `Taginput`. No group points at a label wired by hand.
 
 ## Control — `form/Control.tsx`
 

package/data/skills/bestax-form/references/patterns.md

@@ -165,9 +165,9 @@ Recipes built on addons, each written out in full in the docs:
   `Button` and a `Dropdown` in `Field hasAddons`, one `Control` each. `Buttons hasAddons` does
   not join the Dropdown's trigger. Keep the default color, since the trigger takes no `color`.
 - To label an addon row, put the label on an outer `Field` with `labelProps={{ htmlFor, id }}`
-  and a matching `id` on the input. The label's `id` names an `Autocomplete`'s suggestion list
-  or a range `Slider`'s thumbs, which point `aria-labelledby` at it. A label inside the
-  `hasAddons` field sits in the row beside the controls.
+  and a matching `id` on the input. The label's `id` names an `Autocomplete`'s or `Taginput`'s
+  suggestion list or a range `Slider`'s thumbs, which point `aria-labelledby` at it. A label
+  inside the `hasAddons` field sits in the row beside the controls.
 
 ## Horizontal field with explicit label/body
 

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

@@ -191,7 +191,7 @@ background comes from the semantic `color` prop, not `bgColor`.
 | `textAlign: 'center'`                    | `textAlign="centered"` (also `left`, `right`, `justified`)                                                                                                     |
 | `color: '#…'`                            | `textColor` with the nearest Bulma color: `primary`, `link`, `info`, `success`, `warning`, `danger`, `white`, `black`, `grey` (+ `grey-light`, `grey-dark`, …) |
 | `backgroundColor: '#…'`                  | `bgColor` (same palette)                                                                                                                                       |
-| `fontSize: …`                            | `textSize="1"`…`"7"` (`1` largest) — for headings use `Title`/`SubTitle` `size`                                                                                |
+| `fontSize: …`                            | `textSize="1"`…`"7"` (`1` largest). On `Title`/`SubTitle`, `as` sets the level and `size` picks it too, so an `<h3>` at size 4 is `as="h3" textSize="4"`       |
 | `fontWeight: …`                          | `textWeight`: `light`, `normal`, `medium`, `semibold`, `bold`                                                                                                  |
 | `textTransform`, italics                 | `textTransform`: `uppercase`, `lowercase`, `capitalized`, `italic`                                                                                             |
 | `display: 'flex'` + flex properties      | same-named props: `display="flex"`, `flexDirection`, `justifyContent`, `alignItems`, `flexWrap`                                                                |

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

@@ -54,8 +54,8 @@ leftover would be a type error rather than a no-op.
 | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `isColor="primary"`                                                                                          | `color="primary"` (every component that had it)                                                                                                                                                                                                                           |
 | `isSize="large"`                                                                                             | `size="large"` — Button, Content, Delete, Icon, Input, Progress, Section, Select, Tag, TextArea, Breadcrumb, Pagination, Tabs, Field.Label, Modal.Close                                                                                                                   |
-| `Title isSize={3}`                                                                                           | `size={3}` — bestax accepts the numbers 1–6                                                                                                                                                                                                                               |
-| `Subtitle isSize={4}`                                                                                        | `SubTitle size={4} as="h2"` — bloomer's default was an `<h2>`, bestax's is an `<h1>`, so the level is kept                                                                                                                                                                |
+| `Title isSize={3}`                                                                                           | `textSize="3"`, so the `<h1>` stays an `<h1>` (see [Title and Subtitle sizes](#title-and-subtitle-sizes))                                                                                                                                                                 |
+| `Subtitle isSize={4}`                                                                                        | `SubTitle textSize="4" as="h2"`: bloomer's default was an `<h2>`, bestax's is an `<h1>`, so the level is written out                                                                                                                                                      |
 | `Image isSize="128x128"`                                                                                     | `size="128x128"`                                                                                                                                                                                                                                                          |
 | `Image isRatio="16:9"`                                                                                       | `size="16by9"` (`square`→`square`, `1:1`→`1by1`, `4:3`→`4by3`, `3:2`→`3by2`, `2:1`→`2by1`)                                                                                                                                                                                |
 | `Breadcrumb isAlign`                                                                                         | `alignment`                                                                                                                                                                                                                                                               |
@@ -77,6 +77,31 @@ leftover would be a type error rather than a no-op.
 | `isActive` on Dropdown, DropdownItem, MenuLink, Modal, NavbarBurger, NavbarMenu, NavbarItem, PanelBlock, Tab | `active`                                                                                                                                                                                                                                                                  |
 | `Input`, `Select`, `TextArea`                                                                                | `InputBase`, `SelectBase`, `TextAreaBase` — bloomer's were bare elements; bestax's `Input`/`Select`/`TextArea` wrap themselves in `Field` and `Control`, so the bare `*Base` exports are the faithful targets and your existing `Field`/`Control` markup stays as written |
 
+## Title and Subtitle sizes
+
+bloomer's `Title` rendered an `<h1>` and its `Subtitle` an `<h2>` whatever `isSize` said, or
+the element `tag` named. bestax's `Title` and `SubTitle` render the heading their `size` names
+unless `as="p"`, so `<SubTitle size={4} as="h2">` is an `<h4>`. The codemod keeps the element
+bloomer rendered:
+
+| bloomer                       | bestax-bulma                      | renders |
+| ----------------------------- | --------------------------------- | ------- |
+| `<Title isSize={4}>`          | `<Title textSize="4">`            | `<h1>`  |
+| `<Title isSize={1}>`          | `<Title size={1}>`                | `<h1>`  |
+| `<Title isSize={4} tag="h2">` | `<Title textSize="4" as="h2">`    | `<h2>`  |
+| `<Title isSize={6} tag="p">`  | `<Title size={6} as="p">`         | `<p>`   |
+| `<Subtitle>`                  | `<SubTitle as="h2">`              | `<h2>`  |
+| `<Subtitle isSize={2}>`       | `<SubTitle size={2}>`             | `<h2>`  |
+| `<Subtitle isSize={4}>`       | `<SubTitle textSize="4" as="h2">` | `<h2>`  |
+
+`size` stays only where it renders the same element: a `<p>`, or the heading the size names.
+Everywhere else the size moves to the `textSize` helper, and so does a 7, which bestax's `size`
+does not take. The helper sets the same font size through Bulma's `is-size-4` class rather than the
+title's own `is-4`, so a rule of your own that targets `.title.is-4` needs the new class too.
+`is-size-4` is also `!important`, so a font size your own CSS gives the title, such as
+`.hero .title`, now loses to it where it used to beat `is-4`. A literal outside 1 to 7 keeps `size`
+and gets a `prop:isSize` TODO.
+
 ## Column sizes
 
 | bloomer                                                  | bestax-bulma                                                                                                      |

package/data/skills/bestax-migrate/references/bloomer/unmappables.md

@@ -274,6 +274,24 @@ prop conditionally:
 counterpart in bestax (only `isNarrowTouch`) — Bulma keeps the `is-*-touch` classes, so use
 `className`.
 
+## `prop:isSize` on `Title` and `Subtitle`: a size the codemod cannot carry
+
+bloomer's `Title` and `Subtitle` kept their element at every size. bestax's render the heading
+their `size` names, so a literal `isSize` moves to `textSize` to keep the level (see "Title and
+Subtitle sizes" in the prop map). A dynamic one cannot move, because `textSize` takes a string,
+so it becomes `size`. Pass it to `textSize` yourself:
+
+```jsx
+<Subtitle isSize={compact ? 5 : 4}>Report</Subtitle>
+<SubTitle textSize={compact ? '5' : '4'} as="h2">Report</SubTitle>
+```
+
+A literal outside 1 to 7 has no Bulma class, and bestax renders none for it either: drop it, or set
+a `textSize` from `'1'` to `'7'`.
+
+A dynamic size beside `tag="p"` is not flagged, since bestax never turns a `<p>` into a
+heading.
+
 ## `value-reference` — a component used as a value
 
 `const Wrapped = Box` and `{ Subtitle }` are rewritten to the bestax binding (`Hero.Foot`,

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

@@ -118,6 +118,29 @@ wrong:
   Note that this one does change the rendered element: rbx's `forwardRefAs` rendered the tag you
   gave it, so that really was a `<span>`, and the TODO exists to tell you the element moved.
 
+## Title sizes
+
+rbx's `Title` rendered an `<h1>` at every size, subtitle or not, or the element `as` named.
+bestax's `Title` and `SubTitle` render the heading their `size` names unless `as="p"`, so the
+codemod keeps the element rbx rendered:
+
+| rbx                                | bestax-bulma                   | renders |
+| ---------------------------------- | ------------------------------ | ------- |
+| `<Title size={4}>`                 | `<Title textSize="4">`         | `<h1>`  |
+| `<Title size={1}>`                 | `<Title size={1}>`             | `<h1>`  |
+| `<Title subtitle size={6}>`        | `<SubTitle textSize="6">`      | `<h1>`  |
+| `<Title as="h2" size={5}>`         | `<Title as="h2" textSize="5">` | `<h2>`  |
+| `<Title as="p" subtitle size={5}>` | `<SubTitle as="p" size={5}>`   | `<p>`   |
+
+`size` stays only where it renders the same element: a `<p>`, or the heading the size names.
+Everywhere else the size moves to the `textSize` helper, and so does a 7, which bestax's `size`
+does not take. The helper sets the same font size through Bulma's `is-size-4` class rather than the
+title's own `is-4`, so a rule of your own that targets `.title.is-4` needs the new class too.
+`is-size-4` is also `!important`, so a font size your own CSS gives the title, such as
+`.hero .title`, now loses to it where it used to beat `is-4`. Beside a spread, which may carry
+`as`, a size moves even where it names the default `<h1>`. A literal outside 1 to 7 keeps `size`
+and gets a `prop:size` TODO.
+
 ## `href` follows `as`
 
 bestax gives an element the attributes of the tag `as` names, so `href` exists only where that

package/data/skills/bestax-migrate/references/rbx/unmappables.md

@@ -181,6 +181,24 @@ prop.
 A dynamic `Image.Container` size gets the same rule, since the codemod can't turn it into
 bestax's `NxN` form. Set `size` on the migrated `<Image>` by hand.
 
+## `prop:size` on `Title`: a size the codemod cannot carry
+
+rbx's `Title` rendered an `<h1>` at every size, subtitle or not. bestax's `Title` and `SubTitle`
+render the heading their `size` names unless `as="p"`, so a literal size moves to `textSize` to
+keep the level (see "Title sizes" in the prop map). A dynamic one cannot move, because
+`textSize` takes a string, so it stays `size`. Pass it to `textSize` yourself:
+
+```jsx
+<Title size={compact ? 5 : 4}>Report</Title>
+<Title textSize={compact ? '5' : '4'}>Report</Title>
+```
+
+A literal outside 1 to 7 has no Bulma class, and bestax renders none for it either: drop it, or set
+a `textSize` from `'1'` to `'7'`.
+
+The same TODO marks a `Title` that sets `size` and `textSize` both: drop `size` and let
+`textSize` set the font size.
+
 ## Props with no counterpart
 
 | TODO                                         | What to do                                                                                                                                                                                                                                               |

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

@@ -20,7 +20,7 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
 | `Element`      | —                                            | Flagged: no generic element; use a semantic component + helper props                                                                                |
 | `Footer`       | `Footer`                                     | Auto                                                                                                                                                |
 | `Form.*`       | flat imports                                 | See Form table below                                                                                                                                |
-| `Heading`      | `Title` / `SubTitle` / `<p class="heading">` | Auto for literal `subtitle`/`heading` (by value, not presence — `subtitle={false}` is `Title`); dynamic value flagged                               |
+| `Heading`      | `Title` / `SubTitle` / `<p class="heading">` | Auto for literal `subtitle`/`heading` (by value, not presence — `subtitle={false}` is `Title`); dynamic value flagged; `size` may become `textSize` |
 | `Hero`         | `Hero`                                       | Auto; `hasNavbar`→`fullheightWithNavbar`; `halfheight`/`gradient` flagged                                                                           |
 | `Icon`         | `Icon`                                       | `<i class="fas fa-x">` children → `name`/`library`/`variant` props; else flagged                                                                    |
 | `Image`        | `Image`                                      | Auto; numeric `size={128}` → `size="128x128"`, `rounded`→`isRounded`                                                                                |

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

@@ -46,6 +46,28 @@ href="/x">`) keeps the element and drops the `href`, with a `prop:href` TODO. RB
 `<Button href="/x">` with no `renderAs` goes the same way: bestax's `Button` renders a
 `<button>`. Set `as="a"` to make it a link.
 
+## `Heading` sizes
+
+RBC's `Heading` rendered an `<h1>` at every size, subtitle or not, or the element `renderAs`
+named. bestax's `Title` and `SubTitle` render the heading their `size` names unless `as="p"`, so
+the codemod keeps the element RBC rendered:
+
+| RBC                                        | bestax-bulma                   | renders |
+| ------------------------------------------ | ------------------------------ | ------- |
+| `<Heading size={4}>`                       | `<Title textSize="4">`         | `<h1>`  |
+| `<Heading size={1}>`                       | `<Title size="1">`             | `<h1>`  |
+| `<Heading subtitle size={6}>`              | `<SubTitle textSize="6">`      | `<h1>`  |
+| `<Heading renderAs="h2" size={5}>`         | `<Title as="h2" textSize="5">` | `<h2>`  |
+| `<Heading renderAs="p" subtitle size={5}>` | `<SubTitle as="p" size="5">`   | `<p>`   |
+
+`size` stays only where it renders the same element: a `<p>`, or the heading the size names.
+Everywhere else the size moves to the `textSize` helper, and so does a 7, which bestax's `size`
+does not take. The helper sets the same font size through Bulma's `is-size-4` class rather than the
+title's own `is-4`, so a rule of your own that targets `.title.is-4` needs the new class too.
+`is-size-4` is also `!important`, so a font size your own CSS gives the title, such as
+`.hero .title`, now loses to it where it used to beat `is-4`. A literal outside 1 to 7 keeps `size`
+and gets a `prop:size` TODO.
+
 ## Boolean modifier convention
 
 RBC uses bare booleans (`loading`, `outlined`, `rounded`, `fullwidth`); bestax prefixes

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

@@ -142,6 +142,24 @@ bestax `Button` colors are the semantic set + `text`/`ghost`. For shades use
 takes the value. Any other value, or one the codemod can't read, stays as written with a TODO
 that lists the sizes that component takes: use one of them, or drop the prop.
 
+## `prop:size` on `Heading`: a size the codemod cannot carry
+
+RBC's `Heading` rendered an `<h1>` at every size, subtitle or not. bestax's `Title` and
+`SubTitle` render the heading their `size` names unless `as="p"`, so a literal size moves to
+`textSize` to keep the level (see "`Heading` sizes" in the prop map). A dynamic one cannot move,
+because `textSize` takes a string, so it stays `size`. Pass it to `textSize` yourself:
+
+```jsx
+<Heading size={compact ? 5 : 4}>Report</Heading>
+<Title textSize={compact ? '5' : '4'}>Report</Title>
+```
+
+A literal outside 1 to 7 has no Bulma class, and bestax renders none for it either: drop it, or set
+a `textSize` from `'1'` to `'7'`.
+
+The same TODO marks a `Heading` that sets `size` and `textSize` both: drop `size` and let
+`textSize` set the font size.
+
 ## `domRef`
 
 bestax components don't take `domRef`, but many forward a plain `ref` — the form controls, plus

package/data/skills.json

@@ -29,8 +29,8 @@
       "promptName": "form",
       "dir": "bestax-form",
       "references": [
-        { "id": "api", "file": "references/api.md", "bytes": 13008 },
-        { "id": "patterns", "file": "references/patterns.md", "bytes": 7509 }
+        { "id": "api", "file": "references/api.md", "bytes": 13036 },
+        { "id": "patterns", "file": "references/patterns.md", "bytes": 7525 }
       ],
       "examples": []
     },
@@ -93,12 +93,12 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 24639
+          "bytes": 26286
         },
         {
           "id": "bloomer-unmappables",
           "file": "references/bloomer/unmappables.md",
-          "bytes": 16955
+          "bytes": 17739
         },
         {
           "id": "bulma-classes-component-map",
@@ -128,12 +128,12 @@
         {
           "id": "rbx-prop-map",
           "file": "references/rbx/prop-map.md",
-          "bytes": 12404
+          "bytes": 13914
         },
         {
           "id": "rbx-unmappables",
           "file": "references/rbx/unmappables.md",
-          "bytes": 14336
+          "bytes": 15120
         },
         {
           "id": "react-bulma-components-component-map",
@@ -143,12 +143,12 @@
         {
           "id": "react-bulma-components-prop-map",
           "file": "references/react-bulma-components/prop-map.md",
-          "bytes": 7334
+          "bytes": 8820
         },
         {
           "id": "react-bulma-components-unmappables",
           "file": "references/react-bulma-components/unmappables.md",
-          "bytes": 12266
+          "bytes": 13064
         }
       ],
       "examples": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.15.3",
+  "version": "1.15.4",
   "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.34.0"
+    "@allxsmith/bestax-bulma": "^5.34.1"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",