bestax-mcp 1.18.6 → 1.18.8

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,74 @@
     "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-social helper, a Bulma extension's text or background color in a brand's color, with `-dark` and `-light` for its shades: keep loading bulma-social and keep the class in `className` on the element that has it, since bestax has no prop for it (the bestax-migrate skill's `html-asset:bulma-extension` has the recipe, and the brand's own stylesheet holds it)",
+      "match": "^has-(?:text|background)-(?: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)(?:-dark|-light)?$",
+      "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.45.0"
+    "version": "5.46.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -641,7 +641,7 @@
       "import": "import { Input, Field, Control, Button, Select, Icon } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 29,
-      "exampleCount": 30
+      "exampleCount": 31
     },
     {
       "name": "Kbd",
@@ -905,7 +905,7 @@
       "import": "import { Radio, Radios, Control } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 7,
-      "exampleCount": 5
+      "exampleCount": 6
     },
     {
       "name": "Radios",
@@ -1136,7 +1136,7 @@
       "import": "import { Theme } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 43,
-      "exampleCount": 12
+      "exampleCount": 13
     },
     {
       "name": "TimeInput",

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>"
     },
     {

package/data/components/Checkbox.json

@@ -127,6 +127,7 @@
       ],
       "extraProps": [],
       "catchAll": "All standard <input> attributes and Bulma helper props",
+      "helperPropsNote": "Helper props go on the outer `<label>`, with `className`. The other attributes go on the `<input>`.",
       "types": []
     }
   ],

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}"
     },
     {
@@ -242,6 +242,7 @@
       ],
       "extraProps": [],
       "catchAll": "All standard <input> attributes and Bulma helper props",
+      "helperPropsNote": "Helper props go on the outer `<label>`, with `className`. The other attributes go on the `<input>`.",
       "types": []
     }
   ],

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}"
     }
   ],
@@ -298,6 +298,7 @@
       ],
       "extraProps": [],
       "catchAll": "All standard <input> attributes and Bulma helper props",
+      "helperPropsNote": "Helper props go on the `.file` wrapper `<div>`, with `className`. The other attributes go on the `<input>`.",
       "types": []
     }
   ],

package/data/components/Input.json

@@ -50,23 +50,27 @@
       "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": "Visually Hidden Label for Screen Readers",
+      "code": "<Input\n  label=\"Email\"\n  labelProps={{ className: 'is-sr-only' }}\n  type=\"email\"\n  placeholder=\"you@example.com\"\n/>"
+    },
+    {
+      "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 +82,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 +118,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}"
     }
   ],

package/data/components/Message.json

@@ -22,19 +22,19 @@
       "code": "<>\n  <Message title=\"Default Size\">This is the default size message.</Message>\n  <Message size=\"small\" title=\"Small\">\n    This is a small message.\n  </Message>\n  <Message size=\"medium\" title=\"Medium\">\n    This is a medium message.\n  </Message>\n  <Message size=\"large\" title=\"Large\">\n    This is a large message.\n  </Message>\n</>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Complete Message with Compound Components",
       "code": "<Message color=\"info\">\n  <Message.Header>\n    <Paragraph>Compound Component Message</Paragraph>\n    <Delete aria-label=\"delete\" />\n  </Message.Header>\n  <Message.Body>\n    <Paragraph>\n      This message is built using compound components for maximum flexibility\n      and control over each section.\n    </Paragraph>\n    <Paragraph>\n      You can include multiple paragraphs and elements in the body.\n    </Paragraph>\n  </Message.Body>\n</Message>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Minimal Message with Body Only",
       "code": "<Message color=\"success\">\n  <Message.Body>\n    <Paragraph>\n      A simple message using only the Message.Body compound component.\n    </Paragraph>\n  </Message.Body>\n</Message>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Header-Only Message",
       "code": "<Message color=\"warning\">\n  <Message.Header>\n    <Paragraph>Header-only message</Paragraph>\n    <Delete aria-label=\"delete\" />\n  </Message.Header>\n</Message>"
     },
     {
-      "title": "Compound (dot-notation) usage",
+      "title": "Compound (dot-notation) usage › Mixed Approach",
       "code": "<Message color=\"danger\" title=\"Mixed Approach\">\n  <Message.Body>\n    <Paragraph>\n      You can mix prop-based and compound component approaches!\n    </Paragraph>\n    <Paragraph>\n      This message uses the title prop but compound components for the body.\n    </Paragraph>\n  </Message.Body>\n</Message>"
     }
   ],