@allxsmith/bestax-bulma 5.27.5 → 5.27.7

package/dist/types/elements/Notification.d.ts

@@ -23,6 +23,11 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
     /**
      * Shows a close (delete) button in the notification. It renders
      * `type="button"`, so it does not submit a form around it.
+     *
+     * The notification also takes `has-delete`, which pads its end by
+     * `--bulma-notification-delete-padding-inline-end` so the text clears the
+     * button. That rule ships in bestax's stylesheets, not Bulma's, so an app
+     * styled by Bulma's CSS alone keeps Bulma's padding.
      */
     hasDelete?: boolean;
     /** Callback fired when the delete button is clicked. */

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

@@ -19,9 +19,9 @@ 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`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
+    /** Field label, associated with the text input via `htmlFor`: through your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose label names the input instead when it points at it. The `Field` points its label there itself when the Autocomplete has no `id` and no inner `Field` sits between them (and the `Field` is not `grouped` or `hasAddons`); a label you wire by hand with `labelProps.htmlFor` points at the input with that `id`. The label naming the input also names the open suggestion list, through `aria-labelledby`, when it has an id: this label always does, and an outer `Field`'s does unless you wired it by hand without an `id` in its `labelProps`. Otherwise the list is named "Suggestions". */
     label?: React.ReactNode;
-    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (the input then gets no generated id). While the label names the input, the suggestion list's `aria-labelledby` points at it, through an `id` here when you give one and a generated one otherwise. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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

@@ -163,6 +163,11 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
 /**
  * Raw DateRangeInput: the two inputs and the popover calendar without
  * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.
+ * Composed in a labeled `Field`, its `role="group"` root points
+ * `aria-labelledby` at that `Field`'s label, `inline` too, as the wrapper's
+ * does, and each input keeps its own name. An `aria-label` or
+ * `aria-labelledby` you give it wins over the label, and an `aria-labelledby`
+ * key counts even when undefined, since it is spread over the group's own.
  *
  * @function
  * @param {DateRangeInputBaseProps} props

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`) 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. 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. 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. An `id` here is the one a group control's, or a range `Slider`'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. */
+    /** 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. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };
@@ -69,7 +69,12 @@ export interface FieldBodyProps extends React.HTMLAttributes<HTMLDivElement>, Om
  * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`
  * with the `label` class inside it and point its `htmlFor` at the control's
  * `id`, or give the horizontal `Field` a `label` prop, which renders this
- * column and its `<label>` for you.
+ * column and its `<label>` for you. A `<label>` you put here names the
+ * control through its `htmlFor` alone: a range `Slider`'s thumbs and an
+ * `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s
+ * label only when its `label` prop renders it and it names the control.
+ * Where it would not name the control on its own, as in an inner `Field`,
+ * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.
  *
  * @function
  * @param {FieldLabelProps} props - Props for the FieldLabel component.

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

@@ -115,27 +115,39 @@ export declare const useFieldLabelId: () => string | undefined;
 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), and for a range Slider's thumbs, which each
- * need the label in a name of their own (#981). Set under the same conditions
- * as {@link useFieldLabelId}. Consumed through `useAutoLabelledBy` and
- * `useAutoLabelId`.
+ * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point
+ * `aria-labelledby` at, since a group cannot take the label's `htmlFor`
+ * (#939, #1005). 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>;
+/** The nearest labeled Field's `<label>`, as {@link useFieldLabelFor} reads it. */
+export interface FieldLabelFor {
+    /** What the label's `htmlFor` points at, generated or the caller's. */
+    htmlFor?: string;
+    /** The id the label renders with, the caller's or a generated one, if any. */
+    id?: string;
+}
 /**
- * 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.
+ * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id
+ * it generated or the caller's own `labelProps.htmlFor`, and the id the label
+ * renders with, if it has one. An unlabeled Field passes both through
+ * together, so a control in the inner Field of a horizontal layout can tell
+ * 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`.
+ * 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>;
+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>;
 /**
  * Shape of the Radios group context. The group provides:
  * - `name`: shared form field name (Stage 1)

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

@@ -20,9 +20,10 @@ interface UseAutoLabelIdOptions {
     hasInput?: boolean;
     /**
      * True when the control also points `aria-labelledby` at the label, as a
-     * range Slider's thumbs do (#981), so it needs the label's own id. Its own
-     * label then gets one (`labelProps.id` when given, otherwise a generated
-     * one), and the hook returns it, or a surrounding Field's, as `labelId`.
+     * range Slider's thumbs (#981) and Autocomplete's suggestion list (#998)
+     * do, so it needs the label's own id. Its own label then gets one
+     * (`labelProps.id` when given, otherwise a generated one), and the hook
+     * returns it, or a surrounding Field's, as `labelId`.
      */
     needsLabelId?: boolean;
 }
@@ -45,8 +46,9 @@ export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, ha
     labelled: boolean;
     /**
      * With `needsLabelId`, the id of the label that names `controlId`, its own
-     * or a surrounding Field's. Undefined when no label names it, or when the
-     * Field's label was wired by hand, since that Field hands out no label id.
+     * or a surrounding Field's. Undefined when no label names it, or when a
+     * Field's label wired by hand names it without an `id` in its labelProps,
+     * since the Field generates none for a label wired by hand.
      */
     labelId: string | undefined;
 };

package/dist/types-cjs/elements/Notification.d.ts

@@ -23,6 +23,11 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
     /**
      * Shows a close (delete) button in the notification. It renders
      * `type="button"`, so it does not submit a form around it.
+     *
+     * The notification also takes `has-delete`, which pads its end by
+     * `--bulma-notification-delete-padding-inline-end` so the text clears the
+     * button. That rule ships in bestax's stylesheets, not Bulma's, so an app
+     * styled by Bulma's CSS alone keeps Bulma's padding.
      */
     hasDelete?: boolean;
     /** Callback fired when the delete button is clicked. */

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

@@ -19,9 +19,9 @@ 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`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
+    /** Field label, associated with the text input via `htmlFor`: through your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose label names the input instead when it points at it. The `Field` points its label there itself when the Autocomplete has no `id` and no inner `Field` sits between them (and the `Field` is not `grouped` or `hasAddons`); a label you wire by hand with `labelProps.htmlFor` points at the input with that `id`. The label naming the input also names the open suggestion list, through `aria-labelledby`, when it has an id: this label always does, and an outer `Field`'s does unless you wired it by hand without an `id` in its `labelProps`. Otherwise the list is named "Suggestions". */
     label?: React.ReactNode;
-    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (the input then gets no generated id). While the label names the input, the suggestion list's `aria-labelledby` points at it, through an `id` here when you give one and a generated one otherwise. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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

@@ -163,6 +163,11 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
 /**
  * Raw DateRangeInput: the two inputs and the popover calendar without
  * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.
+ * Composed in a labeled `Field`, its `role="group"` root points
+ * `aria-labelledby` at that `Field`'s label, `inline` too, as the wrapper's
+ * does, and each input keeps its own name. An `aria-label` or
+ * `aria-labelledby` you give it wins over the label, and an `aria-labelledby`
+ * key counts even when undefined, since it is spread over the group's own.
  *
  * @function
  * @param {DateRangeInputBaseProps} props

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 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`) 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. 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. 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. An `id` here is the one a group control's, or a range `Slider`'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. */
+    /** 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. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };
@@ -69,7 +69,12 @@ export interface FieldBodyProps extends React.HTMLAttributes<HTMLDivElement>, Om
  * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`
  * with the `label` class inside it and point its `htmlFor` at the control's
  * `id`, or give the horizontal `Field` a `label` prop, which renders this
- * column and its `<label>` for you.
+ * column and its `<label>` for you. A `<label>` you put here names the
+ * control through its `htmlFor` alone: a range `Slider`'s thumbs and an
+ * `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s
+ * label only when its `label` prop renders it and it names the control.
+ * Where it would not name the control on its own, as in an inner `Field`,
+ * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.
  *
  * @function
  * @param {FieldLabelProps} props - Props for the FieldLabel component.

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

@@ -115,27 +115,39 @@ export declare const useFieldLabelId: () => string | undefined;
 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), and for a range Slider's thumbs, which each
- * need the label in a name of their own (#981). Set under the same conditions
- * as {@link useFieldLabelId}. Consumed through `useAutoLabelledBy` and
- * `useAutoLabelId`.
+ * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point
+ * `aria-labelledby` at, since a group cannot take the label's `htmlFor`
+ * (#939, #1005). 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>;
+/** The nearest labeled Field's `<label>`, as {@link useFieldLabelFor} reads it. */
+export interface FieldLabelFor {
+    /** What the label's `htmlFor` points at, generated or the caller's. */
+    htmlFor?: string;
+    /** The id the label renders with, the caller's or a generated one, if any. */
+    id?: string;
+}
 /**
- * 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.
+ * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id
+ * it generated or the caller's own `labelProps.htmlFor`, and the id the label
+ * renders with, if it has one. An unlabeled Field passes both through
+ * together, so a control in the inner Field of a horizontal layout can tell
+ * 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`.
+ * 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>;
+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>;
 /**
  * Shape of the Radios group context. The group provides:
  * - `name`: shared form field name (Stage 1)

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

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

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

@@ -20,9 +20,10 @@ interface UseAutoLabelIdOptions {
     hasInput?: boolean;
     /**
      * True when the control also points `aria-labelledby` at the label, as a
-     * range Slider's thumbs do (#981), so it needs the label's own id. Its own
-     * label then gets one (`labelProps.id` when given, otherwise a generated
-     * one), and the hook returns it, or a surrounding Field's, as `labelId`.
+     * range Slider's thumbs (#981) and Autocomplete's suggestion list (#998)
+     * do, so it needs the label's own id. Its own label then gets one
+     * (`labelProps.id` when given, otherwise a generated one), and the hook
+     * returns it, or a surrounding Field's, as `labelId`.
      */
     needsLabelId?: boolean;
 }
@@ -45,8 +46,9 @@ export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, ha
     labelled: boolean;
     /**
      * With `needsLabelId`, the id of the label that names `controlId`, its own
-     * or a surrounding Field's. Undefined when no label names it, or when the
-     * Field's label was wired by hand, since that Field hands out no label id.
+     * or a surrounding Field's. Undefined when no label names it, or when a
+     * Field's label wired by hand names it without an `id` in its labelProps,
+     * since the Field generates none for a label wired by hand.
      */
     labelId: string | undefined;
 };