bestax-mcp 1.13.0 → 1.14.0

package/README.md

@@ -26,6 +26,10 @@ you when they disagree, rather than confidently describing props you do not have
 
 ## Setup
 
+Each release is published to the official
+[MCP Registry](https://registry.modelcontextprotocol.io) as
+`io.github.allxsmith/bestax-mcp`, for clients that install from it.
+
 ### Claude Code
 
 ```bash

package/data/bulma-classes.json

@@ -6449,11 +6449,27 @@
     },
     {
       "why": "an `.image` modifier, which converts only on its own `.image`, and only where bestax has a prop for it",
-      "match": "^(?:is-\\d+by\\d+|is-\\d+x\\d+|is-square|is-aspect-ratio-.+|has-ratio)$"
+      "match": "^(?:is-\\d+by\\d+|is-\\d+x\\d+|is-square|has-ratio)$"
+    },
+    {
+      "why": "a Bulma helper the codemod does not convert; the `pos` prop renders it",
+      "match": "^is-position-.+$"
+    },
+    {
+      "why": "a Bulma helper the codemod does not convert; the `overflow`, `overflowX` and `overflowY` props render it",
+      "match": "^is-overflow-.+$"
+    },
+    {
+      "why": "a Bulma helper the codemod does not convert; the `radius` prop renders it",
+      "match": "^has-radius-.+$"
+    },
+    {
+      "why": "a Bulma helper the codemod does not convert; the `aspectRatio` prop renders it",
+      "match": "^is-aspect-ratio-.+$"
     },
     {
       "why": "a Bulma helper with no bestax prop",
-      "match": "^(?:is-display-.+|is-visibility-.+|is-overflow-.+|is-position-.+|is-float-.+|is-clear-.+|has-radius-.+|has-text-weight-extrabold|is-align-content-(?:baseline|start|end)|is-align-items-self-(?:start|end)|is-offset-0(?:-[a-z]+)?)$"
+      "match": "^(?:is-display-.+|is-visibility-.+|is-float-.+|is-clear-.+|has-text-weight-extrabold|is-align-content-(?:baseline|start|end)|is-align-items-self-(?:start|end)|is-offset-0(?:-[a-z]+)?)$"
     },
     {
       "why": "a `.breadcrumb` separator, which converts only on its own `.breadcrumb`",

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.18.0"
+    "version": "5.23.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -26,6 +26,7 @@
         "Link",
         "LinkButton",
         "ListItem",
+        "Loader",
         "Notification",
         "OrderedList",
         "Paragraph",
@@ -53,6 +54,7 @@
         "Card",
         "Carousel",
         "Collapse",
+        "Collapses",
         "Dialog",
         "Dropdown",
         "Loading",
@@ -62,6 +64,7 @@
         "Navbar",
         "Pagination",
         "Panel",
+        "Popover",
         "Reveal",
         "Sidebar",
         "Steps",
@@ -110,11 +113,14 @@
       "id": "helpers",
       "label": "Helpers",
       "components": [
+        "ClientOnly",
         "ConfigProvider",
+        "Portal",
         "Theme",
         "Valid value constants",
         "classNames",
         "useBulmaClasses",
+        "useFocusTrap",
         "usePrefixedClassNames"
       ]
     }
@@ -274,6 +280,17 @@
       "propCount": 20,
       "exampleCount": 5
     },
+    {
+      "name": "ClientOnly",
+      "kind": "helper",
+      "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 } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 0,
+      "exampleCount": 3
+    },
     {
       "name": "Code",
       "kind": "component",
@@ -293,8 +310,19 @@
       "slug": "components/collapse",
       "import": "import { Collapse } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 11,
-      "exampleCount": 7
+      "propCount": 12,
+      "exampleCount": 6
+    },
+    {
+      "name": "Collapses",
+      "kind": "component",
+      "category": "components",
+      "purpose": "The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.",
+      "slug": "components/collapses",
+      "import": "import { Collapses, Collapse } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 19,
+      "exampleCount": 8
     },
     {
       "name": "Column",
@@ -370,8 +398,8 @@
       "slug": "form/datetime/dateinput",
       "import": "import { DateInput } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 52,
-      "exampleCount": 37
+      "propCount": 53,
+      "exampleCount": 41
     },
     {
       "name": "DateTimeInput",
@@ -382,7 +410,7 @@
       "import": "import { DateTimeInput } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 62,
-      "exampleCount": 39
+      "exampleCount": 40
     },
     {
       "name": "Delete",
@@ -423,10 +451,10 @@
       "category": "components",
       "purpose": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",
       "slug": "components/dropdown",
-      "import": "import { Dropdown } from '@allxsmith/bestax-bulma';",
+      "import": "import { Dropdown, Button, Field, Control, Span } from '@allxsmith/bestax-bulma';",
       "compound": true,
       "propCount": 17,
-      "exampleCount": 8
+      "exampleCount": 9
     },
     {
       "name": "Emphasis",
@@ -544,10 +572,10 @@
       "category": "form",
       "purpose": "The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states, and…",
       "slug": "form/input",
-      "import": "import { Input, Field, Control } from '@allxsmith/bestax-bulma';",
+      "import": "import { Input, Field, Control, Button, Select, Icon } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 29,
-      "exampleCount": 28
+      "exampleCount": 30
     },
     {
       "name": "Level",
@@ -593,6 +621,17 @@
       "propCount": 4,
       "exampleCount": 6
     },
+    {
+      "name": "Loader",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.",
+      "slug": "elements/loader",
+      "import": "import { Loader } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 2,
+      "exampleCount": 5
+    },
     {
       "name": "Loading",
       "kind": "component",
@@ -725,6 +764,28 @@
       "propCount": 4,
       "exampleCount": 10
     },
+    {
+      "name": "Popover",
+      "kind": "component",
+      "category": "components",
+      "purpose": "The `Popover` component opens a panel of interactive content, such as a filter form or a set of share options, anchored to the element that toggles it.",
+      "slug": "components/popover",
+      "import": "import { Popover } from '@allxsmith/bestax-bulma';",
+      "compound": true,
+      "propCount": 33,
+      "exampleCount": 8
+    },
+    {
+      "name": "Portal",
+      "kind": "helper",
+      "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,
+      "exampleCount": 3
+    },
     {
       "name": "Pre",
       "kind": "component",
@@ -1037,7 +1098,7 @@
       "name": "Valid value constants",
       "kind": "helper",
       "category": "helpers",
-      "purpose": "The `valid*` tuples enumerate the core accepted values for the shared Bulma helper props — public API for building prop types and validation.",
+      "purpose": "The helper tuples enumerate the core accepted values for the shared Bulma helper props — public API for building prop types and validation.",
       "slug": "helpers/valid-values",
       "import": "import { Valid value constants } from '@allxsmith/bestax-bulma';",
       "compound": false,
@@ -1064,7 +1125,18 @@
       "import": "import { useBulmaClasses } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 0,
-      "exampleCount": 43
+      "exampleCount": 45
+    },
+    {
+      "name": "useFocusTrap",
+      "kind": "helper",
+      "category": "helpers",
+      "purpose": "`useFocusTrap` keeps keyboard focus inside a container while it is active: focus moves in when the trap turns on, Tab and Shift+Tab wrap between the first and…",
+      "slug": "helpers/usefocustrap",
+      "import": "import { useFocusTrap } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 0,
+      "exampleCount": 2
     },
     {
       "name": "usePrefixedClassNames",
@@ -1297,6 +1369,7 @@
     "--bulma-dateinput-cell-today-color": "DateTimeInput",
     "--bulma-dateinput-day-name-color": "DateTimeInput",
     "--bulma-dateinput-day-name-size": "DateTimeInput",
+    "--bulma-dateinput-focus-ring-color": "DateTimeInput",
     "--bulma-dateinput-header-padding": "DateTimeInput",
     "--bulma-dateinput-min-width": "DateTimeInput",
     "--bulma-dateinput-nav-button-size": "DateTimeInput",
@@ -1666,6 +1739,22 @@
     "--bulma-picker-popover-radius": "TimeInput",
     "--bulma-picker-popover-shadow": "TimeInput",
     "--bulma-picker-popover-z-index": "TimeInput",
+    "--bulma-popover-animation-duration": "Popover",
+    "--bulma-popover-background": "Popover",
+    "--bulma-popover-body-padding": "Popover",
+    "--bulma-popover-border-color": "Popover",
+    "--bulma-popover-color": "Popover",
+    "--bulma-popover-footer-gap": "Popover",
+    "--bulma-popover-footer-padding": "Popover",
+    "--bulma-popover-header-color": "Popover",
+    "--bulma-popover-header-padding": "Popover",
+    "--bulma-popover-header-weight": "Popover",
+    "--bulma-popover-max-width": "Popover",
+    "--bulma-popover-min-width": "Popover",
+    "--bulma-popover-offset": "Popover",
+    "--bulma-popover-radius": "Popover",
+    "--bulma-popover-shadow": "Popover",
+    "--bulma-popover-z-index": "Popover",
     "--bulma-pre-code-font-size": "Pre",
     "--bulma-pre-font-size": "Pre",
     "--bulma-pre-padding": "Pre",

package/data/components/Autocomplete.json

@@ -206,7 +206,7 @@
           "name": "loading",
           "type": "boolean",
           "default": "false",
-          "description": "Show loading state.",
+          "description": "Show a loading spinner in the input. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Avatar.json

@@ -55,7 +55,7 @@
           "name": "as",
           "type": "React.ElementType",
           "default": null,
-          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. This also decides whether the avatar is treated as interactive, which is what keeps `role=\"img\"` and the `alt=\"\"` decorative opt-out off a link or button. A custom component counts — a router link takes `to` rather than this component's `href`, so its own props cannot say — while `'a'`, `'button'`, and a custom element given an `href` count for the reason they read. If your custom component renders something that really is just a picture, say so with `role=\"img\"` and it is treated as one, `alt=\"\"` included. A truthy `aria-hidden` says it too, and so do `role=\"presentation\"` and `role=\"none\"` — though ARIA's own conflict resolution drops those two whenever the avatar still carries a name, so prefer `role=\"img\"`. A role claiming the opposite, such as `\"button\"`, says nothing here, and neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href` avatar keeps its accessible name either way.",
+          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. This also decides whether the avatar is treated as interactive, which is what keeps `role=\"img\"` and the `alt=\"\"` decorative opt-out off a link or button. A custom component counts — a router link takes `to` rather than this component's `href`, so its own props cannot say — while `'a'`, `'button'`, and a custom element given an `href` count for the reason they read. If your custom component renders something that really is just a picture, say so with `role=\"img\"` and it is treated as one, `alt=\"\"` included. A truthy `aria-hidden` says it too, and so do `role=\"presentation\"` and `role=\"none\"` — though ARIA's own conflict resolution drops those two whenever the avatar still carries a name, so prefer `role=\"img\"`. A role claiming the opposite, such as `\"button\"`, says nothing here, and neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href` avatar keeps its accessible name either way. `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so an avatar inside a form does not submit it.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Avatars.json

@@ -137,7 +137,7 @@
           "name": "as",
           "type": "React.ElementType",
           "default": null,
-          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. This also decides whether the avatar is treated as interactive, which is what keeps `role=\"img\"` and the `alt=\"\"` decorative opt-out off a link or button. A custom component counts — a router link takes `to` rather than this component's `href`, so its own props cannot say — while `'a'`, `'button'`, and a custom element given an `href` count for the reason they read. If your custom component renders something that really is just a picture, say so with `role=\"img\"` and it is treated as one, `alt=\"\"` included. A truthy `aria-hidden` says it too, and so do `role=\"presentation\"` and `role=\"none\"` — though ARIA's own conflict resolution drops those two whenever the avatar still carries a name, so prefer `role=\"img\"`. A role claiming the opposite, such as `\"button\"`, says nothing here, and neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href` avatar keeps its accessible name either way.",
+          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. This also decides whether the avatar is treated as interactive, which is what keeps `role=\"img\"` and the `alt=\"\"` decorative opt-out off a link or button. A custom component counts — a router link takes `to` rather than this component's `href`, so its own props cannot say — while `'a'`, `'button'`, and a custom element given an `href` count for the reason they read. If your custom component renders something that really is just a picture, say so with `role=\"img\"` and it is treated as one, `alt=\"\"` included. A truthy `aria-hidden` says it too, and so do `role=\"presentation\"` and `role=\"none\"` — though ARIA's own conflict resolution drops those two whenever the avatar still carries a name, so prefer `role=\"img\"`. A role claiming the opposite, such as `\"button\"`, says nothing here, and neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href` avatar keeps its accessible name either way. `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so an avatar inside a form does not submit it.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Button.json

@@ -8,7 +8,7 @@
     { "title": "Default Button", "code": "<Button>Default Button</Button>" },
     {
       "title": "All Colors",
-      "code": "import { Buttons } from './Buttons';\n\n<Buttons>\n  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (\n    <Button key={color} color={color}>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Button>\n  ))}\n</Buttons>;"
+      "code": "<Buttons>\n  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (\n    <Button key={color} color={color}>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
     },
     {
       "title": "All Sizes",
@@ -159,7 +159,7 @@
           "name": "isLoading",
           "type": "boolean",
           "default": "false",
-          "description": "Displays a loading spinner.",
+          "description": "Displays a loading spinner. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Buttons.json

@@ -193,7 +193,7 @@
           "name": "isLoading",
           "type": "boolean",
           "default": "false",
-          "description": "Displays a loading spinner.",
+          "description": "Displays a loading spinner. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -387,7 +387,7 @@
           "name": "isLoading",
           "type": "boolean",
           "default": "false",
-          "description": "Displays a loading spinner.",
+          "description": "Displays a loading spinner. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/Card.json

@@ -397,7 +397,26 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "default": "'button'",
+          "description": "Button type. Defaults to `'button'`, so a header icon inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "'more options'",
+          "description": "Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard <button> attributes and Bulma helper props",
       "types": []
     },

package/data/components/Carousel.json

@@ -117,7 +117,7 @@
           "name": "arrow",
           "type": "boolean",
           "default": "true",
-          "description": "Show navigation arrows. Default: true.",
+          "description": "Show navigation arrows. Default: true. They render `type=\"button\"`, so a carousel inside a form is not submitted by moving between slides.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -135,7 +135,7 @@
           "name": "indicator",
           "type": "boolean",
           "default": "true",
-          "description": "Show slide indicators. Default: true.",
+          "description": "Show slide indicators. Default: true. They render `type=\"button\"`, so a carousel inside a form is not submitted by picking a slide.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/ClientOnly.json

@@ -0,0 +1,29 @@
+{
+  "name": "ClientOnly",
+  "kind": "helper",
+  "category": "helpers",
+  "slug": "helpers/clientonly",
+  "docsUrl": "https://bestax.io/docs/api/helpers/clientonly",
+  "examples": [
+    {
+      "title": "Browser-only content",
+      "code": "<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>"
+    },
+    {
+      "title": "A component that needs the browser",
+      "code": "<ClientOnly fallback={<Skeleton variant=\"block\" />}>\n  <MapWidget center={office} />\n</ClientOnly>"
+    },
+    {
+      "title": "A fallback that holds the layout",
+      "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.",
+  "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…",
+  "import": "import { ClientOnly } 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": []
+}

package/data/components/Collapse.json

@@ -19,22 +19,18 @@
     },
     {
       "title": "Controlled Mode",
-      "code": "function example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Block>\n      <Block mb=\"4\">\n        <Button color=\"primary\" onClick={() => setIsOpen(!isOpen)}>\n          {isOpen ? 'Close' : 'Open'} Collapse\n        </Button>\n        <Span ml=\"4\">State: {isOpen ? 'Open' : 'Closed'}</Span>\n      </Block>\n      <Collapse\n        open={isOpen}\n        trigger={\n          <Block p=\"3\" bgColor=\"white-ter\" style={{ borderRadius: '4px' }}>\n            Controlled collapse (use button above)\n          </Block>\n        }\n      >\n        <Block p=\"3\">\n          <Paragraph>This collapse is controlled by external state.</Paragraph>\n        </Block>\n      </Collapse>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Block>\n      <Block mb=\"4\">\n        <Button color=\"primary\" onClick={() => setIsOpen(!isOpen)}>\n          {isOpen ? 'Close' : 'Open'} Collapse\n        </Button>\n        <Span ml=\"4\">State: {isOpen ? 'Open' : 'Closed'}</Span>\n      </Block>\n      <Collapse\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        trigger={\n          <Block p=\"3\" bgColor=\"white-ter\" style={{ borderRadius: '4px' }}>\n            Controlled collapse (click here or the button above)\n          </Block>\n        }\n      >\n        <Block p=\"3\">\n          <Paragraph>This collapse is controlled by external state.</Paragraph>\n        </Block>\n      </Collapse>\n    </Block>\n  );\n}"
     },
     {
       "title": "Accordion",
-      "code": "function example() {\n  const [openIndex, setOpenIndex] = useState(0);\n\n  const items = [\n    { title: 'Section 1', content: 'Content for section 1.' },\n    { title: 'Section 2', content: 'Content for section 2.' },\n    { title: 'Section 3', content: 'Content for section 3.' },\n  ];\n\n  return (\n    <Block display=\"flex\" flexDirection=\"column\">\n      {items.map((item, index) => (\n        <Collapse\n          key={index}\n          className=\"collapse is-bordered\"\n          open={openIndex === index}\n          trigger={\n            <Block\n              p=\"4\"\n              onClick={() => setOpenIndex(openIndex === index ? -1 : index)}\n              display=\"flex\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n            >\n              <Strong>{item.title}</Strong>\n              <Span>{openIndex === index ? '−' : '+'}</Span>\n            </Block>\n          }\n        >\n          <Paragraph p=\"4\">{item.content}</Paragraph>\n        </Collapse>\n      ))}\n    </Block>\n  );\n}"
-    },
-    {
-      "title": "Card Style",
-      "code": "function example() {\n  return (\n    <Collapse\n      className=\"collapse is-card\"\n      defaultOpen\n      trigger={\n        <Block className=\"collapse-trigger-header\">\n          <Span>Card Collapse</Span>\n          <Icon name=\"fas fa-chevron-down\" aria-hidden=\"true\" />\n        </Block>\n      }\n    >\n      <Paragraph>\n        This collapse is styled like a card with shadow and padding.\n      </Paragraph>\n      <Paragraph>Perfect for FAQ sections or settings panels.</Paragraph>\n    </Collapse>\n  );\n}"
+      "code": "function example() {\n  const [openIndex, setOpenIndex] = useState<number | null>(0);\n\n  const items = [\n    { title: 'Section 1', content: 'Content for section 1.' },\n    { title: 'Section 2', content: 'Content for section 2.' },\n    { title: 'Section 3', content: 'Content for section 3.' },\n  ];\n\n  return (\n    <Collapses value={openIndex} onChange={setOpenIndex}>\n      {items.map((item, index) => (\n        <Collapse\n          key={item.title}\n          bordered\n          trigger={\n            <Block\n              p=\"4\"\n              display=\"flex\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n            >\n              <Strong>{item.title}</Strong>\n              <Span aria-hidden=\"true\">{openIndex === index ? '−' : '+'}</Span>\n            </Block>\n          }\n        >\n          <Paragraph p=\"4\">{item.content}</Paragraph>\n        </Collapse>\n      ))}\n    </Collapses>\n  );\n}"
     },
     {
       "title": "FAQ Example",
-      "code": "function example() {\n  const faqs = [\n    {\n      q: 'What is Bestax?',\n      a: 'Bestax is a React component library built on Bulma.',\n    },\n    { q: 'How do I install it?', a: 'pnpm add @allxsmith/bestax-bulma' },\n    { q: 'Is it free?', a: 'Yes, Bestax is open source and free to use.' },\n  ];\n\n  const [openStates, setOpenStates] = useState(faqs.map(() => false));\n\n  const toggle = index => {\n    setOpenStates(prev =>\n      prev.map((state, i) => (i === index ? !state : state))\n    );\n  };\n\n  return (\n    <Block>\n      <Title size=\"5\" mb=\"4\">\n        FAQ\n      </Title>\n      <Block display=\"flex\" flexDirection=\"column\">\n        {faqs.map((faq, index) => (\n          <Collapse\n            key={index}\n            className=\"collapse is-bordered\"\n            trigger={\n              <Block\n                p=\"4\"\n                onClick={() => toggle(index)}\n                display=\"flex\"\n                justifyContent=\"space-between\"\n              >\n                <Strong>{faq.q}</Strong>\n                <Span>{openStates[index] ? '▲' : '▼'}</Span>\n              </Block>\n            }\n            open={openStates[index]}\n          >\n            <Paragraph p=\"4\" textColor=\"grey-dark\">\n              {faq.a}\n            </Paragraph>\n          </Collapse>\n        ))}\n      </Block>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const faqs = [\n    {\n      q: 'What is Bestax?',\n      a: 'Bestax is a React component library built on Bulma.',\n    },\n    { q: 'How do I install it?', a: 'pnpm add @allxsmith/bestax-bulma' },\n    { q: 'Is it free?', a: 'Yes, Bestax is open source and free to use.' },\n  ];\n\n  const [open, setOpen] = useState<number[]>([]);\n\n  return (\n    <Block>\n      <Title size=\"5\" mb=\"4\">\n        FAQ\n      </Title>\n      <Collapses multiple value={open} onChange={setOpen}>\n        {faqs.map((faq, index) => (\n          <Collapse\n            key={faq.q}\n            bordered\n            trigger={\n              <Block p=\"4\" display=\"flex\" justifyContent=\"space-between\">\n                <Strong>{faq.q}</Strong>\n                <Span aria-hidden=\"true\">\n                  {open.includes(index) ? '▲' : '▼'}\n                </Span>\n              </Block>\n            }\n          >\n            <Paragraph p=\"4\" textColor=\"grey-dark\">\n              {faq.a}\n            </Paragraph>\n          </Collapse>\n        ))}\n      </Collapses>\n    </Block>\n  );\n}"
     }
   ],
-  "accessibility": "- Trigger has `role=\"button\"` and `tabIndex=\"0\"` for keyboard access\n- Trigger has `aria-expanded` to indicate open/closed state\n- Trigger has `aria-controls` pointing to the content element\n- Content has `aria-hidden` matching the collapsed state\n- Supports keyboard navigation (Enter and Space to toggle)",
+  "accessibility": "- Trigger has `role=\"button\"` and `tabIndex=\"0\"` for keyboard access\n- Trigger has `aria-expanded` to indicate open/closed state\n- Trigger has `aria-controls` pointing to the content element\n- Content has `aria-hidden` matching the collapsed state, and is `inert` while closed, so its\n  links and fields leave the tab order until it opens (under `fade` and `slide` a closed panel\n  is only squeezed to height 0)\n- Supports keyboard navigation (Enter and Space to toggle)",
   "related": [],
   "storybook": null,
   "summary": "The `Collapse` component provides an expandable/collapsible content panel.",
@@ -51,7 +47,7 @@
           "name": "open",
           "type": "boolean",
           "default": null,
-          "description": "Controlled open state. If provided, component is controlled.",
+          "description": "Controlled open state. If provided, component is controlled, and the trigger only reports through `onOpenChange`. Inside a `Collapses` group, a Collapse that sets `open` stays yours: the group neither overrides it nor closes it when another item opens.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -60,7 +56,7 @@
           "name": "defaultOpen",
           "type": "boolean",
           "default": "false",
-          "description": "Initial open state for uncontrolled usage.",
+          "description": "Initial open state for uncontrolled usage. Ignored inside a `Collapses` group, whose `defaultValue` decides.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -69,7 +65,7 @@
           "name": "onOpen",
           "type": "() => void",
           "default": null,
-          "description": "Callback when collapse opens.",
+          "description": "Called when the trigger opens the Collapse. Fires only while the Collapse keeps its own state: not when `open` is set, and not when a `Collapses` group manages it. `onOpenChange` reports in every mode.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -78,7 +74,16 @@
           "name": "onClose",
           "type": "() => void",
           "default": null,
-          "description": "Callback when collapse closes.",
+          "description": "Called when the trigger closes the Collapse. Fires only while the Collapse keeps its own state: not when `open` is set, and not when a `Collapses` group manages it. `onOpenChange` reports in every mode.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "default": null,
+          "description": "Called with the state the trigger asks for (`true` to open) each time it is clicked or activated with Enter or Space, in every mode. Pair it with `open` to let the trigger drive a controlled Collapse.",
           "required": false,
           "inherited": false,
           "deprecated": false