bestax-mcp 1.14.4 → 1.14.5

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.27.8"
+    "version": "5.28.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -57,6 +57,7 @@
         "Collapses",
         "Dialog",
         "Dropdown",
+        "HoverCard",
         "Loading",
         "Menu",
         "Message",
@@ -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",
@@ -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/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 renders at the end of `<body>`, so it sits last in the Tab order.\n  Tab reaches it only after the rest of the page, and focus leaving the trigger on the way closes\n  it. Keyboard users can open it, read it and close it, so whatever it links to should be\n  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 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. 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 last in the Tab order, at the end of `<body>`. 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 don't reach it there.",
+          "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/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",

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

@@ -114,8 +114,8 @@ 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`,
@@ -123,8 +123,10 @@ cover.
 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.

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.

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,11 +6,11 @@
       "promptName": "custom-component",
       "dir": "bestax-custom-component",
       "references": [
-        { "id": "api", "file": "references/api.md", "bytes": 10851 },
+        { "id": "api", "file": "references/api.md", "bytes": 11068 },
         {
           "id": "component-catalog",
           "file": "references/component-catalog.md",
-          "bytes": 18753
+          "bytes": 18961
         },
         {
           "id": "library-contributor",
@@ -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.5",
   "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.28.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",