bestax-mcp 1.14.1 → 1.14.2

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.27.0"
+    "version": "5.27.1"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -252,7 +252,7 @@
       "name": "Cell",
       "kind": "component",
       "category": "grid",
-      "purpose": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.",
+      "purpose": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](https://bestax.io/docs/api/grid) component.",
       "slug": "grid/cell",
       "import": "import { Cell } from '@allxsmith/bestax-bulma';",
       "compound": false,
@@ -283,13 +283,13 @@
     },
     {
       "name": "ClientOnly",
-      "kind": "helper",
+      "kind": "component",
       "category": "helpers",
       "purpose": "`ClientOnly` renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't…",
       "slug": "helpers/clientonly",
       "import": "import { ClientOnly, useIsHydrated } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 0,
+      "propCount": 2,
       "exampleCount": 3
     },
     {
@@ -340,7 +340,7 @@
       "name": "Columns",
       "kind": "component",
       "category": "columns",
-      "purpose": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.",
+      "purpose": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](https://bestax.io/docs/api/columns/column) components.",
       "slug": "columns/columns",
       "import": "import { Columns, Column } from '@allxsmith/bestax-bulma';",
       "compound": true,
@@ -349,13 +349,13 @@
     },
     {
       "name": "ConfigProvider",
-      "kind": "helper",
+      "kind": "component",
       "category": "helpers",
       "purpose": "The `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components.",
       "slug": "helpers/config",
       "import": "import { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 0,
+      "propCount": 3,
       "exampleCount": 0
     },
     {
@@ -789,13 +789,13 @@
     },
     {
       "name": "Portal",
-      "kind": "helper",
+      "kind": "component",
       "category": "helpers",
       "purpose": "`Portal` renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's…",
       "slug": "helpers/portal",
       "import": "import { Portal } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 0,
+      "propCount": 3,
       "exampleCount": 3
     },
     {
@@ -1042,13 +1042,13 @@
     },
     {
       "name": "Theme",
-      "kind": "helper",
+      "kind": "component",
       "category": "helpers",
       "purpose": "The `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables).",
       "slug": "helpers/theme",
       "import": "import { Theme } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 0,
+      "propCount": 43,
       "exampleCount": 12
     },
     {

package/data/components/Autocomplete.json

@@ -47,14 +47,14 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Fruit\">\n      <Field.Body>\n        <Field>\n          <Autocomplete\n            data={['Apple', 'Banana', 'Cherry']}\n            placeholder=\"Search fruit...\"\n          />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Field horizontal label=\"Fruit\" labelProps={{ htmlFor: 'fruit-field' }}>\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",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Fruit\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"search\">\n            <Autocomplete\n              data={['Apple', 'Banana', 'Cherry']}\n              placeholder=\"Search fruit...\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Fruit\"\n      labelProps={{ htmlFor: 'fruit-field-control' }}\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}"
     }
   ],
-  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- Uses `role=\"combobox\"` with `aria-expanded`, which is true only while the list is on screen\n- Has `aria-haspopup=\"listbox\"` and `aria-autocomplete=\"list\"`, and, while the list is on screen, `aria-controls` pointing at it\n- Focus stays in the input, which points `aria-activedescendant` at the highlighted option as the arrow keys move it\n- The list is a `role=\"listbox\"` named by the `label` prop's label. Inside an outer `Field`, or with no `label`, it falls back to `aria-label=\"Suggestions\"`\n- Dropdown items use `role=\"option\"` with `aria-selected`\n- Disabled items have `aria-disabled`\n- The `clearable` clear button is a native button named \"Clear\": `Tab` from the input reaches it, and `Enter` or `Space` clears the input and puts focus back in it\n- Full keyboard navigation support",
+  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it. Inside a labeled `Field`, that `Field`'s label names the input the same way.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- Uses `role=\"combobox\"` with `aria-expanded`, which is true only while the list is on screen\n- Has `aria-haspopup=\"listbox\"` and `aria-autocomplete=\"list\"`, and, while the list is on screen, `aria-controls` pointing at it\n- Focus stays in the input, which points `aria-activedescendant` at the highlighted option as the arrow keys move it\n- The list is a `role=\"listbox\"` named by the `label` prop's label. Inside an outer `Field`, or with no `label`, it falls back to `aria-label=\"Suggestions\"`\n- Dropdown items use `role=\"option\"` with `aria-selected`\n- Disabled items have `aria-disabled`\n- The `clearable` clear button is a native button named \"Clear\": `Tab` from the input reaches it, and `Enter` or `Space` clears the input and puts focus back in it\n- Full keyboard navigation support",
   "related": ["Input", "Select", "Taginput"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-autocomplete",
   "summary": "The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.",
@@ -71,7 +71,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself).",
+          "description": "Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Avatars.json

@@ -38,7 +38,7 @@
       "code": "<Avatars>\n  <Avatars.Avatar name=\"Ada Lovelace\" />\n  <Avatars.Avatar name=\"Grace Hopper\" />\n  <Avatars.Avatar name=\"Katherine Johnson\" />\n</Avatars>"
     }
   ],
-  "accessibility": "- `Avatars` is a plain container — each child `Avatar` carries its own accessible name (see\n  [Avatar's accessibility notes](./avatar.md#accessibility)).\n- The `+N` surplus avatar gets an accessible name of `\"{N} more\"` (via its `alt`), so assistive\n  tech announces how many members are hidden. Localize it with `surplusLabel`, e.g.\n  ``surplusLabel={count => `${count} weitere`}``.\n- A focused clickable avatar is lifted above its overlapping neighbours so its focus outline\n  is never partially covered.\n- When the group represents a labelled set (e.g. \"Project members\"), give the container a\n  `role=\"group\"` and an `aria-label` describing it.",
+  "accessibility": "- `Avatars` is a plain container — each child `Avatar` carries its own accessible name (see\n  [Avatar's accessibility notes](https://bestax.io/docs/api/components/avatar#accessibility)).\n- The `+N` surplus avatar gets an accessible name of `\"{N} more\"` (via its `alt`), so assistive\n  tech announces how many members are hidden. Localize it with `surplusLabel`, e.g.\n  ``surplusLabel={count => `${count} weitere`}``.\n- A focused clickable avatar is lifted above its overlapping neighbours so its focus outline\n  is never partially covered.\n- When the group represents a labelled set (e.g. \"Project members\"), give the container a\n  `role=\"group\"` and an `aria-label` describing it.",
   "related": ["Avatar", "Badge", "Tags", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-avatars--default",
   "summary": "The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the \"members\" list pattern.",

package/data/components/Cell.json

@@ -33,14 +33,14 @@
   "accessibility": null,
   "related": [],
   "storybook": null,
-  "summary": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.",
+  "summary": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](https://bestax.io/docs/api/grid) component.",
   "import": "import { Cell } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/grid/Cell.tsx",
   "rootClass": "cell",
   "parts": [
     {
       "path": "Cell",
-      "summary": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.",
+      "summary": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](https://bestax.io/docs/api/grid) component.",
       "component": null,
       "props": [
         {

package/data/components/Checkboxes.json

@@ -15,18 +15,18 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Chores\">\n      <Field.Body>\n        <Field>\n          <Checkboxes>\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}"
+      "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",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Chores\">\n      <Field.Body>\n        <Field>\n          <Control>\n            <Checkboxes>\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}"
+      "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}"
     },
     {
       "title": "Compound (dot-notation) usage",
       "code": "<Checkboxes name=\"frameworks\" label=\"Frameworks\">\n  <Checkboxes.Checkbox value=\"react\">React</Checkboxes.Checkbox>\n  <Checkboxes.Checkbox value=\"vue\">Vue</Checkboxes.Checkbox>\n</Checkboxes>"
     }
   ],
-  "accessibility": "- The group is rendered as a `<div class=\"checkboxes\" role=\"group\">` containing labeled checkboxes.\n- The `label` prop names the whole group: the rendered `<label>` gets an id (yours via `labelProps.id`, or a generated one) and the group points at it with `aria-labelledby`.\n- Each child should be a `Checkbox` for proper labeling and accessibility.",
+  "accessibility": "- The group is rendered as a `<div class=\"checkboxes\" role=\"group\">` containing labeled checkboxes.\n- The `label` prop names the whole group: the rendered `<label>` gets an id (yours via `labelProps.id`, or a generated one) and the group points at it with `aria-labelledby`.\n- Inside a labeled `Field`, that `Field`'s label names the group the same way.\n- An `aria-label` or `aria-labelledby` you give the group wins over either label, whether that label sits on the Checkboxes or on a `Field` around them.\n- Each child should be a `Checkbox` for proper labeling and accessibility.",
   "related": ["Checkbox", "Field"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-checkboxes--default",
   "summary": "The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.",
@@ -43,7 +43,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"group\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself).",
+          "description": "Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"group\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/ClientOnly.json

@@ -1,6 +1,6 @@
 {
   "name": "ClientOnly",
-  "kind": "helper",
+  "kind": "component",
   "category": "helpers",
   "slug": "helpers/clientonly",
   "docsUrl": "https://bestax.io/docs/api/helpers/clientonly",
@@ -18,12 +18,43 @@
       "code": "<ClientOnly fallback={<Skeleton variant=\"lines\" lines={3} />}>\n  {() => <RecentlyViewed items={readHistory(localStorage)} />}\n</ClientOnly>"
     }
   ],
-  "accessibility": "- Content that arrives after hydration is not announced by screen readers on its own. Keep what a reader needs on first load out of `ClientOnly`, and use it for enhancements.\n- Match the fallback's size to the content, so the page doesn't shift under someone who has started reading or scrolling.\n- Assistive technology meets the fallback until it is replaced. An empty [`Skeleton`](../elements/skeleton.md) gives it nothing to read; a text fallback such as \"Loading…\" is read out.",
+  "accessibility": "- Content that arrives after hydration is not announced by screen readers on its own. Keep what a reader needs on first load out of `ClientOnly`, and use it for enhancements.\n- Match the fallback's size to the content, so the page doesn't shift under someone who has started reading or scrolling.\n- Assistive technology meets the fallback until it is replaced. An empty [`Skeleton`](https://bestax.io/docs/api/elements/skeleton) gives it nothing to read; a text fallback such as \"Loading…\" is read out.",
   "related": ["Modal", "Reveal", "Skeleton"],
   "storybook": "https://bestax.io/storybook/?path=/story/helpers-clientonly--default",
-  "summary": "`ClientOnly` renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't…",
+  "summary": "Renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't cause a hydration mismatch. The server render and the hydrating client render both show `fallback`, which keeps them identical; the children replace it in the commit that follows. In an app without server rendering the children show on the first render.",
   "import": "import { ClientOnly, useIsHydrated } from '@allxsmith/bestax-bulma';",
-  "doc": "# ClientOnly\n\n## Overview\n\n`ClientOnly` renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't cause a hydration mismatch.\n\nThe server render and the hydrating client render both show `fallback`, which keeps them identical; the children replace it in the commit that follows. Reach for it when the markup itself would differ between server and browser: the reader's time zone or locale, a value from `localStorage`, the viewport size, a widget that needs `window` to render at all. In an app without server rendering the children show on the first render, so wrapping something in `ClientOnly` costs nothing there.\n\nThe hook underneath, `useIsHydrated`, is exported too, for components that need the answer rather than a wrapper.\n\n---\n\n## Import\n\n```tsx\nimport { ClientOnly, useIsHydrated } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Hooks\n\n### useIsHydrated\n\nReturns `false` during server rendering and during the hydrating client render, then `true` from the commit that follows. A component that mounts after hydration (after a route change, or in an app with no server rendering) gets `true` on its first render, so it pays for no extra render.\n\n```tsx\nfunction Greeting() {\n  const hydrated = useIsHydrated();\n  // localStorage only exists in the browser, so the server render and the\n  // hydrating render both show the generic greeting.\n  const name = hydrated ? localStorage.getItem('name') : null;\n  return <Title size=\"4\">{name ? `Welcome back, ${name}` : 'Welcome'}</Title>;\n}\n```\n\n---\n\n## Usage\n\n### Browser-only content\n\nPass the content as a function and it is called only after hydration, so an expression that reads `window`, `document` or `Intl` state never runs on the server. Plain children work too, but JSX children are evaluated by the component that renders `ClientOnly`, on the server included; a function is what keeps a browser-only expression off the server.\n\n```tsx live\n<ClientOnly fallback={<Skeleton variant=\"lines\" lines={1} />}>\n  {() => (\n    <Notification color=\"info\">\n      Times are shown in{' '}\n      <strong>{Intl.DateTimeFormat().resolvedOptions().timeZone}</strong>.\n    </Notification>\n  )}\n</ClientOnly>\n```\n\n### A component that needs the browser\n\nA component's own render is deferred along with it, so a component child works without the function form.\n\n```tsx\n<ClientOnly fallback={<Skeleton variant=\"block\" />}>\n  <MapWidget center={office} />\n</ClientOnly>\n```\n\n### A fallback that holds the layout\n\nWithout a `fallback` nothing renders until hydration, and the content pushes the page down when it arrives. A placeholder of the same size, such as a [`Skeleton`](../elements/skeleton.md), avoids the jump.\n\n```tsx\n<ClientOnly fallback={<Skeleton variant=\"lines\" lines={3} />}>\n  {() => <RecentlyViewed items={readHistory(localStorage)} />}\n</ClientOnly>\n```\n\n---\n\n## Accessibility\n\n- Content that arrives after hydration is not announced by screen readers on its own. Keep what a reader needs on first load out of `ClientOnly`, and use it for enhancements.\n- Match the fallback's size to the content, so the page doesn't shift under someone who has started reading or scrolling.\n- Assistive technology meets the fallback until it is replaced. An empty [`Skeleton`](../elements/skeleton.md) gives it nothing to read; a text fallback such as \"Loading…\" is read out.\n\n---\n\n## Related Components\n\n- [`Modal`](../components/modal.md): Its `portal` prop follows the same rule, rendering inline until the page has hydrated.\n- [`Skeleton`](../elements/skeleton.md): A placeholder to pass as `fallback`.\n- [`Reveal`](../components/reveal.md): Renders its final state on the server and animates only in the browser.\n\n---\n\n## Additional Resources\n\n- [Storybook: ClientOnly Stories](https://bestax.io/storybook/?path=/story/helpers-clientonly--default)\n- [React: hydration mismatches](https://react.dev/reference/react-dom/client/hydrateRoot#handling-different-client-and-server-content)\n\n---\n\n## Props\n\n| Prop       | Type                             | Default | Description                                                                                              |\n| ---------- | -------------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |\n| `children` | `ReactNode` \\| `() => ReactNode` | —       | Content to render once hydrated. A function is called only then, never on the server.                    |\n| `fallback` | `ReactNode`                      | `null`  | Rendered on the server and during hydration instead, such as a placeholder the same size as the content. |",
-  "parts": [],
-  "cssVars": []
+  "sourceFile": "bulma-ui/src/helpers/ClientOnly.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "ClientOnly",
+      "summary": "Renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't cause a hydration mismatch. The server render and the hydrating client render both show `fallback`, which keeps them identical; the children replace it in the commit that follows. In an app without server rendering the children show on the first render.",
+      "component": null,
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode | (() => React.ReactNode)",
+          "default": null,
+          "description": "Content to render once the page has hydrated. A function is called only then, so an inline expression that reads `window`, `document` or `localStorage` never runs on the server.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "fallback",
+          "type": "React.ReactNode",
+          "default": "null",
+          "description": "Rendered on the server and during hydration instead of `children`, such as a placeholder the same size as the content so the layout doesn't shift when it arrives.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": null,
+      "types": []
+    }
+  ],
+  "cssVars": [],
+  "doc": "# ClientOnly\n\n## Overview\n\n`ClientOnly` renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't cause a hydration mismatch.\n\nThe server render and the hydrating client render both show `fallback`, which keeps them identical; the children replace it in the commit that follows. Reach for it when the markup itself would differ between server and browser: the reader's time zone or locale, a value from `localStorage`, the viewport size, a widget that needs `window` to render at all. In an app without server rendering the children show on the first render, so wrapping something in `ClientOnly` costs nothing there.\n\nThe hook underneath, `useIsHydrated`, is exported too, for components that need the answer rather than a wrapper.\n\n---\n\n## Import\n\n```tsx\nimport { ClientOnly, useIsHydrated } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Hooks\n\n### useIsHydrated\n\nReturns `false` during server rendering and during the hydrating client render, then `true` from the commit that follows. A component that mounts after hydration (after a route change, or in an app with no server rendering) gets `true` on its first render, so it pays for no extra render.\n\n```tsx\nfunction Greeting() {\n  const hydrated = useIsHydrated();\n  // localStorage only exists in the browser, so the server render and the\n  // hydrating render both show the generic greeting.\n  const name = hydrated ? localStorage.getItem('name') : null;\n  return <Title size=\"4\">{name ? `Welcome back, ${name}` : 'Welcome'}</Title>;\n}\n```\n\n---\n\n## Usage\n\n### Browser-only content\n\nPass the content as a function and it is called only after hydration, so an expression that reads `window`, `document` or `Intl` state never runs on the server. Plain children work too, but JSX children are evaluated by the component that renders `ClientOnly`, on the server included; a function is what keeps a browser-only expression off the server.\n\n```tsx live\n<ClientOnly fallback={<Skeleton variant=\"lines\" lines={1} />}>\n  {() => (\n    <Notification color=\"info\">\n      Times are shown in{' '}\n      <strong>{Intl.DateTimeFormat().resolvedOptions().timeZone}</strong>.\n    </Notification>\n  )}\n</ClientOnly>\n```\n\n### A component that needs the browser\n\nA component's own render is deferred along with it, so a component child works without the function form.\n\n```tsx\n<ClientOnly fallback={<Skeleton variant=\"block\" />}>\n  <MapWidget center={office} />\n</ClientOnly>\n```\n\n### A fallback that holds the layout\n\nWithout a `fallback` nothing renders until hydration, and the content pushes the page down when it arrives. A placeholder of the same size, such as a [`Skeleton`](https://bestax.io/docs/api/elements/skeleton), avoids the jump.\n\n```tsx\n<ClientOnly fallback={<Skeleton variant=\"lines\" lines={3} />}>\n  {() => <RecentlyViewed items={readHistory(localStorage)} />}\n</ClientOnly>\n```\n\n---\n\n## Accessibility\n\n- Content that arrives after hydration is not announced by screen readers on its own. Keep what a reader needs on first load out of `ClientOnly`, and use it for enhancements.\n- Match the fallback's size to the content, so the page doesn't shift under someone who has started reading or scrolling.\n- Assistive technology meets the fallback until it is replaced. An empty [`Skeleton`](https://bestax.io/docs/api/elements/skeleton) gives it nothing to read; a text fallback such as \"Loading…\" is read out.\n\n---\n\n## Related Components\n\n- [`Modal`](https://bestax.io/docs/api/components/modal): Its `portal` prop follows the same rule, rendering inline until the page has hydrated.\n- [`Skeleton`](https://bestax.io/docs/api/elements/skeleton): A placeholder to pass as `fallback`.\n- [`Reveal`](https://bestax.io/docs/api/components/reveal): Renders its final state on the server and animates only in the browser.\n\n---\n\n## Additional Resources\n\n- [Storybook: ClientOnly Stories](https://bestax.io/storybook/?path=/story/helpers-clientonly--default)\n- [React: hydration mismatches](https://react.dev/reference/react-dom/client/hydrateRoot#handling-different-client-and-server-content)\n\n---\n\n## Props\n\n| Prop       | Type                             | Default | Description                                                                                              |\n| ---------- | -------------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |\n| `children` | `ReactNode` \\| `() => ReactNode` | —       | Content to render once hydrated. A function is called only then, never on the server.                    |\n| `fallback` | `ReactNode`                      | `null`  | Rendered on the server and during hydration instead, such as a placeholder the same size as the content. |"
 }

package/data/components/Columns.json

@@ -73,14 +73,14 @@
   "accessibility": null,
   "related": [],
   "storybook": null,
-  "summary": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.",
+  "summary": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](https://bestax.io/docs/api/columns/column) components.",
   "import": "import { Columns, Column } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/columns/Columns.tsx",
   "rootClass": "columns",
   "parts": [
     {
       "path": "Columns",
-      "summary": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.",
+      "summary": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](https://bestax.io/docs/api/columns/column) components.",
       "component": null,
       "props": [
         {

package/data/components/ConfigProvider.json

@@ -1,6 +1,6 @@
 {
   "name": "ConfigProvider",
-  "kind": "helper",
+  "kind": "component",
   "category": "helpers",
   "slug": "helpers/config",
   "docsUrl": "https://bestax.io/docs/api/helpers/config",
@@ -8,9 +8,49 @@
   "accessibility": null,
   "related": [],
   "storybook": null,
-  "summary": "The `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components.",
+  "summary": "ConfigProvider injects configuration into all child components via React context.",
   "import": "import { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';",
-  "doc": "# ConfigProvider\n\n## Overview\n\nThe `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components. Currently, it supports setting a `classPrefix` that will be automatically applied to **all Bulma CSS classes**, including both main component classes (like `button`, `box`, `title`) and helper/modifier classes (like `is-primary`, `has-text-centered`, `m-4`), allowing you to namespace Bulma classes to avoid conflicts with other CSS frameworks or customize the class naming convention.\n\n---\n\n## Import\n\n```tsx\nimport { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Hooks\n\n### useConfig\n\nReturns the current configuration context values.\n\n```tsx\nconst { classPrefix } = useConfig();\n```\n\n### useClassPrefix\n\nConvenience hook that returns just the classPrefix string (or empty string if not set).\n\n```tsx\nconst classPrefix = useClassPrefix();\n```\n\n---\n\n## Usage Examples\n\n### Basic Usage with Class Prefix\n\nUse `ConfigProvider` to add a prefix to all Bulma CSS classes within its scope:\n\n```tsx\nimport {\n  ConfigProvider,\n  Box,\n  Title,\n  Button,\n  Notification,\n} from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <div>\n      <Title size=\"3\">Prefixed Bulma Components</Title>\n      <p>\n        This demonstrates using ConfigProvider with{' '}\n        <code>classPrefix=\"bestax-\"</code> to add the \"bestax-\" prefix to all\n        component CSS classes. This is useful when integrating Bulma with other\n        CSS frameworks or when you need to namespace Bulma classes to avoid\n        conflicts.\n      </p>\n\n      <Notification color=\"info\" mt=\"4\">\n        <strong>Tip:</strong> Open your browser's developer tools and inspect\n        the DOM elements below. You'll see that all Bulma CSS classes have the\n        \"bestax-\" prefix applied.\n      </Notification>\n\n      <ConfigProvider classPrefix=\"bestax-\">\n        <Box mt=\"4\" p=\"4\">\n          {/* \n            This Box will have classes:\n            - bestax-box (main class)\n            - bestax-mt-4 (helper class)\n            - bestax-p-4 (helper class)\n          */}\n          <Title size=\"4\">Prefixed Components</Title>\n          {/* \n            This Title will have classes:\n            - bestax-title (main class)\n            - bestax-is-4 (modifier class)\n          */}\n          <p>\n            All components inside this ConfigProvider will have their CSS\n            classes prefixed with \"bestax-\". This allows you to use Bulma\n            alongside other CSS frameworks without class name conflicts.\n          </p>\n          <Button color=\"primary\" mt=\"3\" isRounded>\n            {/* \n              This Button will have classes:\n              - bestax-button (main class)\n              - bestax-is-primary (modifier class)\n              - bestax-is-rounded (modifier class)\n              - bestax-mt-3 (helper class)\n            */}\n            Bulma-Prefixed Button\n          </Button>\n        </Box>\n      </ConfigProvider>\n\n      <Box mt=\"4\" p=\"4\">\n        <Title size=\"4\">Standard Components (No Prefix)</Title>\n        <p>\n          Components outside the ConfigProvider use standard Bulma classes\n          without any prefix.\n        </p>\n        <Button color=\"info\">Standard Button</Button>\n      </Box>\n    </div>\n  );\n}\n```\n\n### Nested ConfigProviders\n\nConfigProviders can be nested, with inner providers overriding outer settings:\n\n```tsx\nfunction NestedExample() {\n  return (\n    <ConfigProvider classPrefix=\"outer-\">\n      <Box p=\"4\">\n        <Title>Outer Prefix (outer-)</Title>\n\n        <ConfigProvider classPrefix=\"inner-\">\n          <Box p=\"4\" mt=\"3\">\n            <Title>Inner Prefix (inner-)</Title>\n            <Button color=\"primary\">Inner Button</Button>\n          </Box>\n        </ConfigProvider>\n\n        <Button color=\"info\" mt=\"3\">\n          Outer Button\n        </Button>\n      </Box>\n    </ConfigProvider>\n  );\n}\n```\n\n### Using Configuration in Custom Components\n\nAccess the configuration in your own components using the `useConfig` hook:\n\n```tsx\nimport { useConfig } from '@allxsmith/bestax-bulma';\n\nfunction CustomComponent() {\n  const { classPrefix } = useConfig();\n  const className = classPrefix\n    ? `${classPrefix}custom-component`\n    : 'custom-component';\n\n  return (\n    <div className={className}>\n      My custom component with prefix: {classPrefix || 'none'}\n    </div>\n  );\n}\n```\n\n---\n\n## Use Cases\n\n### Framework Integration\n\nWhen integrating Bulma with other CSS frameworks like Bootstrap or Tailwind CSS:\n\n```tsx\n<ConfigProvider classPrefix=\"bestax-\">\n  <App />\n</ConfigProvider>\n```\n\nThis ensures all Bulma classes are prefixed with `bestax-`, preventing conflicts with other framework classes.\n\n### Multi-tenant Applications\n\nFor applications that need to support different styling themes or brands:\n\n```tsx\n<ConfigProvider classPrefix={`${tenantName}-`}>\n  <TenantApp />\n</ConfigProvider>\n```\n\n### Component Library Wrapping\n\nWhen wrapping Bulma UI components in your own component library:\n\n```tsx\n<ConfigProvider classPrefix=\"mylib-\">\n  <MyComponentLibrary />\n</ConfigProvider>\n```\n\n---\n\n## Notes\n\n- The `classPrefix` is applied to **all Bulma classes**:\n  - Main component classes (e.g., `button` → `bestax-button`, `box` → `bestax-box`)\n  - Helper/modifier classes (e.g., `is-primary` → `bestax-is-primary`, `has-text-centered` → `bestax-has-text-centered`)\n  - Spacing classes (e.g., `m-4` → `bestax-m-4`, `p-2` → `bestax-p-2`)\n  - All other Bulma utility classes\n- Changes to the `classPrefix` will affect all child components immediately\n- If no `classPrefix` is provided, components use standard Bulma class names\n- The ConfigProvider must wrap all components that should inherit the configuration\n\n---\n\n## TypeScript Support\n\nFull TypeScript support is included:\n\n```tsx\ninterface ConfigContextProps {\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n}\n\ninterface ConfigProviderProps {\n  children: ReactNode;\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n}\n```\n\n---\n\n## Props\n\n| Prop          | Type                                                               | Description                                                                                                     |\n| ------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |\n| `children`    | `ReactNode`                                                        | The child components that will inherit the configuration settings.                                              |\n| `classPrefix` | `string`                                                           | Optional prefix to add to all Bulma CSS classes. Useful for namespacing when integrating with other frameworks. |\n| `iconLibrary` | `'fa' \\| 'mdi' \\| 'ion' \\| 'material-icons' \\| 'material-symbols'` | Default icon library for all child components.                                                                  |",
-  "parts": [],
-  "cssVars": []
+  "sourceFile": "bulma-ui/src/helpers/Config.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "ConfigProvider",
+      "summary": "ConfigProvider injects configuration into all child components via React context.",
+      "component": null,
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Child components to receive configuration.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "classPrefix",
+          "type": "string",
+          "default": null,
+          "description": "Prefix applied to all Bulma class names.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "iconLibrary",
+          "type": "'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols'",
+          "default": null,
+          "description": "Default icon library for Icon components.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": null,
+      "types": []
+    }
+  ],
+  "cssVars": [],
+  "doc": "# ConfigProvider\n\n## Overview\n\nThe `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components. Currently, it supports setting a `classPrefix` that will be automatically applied to **all Bulma CSS classes**, including both main component classes (like `button`, `box`, `title`) and helper/modifier classes (like `is-primary`, `has-text-centered`, `m-4`), allowing you to namespace Bulma classes to avoid conflicts with other CSS frameworks or customize the class naming convention.\n\n---\n\n## Import\n\n```tsx\nimport { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Hooks\n\n### useConfig\n\nReturns the current configuration context values.\n\n```tsx\nconst { classPrefix } = useConfig();\n```\n\n### useClassPrefix\n\nConvenience hook that returns just the classPrefix string (or empty string if not set).\n\n```tsx\nconst classPrefix = useClassPrefix();\n```\n\n---\n\n## Usage Examples\n\n### Basic Usage with Class Prefix\n\nUse `ConfigProvider` to add a prefix to all Bulma CSS classes within its scope:\n\n```tsx\nimport {\n  ConfigProvider,\n  Box,\n  Title,\n  Button,\n  Notification,\n} from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <div>\n      <Title size=\"3\">Prefixed Bulma Components</Title>\n      <p>\n        This demonstrates using ConfigProvider with{' '}\n        <code>classPrefix=\"bestax-\"</code> to add the \"bestax-\" prefix to all\n        component CSS classes. This is useful when integrating Bulma with other\n        CSS frameworks or when you need to namespace Bulma classes to avoid\n        conflicts.\n      </p>\n\n      <Notification color=\"info\" mt=\"4\">\n        <strong>Tip:</strong> Open your browser's developer tools and inspect\n        the DOM elements below. You'll see that all Bulma CSS classes have the\n        \"bestax-\" prefix applied.\n      </Notification>\n\n      <ConfigProvider classPrefix=\"bestax-\">\n        <Box mt=\"4\" p=\"4\">\n          {/* \n            This Box will have classes:\n            - bestax-box (main class)\n            - bestax-mt-4 (helper class)\n            - bestax-p-4 (helper class)\n          */}\n          <Title size=\"4\">Prefixed Components</Title>\n          {/* \n            This Title will have classes:\n            - bestax-title (main class)\n            - bestax-is-4 (modifier class)\n          */}\n          <p>\n            All components inside this ConfigProvider will have their CSS\n            classes prefixed with \"bestax-\". This allows you to use Bulma\n            alongside other CSS frameworks without class name conflicts.\n          </p>\n          <Button color=\"primary\" mt=\"3\" isRounded>\n            {/* \n              This Button will have classes:\n              - bestax-button (main class)\n              - bestax-is-primary (modifier class)\n              - bestax-is-rounded (modifier class)\n              - bestax-mt-3 (helper class)\n            */}\n            Bulma-Prefixed Button\n          </Button>\n        </Box>\n      </ConfigProvider>\n\n      <Box mt=\"4\" p=\"4\">\n        <Title size=\"4\">Standard Components (No Prefix)</Title>\n        <p>\n          Components outside the ConfigProvider use standard Bulma classes\n          without any prefix.\n        </p>\n        <Button color=\"info\">Standard Button</Button>\n      </Box>\n    </div>\n  );\n}\n```\n\n### Nested ConfigProviders\n\nConfigProviders can be nested, with inner providers overriding outer settings:\n\n```tsx\nfunction NestedExample() {\n  return (\n    <ConfigProvider classPrefix=\"outer-\">\n      <Box p=\"4\">\n        <Title>Outer Prefix (outer-)</Title>\n\n        <ConfigProvider classPrefix=\"inner-\">\n          <Box p=\"4\" mt=\"3\">\n            <Title>Inner Prefix (inner-)</Title>\n            <Button color=\"primary\">Inner Button</Button>\n          </Box>\n        </ConfigProvider>\n\n        <Button color=\"info\" mt=\"3\">\n          Outer Button\n        </Button>\n      </Box>\n    </ConfigProvider>\n  );\n}\n```\n\n### Using Configuration in Custom Components\n\nAccess the configuration in your own components using the `useConfig` hook:\n\n```tsx\nimport { useConfig } from '@allxsmith/bestax-bulma';\n\nfunction CustomComponent() {\n  const { classPrefix } = useConfig();\n  const className = classPrefix\n    ? `${classPrefix}custom-component`\n    : 'custom-component';\n\n  return (\n    <div className={className}>\n      My custom component with prefix: {classPrefix || 'none'}\n    </div>\n  );\n}\n```\n\n---\n\n## Use Cases\n\n### Framework Integration\n\nWhen integrating Bulma with other CSS frameworks like Bootstrap or Tailwind CSS:\n\n```tsx\n<ConfigProvider classPrefix=\"bestax-\">\n  <App />\n</ConfigProvider>\n```\n\nThis ensures all Bulma classes are prefixed with `bestax-`, preventing conflicts with other framework classes.\n\n### Multi-tenant Applications\n\nFor applications that need to support different styling themes or brands:\n\n```tsx\n<ConfigProvider classPrefix={`${tenantName}-`}>\n  <TenantApp />\n</ConfigProvider>\n```\n\n### Component Library Wrapping\n\nWhen wrapping Bulma UI components in your own component library:\n\n```tsx\n<ConfigProvider classPrefix=\"mylib-\">\n  <MyComponentLibrary />\n</ConfigProvider>\n```\n\n---\n\n## Notes\n\n- The `classPrefix` is applied to **all Bulma classes**:\n  - Main component classes (e.g., `button` → `bestax-button`, `box` → `bestax-box`)\n  - Helper/modifier classes (e.g., `is-primary` → `bestax-is-primary`, `has-text-centered` → `bestax-has-text-centered`)\n  - Spacing classes (e.g., `m-4` → `bestax-m-4`, `p-2` → `bestax-p-2`)\n  - All other Bulma utility classes\n- Changes to the `classPrefix` will affect all child components immediately\n- If no `classPrefix` is provided, components use standard Bulma class names\n- The ConfigProvider must wrap all components that should inherit the configuration\n\n---\n\n## TypeScript Support\n\nFull TypeScript support is included:\n\n```tsx\ninterface ConfigContextProps {\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n}\n\ninterface ConfigProviderProps {\n  children: ReactNode;\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n}\n```\n\n---\n\n## Props\n\n| Prop          | Type                                                               | Description                                                                                                     |\n| ------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |\n| `children`    | `ReactNode`                                                        | The child components that will inherit the configuration settings.                                              |\n| `classPrefix` | `string`                                                           | Optional prefix to add to all Bulma CSS classes. Useful for namespacing when integrating with other frameworks. |\n| `iconLibrary` | `'fa' \\| 'mdi' \\| 'ion' \\| 'material-icons' \\| 'material-symbols'` | Default icon library for all child components.                                                                  |"
 }

package/data/components/DateInput.json

@@ -167,11 +167,11 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Date\">\n      <Field.Body>\n        <Field>\n          <DateInput placeholder=\"YYYY-MM-DD\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "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",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Date\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"calendar-alt\">\n            <DateInput placeholder=\"YYYY-MM-DD\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "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}"
     }
   ],
   "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name. Opening it puts focus on the focused date, month or year.\n- Closing the popover with `Escape` or a pick returns focus to the input, whether the input or the launcher opened it. Under `openOnFocus` that returning focus leaves the popover closed; focusing or clicking the input again opens it. Dismissing without a pick commits nothing: an empty field stays empty, and leaving afterwards commits only what you typed.\n- Calendar uses `role=\"grid\"` with cells as `role=\"gridcell\"`.\n- Cells expose `aria-selected`, `aria-disabled`, and `aria-current=\"date\"` for today.\n- Roving `tabindex` keeps a single grid cell focusable at a time, and focus moves with it, inline as in the popover. When the focused date is disabled, that cell is the nearest enabled day of the month.\n- The month grid is a `role=\"grid\"` of `role=\"row\"`s, labelled by the year in its header. Each month cell carries the full month name as its accessible name, `aria-current=\"date\"` for this month and `aria-disabled` for a month with no selectable day.\n- The year list is a `role=\"listbox\"` named by the `chooseYear` label. As the selection surface its options take `aria-selected` from the value's year rather than from focus, which roves through the list. When the focused year is disabled, the nearest enabled year takes the tab stop, so `Tab` still reaches the list.\n- The launcher and popover are named \"Choose month\" or \"Choose year\" to match the granularity; override them, and the month grid's \"Previous year\" / \"Next year\" buttons, through `labels` (`chooseMonth`, `chooseYear`, `prevYear`, `nextYear`).\n- Honors `prefers-reduced-motion` (skip popover fade-in).",
@@ -191,7 +191,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`.",
+          "description": "Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/DateRangeInput.json

@@ -46,7 +46,7 @@
       "code": "<Field label=\"Leave\">\n  <Control iconLeftName=\"calendar-alt\">\n    <DateRangeInput />\n  </Control>\n</Field>"
     }
   ],
-  "accessibility": "- The root is a `role=\"group\"` named by `label` through `aria-labelledby`, since the label names two inputs rather than one.\n- Each input is a `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`, and its own name: \"Start date\" or \"End date\", from the `labels` keys `rangeStart` and `rangeEnd`. The separator between them is hidden from assistive technology.\n- The popover is a `role=\"dialog\"` named \"Choose date range\" (`labels.chooseDateRange`). Opening it puts focus on the calendar's focused day, and closing it returns focus to the input you were last in, or to the start input.\n- The day grid is `aria-multiselectable`, and its days sit in a `role=\"row\"` per week. Every day of the range is `aria-selected`, both ends included. While the end is still being picked, only the start is: the preview is not a selection.\n- The start and end days are described as \"Start date\" and \"End date\", so moving onto either says which it is. While the end is still being picked, the day the range would end on is described as \"Choose as end date\" (`labels.rangePreviewEnd`).\n- A polite live region in the calendar states the range in words, such as \"Start date: June 10, 2024, End date: June 13, 2024\", and announces each pick. The grid points at it too, so moving into the grid reads the current range.\n- Everything else is the calendar `DateInput` uses: a roving `tabindex`, `aria-disabled` on disabled days and `aria-current=\"date\"` on today.",
+  "accessibility": "- The root is a `role=\"group\"` named by `label` through `aria-labelledby`, since the label names two inputs rather than one. Inside a labeled `Field`, that `Field`'s label names the group the same way. An `aria-label` or `aria-labelledby` you give the group wins over either label.\n- Each input is a `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`, and its own name: \"Start date\" or \"End date\", from the `labels` keys `rangeStart` and `rangeEnd`. The separator between them is hidden from assistive technology.\n- The popover is a `role=\"dialog\"` named \"Choose date range\" (`labels.chooseDateRange`). Opening it puts focus on the calendar's focused day, and closing it returns focus to the input you were last in, or to the start input.\n- The day grid is `aria-multiselectable`, and its days sit in a `role=\"row\"` per week. Every day of the range is `aria-selected`, both ends included. While the end is still being picked, only the start is: the preview is not a selection.\n- The start and end days are described as \"Start date\" and \"End date\", so moving onto either says which it is. While the end is still being picked, the day the range would end on is described as \"Choose as end date\" (`labels.rangePreviewEnd`).\n- A polite live region in the calendar states the range in words, such as \"Start date: June 10, 2024, End date: June 13, 2024\", and announces each pick. The grid points at it too, so moving into the grid reads the current range.\n- Everything else is the calendar `DateInput` uses: a roving `tabindex`, `aria-disabled` on disabled days and `aria-current=\"date\"` on today.",
   "related": ["DateInput", "DateTimeInput", "Field"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-daterangeinput",
   "summary": "The `DateRangeInput` component is a form input for a start and end date, picked from one popover calendar or typed into two segmented inputs.",
@@ -63,7 +63,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label naming the whole range. Associated through `aria-labelledby` on the `role=\"group\"` root, since it names two inputs rather than one; uses your `labelProps.id` when provided, otherwise a generated one. Each input keeps its own name, \"Start date\" or \"End date\" (`labels.rangeStart` / `labels.rangeEnd`). Dropped inside an outer `Field`.",
+          "description": "Field label naming the whole range. Associated through `aria-labelledby` on the `role=\"group\"` root, since it names two inputs rather than one; uses your `labelProps.id` when provided, otherwise a generated one. Each input keeps its own name, \"Start date\" or \"End date\" (`labels.rangeStart` / `labels.rangeEnd`). Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/DateTimeInput.json

@@ -143,11 +143,11 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"When\">\n      <Field.Body>\n        <Field>\n          <DateTimeInput placeholder=\"YYYY-MM-DD HH:MM\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "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",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"When\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"calendar-alt\">\n            <DateTimeInput placeholder=\"YYYY-MM-DD HH:MM\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "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",
@@ -187,7 +187,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`.",
+          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Dialog.json

@@ -30,7 +30,7 @@
       "code": "function example() {\n  const [showDialog, setShowDialog] = useState(false);\n  return (\n    <Block>\n      <Button onClick={() => setShowDialog(true)}>Show Portaled Dialog</Button>\n      <Dialog\n        isOpen={showDialog}\n        title=\"Rendered in document.body\"\n        message=\"This dialog is portaled, so it escapes any ancestor with overflow: hidden.\"\n        onConfirm={() => setShowDialog(false)}\n        showCancel={false}\n        portal\n      />\n    </Block>\n  );\n}"
     }
   ],
-  "accessibility": "- Uses `role=\"alertdialog\"` for proper screen reader announcement\n- Has `aria-modal=\"true\"` to indicate modal behavior — note this does not make background content inert; no `inert` attribute is applied, so background content stays reachable by pointer\n- `title` is wired up as `aria-labelledby` and `message` as `aria-describedby`\n- Focus moves to the confirm (or cancel, with `focusCancel`) button when opened\n- Escape key closes the dialog (when `canCancel` is true) — handled by the underlying [`Modal`](./modal.md), which routes it to the topmost open modal only\n- Tab and Shift+Tab cycle within the dialog while it is open — also from the underlying [`Modal`](./modal.md)\n- Body scroll is prevented when dialog is open, through the ref-counted lock shared with `Modal`, `Sidebar` and `Loading`\n- Confirm/cancel buttons are keyboard accessible",
+  "accessibility": "- Uses `role=\"alertdialog\"` for proper screen reader announcement\n- Has `aria-modal=\"true\"` to indicate modal behavior — note this does not make background content inert; no `inert` attribute is applied, so background content stays reachable by pointer\n- `title` is wired up as `aria-labelledby` and `message` as `aria-describedby`\n- Focus moves to the confirm (or cancel, with `focusCancel`) button when opened\n- Escape key closes the dialog (when `canCancel` is true) — handled by the underlying [`Modal`](https://bestax.io/docs/api/components/modal), which routes it to the topmost open modal only\n- Tab and Shift+Tab cycle within the dialog while it is open — also from the underlying [`Modal`](https://bestax.io/docs/api/components/modal)\n- Body scroll is prevented when dialog is open, through the ref-counted lock shared with `Modal`, `Sidebar` and `Loading`\n- Confirm/cancel buttons are keyboard accessible",
   "related": ["Modal", "Toast"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-dialog",
   "summary": "The `Dialog` component provides ready-made confirm and alert dialogs, so a destructive action stays one `await dialog.confirm()` call away.",

package/data/components/Field.json

@@ -19,7 +19,7 @@
     },
     {
       "title": "With File",
-      "code": "<Field label=\"Upload Resume\">\n  <File label=\"Choose a file...\" />\n</Field>"
+      "code": "<Field label=\"Upload Resume\">\n  <File buttonLabel=\"Choose a file...\" />\n</Field>"
     },
     {
       "title": "With Input (Default)",
@@ -86,7 +86,7 @@
       "code": "<Field horizontal>\n  <Field.Label>Name</Field.Label>\n  <Field.Body>\n    <Field.Control>\n      <Input placeholder=\"Jane Doe\" />\n    </Field.Control>\n  </Field.Body>\n</Field>"
     }
   ],
-  "accessibility": "- The `label` prop is automatically associated with a single composed `InputBase`, `SelectBase`, or `TextAreaBase` (or an `Input`, `Select`, or `TextArea` nested inside — other convenience inputs don't adopt): the label points at a generated id the control adopts, so clicking it focuses the control and assistive technology announces it.\n- Pass `labelProps={{ htmlFor }}` and a matching `id` when you want a stable id of your own; pass `labelProps={{ htmlFor: undefined }}` to opt out of the association entirely.\n- Association is skipped for `grouped`/`hasAddons` fields (they hold several controls). A labeled Field whose content is not one of the adopting controls (e.g. a checkbox group) renders its `for` unmatched — functionally the same as an unassociated label; label such groups via their own `label` prop instead.\n- Grouped/horizontal layouts use Bulma’s grid for layout.\n- Always use the `label` prop or a custom label for clarity.",
+  "accessibility": "- The `label` prop names the one control the Field holds. A composed `InputBase`, `SelectBase`, or `TextAreaBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id the label's `for` points at, so clicking the label focuses the control and assistive technology announces it.\n- A group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) can't take a `for`, so the label gets an id (yours from `labelProps.id`, otherwise a generated one) and the group points `aria-labelledby` at it. An `aria-label` or `aria-labelledby` you set on the group wins over the Field's label, as it does over a group's own `label`.\n- An `id` you set on the control wins too: it keeps that id, and the label then names it only if you point `labelProps={{ htmlFor }}` at it. Pass `labelProps={{ htmlFor: undefined }}` to opt out of the association entirely.\n- Association is skipped for `grouped`/`hasAddons` fields (they hold several controls), and a `Field` nested inside a labeled one starts its own scope. A horizontal Field wraps its children in a `Field.Body` of its own and keeps the association, but the pattern with an inner `Field` in that body needs it wired by hand.\n- Two controls in one plain labeled Field would both adopt its id. Give each an `id` of its own and label it individually.\n- A labeled Field whose content takes no `for`, a group included, renders its `for` unmatched. `Checkbox`, `Radio` and `Switch` take nothing from the label at all: each is named by its own children, so put the text there rather than in the Field's `label`. Where you point content at the label by hand, as with a group in an inner `Field`, pass `labelProps={{ id, htmlFor: undefined }}` so the label keeps its id and drops the `for`.\n- Grouped/horizontal layouts use Bulma’s grid for layout.\n- Always use the `label` prop or a custom label for clarity.",
   "related": [
     "Checkbox",
     "Checkboxes",
@@ -149,7 +149,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label, rendered above the widget. Automatically associated with a single composed `InputBase`, `SelectBase`, or `TextAreaBase` via a generated id and `htmlFor`. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls).",
+          "description": "Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase` or `TextAreaBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children. Only the single inputs take the `htmlFor`, so with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -167,7 +167,7 @@
           "name": "labelProps",
           "type": "React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }",
           "default": null,
-          "description": "Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association.",
+          "description": "Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. An `id` here is the one a group control's `aria-labelledby` points at; otherwise the label gets a generated one while the association is on. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/File.json

@@ -67,14 +67,14 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Document\">\n      <Field.Body>\n        <Field>\n          <File\n            buttonLabel=\"Choose a file…\"\n            iconLeft={<Icon name=\"upload\" aria-hidden=\"true\" />}\n          />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "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",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Document\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"paperclip\">\n            <File\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}"
+      "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}"
     }
   ],
-  "accessibility": "- The root is a `<div class=\"file\">` with a nested `<label>` and `<input type=\"file\">`.\n- The label is always clickable.\n- The focus ring shows for keyboard focus only, drawn inside the CTA in Bulma's focus color, width and style (`--bulma-focus-h`, `--bulma-focus-s`, `--bulma-focus-l`, `--bulma-focus-width`, `--bulma-focus-style`). On a colored `File` it takes the CTA's text color instead, so it shows against the fill. It comes from the bestax extras (`extras.css`, or `bestax.css`, which includes them); with Bulma's CSS alone the input shows no focus ring.\n- When `File` renders its own `Field` (that is, outside an existing one), the Field-level `label` prop is automatically associated with the file input via `htmlFor`, so the input then has two labels (the Field label plus the wrapping CTA label); assistive technology reads both. An explicit `labelProps.htmlFor` overrides the association and no id is generated.\n- The name area sits inside the CTA's label, so with `hasName` its text joins the input's accessible name (\"Choose a file… resume.pdf\"). Browsers can also expose a picked file on the input itself, so a screen reader may read the name twice. It stays in the label because text you pass in `fileName`, such as a file uploaded earlier, reaches assistive technology only from there.\n- Add `aria-label` to the `<input>` for accessibility if your label is not plain text.",
+  "accessibility": "- The root is a `<div class=\"file\">` with a nested `<label>` and `<input type=\"file\">`.\n- The label is always clickable.\n- The focus ring shows for keyboard focus only, drawn inside the CTA in Bulma's focus color, width and style (`--bulma-focus-h`, `--bulma-focus-s`, `--bulma-focus-l`, `--bulma-focus-width`, `--bulma-focus-style`). On a colored `File` it takes the CTA's text color instead, so it shows against the fill. It comes from the bestax extras (`extras.css`, or `bestax.css`, which includes them); with Bulma's CSS alone the input shows no focus ring.\n- When `File` renders its own `Field` (that is, outside an existing one), the Field-level `label` prop is automatically associated with the file input via `htmlFor`, so the input then has two labels (the Field label plus the wrapping CTA label); assistive technology reads both. An explicit `labelProps.htmlFor` overrides the association and no id is generated. Inside a labeled `Field`, that `Field`'s label is associated with the file input the same way, so the input again has two labels.\n- The name area sits inside the CTA's label, so with `hasName` its text joins the input's accessible name (\"Choose a file… resume.pdf\"). Browsers can also expose a picked file on the input itself, so a screen reader may read the name twice. It stays in the label because text you pass in `fileName`, such as a file uploaded earlier, reaches assistive technology only from there.\n- Add `aria-label` to the `<input>` for accessibility if your label is not plain text.",
   "related": ["Field", "Icon", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-file--default",
   "summary": "The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, \"has name\", and filename display.",
@@ -91,7 +91,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field` (label that `Field` yourself).",
+          "description": "Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Grid.json

@@ -223,7 +223,7 @@
     },
     {
       "path": "Grid.Cell",
-      "summary": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.",
+      "summary": "The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](https://bestax.io/docs/api/grid) component.",
       "component": "Cell",
       "props": [
         {