@allxsmith/bestax-bulma 5.27.3 → 5.27.4

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` 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. */
+    /** 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`. 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. */
     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 `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. 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. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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

@@ -115,8 +115,10 @@ 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`.
+ * 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`.
  * Internal; not part of the public API.
  */
 export declare const useFieldLabelElementId: () => string | undefined;

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

@@ -22,9 +22,9 @@ 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`, 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 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. */
     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 (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> & {
         [key: string]: unknown;
     };
@@ -82,7 +82,7 @@ export interface SliderSingleProps extends SliderBaseProps {
      * @defaultValue 0
      */
     minDistance?: never;
-    /** ARIA label(s) for the slider thumb(s). */
+    /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named "Minimum value" or "Maximum value", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in "Budget Minimum value" and "Budget Maximum value". An `aria-labelledby` set to `undefined` keeps every label out of both names. */
     ariaLabel?: string;
 }
 /**
@@ -108,7 +108,7 @@ export interface SliderRangeProps extends SliderBaseProps {
      * @defaultValue 0
      */
     minDistance?: number;
-    /** ARIA label(s) for the slider thumb(s). */
+    /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named "Minimum value" or "Maximum value", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in "Budget Minimum value" and "Budget Maximum value". An `aria-labelledby` set to `undefined` keeps every label out of both names. */
     ariaLabel?: [string, string];
     /** Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. */
     nameLow?: string;

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

@@ -18,6 +18,13 @@ interface UseAutoLabelIdOptions {
      * so it takes no id from a surrounding Field either. Defaults to true.
      */
     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`.
+     */
+    needsLabelId?: boolean;
 }
 /**
  * Associates the convenience `label` prop with its control (#368): generates
@@ -27,14 +34,21 @@ 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.
+ * label names it (#939); a user `id` still wins there. 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, }: UseAutoLabelIdOptions): {
+export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput, needsLabelId, }: UseAutoLabelIdOptions): {
     controlId: string | undefined;
     fieldLabelProps: FieldProps['labelProps'] | undefined;
     /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */
     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.
+     */
+    labelId: string | undefined;
 };
 interface UseAutoLabelledByOptions {
     /** The convenience `label` prop as passed by the caller. */

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` 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. */
+    /** 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`. 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. */
     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 `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. 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. */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
         [key: string]: unknown;
     };

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

@@ -115,8 +115,10 @@ 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`.
+ * 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`.
  * Internal; not part of the public API.
  */
 export declare const useFieldLabelElementId: () => string | undefined;

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

@@ -22,9 +22,9 @@ 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`, 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 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. */
     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 (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> & {
         [key: string]: unknown;
     };
@@ -82,7 +82,7 @@ export interface SliderSingleProps extends SliderBaseProps {
      * @defaultValue 0
      */
     minDistance?: never;
-    /** ARIA label(s) for the slider thumb(s). */
+    /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named "Minimum value" or "Maximum value", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in "Budget Minimum value" and "Budget Maximum value". An `aria-labelledby` set to `undefined` keeps every label out of both names. */
     ariaLabel?: string;
 }
 /**
@@ -108,7 +108,7 @@ export interface SliderRangeProps extends SliderBaseProps {
      * @defaultValue 0
      */
     minDistance?: number;
-    /** ARIA label(s) for the slider thumb(s). */
+    /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named "Minimum value" or "Maximum value", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in "Budget Minimum value" and "Budget Maximum value". An `aria-labelledby` set to `undefined` keeps every label out of both names. */
     ariaLabel?: [string, string];
     /** Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. */
     nameLow?: string;

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

@@ -18,6 +18,13 @@ interface UseAutoLabelIdOptions {
      * so it takes no id from a surrounding Field either. Defaults to true.
      */
     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`.
+     */
+    needsLabelId?: boolean;
 }
 /**
  * Associates the convenience `label` prop with its control (#368): generates
@@ -27,14 +34,21 @@ 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.
+ * label names it (#939); a user `id` still wins there. 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, }: UseAutoLabelIdOptions): {
+export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput, needsLabelId, }: UseAutoLabelIdOptions): {
     controlId: string | undefined;
     fieldLabelProps: FieldProps['labelProps'] | undefined;
     /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */
     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.
+     */
+    labelId: string | undefined;
 };
 interface UseAutoLabelledByOptions {
     /** The convenience `label` prop as passed by the caller. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.27.3",
+  "version": "5.27.4",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",