bestax-mcp 1.18.0 → 1.18.2

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.41.0"
+    "version": "5.42.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -254,8 +254,8 @@
       "slug": "components/carousel",
       "import": "import { Carousel, CarouselItem } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 23,
-      "exampleCount": 10
+      "propCount": 30,
+      "exampleCount": 13
     },
     {
       "name": "Cell",
@@ -277,7 +277,7 @@
       "import": "import { Checkboxes, Checkbox } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 8,
-      "exampleCount": 6
+      "exampleCount": 7
     },
     {
       "name": "Checkboxes",
@@ -1422,6 +1422,14 @@
     "--bulma-carousel-indicator-line-width-mobile": ["Carousel"],
     "--bulma-carousel-indicator-size": ["Carousel"],
     "--bulma-carousel-indicator-size-mobile": ["Carousel"],
+    "--bulma-carousel-item-gap": ["Carousel"],
+    "--bulma-carousel-items-in-view": ["Carousel"],
+    "--bulma-carousel-items-to-show": ["Carousel"],
+    "--bulma-carousel-items-to-show-desktop": ["Carousel"],
+    "--bulma-carousel-items-to-show-fullhd": ["Carousel"],
+    "--bulma-carousel-items-to-show-mobile": ["Carousel"],
+    "--bulma-carousel-items-to-show-tablet": ["Carousel"],
+    "--bulma-carousel-items-to-show-widescreen": ["Carousel"],
     "--bulma-carousel-overlay-arrow-background": ["Carousel"],
     "--bulma-carousel-overlay-arrow-background-hover": ["Carousel"],
     "--bulma-carousel-overlay-arrow-color": ["Carousel"],

package/data/components/Carousel.json

@@ -9,6 +9,18 @@
       "title": "Basic Carousel",
       "code": "<Carousel indicatorStyle=\"dots\">\n  <CarouselItem>\n    <Hero color=\"primary\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Slide 1</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"success\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Slide 2</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"danger\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Slide 3</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n</Carousel>"
     },
+    {
+      "title": "Several Items in View",
+      "code": "<Carousel itemsToShow={1} itemsToShowTablet={2} itemsToShowDesktop={3}>\n  {[\n    'Garden Room',\n    'Harbor Suite',\n    'Loft',\n    'Courtyard Twin',\n    'Terrace Room',\n    'Family Suite',\n  ].map(room => (\n    <CarouselItem key={room}>\n      <Card m=\"2\">\n        <Card.Content>\n          <Title as=\"p\" size=\"5\">\n            {room}\n          </Title>\n          <SubTitle as=\"p\" size=\"6\">\n            Sleeps two\n          </SubTitle>\n        </Card.Content>\n      </Card>\n    </CarouselItem>\n  ))}\n</Carousel>"
+    },
+    {
+      "title": "Several Items in View",
+      "code": "<Carousel itemsToShow={3} itemsToScroll={3} repeat={false}>\n  {[1, 2, 3, 4, 5, 6, 7].map(n => (\n    <CarouselItem key={n}>\n      <Box m=\"2\" textAlign=\"centered\">\n        Item {n}\n      </Box>\n    </CarouselItem>\n  ))}\n</Carousel>"
+    },
+    {
+      "title": "Several Items in View",
+      "code": "<Carousel className=\"room-gallery\" itemsToShow={3}>\n  {/* items */}\n</Carousel>"
+    },
     {
       "title": "Auto-playing Carousel",
       "code": "<Carousel autoplay interval={3000}>\n  <CarouselItem>\n    <Hero color=\"info\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Info</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"warning\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Warning</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"success\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Success</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n</Carousel>"
@@ -46,7 +58,7 @@
       "code": "<Carousel repeat={false}>\n  <CarouselItem>\n    <Hero color=\"danger\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Paragraph textColor=\"white\">First (no previous)</Paragraph>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"warning\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Paragraph>Middle slide</Paragraph>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"success\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Paragraph textColor=\"white\">Last (no next)</Paragraph>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n</Carousel>"
     }
   ],
-  "accessibility": "- Uses `role=\"region\"` with `aria-roledescription=\"carousel\"`\n- Navigation arrows have `aria-label` for screen readers\n- Indicators use `role=\"tablist\"` and `role=\"tab\"` semantics\n- Keyboard navigation with arrow keys when focused\n- Previous/Next buttons are properly disabled at boundaries when not repeating",
+  "accessibility": "- Uses `role=\"region\"` with `aria-roledescription=\"carousel\"`\n- Each item is a `group` with `aria-roledescription=\"slide\"`, named for its place, such as \"2 of 6\". An item's own `aria-label` or `aria-labelledby` takes the place of that name\n- Items out of view are `aria-hidden` and `inert`, so screen readers skip them and nothing in them takes focus. With several in view, every item in view is exposed. The copies a loop adds at each end of the track follow the same rule, so where the view runs past the last item, the copies on screen are the ones exposed\n- The track is a polite live region, so what comes into view is announced, except while autoplay is moving it (`aria-live=\"off\"`)\n- Autoplay waits while the pointer is over the carousel (with `pauseOnHover`) and while focus is inside one of its items, so an item being read or used never moves out of view\n- When something else takes the item holding focus out of view (a swipe, a change of width that changes the count, a new controlled `value`, or the item's removal), focus moves to the first item in view rather than dropping to the page\n- Navigation arrows have `aria-label` for screen readers\n- Indicators use `role=\"tablist\"` and `role=\"tab\"` semantics, one for each position a step can land on\n- The Left and Right arrow keys move the carousel while focus is on its arrows or indicators. Inside an item they're left to the item's content, such as a field or a slider\n- Previous/Next buttons are properly disabled at boundaries when not repeating",
   "related": ["Modal", "Tabs"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-carousel",
   "summary": "The `Carousel` component provides an image/content slider with navigation arrows and indicators.",
@@ -63,7 +75,7 @@
           "name": "value",
           "type": "number",
           "default": "0",
-          "description": "Current active slide index (controlled).",
+          "description": "Index of the first item in view (controlled); with one item in view, the slide shown. A value between two of the positions a step lands on (see `itemsToScroll`) is shown as given, and the next step goes on from it. With `repeat`, a value past either end wraps around; without it, one that would leave empty space after the last item shows the last full view. Neither correction calls `onChange`. A value that takes the item holding focus out of view moves focus to the first item in view, as a swipe or a change of width does.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -72,7 +84,7 @@
           "name": "autoplay",
           "type": "boolean",
           "default": "false",
-          "description": "Enable auto-play.",
+          "description": "Enable auto-play: one step (`itemsToScroll` items) per `interval`. Without `repeat` it stops at the last position. It waits while the pointer is over the carousel (see `pauseOnHover`) and while focus is inside one of its items, so an item being read or used never moves out of view.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -99,7 +111,7 @@
           "name": "repeat",
           "type": "boolean",
           "default": "true",
-          "description": "Loop back to first slide after last. Default: true.",
+          "description": "Loop back to the first position after the last. Default: true. With several items in view, the view runs on past the last item into the first ones, so it can show the end and the start side by side. Only loops when some item is out of view.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -108,7 +120,70 @@
           "name": "hasDrag",
           "type": "boolean",
           "default": "true",
-          "description": "Enable drag/swipe navigation. Default: true.",
+          "description": "Enable drag/swipe navigation. Default: true. A swipe moves one step, however far it travels.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToShow",
+          "type": "number",
+          "default": "1",
+          "description": "How many items are in view at once, at every width no `itemsToShow<Viewport>` prop covers. Those props read the way a `Column`'s `size<Viewport>` props do: `itemsToShowMobile` applies below Bulma's tablet breakpoint, each of the others from its own breakpoint up, and where several apply the widest one wins. A whole number, rounded down and at least 1. The widths come from the stylesheet, so they are right on the first paint; the arrows, indicators and steps use the count for the window's width once the page has hydrated, and this one until then. With this many children or fewer, every item keeps its share of the width, nothing moves, and no arrows or indicators render.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToShowMobile",
+          "type": "number",
+          "default": null,
+          "description": "Items in view at any width below Bulma's tablet breakpoint (769px), fractional ones included. Falls back to `itemsToShow`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToShowTablet",
+          "type": "number",
+          "default": null,
+          "description": "Items in view from Bulma's tablet breakpoint (769px) up, until a wider viewport's prop takes over. Falls back to `itemsToShow`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToShowDesktop",
+          "type": "number",
+          "default": null,
+          "description": "Items in view from Bulma's desktop breakpoint (1024px) up, until a wider viewport's prop takes over. Falls back to `itemsToShowTablet`, then `itemsToShow`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToShowWidescreen",
+          "type": "number",
+          "default": null,
+          "description": "Items in view from Bulma's widescreen breakpoint (1216px) up, until `itemsToShowFullhd` takes over. Falls back to `itemsToShowDesktop`, and on down to `itemsToShow`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToShowFullhd",
+          "type": "number",
+          "default": null,
+          "description": "Items in view from Bulma's fullhd breakpoint (1408px) up. Falls back to `itemsToShowWidescreen`, and on down to `itemsToShow`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "itemsToScroll",
+          "type": "number",
+          "default": "1",
+          "description": "How many items one step moves, for an arrow, an arrow key, a swipe or an autoplay tick. A whole number, capped at the count in view so a step never skips an item. Without `repeat`, the last step stops at the last full view, so it can be shorter; with `repeat`, the step after the last position goes on to the first one. The indicators mark these positions, one per step rather than one per item. When the count in view changes with the window's width, the first item in view stays in view.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -135,7 +210,7 @@
           "name": "indicator",
           "type": "boolean",
           "default": "true",
-          "description": "Show slide indicators. Default: true. They render `type=\"button\"`, so a carousel inside a form is not submitted by picking a slide.",
+          "description": "Show slide indicators. Default: true. There is one for each position a step can land on (see `itemsToScroll`). They render `type=\"button\"`, so a carousel inside a form is not submitted by picking a slide.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -252,7 +327,7 @@
           "name": "onChange",
           "type": "(value: number) => void",
           "default": null,
-          "description": "Callback when slide changes.",
+          "description": "Called with the index of the first item in view when an arrow, an arrow key, an indicator, a swipe or autoplay moves the carousel.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -299,7 +374,7 @@
           "name": "active",
           "type": "boolean",
           "default": "false",
-          "description": "Whether this item is active (set automatically).",
+          "description": "Whether this item is in view. `Carousel` sets it on every item in view, so with several in view several are active.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -554,6 +629,54 @@
       "sass": "$carousel-fade-duration",
       "default": "0.5s",
       "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-item-gap",
+      "sass": "$carousel-item-gap",
+      "default": "0px",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-to-show",
+      "sass": null,
+      "default": "1",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-to-show-mobile",
+      "sass": null,
+      "default": "var(--bulma-carousel-items-to-show)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-to-show-tablet",
+      "sass": null,
+      "default": "var(--bulma-carousel-items-to-show)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-to-show-desktop",
+      "sass": null,
+      "default": "var(--bulma-carousel-items-to-show-tablet)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-to-show-widescreen",
+      "sass": null,
+      "default": "var(--bulma-carousel-items-to-show-desktop)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-to-show-fullhd",
+      "sass": null,
+      "default": "var(--bulma-carousel-items-to-show-widescreen)",
+      "scope": "root"
+    },
+    {
+      "css": "--bulma-carousel-items-in-view",
+      "sass": null,
+      "default": "var(--bulma-carousel-items-to-show-mobile)",
+      "scope": "root"
     }
   ]
 }

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/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-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                          |
@@ -303,12 +306,22 @@ own-selector override rule applies.
 `--bulma-carousel-indicator-line-height`, `--bulma-carousel-indicator-line-height-mobile`,
 `--bulma-carousel-indicator-line-radius`, `--bulma-carousel-indicator-line-width`,
 `--bulma-carousel-indicator-line-width-mobile`, `--bulma-carousel-indicator-size`,
-`--bulma-carousel-indicator-size-mobile`, `--bulma-carousel-overlay-arrow-background`,
+`--bulma-carousel-indicator-size-mobile`, `--bulma-carousel-item-gap`,
+`--bulma-carousel-items-in-view`, `--bulma-carousel-items-to-show`,
+`--bulma-carousel-items-to-show-desktop`, `--bulma-carousel-items-to-show-fullhd`,
+`--bulma-carousel-items-to-show-mobile`, `--bulma-carousel-items-to-show-tablet`,
+`--bulma-carousel-items-to-show-widescreen`, `--bulma-carousel-overlay-arrow-background`,
 `--bulma-carousel-overlay-arrow-background-hover`, `--bulma-carousel-overlay-arrow-color`,
 `--bulma-carousel-overlay-indicator-background`,
 `--bulma-carousel-overlay-indicator-background-active`,
 `--bulma-carousel-overlay-indicator-background-hover`, `--bulma-carousel-transition-duration`
 
+`--bulma-carousel-item-gap` (a length, default `0px`) is the space between items in view; set it
+on the carousel's own element through a class. The `--bulma-carousel-items-to-show*` variables
+come from the `itemsToShow*` props, and `--bulma-carousel-items-in-view` is the one of them the
+viewport picks. The props also decide how far a step moves, so set the count with the props
+rather than with these variables.
+
 ### Checkbox
 
 `--bulma-checkbox-active-color`, `--bulma-checkbox-background`, `--bulma-checkbox-border-color`,
@@ -317,6 +330,17 @@ own-selector override rule applies.
 `--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`,
@@ -515,6 +539,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.json

@@ -176,7 +176,7 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 45565
+          "bytes": 47797
         },
         {
           "id": "themeable-components",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "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.41.0"
+    "@allxsmith/bestax-bulma": "^5.42.1"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",