bestax-mcp 1.18.6 → 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.45.0"
+    "version": "5.45.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -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>"
     },
     {

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

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/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}"
     }
   ],

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

package/data/components/Modal.json

@@ -22,11 +22,11 @@
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal active={open} onClose={() => setOpen(false)}>\n        <Box>\n          <Title size=\"4\">Custom Content</Title>\n          <Paragraph>Put any content here!</Paragraph>\n        </Box>\n      </Modal>\n    </>\n  );\n}"
     },
     {
-      "title": "Explicit Modal Types",
+      "title": "Explicit Modal Types › Force content style",
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal active={open} onClose={() => setOpen(false)} type=\"content\">\n        <div>Custom content modal (forced type=\"content\")</div>\n      </Modal>\n    </>\n  );\n}"
     },
     {
-      "title": "Explicit Modal Types",
+      "title": "Explicit Modal Types › Force card style",
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal active={open} onClose={() => setOpen(false)} type=\"card\">\n        Modal card body (forced type=\"card\")\n      </Modal>\n    </>\n  );\n}"
     },
     {
@@ -38,15 +38,15 @@
       "code": "function example() {\n  const [open, setOpen] = React.useState(false);\n  const [width, setWidth] = React.useState<number | null>(null);\n  const modalRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <>\n      <Button color=\"info\" onClick={() => setOpen(true)}>\n        Open and measure\n      </Button>\n      <Modal\n        active={open}\n        onClose={() => setOpen(false)}\n        ref={modalRef}\n        modalCardTitle=\"Measured through the ref\"\n      >\n        <Button\n          onClick={() =>\n            setWidth(modalRef.current?.getBoundingClientRect().width ?? null)\n          }\n        >\n          Measure\n        </Button>\n        <p>Width: {width === null ? '—' : `${Math.round(width)}px`}</p>\n      </Modal>\n    </>\n  );\n}"
     },
     {
-      "title": "Compound (dot-notation) usage",
-      "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const closeModal = () => setOpen(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal isActive={open}>\n        <Modal.Background onClick={closeModal} />\n        <Modal.Card>\n          <Modal.Card.Head>\n            <Modal.Card.Title>Compound Component Modal</Modal.Card.Title>\n            <Modal.Close onClick={closeModal} />\n          </Modal.Card.Head>\n          <Modal.Card.Body>\n            This modal uses the compound components API for better control and\n            readability.\n          </Modal.Card.Body>\n          <Modal.Card.Foot>\n            <Buttons>\n              <Button color=\"success\" onClick={closeModal}>\n                Save\n              </Button>\n              <Button onClick={closeModal}>Cancel</Button>\n            </Buttons>\n          </Modal.Card.Foot>\n        </Modal.Card>\n      </Modal>\n    </>\n  );\n}"
+      "title": "Compound (dot-notation) usage › Modal.Card with compound components",
+      "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const closeModal = () => setOpen(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal isActive={open} onClose={closeModal}>\n        <Modal.Background onClick={closeModal} />\n        <Modal.Card>\n          <Modal.Card.Head>\n            <Modal.Card.Title>Compound Component Modal</Modal.Card.Title>\n            <Modal.Close />\n          </Modal.Card.Head>\n          <Modal.Card.Body>\n            This modal uses the compound components API for better control and\n            readability.\n          </Modal.Card.Body>\n          <Modal.Card.Foot>\n            <Buttons>\n              <Button color=\"success\" onClick={closeModal}>\n                Save\n              </Button>\n              <Button onClick={closeModal}>Cancel</Button>\n            </Buttons>\n          </Modal.Card.Foot>\n        </Modal.Card>\n      </Modal>\n    </>\n  );\n}"
     },
     {
-      "title": "Compound (dot-notation) usage",
-      "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const closeModal = () => setOpen(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal isActive={open}>\n        <Modal.Background onClick={closeModal} />\n        <Modal.Content>\n          <Box>\n            <Title size=\"4\">Custom Content</Title>\n            <Paragraph>Using compound components for full control!</Paragraph>\n          </Box>\n        </Modal.Content>\n        <Modal.Close variant=\"floating\" onClick={closeModal} />\n      </Modal>\n    </>\n  );\n}"
+      "title": "Compound (dot-notation) usage › Modal.Content with compound components",
+      "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const closeModal = () => setOpen(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal isActive={open} onClose={closeModal}>\n        <Modal.Background onClick={closeModal} />\n        <Modal.Content>\n          <Box>\n            <Title size=\"4\">Custom Content</Title>\n            <Paragraph>Using compound components for full control!</Paragraph>\n          </Box>\n        </Modal.Content>\n        <Modal.Close variant=\"floating\" />\n      </Modal>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- The modal root gets `role=\"dialog\"` and `aria-modal=\"true\"` while active — pass an explicit `role` to override (e.g. `Dialog` passes `role=\"presentation\"` on the `Modal` it wraps so its own `role=\"alertdialog\"` is the only one announced).\n- **Give the dialog an accessible name.** With the legacy API, `modalCardTitle` is wired up as `aria-labelledby` for you. With the compound API, pass your own `aria-label` or `aria-labelledby` on `<Modal>` — a `role=\"dialog\"` with no name is announced as just \"dialog\". An explicit `aria-labelledby` always wins over the generated one.\n- Escape closes the modal (calls `onClose`) by default; opt out with `closeOnEscape={false}`. One Escape closes the topmost overlay only, whichever open Modal, [Dialog](https://bestax.io/docs/api/components/dialog), [Sidebar](https://bestax.io/docs/api/components/sidebar) or full-page [Loading](https://bestax.io/docs/api/components/loading) opened last, and the next Escape closes the one under it. A modal on top with `closeOnEscape={false}` still keeps Escape from the layers under it. A [Toast](https://bestax.io/docs/api/components/toast) waits until no overlay is open.\n- The modal calls `preventDefault()` on the Escape it closes on, so a listener of your own that runs after it can tell the key was used.\n- A popup inside the modal takes its own Escape first. With an Autocomplete list, a Dropdown menu, a Popover or a date picker's calendar open, the first Escape closes that and the next one closes the modal.\n- A popup of your own inside a modal should call `preventDefault()` on the Escape it closes on. The modal leaves an Escape that was prevented alone, whether your popup hears it in a React `onKeyDown` or in a listener on `document`. Call it only when the popup is open and the key was pressed in it, so an Escape with nothing to close still closes the modal, and so does one pressed in a modal opened over your popup.\n- Body scroll is locked while the modal is active; opt out with `lockScroll={false}`. The lock is ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first doesn't unlock the page underneath one that is still open.\n- Focus moves to the first tab stop (or the modal itself) on open, and is restored to the previously focused element on close — unless another modal is still open on top, in which case that one keeps focus.\n- Tab and Shift+Tab cycle within the modal while it is the topmost modal overlay, so the keyboard order agrees with what `aria-modal=\"true\"` tells assistive technology. They wrap at the same tab stops [`useFocusTrap`](https://bestax.io/docs/api/helpers/usefocustrap) does, so disabled, hidden and `tabIndex={-1}` elements are skipped, and so is inert content, such as a closed [Sidebar](https://bestax.io/docs/api/components/sidebar) inside the modal, and the content of a closed `<details>`. A radio group counts once. A Tab from outside the modal brings focus back in, and so does a Tab the browser takes out anyway, as Safari does past links when its settings say to. With another Modal or Dialog, a [Sidebar](https://bestax.io/docs/api/components/sidebar) with an overlay or a full-page Loading opened over it, the modal leaves Tab alone until that one closes. A Sidebar without an overlay isn't modal: opened over the modal, it takes Escape first, but the modal keeps holding Tab and keeps focus, so the sidebar doesn't take focus when it opens, and a Tab from its controls comes back into the modal. A focus trap of your own inside it, such as a portaled panel's, keeps a Tab it calls `preventDefault()` on, and the modal leaves focus where your trap put it. Note that `aria-modal` does not by itself make background content inert, and no `inert` attribute is applied, so background content remains reachable by pointer and by browser UI such as find-in-page.\n- The modal background closes the modal on click (`onClose` required).\n- Close buttons are provided for both modal-card and modal-content variants.\n\n:::note\nAlways provide an `onClose` handler for accessibility and to allow users to dismiss the modal.\n:::",
+  "accessibility": "- The modal root gets `role=\"dialog\"` and `aria-modal=\"true\"` while active — pass an explicit `role` to override (e.g. `Dialog` passes `role=\"presentation\"` on the `Modal` it wraps so its own `role=\"alertdialog\"` is the only one announced).\n- **Give the dialog an accessible name.** With the legacy API, `modalCardTitle` is wired up as `aria-labelledby` for you. With the compound API, pass your own `aria-label` or `aria-labelledby` on `<Modal>` — a `role=\"dialog\"` with no name is announced as just \"dialog\". An explicit `aria-labelledby` always wins over the generated one.\n- Escape closes the modal (calls `onClose`) by default; opt out with `closeOnEscape={false}`. One Escape closes the topmost overlay only, whichever open Modal, [Dialog](https://bestax.io/docs/api/components/dialog), [Sidebar](https://bestax.io/docs/api/components/sidebar) or full-page [Loading](https://bestax.io/docs/api/components/loading) opened last, and the next Escape closes the one under it. A modal on top with `closeOnEscape={false}` still keeps Escape from the layers under it. A [Toast](https://bestax.io/docs/api/components/toast) waits until no overlay is open.\n- The modal calls `preventDefault()` on the Escape it closes on, so a listener of your own that runs after it can tell the key was used.\n- A popup inside the modal takes its own Escape first. With an Autocomplete list, a Dropdown menu, a Popover or a date picker's calendar open, the first Escape closes that and the next one closes the modal.\n- A popup of your own inside a modal should call `preventDefault()` on the Escape it closes on. The modal leaves an Escape that was prevented alone, whether your popup hears it in a React `onKeyDown` or in a listener on `document`. Call it only when the popup is open and the key was pressed in it, so an Escape with nothing to close still closes the modal, and so does one pressed in a modal opened over your popup.\n- Body scroll is locked while the modal is active; opt out with `lockScroll={false}`. The lock is ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first doesn't unlock the page underneath one that is still open.\n- Focus moves to the first tab stop (or the modal itself) on open, and is restored to the previously focused element on close — unless another modal is still open on top, in which case that one keeps focus.\n- Tab and Shift+Tab cycle within the modal while it is the topmost modal overlay, so the keyboard order agrees with what `aria-modal=\"true\"` tells assistive technology. They wrap at the same tab stops [`useFocusTrap`](https://bestax.io/docs/api/helpers/usefocustrap) does, so disabled, hidden and `tabIndex={-1}` elements are skipped, and so is inert content, such as a closed [Sidebar](https://bestax.io/docs/api/components/sidebar) inside the modal, and the content of a closed `<details>`. A radio group counts once. A Tab from outside the modal brings focus back in, and so does a Tab the browser takes out anyway, as Safari does past links when its settings say to. With another Modal or Dialog, a [Sidebar](https://bestax.io/docs/api/components/sidebar) with an overlay or a full-page Loading opened over it, the modal leaves Tab alone until that one closes. A Sidebar without an overlay isn't modal: opened over the modal, it takes Escape first, but the modal keeps holding Tab and keeps focus, so the sidebar doesn't take focus when it opens, and a Tab from its controls comes back into the modal. A focus trap of your own inside it, such as a portaled panel's, keeps a Tab it calls `preventDefault()` on, and the modal leaves focus where your trap put it. Note that `aria-modal` does not by itself make background content inert, and no `inert` attribute is applied, so background content remains reachable by pointer and by browser UI such as find-in-page.\n- In the props form, the background closes the modal on click, and a close button is provided for both modal-card and modal-content variants (both call `onClose`, so pass it).\n- In the compound form, `Modal.Close` calls the modal's `onClose` unless you give it an `onClick` of your own, and `Modal.Background` closes the modal only when you pass it `onClick={onClose}`.\n\n:::note\nAlways provide an `onClose` handler for accessibility and to allow users to dismiss the modal.\n:::",
   "related": [
     "Button",
     "Dialog",
@@ -88,7 +88,7 @@
           "name": "onClose",
           "type": "() => void",
           "default": null,
-          "description": "Callback invoked to request modal close (background or close button).",
+          "description": "Called to ask for the modal to close. The props form calls it from the background and the close button it renders. In the compound form, `Modal.Close` calls it unless you give it an `onClick` of your own, and `Modal.Background` doesn't call it on its own: pass it `onClick={onClose}` for a click on the background to close the modal. Escape calls it in both forms unless `closeOnEscape` is `false`.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -202,7 +202,7 @@
     },
     {
       "path": "Modal.Background",
-      "summary": "Modal.Background - Renders the modal background overlay.",
+      "summary": "Modal.Background - Renders the modal background overlay. Pass it `onClick={onClose}` for a click on it to close the modal.",
       "component": null,
       "props": [
         {
@@ -215,7 +215,17 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "onClick",
+          "type": "React.MouseEventHandler<HTMLDivElement>",
+          "default": null,
+          "description": "Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard <div> attributes",
       "types": []
     },
@@ -335,7 +345,7 @@
     },
     {
       "path": "Modal.Close",
-      "summary": "Modal.Close - Renders modal close button with two variant styles.",
+      "summary": "Modal.Close - Renders modal close button with two variant styles. It calls the modal's `onClose` unless given an `onClick` of its own.",
       "component": null,
       "props": [
         {
@@ -384,6 +394,15 @@
           "required": false,
           "inherited": false,
           "deprecated": false
+        },
+        {
+          "name": "onClick",
+          "type": "React.MouseEventHandler<HTMLButtonElement>",
+          "default": null,
+          "description": "Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
         }
       ],
       "catchAll": "All standard <button> attributes",

package/data/components/Numberinput.json

@@ -42,15 +42,15 @@
       "code": "<Numberinput defaultValue={5} disabled />"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › Default (with label)",
       "code": "<Numberinput\n  label=\"Quantity\"\n  defaultValue={1}\n  min={1}\n  max={10}\n  color=\"primary\"\n/>"
     },
     {
-      "title": "Context-Aware Rendering",
+      "title": "Context-Aware Rendering › With Field Wrapper",
       "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Quantity\"\n      labelProps={{ htmlFor: 'quantity-field' }}\n    >\n      <Field.Body>\n        <Field>\n          <Numberinput\n            id=\"quantity-field\"\n            bare={false}\n            defaultValue={1}\n            min={1}\n            max={10}\n            color=\"primary\"\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=\"Quantity\"\n      labelProps={{ htmlFor: 'quantity-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control>\n            <Numberinput\n              id=\"quantity-field-control\"\n              defaultValue={1}\n              min={1}\n              max={10}\n              color=\"primary\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],