@boostdev/design-system-components 2.16.0 → 2.18.0

package/src/components/interaction/form/atoms/Label.module.css

@@ -6,4 +6,14 @@
     color: var(--bds-color_on-bg);
     cursor: pointer;
   }
+
+  /* The label above a field. Same hooks and defaults as the web component
+     field labels (fieldLabelStyles in web-components/interaction/form/field-label.ts),
+     so a React form and a bds-* form look the same. */
+  .--field {
+    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));
+  }
 }

package/src/components/interaction/form/atoms/Label.spec.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { Label } from './Label';
+import { FormInput } from '../FormInput';
+import { Select } from '../Select';
+import { Checkbox } from '../Checkbox';
+import { Radio } from '../Radio';
+import { Switch } from '../Switch';
+
+describe('Label', () => {
+  it('labels the control with the given id', () => {
+    render(<Label id="email" label="Email" />);
+    expect(screen.getByText('Email').getAttribute('for')).toBe('email');
+  });
+
+  it('uses the field look by default', () => {
+    render(<Label id="email" label="Email" />);
+    expect(screen.getByText('Email').className).toContain('--field');
+  });
+
+  it('drops the field look for an option label', () => {
+    render(<Label id="terms" label="Accept terms" variant="option" />);
+    expect(screen.getByText('Accept terms').className).not.toContain('--field');
+  });
+
+  it('gives field labels the field look', () => {
+    render(
+      <>
+        <FormInput label="Email" name="email" />
+        <Select label="Country" name="country" options={[{ value: 'nl', label: 'Netherlands' }]} />
+      </>
+    );
+    expect(screen.getByText('Email').className).toContain('--field');
+    expect(screen.getByText('Country').className).toContain('--field');
+  });
+
+  it('keeps checkbox, radio and switch labels on the option look', () => {
+    render(
+      <>
+        <Checkbox label="Accept terms" name="terms" />
+        <Radio label="Pick up" name="delivery" value="pickup" />
+        <Switch label="Notifications" name="notifications" />
+      </>
+    );
+    ['Accept terms', 'Pick up', 'Notifications'].forEach(text =>
+      expect(screen.getByText(text).className).not.toContain('--field')
+    );
+  });
+});

package/src/components/interaction/form/atoms/Label.stories.tsx

@@ -22,12 +22,15 @@ export const Required: Story = {
   },
 };
 
+export const Option: Story = { args: { id: 'input-option', label: 'Accept the terms', variant: 'option' } };
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
       <Label id="a" label="Plain label" />
       <Label id="b" label="Label for a text input" />
       <Label id="c" label={<><strong>Bold</strong> label with markup</>} />
+      <Label id="d" label="Option label beside a checkbox" variant="option" />
     </div>
   ),
 };

package/src/components/interaction/form/atoms/Label.tsx

@@ -6,11 +6,13 @@ import type { WithClassName } from '../../../../types';
 interface LabelProps extends WithClassName {
   id: string;
   label: ReactNode;
+  /** `field` is the label above a control, `option` the text beside a checkbox, radio or switch. */
+  variant?: 'field' | 'option';
 }
 
-export const Label = ({ label, id, className }: LabelProps) => {
+export const Label = ({ label, id, className, variant = 'field' }: LabelProps) => {
   return (
-    <label htmlFor={id} className={cn(css.label, className)}>
+    <label htmlFor={id} className={cn(css.label, variant === 'field' && css['--field'], className)}>
       {label}
     </label>
   );

package/src/components/ui/Alert/Alert.mdx

@@ -116,7 +116,7 @@ Each variant's actual default resolution:
 <tr><td>`info`</td><td>`--bds-color_blue--subtle`</td><td>`--bds-color_on-blue--subtle`</td><td>`--bds-color_blue`</td></tr>
 <tr><td>`success`</td><td>`--bds-color_success--subtle`</td><td>`--bds-color_on-success--subtle`</td><td>`--bds-color_success`</td></tr>
 <tr><td>`warning`</td><td>`--bds-color_orange--subtle`</td><td>`--bds-color_on-orange--subtle`</td><td>`--bds-color_warning`</td></tr>
-<tr><td>`error`</td><td>relative-colour mix of `--bds-color_error` (12% alpha)</td><td>`--bds-color_on-bg`</td><td>`--bds-color_error`</td></tr>
+<tr><td>`error`</td><td>`--bds-color_error--subtle`</td><td>`--bds-color_on-error--subtle`</td><td>`--bds-color_error`</td></tr>
 </tbody>
 </table>
 

package/src/components/ui/Alert/Alert.module.css

@@ -40,8 +40,8 @@
     }
 
     .--variant_error {
-        --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/src/components/ui/Alert/Alert.spec.tsx

@@ -101,4 +101,10 @@ describe('Alert', () => {
       expect(cssSource).toContain(`--alert_accent--${v}`);
     });
   });
+
+  it('paints the error variant with the error subtle pair, like the other variants', () => {
+    expect(cssSource).toMatch(/\.--variant_error \{[^}]*--alert_bg--variant:\s*var\(--alert_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(cssSource).toMatch(/\.--variant_error \{[^}]*--alert_text--variant:\s*var\(--alert_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(cssSource).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

package/src/components/ui/Badge/Badge.mdx

@@ -75,7 +75,7 @@ The override surface is **layered**. Setting a public token on the badge (or any
 </tbody>
 </table>
 
-Defaults resolve to foundation tokens per variant: `success`/`error`/`warning` map directly to `--bds-color_{variant}` / `--bds-color_on-{variant}`. `primary` maps to `--bds-color_interactive` / `--bds-color_on-interactive`, and `secondary` maps to `--bds-color_bg` / `--bds-color_on-bg` — neither follows the generic `{variant}` naming.
+Defaults resolve to foundation tokens per variant: `success`/`error`/`warning` map directly to `--bds-color_{variant}` / `--bds-color_on-{variant}`. `primary` maps to `--bds-color_interactive` / `--bds-color_on-interactive`, and `secondary` maps to the neutral `--bds-color_grey` / `--bds-color_on-grey`, so it has a solid surface like the other variants. Neither follows the generic `{variant}` naming.
 
 
 ## Accessibility

package/src/components/ui/Badge/Badge.module.css

@@ -22,8 +22,8 @@
   }
 
   .--variant_secondary {
-    --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));
   }
 
   .--variant_success {

package/src/components/ui/Badge/Badge.spec.tsx

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { render, screen } from '@testing-library/react';
 import { Badge } from './Badge';
 
@@ -16,4 +18,10 @@ describe('Badge', () => {
     render(<Badge className="custom">Test</Badge>);
     expect(screen.getByText('Test')).toHaveClass('custom');
   });
+
+  it('gives the secondary variant a solid neutral surface through its own hooks', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Badge/Badge.module.css'), 'utf8');
+    expect(css).toMatch(/\.--variant_secondary \{[^}]*--badge_bg--variant:\s*var\(--badge_bg--secondary,\s*var\(--bds-color_grey\)\)/);
+    expect(css).toMatch(/\.--variant_secondary \{[^}]*--badge_text--variant:\s*var\(--badge_text--secondary,\s*var\(--bds-color_on-grey\)\)/);
+  });
 });

package/src/components/ui/NotificationBanner/NotificationBanner.mdx

@@ -90,7 +90,19 @@ The override surface is **layered**. Setting a public token on the banner (or an
 </tbody>
 </table>
 
-Defaults resolve to the corresponding foundation tokens.
+Each variant's actual default resolution:
+
+<table>
+<thead>
+<tr><th>Variant</th><th>Background default</th><th>Text default</th><th>Border default</th></tr>
+</thead>
+<tbody>
+<tr><td>`info`</td><td>`--bds-color_blue--subtle`</td><td>`--bds-color_on-blue--subtle`</td><td>`--bds-color_blue`</td></tr>
+<tr><td>`success`</td><td>`--bds-color_success--subtle`</td><td>`--bds-color_on-success--subtle`</td><td>`--bds-color_success`</td></tr>
+<tr><td>`warning`</td><td>`--bds-color_orange--subtle`</td><td>`--bds-color_on-orange--subtle`</td><td>`--bds-color_warning`</td></tr>
+<tr><td>`error`</td><td>`--bds-color_error--subtle`</td><td>`--bds-color_on-error--subtle`</td><td>`--bds-color_error`</td></tr>
+</tbody>
+</table>
 
 
 ## Accessibility

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -34,8 +34,8 @@
   }
 
   .--variant_error {
-    --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/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx

@@ -88,4 +88,10 @@ describe('NotificationBanner', () => {
       expect(cssSource).toContain(`--banner_accent--${v}`);
     });
   });
+
+  it('paints the error variant with the error subtle pair, like the other variants', () => {
+    expect(cssSource).toMatch(/\.--variant_error \{[^}]*--banner_bg--variant:\s*var\(--banner_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(cssSource).toMatch(/\.--variant_error \{[^}]*--banner_text--variant:\s*var\(--banner_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(cssSource).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

package/src/test/token-contract.spec.ts

@@ -96,6 +96,7 @@ const NON_TEXT_MARKS: { file: string; rule: string }[] = [
   { file: 'components/ui/Accordion/Accordion.module.css', rule: '.item' },
   { file: 'components/ui/Tabs/Tabs.module.css', rule: '.tabList' },
   { file: 'components/ui/Table/Table.module.css', rule: '.th' },
+  { file: 'components/interaction/Rating/Rating.module.css', rule: '.star' },
 ];
 
 describe('non-text marks use the as-surface member of the colour set', () => {

package/src/web-components/interaction/form/BdsCheckboxGroup.mdx

@@ -53,6 +53,20 @@ Use `<bds-checkbox-group>` when you have multiple related checkboxes that belong
 |-------------|-----------------------------------|
 | `(default)` | `<bds-checkbox>` elements         |
 
+## Overridable CSS custom properties
+
+Legend hooks mirror the React `CheckboxGroup` (same names and defaults), so a theme carries over between the two implementations. Set them on the group or any ancestor.
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--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, the same as the field labels (`--formLabel_font-size`). |
+| `--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. |
+
+Style slotted `<bds-checkbox>` elements via their own tokens.
+
 ## Usage in plain HTML
 
 ```html

package/src/web-components/interaction/form/BdsCombobox.mdx

@@ -96,6 +96,10 @@ _None._
 ></bds-combobox>
 ```
 
+## Label
+
+The `label` reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on `<bds-form-input>`. The React field labels use the same hooks and defaults.
+
 ## Error state
 
 With `error`, the message gets a warning icon and the field ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.

package/src/web-components/interaction/form/BdsFormInput.mdx

@@ -88,6 +88,10 @@ Token names mirror the React `FormInput` component so themes carry over between
 | `--formInput_border` | `none` | Border (layered on top of the inset focus/error ring) |
 | `--formInput_radius` | `var(--bds-border_radius--full)` | Corner radius |
 | `--formInput_shadow` | `var(--bdc-outline_shadow)` | Box shadow |
+| `--formLabel_font-family` | `var(--bds-font_family--body)` | Font family of the label above the field (shared by all form controls with a label above the field) |
+| `--formLabel_font-size` | `var(--bds-font_size--body--s)` | Label font size |
+| `--formLabel_font-weight` | `var(--bds-font_weight--semibold)` | Label font weight |
+| `--formLabel_color` | `var(--bds-color_on-bg)` | Label colour |
 | `--formMessage_font-size` | `var(--bds-font_size--body--s)` | Font size of the error and hint message (shared by all form controls) |
 | `--formMessage_gap` | `var(--bds-space_xxs)` | Gap between the error icon and the error text |
 | `--formMessage_icon-size` | `1.15em` | Size of the error icon |

package/src/web-components/interaction/form/BdsNumberInput.mdx

@@ -73,6 +73,10 @@ Use `<bds-number-input>` for quantity selectors, counters, or any numeric field
 <bds-number-input name="qty" label="Quantity" value="1" min="0" max="99" step="1"></bds-number-input>
 ```
 
+## Label
+
+The `label` reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on `<bds-form-input>`. The React field labels use the same hooks and defaults.
+
 ## Error state
 
 With `error`, the message gets a warning icon and the field ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.

package/src/web-components/interaction/form/BdsRadioGroup.mdx

@@ -56,7 +56,17 @@ Use `<bds-radio-group>` whenever you have a set of mutually exclusive options. T
 
 ## Overridable CSS custom properties
 
-The legend uses `var(--bds-font_weight--medium)` (matching the React `RadioGroup`). `bds-radio-group` has no component-local override tokens of its own — style slotted `<bds-radio>` elements directly via their own tokens.
+Legend hooks mirror the React `RadioGroup` (same names and defaults), so a theme carries over between the two implementations. Set them on the group or any ancestor.
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--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, the same as the field labels (`--formLabel_font-size`). |
+| `--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. |
+
+Style slotted `<bds-radio>` elements via their own tokens.
 
 ## Usage in plain HTML
 

package/src/web-components/interaction/form/BdsSelect.mdx

@@ -82,6 +82,10 @@ When `label` is omitted, set `aria-label` on the host element (`<bds-select aria
 ></bds-select>
 ```
 
+## Label
+
+The `label` reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on `<bds-form-input>`. The React field labels use the same hooks and defaults.
+
 ## Error state
 
 With `error`, the message gets a warning icon and the field ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.

package/src/web-components/interaction/form/BdsSlider.mdx

@@ -84,6 +84,10 @@ Use `<bds-slider>` for continuous or stepped numeric ranges — volume controls,
 <bds-slider name="volume" label="Volume" value="50" min="0" max="100" step="5" show-value></bds-slider>
 ```
 
+## Label
+
+The `label` reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on `<bds-form-input>`. The React field labels use the same hooks and defaults.
+
 ## Error state
 
 With `error`, the message gets a warning icon. Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.

package/src/web-components/interaction/form/BdsTextarea.mdx

@@ -88,6 +88,10 @@ Use `<bds-textarea>` for multiline text entry — messages, comments, descriptio
 <bds-textarea name="feedback" label="Feedback" error="Feedback is required"></bds-textarea>
 ```
 
+## Label
+
+The `label` reads the shared label hooks (`--formLabel_*`: font-family, font-size, font-weight, color), listed on `<bds-form-input>`. The React field labels use the same hooks and defaults.
+
 ## Error state
 
 With `error`, the message gets a warning icon and the field ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.

package/src/web-components/interaction/form/bds-checkbox-group.spec.ts

@@ -1,4 +1,4 @@
-import { fixture, cleanup } from '../../test/helpers';
+import { fixture, cleanup, readSource, ruleDeclarations } from '../../test/helpers';
 import { BdsCheckboxGroup } from './bds-checkbox-group';
 
 describe('bds-checkbox-group', () => {
@@ -136,6 +136,16 @@ describe('bds-checkbox-group', () => {
     cleanup(el);
   });
 
+  it('styles the legend through the same hooks and defaults as the React CheckboxGroup', () => {
+    const react = ruleDeclarations(readSource('src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css'), '.legend');
+    expect(ruleDeclarations(BdsCheckboxGroup.styles.toString(), '.legend')).toEqual(react);
+  });
+
+  it('sizes the legend like the field labels', () => {
+    expect(ruleDeclarations(BdsCheckboxGroup.styles.toString(), '.legend')['font-size'])
+      .toBe('var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s))');
+  });
+
   it('uses medium font-weight token for the legend (not semibold)', () => {
     const legendRule = BdsCheckboxGroup.styles.toString().match(/\.legend \{[^}]*\}/)?.[0] ?? '';
     expect(legendRule).toContain('--bds-font_weight--medium');

package/src/web-components/interaction/form/bds-checkbox-group.ts

@@ -63,11 +63,12 @@ export class BdsCheckboxGroup extends LitElement {
     }
 
     .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/src/web-components/interaction/form/bds-combobox.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldLabelStyles } from './field-label';
 import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 export interface ComboboxOption {
@@ -59,11 +60,6 @@ export class BdsCombobox extends LitElement {
     }
 
     .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);
     }
 
@@ -179,6 +175,7 @@ export class BdsCombobox extends LitElement {
       color: var(--bds-color_on-bg--subtle);
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
 

package/src/web-components/interaction/form/bds-form-input.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { fieldLabelStyles } from './field-label';
 import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
@@ -53,11 +54,6 @@ export class BdsFormInput extends LitElement {
     }
 
     .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 +139,7 @@ export class BdsFormInput extends LitElement {
       display: none;
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
 

package/src/web-components/interaction/form/bds-number-input.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit';
+import { fieldLabelStyles } from './field-label';
 import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
@@ -46,11 +47,6 @@ export class BdsNumberInput extends LitElement {
     }
 
     .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);
     }
 
@@ -157,6 +153,7 @@ export class BdsNumberInput extends LitElement {
       color: var(--numberInput_stepper-color, var(--bds-color_interactive));
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
 

package/src/web-components/interaction/form/bds-radio-group.spec.ts

@@ -1,4 +1,4 @@
-import { fixture, cleanup } from '../../test/helpers';
+import { fixture, cleanup, readSource, ruleDeclarations } from '../../test/helpers';
 import { BdsRadioGroup } from './bds-radio-group';
 
 describe('bds-radio-group', () => {
@@ -111,6 +111,16 @@ describe('bds-radio-group', () => {
     cleanup(el);
   });
 
+  it('styles the legend through the same hooks and defaults as the React RadioGroup', () => {
+    const react = ruleDeclarations(readSource('src/components/interaction/form/RadioGroup/RadioGroup.module.css'), '.legend');
+    expect(ruleDeclarations(BdsRadioGroup.styles.toString(), '.legend')).toEqual(react);
+  });
+
+  it('sizes the legend like the field labels', () => {
+    expect(ruleDeclarations(BdsRadioGroup.styles.toString(), '.legend')['font-size'])
+      .toBe('var(--radioGroup_legend-font-size, var(--bds-font_size--body--s))');
+  });
+
   it('uses medium font-weight token for the legend (not semibold)', () => {
     const legendRule = BdsRadioGroup.styles.toString().match(/\.legend \{[^}]*\}/)?.[0] ?? '';
     expect(legendRule).toContain('--bds-font_weight--medium');

package/src/web-components/interaction/form/bds-radio-group.ts

@@ -50,11 +50,12 @@ export class BdsRadioGroup extends LitElement {
     }
 
     .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/src/web-components/interaction/form/bds-select.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldLabelStyles } from './field-label';
 import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 export interface SelectOption {
@@ -62,11 +63,6 @@ export class BdsSelect extends LitElement {
     }
 
     .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);
     }
 
@@ -131,6 +127,7 @@ export class BdsSelect extends LitElement {
       block-size: 100%;
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
 

package/src/web-components/interaction/form/bds-slider.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit';
+import { fieldLabelStyles } from './field-label';
 import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
@@ -60,14 +61,6 @@ export class BdsSlider extends LitElement {
       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;
@@ -157,6 +150,7 @@ export class BdsSlider extends LitElement {
       }
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
 

package/src/web-components/interaction/form/bds-textarea.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit';
+import { fieldLabelStyles } from './field-label';
 import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
@@ -49,11 +50,6 @@ export class BdsTextarea extends LitElement {
     }
 
     .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);
     }
 
@@ -108,6 +104,7 @@ export class BdsTextarea extends LitElement {
       --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
+    ${fieldLabelStyles}
     ${fieldMessageStyles}
   `;
 

package/src/web-components/interaction/form/field-label.spec.ts

@@ -0,0 +1,42 @@
+import { readSource, ruleDeclarations } from '../../test/helpers';
+import { fieldLabelStyles } from './field-label';
+import { BdsFormInput } from './bds-form-input';
+import { BdsNumberInput } from './bds-number-input';
+import { BdsCombobox } from './bds-combobox';
+import { BdsSelect } from './bds-select';
+import { BdsTextarea } from './bds-textarea';
+import { BdsSlider } from './bds-slider';
+
+const typographyProps = ['font-family', 'font-size', 'font-weight', 'color'];
+
+describe('field-label', () => {
+  it('reads every label look from a --formLabel_* hook', () => {
+    expect(ruleDeclarations(fieldLabelStyles.toString(), '.label')).toEqual({
+      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))',
+    });
+  });
+
+  it('matches the field variant of the React Label atom', () => {
+    const react = ruleDeclarations(readSource('src/components/interaction/form/atoms/Label.module.css'), '.--field');
+    const wc = ruleDeclarations(fieldLabelStyles.toString(), '.label');
+    expect(Object.keys(react).sort()).toEqual([...typographyProps].sort());
+    typographyProps.forEach(prop => expect(react[prop]).toBe(wc[prop]));
+  });
+
+  it.each([
+    ['bds-form-input', BdsFormInput],
+    ['bds-number-input', BdsNumberInput],
+    ['bds-combobox', BdsCombobox],
+    ['bds-select', BdsSelect],
+    ['bds-textarea', BdsTextarea],
+    ['bds-slider', BdsSlider],
+  ])('%s styles its label with the shared field label', (_tag, ctor) => {
+    const css = ctor.styles.toString();
+    expect(css).toContain(fieldLabelStyles.toString());
+    expect(css.replace(fieldLabelStyles.toString(), '')).not.toMatch(/\.label \{[^}]*font-(size|weight)/);
+  });
+});