bestax-mcp 1.2.2 → 1.2.3

package/data/components/IconText.json

@@ -103,9 +103,9 @@
         },
         {
           "name": "iconProps",
-          "type": "IconProps",
+          "type": "IconProps | React.ReactNode",
           "default": null,
-          "description": "Props for a single Icon component (for single icon mode).",
+          "description": "Props for a single Icon component, or a custom node, for single icon mode.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -121,7 +121,7 @@
         },
         {
           "name": "items",
-          "type": "{ iconProps: IconProps; text?: string }[]",
+          "type": "{ iconProps: IconProps | React.ReactNode; text?: string }[]",
           "default": null,
           "description": "Array of icon/text pairs (for multiple icons mode).",
           "required": false,
@@ -138,13 +138,31 @@
       "summary": "The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).",
       "component": "Icon",
       "props": [
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "default": null,
+          "description": "The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). Mutually exclusive with `children`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "Exclude<React.ReactNode, undefined>",
+          "default": null,
+          "description": "A custom node (an inline SVG, a `react-icons` component, …) rendered inside the icon container in place of a class-based glyph. Mutually exclusive with `name`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
         {
           "name": "className",
           "type": "string",
           "default": null,
           "description": "Additional CSS classes to apply.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
@@ -153,7 +171,7 @@
           "default": null,
           "description": "Text color helper.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
@@ -163,7 +181,7 @@
           "default": null,
           "description": "Bulma color modifier for the icon.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
@@ -172,53 +190,44 @@
           "default": null,
           "description": "Background color helper.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
-        {
-          "name": "name",
-          "type": "string",
-          "default": null,
-          "description": "The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`).",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
         {
           "name": "icon",
           "type": "string",
           "default": null,
           "description": "DEPRECATED: Legacy prop, use `name` instead.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
           "name": "library",
           "type": "'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols'",
           "default": "'fa'",
-          "description": "The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured.",
+          "description": "The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured. Ignored when `children` supplies the glyph instead of `name`.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
           "name": "variant",
           "type": "string",
           "default": null,
-          "description": "Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`).",
+          "description": "Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`). Ignored when `children` supplies the glyph instead of `name`.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
           "name": "features",
           "type": "string | string[]",
           "default": null,
-          "description": "Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`).",
+          "description": "Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`). Ignored when `children` supplies the glyph instead of `name`.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
@@ -227,7 +236,7 @@
           "default": null,
           "description": "**DEPRECATED:** Use `variant` and `features` instead.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
@@ -236,16 +245,16 @@
           "default": null,
           "description": "Size modifier for the icon container.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "default": "'icon'",
-          "description": "ARIA label for accessibility (default: 'icon').",
+          "description": "ARIA label for accessibility. Applied unconditionally to the container span, so an icon that never sets it still renders `aria-label=\"icon\"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` here instead — otherwise the control's accessible name is announced as just \"icon\". For a decorative icon beside visible text, set `aria-hidden` here rather than leaving the default, so it doesn't add \"icon\" to the text's accessible name.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
@@ -254,7 +263,7 @@
           "default": null,
           "description": "Inline style object.",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         },
         {
@@ -263,7 +272,7 @@
           "default": null,
           "description": "Override the default `'icon'` container class (e.g., `'panel-icon'`).",
           "required": false,
-          "inherited": false,
+          "inherited": true,
           "deprecated": false
         }
       ],

package/data/components/Input.json

@@ -169,7 +169,7 @@
         },
         {
           "name": "iconLeft",
-          "type": "IconProps",
+          "type": "IconProps | React.ReactNode",
           "default": null,
           "description": "Icon props for left icon.",
           "required": false,
@@ -178,7 +178,7 @@
         },
         {
           "name": "iconRight",
-          "type": "IconProps",
+          "type": "IconProps | React.ReactNode",
           "default": null,
           "description": "Icon props for right icon.",
           "required": false,

package/data/components/LinkButton.json

@@ -40,6 +40,10 @@
     {
       "title": "Polymorphic `as` (Router Links)",
       "code": "import { Link as RouterLink } from 'react-router-dom';\nimport { LinkButton } from '@allxsmith/bestax-bulma';\n\n<LinkButton as={RouterLink} to=\"/dashboard\" variant=\"underline\">\n  Go to Dashboard\n</LinkButton>;"
+    },
+    {
+      "title": "Forwarded ref",
+      "code": "function example() {\n  const defaultRef = React.useRef(null);\n  const anchorRef = React.useRef(null);\n  const [tags, setTags] = React.useState(null);\n\n  return (\n    <>\n      <LinkButton ref={defaultRef}>Default</LinkButton>\n      <LinkButton as=\"a\" href=\"#forwarded-ref\" ml=\"2\" ref={anchorRef}>\n        As an anchor\n      </LinkButton>\n      <Button\n        ml=\"2\"\n        onClick={() =>\n          setTags(\n            `${defaultRef.current?.tagName} / ${anchorRef.current?.tagName}`\n          )\n        }\n      >\n        Read both from their refs\n      </Button>\n      <p>Rendered elements: {tags ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
   "accessibility": "- **Semantic HTML:** Renders a native `<button>` element, providing correct keyboard navigation, focus management, and screen reader announcements.\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** Fully keyboard accessible with Enter and Space activation.\n- **Replaces anti-patterns:** Use this instead of `<div onClick>` or `<span onClick>` for interactive elements that should not navigate.\n\n:::note\nIf your LinkButton has only an icon, use `aria-label` to provide accessible text.\n:::",
@@ -248,7 +252,17 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLButtonElement | HTMLAnchorElement>",
+          "default": null,
+          "description": "Ref forwarded to the rendered button or anchor element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard <button> attributes and Bulma helper props",
       "types": []
     }

package/data/components/Message.json

@@ -19,7 +19,7 @@
     },
     {
       "title": "Sizes",
-      "code": "<>\n  <Message title=\"Default Size\">This is the default size message.</Message>\n  <Message title=\"Small\">This is a small message.</Message>\n  <Message title=\"Medium\">This is a medium message.</Message>\n  <Message title=\"Large\">This is a large message.</Message>\n</>"
+      "code": "<>\n  <Message title=\"Default Size\">This is the default size message.</Message>\n  <Message size=\"small\" title=\"Small\">\n    This is a small message.\n  </Message>\n  <Message size=\"medium\" title=\"Medium\">\n    This is a medium message.\n  </Message>\n  <Message size=\"large\" title=\"Large\">\n    This is a large message.\n  </Message>\n</>"
     },
     {
       "title": "Compound (dot-notation) usage",
@@ -98,6 +98,15 @@
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the message.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "onClose",
           "type": "() => void",

package/data/components/Modal.json

@@ -29,6 +29,14 @@
       "title": "Explicit Modal Types",
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal active={open} onClose={() => setOpen(false)} type=\"card\">\n        Modal card body (forced type=\"card\")\n      </Modal>\n    </>\n  );\n}"
     },
+    {
+      "title": "Portal",
+      "code": "function example() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Portaled Modal\n      </Button>\n      <Modal\n        active={open}\n        onClose={() => setOpen(false)}\n        modalCardTitle=\"Rendered in document.body\"\n        portal\n      >\n        This modal is portaled, so it escapes any ancestor with an `overflow:\n        hidden` style.\n      </Modal>\n    </>\n  );\n}"
+    },
+    {
+      "title": "Forwarded ref",
+      "code": "function example() {\n  const [open, setOpen] = React.useState(false);\n  const [width, setWidth] = React.useState(null);\n  const modalRef = React.useRef(null);\n\n  return (\n    <>\n      <Button color=\"info\" onClick={() => setOpen(true)}>\n        Open and measure\n      </Button>\n      <Modal\n        active={open}\n        onClose={() => setOpen(false)}\n        ref={modalRef}\n        modalCardTitle=\"Measured through the ref\"\n      >\n        <Button\n          onClick={() =>\n            setWidth(modalRef.current?.getBoundingClientRect().width ?? null)\n          }\n        >\n          Measure\n        </Button>\n        <p>Width: {width === null ? '—' : `${Math.round(width)}px`}</p>\n      </Modal>\n    </>\n  );\n}"
+    },
     {
       "title": "Compound (dot-notation) usage",
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const closeModal = () => setOpen(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal isActive={open}>\n        <Modal.Background onClick={closeModal} />\n        <Modal.Card>\n          <Modal.Card.Head>\n            <Modal.Card.Title>Compound Component Modal</Modal.Card.Title>\n            <Modal.Close onClick={closeModal} />\n          </Modal.Card.Head>\n          <Modal.Card.Body>\n            This modal uses the compound components API for better control and\n            readability.\n          </Modal.Card.Body>\n          <Modal.Card.Foot>\n            <Buttons>\n              <Button color=\"success\" onClick={closeModal}>\n                Save\n              </Button>\n              <Button onClick={closeModal}>Cancel</Button>\n            </Buttons>\n          </Modal.Card.Foot>\n        </Modal.Card>\n      </Modal>\n    </>\n  );\n}"
@@ -38,7 +46,7 @@
       "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const closeModal = () => setOpen(false);\n\n  return (\n    <>\n      <Button color=\"success\" onClick={() => setOpen(true)}>\n        Show Modal\n      </Button>\n      <Modal isActive={open}>\n        <Modal.Background onClick={closeModal} />\n        <Modal.Content>\n          <Box>\n            <Title size=\"4\">Custom Content</Title>\n            <Paragraph>Using compound components for full control!</Paragraph>\n          </Box>\n        </Modal.Content>\n        <Modal.Close variant=\"floating\" onClick={closeModal} />\n      </Modal>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- The modal root uses Bulma’s structure and ARIA roles for accessibility.\n- The modal background closes the modal on click (`onClose` required).\n- Close buttons are provided for both modal-card and modal-content variants.\n- Keyboard/screen reader accessibility is supported, but for focus trap or escape key handling, implement those patterns in your app as needed.\n\n:::note\nAlways provide an `onClose` handler for accessibility and to allow users to dismiss the modal.\n:::",
+  "accessibility": "- The modal root gets `role=\"dialog\"` and `aria-modal=\"true\"` while active — pass an explicit `role` to override (e.g. `Dialog` passes `role=\"presentation\"` on the `Modal` it wraps so its own `role=\"alertdialog\"` is the only one announced).\n- **Give the dialog an accessible name.** With the legacy API, `modalCardTitle` is wired up as `aria-labelledby` for you. With the compound API, pass your own `aria-label` or `aria-labelledby` on `<Modal>` — a `role=\"dialog\"` with no name is announced as just \"dialog\". An explicit `aria-labelledby` always wins over the generated one.\n- Escape closes the modal (calls `onClose`) by default; opt out with `closeOnEscape={false}`. Only the topmost open modal responds, so Escape closes one layer at a time rather than dismissing a whole stack.\n- Body scroll is locked while the modal is active; opt out with `lockScroll={false}`. The lock is ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first doesn't unlock the page underneath one that is still open.\n- Focus moves to the first enabled focusable element (or the modal itself) on open, and is restored to the previously focused element on close — unless another modal is still open on top, in which case that one keeps focus.\n- Tab and Shift+Tab cycle within the topmost modal while it is open, so the keyboard order agrees with what `aria-modal=\"true\"` tells assistive technology. Note that `aria-modal` does not by itself make background content inert, and no `inert` attribute is applied — background content remains reachable by pointer and by browser UI such as find-in-page.\n- The modal background closes the modal on click (`onClose` required).\n- Close buttons are provided for both modal-card and modal-content variants.\n\n:::note\nAlways provide an `onClose` handler for accessibility and to allow users to dismiss the modal.\n:::",
   "related": ["Button", "Dialog", "Field", "Input", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-modal--modal-card",
   "summary": "The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.",
@@ -142,9 +150,46 @@
           "required": false,
           "inherited": false,
           "deprecated": false
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "default": "true",
+          "description": "Close the modal when the Escape key is pressed (calls `onClose`). Only the topmost open modal responds, so Escape closes one layer at a time.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "lockScroll",
+          "type": "boolean",
+          "default": "true",
+          "description": "Lock body scroll while the modal is active. Ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does not unlock the page underneath one that is still open.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "portal",
+          "type": "boolean | string | HTMLElement",
+          "default": "false",
+          "description": "Renders the modal into a portal target instead of inline, so it isn't clipped by an ancestor with `overflow: hidden`, `filter` or `transform`. `true` portals to `document.body`; a string is used as a `document.querySelector` selector; an element is used directly. Renders inline on the server and while hydrating, moving into the portal once the client takes over, so hydration matches.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the root `.modal` element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
         }
       ],
-      "extraProps": [],
       "catchAll": "All standard <div> attributes and Bulma helper props",
       "types": []
     },

package/data/components/Navbar.json

@@ -65,12 +65,16 @@
       "title": "Color Modifiers",
       "code": "function example() {\n  const colors = [\n    'primary',\n    'link',\n    'info',\n    'success',\n    'warning',\n    'danger',\n    'black',\n    'dark',\n    'light',\n    'white',\n  ];\n  return (\n    <>\n      {colors.map(color => (\n        <Navbar key={color} color={color} mb=\"2\">\n          <Navbar.Brand>\n            <Navbar.Item href=\"#\">\n              <img src=\"/img/logo.svg\" alt=\"Logo\" width=\"28\" height=\"28\" />\n            </Navbar.Item>\n          </Navbar.Brand>\n          <Navbar.Menu active>\n            <Navbar.Start>\n              <Navbar.Item href=\"#\">Home</Navbar.Item>\n              <Navbar.Item href=\"#\">Docs</Navbar.Item>\n              <Navbar.Item href=\"#\">Components</Navbar.Item>\n            </Navbar.Start>\n          </Navbar.Menu>\n        </Navbar>\n      ))}\n    </>\n  );\n}"
     },
+    {
+      "title": "Forwarded ref",
+      "code": "function example() {\n  const navRef = React.useRef(null);\n  const [height, setHeight] = React.useState(null);\n\n  return (\n    <>\n      <Navbar ref={navRef}>\n        <Navbar.Brand>\n          <Navbar.Item href=\"#\">Home</Navbar.Item>\n        </Navbar.Brand>\n      </Navbar>\n      <Button mt=\"3\" onClick={() => setHeight(navRef.current?.offsetHeight)}>\n        Measure the navbar\n      </Button>\n      <p>Height: {height == null ? '—' : `${height}px`}</p>\n    </>\n  );\n}"
+    },
     {
       "title": "Compound (dot-notation) usage",
       "code": "<Navbar>\n  <Navbar.Brand>\n    <Navbar.Item href=\"#\">\n      <img src=\"/img/logo.svg\" alt=\"Logo\" width=\"28\" height=\"28\" />\n    </Navbar.Item>\n    <Navbar.Burger aria-label=\"menu\" />\n  </Navbar.Brand>\n  <Navbar.Menu active>\n    <Navbar.Start>\n      <Navbar.Item href=\"#\">Home</Navbar.Item>\n      <Navbar.Item href=\"#\">Docs</Navbar.Item>\n    </Navbar.Start>\n    <Navbar.End>\n      <Navbar.Item href=\"#\">Log in</Navbar.Item>\n    </Navbar.End>\n  </Navbar.Menu>\n</Navbar>"
     }
   ],
-  "accessibility": "- The root `Navbar` renders as `<nav role=\"navigation\" aria-label=\"main navigation\">`.\n- Use semantic links (`<a>`) and buttons, and provide clear `aria-label` and `aria-expanded` for the burger toggle.\n- Dropdowns and menus follow Bulma's structure for keyboard and screen reader accessibility.\n\n:::note\nFor full accessibility in dropdowns, ensure that focus, keyboard navigation, and ARIA attributes are managed where needed.\n:::",
+  "accessibility": "- The root `Navbar` renders as `<nav role=\"navigation\" aria-label=\"main navigation\">`.\n- Use semantic links (`<a>`) and buttons, and provide clear `aria-label` and `aria-expanded` for the burger toggle.\n- `Navbar.Link` inside a `Navbar.Dropdown` automatically gets `aria-haspopup=\"true\"` and\n  `aria-expanded` synced to the dropdown's open state — no manual wiring required.\n  <kbd>Enter</kbd>/<kbd>Space</kbd> toggle the dropdown open/closed, and <kbd>Escape</kbd>\n  closes it and keeps focus on the link. When the link has no `href` and isn't rendered with\n  `as=\"button\"`, it also gets `role=\"button\"` and `tabIndex={0}` so it's reachable and\n  operable by keyboard, and a mouse/touch click on it toggles the dropdown too (a\n  caller-supplied `onClick` still runs, and can `preventDefault()` to opt out).\n- `hoverable` dropdowns keep working with a mouse (hover-to-open); the keyboard path above\n  opens and closes them independently of hover.\n\n:::note\nThere's no arrow-key roving between navbar items and no outside-click handling for\n`Navbar.Dropdown` — Bulma navbar dropdowns are hover/click surfaces, so this is intentionally\nkept simple.\n:::",
   "related": ["Button", "Icon", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-navbar--default",
   "summary": "The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.",
@@ -149,7 +153,17 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLElement>",
+          "default": null,
+          "description": "Ref forwarded to the root `<nav>` element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard HTML attributes and Bulma helper props",
       "types": []
     },
@@ -328,7 +342,17 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLAnchorElement | HTMLButtonElement>",
+          "default": null,
+          "description": "Ref forwarded to the rendered link or button element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard <a> attributes and Bulma helper props",
       "types": []
     },
@@ -411,7 +435,17 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLButtonElement>",
+          "default": null,
+          "description": "Ref forwarded to the burger button element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard <button> attributes and Bulma helper props",
       "types": []
     },
@@ -615,6 +649,15 @@
           "inherited": false,
           "deprecated": false
         },
+        {
+          "name": "onActiveChange",
+          "type": "(active: boolean) => void",
+          "default": null,
+          "description": "Callback when dropdown active state changes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "children",
           "type": "React.ReactNode",
@@ -625,7 +668,17 @@
           "deprecated": false
         }
       ],
-      "extraProps": [],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the dropdown container element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
       "catchAll": "All standard <div> attributes",
       "types": []
     },

package/data/components/Panel.json

@@ -158,9 +158,27 @@
     },
     {
       "path": "Panel.Icon",
-      "summary": "Icon wrapper with panel styling (renders as `<span class=\"panel-icon\"><i/></span>`). Accepts all Icon props (`name`, `variant`, `features`, etc.)",
+      "summary": "Icon wrapper with panel styling (renders as `<span class=\"panel-icon\">`, containing an `<i/>` when a `name` is given, or the custom node passed as `children`). Accepts all Icon props (`name`, `variant`, `features`, etc.), or `children` for a custom node.",
       "component": null,
       "props": [
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "default": null,
+          "description": "The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). Mutually exclusive with `children`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "Exclude<React.ReactNode, undefined>",
+          "default": null,
+          "description": "A custom node (an inline SVG, a `react-icons` component, …) rendered inside the icon container in place of a class-based glyph. Mutually exclusive with `name`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
         {
           "name": "className",
           "type": "string",
@@ -199,15 +217,6 @@
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
-        {
-          "name": "name",
-          "type": "string",
-          "default": null,
-          "description": "The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`).",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
         {
           "name": "icon",
           "type": "string",
@@ -221,7 +230,7 @@
           "name": "library",
           "type": "'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols'",
           "default": "'fa'",
-          "description": "The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured.",
+          "description": "The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured. Ignored when `children` supplies the glyph instead of `name`.",
           "required": false,
           "inherited": true,
           "deprecated": false
@@ -230,7 +239,7 @@
           "name": "variant",
           "type": "string",
           "default": null,
-          "description": "Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`).",
+          "description": "Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`). Ignored when `children` supplies the glyph instead of `name`.",
           "required": false,
           "inherited": true,
           "deprecated": false
@@ -239,7 +248,7 @@
           "name": "features",
           "type": "string | string[]",
           "default": null,
-          "description": "Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`).",
+          "description": "Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`). Ignored when `children` supplies the glyph instead of `name`.",
           "required": false,
           "inherited": true,
           "deprecated": false
@@ -266,7 +275,7 @@
           "name": "ariaLabel",
           "type": "string",
           "default": "'icon'",
-          "description": "ARIA label for accessibility (default: 'icon').",
+          "description": "ARIA label for accessibility. Applied unconditionally to the container span, so an icon that never sets it still renders `aria-label=\"icon\"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` here instead — otherwise the control's accessible name is announced as just \"icon\". For a decorative icon beside visible text, set `aria-hidden` here rather than leaving the default, so it doesn't add \"icon\" to the text's accessible name.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/Select.json

@@ -121,7 +121,7 @@
         },
         {
           "name": "iconLeft",
-          "type": "IconProps",
+          "type": "IconProps | React.ReactNode",
           "default": null,
           "description": "Icon props for left icon.",
           "required": false,

package/data/components/Sidebar.json

@@ -38,7 +38,7 @@
       "code": "function example() {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button color=\"primary\" onClick={() => setIsOpen(true)}>\n        Open Sidebar\n      </Button>\n      <Sidebar inline isOpen={isOpen} onClose={() => setIsOpen(false)}>\n        <Sidebar.Header>\n          <Sidebar.Title>Dot Notation</Sidebar.Title>\n          <Sidebar.Close onClick={() => setIsOpen(false)} />\n        </Sidebar.Header>\n        <Sidebar.Body>\n          <Paragraph>\n            Header, Title, Close, Body, and Footer are all available from the\n            single Sidebar import.\n          </Paragraph>\n        </Sidebar.Body>\n        <Sidebar.Footer>\n          <Button color=\"primary\" onClick={() => setIsOpen(false)}>\n            Done\n          </Button>\n        </Sidebar.Footer>\n      </Sidebar>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- Uses `role=\"dialog\"` for proper screen reader announcement\n- Has `aria-modal=\"true\"` when overlay is shown\n- Focus is trapped within the sidebar when open\n- Escape key closes the sidebar by default\n- Body scroll is prevented when sidebar is open",
+  "accessibility": "- Uses `role=\"dialog\"` for proper screen reader announcement\n- Has `aria-modal=\"true\"` when overlay is shown\n- Focus is trapped within the sidebar when open\n- Escape key closes the sidebar by default\n- Body scroll is prevented when the sidebar is open with an overlay, through the ref-counted lock shared with `Modal`, `Dialog` and `Loading` — so closing one overlay never unlocks the page underneath another that is still open",
   "related": ["Menu", "Modal"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-sidebar",
   "summary": "The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.",

package/data/components/Tags.json

@@ -14,8 +14,12 @@
       "code": "<Tags hasAddons>\n  <Tag color=\"primary\">Package</Tag>\n  <Tag color=\"success\">Ready</Tag>\n  <Tag isDelete onDelete={() => alert('Deleted!')} />\n</Tags>"
     },
     {
-      "title": "Multiline",
-      "code": "<Tags isMultiline>\n  <Tag color=\"primary\">Bulma</Tag>\n  <Tag color=\"success\">React</Tag>\n  <Tag color=\"warning\">Typescript</Tag>\n  <Tag color=\"danger\">Library</Tag>\n  <Tag color=\"link\">UI</Tag>\n</Tags>"
+      "title": "Wrapping (Default)",
+      "code": "<Tags>\n  <Tag color=\"primary\">Bulma</Tag>\n  <Tag color=\"success\">React</Tag>\n  <Tag color=\"warning\">Typescript</Tag>\n  <Tag color=\"danger\">Library</Tag>\n  <Tag color=\"link\">UI</Tag>\n</Tags>"
+    },
+    {
+      "title": "Group Size",
+      "code": "<>\n  <Tags size=\"medium\">\n    <Tag color=\"primary\">Medium</Tag>\n    <Tag color=\"info\">Medium</Tag>\n  </Tags>\n  <Tags size=\"large\">\n    <Tag color=\"primary\">Large</Tag>\n    <Tag color=\"info\">Large</Tag>\n  </Tags>\n</>"
     },
     {
       "title": "With Margin",
@@ -23,7 +27,7 @@
     },
     {
       "title": "Mixed Tags",
-      "code": "function example() {\n  const [show, setShow] = useState();\n\n  return (\n    <Tags isMultiline>\n      <Tag color=\"primary\" size=\"medium\">\n        Primary Medium\n      </Tag>\n      <Tag color=\"success\" isRounded>\n        Success Rounded\n      </Tag>\n      {/* Dismissible tag */}\n      {show && <Tag color=\"danger\" isDelete onDelete={() => setShow(false)} />}\n      <Tag color=\"info\">Info</Tag>\n    </Tags>\n  );\n}"
+      "code": "function example() {\n  const [show, setShow] = useState();\n\n  return (\n    <Tags>\n      <Tag color=\"primary\" size=\"medium\">\n        Primary Medium\n      </Tag>\n      <Tag color=\"success\" isRounded>\n        Success Rounded\n      </Tag>\n      {/* Dismissible tag */}\n      {show && <Tag color=\"danger\" isDelete onDelete={() => setShow(false)} />}\n      <Tag color=\"info\">Info</Tag>\n    </Tags>\n  );\n}"
     },
     {
       "title": "Add-ons with Delete Tag",
@@ -34,17 +38,17 @@
       "code": "<Tags>\n  <Tags.Tag color=\"primary\">React</Tags.Tag>\n  <Tags.Tag color=\"info\">TypeScript</Tags.Tag>\n</Tags>"
     }
   ],
-  "accessibility": "- **Grouping:** The container is a `<div class=\"tags\">`, which is semantically neutral.\n- **Delete buttons:** If using delete tags, ensure each has an accessible label.\n- **Multiline:** `isMultiline` ensures tags wrap for better readability on small screens.\n\n:::tip\nUse `hasAddons` for tightly grouped tags (no space between them).\n:::",
+  "accessibility": "- **Grouping:** The container is a `<div class=\"tags\">`, which is semantically neutral.\n- **Delete buttons:** If using delete tags, ensure each has an accessible label.\n- **Wrapping:** Tags wrap onto multiple lines by default for better readability on small screens.\n\n:::tip\nUse `hasAddons` for tightly grouped tags (no space between them).\n:::",
   "related": ["Delete", "Tag", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-tag--default",
-  "summary": "The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.",
+  "summary": "The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.",
   "import": "import { Tags } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/elements/Tags.tsx",
   "rootClass": "tags",
   "parts": [
     {
       "path": "Tags",
-      "summary": "The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.",
+      "summary": "The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.",
       "component": null,
       "props": [
         {
@@ -69,7 +73,17 @@
           "name": "isMultiline",
           "type": "boolean",
           "default": "false",
-          "description": "Allow tags to wrap onto multiple lines.",
+          "description": "No-op retained for backwards compatibility.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Bulma's `.tags` wraps by default (no shipped `are-multiline` CSS exists for it) — this prop has never had a visual effect and will be removed in the next major version."
+        },
+        {
+          "name": "size",
+          "type": "'medium' | 'large'",
+          "default": null,
+          "description": "Size of every tag in the group.",
           "required": false,
           "inherited": false,
           "deprecated": false