@allxsmith/bestax-bulma 5.27.8 → 5.28.0

package/dist/index.esm.js

@@ -19,6 +19,7 @@ export { Collapse } from './esm/components/Collapse.js';
 export { Collapses } from './esm/components/Collapses.js';
 export { Tooltip } from './esm/components/Tooltip.js';
 export { Popover, PopoverBody, PopoverClose, PopoverFooter, PopoverHeader } from './esm/components/Popover.js';
+export { HoverCard } from './esm/components/HoverCard.js';
 export { Step, Steps } from './esm/components/Steps.js';
 export { Sidebar } from './esm/components/Sidebar.js';
 export { Toast, ToastContainer, toast } from './esm/components/Toast.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,136 @@
+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 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.
+     * @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/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/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/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/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/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/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/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/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/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/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/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/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/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/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';

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

@@ -0,0 +1,136 @@
+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 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.
+     * @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/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/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/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> & {