@allxsmith/bestax-bulma 5.27.1 → 5.27.2

package/dist/types/form/Autocomplete.d.ts

@@ -19,7 +19,7 @@ export interface AutocompleteItem {
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
  */
 export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
     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/Checkboxes.d.ts

@@ -12,7 +12,7 @@ import { FormFieldProps } from './fieldProps.js';
  * `Field`.
  */
 export interface CheckboxesProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="group"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="group"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

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) and dropped inside an outer `Field`. */
+    /** 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`). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types/form/DateRangeInput.d.ts

@@ -19,7 +19,7 @@ import { DateRangeInputBaseProps } from './DateRangeInputBase.js';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the start `<input>`.
  */
 export interface DateRangeInputProps extends DateRangeInputBaseProps {
-    /** Field label naming the whole range. Associated through `aria-labelledby` on the `role="group"` root, since it names two inputs rather than one; uses your `labelProps.id` when provided, otherwise a generated one. Each input keeps its own name, "Start date" or "End date" (`labels.rangeStart` / `labels.rangeEnd`). Dropped inside an outer `Field`. */
+    /** Field label naming the whole range. Associated through `aria-labelledby` on the `role="group"` root, since it names two inputs rather than one; uses your `labelProps.id` when provided, otherwise a generated one. Each input keeps its own name, "Start date" or "End date" (`labels.rangeStart` / `labels.rangeEnd`). Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */
     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) and dropped inside an outer `Field`. */
+    /** 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`). */
     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 associated with a single composed `InputBase`, `SelectBase`, or `TextAreaBase` via a generated id and `htmlFor`. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls). */
+    /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase` or `TextAreaBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children. Only the single inputs take the `htmlFor`, so with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
     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. */
+    /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. An `id` here is the one a group control's `aria-labelledby` points at; otherwise the label gets a generated one while the association is on. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes. */
     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` (label that `Field` yourself). */
+    /** 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`). */
     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,12 +105,34 @@ 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 only by the single-control bases (InputBase, SelectBase,
- * TextAreaBase). Internal; not part of the public API.
+ * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase)
+ * and, through `useAutoLabelId`, by the convenience inputs that render an
+ * input of their own (#939). Internal; not part of the public API.
  */
 export declare const useFieldLabelId: () => string | undefined;
 /** Provider for the Field label-target id — used internally by Field. */
 export declare const FieldLabelIdProvider: React.Provider<string | undefined>;
+/**
+ * The id of a labeled Field's own `<label>`, for a group control (Radios,
+ * Checkboxes, Rate, DateRangeInput) to point `aria-labelledby` at, since a group cannot take
+ * the label's `htmlFor` (#939). Set under the same conditions as
+ * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
+ * Internal; not part of the public API.
+ */
+export declare const useFieldLabelElementId: () => string | undefined;
+/** Provider for the Field label's own id, used internally by Field. */
+export declare const FieldLabelElementIdProvider: React.Provider<string | undefined>;
+/**
+ * What the nearest labeled Field's `<label>` points `htmlFor` at: the id it
+ * generated, or the caller's own `labelProps.htmlFor`. An unlabeled Field
+ * passes it through, so a control in the inner Field of a horizontal layout
+ * can tell the outer label names it. Only ever compared with a control's own
+ * id, never adopted, so it hands out no id. Internal; not part of the public
+ * API.
+ */
+export declare const useFieldLabelFor: () => string | undefined;
+/** Provider for the Field label's `htmlFor` target, used internally by Field. */
+export declare const FieldLabelForProvider: React.Provider<string | undefined>;
 /**
  * Shape of the Radios group context. The group provides:
  * - `name`: shared form field name (Stage 1)

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. Not wired when no Field wrapper is rendered (inside a `Field`, or plusminus `bare`). */
+    /** 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`. */
     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/Radios.d.ts

@@ -12,7 +12,7 @@ import { FormFieldProps } from './fieldProps.js';
  * `Field`.
  */
 export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

package/dist/types/form/Rate.d.ts

@@ -33,7 +33,7 @@ export interface RateIconProps {
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.
  */
 export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, Omit<BulmaClassesProps, 'size'>, FormFieldProps {
-    /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label="Rating"`. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label="Rating"`. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`), and replaces the `aria-label="Rating"` fallback too. An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own, and leaves the `"Rating"` fallback. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

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 label targets the low (minimum) thumb. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
     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/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) and dropped inside an outer `Field`. */
+    /** 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. */
     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/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) and dropped inside an outer `Field`. */
+    /** 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`). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types/form/useAutoLabelId.d.ts

@@ -13,6 +13,11 @@ interface UseAutoLabelIdOptions {
      * no Field, and in modes with no labellable control (e.g. inline pickers).
      */
     rendersLabel: boolean;
+    /**
+     * False when this render has no input to label at all (an inline picker),
+     * so it takes no id from a surrounding Field either. Defaults to true.
+     */
+    hasInput?: boolean;
 }
 /**
  * Associates the convenience `label` prop with its control (#368): generates
@@ -20,11 +25,16 @@ interface UseAutoLabelIdOptions {
  * A user-supplied `id` is used as the target instead of the generated one, and
  * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables
  * generation entirely: the user has taken over the association (#495 presence
- * semantics). Internal; not part of the public API.
+ * 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.
+ * Internal; not part of the public API.
  */
-export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, }: UseAutoLabelIdOptions): {
+export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput, }: UseAutoLabelIdOptions): {
     controlId: string | undefined;
     fieldLabelProps: FieldProps['labelProps'] | undefined;
+    /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */
+    labelled: boolean;
 };
 interface UseAutoLabelledByOptions {
     /** The convenience `label` prop as passed by the caller. */
@@ -33,6 +43,13 @@ interface UseAutoLabelledByOptions {
     labelProps?: FieldProps['labelProps'];
     /** True when this render actually outputs the label naming the group. */
     rendersLabel: boolean;
+    /**
+     * The caller's remaining props. A non-empty `aria-label` among them names
+     * the group, and so does any `aria-labelledby` key, even an undefined one,
+     * since the group spreads them after its own attribute. Either keeps every
+     * label off the group, its own and a surrounding Field's alike.
+     */
+    callerProps: object;
 }
 /**
  * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
@@ -41,10 +58,14 @@ interface UseAutoLabelledByOptions {
  * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target
  * instead of generating one. Any caller `htmlFor` is stripped — a group label
  * names the group, never a single control — so the merged labelProps always
- * carry an explicit `htmlFor: undefined`.
+ * carry an explicit `htmlFor: undefined`. When the group renders no label of
+ * its own, it points at the label of a labeled Field around it instead
+ * (#939). A caller who named the group with `aria-label` or
+ * `aria-labelledby` gets no `aria-labelledby` from either label, so their
+ * name wins wherever the label sits.
  * Internal; not part of the public API.
  */
-export declare function useAutoLabelledBy({ label, labelProps, rendersLabel, }: UseAutoLabelledByOptions): {
+export declare function useAutoLabelledBy({ label, labelProps, rendersLabel, callerProps, }: UseAutoLabelledByOptions): {
     ariaLabelledBy: string | undefined;
     fieldLabelProps: FieldProps['labelProps'] | undefined;
 };

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

@@ -20,14 +20,13 @@ export interface ConfigContextProps {
 export declare const useConfig: () => ConfigContextProps;
 /**
  * Props for the ConfigProvider component.
- *
- * @property {React.ReactNode} children - Child components to receive configuration.
- * @property {string} [classPrefix] - Prefix applied to all Bulma class names.
- * @property {IconLibrary} [iconLibrary] - Default icon library for Icon components.
  */
 export interface ConfigProviderProps {
+    /** Child components to receive configuration. */
     children: ReactNode;
+    /** Prefix applied to all Bulma class names. */
     classPrefix?: string;
+    /** Default icon library for Icon components. */
     iconLibrary?: IconLibrary;
 }
 /**

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

@@ -8,48 +8,9 @@ type BulmaVarKey = (typeof bulmaCssVars)[number];
 type BulmaVars = Partial<Record<BulmaVarKey, string>>;
 /**
  * Props for the Theme component.
- *
- * @property {React.ReactNode} children - Content to render inside the theme scope.
- * @property {string} [className] - Additional CSS classes (only when isRoot is false).
- * @property {BulmaVars} [bulmaVars] - Object mapping Bulma CSS variable names to values.
- * @property {string} [schemeH] - Scheme hue value.
- * @property {string} [schemeS] - Scheme saturation value.
- * @property {string} [lightL] - Light theme lightness value.
- * @property {string} [lightInvertL] - Light theme inverted lightness value.
- * @property {string} [darkL] - Dark theme lightness value.
- * @property {string} [darkInvertL] - Dark theme inverted lightness value.
- * @property {string} [softL] - Soft lightness value.
- * @property {string} [boldL] - Bold lightness value.
- * @property {string} [softInvertL] - Soft inverted lightness value.
- * @property {string} [boldInvertL] - Bold inverted lightness value.
- * @property {string} [hoverBackgroundLDelta] - Background lightness delta on hover.
- * @property {string} [activeBackgroundLDelta] - Background lightness delta on active.
- * @property {string} [hoverBorderLDelta] - Border lightness delta on hover.
- * @property {string} [activeBorderLDelta] - Border lightness delta on active.
- * @property {string} [hoverColorLDelta] - Text color lightness delta on hover.
- * @property {string} [activeColorLDelta] - Text color lightness delta on active.
- * @property {string} [hoverShadowADelta] - Shadow alpha delta on hover.
- * @property {string} [activeShadowADelta] - Shadow alpha delta on active.
- * @property {string} [primaryH] - Primary color hue.
- * @property {string} [primaryS] - Primary color saturation.
- * @property {string} [primaryL] - Primary color lightness.
- * @property {string} [linkH] - Link color hue.
- * @property {string} [linkS] - Link color saturation.
- * @property {string} [linkL] - Link color lightness.
- * @property {string} [infoH] - Info color hue.
- * @property {string} [infoS] - Info color saturation.
- * @property {string} [infoL] - Info color lightness.
- * @property {string} [successH] - Success color hue.
- * @property {string} [successS] - Success color saturation.
- * @property {string} [successL] - Success color lightness.
- * @property {string} [warningH] - Warning color hue.
- * @property {string} [warningS] - Warning color saturation.
- * @property {string} [warningL] - Warning color lightness.
- * @property {string} [dangerH] - Danger color hue.
- * @property {string} [dangerS] - Danger color saturation.
- * @property {string} [dangerL] - Danger color lightness.
  */
 export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** The content the theme applies to. */
     children: ReactNode;
     /**
      * Additional CSS classes for the wrapper div. A root Theme (`isRoot`) has no
@@ -86,6 +47,13 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
      * write only `data-theme` and warn in development.
      */
     colorMode?: 'light' | 'dark' | 'system';
+    /**
+     * Bulma CSS variables to set, by name, such as
+     * `{ '--bulma-primary-h': '210' }`. Only Bulma's own variables, the keys
+     * 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.
+     */
     bulmaVars?: BulmaVars;
     /**
      * Border radius helper, as on every other component: `radiusless` adds
@@ -124,41 +92,77 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
      * now adds `is-column-gap-0` to the wrapper instead.
      */
     columnGap?: BulmaGapStep;
+    /** Base hue for the color scheme, 0 to 360. Sets `--bulma-scheme-h`. */
     schemeH?: string;
+    /** Base saturation for the color scheme, as a percentage. Sets `--bulma-scheme-s`. */
     schemeS?: string;
+    /** Lightness for light backgrounds. Sets `--bulma-light-l`. */
     lightL?: string;
+    /** Inverted lightness for light backgrounds. Sets `--bulma-light-invert-l`. */
     lightInvertL?: string;
+    /** Lightness for dark backgrounds. Sets `--bulma-dark-l`. */
     darkL?: string;
+    /** Inverted lightness for dark backgrounds. Sets `--bulma-dark-invert-l`. */
     darkInvertL?: string;
+    /** Lightness for soft colors. Sets `--bulma-soft-l`. */
     softL?: string;
+    /** Lightness for bold colors. Sets `--bulma-bold-l`. */
     boldL?: string;
+    /** Inverted lightness for soft colors. Sets `--bulma-soft-invert-l`. */
     softInvertL?: string;
+    /** Inverted lightness for bold colors. Sets `--bulma-bold-invert-l`. */
     boldInvertL?: string;
+    /** Lightness change of a background on hover. Sets `--bulma-hover-background-l-delta`. */
     hoverBackgroundLDelta?: string;
+    /** Lightness change of a background when active. Sets `--bulma-active-background-l-delta`. */
     activeBackgroundLDelta?: string;
+    /** Lightness change of a border on hover. Sets `--bulma-hover-border-l-delta`. */
     hoverBorderLDelta?: string;
+    /** Lightness change of a border when active. Sets `--bulma-active-border-l-delta`. */
     activeBorderLDelta?: string;
+    /** Lightness change of text color on hover. Sets `--bulma-hover-color-l-delta`. */
     hoverColorLDelta?: string;
+    /** Lightness change of text color when active. Sets `--bulma-active-color-l-delta`. */
     activeColorLDelta?: string;
+    /** Alpha change of a shadow on hover. Sets `--bulma-hover-shadow-a-delta`. */
     hoverShadowADelta?: string;
+    /** Alpha change of a shadow when active. Sets `--bulma-active-shadow-a-delta`. */
     activeShadowADelta?: string;
+    /** Primary color hue, 0 to 360. Sets `--bulma-primary-h`. */
     primaryH?: string;
+    /** Primary color saturation, as a percentage. Sets `--bulma-primary-s`. */
     primaryS?: string;
+    /** Primary color lightness, as a percentage. Sets `--bulma-primary-l`. */
     primaryL?: string;
+    /** Link color hue, 0 to 360. Sets `--bulma-link-h`. */
     linkH?: string;
+    /** Link color saturation, as a percentage. Sets `--bulma-link-s`. */
     linkS?: string;
+    /** Link color lightness, as a percentage. Sets `--bulma-link-l`. */
     linkL?: string;
+    /** Info color hue, 0 to 360. Sets `--bulma-info-h`. */
     infoH?: string;
+    /** Info color saturation, as a percentage. Sets `--bulma-info-s`. */
     infoS?: string;
+    /** Info color lightness, as a percentage. Sets `--bulma-info-l`. */
     infoL?: string;
+    /** Success color hue, 0 to 360. Sets `--bulma-success-h`. */
     successH?: string;
+    /** Success color saturation, as a percentage. Sets `--bulma-success-s`. */
     successS?: string;
+    /** Success color lightness, as a percentage. Sets `--bulma-success-l`. */
     successL?: string;
+    /** Warning color hue, 0 to 360. Sets `--bulma-warning-h`. */
     warningH?: string;
+    /** Warning color saturation, as a percentage. Sets `--bulma-warning-s`. */
     warningS?: string;
+    /** Warning color lightness, as a percentage. Sets `--bulma-warning-l`. */
     warningL?: string;
+    /** Danger color hue, 0 to 360. Sets `--bulma-danger-h`. */
     dangerH?: string;
+    /** Danger color saturation, as a percentage. Sets `--bulma-danger-s`. */
     dangerS?: string;
+    /** Danger color lightness, as a percentage. Sets `--bulma-danger-l`. */
     dangerL?: string;
 }
 /**

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

@@ -19,7 +19,7 @@ export interface AutocompleteItem {
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
  */
 export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
     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/Checkboxes.d.ts

@@ -12,7 +12,7 @@ import { FormFieldProps } from './fieldProps.js';
  * `Field`.
  */
 export interface CheckboxesProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="group"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="group"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

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) and dropped inside an outer `Field`. */
+    /** 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`). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

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

@@ -19,7 +19,7 @@ import { DateRangeInputBaseProps } from './DateRangeInputBase.js';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the start `<input>`.
  */
 export interface DateRangeInputProps extends DateRangeInputBaseProps {
-    /** Field label naming the whole range. Associated through `aria-labelledby` on the `role="group"` root, since it names two inputs rather than one; uses your `labelProps.id` when provided, otherwise a generated one. Each input keeps its own name, "Start date" or "End date" (`labels.rangeStart` / `labels.rangeEnd`). Dropped inside an outer `Field`. */
+    /** Field label naming the whole range. Associated through `aria-labelledby` on the `role="group"` root, since it names two inputs rather than one; uses your `labelProps.id` when provided, otherwise a generated one. Each input keeps its own name, "Start date" or "End date" (`labels.rangeStart` / `labels.rangeEnd`). Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */
     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) and dropped inside an outer `Field`. */
+    /** 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`). */
     label?: React.ReactNode;
     /** Size for the label. */
     labelSize?: FieldProps['labelSize'];

package/dist/types-cjs/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 associated with a single composed `InputBase`, `SelectBase`, or `TextAreaBase` via a generated id and `htmlFor`. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls). */
+    /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase` or `TextAreaBase`, or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. Nothing else takes the label: `Checkbox`, `Radio` and `Switch` are named by their own children. Only the single inputs take the `htmlFor`, so with a group or any other content it matches nothing. Pass `labelProps={{ htmlFor }}` to wire your own `id`, or `labelProps={{ htmlFor: undefined }}` to opt out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */
     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. */
+    /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. An `id` here is the one a group control's `aria-labelledby` points at; otherwise the label gets a generated one while the association is on. To point a group in an inner `Field` at this label by hand, pass that `id` with `htmlFor: undefined`, or the label keeps a generated `htmlFor` that nothing takes. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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` (label that `Field` yourself). */
+    /** 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`). */
     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/FormContext.d.ts

@@ -105,12 +105,34 @@ 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 only by the single-control bases (InputBase, SelectBase,
- * TextAreaBase). Internal; not part of the public API.
+ * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase)
+ * and, through `useAutoLabelId`, by the convenience inputs that render an
+ * input of their own (#939). Internal; not part of the public API.
  */
 export declare const useFieldLabelId: () => string | undefined;
 /** Provider for the Field label-target id — used internally by Field. */
 export declare const FieldLabelIdProvider: React.Provider<string | undefined>;
+/**
+ * The id of a labeled Field's own `<label>`, for a group control (Radios,
+ * Checkboxes, Rate, DateRangeInput) to point `aria-labelledby` at, since a group cannot take
+ * the label's `htmlFor` (#939). Set under the same conditions as
+ * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
+ * Internal; not part of the public API.
+ */
+export declare const useFieldLabelElementId: () => string | undefined;
+/** Provider for the Field label's own id, used internally by Field. */
+export declare const FieldLabelElementIdProvider: React.Provider<string | undefined>;
+/**
+ * What the nearest labeled Field's `<label>` points `htmlFor` at: the id it
+ * generated, or the caller's own `labelProps.htmlFor`. An unlabeled Field
+ * passes it through, so a control in the inner Field of a horizontal layout
+ * can tell the outer label names it. Only ever compared with a control's own
+ * id, never adopted, so it hands out no id. Internal; not part of the public
+ * API.
+ */
+export declare const useFieldLabelFor: () => string | undefined;
+/** Provider for the Field label's `htmlFor` target, used internally by Field. */
+export declare const FieldLabelForProvider: React.Provider<string | undefined>;
 /**
  * Shape of the Radios group context. The group provides:
  * - `name`: shared form field name (Stage 1)

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. Not wired when no Field wrapper is rendered (inside a `Field`, or plusminus `bare`). */
+    /** 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`. */
     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/Radios.d.ts

@@ -12,7 +12,7 @@ import { FormFieldProps } from './fieldProps.js';
  * `Field`.
  */
 export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
-    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

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

@@ -33,7 +33,7 @@ export interface RateIconProps {
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.
  */
 export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, Omit<BulmaClassesProps, 'size'>, FormFieldProps {
-    /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label="Rating"`. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role="radiogroup"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label="Rating"`. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`), and replaces the `aria-label="Rating"` fallback too. An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own, and leaves the `"Rating"` fallback. */
     label?: React.ReactNode;
     /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {

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

@@ -22,7 +22,7 @@ export interface SliderMark {
  * Shared base props for single and range Slider modes.
  */
 interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
-    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field` (label that `Field` yourself). */
+    /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
     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/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) and dropped inside an outer `Field`. */
+    /** 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. */
     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> & {