@allxsmith/bestax-bulma 5.27.7 → 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,11 +12,11 @@ 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 with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
+    /** 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';
-    /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider` or an `Autocomplete` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes. */
+    /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s suggestion list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider` or an `Autocomplete` whose `id` your `htmlFor` names still points its thumbs or its suggestion list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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/FormContext.d.ts

@@ -105,10 +105,14 @@ export declare const rendersOwnControl: (component: string, options: OwnControlO
  * The id a labeled Field wants its single composed control to adopt (#495).
  * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the
  * user took over the association with an explicit `labelProps.htmlFor`.
- * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase,
- * and the date and time picker bases unless inline, #968) and, through
- * `useAutoLabelId`, by the convenience inputs that render an input of their
- * own (#939). Internal; not part of the public API.
+ * Consumed through `useFieldLabelTarget` by the single-control bases
+ * (InputBase, SelectBase, TextAreaBase, and the date and time picker bases
+ * unless inline, #968) and, through `useAutoLabelId`, by the convenience
+ * inputs that render an input of their own (#939). Read it only through
+ * those, which report what they take: a control that read it directly would
+ * report nothing and lose its label (#1004), and
+ * `__tests__/field-label-readers.test.ts` fails on one. Internal; not part of
+ * the public API.
  */
 export declare const useFieldLabelId: () => string | undefined;
 /** Provider for the Field label-target id — used internally by Field. */
@@ -139,15 +143,50 @@ export interface FieldLabelFor {
  * the outer label names it, and point at that label by its id, as a range
  * Slider's thumbs (#981) and Autocomplete's suggestion list (#998) do. The
  * `htmlFor` is only ever compared with a control's own id, never adopted, so
- * it hands out no id for a control. The `id` is set only while that label
- * renders with it. Unlike {@link useFieldLabelId}, it is set in a `grouped`
- * or `hasAddons` Field too, so a label wired by hand names the control its
- * `for` picks in those rows as well. Consumed through `useAutoLabelId`.
+ * it hands out no id for a control. It keeps the generated id after the
+ * label drops a `for` nothing took (#1004), which no control's id matches
+ * then, so the value does not change under the content that reported it.
+ * The `id` is set only while that label renders with it. Unlike
+ * {@link useFieldLabelId}, it is set in a `grouped` or `hasAddons` Field
+ * too, so a label wired by hand names the control its `for` picks in those
+ * rows as well. Consumed through `useAutoLabelId`.
  * Internal; not part of the public API.
  */
 export declare const useFieldLabelFor: () => FieldLabelFor;
 /** Provider for the Field label's `htmlFor` target and id, used internally by Field. */
 export declare const FieldLabelForProvider: React.Provider<FieldLabelFor>;
+/**
+ * Records that one piece of a labeled Field's content took the label's
+ * generated id, and returns the function that forgets it.
+ */
+type FieldLabelForReport = () => () => void;
+/**
+ * Tells the nearest labeled Field that this content took its generated id
+ * while `takesFor` is true (#1004). Once the Field's content has mounted, its
+ * label keeps the generated `for` only while something has said so, so the
+ * label renders none over a group, a `Checkbox`, `Radio` or `Switch`, an
+ * inner `Field`, an input with an `id` of its own, markup of your own, or
+ * nothing at all. Anything that puts the id from {@link useFieldLabelId} on
+ * an element has to say so, or the label drops the `for` that names it, and
+ * content that takes no id has nothing to do. Set under the same conditions
+ * as {@link useFieldLabelId}, so a label wired by hand and a `grouped` or
+ * `hasAddons` Field hear nothing. It reports from a layout effect, which a
+ * server never runs and a hydrating client runs only after its first render,
+ * so that render writes the `for` the way the server did.
+ * Internal; not part of the public API.
+ */
+export declare const useReportFieldLabelFor: (takesFor: boolean) => void;
+/** Provider for the labeled Field's report function, used internally by Field. */
+export declare const FieldLabelForReportProvider: React.Provider<FieldLabelForReport | undefined>;
+/**
+ * The id a control with one input of its own renders with: the caller's
+ * `id` when one arrived, otherwise the one a labeled Field offers (#495),
+ * unless it has no input to put it on (`hasInput: false`, as in an `inline`
+ * picker). It also tells that Field when it took the Field's id, through
+ * {@link useReportFieldLabelFor}, so the label keeps its `for` (#1004). Used
+ * by the single-control bases. Internal; not part of the public API.
+ */
+export declare const useFieldLabelTarget: (id: string | undefined, hasInput?: boolean) => string | undefined;
 /**
  * Shape of the Radios group context. The group provides:
  * - `name`: shared form field name (Stage 1)

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/form/useAutoLabelId.d.ts

@@ -35,8 +35,10 @@ interface UseAutoLabelIdOptions {
  * generation entirely: the user has taken over the association (#495 presence
  * semantics). When the control renders no label of its own, it adopts the id
  * a labeled Field around it offers, the way the bases do, so that Field's
- * label names it (#939); a user `id` still wins there. With `needsLabelId`
- * it also returns the id of whichever label names the control (#981).
+ * label names it (#939); a user `id` still wins there. It tells that Field
+ * when the control took its id, since the Field's label drops a `for`
+ * nothing took (#1004). With `needsLabelId` it also returns the id of
+ * whichever label names the control (#981).
  * Internal; not part of the public API.
  */
 export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput, needsLabelId, }: UseAutoLabelIdOptions): {

package/dist/types/helpers/Theme.d.ts

@@ -1,7 +1,8 @@
 import React, { ReactNode } from 'react';
 import { BulmaClassesProps } from './useBulmaClasses.js';
 import { validRadii, type BulmaGapStep } from './bulmaClassHelpers.js';
-declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-column-gap", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-grid-cell-column-start", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
+/** Every Bulma CSS variable Theme accepts: the two lists above. */
+declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-column-gap", "--bulma-grid-cell-column-start", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
 /** A single Bulma CSS variable key from the `bulmaCssVars` tuple. */
 type BulmaVarKey = (typeof bulmaCssVars)[number];
 /** A partial record mapping Bulma CSS variable keys to string values. */
@@ -53,6 +54,19 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
      * the `BulmaVars` type allows, are applied, and an empty value is skipped.
      * Where a variable prop, such as `primaryH`, sets the same variable, the
      * prop wins.
+     *
+     * Theme writes them on its wrapper, or at `:root` under `isRoot`, so only a
+     * variable that inherits from there changes anything. Bulma declares many
+     * component variables, such as `--bulma-card-radius` or
+     * `--bulma-delete-dimensions`, on the component's own element, and that
+     * declaration beats any value set further up. Those keys are accepted but
+     * do nothing here, and warn in development. Set them on the component
+     * itself, with `className` or `style`, or through Sass. Each component's
+     * API page says where Bulma declares its variables.
+     *
+     * Some global variables Bulma also declares again on one component, which
+     * keeps its own value while everything else takes the Theme's. Those do not
+     * warn, because the value still reaches the rest of the page.
      */
     bulmaVars?: BulmaVars;
     /**

package/dist/types/helpers/devWarnings.d.ts

@@ -1,5 +1,13 @@
 /** Test-only: re-arm the warn-once registry. */
 export declare const resetDevWarnings: () => void;
+/**
+ * Whether this is a development build. Fail closed: with no bundler and no
+ * Node (raw CDN ESM), reading `process` throws and this is false, so
+ * production can never warn by accident. Exported for a caller whose
+ * development-only check costs something before it reaches `warnOnce`, so it
+ * can skip that work in production too.
+ */
+export declare const isDev: () => boolean;
 /**
  * Logs a console warning in development, once per `key` for the life of the
  * page. Safe to call during render: a re-render, or a second instance hitting

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