@boostdev/design-system-components 2.16.0 → 2.18.0

package/dist/web-components/{chunk-RZH5IVB5.js → chunk-5ATTKUCP.js}

@@ -62,8 +62,8 @@ var BdsAlert = class extends i2 {
     }
 
     :host([variant='error']) .alert {
-      --alert_bg--variant:     var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-bg));
+      --alert_bg--variant:     var(--alert_bg--error, var(--bds-color_error--subtle));
+      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-error--subtle));
       --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
     }
 

package/dist/web-components/{chunk-XJU7KITO.js → chunk-5QA7JOC3.js}

@@ -1,3 +1,6 @@
+import {
+  fieldLabelStyles
+} from "./chunk-FYTISJN3.js";
 import {
   fieldMessageStyles,
   renderFieldMessage
@@ -33,11 +36,6 @@ var BdsSelect = class extends i2 {
     }
 
     .label {
-      display: block;
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg);
       margin-block-end: var(--bds-space_xxs);
     }
 
@@ -102,6 +100,7 @@ var BdsSelect = class extends i2 {
       block-size: 100%;
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
   static properties = {

package/dist/web-components/{chunk-EYCW7TKB.js → chunk-7GEAT2TY.js}

@@ -1,3 +1,6 @@
+import {
+  fieldLabelStyles
+} from "./chunk-FYTISJN3.js";
 import {
   fieldMessageStyles,
   renderFieldMessage
@@ -32,11 +35,6 @@ var BdsTextarea = class extends i2 {
     }
 
     .label {
-      display: block;
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg);
       margin-block-end: var(--bds-space_xxs);
     }
 
@@ -91,6 +89,7 @@ var BdsTextarea = class extends i2 {
       --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
   static properties = {

package/dist/web-components/chunk-FYTISJN3.js

@@ -0,0 +1,18 @@
+import {
+  i
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/field-label.ts
+var fieldLabelStyles = i`
+  .label {
+    display: block;
+    font-family: var(--formLabel_font-family, var(--bds-font_family--body));
+    font-size: var(--formLabel_font-size, var(--bds-font_size--body--s));
+    font-weight: var(--formLabel_font-weight, var(--bds-font_weight--semibold));
+    color: var(--formLabel_color, var(--bds-color_on-bg));
+  }
+`;
+
+export {
+  fieldLabelStyles
+};

package/dist/web-components/{chunk-LHFUXZ52.js → chunk-ISV56UWR.js}

@@ -1,3 +1,6 @@
+import {
+  fieldLabelStyles
+} from "./chunk-FYTISJN3.js";
 import {
   fieldMessageStyles,
   renderFieldMessage
@@ -38,14 +41,6 @@ var BdsSlider = class extends i2 {
       margin-block-end: var(--bds-space_xxs);
     }
 
-    .label {
-      display: block;
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg);
-    }
-
     .value {
       font-size: var(--bds-font_size--body--s);
       font-variant-numeric: tabular-nums;
@@ -135,6 +130,7 @@ var BdsSlider = class extends i2 {
       }
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
   static properties = {

package/dist/web-components/{chunk-YLDQOESI.js → chunk-K3VK6VEL.js}

@@ -33,11 +33,12 @@ var BdsRadioGroup = class extends i2 {
     }
 
     .legend {
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--medium);
-      color: var(--bds-color_on-bg);
-      margin-block-end: var(--bds-space_xs);
+      padding: 0;
+      font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
+      font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
+      font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
+      color: var(--radioGroup_legend-color, var(--bds-color_on-bg));
+      margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
     }
 
     .required {

package/dist/web-components/{chunk-GQNQBEYR.js → chunk-QZMFNJSN.js}

@@ -1,3 +1,6 @@
+import {
+  fieldLabelStyles
+} from "./chunk-FYTISJN3.js";
 import {
   fieldMessageStyles,
   renderFieldMessage
@@ -32,11 +35,6 @@ var BdsNumberInput = class extends i2 {
     }
 
     .label {
-      display: block;
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg);
       margin-block-end: var(--bds-space_xxs);
     }
 
@@ -143,6 +141,7 @@ var BdsNumberInput = class extends i2 {
       color: var(--numberInput_stepper-color, var(--bds-color_interactive));
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
   static properties = {

package/dist/web-components/{chunk-BPYKZVDK.js → chunk-SJLMW2VR.js}

@@ -45,8 +45,8 @@ var BdsBadge = class extends i2 {
     }
 
     :host([variant='secondary']) .badge {
-      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_bg));
-      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
+      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_grey));
+      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-grey));
     }
 
     :host([variant='success']) .badge {

package/dist/web-components/{chunk-GPJWLAKU.js → chunk-VGPJ5L6N.js}

@@ -38,11 +38,12 @@ var BdsCheckboxGroup = class extends i2 {
     }
 
     .legend {
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--medium);
-      color: var(--bds-color_on-bg);
-      margin-block-end: var(--bds-space_xs);
+      padding: 0;
+      font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
+      font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
+      font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
+      color: var(--checkboxGroup_legend-color, var(--bds-color_on-bg));
+      margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
     }
 
     .required {

package/dist/web-components/{chunk-AGI6YQRC.js → chunk-WOFGYU6E.js}

@@ -1,3 +1,6 @@
+import {
+  fieldLabelStyles
+} from "./chunk-FYTISJN3.js";
 import {
   fieldMessageStyles,
   renderFieldMessage
@@ -36,11 +39,6 @@ var BdsFormInput = class extends i2 {
     }
 
     .label {
-      display: block;
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg);
       margin-block-end: var(--bds-space_xxs);
     }
 
@@ -126,6 +124,7 @@ var BdsFormInput = class extends i2 {
       display: none;
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
   static properties = {

package/dist/web-components/{chunk-2MJTO2IW.js → chunk-WWWJCSXN.js}

@@ -55,8 +55,8 @@ var BdsNotificationBanner = class extends i2 {
     }
 
     :host([variant='error']) .banner {
-      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_bg--variant:     var(--banner_bg--error, var(--bds-color_error--subtle));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-error--subtle));
       --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 

package/dist/web-components/index.js

@@ -6,22 +6,22 @@ import {
 } from "./chunk-3FSGP35V.js";
 import {
   BdsRadioGroup
-} from "./chunk-YLDQOESI.js";
+} from "./chunk-K3VK6VEL.js";
 import {
   BdsSegmentedControl
 } from "./chunk-NTQ4TCUT.js";
 import {
   BdsSelect
-} from "./chunk-XJU7KITO.js";
+} from "./chunk-5QA7JOC3.js";
 import {
   BdsSlider
-} from "./chunk-LHFUXZ52.js";
+} from "./chunk-ISV56UWR.js";
 import {
   BdsSwitch
 } from "./chunk-CKCPV347.js";
 import {
   BdsTextarea
-} from "./chunk-EYCW7TKB.js";
+} from "./chunk-7GEAT2TY.js";
 import {
   BdsGrid
 } from "./chunk-ITD2MV5K.js";
@@ -33,10 +33,10 @@ import {
 } from "./chunk-4MB2ICSK.js";
 import {
   BdsCheckboxGroup
-} from "./chunk-GPJWLAKU.js";
+} from "./chunk-VGPJ5L6N.js";
 import {
   BdsCombobox
-} from "./chunk-XI2U6U26.js";
+} from "./chunk-2FNCV46J.js";
 import {
   BdsFieldGroup
 } from "./chunk-SEO2F5KJ.js";
@@ -45,10 +45,11 @@ import {
 } from "./chunk-KZPRFY5P.js";
 import {
   BdsFormInput
-} from "./chunk-AGI6YQRC.js";
+} from "./chunk-WOFGYU6E.js";
 import {
   BdsNumberInput
-} from "./chunk-GQNQBEYR.js";
+} from "./chunk-QZMFNJSN.js";
+import "./chunk-FYTISJN3.js";
 import "./chunk-SRKQ6GST.js";
 import {
   BdsDropdownMenuItem
@@ -109,7 +110,7 @@ import {
 } from "./chunk-7ZOJ7N4E.js";
 import {
   BdsRating
-} from "./chunk-SYNLFKD3.js";
+} from "./chunk-3LQKFSMR.js";
 import {
   BdsSectionHeader
 } from "./chunk-DGOCPKHI.js";
@@ -158,17 +159,17 @@ import {
 } from "./chunk-AIBOHNDU.js";
 import {
   BdsNotificationBanner
-} from "./chunk-2MJTO2IW.js";
+} from "./chunk-WWWJCSXN.js";
 import "./chunk-7VXRMCAL.js";
 import {
   BdsAlert
-} from "./chunk-RZH5IVB5.js";
+} from "./chunk-5ATTKUCP.js";
 import {
   BdsAvatar
 } from "./chunk-IKAJLROF.js";
 import {
   BdsBadge
-} from "./chunk-BPYKZVDK.js";
+} from "./chunk-SJLMW2VR.js";
 import {
   BdsBreadcrumb
 } from "./chunk-62NK3ZSC.js";

package/dist/web-components/interaction/form/bds-checkbox-group.js

@@ -1,6 +1,6 @@
 import {
   BdsCheckboxGroup
-} from "../../chunk-GPJWLAKU.js";
+} from "../../chunk-VGPJ5L6N.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-combobox.js

@@ -1,6 +1,7 @@
 import {
   BdsCombobox
-} from "../../chunk-XI2U6U26.js";
+} from "../../chunk-2FNCV46J.js";
+import "../../chunk-FYTISJN3.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-form-input.js

@@ -1,6 +1,7 @@
 import {
   BdsFormInput
-} from "../../chunk-AGI6YQRC.js";
+} from "../../chunk-WOFGYU6E.js";
+import "../../chunk-FYTISJN3.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-number-input.js

@@ -1,6 +1,7 @@
 import {
   BdsNumberInput
-} from "../../chunk-GQNQBEYR.js";
+} from "../../chunk-QZMFNJSN.js";
+import "../../chunk-FYTISJN3.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-radio-group.js

@@ -1,6 +1,6 @@
 import {
   BdsRadioGroup
-} from "../../chunk-YLDQOESI.js";
+} from "../../chunk-K3VK6VEL.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-select.js

@@ -1,6 +1,7 @@
 import {
   BdsSelect
-} from "../../chunk-XJU7KITO.js";
+} from "../../chunk-5QA7JOC3.js";
+import "../../chunk-FYTISJN3.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-slider.js

@@ -1,6 +1,7 @@
 import {
   BdsSlider
-} from "../../chunk-LHFUXZ52.js";
+} from "../../chunk-ISV56UWR.js";
+import "../../chunk-FYTISJN3.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/interaction/form/bds-textarea.js

@@ -1,6 +1,7 @@
 import {
   BdsTextarea
-} from "../../chunk-EYCW7TKB.js";
+} from "../../chunk-7GEAT2TY.js";
+import "../../chunk-FYTISJN3.js";
 import "../../chunk-SRKQ6GST.js";
 import "../../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/ui/bds-alert.js

@@ -1,6 +1,6 @@
 import {
   BdsAlert
-} from "../chunk-RZH5IVB5.js";
+} from "../chunk-5ATTKUCP.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAlert

package/dist/web-components/ui/bds-badge.js

@@ -1,6 +1,6 @@
 import {
   BdsBadge
-} from "../chunk-BPYKZVDK.js";
+} from "../chunk-SJLMW2VR.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsBadge

package/dist/web-components/ui/bds-notification-banner.js

@@ -1,6 +1,6 @@
 import {
   BdsNotificationBanner
-} from "../chunk-2MJTO2IW.js";
+} from "../chunk-WWWJCSXN.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

package/dist/web-components/ui/bds-rating.js

@@ -1,6 +1,6 @@
 import {
   BdsRating
-} from "../chunk-SYNLFKD3.js";
+} from "../chunk-3LQKFSMR.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsRating

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

package/src/components/interaction/Rating/Rating.mdx

@@ -40,8 +40,11 @@ Read-only star rating display. Use to show an existing score; for user input, co
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--rating_color`</td><td>`var(--bds-color_bg)`</td><td>Empty star colour</td></tr>
+<tr><td>`--rating_color`</td><td>`var(--bds-color_bg)`</td><td>Empty star fill</td></tr>
 <tr><td>`--rating_color--filled`</td><td>`var(--bds-color_warning)`</td><td>Filled star colour</td></tr>
+<tr><td>`--rating_stroke-color`</td><td>`var(--bds-color_on-bg--as-surface)`</td><td>Empty star outline, a non-text mark (falls back to `--bds-color_on-bg--border`, then `--bds-color_on-bg`, on foundations before 2.3.0)</td></tr>
+<tr><td>`--rating_stroke-color--filled`</td><td>`currentcolor`</td><td>Filled star outline, the filled colour by default so both kinds keep the same size</td></tr>
+<tr><td>`--rating_stroke-width`</td><td>`var(--bdc-outline_width)`</td><td>Outline width, in the star's 24-unit viewBox</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/Rating/Rating.module.css

@@ -5,12 +5,21 @@
     color: var(--rating_color, var(--bds-color_bg));
   }
 
+  /* Empty stars are outlined, filled stars solid: the two differ in shape, not
+     only in hue, because the as-surface grey and the warning fill are close in
+     lightness. The outline is a non-text mark, so it takes the as-surface
+     member (>= 3:1 on the page). Filled stars stroke in their own colour so
+     both kinds keep the same size. */
   .star {
     inline-size: 1.5em;
     block-size: 1.5em;
+    stroke: var(--rating_stroke-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
+    stroke-width: var(--rating_stroke-width, var(--bdc-outline_width));
+    stroke-linejoin: round;
   }
 
   .--filled {
     color: var(--rating_color--filled, var(--bds-color_warning));
+    stroke: var(--rating_stroke-color--filled, currentcolor);
   }
 }

package/src/components/interaction/Rating/Rating.spec.tsx

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { render, screen } from '@testing-library/react';
 import { Rating } from './Rating';
 
@@ -27,4 +29,11 @@ describe('Rating', () => {
     render(<Rating value={3} className="custom" />);
     expect(screen.getByRole('img')).toHaveClass('custom');
   });
+
+  it('outlines empty stars with the as-surface mark colour and strokes filled stars in their own colour', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/interaction/Rating/Rating.module.css'), 'utf8');
+    expect(css).toMatch(/\.star \{[^}]*stroke:\s*var\(--rating_stroke-color,\s*var\(--bds-color_on-bg--as-surface,\s*var\(--bds-color_on-bg--border,\s*var\(--bds-color_on-bg\)\)\)\)/);
+    expect(css).toMatch(/\.star \{[^}]*stroke-width:\s*var\(--rating_stroke-width,\s*var\(--bdc-outline_width\)\)/);
+    expect(css).toMatch(/\.--filled \{[^}]*stroke:\s*var\(--rating_stroke-color--filled,\s*currentcolor\)/);
+  });
 });

package/src/components/interaction/form/Checkbox/Checkbox.tsx

@@ -31,7 +31,7 @@ export function Checkbox({ label, name, error, hint, className, ...props }: Chec
           name={name}
           className={cn(css.checkbox, error && css.checkboxError)}
         />
-        <Label id={id} label={label} />
+        <Label id={id} label={label} variant="option" />
       </div>
       <Message inputId={id} type="error" message={error} />
       <Message inputId={id} type="hint" message={hint} />

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx

@@ -46,7 +46,7 @@ All public override tokens. Set on the CheckboxGroup or any ancestor; they casca
 | `--checkboxGroup_items-gap` | `var(--bds-space_xs)` | Gap between the child checkboxes. |
 | `--checkboxGroup_legend-color` | `var(--bds-color_on-bg)` | Legend text colour. |
 | `--checkboxGroup_legend-font-family` | `var(--bds-font_family--body)` | Legend font family. |
-| `--checkboxGroup_legend-font-size` | `var(--bds-font_size--body--s)` | Legend font size. |
+| `--checkboxGroup_legend-font-size` | `var(--bds-font_size--body--s)` | Legend font size, the same as the labels of the other fields. |
 | `--checkboxGroup_legend-font-weight` | `var(--bds-font_weight--medium)` | Legend font weight. |
 | `--checkboxGroup_legend-gap` | `var(--bds-space_xs)` | Space below the legend before the items. |
 | `--checkboxGroup_required-color` | `var(--bds-color_error)` | Colour of the visible `*` required marker. |

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx

@@ -136,4 +136,9 @@ describe('CheckboxGroup', () => {
     );
     expect(screen.getByRole('group', { name: 'Pick' }).className).not.toContain('groupError');
   });
+
+  it('sizes the legend like the labels of the other fields', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css'), 'utf8');
+    expect(css).toMatch(/\.legend \{[^}]*font-size:\s*var\(--checkboxGroup_legend-font-size,\s*var\(--bds-font_size--body--s\)\)/);
+  });
 });

package/src/components/interaction/form/Combobox/Combobox.mdx

@@ -57,6 +57,8 @@ Searchable select with type-ahead filtering. Combines a text input with a dropdo
 </tbody>
 </table>
 
+The label above the field reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on FormInput.
+
 
 ## Accessibility
 

package/src/components/interaction/form/FormInput/FormInput.mdx

@@ -43,6 +43,10 @@ Text input field with label, optional hint, and error state. The label and input
 <tr><td>`--formInput_border`</td><td>`none`</td><td>Border</td></tr>
 <tr><td>`--formInput_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Corner radius</td></tr>
 <tr><td>`--formInput_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
+<tr><td>`--formLabel_font-family`</td><td>`var(--bds-font_family--body)`</td><td>Font family of the label above the field (shared by all form controls with a label above the field)</td></tr>
+<tr><td>`--formLabel_font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Label font size</td></tr>
+<tr><td>`--formLabel_font-weight`</td><td>`var(--bds-font_weight--semibold)`</td><td>Label font weight</td></tr>
+<tr><td>`--formLabel_color`</td><td>`var(--bds-color_on-bg)`</td><td>Label colour</td></tr>
 <tr><td>`--formMessage_font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Font size of the error and hint message (shared by all form controls)</td></tr>
 <tr><td>`--formMessage_gap`</td><td>`var(--bds-space_xxs)`</td><td>Gap between the error icon and the error text</td></tr>
 <tr><td>`--formMessage_icon-size`</td><td>`1.15em`</td><td>Size of the error icon</td></tr>

package/src/components/interaction/form/NumberInput/NumberInput.mdx

@@ -53,6 +53,8 @@ Numeric text input with increment/decrement stepper buttons. Enforces `min`, `ma
 </tbody>
 </table>
 
+The label above the field reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on FormInput.
+
 
 ## Accessibility
 

package/src/components/interaction/form/Radio/Radio.tsx

@@ -35,7 +35,7 @@ export function Radio({ label, name, description, error, hint, className, id: co
           {...props}
         />
         <div className={css.textWrapper}>
-          <Label id={id} label={label} />
+          <Label id={id} label={label} variant="option" />
           {description && (
             <span id={descriptionId} className={css.description}>
               {description}

package/src/components/interaction/form/RadioGroup/RadioGroup.mdx

@@ -46,7 +46,7 @@ All public override tokens. Set on the RadioGroup or any ancestor; they cascade.
 | `--radioGroup_items-gap` | `var(--bds-space_xs)` | Gap between the child radios. |
 | `--radioGroup_legend-color` | `var(--bds-color_on-bg)` | Legend text colour. |
 | `--radioGroup_legend-font-family` | `var(--bds-font_family--body)` | Legend font family. |
-| `--radioGroup_legend-font-size` | `var(--bds-font_size--body--s)` | Legend font size. |
+| `--radioGroup_legend-font-size` | `var(--bds-font_size--body--s)` | Legend font size, the same as the labels of the other fields. |
 | `--radioGroup_legend-font-weight` | `var(--bds-font_weight--medium)` | Legend font weight. |
 | `--radioGroup_legend-gap` | `var(--bds-space_xs)` | Space below the legend before the items. |
 | `--radioGroup_required-color` | `var(--bds-color_error)` | Colour of the visible `*` required marker. |

package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx

@@ -124,4 +124,9 @@ describe('RadioGroup', () => {
     );
     expect(screen.getByRole('group', { name: 'Pick' }).className).not.toContain('groupError');
   });
+
+  it('sizes the legend like the labels of the other fields', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/interaction/form/RadioGroup/RadioGroup.module.css'), 'utf8');
+    expect(css).toMatch(/\.legend \{[^}]*font-size:\s*var\(--radioGroup_legend-font-size,\s*var\(--bds-font_size--body--s\)\)/);
+  });
 });

package/src/components/interaction/form/Select/Select.mdx

@@ -56,6 +56,8 @@ Native dropdown for choosing one option from a list. Renders a styled `<select>`
 </tbody>
 </table>
 
+The label above the field reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on FormInput.
+
 
 ## Accessibility
 

package/src/components/interaction/form/Slider/Slider.mdx

@@ -56,6 +56,8 @@ Range input for selecting a numeric value within a bounded range.
 </tbody>
 </table>
 
+The label above the field reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on FormInput.
+
 
 ## Accessibility
 

package/src/components/interaction/form/Switch/Switch.tsx

@@ -49,7 +49,7 @@ export function Switch({
             <span className={css.thumb} />
           </span>
         </div>
-        <Label id={id} label={label} />
+        <Label id={id} label={label} variant="option" />
       </div>
       <Message inputId={id} type="error" message={error} />
       <Message inputId={id} type="hint" message={hint} />

package/src/components/interaction/form/Textarea/Textarea.mdx

@@ -55,6 +55,8 @@ Multi-line text input with label, hint, and error support.
 </tbody>
 </table>
 
+The label above the field reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on FormInput.
+
 
 ## Accessibility