bestax-mcp 1.18.5 → 1.18.7

package/data/bulma-classes.json

@@ -3197,7 +3197,7 @@
       "textColor": null,
       "bgColor": null,
       "part": false,
-      "why": "bestax `Checkbox` renders its own styled markup, not Bulma's",
+      "why": "bestax `Checkbox` renders its own styled markup, not Bulma's. Write it by hand in place of the element that carries `.checkbox`, Bulma's `<label>` or a bare `<input>`, with the `<input>`'s attributes on it: `id`, `name`, `aria-label` and the rest reach its `<input>`, and a `<label>`'s text is its children. Drive it with `checked` and `onChange`, and add `indeterminate` for a select-all box. Its `className` goes on its `<label>`, which declares the `--bulma-checkbox-*` variables, so set the page's colors with those in a rule for your class beside `.styled-checkbox`. Where the page put `.checkbox` on a bare `<input>`, drop its own rules for that box, since bestax draws its own and `.checkbox` is on its `<label>` now",
       "modifiers": {},
       "omits": {},
       "wrapsChildren": null,
@@ -3658,7 +3658,10 @@
         "is-medium": { "writes": [{ "prop": "size", "value": "medium" }] },
         "is-large": { "writes": [{ "prop": "size", "value": "large" }] }
       },
-      "omits": {},
+      "omits": {
+        "is-left": "Bulma places it inside a `.control` with `has-icons-left`, and bestax `Control` renders that icon itself from `iconLeft` (`iconLeft={{ library: \"fa\", name: \"envelope\", size: \"small\" }}`), after its children, so a hidden `.icon` there can go as that prop; on `Icon` the class stays in `className`, which renders the same",
+        "is-right": "Bulma places it inside a `.control` with `has-icons-right`, and bestax `Control` renders that icon itself from `iconRight` (`iconRight={{ library: \"fa\", name: \"envelope\", size: \"small\" }}`), after its children, so a hidden `.icon` there can go as that prop; on `Icon` the class stays in `className`, which renders the same"
+      },
       "wrapsChildren": null,
       "folds": null,
       "absorbs": null,
@@ -13062,5 +13065,69 @@
     "theme-dark",
     "theme-light",
     "title"
-  ]
+  ],
+  "elsewhere": [
+    {
+      "why": "a Font Awesome class: Font Awesome's own stylesheet styles it, not Bulma's, so keep loading Font Awesome (the bestax-migrate skill's `html-asset:font-awesome` says how). bestax `Icon` writes these classes from its props, on the <i> it renders inside a `.icon`",
+      "match": "^(?:fa|fa[srbldt]|fa-[a-z0-9]+(?:-[a-z0-9]+)*|svg-inline--fa)$",
+      "glyph": true
+    },
+    {
+      "why": "a Material Design Icons class: its own stylesheet styles it, not Bulma's, so keep loading it. bestax `Icon` writes these classes from its props, with `library=\"mdi\"`, on the <i> it renders inside a `.icon`",
+      "match": "^mdi(?:-[a-z0-9]+)*$",
+      "glyph": true
+    },
+    {
+      "why": "a bulma-social class, a Bulma extension's brand color for Bulma's `.button`, which bestax's `Button` renders: keep loading bulma-social and keep the class on `Button` in `className`, since bestax has no component for it (the bestax-migrate skill's `html-asset:bulma-extension` has the recipe)",
+      "match": "^is-(?:apple|bitbucket|discord|dropbox|facebook|flickr|foursquare|github|gitlab|instagram|linkedin|microsoft|odnoklassniki|openid|pinterest|reddit|slack|soundcloud|tumblr|twitch|twitter|vimeo|vk|x|yahoo|youtube|animated)$",
+      "glyph": false
+    },
+    {
+      "why": "a bulma-carousel class, a Bulma extension bestax's `Carousel` does the job of (the bestax-migrate skill's `html-asset:bulma-extension` says how). Once the page stops loading bulma-carousel nothing styles it: `is-covered`'s `object-fit: cover` on a slide's image goes in the app's own CSS",
+      "match": "^(?:has-carousel|hero-carousel|is-background|is-covered|slider-(?:container|item|navigation-next|navigation-previous|page|pagination)|video-container)$",
+      "glyph": false
+    }
+  ],
+  "ownClasses": {
+    "autocomplete": "Autocomplete",
+    "avatar": "Avatar",
+    "avatars": "Avatars",
+    "badge": "Badge",
+    "carousel": "Carousel",
+    "styled-checkbox": "Checkbox",
+    "collapse": "Collapse",
+    "collapses": "Collapses",
+    "combobox": "Combobox",
+    "context-menu": "ContextMenu",
+    "daterangeinput": "DateRangeInput",
+    "dialog": "Dialog",
+    "empty-state": "EmptyState",
+    "hover-card": "HoverCard",
+    "kbd": "Kbd",
+    "link-button": "LinkButton",
+    "loading": "Loading",
+    "numberinput": "Numberinput",
+    "pin-input": "PinInput",
+    "popover": "Popover",
+    "styled-radio": "Radio",
+    "rate": "Rate",
+    "reveal": "Reveal",
+    "sidebar": "Sidebar",
+    "slider": "Slider",
+    "steps": "Steps",
+    "switch": "Switch",
+    "taginput": "Taginput",
+    "timeline": "Timeline",
+    "toast": "Toast",
+    "tooltip": "Tooltip",
+    "tree-view": "TreeView"
+  },
+  "byHand": {
+    "thead": { "target": "Table.Thead", "props": [] },
+    "tbody": { "target": "Table.Tbody", "props": [] },
+    "tfoot": { "target": "Table.Tfoot", "props": [] },
+    "tr": { "target": "Table.Tr", "props": ["isSelected", "color"] },
+    "th": { "target": "Table.Th", "props": ["isAligned", "width", "color"] },
+    "td": { "target": "Table.Td", "props": ["isAligned", "color"] }
+  }
 }

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.44.0"
+    "version": "5.45.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -255,8 +255,8 @@
       "slug": "components/carousel",
       "import": "import { Carousel, CarouselItem } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 30,
-      "exampleCount": 13
+      "propCount": 31,
+      "exampleCount": 16
     },
     {
       "name": "Cell",
@@ -278,7 +278,7 @@
       "import": "import { Checkboxes, Checkbox } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 8,
-      "exampleCount": 7
+      "exampleCount": 8
     },
     {
       "name": "Checkboxes",
@@ -608,7 +608,7 @@
       "import": "import { Icon } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 15,
-      "exampleCount": 12
+      "exampleCount": 14
     },
     {
       "name": "IconText",
@@ -905,7 +905,7 @@
       "import": "import { Radio, Radios, Control } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 7,
-      "exampleCount": 5
+      "exampleCount": 6
     },
     {
       "name": "Radios",

package/data/components/Autocomplete.json

@@ -42,15 +42,15 @@
       "code": "function example() {\n  const fruits = [\n    'Apple',\n    'Apricot',\n    'Avocado',\n    'Banana',\n    'Blackberry',\n    'Blueberry',\n  ];\n\n  return (\n    <Autocomplete data={fruits} placeholder=\"Type to filter...\" keepFirst />\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<Autocomplete\n  label=\"Fruit\"\n  data={['Apple', 'Banana', 'Cherry']}\n  placeholder=\"Search fruit...\"\n/>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Fruit\"\n      labelProps={{ htmlFor: 'fruit-field', id: 'fruit-field-label' }}\n    >\n      <Field.Body>\n        <Field>\n          <Autocomplete\n            id=\"fruit-field\"\n            data={['Apple', 'Banana', 'Cherry']}\n            placeholder=\"Search fruit...\"\n          />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field and Control Wrappers",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Fruit\"\n      labelProps={{\n        htmlFor: 'fruit-field-control',\n        id: 'fruit-field-control-label',\n      }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"search\">\n            <Autocomplete\n              id=\"fruit-field-control\"\n              data={['Apple', 'Banana', 'Cherry']}\n              placeholder=\"Search fruit...\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],

package/data/components/Card.json

@@ -42,23 +42,23 @@
       "code": "<Card\n  header=\"Upgrade to Pro\"\n  headerIcon={\n    <button className=\"card-header-icon\">\n      <Icon library=\"fa\" name=\"bolt\" textColor=\"warning\" ariaLabel=\"Pro\" />\n    </button>\n  }\n  image=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80\"\n  imageAlt=\"Dashboard analytics\"\n  m=\"3\"\n  textAlign=\"centered\"\n  hasShadow\n  footer={[\n    <Button key=\"upgrade\" color=\"success\">\n      Upgrade Now\n    </Button>,\n    <Button key=\"learn\" color=\"info\" isOutlined>\n      Learn More\n    </Button>,\n  ]}\n>\n  Unlock advanced analytics, priority support, and unlimited exports for your\n  team.\n</Card>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Complete Card with Compound Components",
       "code": "import { Icon, Image } from '@allxsmith/bestax-bulma';\n\n<Card>\n  <Card.Header>\n    <Card.Header.Title>Compound Component Card</Card.Header.Title>\n    <Card.Header.Icon aria-label=\"more options\">\n      <Icon name=\"angle-down\" variant=\"solid\" ariaLabel=\"expand\" />\n    </Card.Header.Icon>\n  </Card.Header>\n  <Card.Image>\n    <Image\n      src=\"https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80\"\n      alt=\"Beautiful forest\"\n      size=\"4by3\"\n    />\n  </Card.Image>\n  <Card.Content>\n    <Content>\n      This card is built using compound components for maximum flexibility.\n    </Content>\n  </Card.Content>\n  <Card.Footer>\n    <Card.FooterItem>\n      <Button color=\"primary\">Save</Button>\n    </Card.FooterItem>\n    <Card.FooterItem>\n      <Button>Cancel</Button>\n    </Card.FooterItem>\n  </Card.Footer>\n</Card>;"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Minimal Compound Card",
       "code": "<Card>\n  <Card.Header>\n    <Card.Header.Title>Simple Header</Card.Header.Title>\n  </Card.Header>\n  <Card.Content>\n    <Paragraph>Just some minimal content using compound components.</Paragraph>\n  </Card.Content>\n</Card>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Card Header with Icon",
       "code": "function ExpandableCard() {\n  const [isOpen, setIsOpen] = React.useState(true);\n\n  return (\n    <Card>\n      <Card.Header>\n        <Card.Header.Title>Expandable Card</Card.Header.Title>\n        <Card.Header.Icon\n          aria-label={isOpen ? 'collapse' : 'expand'}\n          onClick={() => setIsOpen(!isOpen)}\n        >\n          <Icon\n            library=\"fa\"\n            name={isOpen ? 'angle-up' : 'angle-down'}\n            ariaLabel={isOpen ? 'collapse' : 'expand'}\n          />\n        </Card.Header.Icon>\n      </Card.Header>\n      {isOpen && (\n        <Card.Content>\n          This card uses React state to toggle content visibility. Click the\n          icon in the header to expand or collapse this section.\n        </Card.Content>\n      )}\n    </Card>\n  );\n}"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Mixed Approach",
       "code": "<Card header=\"Prop-based header\" textColor=\"primary\" m=\"3\">\n  <Card.Content bgColor=\"light\">\n    <Paragraph>\n      You can mix prop-based and compound component approaches!\n    </Paragraph>\n  </Card.Content>\n  <Card.Footer>\n    <Card.FooterItem>Mixed approach example</Card.FooterItem>\n  </Card.Footer>\n</Card>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Bulma's Own Markup (`p` Title, `a` Footer Items)",
       "code": "<Card>\n  <Card.Header>\n    <Card.Header.Title as=\"p\">Component</Card.Header.Title>\n  </Card.Header>\n  <Card.Content>Card content goes here.</Card.Content>\n  <Card.Footer>\n    <Card.FooterItem as=\"a\" href=\"#save\">\n      Save\n    </Card.FooterItem>\n    <Card.FooterItem as=\"a\" href=\"#edit\">\n      Edit\n    </Card.FooterItem>\n  </Card.Footer>\n</Card>"
     }
   ],

package/data/components/Carousel.json

@@ -14,11 +14,11 @@
       "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",
+      "title": "Several Items in View › Stepping and indicators",
       "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",
+      "title": "Several Items in View › Spacing between items",
       "code": "<Carousel className=\"room-gallery\" itemsToShow={3}>\n  {/* items */}\n</Carousel>"
     },
     {
@@ -29,6 +29,18 @@
       "title": "Indicator Styles",
       "code": "function IndicatorExample() {\n  const [style, setStyle] = useState<'dots' | 'circles' | 'lines' | 'bars'>(\n    'dots'\n  );\n  return (\n    <Block>\n      <Buttons mb=\"4\">\n        <Button\n          onClick={() => setStyle('dots')}\n          color={style === 'dots' ? 'primary' : undefined}\n        >\n          Dots\n        </Button>\n        <Button\n          onClick={() => setStyle('circles')}\n          color={style === 'circles' ? 'primary' : undefined}\n        >\n          Circles\n        </Button>\n        <Button\n          onClick={() => setStyle('lines')}\n          color={style === 'lines' ? 'primary' : undefined}\n        >\n          Lines\n        </Button>\n        <Button\n          onClick={() => setStyle('bars')}\n          color={style === 'bars' ? 'primary' : undefined}\n        >\n          Bars\n        </Button>\n      </Buttons>\n      <Carousel indicatorStyle={style}>\n        <CarouselItem>\n          <Hero color=\"primary\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 1</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\">Slide 2</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n        <CarouselItem>\n          <Hero color=\"danger\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 3</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n      </Carousel>\n    </Block>\n  );\n}"
     },
+    {
+      "title": "Indicators Over the Slides",
+      "code": "<Carousel indicatorInside>\n  <CarouselItem>\n    <Hero color=\"dark\" 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=\"link\" 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=\"primary\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Slide 3</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n</Carousel>"
+    },
+    {
+      "title": "Plain Indicators Over the Slides",
+      "code": "<Carousel indicatorInside overlayControls={false}>\n  {['Garden Room', 'Harbor Suite', 'Loft', 'Courtyard Twin'].map(room => (\n    <CarouselItem key={room}>\n      <Card m=\"2\">\n        <Card.Content pb=\"6\">\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": "Overlay Arrows",
+      "code": "<Carousel overlayControls>\n  <CarouselItem>\n    <Hero color=\"dark\" 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=\"link\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Slide 2</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n</Carousel>"
+    },
     {
       "title": "Without Arrows",
       "code": "<Carousel arrow={false}>\n  <CarouselItem>\n    <Hero color=\"primary\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Swipe or Click Dots</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n  <CarouselItem>\n    <Hero color=\"link\" size=\"medium\">\n      <Hero.Body textAlign=\"centered\">\n        <Title as=\"p\">Navigation Only</Title>\n      </Hero.Body>\n    </Hero>\n  </CarouselItem>\n</Carousel>"
@@ -219,7 +231,16 @@
           "name": "indicatorInside",
           "type": "boolean",
           "default": "false",
-          "description": "Position indicators inside carousel.",
+          "description": "Puts the indicators over the slides instead of below them, at the edge `indicatorPosition` names. It also turns on the overlay look unless `overlayControls` says otherwise, so on its own it gives the look made for photos: light arrows, and light indicators on a dark gradient band.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "overlayControls",
+          "type": "boolean",
+          "default": "indicatorInside",
+          "description": "The overlay look, made for photos. The arrows take the `--bulma-carousel-overlay-arrow-*` colors, and indicators over the slides take the `--bulma-carousel-overlay-indicator-*` colors on a dark gradient band. Indicators below the slides keep their plain colors, since they sit on the page. It follows `indicatorInside` unless you set it, so `overlayControls={false}` puts the indicators over the slides with the plain look, and `overlayControls` alone gives the arrows the overlay look with the indicators below. While it's on, `arrowColor` doesn't apply.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -228,7 +249,7 @@
           "name": "indicatorPosition",
           "type": "'bottom' | 'top'",
           "default": "'bottom'",
-          "description": "Indicator position. Default: 'bottom'.",
+          "description": "The edge of the slides `indicatorInside` puts the indicators on. Default: 'bottom'. Without `indicatorInside` they sit below the slides whatever this says, so leave it unset there.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -309,7 +330,7 @@
           "name": "arrowColor",
           "type": "'light' | 'dark'",
           "default": null,
-          "description": "Color theme for navigation arrows.",
+          "description": "Color theme for navigation arrows. Not applied while the overlay look is on (see `overlayControls`, which `indicatorInside` turns on), whose arrows take `--bulma-carousel-overlay-arrow-color`.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -597,25 +618,25 @@
     {
       "css": "--bulma-carousel-overlay-arrow-color",
       "sass": "$carousel-overlay-arrow-color",
-      "default": "var(--bulma-scheme-main)",
+      "default": "var(--bulma-white)",
       "scope": "root"
     },
     {
       "css": "--bulma-carousel-overlay-indicator-background",
       "sass": "$carousel-overlay-indicator-background",
-      "default": "hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l), 0.5)",
+      "default": "hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 0.5)",
       "scope": "root"
     },
     {
       "css": "--bulma-carousel-overlay-indicator-background-hover",
       "sass": "$carousel-overlay-indicator-background-hover",
-      "default": "hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l), 0.8)",
+      "default": "hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 0.8)",
       "scope": "root"
     },
     {
       "css": "--bulma-carousel-overlay-indicator-background-active",
       "sass": "$carousel-overlay-indicator-background-active",
-      "default": "var(--bulma-scheme-main)",
+      "default": "var(--bulma-white)",
       "scope": "root"
     },
     {

package/data/components/Checkbox.json

@@ -32,9 +32,13 @@
     {
       "title": "Theming the Box",
       "code": "<Checkbox className=\"ink-checkbox\" defaultChecked>\n  Remember me\n</Checkbox>"
+    },
+    {
+      "title": "Box Size",
+      "code": "<Checkbox className=\"compact-checkbox\">Remember me</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.\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.",
+  "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- The box is at least 24px square, the minimum size WCAG 2.2 sets for a target (2.5.8), whatever `--bulma-checkbox-size` says. [Box Size](https://bestax.io/docs/api/form/checkbox#box-size) shows how to make it smaller, and why to keep the label text inside the `Checkbox` when you do.\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.",
@@ -87,8 +91,8 @@
         {
           "name": "indeterminate",
           "type": "boolean",
-          "default": "false",
-          "description": "Shows the mixed state, as in a \"Select all\" box when some of what it covers is checked. It's a look and an announcement only: `checked` is still the value, and a click still toggles `checked`. A browser clears the mixed state on a click, so the component sets it again from this prop after every click and every render. Left unset, the component doesn't touch it, and once it has set it, going back to unset clears it once and hands it back. It has no HTML attribute, so server-rendered markup can't carry it, and a mixed box renders unmixed until hydration.",
+          "default": null,
+          "description": "Shows the mixed state, as in a \"Select all\" box when some of what it covers is checked. It's a look and an announcement only: `checked` is still the value, and a click still toggles `checked`. Set to `true` or `false`, it's controlled: a browser clears the mixed state on a click, so the component sets it again from this prop after every click and every render. Unset isn't `false`. The component leaves the input's own `indeterminate` property alone, so a ref can set it, and going from set to unset clears it once and hands it back. It has no HTML attribute, so server-rendered markup can't carry it, and a mixed box renders unmixed until hydration.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Checkboxes.json

@@ -10,15 +10,15 @@
       "code": "<Checkboxes>\n  <Checkbox> Make the bed </Checkbox>\n  <Checkbox> Brush teeth </Checkbox>\n  <Checkbox> Do homework </Checkbox>\n  <Checkbox> Feed the pet </Checkbox>\n  <Checkbox> Take out the trash </Checkbox>\n  <Checkbox> Clean your room </Checkbox>\n  <Checkbox> Set the table </Checkbox>\n  <Checkbox> Help with dishes </Checkbox>\n  <Checkbox> Water the plants </Checkbox>\n  <Checkbox> Put away toys </Checkbox>\n</Checkboxes>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<Checkboxes label=\"Chores\">\n  <Checkbox> Make the bed </Checkbox>\n  <Checkbox> Brush teeth </Checkbox>\n  <Checkbox> Do homework </Checkbox>\n</Checkboxes>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Chores\"\n      labelProps={{ id: 'chores-label', htmlFor: undefined }}\n    >\n      <Field.Body>\n        <Field>\n          <Checkboxes aria-labelledby=\"chores-label\">\n            <Checkbox> Make the bed </Checkbox>\n            <Checkbox> Brush teeth </Checkbox>\n            <Checkbox> Do homework </Checkbox>\n          </Checkboxes>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field and Control Wrappers",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Chores\"\n      labelProps={{ id: 'chores-label-control', htmlFor: undefined }}\n    >\n      <Field.Body>\n        <Field>\n          <Control>\n            <Checkboxes aria-labelledby=\"chores-label-control\">\n              <Checkbox> Make the bed </Checkbox>\n              <Checkbox> Brush teeth </Checkbox>\n              <Checkbox> Do homework </Checkbox>\n            </Checkboxes>\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
@@ -206,8 +206,8 @@
         {
           "name": "indeterminate",
           "type": "boolean",
-          "default": "false",
-          "description": "Shows the mixed state, as in a \"Select all\" box when some of what it covers is checked. It's a look and an announcement only: `checked` is still the value, and a click still toggles `checked`. A browser clears the mixed state on a click, so the component sets it again from this prop after every click and every render. Left unset, the component doesn't touch it, and once it has set it, going back to unset clears it once and hands it back. It has no HTML attribute, so server-rendered markup can't carry it, and a mixed box renders unmixed until hydration.",
+          "default": null,
+          "description": "Shows the mixed state, as in a \"Select all\" box when some of what it covers is checked. It's a look and an announcement only: `checked` is still the value, and a click still toggles `checked`. Set to `true` or `false`, it's controlled: a browser clears the mixed state on a click, so the component sets it again from this prop after every click and every render. Unset isn't `false`. The component leaves the input's own `indeterminate` property alone, so a ref can set it, and going from set to unset clears it once and hands it back. It has no HTML attribute, so server-rendered markup can't carry it, and a mixed box renders unmixed until hydration.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/DateInput.json

@@ -86,27 +86,27 @@
       "code": "<Field label=\"Date\">\n  <Control iconLeftName=\"calendar\" isLoading>\n    <DateInput placeholder=\"YYYY-MM-DD\" />\n  </Control>\n</Field>"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Basic",
       "code": "function example() {\n  return (\n    <DateInput\n      label=\"Click in, then arrow or type\"\n      defaultValue={new Date(2024, 5, 7)}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Digit entry and auto-advance",
       "code": "function example() {\n  return (\n    <DateInput\n      label=\"Type digits — auto-advance across segments\"\n      defaultValue={new Date(2024, 5, 7)}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Controlled with live value",
       "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => new Date(2024, 5, 7));\n  return (\n    <Block>\n      <DateInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toDateString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Free-form fallback",
       "code": "function example() {\n  return (\n    <DateInput\n      label=\"Free-form (Intl format)\"\n      format={{ year: 'numeric', month: 'long', day: 'numeric' }}\n      defaultValue={new Date(2024, 5, 7)}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
-      "title": "Picker vs Input Modes",
+      "title": "Picker vs Input Modes › Picker only",
       "code": "<DateInput label=\"Picker only\" editable={false} defaultValue={new Date()} />"
     },
     {
-      "title": "Picker vs Input Modes",
+      "title": "Picker vs Input Modes › Input only",
       "code": "<DateInput label=\"Input only\" popover={false} defaultValue={new Date()} />"
     },
     {
@@ -162,15 +162,15 @@
       "code": "<DateInput\n  label=\"Date of birth\"\n  horizontal\n  placeholder=\"YYYY-MM-DD\"\n  openOnFocus={false}\n/>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<DateInput label=\"Date\" placeholder=\"YYYY-MM-DD\" />"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field horizontal label=\"Date\" labelProps={{ htmlFor: 'date-field' }}>\n      <Field.Body>\n        <Field>\n          <DateInput id=\"date-field\" placeholder=\"YYYY-MM-DD\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field and Control Wrappers",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Date\"\n      labelProps={{ htmlFor: 'date-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"calendar-alt\">\n            <DateInput id=\"date-field-control\" placeholder=\"YYYY-MM-DD\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],

package/data/components/DateTimeInput.json

@@ -138,35 +138,35 @@
       "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateTimeInput label=\"Disabled\" disabled />\n  <DateTimeInput label=\"Read only\" readOnly defaultValue={new Date()} />\n  <DateTimeInput label=\"Loading\" isLoading />\n</Block>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<DateTimeInput label=\"When\" placeholder=\"YYYY-MM-DD HH:MM\" />"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field horizontal label=\"When\" labelProps={{ htmlFor: 'when-field' }}>\n      <Field.Body>\n        <Field>\n          <DateTimeInput id=\"when-field\" placeholder=\"YYYY-MM-DD HH:MM\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field and Control Wrappers",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"When\"\n      labelProps={{ htmlFor: 'when-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"calendar-alt\">\n            <DateTimeInput\n              id=\"when-field-control\"\n              placeholder=\"YYYY-MM-DD HH:MM\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Basic",
       "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"Type across date and time\"\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Controlled with live value",
       "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => new Date(2024, 5, 7, 13, 45));\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
-      "title": "Manual Keyboard Entry",
+      "title": "Manual Keyboard Entry › Free-form fallback",
       "code": "function example() {\n  return (\n    <DateTimeInput\n      label=\"Free-form (Intl format)\"\n      format={{ dateStyle: 'medium', timeStyle: 'short' }}\n      defaultValue={new Date(2024, 5, 7, 13, 45)}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
-      "title": "Picker vs Input Modes",
+      "title": "Picker vs Input Modes › Picker only",
       "code": "<DateTimeInput label=\"Picker only\" editable={false} defaultValue={new Date()} />"
     },
     {
-      "title": "Picker vs Input Modes",
+      "title": "Picker vs Input Modes › Input only",
       "code": "<DateTimeInput label=\"Input only\" popover={false} defaultValue={new Date()} />"
     }
   ],

package/data/components/File.json

@@ -62,15 +62,15 @@
       "code": "<File\n  color=\"primary\"\n  isRight\n  hasName\n  fileName=\"right.pdf\"\n  buttonLabel=\"Choose a file…\"\n  iconLeft={<Icon name=\"upload\" aria-hidden=\"true\" />}\n/>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<File\n  label=\"Document\"\n  buttonLabel=\"Choose a file…\"\n  iconLeft={<Icon name=\"upload\" aria-hidden=\"true\" />}\n/>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Document\"\n      labelProps={{ htmlFor: 'document-field' }}\n    >\n      <Field.Body>\n        <Field>\n          <File\n            id=\"document-field\"\n            buttonLabel=\"Choose a file…\"\n            iconLeft={<Icon name=\"upload\" aria-hidden=\"true\" />}\n          />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field and Control Wrappers",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Document\"\n      labelProps={{ htmlFor: 'document-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"paperclip\">\n            <File\n              id=\"document-field-control\"\n              buttonLabel=\"Choose a file…\"\n              iconLeft={<Icon name=\"upload\" aria-hidden=\"true\" />}\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],

package/data/components/Icon.json

@@ -13,6 +13,14 @@
       "title": "Font Awesome Large",
       "code": "<Icon\n  name=\"star\"\n  variant=\"solid\"\n  features=\"fa-2x\"\n  ariaLabel=\"Star icon large\"\n/>"
     },
+    {
+      "title": "Brand Icons",
+      "code": "<Block display=\"flex\" alignItems=\"center\">\n  <Icon name=\"github\" variant=\"brands\" ariaLabel=\"GitHub\" />\n  <Icon name=\"linkedin\" variant=\"brands\" ariaLabel=\"LinkedIn\" />\n  <Icon name=\"mastodon\" variant=\"brands\" ariaLabel=\"Mastodon\" />\n</Block>"
+    },
+    {
+      "title": "Brand Icons",
+      "code": "<Block display=\"flex\" alignItems=\"center\">\n  <Link href=\"https://github.com\" aria-label=\"GitHub\" mr=\"3\">\n    <Icon name=\"github\" variant=\"brands\" size=\"medium\" features=\"fa-lg\" />\n  </Link>\n  <Link href=\"https://www.linkedin.com\" aria-label=\"LinkedIn\" mr=\"3\">\n    <Icon name=\"linkedin\" variant=\"brands\" size=\"medium\" features=\"fa-lg\" />\n  </Link>\n  <Link href=\"https://mastodon.social\" aria-label=\"Mastodon\">\n    <Icon name=\"mastodon\" variant=\"brands\" size=\"medium\" features=\"fa-lg\" />\n  </Link>\n</Block>"
+    },
     {
       "title": "Spinning Icon",
       "code": "<Icon\n  name=\"spinner\"\n  variant=\"solid\"\n  features={['fa-spin', 'fa-2x']}\n  ariaLabel=\"Loading spinner\"\n/>"

package/data/components/Input.json

@@ -50,23 +50,23 @@
       "code": "<>\n  <Input\n    label=\"Username\"\n    color=\"success\"\n    value=\"bulma\"\n    message=\"This username is available\"\n    messageColor=\"success\"\n    iconLeftName=\"user\"\n    iconRightName=\"check\"\n    onChange={() => {}}\n  />\n  <Input\n    label=\"Email\"\n    type=\"email\"\n    color=\"danger\"\n    value=\"hello@\"\n    message=\"This email is invalid\"\n    messageColor=\"danger\"\n    iconLeftName=\"envelope\"\n    iconRightName=\"exclamation-triangle\"\n    onChange={() => {}}\n  />\n</>"
     },
     {
-      "title": "Form Addons",
+      "title": "Form Addons › Input + Button",
       "code": "<Field hasAddons>\n  <Control isExpanded>\n    <Input placeholder=\"Find a repository\" aria-label=\"Find a repository\" />\n  </Control>\n  <Control>\n    <Button color=\"info\">Search</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Addons",
+      "title": "Form Addons › Input + Static Suffix",
       "code": "<Field hasAddons>\n  <Control isExpanded>\n    <Input placeholder=\"Your email\" aria-label=\"Email username\" />\n  </Control>\n  <Control>\n    <Button isStatic>@gmail.com</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Addons",
+      "title": "Form Addons › Select + Input + Button",
       "code": "<Field hasAddons>\n  <Control>\n    <Select aria-label=\"Country code\">\n      <option>+1</option>\n      <option>+44</option>\n      <option>+33</option>\n    </Select>\n  </Control>\n  <Control isExpanded>\n    <Input\n      type=\"tel\"\n      placeholder=\"Your phone number\"\n      aria-label=\"Phone number\"\n    />\n  </Control>\n  <Control>\n    <Button color=\"primary\">Call</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Addons",
+      "title": "Form Addons › Centered Addons",
       "code": "<Field hasAddons=\"centered\">\n  <Control>\n    <Button>Yes</Button>\n  </Control>\n  <Control>\n    <Button>Maybe</Button>\n  </Control>\n  <Control>\n    <Button>No</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Addons",
+      "title": "Form Addons › Right-Aligned Addons",
       "code": "<Field hasAddons=\"right\">\n  <Control>\n    <Button>Yes</Button>\n  </Control>\n  <Control>\n    <Button>Maybe</Button>\n  </Control>\n  <Control>\n    <Button>No</Button>\n  </Control>\n</Field>"
     },
     {
@@ -78,23 +78,23 @@
       "code": "function CopyButton() {\n  const id = React.useId();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle');\n  const link = 'https://bestax.io/docs/api/form/input';\n\n  // Put the button's label back after a moment.\n  useEffect(() => {\n    if (status !== 'copied') return undefined;\n    const timer = setTimeout(() => setStatus('idle'), 2000);\n    return () => clearTimeout(timer);\n  }, [status]);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(link);\n      setStatus('copied');\n    } catch {\n      // No clipboard on this page, or the browser refused the write.\n      inputRef.current?.focus();\n      inputRef.current?.select();\n      setStatus('failed');\n    }\n  };\n\n  return (\n    <Field label=\"Share link\" labelProps={{ htmlFor: id }}>\n      <Field hasAddons>\n        <Control isExpanded>\n          <Input ref={inputRef} id={id} value={link} readOnly />\n        </Control>\n        <Control>\n          <Button type=\"button\" onClick={copy}>\n            <Icon\n              name={status === 'copied' ? 'check' : 'copy'}\n              aria-hidden=\"true\"\n            />\n            <span>{status === 'copied' ? 'Copied' : 'Copy'}</span>\n          </Button>\n        </Control>\n      </Field>\n      <p role=\"status\" className=\"help\">\n        {status === 'copied' && 'Copied to the clipboard.'}\n      </p>\n      <p role=\"alert\" className=\"help is-danger\">\n        {status === 'failed' &&\n          \"Couldn't copy automatically. The link is selected, so copy it from the field.\"}\n      </p>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Form Group",
+      "title": "Form Group › Grouped Buttons",
       "code": "<Field grouped>\n  <Control>\n    <Button color=\"link\">Submit</Button>\n  </Control>\n  <Control>\n    <Button>Cancel</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Group",
+      "title": "Form Group › Centered Group",
       "code": "<Field grouped=\"centered\">\n  <Control>\n    <Button color=\"link\">Submit</Button>\n  </Control>\n  <Control>\n    <Button>Cancel</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Group",
+      "title": "Form Group › Right-Aligned Group",
       "code": "<Field grouped=\"right\">\n  <Control>\n    <Button color=\"link\">Submit</Button>\n  </Control>\n  <Control>\n    <Button>Cancel</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Group",
+      "title": "Form Group › Expanded Input + Button",
       "code": "<Field grouped>\n  <Control isExpanded>\n    <Input placeholder=\"Find a repository\" aria-label=\"Find a repository\" />\n  </Control>\n  <Control>\n    <Button color=\"info\">Search</Button>\n  </Control>\n</Field>"
     },
     {
-      "title": "Form Group",
+      "title": "Form Group › Multiline Group",
       "code": "<Field grouped=\"multiline\">\n  {[\n    'One',\n    'Two',\n    'Three',\n    'Four',\n    'Five',\n    'Six',\n    'Seven',\n    'Eight',\n    'Nine',\n    'Ten',\n    'Eleven',\n    'Twelve',\n    'Thirteen',\n  ].map(label => (\n    <Control key={label}>\n      <Button>{label}</Button>\n    </Control>\n  ))}\n</Field>"
     },
     {
@@ -114,15 +114,15 @@
       "code": "<fieldset disabled>\n  <Input label=\"Name\" placeholder=\"Your name\" />\n  <Input label=\"Email\" type=\"email\" placeholder=\"Your email\" />\n</fieldset>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<Input label=\"Username\" placeholder=\"Enter username\" />"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Username\"\n      labelProps={{ htmlFor: 'username-field' }}\n    >\n      <Field.Body>\n        <Field>\n          <Input id=\"username-field\" placeholder=\"Enter username\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field and Control Wrappers",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Username\"\n      labelProps={{ htmlFor: 'username-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"user\">\n            <Input id=\"username-field-control\" placeholder=\"Enter username\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],