bestax-mcp 1.18.1 → 1.18.3

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.42.0"
+    "version": "5.43.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -97,6 +97,7 @@
         "File",
         "Input",
         "Numberinput",
+        "PinInput",
         "Radio",
         "Radios",
         "Rate",
@@ -277,7 +278,7 @@
       "import": "import { Checkboxes, Checkbox } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 8,
-      "exampleCount": 6
+      "exampleCount": 7
     },
     {
       "name": "Checkboxes",
@@ -840,6 +841,17 @@
       "propCount": 4,
       "exampleCount": 10
     },
+    {
+      "name": "PinInput",
+      "kind": "component",
+      "category": "form",
+      "purpose": "The `PinInput` component is a field for a short code, such as a one-time code or a PIN, drawn as a row of boxes with one character in each.",
+      "slug": "form/pininput",
+      "import": "import { PinInput } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 19,
+      "exampleCount": 12
+    },
     {
       "name": "Popover",
       "kind": "component",
@@ -2313,6 +2325,12 @@
       "DateTimeInput",
       "TimeInput"
     ],
+    "--bulma-pin-input-box-width": ["PinInput"],
+    "--bulma-pin-input-caret-blink-duration": ["PinInput"],
+    "--bulma-pin-input-caret-color": ["PinInput"],
+    "--bulma-pin-input-caret-height": ["PinInput"],
+    "--bulma-pin-input-caret-width": ["PinInput"],
+    "--bulma-pin-input-gap": ["PinInput"],
     "--bulma-popover-animation-duration": ["Popover"],
     "--bulma-popover-background": ["Popover"],
     "--bulma-popover-body-padding": ["Popover"],

package/data/components/Carousel.json

@@ -380,19 +380,19 @@
           "deprecated": false
         },
         {
-          "name": "className",
-          "type": "string",
+          "name": "children",
+          "type": "React.ReactNode",
           "default": null,
-          "description": "Additional CSS classes.",
+          "description": "The slide's content. An image in it is held to the slide's width at its own height, unless something sizes the image itself: a ratio `Image` fills its frame, and an `Avatar`'s photo its circle, as they do outside a carousel.",
           "required": false,
           "inherited": false,
           "deprecated": false
         },
         {
-          "name": "children",
-          "type": "React.ReactNode",
+          "name": "className",
+          "type": "string",
           "default": null,
-          "description": "Content rendered inside the component.",
+          "description": "Additional CSS classes.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Checkbox.json

@@ -28,9 +28,13 @@
     {
       "title": "Valid Colors and Sizes",
       "code": "import { Checkbox, Checkboxes } from '@allxsmith/bestax-bulma';\nimport { checkboxColors, checkboxSizes } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  return (\n    <>\n      <Checkboxes>\n        {checkboxColors.map(color => (\n          <Checkbox key={color} color={color} defaultChecked>\n            {color}\n          </Checkbox>\n        ))}\n      </Checkboxes>\n      <Checkboxes>\n        {checkboxSizes.map(size => (\n          <Checkbox key={size} size={size} defaultChecked>\n            {size}\n          </Checkbox>\n        ))}\n      </Checkboxes>\n    </>\n  );\n}"
+    },
+    {
+      "title": "Theming the Box",
+      "code": "<Checkbox className=\"ink-checkbox\" defaultChecked>\n  Remember me\n</Checkbox>"
     }
   ],
-  "accessibility": "- Each `Checkbox` is rendered as a `<label>` wrapping an `<input type=\"checkbox\">` and the label text, for optimal accessibility.\n- The clickable area includes both box and label by default.\n- Browsers expose a box with `indeterminate` set as mixed, so the component adds no ARIA for it.",
+  "accessibility": "- Each `Checkbox` is rendered as a `<label>` wrapping an `<input type=\"checkbox\">` and the label text, for optimal accessibility.\n- The clickable area includes both box and label by default.\n- Browsers expose a box with `indeterminate` set as mixed, so the component adds no ARIA for it.\n- An unchecked box shows only its border, `--bulma-checkbox-border-color`. It defaults to `--bulma-text-weak`, which holds the 3:1 contrast WCAG asks of a control's boundary (non-text contrast) on Bulma's page and card surfaces in light and dark. Hold a replacement border, and a custom check color on its fill, to 3:1 as well.\n- In forced colors (Windows contrast themes), the box, the check mark and the mixed dash take system colors, so they stay visible whatever the variables hold.",
   "related": ["Checkboxes", "Field", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-checkbox--default",
   "summary": "The `Checkbox` component provides a Bulma-styled checkbox input.",
@@ -93,7 +97,7 @@
           "name": "className",
           "type": "string",
           "default": null,
-          "description": "Additional CSS classes to apply.",
+          "description": "Additional CSS classes, on the outer `<label>`. That's the element that declares the `--bulma-checkbox-*` variables, so a class is how to set one: `style` and the other input attributes go to the `<input>`. Name `.styled-checkbox` beside your class in the selector, so it beats the label's own declaration whatever order the stylesheets load in. A `color` prop declares the fills again on `.styled-checkbox.is-<color>`, which ties that selector, so leave `color` unset when a class sets them.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -144,7 +148,7 @@
     {
       "css": "--bulma-checkbox-border-color",
       "sass": "$checkbox-border-color",
-      "default": "var(--bulma-border)",
+      "default": "var(--bulma-text-weak)",
       "scope": "root"
     },
     {

package/data/components/Checkboxes.json

@@ -216,7 +216,7 @@
           "name": "className",
           "type": "string",
           "default": null,
-          "description": "Additional CSS classes to apply.",
+          "description": "Additional CSS classes, on the outer `<label>`. That's the element that declares the `--bulma-checkbox-*` variables, so a class is how to set one: `style` and the other input attributes go to the `<input>`. Name `.styled-checkbox` beside your class in the selector, so it beats the label's own declaration whatever order the stylesheets load in. A `color` prop declares the fills again on `.styled-checkbox.is-<color>`, which ties that selector, so leave `color` unset when a class sets them.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Field.json

@@ -98,7 +98,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`, `Combobox`, `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`, a `Combobox` or a `Taginput` points its open 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, a `Combobox`'s or a `Taginput`'s list there as well. No group points at it on its own.\n- An input in a `hasAddons` row still needs a name of its own. For a visible label, put it on an outer `Field` and wire it by hand, as in [Addons (With a Label)](https://bestax.io/docs/api/form/field#addons-with-a-label). Without one, give the input an `aria-label`, as the other addon examples do. A placeholder disappears once the reader starts typing, so it doesn't stand in for either.\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`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `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`, a `Combobox` or a `Taginput` points its open 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, a `Combobox`'s or a `Taginput`'s list there as well. No group points at it on its own.\n- An input in a `hasAddons` row still needs a name of its own. For a visible label, put it on an outer `Field` and wire it by hand, as in [Addons (With a Label)](https://bestax.io/docs/api/form/field#addons-with-a-label). Without one, give the input an `aria-label`, as the other addon examples do. A placeholder disappears once the reader starts typing, so it doesn't stand in for either.\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",
@@ -161,7 +161,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`, `Combobox`, `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`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `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`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `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`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`. `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

package/data/components/PinInput.json

@@ -0,0 +1,341 @@
+{
+  "name": "PinInput",
+  "kind": "component",
+  "category": "form",
+  "slug": "form/pininput",
+  "docsUrl": "https://bestax.io/docs/api/form/pininput",
+  "examples": [
+    {
+      "title": "Basic PinInput",
+      "code": "<PinInput label=\"Verification code\" />"
+    },
+    {
+      "title": "Verifying a Code",
+      "code": "function example() {\n  const [code, setCode] = useState('');\n  const [checked, setChecked] = useState<string>();\n  const wrong = checked !== undefined && checked !== '123456';\n  return (\n    <PinInput\n      label=\"Enter the 6-digit code we sent you\"\n      value={code}\n      onChange={next => {\n        setCode(next);\n        setChecked(undefined);\n      }}\n      onComplete={setChecked}\n      color={wrong ? 'danger' : checked ? 'success' : undefined}\n      message={\n        wrong\n          ? 'That code isn’t right. Try 123456.'\n          : checked\n            ? 'Verified.'\n            : undefined\n      }\n      messageColor={wrong ? 'danger' : 'success'}\n    />\n  );\n}"
+    },
+    {
+      "title": "Length",
+      "code": "<Block>\n  <PinInput label=\"PIN\" length={4} />\n  <PinInput label=\"Backup code\" length={8} />\n</Block>"
+    },
+    {
+      "title": "Letters and Digits",
+      "code": "<PinInput label=\"Invite code\" type=\"alphanumeric\" length={5} />"
+    },
+    {
+      "title": "Masked",
+      "code": "<PinInput label=\"PIN\" length={4} isMasked defaultValue=\"12\" />"
+    },
+    {
+      "title": "Colors, Sizes and Rounded Boxes",
+      "code": "<Block>\n  <PinInput label=\"Primary\" color=\"primary\" length={4} defaultValue=\"12\" />\n  <PinInput label=\"Small\" size=\"small\" length={4} defaultValue=\"12\" />\n  <PinInput label=\"Large\" size=\"large\" length={4} defaultValue=\"12\" />\n  <PinInput label=\"Rounded\" isRounded length={4} defaultValue=\"12\" />\n</Block>"
+    },
+    {
+      "title": "Disabled",
+      "code": "<PinInput label=\"Verification code\" disabled defaultValue=\"123\" />"
+    },
+    {
+      "title": "Controlled vs Uncontrolled",
+      "code": "<PinInput label=\"Code\" defaultValue=\"42\" />"
+    },
+    {
+      "title": "In a Form",
+      "code": "function example() {\n  const [sent, setSent] = useState<string>();\n  return (\n    <form\n      onSubmit={e => {\n        e.preventDefault();\n        setSent(String(new FormData(e.currentTarget).get('otp')));\n      }}\n    >\n      <PinInput label=\"Verification code\" name=\"otp\" required />\n      <Button type=\"submit\" color=\"primary\" mt=\"3\">\n        Verify\n      </Button>\n      {sent !== undefined && (\n        <Paragraph mt=\"2\">The form sent otp={sent}</Paragraph>\n      )}\n    </form>\n  );\n}"
+    },
+    {
+      "title": "Inside a Field",
+      "code": "<Field horizontal label=\"Code\">\n  <PinInput length={4} />\n</Field>"
+    },
+    {
+      "title": "Right to Left",
+      "code": "<Block dir=\"rtl\">\n  <PinInput label=\"رمز التحقق\" defaultValue=\"12\" />\n</Block>"
+    },
+    {
+      "title": "Forwarded ref",
+      "code": "function example() {\n  const ref = React.useRef<HTMLInputElement>(null);\n  return (\n    <>\n      <PinInput ref={ref} label=\"Verification code\" />\n      <Button mt=\"3\" onClick={() => ref.current?.focus()}>\n        Focus the code\n      </Button>\n    </>\n  );\n}"
+    }
+  ],
+  "accessibility": "- **One field:** the code is in one `<input>`, named by the label, so a screen reader announces a single text field with the code as its value. The boxes are drawn with `aria-hidden`, so nothing reads them a second time, or as a run of separate fields.\n- **Say how long the code is in the label,** as in \"Enter the 6-digit code\", since the boxes that show it are hidden from a screen reader. The `message` isn't tied to the input, so a screen reader doesn't read it when the field takes focus. If the length lives in help text of your own, point the input's `aria-describedby` at it.\n- **Masked,** the input is a password field, so a screen reader doesn't read the code out.\n- **The keyboard a phone shows** is the number pad by default, through `inputMode=\"numeric\"`, and the full keyboard with `type=\"alphanumeric\"`.\n- **Focus** shows on the boxes, since the input itself is transparent: the box at the caret, or every selected box, gets Bulma's focus ring, and an empty box at the caret draws a blinking caret. Under `prefers-reduced-motion: reduce` the caret stays drawn and doesn't blink.\n- **Forced colors:** in Windows high contrast mode the box at the caret is outlined in the system's highlight color, where Bulma's focus ring, a shadow, is gone, the caret is drawn in the system's text color, and a disabled box takes the system's color for disabled text.",
+  "related": ["Field", "Input", "Numberinput", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/form-pininput--default",
+  "summary": "The `PinInput` component is a field for a short code, such as a one-time code or a PIN, drawn as a row of boxes with one character in each. The code lives in one real `<input>` that lies over the boxes, so it is one field to a screen reader, and paste, autofill from a text message and password managers work on it as they do on any input. The boxes draw what it holds, and the box at the caret, or every box in a selection, shows Bulma's focus look.",
+  "import": "import { PinInput } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/form/PinInput.tsx",
+  "rootClass": "pin-input",
+  "parts": [
+    {
+      "path": "PinInput",
+      "summary": "The `PinInput` component is a field for a short code, such as a one-time code or a PIN, drawn as a row of boxes with one character in each. The code lives in one real `<input>` that lies over the boxes, so it is one field to a screen reader, and paste, autofill from a text message and password managers work on it as they do on any input. The boxes draw what it holds, and the box at the caret, or every box in a selection, shows Bulma's focus look.",
+      "component": null,
+      "props": [
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. 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.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "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).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "Applied to the input that holds the code (the labellable control), not the row of boxes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "length",
+          "type": "number",
+          "default": "6",
+          "description": "How many characters the code has. Each gets a box, and it is the input's `maxLength`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "default": null,
+          "description": "The code (controlled). Only its first `length` characters are shown and submitted.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "default": "''",
+          "description": "The code to start with (uncontrolled). Only its first `length` characters are kept.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "type",
+          "type": "'number' | 'alphanumeric'",
+          "default": "'number'",
+          "description": "What the code takes. A digit from any script, such as an Arabic-Indic or a Persian one, goes in as its ASCII digit, so the code reaches `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed or pasted is dropped, and the caret stays where it was. The input stays a text field either way, so a code keeps its leading zeros.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isMasked",
+          "type": "boolean",
+          "default": "false",
+          "description": "Shows a dot in each filled box in place of its character, and makes the input a password field, so a screen reader doesn't read the code out either.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'",
+          "default": null,
+          "description": "Bulma color for the boxes, the colors an `Input` takes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the boxes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Round boxes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the input is disabled.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "default": null,
+          "description": "Called with the code each time it changes. A paste replaces the whole code with what was pasted, kept to what `type` takes and cut to `length`, and a paste with nothing the code takes changes nothing.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onComplete",
+          "type": "(value: string) => void",
+          "default": null,
+          "description": "Called with the code when a change makes it `length` characters long, such as typing the last character, a paste or autofill. It fires once for each change that fills the last box with a new code, and never on a render. A `value` you set yourself doesn't call it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "labelSize",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size for the label (used in horizontal layouts).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "horizontal",
+          "type": "boolean",
+          "default": "false",
+          "description": "Horizontal field layout.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "message",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Help/validation message below the input.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "messageColor",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Bulma color for the message.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the Field wrapper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "Form field name, on the input, so a form submits the code under it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "autoComplete",
+          "type": "string",
+          "default": "\"one-time-code\"",
+          "description": "Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "inputMode",
+          "type": "string",
+          "default": null,
+          "description": "The keyboard a phone shows: `\"numeric\"` with `type=\"number\"`, `\"text\"` with `type=\"alphanumeric\"`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "pattern",
+          "type": "string",
+          "default": null,
+          "description": "Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the row of boxes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLInputElement>",
+          "default": null,
+          "description": "Ref forwarded to the input that holds the code.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <input> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-pin-input-gap",
+      "sass": "$pin-input-gap",
+      "default": "0.5em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-pin-input-box-width",
+      "sass": "$pin-input-box-width",
+      "default": "var(--bulma-control-height)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-pin-input-caret-width",
+      "sass": "$pin-input-caret-width",
+      "default": "max(1px, 0.0625em)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-pin-input-caret-height",
+      "sass": "$pin-input-caret-height",
+      "default": "1.25em",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-pin-input-caret-color",
+      "sass": "$pin-input-caret-color",
+      "default": "currentColor",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-pin-input-caret-blink-duration",
+      "sass": "$pin-input-caret-blink-duration",
+      "default": "1s",
+      "scope": "root"
+    }
+  ],
+  "cssVarsFrom": "Input"
+}

package/data/components/Radio.json

@@ -26,7 +26,7 @@
       "code": "import { Radio, Radios } from '@allxsmith/bestax-bulma';\nimport { radioColors, radioSizes } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  return (\n    <>\n      <Radios label=\"Accent color\" name=\"accent\" defaultValue=\"primary\">\n        {radioColors.map(color => (\n          <Radio key={color} value={color} color={color}>\n            {color}\n          </Radio>\n        ))}\n      </Radios>\n      <Radios label=\"Size\" name=\"accent-size\" defaultValue=\"normal\">\n        {radioSizes.map(size => (\n          <Radio key={size} value={size} size={size}>\n            {size}\n          </Radio>\n        ))}\n      </Radios>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- Each `Radio` is rendered as a `<label>` wrapping an `<input type=\"radio\">` and the label text, for optimal accessibility.\n- Use the same `name` prop for a group of radios to ensure only one can be selected.",
+  "accessibility": "- Each `Radio` is rendered as a `<label>` wrapping an `<input type=\"radio\">` and the label text, for optimal accessibility.\n- Use the same `name` prop for a group of radios to ensure only one can be selected.\n- An unchecked radio shows only its ring, `--bulma-radio-border-color`. It defaults to `--bulma-text-weak`, which holds the 3:1 contrast WCAG asks of a control's boundary (non-text contrast) on Bulma's page and card surfaces in light and dark. Set a replacement on a class you pass through `className`, since `style` goes to the `<input>`, naming the label's class too (`.styled-radio.my-radio`) so load order can't undo it, and hold it to 3:1 as well.",
   "related": ["Field", "Radios", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-radio--mutually-exclusive",
   "summary": "The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.",
@@ -80,7 +80,7 @@
           "name": "className",
           "type": "string",
           "default": null,
-          "description": "Additional CSS classes to apply.",
+          "description": "Additional CSS classes, on the outer `<label>`. That's the element that declares the `--bulma-radio-*` variables, so a class is how to set one: `style` and the other input attributes go to the `<input>`. Name `.styled-radio` beside your class in the selector, so it beats the label's own declaration whatever order the stylesheets load in. A `color` prop declares the active color again on `.styled-radio.is-<color>`, which ties that selector, so leave `color` unset when a class sets it.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -125,7 +125,7 @@
     {
       "css": "--bulma-radio-border-color",
       "sass": "$radio-border-color",
-      "default": "var(--bulma-border)",
+      "default": "var(--bulma-text-weak)",
       "scope": "root"
     },
     {

package/data/components/Radios.json

@@ -207,7 +207,7 @@
           "name": "className",
           "type": "string",
           "default": null,
-          "description": "Additional CSS classes to apply.",
+          "description": "Additional CSS classes, on the outer `<label>`. That's the element that declares the `--bulma-radio-*` variables, so a class is how to set one: `style` and the other input attributes go to the `<input>`. Name `.styled-radio` beside your class in the selector, so it beats the label's own declaration whatever order the stylesheets load in. A `color` prop declares the active color again on `.styled-radio.is-<color>`, which ties that selector, so leave `color` unset when a class sets it.",
           "required": false,
           "inherited": false,
           "deprecated": false

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

@@ -37,7 +37,7 @@ instead of hand-writing markup.
 - Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
   escape-hatch variants of the convenience wrappers above them; see the Form docs.
 
-103 documented components. Generated from the API docs — every exported
+104 documented components. Generated from the API docs — every exported
 component is guaranteed to appear (the generator fails if one lacks an API page).
 
 ## Elements
@@ -123,6 +123,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [File](https://bestax.io/docs/api/form/file) — The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
 - [Input](https://bestax.io/docs/api/form/input) — The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static state, hover/focus/loading states…
 - [Numberinput](https://bestax.io/docs/api/form/numberinput) — The `Numberinput` component provides a number input with increment/decrement buttons.
+- [PinInput](https://bestax.io/docs/api/form/pininput) — The `PinInput` component is a field for a short code, such as a one-time code or a PIN, drawn as a row of boxes with one character in each.
 - [Radio](https://bestax.io/docs/api/form/radio) — The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.
 - [Radios](https://bestax.io/docs/api/form/radios) — The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.
 - [Rate](https://bestax.io/docs/api/form/rate) — The `Rate` component provides a star/icon-based rating system.

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

@@ -1,6 +1,6 @@
 ---
 name: bestax-form
-description: Build forms with @allxsmith/bestax-bulma — Field/Control/Label/Help composition, inputs, selects, checkboxes, radios, switches, and advanced controls (Autocomplete, Combobox, Slider, Numberinput, Rate, Taginput, File, date/time). There is no form/validation library; this skill shows the components and the validate-it-yourself error pattern. Use when building a form, wiring inputs to state, or showing validation/error state.
+description: Build forms with @allxsmith/bestax-bulma — Field/Control/Label/Help composition, inputs, selects, checkboxes, radios, switches, and advanced controls (Autocomplete, Combobox, Slider, Numberinput, PinInput, Rate, Taginput, File, date/time). There is no form/validation library; this skill shows the components and the validate-it-yourself error pattern. Use when building a form, wiring inputs to state, or showing validation/error state.
 license: MIT
 ---
 
@@ -97,6 +97,7 @@ All import from `@allxsmith/bestax-bulma`. Convenience components auto-wrap Fiel
 | `Combobox`                                              | A value from a list: `data` for a select, tags or groups, or parts.       |
 | `Slider`                                                | Range slider; single/dual thumbs, steps, tooltips, vertical.              |
 | `Numberinput`                                           | Numeric input with increment/decrement, min/max, step, stepper.           |
+| `PinInput`                                              | A one-time code or PIN as a row of boxes, all in one real input.          |
 | `Rate`                                                  | Star rating; `max`, `precision` (half/quarter), custom icons, `disabled`. |
 | `Taginput`                                              | Tag/chip input; suggestions, confirm keys, closable tags.                 |
 | `DateInput` / `TimeInput` / `DateTimeInput` (+ `*Base`) | Date / time / datetime pickers; month or year via `granularity`.          |
@@ -113,6 +114,19 @@ parts for a server search whose answer must show unfiltered, or a "Create" item:
 value and never sets the field's text, so you filter the items, keep the value and set the text in
 `onSelect`.
 
+**A verification code or a PIN is `PinInput`**, not a row of one-character `Input`s with focus
+moved by hand. It holds the code in one real input under a row of boxes, so a screen reader hears
+one field named by its `label`, and paste, autofill from a text message (`autoComplete` is
+`"one-time-code"`) and password managers work as they do on any input. Give it `length` (6 by
+default), `value`/`onChange` with the code as a string, and verify in `onComplete`, which fires
+once each time a change fills the last box. It takes digits unless `type="alphanumeric"`, turns a
+digit from any script (Arabic-Indic, Persian) into its ASCII digit, drops anything else typed or
+pasted, and `isMasked` shows dots for a PIN. A paste replaces the whole code. Its default `pattern`
+asks for the full length, so `required` rejects a partial code, not just an empty one. Say the
+length in the `label` ("Enter the 6-digit code"): the boxes are hidden from a screen reader, and the
+`message` isn't tied to the input, so it isn't read on focus. Separate help text needs
+`aria-describedby` on the PinInput.
+
 ## Common props
 
 Across the convenience inputs (`Input`, `Select`, `TextArea`, and similar):
@@ -139,10 +153,10 @@ spellings compile only where they historically existed: `isFullWidth` everywhere
 `Sidebar`, `fullwidth` on `Tabs` only, `fullWidth` on `Sidebar` only.
 
 **Labels.** Default to the convenience `label` prop, with `horizontal` for a side-by-side row.
-`Input`, `Select`, `TextArea`, `File`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`,
-`DateTimeInput`, `Autocomplete` and `Taginput` then render the `Field` and the label and wire
-`htmlFor`/`id`, to your `id` when you pass one (`<Input label="Email" id="email" horizontal />`); an
-explicit `labelProps={{ htmlFor }}` wins. `Combobox` renders its `Field` and label too, and wires
+`Input`, `Select`, `TextArea`, `File`, `Numberinput`, `PinInput`, `Slider`, `DateInput`,
+`TimeInput`, `DateTimeInput`, `Autocomplete` and `Taginput` then render the `Field` and the label
+and wire `htmlFor`/`id`, to your `id` when you pass one
+(`<Input label="Email" id="email" horizontal />`); an explicit `labelProps={{ htmlFor }}` wins. `Combobox` renders its `Field` and label too, and wires
 them to its field. Given `data`, its `id`, `aria-label` and `aria-labelledby` go to the field;
 built from parts, put them on `Combobox.Input`, since on the `Combobox` they land on its wrapper
 `div`. The group inputs (`Checkboxes`, `Radios`, `Rate`, `DateRangeInput`) name their
@@ -255,9 +269,9 @@ multi-field form plus the advanced inputs.
 ## Reuse the shipped components
 
 bestax ships the whole form surface — Input, Select, TextArea, Checkbox(es), Radio(s), Switch, File,
-Autocomplete, Combobox, Slider, Numberinput, Rate, Taginput, and the date/time inputs (see the
-inventory above). **Compose these; don't hand-roll raw `<input class="input">` markup or reinvent a
-control.** If you think a control is missing, check `bulma-ui/src/index.ts` and
+Autocomplete, Combobox, Slider, Numberinput, PinInput, Rate, Taginput, and the date/time inputs (see
+the inventory above). **Compose these; don't hand-roll raw `<input class="input">` markup or
+reinvent a control.** If you think a control is missing, check `bulma-ui/src/index.ts` and
 `docs/docs/api/form/` first — it's probably already there under a different name.
 
 ## What happens after submit

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

@@ -93,6 +93,7 @@ File input with `label`, `message`, color/size, and icon support.
 | `Combobox`     | Either way: `multiple`, `keepFirst`, `inline`, `size`, `position` (`'auto'` keeps the list in the viewport), `appendToBody` (in a `Modal`, point a `ConfigProvider`'s `portalContainer` inside the modal), `open`/`defaultOpen`/`onOpenChange`, `onSelect(value)` and the Field props. Given `data` (strings or `{ value, label?, disabled?, group? }`): `value`/`defaultValue`/`onChange` (`string \| null`, or `string[]` with `multiple`, shown as tags), `placeholder`, `name`, `empty`, `itemTemplate`, and `disabled`, `required`, `form`, `id`, `aria-label`/`aria-labelledby` for the field; leaving the field empty clears one value. From parts: `.Input` (an `Input`, with `size` and the Field props on the root), `.Menu`, `.List`, `.Item` (`value`, `checked`, `disabled`), `.Group` (`label`), `.Empty`; you filter, keep the value and set the field's text in `onSelect`. |
 | `Slider`       | `min`, `max`, `step`, single or dual thumb (`value` number or `[number, number]`), `tooltip` (`'auto' \| 'always' \| 'hidden'`), vertical orientation, `color`, `size`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `Numberinput`  | `value`/`onChange`, `min`, `max`, `step`, increment/decrement buttons, stepper variant, `color`, `size`, `isLoading` (set it here, not on a `Control` around it, whose spinner covers the right-hand button).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `PinInput`     | `length` (6), `value`/`defaultValue`/`onChange` (the code as a string), `onComplete(code)` once a change fills the last box, `type` (`'number'` or `'alphanumeric'`), `isMasked`, `name`, `color`, `size`, `isRounded`, `disabled` and the Field props. One input holds the code (`autoComplete="one-time-code"`); a paste replaces it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `Rate`         | `value`/`onChange`, `max`, `precision` (1 / 0.5 / 0.25), `customIcon` or `iconName`, `showScore`/`showText`/`texts`, `disabled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `Taginput`     | `value` (array)/`onChange`, autocomplete suggestions, configurable confirm keys, closable tags, `color`, `size`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 

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

@@ -287,6 +287,20 @@ const [range, setRange] = useState<[number, number]>([20, 80]);
 const [qty, setQty] = useState(1);
 <Numberinput value={qty} onChange={setQty} min={1} max={10} step={1} />;
 
+// PinInput: a one-time code or PIN, a box per character, all in one input.
+// onComplete fires once each time a change fills the last box.
+const [code, setCode] = useState('');
+const verify = (otp: string) => {
+  // Send it to your server, then show the result with color and message.
+};
+<PinInput
+  label="Enter the 6-digit code"
+  name="otp"
+  value={code}
+  onChange={setCode}
+  onComplete={verify}
+/>;
+
 // Rate
 const [stars, setStars] = useState(3);
 <Rate value={stars} onChange={setStars} max={5} />;

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

@@ -527,23 +527,23 @@ neither, so load what the app still needs once for the whole app, from its entry
   whose styles ship in `extras.css` and `bestax.css`, and stop loading the extension once nothing
   the app keeps uses its classes:
 
-  | Extension                                               | bestax                                                          |
-  | ------------------------------------------------------- | --------------------------------------------------------------- |
-  | `bulma-carousel`                                        | `Carousel`, with a `CarouselItem` for each slide                |
-  | `bulma-slider`                                          | `Slider`                                                        |
-  | `bulma-switch`                                          | `Switch`                                                        |
-  | `bulma-checkradio`                                      | `Checkbox` and `Radio`, which draw their own box                |
-  | `bulma-tooltip`, `@creativebulma/bulma-tooltip`         | `Tooltip`                                                       |
-  | `bulma-badge`, `@creativebulma/bulma-badge`             | `Badge`                                                         |
-  | `bulma-steps`                                           | `Steps`                                                         |
-  | `bulma-timeline`                                        | `Timeline`                                                      |
-  | `bulma-tagsinput`, `@creativebulma/bulma-tagsinput`     | `Taginput`                                                      |
-  | `bulma-calendar`                                        | `DateInput`, `TimeInput`, `DateTimeInput` and `DateRangeInput`  |
-  | `bulma-accordion`                                       | `Collapses`, with a `Collapse` for each item                    |
-  | `bulma-collapsible`, `@creativebulma/bulma-collapsible` | `Collapse` (`Collapses` for an accordion)                       |
-  | `bulma-pageloader`                                      | `Loading`, `isFullPage` for one over the whole page             |
-  | `bulma-quickview`                                       | `Sidebar`                                                       |
-  | `bulma-toast`                                           | `Toast`: `toast.show()` from code, with a `ToastContainer` once |
+  | Extension                                               | bestax                                                                                 |
+  | ------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+  | `bulma-carousel`                                        | `Carousel`, with a `CarouselItem` for each slide and `itemsToShow` for several in view |
+  | `bulma-slider`                                          | `Slider`                                                                               |
+  | `bulma-switch`                                          | `Switch`                                                                               |
+  | `bulma-checkradio`                                      | `Checkbox` and `Radio`, which draw their own box                                       |
+  | `bulma-tooltip`, `@creativebulma/bulma-tooltip`         | `Tooltip`                                                                              |
+  | `bulma-badge`, `@creativebulma/bulma-badge`             | `Badge`                                                                                |
+  | `bulma-steps`                                           | `Steps`                                                                                |
+  | `bulma-timeline`                                        | `Timeline`                                                                             |
+  | `bulma-tagsinput`, `@creativebulma/bulma-tagsinput`     | `Taginput`                                                                             |
+  | `bulma-calendar`                                        | `DateInput`, `TimeInput`, `DateTimeInput` and `DateRangeInput`                         |
+  | `bulma-accordion`                                       | `Collapses`, with a `Collapse` for each item                                           |
+  | `bulma-collapsible`, `@creativebulma/bulma-collapsible` | `Collapse` (`Collapses` for an accordion)                                              |
+  | `bulma-pageloader`                                      | `Loading`, `isFullPage` for one over the whole page                                    |
+  | `bulma-quickview`                                       | `Sidebar`                                                                              |
+  | `bulma-toast`                                           | `Toast`: `toast.show()` from code, with a `ToastContainer` once                        |
 
   `bulma-extensions`, the bundle, holds several of these: replace the ones in the table, and keep
   loading the bundle only for the rest. **bulma-social** has no bestax component: keep loading it,
@@ -626,8 +626,24 @@ read for the burger, a carousel and a theme toggle too, and its TODO names the f
   takes `hasDelete` and `onDelete`, `Tag` takes `onDelete` and `Message` takes `onClose`; render
   the element only while it's in state.
 - **`html-script:carousel`** drives a carousel. `Carousel` takes its slides as `CarouselItem`
-  children and renders its own arrows and indicators (`autoplay` for a timed one). Its styles ship
-  in bestax's `extras.css` and `bestax.css`, not in Bulma's stylesheet.
+  children and renders its own arrows and indicators (`autoplay` for a timed one). For several
+  slides in view, set `itemsToShow`, with a variant per viewport (`itemsToShowMobile`,
+  `itemsToShowTablet`, …), and `itemsToScroll`: bulma-carousel calls them `slidesToShow` and
+  `slidesToScroll`. bulma-carousel's `breakpoints` replace both at and below pixel widths of its
+  own (each entry's `changePoint`), and a page that sets none gets its defaults: 1 slide up to
+  480px, 2 up to 640px and 3 up to 768px, each scrolling as many, so `slidesToShow` applies only
+  from 769px up. Below that the defaults decide whatever `slidesToShow` says: a phone shows 1
+  slide, and a page that sets `slidesToShow: 1` shows 2 or 3 between a phone's width and a
+  tablet's. A page's own `breakpoints` replace the defaults, and an empty list turns them off.
+  `Carousel` has no pixel widths: `itemsToShowMobile` covers every width below 769px, where all
+  of those defaults sit, and the wider variants start at Bulma's breakpoints. So set
+  `itemsToShow` to the page's `slidesToShow`, and `itemsToShowMobile` to what the page shows on
+  a phone (1 under the defaults) where that differs; one `itemsToScroll` covers every width. To
+  keep the steps bulma-carousel takes between those widths, compute `itemsToShow` from the
+  window's width in your own code. `Carousel` loops unless `repeat={false}`, while
+  bulma-carousel stops at the ends unless `loop` (back to the start) or `infinite` (round
+  without a break) is set, so a carousel with neither takes `repeat={false}`. Its styles ship in
+  bestax's `extras.css` and `bestax.css`, not in Bulma's stylesheet.
 - **`html-script:theme`** switches Bulma's light and dark schemes. The toggle is `Theme`'s: it
   writes `data-theme` on `<html>` from its `colorMode` (`light`, `dark` or `system`), so keep the
   choice in state, save it in `localStorage`, and pass it. The first paint is `index.html`'s:
@@ -698,9 +714,51 @@ than `this`. A `<body onload>` becomes an effect.
 - **`html-url:relative`**: `img/logo.png` resolved against the page's folder, and in the app it
   resolves against the address the component renders at. The file is there beside the page, so
   copy it into the app's `public/` folder and point at it from the site root (`/img/logo.png`), or
-  import it. A link to another page beside this one should point at the route that page becomes.
-  Each relative URL in a `srcset` is its own entry, quoted as itself (`` `hero@2x.png` in `srcset` ``).
-  Several of these share one TODO line, and each is its own report entry.
+  import it. Each relative URL in a `srcset` is its own entry, quoted as itself
+  (`` `hero@2x.png` in `srcset` ``). Several of these share one TODO line, and each is its own
+  report entry.
+
+  A link to another page beside this one should point at the route that page becomes: the
+  router's, in an app with one. A site of static pages, with no router to join, can route on the
+  URL's hash in a small module of its own and install no router package, so every page still
+  opens from a static host as it is:
+
+  ```ts
+  // router.ts: the page the address's hash names (`#/about`).
+  import { useEffect, useState } from 'react';
+
+  export const routes = { home: '#/', about: '#/about' } as const;
+  export type Route = keyof typeof routes;
+
+  function routeOf(hash: string): Route {
+    const found = (Object.keys(routes) as Route[]).find(
+      route => routes[route] === hash
+    );
+    return found ?? 'home';
+  }
+
+  export function useRoute(): Route {
+    const [route, setRoute] = useState(() => routeOf(window.location.hash));
+    useEffect(() => {
+      const onHashChange = () => {
+        const hash = window.location.hash;
+        // Only `#/…` (or no hash) names a page; leave an in-page anchor such
+        // as `#features`, or a placeholder `#`, to the browser.
+        if (hash !== '' && !hash.startsWith('#/')) return;
+        setRoute(routeOf(hash));
+        window.scrollTo(0, 0); // a new page starts at the top, as it did
+      };
+      window.addEventListener('hashchange', onHashChange);
+      return () => window.removeEventListener('hashchange', onHashChange);
+    }, []);
+    return route;
+  }
+  ```
+
+  The app renders the page the route names, from the modules the pages became
+  (`const Page = { home: HomePage, about: AboutPage }[useRoute()]`), with the parts the pages
+  share around it, and a link to `about.html` takes `href={routes.about}`.
+
 - **`html-url:missing`**: a relative URL whose target isn't beside the page, read the way the
   browser read it, so it was a dead link or a missing file already. Point it somewhere real, or
   drop it.

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

@@ -63,6 +63,7 @@ Stock Bulma examples:
 @use 'bulma/sass/elements/title'; // Title, SubTitle
 @use 'bulma/sass/form/input-textarea'; // Input, TextArea
 @use 'bulma/sass/form/select'; // Select
+@use 'bulma/sass/form/tools'; // Field, Control
 @use 'bulma/sass/components/card'; // Card
 @use 'bulma/sass/components/modal'; // Modal
 @use 'bulma/sass/components/navbar'; // Navbar
@@ -83,8 +84,9 @@ is **more complete** than the docs page's Option C example, which omits several)
 `emptystate`, `timeline`, `treeview`
 
 **Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
-`checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `combobox`,
-`taginput`, `picker-popover`, `dateinput`, `timeinput`, `datetimeinput`, `daterangeinput`, `file`
+`checkbox`, `radio`, `switch`, `slider`, `numberinput`, `pininput`, `rate`, `autocomplete`,
+`combobox`, `taginput`, `picker-popover`, `dateinput`, `timeinput`, `datetimeinput`,
+`daterangeinput`, `file`
 
 **Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `kbd`, `linkbutton`, `loader`,
 `notification`, `progress`, `skeleton`
@@ -128,6 +130,8 @@ Notes:
 - `DateInput`/`TimeInput`/`DateTimeInput` also need `picker-popover`.
 - `DateRangeInput` needs `daterangeinput` for its field and `dateinput` for its calendar, and
   `picker-popover` too.
+- `PinInput`'s boxes are Bulma inputs, so an app using it needs `bulma/sass/form/input-textarea`
+  next to `scss/form/pininput`, and `bulma/sass/form/tools` for the label and help text around it.
 - `Popover.Close` renders a Bulma button, so an app using it needs `bulma/sass/elements/button`
   next to `scss/components/popover`.
 - `ContextMenu`'s menu is Bulma's dropdown markup, so an app using it needs

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

@@ -248,6 +248,9 @@ lone class or the `style` prop cannot outrank:
   its own declaration — target the declaring element in your CSS:
   `.tooltip-content { --bulma-tooltip-background: … }`.
 
+The `style` prop also misses on Checkbox and Radio, which put it on their hidden `<input>`; set
+their variables through `className` (see their entries below).
+
 ### Avatar / Avatars / Badge
 
 | Variable                                                          | Default                          |
@@ -327,6 +330,17 @@ rather than with these variables.
 `--bulma-checkbox-label-gap`, `--bulma-checkbox-radius`, `--bulma-checkbox-size`,
 `--bulma-checkbox-transition-duration`
 
+The check mark and the mixed dash are both `--bulma-checkbox-check-color`, on the
+`--bulma-checkbox-active-color` (checked) or `--bulma-checkbox-indeterminate-color` (mixed) fill,
+so a dark fill needs a light check color. Set these on a class you pass through `className`, not
+with `style`: Checkbox puts `style` and its other attributes on the hidden `<input>`, not on the
+`.styled-checkbox` label that declares them. Name both classes in the selector
+(`.styled-checkbox.my-box`, mind the class prefix) so it wins whatever order the stylesheets load
+in. A `color` prop declares both fills again on `.styled-checkbox.is-<color>`, which ties with
+that selector, so leave `color` unset when a class sets the fill. The unchecked border, `--bulma-checkbox-border-color`, defaults to `text-weak` so
+the box holds the 3:1 WCAG asks of a control's boundary; keep a replacement at 3:1 against what
+the form sits on.
+
 ### Collapse
 
 `--bulma-collapse-border-color`, `--bulma-collapse-group-gap`, `--bulma-collapse-header-weight`,
@@ -498,6 +512,16 @@ sizes. Bulma's own `--bulma-notification-*` variables set the rest.
 `--bulma-numberinput-stepper-button-hover-bg`, `--bulma-numberinput-stepper-button-hover-color`,
 `--bulma-numberinput-stepper-width`
 
+### PinInput
+
+Declared on the row, `.pin-input`. Each box is a Bulma `.input`, so Bulma's `--bulma-input-*`
+variables color it, and a box's size comes from its size class. The gap and the caret's size are
+in `em`, so they follow the size of the boxes, and the caret is `currentColor`, the box's text.
+
+`--bulma-pin-input-box-width`, `--bulma-pin-input-caret-blink-duration`,
+`--bulma-pin-input-caret-color`, `--bulma-pin-input-caret-height`, `--bulma-pin-input-caret-width`,
+`--bulma-pin-input-gap`
+
 ### Picker popover (DateInput / TimeInput / DateTimeInput / DateRangeInput)
 
 `--bulma-picker-popover-animation-duration`, `--bulma-picker-popover-background`,
@@ -525,6 +549,12 @@ them. See the constituent-element exception above.
 `--bulma-radio-border-width`, `--bulma-radio-dot-color`, `--bulma-radio-focus-shadow-size`,
 `--bulma-radio-label-gap`, `--bulma-radio-size`, `--bulma-radio-transition-duration`
 
+As with Checkbox, set these on a class you pass through `className`, with both classes in the
+selector (`.styled-radio.my-radio`): `style` goes to the hidden `<input>`. A `color` prop
+declares `--bulma-radio-active-color` again on `.styled-radio.is-<color>`, which ties that
+selector, so leave `color` unset when a class sets it. The unchecked ring, `--bulma-radio-border-color`, defaults to `text-weak` for the same 3:1 boundary
+contrast.
+
 ### Rate
 
 `--bulma-rate-color-active`, `--bulma-rate-color-hover`, `--bulma-rate-color-inactive`,

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

@@ -73,6 +73,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Loading`          | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | spinner color; default light grey                                                                                                                   |
 | `Navbar`           | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | —                                                                                                                                                   |
 | `Numberinput`      | `primary \| link \| info \| success \| warning \| danger \| light \| dark`                                                                                                | `small \| medium \| large`                                                | also `inputColor` (the 6) for the inner input                                                                                                       |
+| `PinInput`         | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | each box is a Bulma `.input`, so `--bulma-input-*` theme it; also `isRounded`; `--bulma-pin-input-*`                                                |
 | `Pagination`       | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | **entire `color` prop deprecated** (no CSS ships; dev-warn; removal next major)                                                                     |
 | `Panel`            | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | —                                                                                                                                                   |
 | `Progress`         | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️)                                             | `small \| medium \| large`                                                | —                                                                                                                                                   |

package/data/skills.json

@@ -10,7 +10,7 @@
         {
           "id": "component-catalog",
           "file": "references/component-catalog.md",
-          "bytes": 20605
+          "bytes": 20804
         },
         {
           "id": "library-contributor",
@@ -25,12 +25,12 @@
     },
     {
       "name": "bestax-form",
-      "description": "Build forms with @allxsmith/bestax-bulma — Field/Control/Label/Help composition, inputs, selects, checkboxes, radios, switches, and advanced controls (Autocomplete, Combobox, Slider, Numberinput, Rate, Taginput, File, date/time). There is no form/validation library; this skill shows the components and the validate-it-yourself error pattern. Use when building a form, wiring inputs to state, or showing validation/error state.",
+      "description": "Build forms with @allxsmith/bestax-bulma — Field/Control/Label/Help composition, inputs, selects, checkboxes, radios, switches, and advanced controls (Autocomplete, Combobox, Slider, Numberinput, PinInput, Rate, Taginput, File, date/time). There is no form/validation library; this skill shows the components and the validate-it-yourself error pattern. Use when building a form, wiring inputs to state, or showing validation/error state.",
       "promptName": "form",
       "dir": "bestax-form",
       "references": [
-        { "id": "api", "file": "references/api.md", "bytes": 18434 },
-        { "id": "patterns", "file": "references/patterns.md", "bytes": 9427 }
+        { "id": "api", "file": "references/api.md", "bytes": 19315 },
+        { "id": "patterns", "file": "references/patterns.md", "bytes": 9835 }
       ],
       "examples": []
     },
@@ -113,7 +113,7 @@
         {
           "id": "bulma-classes-unmappables",
           "file": "references/bulma-classes/unmappables.md",
-          "bytes": 53519
+          "bytes": 56988
         },
         {
           "id": "css-migration",
@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 12075
+          "bytes": 12331
         }
       ],
       "examples": []
@@ -176,12 +176,12 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 46287
+          "bytes": 48297
         },
         {
           "id": "themeable-components",
           "file": "references/themeable-components.md",
-          "bytes": 24680
+          "bytes": 25101
         }
       ],
       "examples": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.18.1",
+  "version": "1.18.3",
   "mcpName": "io.github.allxsmith/bestax-mcp",
   "description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
   "type": "module",
@@ -40,16 +40,16 @@
     "url": "https://github.com/allxsmith/bestax/issues"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.31.0",
-    "zod": "^4.4.3",
-    "@allxsmith/bestax-bulma": "^5.42.0"
+    "@modelcontextprotocol/sdk": "^1.32.1",
+    "zod": "^4.6.7",
+    "@allxsmith/bestax-bulma": "^5.43.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^26.6.4",
+    "@types/node": "^26.6.5",
     "jest": "^30.2.0",
-    "ts-jest": "^29.4.14",
+    "ts-jest": "^29.4.15",
     "typescript": "^6.0.3"
   },
   "publishConfig": {