bestax-mcp 1.14.3 → 1.14.5

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.27.2"
+    "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",
@@ -917,7 +929,7 @@
       "import": "import { Slider } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 30,
-      "exampleCount": 11
+      "exampleCount": 13
     },
     {
       "name": "Span",
@@ -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"],
@@ -2007,6 +2030,7 @@
     "--bulma-notification-background-l": ["Notification"],
     "--bulma-notification-code-background-color": ["Notification"],
     "--bulma-notification-color-l": ["Notification"],
+    "--bulma-notification-delete-padding-inline-end": ["Notification"],
     "--bulma-notification-h": ["Notification"],
     "--bulma-notification-padding": ["Notification"],
     "--bulma-notification-radius": ["Notification"],

package/data/components/Autocomplete.json

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

package/data/components/DateInput.json

@@ -191,7 +191,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
+          "description": "Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/DateRangeInput.json

@@ -46,7 +46,7 @@
       "code": "<Field label=\"Leave\">\n  <Control iconLeftName=\"calendar-alt\">\n    <DateRangeInput />\n  </Control>\n</Field>"
     }
   ],
-  "accessibility": "- The root is a `role=\"group\"` named by `label` through `aria-labelledby`, since the label names two inputs rather than one. Inside a labeled `Field`, that `Field`'s label names the group the same way. An `aria-label` or `aria-labelledby` you give the group wins over either label.\n- Each input is a `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`, and its own name: \"Start date\" or \"End date\", from the `labels` keys `rangeStart` and `rangeEnd`. The separator between them is hidden from assistive technology.\n- The popover is a `role=\"dialog\"` named \"Choose date range\" (`labels.chooseDateRange`). Opening it puts focus on the calendar's focused day, and closing it returns focus to the input you were last in, or to the start input.\n- The day grid is `aria-multiselectable`, and its days sit in a `role=\"row\"` per week. Every day of the range is `aria-selected`, both ends included. While the end is still being picked, only the start is: the preview is not a selection.\n- The start and end days are described as \"Start date\" and \"End date\", so moving onto either says which it is. While the end is still being picked, the day the range would end on is described as \"Choose as end date\" (`labels.rangePreviewEnd`).\n- A polite live region in the calendar states the range in words, such as \"Start date: June 10, 2024, End date: June 13, 2024\", and announces each pick. The grid points at it too, so moving into the grid reads the current range.\n- Everything else is the calendar `DateInput` uses: a roving `tabindex`, `aria-disabled` on disabled days and `aria-current=\"date\"` on today.",
+  "accessibility": "- The root is a `role=\"group\"` named by `label` through `aria-labelledby`, since the label names two inputs rather than one. Inside a labeled `Field`, that `Field`'s label names the group the same way, whether the `Field` holds `DateRangeInput` or a `DateRangeInputBase` you composed in a `Control` yourself, `inline` or not. An `aria-label` or `aria-labelledby` you give the group wins over either label.\n- Each input is a `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`, and its own name: \"Start date\" or \"End date\", from the `labels` keys `rangeStart` and `rangeEnd`. The separator between them is hidden from assistive technology.\n- The popover is a `role=\"dialog\"` named \"Choose date range\" (`labels.chooseDateRange`). Opening it puts focus on the calendar's focused day, and closing it returns focus to the input you were last in, or to the start input.\n- The day grid is `aria-multiselectable`, and its days sit in a `role=\"row\"` per week. Every day of the range is `aria-selected`, both ends included. While the end is still being picked, only the start is: the preview is not a selection.\n- The start and end days are described as \"Start date\" and \"End date\", so moving onto either says which it is. While the end is still being picked, the day the range would end on is described as \"Choose as end date\" (`labels.rangePreviewEnd`).\n- A polite live region in the calendar states the range in words, such as \"Start date: June 10, 2024, End date: June 13, 2024\", and announces each pick. The grid points at it too, so moving into the grid reads the current range.\n- Everything else is the calendar `DateInput` uses: a roving `tabindex`, `aria-disabled` on disabled days and `aria-current=\"date\"` on today.",
   "related": ["DateInput", "DateTimeInput", "Field"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-daterangeinput",
   "summary": "The `DateRangeInput` component is a form input for a start and end date, picked from one popover calendar or typed into two segmented inputs.",

package/data/components/DateTimeInput.json

@@ -187,7 +187,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
+          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Delete.json

@@ -129,25 +129,25 @@
       "css": "--bulma-delete-dimensions",
       "sass": null,
       "default": "1.25rem",
-      "scope": "global"
+      "scope": "compound"
     },
     {
       "css": "--bulma-delete-background-l",
       "sass": null,
       "default": "0%",
-      "scope": "global"
+      "scope": "root"
     },
     {
       "css": "--bulma-delete-background-alpha",
       "sass": null,
       "default": "0.5",
-      "scope": "global"
+      "scope": "root"
     },
     {
       "css": "--bulma-delete-color",
       "sass": null,
       "default": "var(--bulma-white)",
-      "scope": "global"
+      "scope": "root"
     }
   ]
 }

package/data/components/Field.json

@@ -83,10 +83,10 @@
     },
     {
       "title": "Compound (dot-notation) usage",
-      "code": "<Field horizontal>\n  <Field.Label>Name</Field.Label>\n  <Field.Body>\n    <Field.Control>\n      <Input placeholder=\"Jane Doe\" />\n    </Field.Control>\n  </Field.Body>\n</Field>"
+      "code": "<Field horizontal>\n  <Field.Label size=\"normal\">\n    <label className=\"label\" htmlFor=\"compound-name\">\n      Name\n    </label>\n  </Field.Label>\n  <Field.Body>\n    <Field.Control>\n      <Input id=\"compound-name\" placeholder=\"Jane Doe\" />\n    </Field.Control>\n  </Field.Body>\n</Field>"
     }
   ],
-  "accessibility": "- The `label` prop names the one control the Field holds. A composed `InputBase`, `SelectBase`, or `TextAreaBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id the label's `for` points at, so clicking the label focuses the control and assistive technology announces it.\n- A group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) can't take a `for`, so the label gets an id (yours from `labelProps.id`, otherwise a generated one) and the group points `aria-labelledby` at it. An `aria-label` or `aria-labelledby` you set on the group wins over the Field's label, as it does over a group's own `label`.\n- An `id` you set on the control wins too: it keeps that id, and the label then names it only if you point `labelProps={{ htmlFor }}` at it. Pass `labelProps={{ htmlFor: undefined }}` to opt out of the association entirely.\n- Association is skipped for `grouped`/`hasAddons` fields (they hold several controls), and a `Field` nested inside a labeled one starts its own scope. A horizontal Field wraps its children in a `Field.Body` of its own and keeps the association, but the pattern with an inner `Field` in that body needs it wired by hand.\n- Two controls in one plain labeled Field would both adopt its id. Give each an `id` of its own and label it individually.\n- A labeled Field whose content takes no `for`, a group included, renders its `for` unmatched. `Checkbox`, `Radio` and `Switch` take nothing from the label at all: each is named by its own children, so put the text there rather than in the Field's `label`. Where you point content at the label by hand, as with a group in an inner `Field`, pass `labelProps={{ id, htmlFor: undefined }}` so the label keeps its id and drops the `for`.\n- Grouped/horizontal layouts use Bulma’s grid for layout.\n- Always use the `label` prop or a custom label for clarity.",
+  "accessibility": "- For a single control, prefer the control's own `label` prop, with `horizontal` for a side-by-side row. It renders this `Field` and its label and wires the `for` itself, to your `id` when you pass one: `<Input label=\"Email\" id=\"email\" horizontal />`.\n- The `label` prop names the one control the Field holds. A composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase`, or `DateTimeInputBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id the label's `for` points at, so clicking the label focuses the control and assistive technology announces it. An `inline` picker renders no input, so it takes nothing.\n- A control with an `id` of its own keeps it and never takes the generated one, so `<Field label=\"Email\"><Input id=\"email\" /></Field>` renders a label that names nothing. Leave the `id` off, or pass the same value as `labelProps={{ htmlFor: 'email' }}`. Pass `labelProps={{ htmlFor: undefined }}` to opt out of the association entirely.\n- A range `Slider` takes that id on its low thumb, and its thumbs also point `aria-labelledby` at the label (at `labelProps.id` when you set one), so under a label of \"Price range\" they announce as \"Price range Minimum value\" and \"Price range Maximum value\". An `ariaLabel` entry names its thumb instead, and an `aria-label` or `aria-labelledby` on the Slider takes the label's place in both names. A label you wire by hand with `labelProps={{ htmlFor }}` gets no generated id, so it reaches the thumbs' names only when you give it an `id` there too, as in `labelProps={{ htmlFor: 'price', id: 'price-label' }}`.\n- An `Autocomplete` points its open suggestion list's `aria-labelledby` at the label the same way, so under a label of \"Country\" the list announces as \"Country\" rather than its fallback name, \"Suggestions\". A label you wire by hand needs an `id` in `labelProps` for this too, as in `labelProps={{ htmlFor: 'country', id: 'country-label' }}`.\n- A group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) can't take a `for`, so the label gets an id (yours from `labelProps.id`, otherwise a generated one) and the group points `aria-labelledby` at it. An `aria-label` or `aria-labelledby` you set on the group wins over the Field's label, as it does over a group's own `label`.\n- Association is skipped for `grouped`/`hasAddons` fields (they hold several controls), and a `Field` nested inside a labeled one starts its own scope. A horizontal Field wraps its children in a `Field.Body` of its own and keeps the association, but the pattern with an inner `Field` in that body needs it wired by hand. A label you wire by hand names the control its `for` points at in a `grouped` or `hasAddons` field too, and with an `id` in `labelProps` it names a range `Slider`'s thumbs and an `Autocomplete`'s list there as well. No group points at it on its own.\n- Two controls in one plain labeled Field would both adopt its id. Give each an `id` of its own and label it individually.\n- Once a labeled Field's content has mounted, its label keeps the generated `for` only while one of the inputs above holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `for`, so hydration matches, and an input that mounts later puts it back. A `for` you set with `labelProps={{ htmlFor }}` always stays. `Checkbox`, `Radio` and `Switch` take nothing from the label on their own: each is named by its own children, so put the text there, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Where you point content at the label by hand, as with a group in an inner `Field`, `labelProps={{ id }}` is enough in the browser, and `labelProps={{ id, htmlFor: undefined }}` keeps the `for` out of server-rendered HTML too.\n- Grouped/horizontal layouts use Bulma’s grid for layout.",
   "related": [
     "Checkbox",
     "Checkboxes",
@@ -149,7 +149,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase` or `TextAreaBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children. Only the single inputs take the `htmlFor`, so with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own.",
+          "description": "Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete` also names its open suggestion list after the label through `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -167,7 +167,7 @@
           "name": "labelProps",
           "type": "React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }",
           "default": null,
-          "description": "Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. An `id` here is the one a group control's `aria-labelledby` points at; otherwise the label gets a generated one while the association is on. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes.",
+          "description": "Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider` or an `Autocomplete` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -226,7 +226,7 @@
     },
     {
       "path": "Field.Label",
-      "summary": "FieldLabel component for rendering a Bulma field label.",
+      "summary": "FieldLabel component for rendering a Bulma field label. It renders the label column of a horizontal `Field` (a `div` with the `field-label` class), not a `<label>`, so text placed straight in it names nothing. Put a `<label>` with the `label` class inside it and point its `htmlFor` at the control's `id`, or give the horizontal `Field` a `label` prop, which renders this column and its `<label>` for you. A `<label>` you put here names the control through its `htmlFor` alone: a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s label only when its `label` prop renders it and it names the control. Where it would not name the control on its own, as in an inner `Field`, pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.",
       "component": null,
       "props": [
         {

package/data/components/File.json

@@ -91,7 +91,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
+          "description": "Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here.",
           "required": false,
           "inherited": false,
           "deprecated": false

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/Input.json

@@ -99,15 +99,15 @@
     },
     {
       "title": "Horizontal — Validation Error",
-      "code": "<Field horizontal label=\"Email\">\n  <Field.Body>\n    <Field>\n      <Control iconLeftName=\"envelope\" iconRightName=\"exclamation-triangle\">\n        <Input type=\"email\" color=\"danger\" value=\"hello@\" onChange={() => {}} />\n      </Control>\n      <p className=\"help is-danger\">This email is invalid</p>\n    </Field>\n  </Field.Body>\n</Field>"
+      "code": "<Field horizontal label=\"Email\" labelProps={{ htmlFor: 'invalid-email' }}>\n  <Field.Body>\n    <Field>\n      <Control iconLeftName=\"envelope\" iconRightName=\"exclamation-triangle\">\n        <Input\n          id=\"invalid-email\"\n          type=\"email\"\n          color=\"danger\"\n          value=\"hello@\"\n          onChange={() => {}}\n        />\n      </Control>\n      <p className=\"help is-danger\">This email is invalid</p>\n    </Field>\n  </Field.Body>\n</Field>"
     },
     {
       "title": "Horizontal — Addons (Phone with Country Code)",
-      "code": "<Field horizontal label=\"Phone\">\n  <Field.Body>\n    <Field hasAddons>\n      <Control>\n        <Button isStatic>+44</Button>\n      </Control>\n      <Control isExpanded>\n        <Input type=\"tel\" placeholder=\"Your phone number\" />\n      </Control>\n    </Field>\n  </Field.Body>\n</Field>"
+      "code": "<Field horizontal label=\"Phone\" labelProps={{ htmlFor: 'phone-number' }}>\n  <Field.Body>\n    <Field hasAddons>\n      <Control>\n        <Button isStatic>+44</Button>\n      </Control>\n      <Control isExpanded>\n        <Input id=\"phone-number\" type=\"tel\" placeholder=\"Your phone number\" />\n      </Control>\n    </Field>\n  </Field.Body>\n</Field>"
     },
     {
       "title": "Horizontal — Submit Row",
-      "code": "<>\n  <Field horizontal label=\"Name\">\n    <Field.Body>\n      <Field>\n        <Control>\n          <Input placeholder=\"Your name\" />\n        </Control>\n      </Field>\n    </Field.Body>\n  </Field>\n  <Field horizontal>\n    <Field.Label />\n    <Field.Body>\n      <Field>\n        <Control>\n          <Button color=\"primary\">Submit</Button>\n        </Control>\n      </Field>\n    </Field.Body>\n  </Field>\n</>"
+      "code": "<>\n  <Field horizontal label=\"Name\" labelProps={{ htmlFor: 'submit-row-name' }}>\n    <Field.Body>\n      <Field>\n        <Control>\n          <Input id=\"submit-row-name\" placeholder=\"Your name\" />\n        </Control>\n      </Field>\n    </Field.Body>\n  </Field>\n  <Field horizontal>\n    <Field.Label />\n    <Field.Body>\n      <Field>\n        <Control>\n          <Button color=\"primary\">Submit</Button>\n        </Control>\n      </Field>\n    </Field.Body>\n  </Field>\n</>"
     },
     {
       "title": "Disabled Fieldset",
@@ -119,14 +119,14 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Username\">\n      <Field.Body>\n        <Field>\n          <Input placeholder=\"Enter username\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Username\"\n      labelProps={{ htmlFor: 'username-field' }}\n    >\n      <Field.Body>\n        <Field>\n          <Input id=\"username-field\" placeholder=\"Enter username\" />\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Username\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"user\">\n            <Input placeholder=\"Enter username\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Field\n      horizontal\n      label=\"Username\"\n      labelProps={{ htmlFor: 'username-field-control' }}\n    >\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"user\">\n            <Input id=\"username-field-control\" placeholder=\"Enter username\" />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],
-  "accessibility": "- Always provide a label. The `label` prop is automatically associated with the input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it.\n- When composing with `Field` instead, the `Field`'s own `label` associates with the input automatically when the input sits directly in that labeled `Field` — a nested unlabeled `Field` (as in horizontal multi-field layouts) starts its own scope. Pass `labelProps={{ htmlFor }}` and a matching `id` for a stable id or to label across a nested `Field`.\n- Use the correct input `type` for semantics (`text`, `email`, etc.).",
+  "accessibility": "- Always provide a label. The `label` prop is automatically associated with the input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it.\n- When composing with `Field` instead, the `Field`'s own `label` associates with the input automatically when the input sits directly in that labeled `Field` and has no `id` of its own. A nested unlabeled `Field` (as in horizontal multi-field layouts) starts its own scope. With an `id` of your own, or across a nested `Field`, the label names the input only when you pass that `id` as `labelProps={{ htmlFor }}`.\n- Use the correct input `type` for semantics (`text`, `email`, etc.).",
   "related": ["Control", "Field"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-input--default",
   "summary": "The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static state, hover/focus/loading states, and all Bulma helper props.",
@@ -143,7 +143,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`).",
+          "description": "Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here.",
           "required": false,
           "inherited": false,
           "deprecated": false

package/data/components/Notification.json

@@ -89,7 +89,7 @@
           "name": "hasDelete",
           "type": "boolean",
           "default": "false",
-          "description": "Shows a close (delete) button in the notification. It renders `type=\"button\"`, so it does not submit a form around it.",
+          "description": "Shows a close (delete) button in the notification. It renders `type=\"button\"`, so it does not submit a form around it. The notification also takes `has-delete`, which pads its end by `--bulma-notification-delete-padding-inline-end` so the text clears the button. That rule ships in bestax's stylesheets, not Bulma's, so an app styled by Bulma's CSS alone keeps Bulma's padding.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -119,6 +119,12 @@
     }
   ],
   "cssVars": [
+    {
+      "css": "--bulma-notification-delete-padding-inline-end",
+      "sass": "$notification-delete-padding-inline-end",
+      "default": "calc(1rem + 1.25rem + 0.75rem)",
+      "scope": "root"
+    },
     {
       "css": "--bulma-notification-h",
       "sass": null,

package/data/components/Numberinput.json

@@ -71,7 +71,7 @@
           "name": "label",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). Not rendered either by a plusminus `bare` Numberinput outside a `Field`.",
+          "description": "Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. Not rendered either by a plusminus `bare` Numberinput outside a `Field`.",
           "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",