@boostdev/design-system-components 2.15.0 → 2.17.0

package/src/web-components/interaction/bds-tooltip.ts

@@ -51,13 +51,15 @@ export class BdsTooltip extends LitElement {
     .tooltip {
       position: absolute;
       z-index: var(--bds-z-index_popover);
-      padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+      padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s));
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--xs));
       background-color: var(--tooltip_bg, var(--bds-color_on-bg));
       color: var(--tooltip_text, var(--bds-color_bg));
-      font-size: var(--bds-font_size--body--s);
+      font-size: var(--tooltip_font-size, var(--bds-font_size--body--s));
       line-height: var(--bds-font_line-height--body);
-      white-space: nowrap;
+      inline-size: max-content;
+      max-inline-size: var(--tooltip_max-inline-size, 20rem);
+      white-space: normal;
       pointer-events: none;
 
       /* Hidden by default */
@@ -75,28 +77,28 @@ export class BdsTooltip extends LitElement {
 
     /* Placement: top (default) */
     .tooltip.--placement_top {
-      inset-block-end: calc(100% + var(--bds-space_xs));
+      inset-block-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     /* Placement: bottom */
     .tooltip.--placement_bottom {
-      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     /* Placement: left */
     .tooltip.--placement_left {
-      inset-inline-end: calc(100% + var(--bds-space_xs));
+      inset-inline-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-block-start: 50%;
       transform: translateY(-50%);
     }
 
     /* Placement: right */
     .tooltip.--placement_right {
-      inset-inline-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
       inset-block-start: 50%;
       transform: translateY(-50%);
     }

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsCheckbox.stories';
 
 Form-associated checkbox custom element. Participates in HTML forms via the Form-Associated Custom Elements API — native browser validation (required, etc.) works without any wrapper.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -86,6 +86,10 @@ Use `<bds-checkbox>` whenever you need a single boolean toggle that participates
 <bds-checkbox name="agree" value="yes" required>I agree to the terms</bds-checkbox>
 ```
 
+## Error state
+
+With `error`, the checkbox ring widens to `--bdc-outline_width--error` (2px) in `--bdc_color--error`. Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - The inner `<input type="checkbox">` is associated with a `<label>` via matching `id`/`for` attributes

package/src/web-components/interaction/form/BdsCheckbox.stories.tsx

@@ -36,7 +36,7 @@ function BdsCheckbox({
 const meta = {
   title: 'Web Components/Form/Checkbox',
   component: BdsCheckbox,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     checked: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsCheckboxGroup.stories';
 
 Groups related checkboxes with a shared label, hint, and error message. Renders a `<fieldset>` with a `<legend>` for accessible grouping.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -62,6 +62,10 @@ Use `<bds-checkbox-group>` when you have multiple related checkboxes that belong
 </bds-checkbox-group>
 ```
 
+## Error state
+
+With `error`, the message gets a warning icon and the slotted `<bds-checkbox>` elements get `error` too, so they show the error ring (`--bdc-outline_width--error`, `--bdc_color--error`). A checkbox marked `error` in markup keeps it when the group error clears. Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - Renders a `<fieldset>` with a `<legend>`, which is announced as a group by screen readers

package/src/web-components/interaction/form/BdsCheckboxGroup.stories.tsx

@@ -33,7 +33,7 @@ function BdsCheckboxGroup({
 const meta = {
   title: 'Web Components/Form/CheckboxGroup',
   component: BdsCheckboxGroup,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     required: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsCombobox.stories';
 
 Form-associated autocomplete combobox. Renders a text input with a filterable dropdown. Keyboard navigation: `ArrowDown`/`ArrowUp` to move focus, `Enter` to select, `Escape` to close.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -96,6 +96,10 @@ _None._
 ></bds-combobox>
 ```
 
+## 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>`.
+
 ## Accessibility
 
 - `<label>` is associated with the inner input via matching `id`/`for` attributes when `label` is set

package/src/web-components/interaction/form/BdsCombobox.stories.tsx

@@ -51,7 +51,7 @@ function BdsCombobox({
 const meta = {
   title: 'Web Components/Form/Combobox',
   component: BdsCombobox,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     disabled: { control: 'boolean' },

package/src/web-components/interaction/form/BdsFieldGroup.stories.tsx

@@ -27,7 +27,7 @@ function BdsFieldGroup({
 const meta = {
   title: 'Web Components/Form/FieldGroup',
   component: BdsFieldGroup,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: {
     layout: 'padded',
     docs: {

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsFileInput.stories';
 
 Form-associated file upload zone with drag-and-drop support. Renders a styled drop zone that opens the native file picker on click or keyboard activation.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/form/BdsFileInput.stories.tsx

@@ -30,7 +30,7 @@ function BdsFileInput({
 const meta = {
   title: 'Web Components/Form/FileInput',
   component: BdsFileInput,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     multiple: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsFormInput.stories';
 
 Form-associated text input with label, hint, error, and prefix/suffix slot support. Participates in HTML forms via the Form-Associated Custom Elements API.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -88,6 +88,13 @@ 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 |
+| `--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 |
+| `--formMessage_color--error` | `var(--bds-color_error_on-bg)` | Error message colour |
+| `--formMessage_font-weight--error` | `var(--bds-font_weight--semibold)` | Error message weight |
+| `--formMessage_color--hint` | `inherit` | Hint colour |
+| `--formMessage_font-style--hint` | `italic` | Hint font style |
 
 `--input_*` (e.g. `--input_border`, `--input_radius`, `--input_shadow`, `--input_color`, `--input_color_bg`) are deprecated aliases for the `--formInput_*` tokens above — they still work but `--formInput_*` is the documented, forward-compatible name. `--formInput_border-color` is a web-component-only legacy override for the inset ring colour (fallback `currentcolor`); prefer `--formInput_border` for adding a visible border.
 

package/src/web-components/interaction/form/BdsFormInput.stories.tsx

@@ -55,7 +55,7 @@ function BdsFormInput({
 const meta = {
   title: 'Web Components/Form/FormInput',
   component: BdsFormInput,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     type: {

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsNumberInput.stories';
 
 Form-associated number input with increment and decrement stepper buttons. Hides the browser's native spinners and provides styled stepper controls instead.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -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>
 ```
 
+## 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>`.
+
 ## Accessibility
 
 - `label` renders a shadow `<label for>` wired to the inner input's `id`, so the field always has an accessible name when a label is provided — leaving `label` unset renders no label element and no accessible name

package/src/web-components/interaction/form/BdsNumberInput.stories.tsx

@@ -39,7 +39,7 @@ function BdsNumberInput({
 const meta = {
   title: 'Web Components/Form/NumberInput',
   component: BdsNumberInput,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     disabled: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsRadio.stories';
 
 Form-associated radio button custom element. Use multiple `<bds-radio>` elements with the same `name` to form a mutually exclusive group. For a labelled group with error/hint support, use `<bds-radio-group>`.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -89,6 +89,10 @@ Use `<bds-radio>` for single-choice selection from a set of options. Always grou
 <bds-radio name="size" value="l">Large</bds-radio>
 ```
 
+## Error state
+
+With `error`, the radio ring widens to `--bdc-outline_width--error` (2px) in `--bdc_color--error`. Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - The inner `<input type="radio">` is associated with a `<label>` via matching `id`/`for` attributes

package/src/web-components/interaction/form/BdsRadio.stories.tsx

@@ -39,7 +39,7 @@ function BdsRadio({
 const meta = {
   title: 'Web Components/Form/Radio',
   component: BdsRadio,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     checked: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsRadioGroup.stories';
 
 Groups related radio buttons with a shared label and name. Renders a `<fieldset>` with a `<legend>`, and propagates the `name` attribute to all slotted `<bds-radio>` children so they form a mutually exclusive set.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -68,6 +68,10 @@ The legend uses `var(--bds-font_weight--medium)` (matching the React `RadioGroup
 </bds-radio-group>
 ```
 
+## Error state
+
+With `error`, the message gets a warning icon and the slotted `<bds-radio>` elements get `error` too, so they show the error ring (`--bdc-outline_width--error`, `--bdc_color--error`). A radio marked `error` in markup keeps it when the group error clears. Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - Renders a `<fieldset>` with a `<legend>`, which is announced as a group by screen readers

package/src/web-components/interaction/form/BdsRadioGroup.stories.tsx

@@ -36,7 +36,7 @@ function BdsRadioGroup({
 const meta = {
   title: 'Web Components/Form/RadioGroup',
   component: BdsRadioGroup,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     required: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsSegmentedControl.stories';
 
 Form-associated segmented control. Renders a group of radio buttons (or anchor links) styled as a unified segmented bar. Supports two visual variants: `outline` (sliding inset-border indicator) and `filled` (sliding filled thumb).
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx

@@ -45,7 +45,7 @@ function BdsSegmentedControl({
 const meta = {
   title: 'Web Components/Form/SegmentedControl',
   component: BdsSegmentedControl,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     variant: { control: 'select', options: ['outline', 'filled'] },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsSelect.stories';
 
 Form-associated select custom element. Wraps a native `<select>` with consistent styling. Options are passed as a JSON attribute because slotting `<option>` elements into shadow DOM is not supported cross-browser.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -82,6 +82,10 @@ When `label` is omitted, set `aria-label` on the host element (`<bds-select aria
 ></bds-select>
 ```
 
+## 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>`.
+
 ## Accessibility
 
 - Wraps a native `<select>` which has full browser and assistive technology support

package/src/web-components/interaction/form/BdsSelect.stories.tsx

@@ -54,7 +54,7 @@ function BdsSelect({
 const meta = {
   title: 'Web Components/Form/Select',
   component: BdsSelect,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     required: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsSlider.stories';
 
 Form-associated range slider. Wraps a native `<input type="range">` with a styled fill track driven by the `--slider_fill` CSS custom property, plus label/hint/error wiring matching the other form web components.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -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>
 ```
 
+## 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>`.
+
 ## Accessibility
 
 - Wraps a native `<input type="range">` which has full browser and assistive technology support

package/src/web-components/interaction/form/BdsSlider.stories.tsx

@@ -42,7 +42,7 @@ function BdsSlider({
 const meta = {
   title: 'Web Components/Form/Slider',
   component: BdsSlider,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     value: { control: 'number' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsSwitch.stories';
 
 Form-associated toggle switch. Visually a sliding toggle but semantically equivalent to a checkbox (`role="switch"`). Participates in HTML forms via the Form-Associated Custom Elements API.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -89,6 +89,10 @@ Use `<bds-switch>` for binary on/off settings where the change takes immediate e
 | `--switch_border-color--error` | `var(--bds-color_error)`               | Track border colour when `error` is set   |
 | `--switch_shadow`              | `var(--bdc-outline_shadow)`            | Track box-shadow tail                     |
 
+## Error state
+
+With `error`, the track 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>`.
+
 ## Accessibility
 
 - Uses `role="switch"` on the inner `<input type="checkbox">` for correct screen reader announcement

package/src/web-components/interaction/form/BdsSwitch.stories.tsx

@@ -39,7 +39,7 @@ function BdsSwitch({
 const meta = {
   title: 'Web Components/Form/Switch',
   component: BdsSwitch,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     checked: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsTextarea.stories';
 
 Form-associated multiline text input. Wraps a native `<textarea>` with consistent styling while participating in HTML forms via the Form-Associated Custom Elements API.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -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>
 ```
 
+## 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>`.
+
 ## Accessibility
 
 - Wraps a native `<textarea>` which has full browser and assistive technology support

package/src/web-components/interaction/form/BdsTextarea.stories.tsx

@@ -39,7 +39,7 @@ function BdsTextarea({
 const meta = {
   title: 'Web Components/Form/Textarea',
   component: BdsTextarea,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     rows: { control: 'number' },

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

@@ -137,9 +137,9 @@ describe('bds-checkbox-group', () => {
   });
 
   it('uses medium font-weight token for the legend (not semibold)', () => {
-    const styles = BdsCheckboxGroup.styles.toString();
-    expect(styles).toContain('--bds-font_weight--medium');
-    expect(styles).not.toContain('--bds-font_weight--semibold');
+    const legendRule = BdsCheckboxGroup.styles.toString().match(/\.legend \{[^}]*\}/)?.[0] ?? '';
+    expect(legendRule).toContain('--bds-font_weight--medium');
+    expect(legendRule).not.toContain('--bds-font_weight--semibold');
   });
 
   it('uses the on-bg error color token for the error message (not the raw error token)', () => {
@@ -151,4 +151,33 @@ describe('bds-checkbox-group', () => {
     const styles = BdsCheckboxGroup.styles.toString();
     expect(styles).toContain(':host([disabled])');
   });
+
+  it('shows the error icon in the message', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" error="Required field"></bds-checkbox-group>');
+    const message = el.shadowRoot!.querySelector('.message--error')!;
+    expect(message.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
+    expect(message.textContent).toContain('Required field');
+    cleanup(el);
+  });
+
+  it('propagates error to slotted bds-checkbox elements', async () => {
+    const el = await fixture(
+      '<bds-checkbox-group label="Test" error="Required field"><bds-checkbox value="a">A</bds-checkbox><bds-checkbox value="b">B</bds-checkbox></bds-checkbox-group>',
+    );
+    const children = Array.from(el.querySelectorAll('bds-checkbox'));
+    expect(children.every(child => child.hasAttribute('error'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('removes propagated error when the group error clears, keeping an individual error', async () => {
+    const el = await fixture(
+      '<bds-checkbox-group label="Test" error="Required field"><bds-checkbox value="a">A</bds-checkbox><bds-checkbox value="b" error>B</bds-checkbox></bds-checkbox-group>',
+    ) as BdsCheckboxGroup;
+    el.error = undefined;
+    await el.updateComplete;
+    const [first, second] = Array.from(el.querySelectorAll('bds-checkbox'));
+    expect(first.hasAttribute('error')).toBe(false);
+    expect(second.hasAttribute('error')).toBe(true);
+    cleanup(el);
+  });
 });

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
  * `<bds-checkbox-group>` — groups related checkboxes with a shared label.
@@ -96,19 +97,10 @@ export class BdsCheckboxGroup extends LitElement {
       gap: var(--bds-space_xs);
     }
 
+    ${fieldMessageStyles}
+
     .message {
       margin-block-start: var(--bds-space_xs);
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-    }
-
-    .message--error {
-      color: var(--bds-color_error_on-bg);
-    }
-
-    .message--hint {
-      color: var(--bds-color_on-bg--subtle);
-      font-style: italic;
     }
   `;
 
@@ -156,16 +148,40 @@ export class BdsCheckboxGroup extends LitElement {
     });
   };
 
+  /**
+   * Propagates the group's `error` to slotted `<bds-checkbox>` elements so they
+   * show the error ring. A checkbox individually marked `error` in markup keeps it.
+   */
+  private _propagateError = () => {
+    this.querySelectorAll('bds-checkbox').forEach(checkbox => {
+      const el = checkbox as HTMLElement;
+      if (this.error) {
+        if (!el.hasAttribute('error')) {
+          el.setAttribute('data-bds-group-error', '');
+        }
+        el.setAttribute('error', '');
+      } else if (el.hasAttribute('data-bds-group-error')) {
+        el.removeAttribute('error');
+        el.removeAttribute('data-bds-group-error');
+      }
+    });
+  };
+
+  private _propagateToCheckboxes = () => {
+    this._propagateDisabled();
+    this._propagateError();
+  };
+
   connectedCallback() {
     super.connectedCallback();
     // Propagate after slot content has been parsed
-    Promise.resolve().then(this._propagateDisabled);
+    Promise.resolve().then(this._propagateToCheckboxes);
   }
 
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
-    if (changed.has('disabled')) {
-      this._propagateDisabled();
+    if (changed.has('disabled') || changed.has('error')) {
+      this._propagateToCheckboxes();
     }
   }
 
@@ -183,12 +199,12 @@ export class BdsCheckboxGroup extends LitElement {
             : ''}
         </legend>
         <div class="items">
-          <slot @slotchange=${this._propagateDisabled}></slot>
+          <slot @slotchange=${this._propagateToCheckboxes}></slot>
         </div>
         ${this.error
-          ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+          ? renderFieldMessage('error', errorId, this.error)
           : this.hint
-            ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+            ? renderFieldMessage('hint', hintId, this.hint)
             : ''}
       </fieldset>
     `;

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

@@ -103,6 +103,7 @@ export class BdsCheckbox extends LitElement {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     label {

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 export interface ComboboxOption {
   value: string;
@@ -99,10 +100,12 @@ export class BdsCombobox extends LitElement {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     :host([error]) .input:focus {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .chevron {
@@ -176,20 +179,7 @@ export class BdsCombobox extends LitElement {
       color: var(--bds-color_on-bg--subtle);
     }
 
-    .message {
-      margin-block-start: var(--bds-space_xxs);
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-    }
-
-    .message--error {
-      color: var(--bds-color_error);
-    }
-
-    .message--hint {
-      color: var(--bds-color_on-bg--subtle);
-      font-style: italic;
-    }
+    ${fieldMessageStyles}
   `;
 
   static properties = {
@@ -402,9 +392,9 @@ export class BdsCombobox extends LitElement {
         ` : ''}
       </div>
       ${this.error
-        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+        ? renderFieldMessage('error', errorId, this.error)
         : this.hint
-          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+          ? renderFieldMessage('hint', hintId, this.hint)
           : ''}
     `;
   }