@boostdev/design-system-components 2.17.0 → 2.18.0

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-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/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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.17.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/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)` | Legend font size, the same as the labels of the other fields. |
+| `--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.module.css

@@ -10,7 +10,7 @@
 
   .legend {
     font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
-    font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--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));
     padding: 0;

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

@@ -139,6 +139,6 @@ describe('CheckboxGroup', () => {
 
   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\)\)/);
+    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)` | Legend font size, the same as the labels of the other fields. |
+| `--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.module.css

@@ -10,7 +10,7 @@
 
   .legend {
     font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
-    font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--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));
     padding: 0;

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

@@ -127,6 +127,6 @@ describe('RadioGroup', () => {
 
   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\)\)/);
+    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
 

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/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>`.