@boostdev/design-system-components 2.17.0 → 2.18.0

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)/);
+  });
+});

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

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+
+/**
+ * Shared look for the label above a form control. Every `bds-*` field with a
+ * `label` attribute spreads `fieldLabelStyles` into its own styles, so the
+ * controls cannot drift. The React `Label` atom (field variant) reads the same
+ * hooks with the same defaults.
+ *
+ * Hooks: --formLabel_font-family, --formLabel_font-size, --formLabel_font-weight,
+ * --formLabel_color.
+ */
+export const fieldLabelStyles = css`
+  .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));
+  }
+`;

package/src/web-components/test/helpers.ts

@@ -1,3 +1,6 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
 /** Render an HTML string, upgrade the custom element, and await first paint. */
 export async function fixture(html: string): Promise<HTMLElement> {
   const template = document.createElement('template');
@@ -20,3 +23,20 @@ export function makeCommandEvent(command: string): Event {
   Object.defineProperty(event, 'source', { value: null, configurable: true });
   return event;
 }
+
+/**
+ * Declarations of the first `selector { ... }` rule in a stylesheet, keyed by property.
+ * Used to compare a web component's styles with its React counterpart's CSS module.
+ */
+export function ruleDeclarations(css: string, selector: string): Record<string, string> {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const body = css.match(new RegExp(`(?:^|[\\s,}])${escaped}\\s*\\{([^}]*)\\}`))?.[1] ?? '';
+  return Object.fromEntries(
+    [...body.matchAll(/([\w-]+)\s*:\s*([^;]+);/g)].map(([, prop, value]) => [prop, value.replace(/\s+/g, ' ').trim()]),
+  );
+}
+
+/** Reads a source file relative to the repo root. */
+export function readSource(path: string): string {
+  return readFileSync(resolve(process.cwd(), path), 'utf8');
+}