@allxsmith/bestax-bulma 5.27.3 → 5.27.4

package/dist/esm/form/useAutoLabelId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoLabelId.js","sources":["../../../src/form/useAutoLabelId.ts"],"sourcesContent":["import React, { useId } from 'react';\nimport type { FieldProps } from './Field';\nimport {\n  useFieldLabelElementId,\n  useFieldLabelFor,\n  useFieldLabelId,\n} from './FormContext';\n\ninterface UseAutoLabelIdOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied id for the control, if any. */\n  id?: string;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /**\n   * True when this render actually outputs the label wired to a control —\n   * false inside an outer Field (label is dropped), in variants that render\n   * no Field, and in modes with no labellable control (e.g. inline pickers).\n   */\n  rendersLabel: boolean;\n  /**\n   * False when this render has no input to label at all (an inline picker),\n   * so it takes no id from a surrounding Field either. Defaults to true.\n   */\n  hasInput?: boolean;\n}\n\n/**\n * Associates the convenience `label` prop with its control (#368): generates\n * an id for the control and returns labelProps carrying a matching `htmlFor`.\n * A user-supplied `id` is used as the target instead of the generated one, and\n * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables\n * generation entirely: the user has taken over the association (#495 presence\n * semantics). When the control renders no label of its own, it adopts the id\n * a labeled Field around it offers, the way the bases do, so that Field's\n * label names it (#939); a user `id` still wins there.\n * Internal; not part of the public API.\n */\nexport function useAutoLabelId({\n  label,\n  id,\n  labelProps,\n  rendersLabel,\n  hasInput = true,\n}: UseAutoLabelIdOptions): {\n  controlId: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n  /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */\n  labelled: boolean;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Read outside the control's own Field, so it is set only when an outer\n  // Field holds the control, which then renders no label of its own.\n  const fieldLabelId = useFieldLabelId();\n  // What an outer Field's label points at, even when wired by hand.\n  const fieldLabelFor = useFieldLabelFor();\n  // Truthiness mirrors Field's own `if (label)` render gate.\n  const active = !!label && rendersLabel;\n  // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and\n  // must not leave an orphan generated id on the control.\n  const userWired = !!labelProps && 'htmlFor' in labelProps;\n  const adopted = !active && hasInput ? fieldLabelId : undefined;\n  const controlId = id ?? (active && !userWired ? generatedId : adopted);\n  const ownLabelProps = { htmlFor: controlId, ...labelProps };\n  // Inactive with a label still means an own Field may render it (pickers'\n  // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`\n  // tells Field the association is owned here, so it must not generate one\n  // that would dangle (#495 presence semantics).\n  const fieldLabelProps = active\n    ? ownLabelProps\n    : label\n      ? { htmlFor: undefined, ...labelProps }\n      : labelProps;\n  const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;\n  return {\n    controlId,\n    fieldLabelProps,\n    labelled: !!controlId && labelTarget === controlId,\n  };\n}\n\ninterface UseAutoLabelledByOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /** True when this render actually outputs the label naming the group. */\n  rendersLabel: boolean;\n  /**\n   * The caller's remaining props. A non-empty `aria-label` among them names\n   * the group, and so does any `aria-labelledby` key, even an undefined one,\n   * since the group spreads them after its own attribute. Either keeps every\n   * label off the group, its own and a surrounding Field's alike.\n   */\n  callerProps: object;\n}\n\n/**\n * Group-input counterpart of {@link useAutoLabelId} (#494): a group of\n * controls cannot take a single `htmlFor`, so instead the rendered `<label>`\n * gets a generated id and the group container points at it with\n * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target\n * instead of generating one. Any caller `htmlFor` is stripped — a group label\n * names the group, never a single control — so the merged labelProps always\n * carry an explicit `htmlFor: undefined`. When the group renders no label of\n * its own, it points at the label of a labeled Field around it instead\n * (#939). A caller who named the group with `aria-label` or\n * `aria-labelledby` gets no `aria-labelledby` from either label, so their\n * name wins wherever the label sits.\n * Internal; not part of the public API.\n */\nexport function useAutoLabelledBy({\n  label,\n  labelProps,\n  rendersLabel,\n  callerProps,\n}: UseAutoLabelledByOptions): {\n  ariaLabelledBy: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Set only when an outer Field holds the group (see useAutoLabelId).\n  const fieldLabelElementId = useFieldLabelElementId();\n  const active = !!label && rendersLabel;\n  const labelId = labelProps?.id ?? (active ? generatedId : undefined);\n  const fieldLabelProps = active\n    ? { ...labelProps, id: labelId, htmlFor: undefined }\n    : labelProps;\n  const aria = callerProps as React.AriaAttributes;\n  // Presence for aria-labelledby: the caller's key replaces the attribute\n  // through the spread whatever its value, and pointing it at a label would\n  // only take a Rate's fallback name away. Checked before either label, so\n  // the caller's name wins over the group's own `label` as it does over a\n  // Field's, the way an aria-label beats a `<label for>` on a single input.\n  const callerNamed = !!aria['aria-label'] || 'aria-labelledby' in aria;\n  const ariaLabelledBy = callerNamed\n    ? undefined\n    : active\n      ? labelId\n      : fieldLabelElementId;\n  return { ariaLabelledBy, fieldLabelProps };\n}\n"],"names":[],"mappings":";;;;AA4BA;;;;;;;;;;AAUG;AACG,SAAU,cAAc,CAAC,EAC7B,KAAK,EACL,EAAE,EACF,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,IAAI,GACO,EAAA;;AAOtB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;;AAG3B,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;;AAEtC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;;AAExC,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;;;IAGtC,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,IAAI,UAAU;AACzD,IAAA,MAAM,OAAO,GAAG,CAAC,MAAM,IAAI,QAAQ,GAAG,YAAY,GAAG,SAAS;AAC9D,IAAA,MAAM,SAAS,GAAG,EAAE,KAAK,MAAM,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACtE,MAAM,aAAa,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE;;;;;IAK3D,MAAM,eAAe,GAAG;AACtB,UAAE;AACF,UAAE;cACE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU;cACnC,UAAU;AAChB,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,OAAO,GAAG,aAAa;IAClE,OAAO;QACL,SAAS;QACT,eAAe;AACf,QAAA,QAAQ,EAAE,CAAC,CAAC,SAAS,IAAI,WAAW,KAAK,SAAS;KACnD;AACH;AAkBA;;;;;;;;;;;;;AAaG;AACG,SAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,YAAY,EACZ,WAAW,GACc,EAAA;;AAKzB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;AAE3B,IAAA,MAAM,mBAAmB,GAAG,sBAAsB,EAAE;AACpD,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;AACtC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,EAAE,KAAK,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,MAAM,eAAe,GAAG;AACtB,UAAE,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS;UAChD,UAAU;IACd,MAAM,IAAI,GAAG,WAAmC;;;;;;AAMhD,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,iBAAiB,IAAI,IAAI;IACrE,MAAM,cAAc,GAAG;AACrB,UAAE;AACF,UAAE;AACA,cAAE;cACA,mBAAmB;AACzB,IAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE;AAC5C;;"}
+{"version":3,"file":"useAutoLabelId.js","sources":["../../../src/form/useAutoLabelId.ts"],"sourcesContent":["import React, { useId } from 'react';\nimport type { FieldProps } from './Field';\nimport {\n  useFieldLabelElementId,\n  useFieldLabelFor,\n  useFieldLabelId,\n} from './FormContext';\n\ninterface UseAutoLabelIdOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied id for the control, if any. */\n  id?: string;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /**\n   * True when this render actually outputs the label wired to a control —\n   * false inside an outer Field (label is dropped), in variants that render\n   * no Field, and in modes with no labellable control (e.g. inline pickers).\n   */\n  rendersLabel: boolean;\n  /**\n   * False when this render has no input to label at all (an inline picker),\n   * so it takes no id from a surrounding Field either. Defaults to true.\n   */\n  hasInput?: boolean;\n  /**\n   * True when the control also points `aria-labelledby` at the label, as a\n   * range Slider's thumbs do (#981), so it needs the label's own id. Its own\n   * label then gets one (`labelProps.id` when given, otherwise a generated\n   * one), and the hook returns it, or a surrounding Field's, as `labelId`.\n   */\n  needsLabelId?: boolean;\n}\n\n/**\n * Associates the convenience `label` prop with its control (#368): generates\n * an id for the control and returns labelProps carrying a matching `htmlFor`.\n * A user-supplied `id` is used as the target instead of the generated one, and\n * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables\n * generation entirely: the user has taken over the association (#495 presence\n * semantics). When the control renders no label of its own, it adopts the id\n * a labeled Field around it offers, the way the bases do, so that Field's\n * label names it (#939); a user `id` still wins there. With `needsLabelId`\n * it also returns the id of whichever label names the control (#981).\n * Internal; not part of the public API.\n */\nexport function useAutoLabelId({\n  label,\n  id,\n  labelProps,\n  rendersLabel,\n  hasInput = true,\n  needsLabelId = false,\n}: UseAutoLabelIdOptions): {\n  controlId: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n  /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */\n  labelled: boolean;\n  /**\n   * With `needsLabelId`, the id of the label that names `controlId`, its own\n   * or a surrounding Field's. Undefined when no label names it, or when the\n   * Field's label was wired by hand, since that Field hands out no label id.\n   */\n  labelId: string | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Read outside the control's own Field, so it is set only when an outer\n  // Field holds the control, which then renders no label of its own.\n  const fieldLabelId = useFieldLabelId();\n  // What an outer Field's label points at, even when wired by hand.\n  const fieldLabelFor = useFieldLabelFor();\n  // That Field's label element, set under the same conditions.\n  const fieldLabelElementId = useFieldLabelElementId();\n  // Truthiness mirrors Field's own `if (label)` render gate.\n  const active = !!label && rendersLabel;\n  // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and\n  // must not leave an orphan generated id on the control.\n  const userWired = !!labelProps && 'htmlFor' in labelProps;\n  const adopted = !active && hasInput ? fieldLabelId : undefined;\n  const controlId = id ?? (active && !userWired ? generatedId : adopted);\n  const ownLabelProps = { htmlFor: controlId, ...labelProps };\n  const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;\n  const labelled = !!controlId && labelTarget === controlId;\n  // Only a label that names the control gets an id to point at, with the\n  // suffix Field gives its own, from an id that is already unique.\n  const ownLabelId =\n    needsLabelId && active && labelled\n      ? (labelProps?.id ?? `${generatedId}-label`)\n      : undefined;\n  // Inactive with a label still means an own Field may render it (pickers'\n  // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`\n  // tells Field the association is owned here, so it must not generate one\n  // that would dangle (#495 presence semantics).\n  const fieldLabelProps = active\n    ? ownLabelId\n      ? { ...ownLabelProps, id: ownLabelId }\n      : ownLabelProps\n    : label\n      ? { htmlFor: undefined, ...labelProps }\n      : labelProps;\n  const labelId =\n    needsLabelId && labelled\n      ? active\n        ? ownLabelId\n        : fieldLabelElementId\n      : undefined;\n  return { controlId, fieldLabelProps, labelled, labelId };\n}\n\ninterface UseAutoLabelledByOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /** True when this render actually outputs the label naming the group. */\n  rendersLabel: boolean;\n  /**\n   * The caller's remaining props. A non-empty `aria-label` among them names\n   * the group, and so does any `aria-labelledby` key, even an undefined one,\n   * since the group spreads them after its own attribute. Either keeps every\n   * label off the group, its own and a surrounding Field's alike.\n   */\n  callerProps: object;\n}\n\n/**\n * Group-input counterpart of {@link useAutoLabelId} (#494): a group of\n * controls cannot take a single `htmlFor`, so instead the rendered `<label>`\n * gets a generated id and the group container points at it with\n * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target\n * instead of generating one. Any caller `htmlFor` is stripped — a group label\n * names the group, never a single control — so the merged labelProps always\n * carry an explicit `htmlFor: undefined`. When the group renders no label of\n * its own, it points at the label of a labeled Field around it instead\n * (#939). A caller who named the group with `aria-label` or\n * `aria-labelledby` gets no `aria-labelledby` from either label, so their\n * name wins wherever the label sits.\n * Internal; not part of the public API.\n */\nexport function useAutoLabelledBy({\n  label,\n  labelProps,\n  rendersLabel,\n  callerProps,\n}: UseAutoLabelledByOptions): {\n  ariaLabelledBy: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Set only when an outer Field holds the group (see useAutoLabelId).\n  const fieldLabelElementId = useFieldLabelElementId();\n  const active = !!label && rendersLabel;\n  const labelId = labelProps?.id ?? (active ? generatedId : undefined);\n  const fieldLabelProps = active\n    ? { ...labelProps, id: labelId, htmlFor: undefined }\n    : labelProps;\n  const aria = callerProps as React.AriaAttributes;\n  // Presence for aria-labelledby: the caller's key replaces the attribute\n  // through the spread whatever its value, and pointing it at a label would\n  // only take a Rate's fallback name away. Checked before either label, so\n  // the caller's name wins over the group's own `label` as it does over a\n  // Field's, the way an aria-label beats a `<label for>` on a single input.\n  const callerNamed = !!aria['aria-label'] || 'aria-labelledby' in aria;\n  const ariaLabelledBy = callerNamed\n    ? undefined\n    : active\n      ? labelId\n      : fieldLabelElementId;\n  return { ariaLabelledBy, fieldLabelProps };\n}\n"],"names":[],"mappings":";;;;AAmCA;;;;;;;;;;;AAWG;SACa,cAAc,CAAC,EAC7B,KAAK,EACL,EAAE,EACF,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,KAAK,GACE,EAAA;;AAatB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;;AAG3B,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;;AAEtC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;;AAExC,IAAA,MAAM,mBAAmB,GAAG,sBAAsB,EAAE;;AAEpD,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;;;IAGtC,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,IAAI,UAAU;AACzD,IAAA,MAAM,OAAO,GAAG,CAAC,MAAM,IAAI,QAAQ,GAAG,YAAY,GAAG,SAAS;AAC9D,IAAA,MAAM,SAAS,GAAG,EAAE,KAAK,MAAM,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACtE,MAAM,aAAa,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE;AAC3D,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,OAAO,GAAG,aAAa;IAClE,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,IAAI,WAAW,KAAK,SAAS;;;AAGzD,IAAA,MAAM,UAAU,GACd,YAAY,IAAI,MAAM,IAAI;WACrB,UAAU,EAAE,EAAE,IAAI,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;UACzC,SAAS;;;;;IAKf,MAAM,eAAe,GAAG;AACtB,UAAE;cACE,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE,UAAU;AACpC,cAAE;AACJ,UAAE;cACE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU;cACnC,UAAU;AAChB,IAAA,MAAM,OAAO,GACX,YAAY,IAAI;AACd,UAAE;AACA,cAAE;AACF,cAAE;UACF,SAAS;IACf,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE;AAC1D;AAkBA;;;;;;;;;;;;;AAaG;AACG,SAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,YAAY,EACZ,WAAW,GACc,EAAA;;AAKzB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;AAE3B,IAAA,MAAM,mBAAmB,GAAG,sBAAsB,EAAE;AACpD,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;AACtC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,EAAE,KAAK,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,MAAM,eAAe,GAAG;AACtB,UAAE,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS;UAChD,UAAU;IACd,MAAM,IAAI,GAAG,WAAmC;;;;;;AAMhD,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,iBAAiB,IAAI,IAAI;IACrE,MAAM,cAAc,GAAG;AACrB,UAAE;AACF,UAAE;AACA,cAAE;cACA,mBAAmB;AACzB,IAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE;AAC5C;;"}

package/dist/index.cjs

@@ -9079,8 +9079,10 @@ const FieldLabelElementIdContext = React.createContext(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.
  */
 const useFieldLabelElementId = () => React.useContext(FieldLabelElementIdContext);
@@ -9459,10 +9461,11 @@ const Field = withSubComponents(FieldComponent, {
  * 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.
  */
-function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true, }) {
+function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true, needsLabelId = false, }) {
     // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
     const generatedId = React.useId();
     // Read outside the control's own Field, so it is set only when an outer
@@ -9470,6 +9473,8 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
     const fieldLabelId = useFieldLabelId();
     // What an outer Field's label points at, even when wired by hand.
     const fieldLabelFor = useFieldLabelFor();
+    // That Field's label element, set under the same conditions.
+    const fieldLabelElementId = useFieldLabelElementId();
     // Truthiness mirrors Field's own `if (label)` render gate.
     const active = !!label && rendersLabel;
     // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and
@@ -9478,21 +9483,30 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
     const adopted = !active && hasInput ? fieldLabelId : undefined;
     const controlId = id ?? (active && !userWired ? generatedId : adopted);
     const ownLabelProps = { htmlFor: controlId, ...labelProps };
+    const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;
+    const labelled = !!controlId && labelTarget === controlId;
+    // Only a label that names the control gets an id to point at, with the
+    // suffix Field gives its own, from an id that is already unique.
+    const ownLabelId = needsLabelId && active && labelled
+        ? (labelProps?.id ?? `${generatedId}-label`)
+        : undefined;
     // Inactive with a label still means an own Field may render it (pickers'
     // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`
     // tells Field the association is owned here, so it must not generate one
     // that would dangle (#495 presence semantics).
     const fieldLabelProps = active
-        ? ownLabelProps
+        ? ownLabelId
+            ? { ...ownLabelProps, id: ownLabelId }
+            : ownLabelProps
         : label
             ? { htmlFor: undefined, ...labelProps }
             : labelProps;
-    const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;
-    return {
-        controlId,
-        fieldLabelProps,
-        labelled: !!controlId && labelTarget === controlId,
-    };
+    const labelId = needsLabelId && labelled
+        ? active
+            ? ownLabelId
+            : fieldLabelElementId
+        : undefined;
+    return { controlId, fieldLabelProps, labelled, labelId };
 }
 /**
  * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
@@ -10070,13 +10084,48 @@ const Slider = React.forwardRef((props, ref) => {
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
     // In range mode the low thumb carries `rest` (and any user id), so the
-    // label targets it; each thumb keeps its own aria-label for AT.
-    const { controlId, fieldLabelProps } = useAutoLabelId({
+    // label's `for` targets it.
+    const { controlId, fieldLabelProps, labelId } = useAutoLabelId({
         label,
         id: restProps.id,
         labelProps,
         rendersLabel: ownField,
-    });
+        needsLabelId: !!range,
+    });
+    // A range thumb's default name is an `aria-label`, which outranks the
+    // label's `for`, so a label naming the Slider reaches each thumb through
+    // `aria-labelledby` instead: the label, then a hidden span holding the
+    // thumb's own text, as in "Price Minimum value" (#981). An `ariaLabel`
+    // entry is that thumb's whole name and wins.
+    const thumbTextId = React.useId();
+    const thumbLabels = range
+        ? ariaLabel
+        : undefined;
+    // A caller's `aria-label` or `aria-labelledby` names the Slider in the
+    // label's place, so both thumbs read it before their own text. They are
+    // routed here rather than spread, since the spread reaches only the low
+    // thumb and would leave the pair with two unrelated names. Presence for
+    // aria-labelledby, as on a group (#974): the caller's key takes the naming
+    // over whatever its value, so an undefined one keeps every label out and
+    // leaves both thumbs their bare text. A non-empty one wins over an
+    // aria-label, as it does in the browser's name computation.
+    const { 'aria-label': callerLabel, 'aria-labelledby': callerLabelledBy, ...thumbRest } = rest;
+    const callerNamed = !!callerLabel || 'aria-labelledby' in rest;
+    const stemRef = callerLabelledBy || (callerNamed ? undefined : labelId);
+    const stemText = stemRef ? undefined : callerLabel;
+    const nameThumb = (own, text, textId) => {
+        const wired = !!stemRef && !own;
+        return {
+            text,
+            textId,
+            wired,
+            aria: wired
+                ? { 'aria-labelledby': `${stemRef} ${textId}` }
+                : { 'aria-label': own || (stemText ? `${stemText} ${text}` : text) },
+        };
+    };
+    const lowThumb = nameThumb(thumbLabels?.[0], 'Minimum value', `${thumbTextId}-min`);
+    const highThumb = nameThumb(thumbLabels?.[1], 'Maximum value', `${thumbTextId}-max`);
     // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'
     const tooltipMode = tooltip ?? (showOutput ? 'auto' : 'hidden');
     // --- Range mode state ---
@@ -10371,7 +10420,7 @@ const Slider = React.forwardRef((props, ref) => {
                     : {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
-                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, id: controlId, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
+                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, ...lowThumb.aria, ...getAriaProps(currentRange[0]), ...thumbRest, id: controlId, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, ...highThumb.aria, ...getAriaProps(currentRange[1]), name: nameHigh }), [lowThumb, highThumb].map(thumb => thumb.wired && (jsxRuntime.jsx("span", { id: thumb.textId, hidden: true, children: thumb.text }, thumb.textId))), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,