bestax-mcp 1.14.4 → 1.14.6

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.27.8"
+    "version": "5.29.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -57,6 +57,7 @@
         "Collapses",
         "Dialog",
         "Dropdown",
+        "HoverCard",
         "Loading",
         "Menu",
         "Message",
@@ -355,7 +356,7 @@
       "slug": "helpers/config",
       "import": "import { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 3,
+      "propCount": 4,
       "exampleCount": 0
     },
     {
@@ -545,6 +546,17 @@
       "propCount": 21,
       "exampleCount": 6
     },
+    {
+      "name": "HoverCard",
+      "kind": "component",
+      "category": "components",
+      "purpose": "The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.",
+      "slug": "components/hovercard",
+      "import": "import { HoverCard } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 11,
+      "exampleCount": 6
+    },
     {
       "name": "Icon",
       "kind": "component",
@@ -791,12 +803,12 @@
       "name": "Portal",
       "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…",
+      "purpose": "`Portal` renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content…",
       "slug": "helpers/portal",
       "import": "import { Portal } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 3,
-      "exampleCount": 3
+      "exampleCount": 4
     },
     {
       "name": "Pre",
@@ -1545,6 +1557,17 @@
     "--bulma-hero-gradient-h-offset": ["Hero"],
     "--bulma-hero-gradient-l-offset": ["Hero"],
     "--bulma-hero-gradient-s-offset": ["Hero"],
+    "--bulma-hover-card-animation-duration": ["HoverCard"],
+    "--bulma-hover-card-background": ["HoverCard"],
+    "--bulma-hover-card-border-color": ["HoverCard"],
+    "--bulma-hover-card-color": ["HoverCard"],
+    "--bulma-hover-card-max-width": ["HoverCard"],
+    "--bulma-hover-card-min-width": ["HoverCard"],
+    "--bulma-hover-card-offset": ["HoverCard"],
+    "--bulma-hover-card-padding": ["HoverCard"],
+    "--bulma-hover-card-radius": ["HoverCard"],
+    "--bulma-hover-card-shadow": ["HoverCard"],
+    "--bulma-hover-card-z-index": ["HoverCard"],
     "--bulma-icon-dimensions": ["Icon", "IconText"],
     "--bulma-icon-dimensions-large": ["Icon", "IconText"],
     "--bulma-icon-dimensions-medium": ["Icon", "IconText"],

package/data/components/ConfigProvider.json

@@ -8,14 +8,14 @@
   "accessibility": null,
   "related": [],
   "storybook": null,
-  "summary": "ConfigProvider injects configuration into all child components via React context.",
+  "summary": "ConfigProvider injects configuration into all child components via React context. A nested provider replaces the outer one's settings rather than adding to them, so inside it any setting it leaves out is back to its default.",
   "import": "import { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/helpers/Config.tsx",
   "rootClass": null,
   "parts": [
     {
       "path": "ConfigProvider",
-      "summary": "ConfigProvider injects configuration into all child components via React context.",
+      "summary": "ConfigProvider injects configuration into all child components via React context. A nested provider replaces the outer one's settings rather than adding to them, so inside it any setting it leaves out is back to its default.",
       "component": null,
       "props": [
         {
@@ -44,6 +44,15 @@
           "required": false,
           "inherited": false,
           "deprecated": false
+        },
+        {
+          "name": "portalContainer",
+          "type": "string | HTMLElement",
+          "default": null,
+          "description": "Where portaled content goes when it has no target of its own: what a `Portal` without a `container` renders, and what the library's components portal, such as Popover's `appendToBody` panel, a `Modal` with `portal` set to `true`, or a `Toast`. An element, or a `document.querySelector` selector. Unset, or a selector that matches nothing, that content goes to `document.body`. A target a component is given, such as a `Toast`'s `container`, still wins, and nothing portals that would otherwise render in place. The overlays and panels this moves are `position: fixed`, so pick an element with no ancestor that has a `transform`, `filter`, `backdrop-filter`, `perspective`, `will-change: transform`, or a `contain` that includes `paint` or `layout`. That ancestor becomes their containing block, and they cover or line up against it instead of the viewport. An ancestor that starts a stacking context, with a `z-index` or `isolation: isolate`, keeps them inside it, under anything the page stacks above it. `NotificationContainer`'s status region moves too, so this also decides where its announcements come from, and an `aria-hidden` ancestor silences them. A selector can't find an element inside a shadow root, so pass the element itself there, held in state from a ref callback. Content that portals before the element is set goes to `document.body` and moves when it is, which remounts it, as `Portal`'s `container` describes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
         }
       ],
       "extraProps": [],
@@ -52,5 +61,5 @@
     }
   ],
   "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.                                                                  |"
+  "doc": "# ConfigProvider\n\n## Overview\n\nThe `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components. Its `classPrefix` is applied automatically 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. An inner provider replaces the outer one's settings rather than adding to them, so inside it any setting it leaves out is back to its default:\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### Where Portaled Content Goes\n\n`portalContainer` sets where portaled content goes when it has no target of its own. That covers a [`Portal`](https://bestax.io/docs/api/helpers/portal) with no `container`, and what the library's components portal, such as the panel `Popover` renders with `appendToBody`, a `Modal` or `Dialog` with `portal` set to `true`, a `Toast`, or a `Sidebar`. It takes an element or a `document.querySelector` selector. Unset, that content goes to `document.body`.\n\nA target a component is given still wins, such as a `Modal`'s `portal` selector or a `Toast`'s `container`. And `portalContainer` only changes where portaled content goes: a component that renders in place, like a `Modal` without `portal` or a `Toast` with `inline`, still does.\n\n`document.body` is outside any styles scoped to where the content was declared: a scoped `Theme`'s variables, or a shadow root's stylesheets. To keep them, render an element inside that area and make it the `portalContainer`, held in state from a ref callback. Below, the panel keeps the purple primary its `Theme` sets, which it would lose at the end of the page:\n\n```tsx live\nfunction ThemedOverlays() {\n  const [overlays, setOverlays] = useState<HTMLElement | null>(null);\n\n  return (\n    <Theme primaryH=\"270\" primaryS=\"100%\" primaryL=\"50%\">\n      <ConfigProvider portalContainer={overlays ?? undefined}>\n        <Popover\n          appendToBody\n          ariaLabel=\"Themed panel\"\n          trigger={<Button color=\"primary\">Open</Button>}\n        >\n          <Popover.Body>\n            <Button color=\"primary\">Still purple</Button>\n          </Popover.Body>\n        </Popover>\n      </ConfigProvider>\n      <div ref={setOverlays} />\n    </Theme>\n  );\n}\n```\n\nA selector can't find an element inside a shadow root, since `document.querySelector` doesn't look there, so in a shadow root pass the element itself, as above. Content that portals before the element is set goes to `document.body` and moves when it is, which remounts it and resets its state, as [`Portal`'s `container`](https://bestax.io/docs/api/helpers/portal#into-a-container) describes. A nested provider like this one needs the class prefix and icon library repeated if your app sets them (see [Nested ConfigProviders](https://bestax.io/docs/api/helpers/config#nested-configproviders)).\n\nWhat gets portaled is `position: fixed`, so put the element where no ancestor has a `transform`, `filter`, `backdrop-filter`, `perspective`, `will-change: transform`, or a `contain` that includes `paint` or `layout`. Any of those becomes the containing block for the overlays and panels, which then cover or line up against that ancestor instead of the viewport. An ancestor that starts a stacking context, with a `z-index` or `isolation: isolate`, keeps them inside it, under anything the page stacks above it.\n\n`NotificationContainer` portals its status region along with its notifications, so the `portalContainer` also decides where announcements come from. Keep it out of any `aria-hidden` ancestor, which takes the region out of the accessibility tree and silences them.\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  portalContainer?: string | HTMLElement;\n}\n\ninterface ConfigProviderProps {\n  children: ReactNode;\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n  portalContainer?: string | HTMLElement;\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.                                                                                                                                                                                                                                                                                                                                                   |\n| `portalContainer` | `string` \\| `HTMLElement`                                          | Where portaled content goes when it has no target of its own: what a `Portal` without a `container` renders, and what the library's components portal, such as `Popover`'s `appendToBody` panel or a `Modal` with `portal`. An element, or a `document.querySelector` selector. Unset, or a selector that matches nothing, it goes to `document.body`. A target a component is given still wins. |"
 }

package/data/components/DateInput.json

@@ -551,7 +551,7 @@
           "name": "appendToBody",
           "type": "boolean",
           "default": "false",
-          "description": "Render the popover into `document.body` via portal.",
+          "description": "Render the popover through a portal, into the `portalContainer` a `ConfigProvider` sets, `document.body` by default.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/DateRangeInput.json

@@ -414,7 +414,7 @@
           "name": "appendToBody",
           "type": "boolean",
           "default": "false",
-          "description": "Render the popover into `document.body` via portal.",
+          "description": "Render the popover through a portal, into the `portalContainer` a `ConfigProvider` sets, `document.body` by default.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/DateTimeInput.json

@@ -538,7 +538,7 @@
           "name": "appendToBody",
           "type": "boolean",
           "default": "false",
-          "description": "Render the popover into `document.body` via portal.",
+          "description": "Render the popover through a portal, into the `portalContainer` a `ConfigProvider` sets, `document.body` by default.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/Dialog.json

@@ -27,7 +27,7 @@
     },
     {
       "title": "Portal",
-      "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}"
+      "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=\"Portaled Dialog\"\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`](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",

package/data/components/HoverCard.json

@@ -0,0 +1,229 @@
+{
+  "name": "HoverCard",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/hovercard",
+  "docsUrl": "https://bestax.io/docs/api/components/hovercard",
+  "examples": [
+    {
+      "title": "Basic HoverCard",
+      "code": "<HoverCard trigger={<Link href=\"#ada\">Ada Lovelace</Link>}>\n  <Media>\n    <Media.Left>\n      <Avatar name=\"Ada Lovelace\" size=\"48x48\" />\n    </Media.Left>\n    <Media.Content>\n      <Title as=\"p\" size=\"6\">\n        Ada Lovelace\n      </Title>\n      <SubTitle as=\"p\" size=\"6\">\n        Analytical Engine team\n      </SubTitle>\n      <Link href=\"#profile\">View profile</Link>\n    </Media.Content>\n  </Media>\n</HoverCard>"
+    },
+    {
+      "title": "In Running Text",
+      "code": "<Paragraph>\n  Reviewed by{' '}\n  <HoverCard appendToBody trigger={<Link href=\"#ada\">Ada Lovelace</Link>}>\n    <Title as=\"p\" size=\"6\">\n      Ada Lovelace\n    </Title>\n    <SubTitle as=\"p\" size=\"6\">\n      Analytical Engine team\n    </SubTitle>\n    <Link href=\"#profile\">View profile</Link>\n  </HoverCard>{' '}\n  and merged the same day.\n</Paragraph>"
+    },
+    {
+      "title": "Placement",
+      "code": "<Buttons>\n  <HoverCard\n    openOnTap\n    position=\"bottom-left\"\n    trigger={<Button>bottom-left</Button>}\n  >\n    <Paragraph>Opens below, on the left edge.</Paragraph>\n  </HoverCard>\n  <HoverCard\n    openOnTap\n    position=\"bottom-right\"\n    trigger={<Button>bottom-right</Button>}\n  >\n    <Paragraph>Opens below, on the right edge.</Paragraph>\n  </HoverCard>\n  <HoverCard\n    openOnTap\n    position=\"auto\"\n    trigger={<Button color=\"info\">auto</Button>}\n  >\n    <Paragraph>Opens wherever it fits.</Paragraph>\n  </HoverCard>\n</Buttons>"
+    },
+    {
+      "title": "Delays",
+      "code": "<Buttons>\n  <HoverCard openOnTap openDelay={0} trigger={<Button>Opens at once</Button>}>\n    <Paragraph>No wait before this one.</Paragraph>\n  </HoverCard>\n  <HoverCard\n    openOnTap\n    openDelay={1000}\n    closeDelay={600}\n    trigger={<Button>Takes its time</Button>}\n  >\n    <Paragraph>A slower card, with longer to reach it.</Paragraph>\n  </HoverCard>\n</Buttons>"
+    },
+    {
+      "title": "On Touch Screens",
+      "code": "<HoverCard openOnTap trigger={<Button>Engine team</Button>}>\n  <Title as=\"p\" size=\"6\">\n    Analytical Engine team\n  </Title>\n  <Paragraph mb=\"2\">Ada Lovelace and Charles Babbage</Paragraph>\n  <Link href=\"#team\">View the team</Link>\n</HoverCard>"
+    },
+    {
+      "title": "Controlled",
+      "code": "function example() {\n  const [open, setOpen] = useState(false);\n  const [following, setFollowing] = useState(false);\n\n  return (\n    <>\n      <Paragraph mb=\"3\">\n        The card is {open ? 'open' : 'closed'}\n        {following ? ', and you follow Ada' : ''}.\n      </Paragraph>\n      <HoverCard\n        open={open}\n        onOpenChange={setOpen}\n        trigger={<Link href=\"#ada\">Ada Lovelace</Link>}\n      >\n        <Paragraph mb=\"3\">Analytical Engine team</Paragraph>\n        <Button\n          size=\"small\"\n          color=\"primary\"\n          onClick={() => {\n            setFollowing(true);\n            setOpen(false);\n          }}\n        >\n          Follow\n        </Button>\n      </HoverCard>\n    </>\n  );\n}"
+    }
+  ],
+  "accessibility": "`HoverCard` is built to\n[WCAG's Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)\ncriterion, condition by condition:\n\n- **Dismissible:** <kbd>Escape</kbd> closes the card wherever focus is, without moving the pointer\n  or focus. The keypress belongs to whatever has focus. When that's the card, its trigger or\n  nothing, the card takes it, so a `Popover` or `Modal` around it stays open. When it's something\n  else, such as a field elsewhere on the page or a `Modal` opened from the card, the card still\n  closes and the key goes on to it. With one card inside another, the inner one closes first.\n  Focus that was in the card goes back to the trigger, and the card stays closed until the pointer\n  or focus leaves and comes back.\n- **Hoverable:** the pointer can move from the trigger onto the card. `closeDelay` covers the gap\n  between them, and the card takes pointer events, unlike a tooltip.\n- **Persistent:** no timer closes a card that's hovered or focused. Focus inside the card holds it\n  however it got there. Whether a click focuses what it lands on is up to the browser, though:\n  Safari and Firefox on macOS don't focus a button on click, so there a clicked button doesn't keep\n  the card open once the pointer moves away.\n\nAnd around it:\n\n- Keyboard focus on the trigger opens the card, as hover does. Focus that a press brings doesn't,\n  and neither does a touch pointer, so tapping the trigger on a phone just does what the trigger\n  does. Clicking the trigger never toggles the card.\n- By default, then, a phone or tablet never opens the card, so whatever it shows has to be\n  reachable from the trigger as well. `openOnTap` opens it with a tap, for a trigger with no tap\n  action of its own. While a tap holds it open, a tap outside the trigger and the card closes it.\n- The trigger gets `aria-expanded` and `aria-controls`, which say it's expanded and name the card\n  only while the card is on the page. It gets no role, no tab stop and no `aria-haspopup`, so the trigger element itself has to\n  take focus, such as a link or a button. A link inside a `<span>` doesn't do, since focus comes\n  back to the trigger and its ARIA is on it. A development build warns when the trigger can't take\n  focus.\n- The card is a plain element with an `id` and no role. It isn't a dialog, since focus doesn't move\n  into it, and it isn't a tooltip, since it can hold links. In place, a screen reader meets it\n  right after the trigger, Tab goes from the trigger into its links and buttons, and tabbing past\n  them closes it.\n- With `appendToBody` the card sits in the Tab order where its container is. By default that's\n  the end of `<body>`, so it comes last: Tab reaches it only after the rest of the page, and focus\n  leaving the trigger on the way closes it. Keyboard users can open it, read it and close it, so\n  whatever it links to should be reachable from the page as well.\n- Opening the card moves no focus, and nothing traps it. Links and buttons belong in a card; a form\n  belongs in a `Popover`, which opens on purpose and holds focus.\n- The fade-in is turned off under `prefers-reduced-motion: reduce`.",
+  "related": ["Media", "Popover", "Portal", "Tooltip", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/components-hovercard--default",
+  "summary": "The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it. Nothing moves focus when the card opens, and nothing traps it. In place, the card comes right after the trigger, so Tab goes from the trigger into its links and tabbing past them closes it. The pointer can move onto the card, Escape closes it from anywhere, and by default touch doesn't open it, so tapping the trigger just does what the trigger does. `openOnTap` opens it with a tap, for a trigger with no tap action of its own. For hints with nothing to click use `Tooltip`, and for content opened on purpose, such as a form, use `Popover`.",
+  "import": "import { HoverCard } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/HoverCard.tsx",
+  "rootClass": "hover-card",
+  "parts": [
+    {
+      "path": "HoverCard",
+      "summary": "The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it. Nothing moves focus when the card opens, and nothing traps it. In place, the card comes right after the trigger, so Tab goes from the trigger into its links and tabbing past them closes it. The pointer can move onto the card, Escape closes it from anywhere, and by default touch doesn't open it, so tapping the trigger just does what the trigger does. `openOnTap` opens it with a tap, for a trigger with no tap action of its own. For hints with nothing to click use `Tooltip`, and for content opened on purpose, such as a form, use `Popover`.",
+      "component": null,
+      "props": [
+        {
+          "name": "trigger",
+          "type": "React.ReactElement",
+          "default": null,
+          "description": "The element the card previews, such as a link or a `Button`. The element itself has to take focus, so keyboard users can open the card too: a link inside a `<span>` doesn't do, since focus comes back to the trigger and its ARIA is on it. HoverCard gives it no role and no tab stop, since it can't know what the element is, and a development build warns when it can't take focus: use a link or a button, or give the element `tabIndex={0}`. A disabled button can't take focus either. HoverCard adds `aria-expanded` and `aria-controls`, both naming the card only while it is on the page, so it has to be a single element that passes those to its DOM node. Its own click and keys stay its own, and the card doesn't toggle on them, except Escape while the card is open, which closes the card before the trigger sees it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The card's content: a preview whose links and buttons are fine, but not a form, which belongs in a `Popover`. The card pads itself, so content goes straight in.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": null,
+          "description": "Controlled open state. When set, hover, focus and Escape only report through `onOpenChange`, so an action inside the card can close it. While the card is open, Escape is reported, and when focus is in the card, on its trigger or nowhere, the key stops there even if you keep the card open, so a `Modal` around it doesn't close from the keyboard until the card does.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Initial open state when uncontrolled. A card that starts open stays open until the pointer or focus has been and gone, or Escape closes it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "default": null,
+          "description": "Called with the state asked for: when `openDelay` or `closeDelay` runs out, and right away on Escape. Fires in both controlled and uncontrolled use. An Escape it reports stops at the card when focus is in the card, on its trigger or nowhere, so nothing around it sees that key. With focus anywhere else, the card still closes and the key goes on to whatever has focus.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "openDelay",
+          "type": "number",
+          "default": "600",
+          "description": "How long the pointer or keyboard focus waits on the trigger before the card opens, in milliseconds.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "closeDelay",
+          "type": "number",
+          "default": "300",
+          "description": "How long the card stays after the pointer and focus have left the trigger and the card, in milliseconds. It is the time the pointer has to cross the gap between the trigger and the card: with `0` the card closes as the pointer leaves the trigger, before the pointer can reach it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "position",
+          "type": "'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'auto'",
+          "default": "'bottom-left'",
+          "description": "Where the card opens against the trigger.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "appendToBody",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render the card through `Portal`, into the `portalContainer` a `ConfigProvider` sets, `document.body` by default, fixed to the viewport, so an ancestor's `overflow`, `transform` or stacking context can't clip it. A trigger in running text needs it too, since the card's block content can't sit inside a `<p>`. The card then shows from the commit after hydration, never in server markup, and it sits in the Tab order where its container is. At the end of `<body>`, the default, Tab reaches it only after the rest of the page, and focus leaving the trigger on the way closes it, so keyboard users can open it, read it and close it with Escape, and whatever it links to has to be reachable from the page as well. It is measured against the trigger when it opens and on resize and scroll, so it doesn't follow content that changes size while it is open. Theming variables set on an ancestor of the trigger reach it only when its container is inside that ancestor.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "openOnTap",
+          "type": "boolean",
+          "default": "false",
+          "description": "Open the card with a tap on a touch screen. Touch has no hover, so without this a phone or tablet never opens the card. With it, a tap on the trigger opens the card at once, and it stays until a second tap on the trigger, a tap outside the trigger and the card, or Escape. The tap still does whatever the trigger does, so turn this on only for a trigger with no tap action of its own, such as a `Button` with no `onClick`: on a link, the first tap would follow the link rather than show the card. Mouse and pen work the same either way.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional classes for the card (`.hover-card-content`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional classes for the `span` around the trigger. The card takes `contentClassName`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <span> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-hover-card-z-index",
+      "sass": "$hover-card-z-index",
+      "default": "$extras-z-index-tooltip",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-background",
+      "sass": "$hover-card-background",
+      "default": "var(--bulma-scheme-main)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-color",
+      "sass": "$hover-card-color",
+      "default": "var(--bulma-text)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-border-color",
+      "sass": "$hover-card-border-color",
+      "default": "var(--bulma-border-weak)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-radius",
+      "sass": "$hover-card-radius",
+      "default": "var(--bulma-radius-large)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-shadow",
+      "sass": "$hover-card-shadow",
+      "default": "var(--bulma-shadow)",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-padding",
+      "sass": "$hover-card-padding",
+      "default": "1rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-min-width",
+      "sass": "$hover-card-min-width",
+      "default": "12rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-max-width",
+      "sass": "$hover-card-max-width",
+      "default": "min(20rem, calc(100vw - 2rem))",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-offset",
+      "sass": "$hover-card-offset",
+      "default": "0.25rem",
+      "scope": "element"
+    },
+    {
+      "css": "--bulma-hover-card-animation-duration",
+      "sass": "$hover-card-animation-duration",
+      "default": "0.15s",
+      "scope": "element"
+    }
+  ]
+}

package/data/components/Modal.json

@@ -31,7 +31,7 @@
     },
     {
       "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}"
+      "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=\"Portaled Modal\"\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",
@@ -180,7 +180,7 @@
           "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.",
+          "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 the `portalContainer` a `ConfigProvider` sets, `document.body` by default; 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

package/data/components/Popover.json

@@ -41,6 +41,7 @@
   "accessibility": "`Popover` follows the [WAI-ARIA dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\nfor a non-modal dialog:\n\n- The panel is a `role=\"dialog\"` without `aria-modal`. It is named by its `Popover.Header` through\n  `aria-labelledby`, or by `ariaLabel`, which takes precedence. A development build warns when an\n  open panel has neither.\n- The trigger gets `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls` pointing at the\n  panel while it is open.\n- Opening moves focus to the first control in the panel, or to the panel itself when it has none.\n  Closing hands focus back to the trigger, as long as focus is still in the panel then, so a click\n  that put it somewhere else keeps it there.\n- Tab and Shift+Tab wrap inside the open panel, which the pattern asks of non-modal dialogs too.\n  Pointer focus, the screen reader's reading cursor and the rest of the page stay free: nothing\n  outside is hidden or made inert, and the page still scrolls. `trapFocus={false}` lets Tab leave.\n- <kbd>Escape</kbd> closes the popover while focus is in the panel or on the trigger. A dialog\n  nested inside the panel, such as a date picker's calendar or another popover, takes its own\n  Escape first.\n- <kbd>Enter</kbd> and <kbd>Space</kbd> toggle a trigger the browser doesn't click on its own.\n- The open animation is turned off under `prefers-reduced-motion: reduce`.",
   "related": [
     "Dropdown",
+    "HoverCard",
     "Modal",
     "Portal",
     "Tooltip",
@@ -116,7 +117,7 @@
           "name": "appendToBody",
           "type": "boolean",
           "default": "false",
-          "description": "Render the panel at the end of `document.body` through `Portal`, fixed to the viewport, so an ancestor's `overflow`, `transform` or stacking context can't clip it. The panel then shows from the commit after hydration, never in server markup. It is measured against the trigger when it opens and on resize and scroll, so it doesn't follow content that changes size while it is open. Theming variables set on an ancestor of the trigger don't reach it there.",
+          "description": "Render the panel through `Portal`, into the `portalContainer` a `ConfigProvider` sets, `document.body` by default, fixed to the viewport, so an ancestor's `overflow`, `transform` or stacking context can't clip it. The panel then shows from the commit after hydration, never in server markup. It is measured against the trigger when it opens and on resize and scroll, so it doesn't follow content that changes size while it is open. Theming variables set on an ancestor of the trigger reach it only when its container is inside that ancestor.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Portal.json

@@ -13,22 +13,26 @@
       "title": "Into a container",
       "code": "function example() {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Box overflow=\"clipped\">\n        <p>The notification is declared inside this box.</p>\n        {target && (\n          <Portal container={target}>\n            <Notification color=\"success\">\n              It renders into the element after the box instead.\n            </Notification>\n          </Portal>\n        )}\n      </Box>\n      <div ref={setTarget} />\n    </>\n  );\n}"
     },
+    {
+      "title": "A default container",
+      "code": "<ConfigProvider portalContainer=\"#overlays\">\n  <App />\n</ConfigProvider>"
+    },
     {
       "title": "Rendering in place",
       "code": "<Portal disabled>\n  <Notification>Rendered in place, as if there were no portal.</Notification>\n</Portal>"
     }
   ],
   "accessibility": "- The DOM decides reading and Tab order, not the React tree. Content portaled to the end of `document.body` comes last in both, so a keyboard user can't reach it from the button that opened it by pressing Tab. Move focus into interactive floating content when it opens, and back to what opened it when it closes.\n- Give floating content a role and an accessible name (`role=\"dialog\"` with `aria-label` or `aria-labelledby`), and give its trigger `aria-expanded` and `aria-controls`. Ids work across the portal, since they are shared by the whole document.\n- Content that only appears after hydration is missing from the server HTML. Keep anything a reader or a crawler needs on first load out of a portal.",
-  "related": ["Modal", "Theme", "Toast"],
+  "related": ["ConfigProvider", "Modal", "Theme", "Toast"],
   "storybook": "https://bestax.io/storybook/?path=/story/helpers-portal--default",
-  "summary": "Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context. React's server renderer can't render a portal, so `Portal` renders nothing on the server and during hydration, and mounts its children in the commit that follows. The first client render then matches the server markup. In an app without server rendering it portals on the first render. React context, such as `ConfigProvider`'s class prefix, reaches the portaled children, and their React events bubble through the React tree. CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme` sets its variables on a wrapper element the portaled content has left, so that content sees the page-level theme. Point `container` at an element inside the themed area to keep it. Tab order and focus follow the DOM too. Content portaled from inside a focus trap is no longer inside the trapped element, so the trap neither reaches it nor holds focus there: render nested overlays inside the trapped element, or give them a trap of their own. To trap portaled content, put `useFocusTrap`'s ref on the element inside the `Portal`.",
+  "summary": "Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context. React's server renderer can't render a portal, so `Portal` renders nothing on the server and during hydration, and mounts its children in the commit that follows. The first client render then matches the server markup. In an app without server rendering it portals on the first render. React context, such as `ConfigProvider`'s class prefix, reaches the portaled children, and their React events bubble through the React tree. CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme` sets its variables on a wrapper element the portaled content has left, so that content sees the page-level theme, and styles scoped to a shadow root don't reach `document.body` at all. To keep them, portal into an element inside the themed area or the shadow root: pass it as `container`, or as the `portalContainer` of a `ConfigProvider` around that area. The second also reaches what the library's components portal, such as Popover's `appendToBody` panel or a `Modal` with `portal`. Tab order and focus follow the DOM too. Content portaled from inside a focus trap is no longer inside the trapped element, so the trap neither reaches it nor holds focus there: render nested overlays inside the trapped element, or give them a trap of their own. To trap portaled content, put `useFocusTrap`'s ref on the element inside the `Portal`.",
   "import": "import { Portal } from '@allxsmith/bestax-bulma';",
   "sourceFile": "bulma-ui/src/helpers/portal.tsx",
   "rootClass": null,
   "parts": [
     {
       "path": "Portal",
-      "summary": "Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context. React's server renderer can't render a portal, so `Portal` renders nothing on the server and during hydration, and mounts its children in the commit that follows. The first client render then matches the server markup. In an app without server rendering it portals on the first render. React context, such as `ConfigProvider`'s class prefix, reaches the portaled children, and their React events bubble through the React tree. CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme` sets its variables on a wrapper element the portaled content has left, so that content sees the page-level theme. Point `container` at an element inside the themed area to keep it. Tab order and focus follow the DOM too. Content portaled from inside a focus trap is no longer inside the trapped element, so the trap neither reaches it nor holds focus there: render nested overlays inside the trapped element, or give them a trap of their own. To trap portaled content, put `useFocusTrap`'s ref on the element inside the `Portal`.",
+      "summary": "Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context. React's server renderer can't render a portal, so `Portal` renders nothing on the server and during hydration, and mounts its children in the commit that follows. The first client render then matches the server markup. In an app without server rendering it portals on the first render. React context, such as `ConfigProvider`'s class prefix, reaches the portaled children, and their React events bubble through the React tree. CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme` sets its variables on a wrapper element the portaled content has left, so that content sees the page-level theme, and styles scoped to a shadow root don't reach `document.body` at all. To keep them, portal into an element inside the themed area or the shadow root: pass it as `container`, or as the `portalContainer` of a `ConfigProvider` around that area. The second also reaches what the library's components portal, such as Popover's `appendToBody` panel or a `Modal` with `portal`. Tab order and focus follow the DOM too. Content portaled from inside a focus trap is no longer inside the trapped element, so the trap neither reaches it nor holds focus there: render nested overlays inside the trapped element, or give them a trap of their own. To trap portaled content, put `useFocusTrap`'s ref on the element inside the `Portal`.",
       "component": null,
       "props": [
         {
@@ -44,7 +48,7 @@
           "name": "container",
           "type": "string | HTMLElement",
           "default": null,
-          "description": "Where the content goes: an element, or a `document.querySelector` selector. Omitted, empty, or a selector that matches nothing, it goes to `document.body`. A selector is looked up again on each render, so the content follows the target when it changes. Moving to another target remounts the children and resets their state, which includes a selector that only starts matching after the content has shown in `document.body`. Render the target first, or pass the element once you have it.",
+          "description": "Where the content goes: an element, or a `document.querySelector` selector. Omitted or empty, it goes to the `portalContainer` a `ConfigProvider` sets, and to `document.body` when none is set. A selector that matches nothing means `document.body` too. A selector is looked up again on each render, so the content follows the target when it changes. Moving to another target remounts the children and resets their state, which includes a selector that only starts matching after the content has shown in `document.body`. Render the target first, or pass the element once you have it.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -65,5 +69,5 @@
     }
   ],
   "cssVars": [],
-  "doc": "# Portal\n\n## Overview\n\n`Portal` renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.\n\nIt is the building block for your own overlays: a command palette, a floating panel. `Modal`, `Dialog`, `Toast` and `Popover` already portal through their own props, so reach for `Portal` when you are building something they don't cover.\n\nReact's server renderer can't render a portal, so `Portal` renders nothing on the server and during hydration, and mounts its children in the commit that follows. The first client render matches the server markup, and there is no hydration warning to chase. In an app without server rendering it portals on the first render.\n\n---\n\n## Import\n\n```tsx\nimport { Portal } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n### Into `document.body`\n\nWith no `container`, the children go to the end of `document.body`, whatever clips or transforms the component that renders them.\n\n```tsx\nfunction Banner() {\n  return (\n    <Box overflow=\"clipped\">\n      <p>This box clips its overflow.</p>\n      <Portal>\n        <Notification color=\"info\">\n          Rendered at the end of document.body, outside the box.\n        </Notification>\n      </Portal>\n    </Box>\n  );\n}\n```\n\n### Into a container\n\n`container` takes an element or a `document.querySelector` selector. A selector suits an overlay root in your page shell (`<div id=\"overlays\" />`); an element suits a target your own component renders. Hold that element in state from a ref callback, so the portal renders once the target exists.\n\n```tsx live\nfunction example() {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Box overflow=\"clipped\">\n        <p>The notification is declared inside this box.</p>\n        {target && (\n          <Portal container={target}>\n            <Notification color=\"success\">\n              It renders into the element after the box instead.\n            </Notification>\n          </Portal>\n        )}\n      </Box>\n      <div ref={setTarget} />\n    </>\n  );\n}\n```\n\nAn empty selector, or one that matches nothing, falls back to `document.body` rather than throwing.\n\nA selector is looked up again on each render, so the content follows the target when the target changes. Moving to another target remounts the children, which resets their state. That includes a selector that only starts matching after the content has already shown in `document.body`, so render the target first (an overlay root in the page shell is), or pass the element once you have it, as above.\n\n### Rendering in place\n\n`disabled` renders the children where the `Portal` is, on the server as well as the client. A component that portals only sometimes (behind an `appendToBody` option, say) can keep one code path.\n\n```tsx live\n<Portal disabled>\n  <Notification>Rendered in place, as if there were no portal.</Notification>\n</Portal>\n```\n\n### Floating content and focus\n\nPositioning floating content next to its trigger is up to you; `Portal` only decides where it sits in the DOM.\n\nFocus follows the DOM too. Content portaled to the end of `document.body` is last in the Tab order, so interactive floating content should take focus when it opens and hand it back to its trigger when it closes. A focus trap doesn't cover what a `Portal` inside it renders, because that content is no longer inside the trapped element: render a nested overlay inside the trapped element, or trap it separately. To trap portaled content, put the trap on the element inside the `Portal`, as the [useFocusTrap portal example](https://bestax.io/docs/api/helpers/usefocustrap#with-portals) does.\n\n### Context and styles\n\nReact context reaches portaled children, so a `ConfigProvider` class prefix still applies, and their React events bubble up the React tree to the components around the `Portal`. CSS inheritance follows the DOM instead. A scoped `Theme` (one without `isRoot`) sets its CSS variables on a wrapper element that portaled content has left, so that content sees the page-level theme. Point `container` at an element inside the themed area to keep it themed.\n\n---\n\n## Accessibility\n\n- The DOM decides reading and Tab order, not the React tree. Content portaled to the end of `document.body` comes last in both, so a keyboard user can't reach it from the button that opened it by pressing Tab. Move focus into interactive floating content when it opens, and back to what opened it when it closes.\n- Give floating content a role and an accessible name (`role=\"dialog\"` with `aria-label` or `aria-labelledby`), and give its trigger `aria-expanded` and `aria-controls`. Ids work across the portal, since they are shared by the whole document.\n- Content that only appears after hydration is missing from the server HTML. Keep anything a reader or a crawler needs on first load out of a portal.\n\n---\n\n## Related Components\n\n- [`Modal`](https://bestax.io/docs/api/components/modal): Has its own `portal` prop, taking the same `true`, selector or element.\n- [`Toast`](https://bestax.io/docs/api/components/toast): Portals to `document.body` by default.\n- [`Theme`](https://bestax.io/docs/api/helpers/theme): Scoped themes stay behind when content is portaled; see above.\n\n---\n\n## Additional Resources\n\n- [Storybook: Portal Stories](https://bestax.io/storybook/?path=/story/helpers-portal--default)\n- [React: `createPortal`](https://react.dev/reference/react-dom/createPortal)\n\n---\n\n## Props\n\n| Prop        | Type                      | Default         | Description                                                                                                                                                                                    |\n| ----------- | ------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children`  | `ReactNode`               | —               | Content to render into the container.                                                                                                                                                          |\n| `container` | `string` \\| `HTMLElement` | `document.body` | An element, or a `document.querySelector` selector looked up on each render. Empty, or a selector that matches nothing, means `document.body`. Moving to another target remounts the children. |\n| `disabled`  | `boolean`                 | `false`         | Render the children in place instead, on the server as well as the client.                                                                                                                     |"
+  "doc": "# Portal\n\n## Overview\n\n`Portal` renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.\n\nIt is the building block for your own overlays: a command palette, a floating panel. The library's own overlays, such as `Modal`, `Popover` and `HoverCard`, already portal through their own props, so reach for `Portal` when you are building something they don't cover.\n\nReact's server renderer can't render a portal, so `Portal` renders nothing on the server and during hydration, and mounts its children in the commit that follows. The first client render matches the server markup, and there is no hydration warning to chase. In an app without server rendering it portals on the first render.\n\n---\n\n## Import\n\n```tsx\nimport { Portal } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n### Into `document.body`\n\nWith no `container`, and no [default container](https://bestax.io/docs/api/helpers/portal#a-default-container) set, the children go to the end of `document.body`, whatever clips or transforms the component that renders them.\n\n```tsx\nfunction Banner() {\n  return (\n    <Box overflow=\"clipped\">\n      <p>This box clips its overflow.</p>\n      <Portal>\n        <Notification color=\"info\">\n          Rendered at the end of document.body, outside the box.\n        </Notification>\n      </Portal>\n    </Box>\n  );\n}\n```\n\n### Into a container\n\n`container` takes an element or a `document.querySelector` selector. A selector suits an overlay root in your page shell (`<div id=\"overlays\" />`); an element suits a target your own component renders. Hold that element in state from a ref callback, so the portal renders once the target exists.\n\n```tsx live\nfunction example() {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Box overflow=\"clipped\">\n        <p>The notification is declared inside this box.</p>\n        {target && (\n          <Portal container={target}>\n            <Notification color=\"success\">\n              It renders into the element after the box instead.\n            </Notification>\n          </Portal>\n        )}\n      </Box>\n      <div ref={setTarget} />\n    </>\n  );\n}\n```\n\nAn empty selector counts as no `container`. One that matches nothing falls back to `document.body` rather than throwing.\n\nA selector is looked up again on each render, so the content follows the target when the target changes. Moving to another target remounts the children, which resets their state. That includes a selector that only starts matching after the content has already shown in `document.body`, so render the target first (an overlay root in the page shell is), or pass the element once you have it, as above.\n\n### A default container\n\nA `ConfigProvider` with a `portalContainer` sets where every `Portal` inside it goes when it has no `container` of its own. The library's components that portal follow it too, such as `Popover`'s `appendToBody` panel or a `Modal` with `portal`. It takes the same element or selector as `container`, and follows the same rules, including the remount when the target turns up after the content has rendered. What those components portal is `position: fixed`, so the element has to sit where no ancestor has a `transform`, `filter`, `backdrop-filter`, `perspective`, `will-change: transform`, or a `contain` that includes `paint` or `layout`, any of which would place it against that ancestor instead of the viewport. The [ConfigProvider page](https://bestax.io/docs/api/helpers/config#where-portaled-content-goes) has the rest, and an example.\n\n```tsx\n<ConfigProvider portalContainer=\"#overlays\">\n  <App />\n</ConfigProvider>\n```\n\n### Rendering in place\n\n`disabled` renders the children where the `Portal` is, on the server as well as the client. A component that portals only sometimes (behind an `appendToBody` option, say) can keep one code path.\n\n```tsx live\n<Portal disabled>\n  <Notification>Rendered in place, as if there were no portal.</Notification>\n</Portal>\n```\n\n### Floating content and focus\n\nPositioning floating content next to its trigger is up to you; `Portal` only decides where it sits in the DOM.\n\nFocus follows the DOM too. Content portaled to the end of `document.body` is last in the Tab order, so interactive floating content should take focus when it opens and hand it back to its trigger when it closes. A focus trap doesn't cover what a `Portal` inside it renders, because that content is no longer inside the trapped element: render a nested overlay inside the trapped element, or trap it separately. To trap portaled content, put the trap on the element inside the `Portal`, as the [useFocusTrap portal example](https://bestax.io/docs/api/helpers/usefocustrap#with-portals) does.\n\n### Context and styles\n\nReact context reaches portaled children, so a `ConfigProvider` class prefix still applies, and their React events bubble up the React tree to the components around the `Portal`. CSS inheritance follows the DOM instead. A scoped `Theme` (one without `isRoot`) sets its CSS variables on a wrapper element that portaled content has left, so that content sees the page-level theme, and styles scoped to a shadow root don't reach `document.body` at all. To keep them, portal into an element inside the themed area or the shadow root: pass it as `container`, or make it the [default container](https://bestax.io/docs/api/helpers/portal#a-default-container) of a `ConfigProvider` around that area, which also reaches the content components such as `Popover` portal.\n\n---\n\n## Accessibility\n\n- The DOM decides reading and Tab order, not the React tree. Content portaled to the end of `document.body` comes last in both, so a keyboard user can't reach it from the button that opened it by pressing Tab. Move focus into interactive floating content when it opens, and back to what opened it when it closes.\n- Give floating content a role and an accessible name (`role=\"dialog\"` with `aria-label` or `aria-labelledby`), and give its trigger `aria-expanded` and `aria-controls`. Ids work across the portal, since they are shared by the whole document.\n- Content that only appears after hydration is missing from the server HTML. Keep anything a reader or a crawler needs on first load out of a portal.\n\n---\n\n## Related Components\n\n- [`Modal`](https://bestax.io/docs/api/components/modal): Has its own `portal` prop, taking the same `true`, selector or element.\n- [`Toast`](https://bestax.io/docs/api/components/toast): Portals unless `inline` is set, into its own `container` when it has one.\n- [`Theme`](https://bestax.io/docs/api/helpers/theme): Scoped themes stay behind when content is portaled; see above.\n- [`ConfigProvider`](https://bestax.io/docs/api/helpers/config): Its `portalContainer` is where a `Portal` with no `container` goes.\n\n---\n\n## Additional Resources\n\n- [Storybook: Portal Stories](https://bestax.io/storybook/?path=/story/helpers-portal--default)\n- [React: `createPortal`](https://react.dev/reference/react-dom/createPortal)\n\n---\n\n## Props\n\n| Prop        | Type                      | Default                                                      | Description                                                                                                                                                                                                                                                                                     |\n| ----------- | ------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children`  | `ReactNode`               | —                                                            | Content to render into the container.                                                                                                                                                                                                                                                           |\n| `container` | `string` \\| `HTMLElement` | a `ConfigProvider`'s `portalContainer`, else `document.body` | An element, or a `document.querySelector` selector looked up on each render. Omitted or empty, it is the `portalContainer` a `ConfigProvider` sets, or `document.body` when none is set. A selector that matches nothing means `document.body`. Moving to another target remounts the children. |\n| `disabled`  | `boolean`                 | `false`                                                      | Render the children in place instead, on the server as well as the client.                                                                                                                                                                                                                      |"
 }

package/data/components/TimeInput.json

@@ -546,7 +546,7 @@
           "name": "appendToBody",
           "type": "boolean",
           "default": "false",
-          "description": "Render the popover into `document.body` via portal. On a narrow screen an in-place popover spans the bottom of the viewport, while a portaled one stays on its `position` corner.",
+          "description": "Render the popover through a portal, into the `portalContainer` a `ConfigProvider` sets, `document.body` by default. On a narrow screen an in-place popover spans the bottom of the viewport, while a portaled one stays on its `position` corner.",
           "required": false,
           "inherited": true,
           "deprecated": false

package/data/components/Tooltip.json

@@ -47,7 +47,7 @@
     }
   ],
   "accessibility": "- Tooltip content has `role=\"tooltip\"` for screen reader announcement\n- Has `aria-hidden` that toggles based on visibility\n- Tooltip shows on both hover and focus for keyboard users\n- The `dashed` style provides a visual cue that more information is available",
-  "related": [],
+  "related": ["Button", "HoverCard", "Icon", "Popover"],
   "storybook": null,
   "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element.",
   "import": "import { Tooltip } from '@allxsmith/bestax-bulma';",

package/data/skills/bestax-custom-component/SKILL.md

@@ -67,6 +67,13 @@ A panel opened from a button (a filter form, share options, an inline edit) is `
 it rather than building one. It anchors the panel, moves focus in and back, and closes on
 Escape and outside presses.
 
+A preview that shows up on hover (a profile card on a username, a summary on a link) is
+`HoverCard`: use it rather than wiring pointer events to a `Popover`. It opens on hover and
+keyboard focus after a delay, lets the pointer move onto the card, closes on Escape, and ignores
+touch unless `openOnTap` is on, which suits only a trigger with no tap action of its own (a
+`Button` with no `onClick`, never a link). Its `trigger` has to be a link or a button, and a trigger in running text takes
+`appendToBody`. A form never goes in one; that's `Popover`.
+
 Building something else that floats (a command palette)? Render it through the library's
 `Portal` rather than `createPortal`: it renders nothing on the server and during hydration, so
 the server and client markup match. `references/api.md` has the details.

package/data/skills/bestax-custom-component/references/api.md

@@ -88,7 +88,8 @@ union (a compile error beats a silent no-op).
 
 ## `ConfigProvider` / `Theme` — `helpers/Config.tsx`, `helpers/Theme.tsx`
 
-`ConfigProvider` provides the runtime `classPrefix` (and `iconLibrary`) consumed via `useConfig`;
+`ConfigProvider` provides the runtime `classPrefix` (and `iconLibrary` and `portalContainer`)
+consumed via `useConfig`;
 `classPrefix` feeds `usePrefixedClassNames` (opt-in class prefixing to avoid collisions). `Theme`
 overrides `--bulma-*` custom properties at runtime —
 which is exactly why component SCSS must register its vars via `cv.register-vars` rather than
@@ -114,17 +115,20 @@ hard-coding values.
 ## Floating content: `Portal`
 
 A panel anchored to the button that opens it is `Popover`, which already portals
-(`appendToBody`), traps focus and dismisses itself. `Portal` is for the overlays it doesn't
-cover.
+(`appendToBody`), traps focus and dismisses itself, and a preview that opens on hover is
+`HoverCard`, which portals the same way. `Portal` is for the overlays they don't cover.
 
-`<Portal container?>` (`helpers/portal.tsx`) renders its children into `document.body`, or into
-`container` (an element or a selector), so floating content escapes an ancestor's `overflow`,
+`<Portal container?>` (`helpers/portal.tsx`) renders its children into `container` (an element or
+a selector), or without one into the `portalContainer` a `ConfigProvider` sets, and
+`document.body` when none is set, so floating content escapes an ancestor's `overflow`,
 `transform` or stacking context. It renders nothing on the server and during hydration, so the
 first client render matches; `disabled` renders in place instead. Use it rather than calling
 `createPortal` yourself, which React's server renderer can't render.
 
-Focus follows the DOM, not the React tree: portaled content comes last in the Tab order, so move
-focus into it when it opens and back to its trigger when it closes. To trap portaled content,
+Focus follows the DOM, not the React tree: portaled content sits in the Tab order where its
+container is, which for the default `document.body` is last, so an overlay you build that takes
+focus moves it in when it opens and back to its trigger when it closes. A `HoverCard` moves no
+focus when it opens. To trap portaled content,
 put the trap's ref on the element inside the `Portal`, as below with
 `useFocusTrap(panelRef, { active: open, restoreFocus: buttonRef })`. A focus trap doesn't cover
 what a `Portal` inside it renders, so render nested overlays inside the trapped element.
@@ -141,6 +145,16 @@ what a `Portal` inside it renders, so render nested overlays inside the trapped
 }
 ```
 
+Content in `document.body` loses a scoped `Theme`'s variables and a shadow root's styles. In a web
+component or a themed section, wrap the area in a `ConfigProvider` whose `portalContainer` is an
+element inside it, which also covers what the library's components portal, such as `Popover`'s
+`appendToBody` panel or a `Modal` with `portal`. In a shadow root, pass the
+element itself, held in state from a ref callback, since a selector can't reach inside one. What
+moves there is `position: fixed`, so the element must not sit under an ancestor with a
+`transform`, `filter`, `backdrop-filter`, `perspective`, `will-change: transform`, or a `contain`
+that includes `paint` or `layout`: that ancestor becomes the containing block, and overlays and
+anchored panels land against it instead of the viewport.
+
 ## Holding focus: `useFocusTrap`
 
 `useFocusTrap(ref, { active, initialFocusRef, restoreFocus })` (`helpers/useFocusTrap.ts`) moves

package/data/skills/bestax-custom-component/references/component-catalog.md

@@ -37,7 +37,7 @@ instead of hand-writing markup.
 - Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
   escape-hatch variants of the convenience wrappers above them; see the Form docs.
 
-94 documented components. Generated from the API docs — every exported
+95 documented components. Generated from the API docs — every exported
 component is guaranteed to appear (the generator fails if one lacks an API page).
 
 ## Elements
@@ -86,6 +86,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 - [Collapses](https://bestax.io/docs/api/components/collapses) — The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.
 - [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides ready-made confirm and alert dialogs, so a destructive action stays one `await dialog.confirm()` call away.
 - [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
+- [HoverCard](https://bestax.io/docs/api/components/hovercard) — The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
 - [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
 - [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
 - [Message](https://bestax.io/docs/api/components/message) — The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
@@ -147,7 +148,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
 
 - [ClientOnly](https://bestax.io/docs/api/helpers/clientonly) — `ClientOnly` renders its children only in the browser, after hydration, and a `fallback` until then…
 - [ConfigProvider](https://bestax.io/docs/api/helpers/config) — The `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components.
-- [Portal](https://bestax.io/docs/api/helpers/portal) — `Portal` renders its children into another part of the page, `document.body` unless `container` says otherwise…
+- [Portal](https://bestax.io/docs/api/helpers/portal) — `Portal` renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise…
 - [Theme](https://bestax.io/docs/api/helpers/theme) — The `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables).
 - [Valid value constants](https://bestax.io/docs/api/helpers/valid-values) — The helper tuples enumerate the core accepted values for the shared Bulma helper props — public API for building prop types and validation.
 - [classNames](https://bestax.io/docs/api/helpers/classnames) — `classNames` is a utility function for conditionally joining class names together.

package/data/skills/bestax-custom-component/references/library-contributor.md

@@ -168,7 +168,10 @@ Rules that keep components consistent:
   place in the DOM uses `Portal` (`helpers/portal.tsx`) rather than its own `createPortal` and
   `typeof document` check. `Portal` renders nothing on the server or during hydration, so the
   first client render matches the server markup. Test that with `renderToString` plus
-  `hydrateRoot` and a `console.error` spy, as `portal.test.tsx` does.
+  `hydrateRoot` and a `console.error` spy, as `portal.test.tsx` does. A component that has to
+  call `createPortal` itself, as `Modal` does to render in place until hydration, resolves its
+  target with `usePortalContainer` from the same module, so the `portalContainer` a
+  `ConfigProvider` sets reaches it too. Add it to `src/__tests__/portal-container.test.tsx`.
 
 - **Focus management builds on `useFocusTrap`.** A new component that holds focus while it is
   open uses `useFocusTrap` (`helpers/useFocusTrap.ts`) rather than its own Tab handler, so it

package/data/skills/bestax-layout-scaffold/SKILL.md

@@ -63,6 +63,12 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   element, not a node: Popover clones it to add the click and ARIA, so never wrap it in a
   clickable of your own; build the panel from `Popover.Header`/`Body`/`Footer`/`Close`, and a
   panel without a `Popover.Header` needs `ariaLabel`),
+  `HoverCard trigger={<Link href="…">…</Link>}` for a preview on hover or keyboard focus
+  (`trigger` is one link or button, cloned the same way; the card's content goes straight in as
+  children with no sub-components; a trigger inside a `Paragraph` needs `appendToBody`; hover
+  and focus only unless `openOnTap` is set, which suits only a trigger with no tap action of its
+  own, such as a `Button` with no `onClick`; on touch a link trigger just follows the link, so
+  what the card shows must be on that page too, and a form is a `Popover`),
   `Steps value={i}/onStepClick items={[{label, icon?}]}` (child form is `Steps.Step`, not
   `Steps.Item`). `Reveal cascade` staggers only its **direct children** — to stagger a grid,
   put `<Reveal delay={i * 80}>` inside each `Cell`, not around the container.

package/data/skills/bestax-optimize/references/modular-build.md

@@ -73,8 +73,8 @@ Every extras partial that exists (from the library's `src/scss/**/_index.scss`
 is **more complete** than the docs page's Option C example, which omits several):
 
 **Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
-`loading`, `collapse`, `tooltip`, `popover`, `steps`, `sidebar`, `toast`, `dialog`, `carousel`,
-`tabs`, `reveal`, `avatar`, `avatars`, `badge`
+`loading`, `collapse`, `tooltip`, `popover`, `hovercard`, `steps`, `sidebar`, `toast`, `dialog`,
+`carousel`, `tabs`, `reveal`, `avatar`, `avatars`, `badge`
 
 **Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
 `checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,

package/data/skills/bestax-theming/references/css-variables.md

@@ -170,7 +170,8 @@ lone class or the `style` prop cannot outrank:
   styles with a selector that matches or exceeds the compound:
   `.button.link-button { --bulma-link-button-ghost-color: … }`.
 - **Constituent elements** — Tooltip's variables (all but `--bulma-tooltip-dashed-color`)
-  are declared on `.tooltip-content`, Popover's on its panel, `.popover-content`, and Sidebar's
+  are declared on `.tooltip-content`, Popover's on its panel, `.popover-content`, HoverCard's
+  on its card, `.hover-card-content`, and Sidebar's
   `--bulma-sidebar-overlay-background` on `.sidebar-background`. Values set via `className` or
   `style` land on the component root and are only inherited by the constituent, so they lose to
   its own declaration — target the declaring element in your CSS:
@@ -297,6 +298,16 @@ The field around the two inputs. Its calendar is the `DateInput` one, with the v
 `--bulma-dialog-radius`, `--bulma-dialog-shadow`, `--bulma-dialog-title-color`,
 `--bulma-dialog-title-size`, `--bulma-dialog-title-weight`, `--bulma-dialog-width`
 
+### HoverCard
+
+All are declared on the card, `.hover-card-content`, so a card rendered with `appendToBody` keeps
+them. See the constituent-element exception above.
+
+`--bulma-hover-card-animation-duration`, `--bulma-hover-card-background`,
+`--bulma-hover-card-border-color`, `--bulma-hover-card-color`, `--bulma-hover-card-max-width`,
+`--bulma-hover-card-min-width`, `--bulma-hover-card-offset`, `--bulma-hover-card-padding`,
+`--bulma-hover-card-radius`, `--bulma-hover-card-shadow`, `--bulma-hover-card-z-index`
+
 ### LinkButton
 
 Declared on the compound `.button.link-button` — see the compound-selector exception above.

package/data/skills.json

@@ -6,16 +6,16 @@
       "promptName": "custom-component",
       "dir": "bestax-custom-component",
       "references": [
-        { "id": "api", "file": "references/api.md", "bytes": 10851 },
+        { "id": "api", "file": "references/api.md", "bytes": 11973 },
         {
           "id": "component-catalog",
           "file": "references/component-catalog.md",
-          "bytes": 18753
+          "bytes": 18983
         },
         {
           "id": "library-contributor",
           "file": "references/library-contributor.md",
-          "bytes": 21044
+          "bytes": 21340
         },
         { "id": "patterns", "file": "references/patterns.md", "bytes": 4601 }
       ],
@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 10113
+          "bytes": 10126
         }
       ],
       "examples": []
@@ -176,7 +176,7 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 31590
+          "bytes": 32153
         },
         {
           "id": "themeable-components",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.14.4",
+  "version": "1.14.6",
   "mcpName": "io.github.allxsmith/bestax-mcp",
   "description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
   "type": "module",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.31.0",
     "zod": "^4.4.3",
-    "@allxsmith/bestax-bulma": "^5.27.8"
+    "@allxsmith/bestax-bulma": "^5.29.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",