@allxsmith/bestax-bulma 5.27.8 → 5.29.0

package/dist/types-cjs/components/HoverCard.d.ts

@@ -0,0 +1,138 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import type { PickerPosition } from '../form/_pickerInternals/pickerTypes.js';
+/**
+ * Where the card opens against its trigger: below (`bottom-*`) or above
+ * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the
+ * one that keeps the card in the viewport, preferring below and lined up on
+ * the left. The same union `Popover` and the date and time pickers take.
+ */
+export type HoverCardPosition = PickerPosition;
+/**
+ * Props for the HoverCard component. `className`, `id`, the other HTML
+ * attributes and the helper props land on the `span` around the trigger, not
+ * on the card; `contentClassName` reaches the card.
+ * @extraProp {string} [className] - Additional classes for the `span` around the trigger. The card takes `contentClassName`.
+ */
+export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * 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.
+     */
+    trigger: React.ReactElement;
+    /**
+     * 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.
+     */
+    children?: React.ReactNode;
+    /**
+     * 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.
+     */
+    open?: boolean;
+    /**
+     * 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.
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 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.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How long the pointer or keyboard focus waits on the trigger before the
+     * card opens, in milliseconds.
+     * @defaultValue 600
+     */
+    openDelay?: number;
+    /**
+     * 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.
+     * @defaultValue 300
+     */
+    closeDelay?: number;
+    /**
+     * Where the card opens against the trigger.
+     * @defaultValue 'bottom-left'
+     */
+    position?: HoverCardPosition;
+    /**
+     * 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.
+     * @defaultValue false
+     */
+    appendToBody?: boolean;
+    /**
+     * 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.
+     * @defaultValue false
+     */
+    openOnTap?: boolean;
+    /** Additional classes for the card (`.hover-card-content`). */
+    contentClassName?: string;
+}
+/**
+ * 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`.
+ *
+ * @function
+ * @param {HoverCardProps} props - Props for the HoverCard component.
+ * @returns {JSX.Element} The trigger in its wrapper, and the card while open.
+ *
+ * @example
+ * <HoverCard trigger={<a href="/people/ada">Ada Lovelace</a>}>
+ *   <Title as="p" size="6">Ada Lovelace</Title>
+ *   <SubTitle as="p" size="6">Analytical Engine team</SubTitle>
+ * </HoverCard>
+ */
+export declare const HoverCard: React.FC<HoverCardProps>;
+export default HoverCard;

package/dist/types-cjs/components/Modal.d.ts

@@ -44,7 +44,8 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     /**
      * 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
+     * `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.

package/dist/types-cjs/components/Popover.d.ts

@@ -53,13 +53,14 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      */
     position?: PopoverPosition;
     /**
-     * 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.
+     * 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.
      * @defaultValue false
      */
     appendToBody?: boolean;

package/dist/types-cjs/form/DateInput.d.ts

@@ -22,7 +22,7 @@ import { DateInputBaseProps } from './DateInputBase.js';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
  */
 export interface DateInputProps extends DateInputBaseProps {
-    /** 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`). */
+    /** 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/form/DateInputBase.d.ts

@@ -97,7 +97,10 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     closeOnSelect?: boolean;
     /** Popover anchor position relative to the input. */
     position?: PickerPosition;
-    /** Render the popover into `document.body` via portal. */
+    /**
+     * Render the popover through a portal, into the `portalContainer` a
+     * `ConfigProvider` sets, `document.body` by default.
+     */
     appendToBody?: boolean;
     /**
      * Bulma color modifier for the input, also carried by the calendar, where it

package/dist/types-cjs/form/DateRangeInputBase.d.ts

@@ -84,7 +84,10 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
     closeOnSelect?: boolean;
     /** Popover anchor position relative to the field. */
     position?: PickerPosition;
-    /** Render the popover into `document.body` via portal. */
+    /**
+     * Render the popover through a portal, into the `portalContainer` a
+     * `ConfigProvider` sets, `document.body` by default.
+     */
     appendToBody?: boolean;
     /**
      * Bulma color modifier for the field, also carried by the calendar, where it

package/dist/types-cjs/form/DateTimeInput.d.ts

@@ -20,7 +20,7 @@ import { DateTimeInputBaseProps } from './DateTimeInputBase.js';
  * @extraProp {boolean} [required=false] - Marks the field as required for native HTML form validation.
  */
 export interface DateTimeInputProps extends DateTimeInputBaseProps {
-    /** 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`). */
+    /** 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/form/DateTimeInputBase.d.ts

@@ -70,7 +70,10 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
     closeOnSelect?: boolean;
     /** Popover anchor position. */
     position?: PickerPosition;
-    /** Render the popover into `document.body` via portal. */
+    /**
+     * Render the popover through a portal, into the `portalContainer` a
+     * `ConfigProvider` sets, `document.body` by default.
+     */
     appendToBody?: boolean;
     /**
      * Bulma color modifier for the input, also carried by the calendar and the

package/dist/types-cjs/form/Field.d.ts

@@ -12,7 +12,7 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, Omit<B
     hasAddons?: boolean | 'centered' | 'right';
     /** Constrains the field to its content's width (used inside horizontal field bodies). */
     narrow?: boolean;
-    /** 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. 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. Pass `labelProps={{ htmlFor }}` to wire your own `id`, a `for` the label always keeps, 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. */
+    /** 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: 'small' | 'normal' | 'medium' | 'large';

package/dist/types-cjs/form/File.d.ts

@@ -11,7 +11,7 @@ import { FormFieldProps } from './fieldProps.js';
  * name on that `Field`.
  */
 export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** 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`). */
+    /** 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. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

package/dist/types-cjs/form/Input.d.ts

@@ -18,7 +18,7 @@ import { InputBaseProps } from './InputBase.js';
  * `label`, `horizontal` and class name on that `Field`.
  */
 export interface InputProps extends InputBaseProps {
-    /** 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`). */
+    /** 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/form/Numberinput.d.ts

@@ -17,7 +17,7 @@ export type NumberinputVariant = 'plusminus' | 'stepper';
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
  */
 export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
-    /** 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`. */
+    /** 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`. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

package/dist/types-cjs/form/Select.d.ts

@@ -18,7 +18,7 @@ import { SelectBaseProps } from './SelectBase.js';
  * `label`, `horizontal` and class name on that `Field`.
  */
 export interface SelectProps extends SelectBaseProps {
-    /** Field label. Automatically associated with the select 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`). */
+    /** Field label. Automatically associated with the select 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/form/Slider.d.ts

@@ -22,7 +22,7 @@ export interface SliderMark {
  * Shared base props for single and range Slider modes.
  */
 interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
-    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the `htmlFor` targets the low (minimum) thumb, and the label also starts each thumb's name through `aria-labelledby`, as in "Price Minimum value" and "Price Maximum value", unless an `aria-label` or `aria-labelledby` on the Slider takes its place there. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`), naming a range Slider's thumbs the same way. A `Field` label you wire by hand to the low thumb with `labelProps.htmlFor` names the thumbs too when you also give it an `id` there, since the `Field` generates none for it. */
+    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the `htmlFor` targets the low (minimum) thumb, and the label also starts each thumb's name through `aria-labelledby`, as in "Price Minimum value" and "Price Maximum value", unless an `aria-label` or `aria-labelledby` on the Slider takes its place there. 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, naming a range Slider's thumbs the same way. A `Field` label you wire by hand to the low thumb with `labelProps.htmlFor` names the thumbs too when you also give it an `id` there, since the `Field` generates none for it. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). In range mode an `id` here is the one the thumbs' `aria-labelledby` points at, in place of a generated one. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

package/dist/types-cjs/form/Taginput.d.ts

@@ -26,7 +26,7 @@ type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
  */
 export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`); it then replaces the `aria-label="Add tag"` fallback too. */
+    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when the tag limit is reached (the input is not rendered). 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; it then replaces the `aria-label="Add tag"` fallback too. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

package/dist/types-cjs/form/TextArea.d.ts

@@ -18,7 +18,7 @@ import { TextAreaBaseProps } from './TextAreaBase.js';
  * `label`, `horizontal` and class name on that `Field`.
  */
 export interface TextAreaProps extends TextAreaBaseProps {
-    /** Field label. Automatically associated with the textarea 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`). */
+    /** Field label. Automatically associated with the textarea 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/form/TimeInput.d.ts

@@ -22,7 +22,7 @@ import { TimeInputBaseProps } from './TimeInputBase.js';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
  */
 export interface TimeInputProps extends TimeInputBaseProps {
-    /** 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`). */
+    /** 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. */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/form/TimeInputBase.d.ts

@@ -64,7 +64,8 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
     /** Popover anchor position relative to the input. */
     position?: PickerPosition;
     /**
-     * Render the popover into `document.body` via portal. On a narrow screen
+     * 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.
      */

package/dist/types-cjs/helpers/Config.d.ts

@@ -3,13 +3,14 @@ import React, { ReactNode } from 'react';
 type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
 /**
  * Shape of the configuration context value.
- *
- * @property {string} [classPrefix] - Prefix applied to all Bulma class names.
- * @property {IconLibrary} [iconLibrary] - Default icon library for Icon components.
  */
 export interface ConfigContextProps {
+    /** Prefix applied to all Bulma class names. */
     classPrefix?: string;
+    /** Default icon library for Icon components. */
     iconLibrary?: IconLibrary;
+    /** Where portaled content goes when it has no target of its own. */
+    portalContainer?: string | HTMLElement;
 }
 /**
  * Hook to access the bulma-ui configuration context.
@@ -28,10 +29,40 @@ export interface ConfigProviderProps {
     classPrefix?: string;
     /** Default icon library for Icon components. */
     iconLibrary?: IconLibrary;
+    /**
+     * 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.
+     */
+    portalContainer?: string | HTMLElement;
 }
 /**
  * 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.
+ *
  * @function
  * @param {ConfigProviderProps} props - Provider props.
  * @returns {JSX.Element} The context provider wrapping children.

package/dist/types-cjs/helpers/portal.d.ts

@@ -14,6 +14,22 @@ import React from 'react';
  * @returns The resolved DOM node to portal into.
  */
 export declare function resolvePortalContainer(container?: string | HTMLElement): HTMLElement;
+/**
+ * Where a component's portal goes, as a function to call when the portal is
+ * created: the target the component was given, else the `portalContainer` a
+ * `ConfigProvider` sets, else `document.body`, each read as
+ * `resolvePortalContainer` reads it. A component that portals resolves its
+ * target through this, so the provider's default reaches it.
+ *
+ * The hook only reads context, so it is safe to call on the server, ahead of
+ * any early return. The function it returns reads the DOM, so call it only
+ * where the portal is created, which the server never reaches.
+ *
+ * @function usePortalContainer
+ * @returns A function that takes the component's own target, if any, and
+ * returns the DOM node to portal into.
+ */
+export declare function usePortalContainer(): (container?: string | HTMLElement) => HTMLElement;
 /**
  * Props for the Portal component.
  */
@@ -22,8 +38,10 @@ export interface PortalProps {
     children?: React.ReactNode;
     /**
      * 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
+     * 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`.
@@ -39,7 +57,7 @@ export interface PortalProps {
     disabled?: boolean;
 }
 /**
- * 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.
+ * 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
@@ -50,8 +68,12 @@ export interface PortalProps {
  * 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.
+ * 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

package/dist/types-cjs/helpers/useFocusTrap.d.ts

@@ -1,4 +1,13 @@
 import type { RefObject } from 'react';
+/**
+ * Whether the browser puts `el` in the tab order, before anything that hides
+ * or disables it. The `tabIndex` property can't answer this on its own: it
+ * can read `-1` for an editable region or an `<embed>` that Tab still visits,
+ * and `0` for a `<video>` without controls that it doesn't. So a valid
+ * `tabindex` attribute decides, and otherwise the element's kind does.
+ * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
+ */
+export declare function isTabbableKind(el: Element): boolean;
 /**
  * The first tab stop inside `container`, found the way the trap finds it, or
  * `null` when there is none. For a component that moves focus into a panel

package/dist/types-cjs/helpers/useHoverOpen.d.ts

@@ -0,0 +1,98 @@
+import type { FocusEvent, PointerEvent, RefObject } from 'react';
+/**
+ * Options for `useHoverOpen`.
+ */
+export interface UseHoverOpenOptions {
+    /** Whether the floating element is open now, controlled or not. */
+    open: boolean;
+    /**
+     * Asks for the floating element to open or close: when a delay runs out,
+     * and at once on Escape. It isn't asked for the state it is already in,
+     * except that an Escape between asking to open and the open showing takes
+     * the ask back by asking to close.
+     */
+    onOpenChange: (open: boolean) => void;
+    /** How long hover or keyboard focus waits before asking to open, in milliseconds. */
+    openDelay: number;
+    /**
+     * How long it waits once the pointer and focus have both left before
+     * asking to close, in milliseconds. Coming back in that time keeps it open,
+     * which is how the pointer crosses a gap to the floating element.
+     */
+    closeDelay: number;
+    /**
+     * The element that opens it, which has to take focus itself. The Escape
+     * listener goes on its document, an iframe's when it renders into one, and
+     * focus left in the floating element comes back here when the floating
+     * element closes.
+     */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** The floating element, while it is open. */
+    floatingRef: RefObject<HTMLElement | null>;
+    /**
+     * Whether a tap on the trigger opens it at once, with the next tap closing
+     * it. Without it, a touch pointer never opens it. While a tap holds it
+     * open, no hover timer closes it, and a press outside the trigger and the
+     * floating element does, as Escape does. The trigger's own tap action
+     * still runs.
+     * @defaultValue false
+     */
+    openOnTap?: boolean;
+}
+/**
+ * Pointer and focus handlers for the element that holds the trigger. The
+ * floating element has to be inside it in React's tree, in place or through
+ * a portal, since React's events reach it from there either way, and it
+ * should hold nothing else: focus inside it that isn't on the trigger counts
+ * as focus in the floating element.
+ */
+export interface HoverOpenHandlers {
+    onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+    onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+    onFocus: (event: FocusEvent<HTMLElement>) => void;
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+}
+/**
+ * Decides when a floating element that opens on hover or keyboard focus asks
+ * to open and to close. It renders nothing, and leaves roles, ARIA and
+ * placement to the component that calls it.
+ *
+ * - The pointer entering, or keyboard focus arriving on the trigger, asks to
+ *   open after `openDelay`. A touch pointer doesn't count. Neither does focus
+ *   that a press brings to the trigger: it counts when the browser shows it
+ *   as `:focus-visible`.
+ * - Focus in the floating element holds it open however it got there,
+ *   including focus in content it portals elsewhere, such as a nested card.
+ *   Whether a click focuses what it lands on is up to the browser: Safari
+ *   and Firefox on macOS don't focus a button on click, so there a clicked
+ *   button doesn't hold it once the pointer leaves.
+ * - Once the pointer and focus have both left, it asks to close after
+ *   `closeDelay`, and either coming back before then keeps it open. Nothing
+ *   else closes it on a timer.
+ * - Escape closes it at once, wherever focus is, and stops there when focus
+ *   is in it, on its trigger or nowhere, so a `Popover` or `Modal` around it
+ *   keeps its own. With focus somewhere else, the key goes on after closing
+ *   it. Inside another one, the inner one closes first. Escape before it
+ *   opens takes the opening back and goes on its way. One key listener per
+ *   document serves every hook on it, there only while one of them is open
+ *   or on its way to open.
+ * - With `openOnTap`, a tap on the trigger opens it at once and the next tap
+ *   on the trigger closes it. While a tap holds it open, a press outside the
+ *   trigger and the floating element closes it, from a listener on the
+ *   document that is there only then. Taps never count as hover, and mouse
+ *   and pen work the same with it or without.
+ * - Once it closes, for any reason, whatever was holding it open has to
+ *   leave and come back to open it again.
+ * - When the floating element closes with focus inside it, focus goes back
+ *   to the trigger, unless the same update put it somewhere else. Handing it
+ *   back doesn't count as focus arriving.
+ *
+ * Nothing it scheduled runs after the component unmounts.
+ *
+ * @function useHoverOpen
+ * @param options - The open state, how to ask for another, the delays, and the two elements.
+ * @returns Handlers for the element that holds the trigger.
+ */
+export declare function useHoverOpen(options: UseHoverOpenOptions): HoverOpenHandlers;

package/dist/types-cjs/index.d.ts

@@ -18,6 +18,7 @@ export * from './components/Collapse.js';
 export * from './components/Collapses.js';
 export * from './components/Tooltip.js';
 export * from './components/Popover.js';
+export * from './components/HoverCard.js';
 export * from './components/Steps.js';
 export * from './components/Sidebar.js';
 export * from './components/Toast.js';