@boostdev/design-system-components 2.16.0 → 2.17.0

package/dist/web-components/index.js

@@ -109,7 +109,7 @@ import {
 } from "./chunk-7ZOJ7N4E.js";
 import {
   BdsRating
-} from "./chunk-SYNLFKD3.js";
+} from "./chunk-3LQKFSMR.js";
 import {
   BdsSectionHeader
 } from "./chunk-DGOCPKHI.js";
@@ -158,17 +158,17 @@ import {
 } from "./chunk-AIBOHNDU.js";
 import {
   BdsNotificationBanner
-} from "./chunk-2MJTO2IW.js";
+} from "./chunk-WWWJCSXN.js";
 import "./chunk-7VXRMCAL.js";
 import {
   BdsAlert
-} from "./chunk-RZH5IVB5.js";
+} from "./chunk-5ATTKUCP.js";
 import {
   BdsAvatar
 } from "./chunk-IKAJLROF.js";
 import {
   BdsBadge
-} from "./chunk-BPYKZVDK.js";
+} from "./chunk-SJLMW2VR.js";
 import {
   BdsBreadcrumb
 } from "./chunk-62NK3ZSC.js";

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

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

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

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

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

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

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

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

package/package.json

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

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

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

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

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

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

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

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

@@ -46,7 +46,7 @@ All public override tokens. Set on the CheckboxGroup or any ancestor; they casca
 | `--checkboxGroup_items-gap` | `var(--bds-space_xs)` | Gap between the child checkboxes. |
 | `--checkboxGroup_legend-color` | `var(--bds-color_on-bg)` | Legend text colour. |
 | `--checkboxGroup_legend-font-family` | `var(--bds-font_family--body)` | Legend font family. |
-| `--checkboxGroup_legend-font-size` | `var(--bds-font_size--body--s)` | Legend font size. |
+| `--checkboxGroup_legend-font-size` | `var(--bds-font_size--body)` | 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--s));
+    font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body));
     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

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

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

@@ -46,7 +46,7 @@ All public override tokens. Set on the RadioGroup or any ancestor; they cascade.
 | `--radioGroup_items-gap` | `var(--bds-space_xs)` | Gap between the child radios. |
 | `--radioGroup_legend-color` | `var(--bds-color_on-bg)` | Legend text colour. |
 | `--radioGroup_legend-font-family` | `var(--bds-font_family--body)` | Legend font family. |
-| `--radioGroup_legend-font-size` | `var(--bds-font_size--body--s)` | Legend font size. |
+| `--radioGroup_legend-font-size` | `var(--bds-font_size--body)` | 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--s));
+    font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body));
     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

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

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/ui/BdsAlert.mdx

@@ -67,6 +67,7 @@ import '@boostdev/design-system-components/web-components';
 | Property | Default | Description |
 |----------|---------|-------------|
 | `--alert_bg` / `--alert_text` / `--alert_border` | per variant | Colours for all variants. Per-variant forms: `--alert_bg--info`, `--alert_text--info`, `--alert_border--info` (and `success`, `warning`, `error`). |
+| `--alert_bg--error` / `--alert_text--error` / `--alert_border--error` | `var(--bds-color_error--subtle)` / `var(--bds-color_on-error--subtle)` / `var(--bds-color_error)` | Error variant colours, the subtle pair like the other variants |
 | `--alert_border-width` | `var(--bds-space_s)` (`3px` with `appearance="gradient"`) | Width of the inline-start accent line |
 | `--alert_gradient` | `linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%)` | Gradient over the variant background, `appearance="gradient"` only |
 | `--alert_shadow` | `var(--bds-shadow_s)` | Box shadow, `appearance="gradient"` only |

package/src/web-components/ui/BdsBadge.mdx

@@ -57,6 +57,7 @@ import '@boostdev/design-system-components/web-components';
 |----------|-------------|
 | `--badge_bg` | Badge background colour |
 | `--badge_text` | Badge text colour |
+| `--badge_bg--secondary` / `--badge_text--secondary` | `secondary` variant colours (defaults `--bds-color_grey`, `--bds-color_on-grey`). The other variants have the same pair: `--badge_bg--{variant}` / `--badge_text--{variant}`. |
 | `--badge_font-size` | Font size |
 | `--badge_radius` | Border radius |
 

package/src/web-components/ui/BdsNotificationBanner.mdx

@@ -78,7 +78,7 @@ import '@boostdev/design-system-components/web-components';
 | `--banner_bg--info` / `--banner_text--info` / `--banner_border--info` | Info variant colours |
 | `--banner_bg--success` / `--banner_text--success` / `--banner_border--success` | Success variant colours |
 | `--banner_bg--warning` / `--banner_text--warning` / `--banner_border--warning` | Warning variant colours |
-| `--banner_bg--error` / `--banner_text--error` / `--banner_border--error` | Error variant colours |
+| `--banner_bg--error` / `--banner_text--error` / `--banner_border--error` | Error variant colours (defaults `--bds-color_error--subtle`, `--bds-color_on-error--subtle`, `--bds-color_error`) |
 | `--banner_border-width` | Width of the block-end accent line (default `3px`) |
 | `--banner_gradient` | Gradient over the variant background, `appearance="gradient"` only (default `linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%)`) |
 | `--banner_shadow` | Box shadow, `appearance="gradient"` only (default `var(--bds-shadow_s)`) |

package/src/web-components/ui/BdsRating.mdx

@@ -59,8 +59,11 @@ import '@boostdev/design-system-components/web-components';
 
 | Variable | Default | Description |
 |----------|---------|--------------|
-| `--rating_color` | `var(--bds-color_bg)` | Colour of unfilled stars |
+| `--rating_color` | `var(--bds-color_bg)` | Fill of unfilled stars |
 | `--rating_color--filled` | `var(--bds-color_warning)` | Colour of filled stars |
+| `--rating_stroke-color` | `var(--bds-color_on-bg--as-surface)` | Outline of unfilled stars, a non-text mark (falls back to `--bds-color_on-bg--border`, then `--bds-color_on-bg`, on foundations before 2.3.0) |
+| `--rating_stroke-color--filled` | `currentcolor` | Outline of filled stars, the filled colour by default so both kinds keep the same size |
+| `--rating_stroke-width` | `var(--bdc-outline_width)` | Outline width, in the star's 24-unit viewBox |
 
 ## Accessibility
 

package/src/web-components/ui/bds-alert.spec.ts

@@ -148,4 +148,11 @@ describe('bds-alert', () => {
       expect(styles).toContain(`--alert_accent--${v}`);
     });
   });
+
+  it('paints the error variant with the error subtle pair, matching the React counterpart', () => {
+    const styles = String(BdsAlert.styles);
+    expect(styles).toMatch(/--alert_bg--variant:\s*var\(--alert_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(styles).toMatch(/--alert_text--variant:\s*var\(--alert_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(styles).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

package/src/web-components/ui/bds-alert.ts

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

package/src/web-components/ui/bds-badge.spec.ts

@@ -53,4 +53,10 @@ describe('bds-badge', () => {
     const cssText = BdsBadge.styles.cssText;
     expect(cssText).toMatch(/border-radius:\s*var\(--badge_radius,\s*var\(--bds-border_radius--full\)\)/);
   });
+
+  it('gives the secondary variant a solid neutral surface, matching the React counterpart', () => {
+    const cssText = BdsBadge.styles.cssText;
+    expect(cssText).toMatch(/:host\(\[variant='secondary'\]\) \.badge \{[^}]*--badge_bg--variant:\s*var\(--badge_bg--secondary,\s*var\(--bds-color_grey\)\)/);
+    expect(cssText).toMatch(/:host\(\[variant='secondary'\]\) \.badge \{[^}]*--badge_text--variant:\s*var\(--badge_text--secondary,\s*var\(--bds-color_on-grey\)\)/);
+  });
 });

package/src/web-components/ui/bds-badge.ts

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

package/src/web-components/ui/bds-notification-banner.spec.ts

@@ -137,4 +137,11 @@ describe('bds-notification-banner', () => {
     expect(plain.shadowRoot!.querySelector('.icon')!.classList.contains('has-content')).toBe(false);
     cleanup(plain);
   });
+
+  it('paints the error variant with the error subtle pair, matching the React counterpart', () => {
+    const styles = String(BdsNotificationBanner.styles);
+    expect(styles).toMatch(/--banner_bg--variant:\s*var\(--banner_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(styles).toMatch(/--banner_text--variant:\s*var\(--banner_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(styles).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

package/src/web-components/ui/bds-notification-banner.ts

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

package/src/web-components/ui/bds-rating.spec.ts

@@ -73,4 +73,11 @@ describe('bds-rating', () => {
     expect(cssText).toMatch(/color:\s*var\(--rating_color,\s*var\(--bds-color_bg\)\)/);
     expect(cssText).toMatch(/color:\s*var\(--rating_color--filled,\s*var\(--bds-color_warning\)\)/);
   });
+
+  it('outlines empty stars through the same stroke hooks as the React counterpart', () => {
+    const cssText = BdsRating.styles.cssText;
+    expect(cssText).toMatch(/\.star \{[^}]*stroke:\s*var\(--rating_stroke-color,\s*var\(--bds-color_on-bg--as-surface,\s*var\(--bds-color_on-bg--border,\s*var\(--bds-color_on-bg\)\)\)\)/);
+    expect(cssText).toMatch(/\.star \{[^}]*stroke-width:\s*var\(--rating_stroke-width,\s*var\(--bdc-outline_width\)\)/);
+    expect(cssText).toMatch(/\.star\.--filled \{[^}]*stroke:\s*var\(--rating_stroke-color--filled,\s*currentcolor\)/);
+  });
 });

package/src/web-components/ui/bds-rating.ts

@@ -35,13 +35,19 @@ export class BdsRating extends LitElement {
       color: var(--rating_color, var(--bds-color_bg));
     }
 
+    /* Empty stars are outlined, filled stars solid, matching the React
+       counterpart: shape tells them apart, not only hue. */
     .star {
       inline-size: 1.5em;
       block-size: 1.5em;
+      stroke: var(--rating_stroke-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
+      stroke-width: var(--rating_stroke-width, var(--bdc-outline_width));
+      stroke-linejoin: round;
     }
 
     .star.--filled {
       color: var(--rating_color--filled, var(--bds-color_warning));
+      stroke: var(--rating_stroke-color--filled, currentcolor);
     }
   `;