@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/ui/bds-icon-wrapper.ts

@@ -18,22 +18,34 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsIconWrapper extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
     }
 
+    /* --icon-wrapper-radius / --icon-wrapper-color (hyphen-delimited) are deprecated
+       aliases for --icon-wrapper_radius / --icon-wrapper_color, kept working for one major. */
     .wrapper {
       inline-size: 2em;
       block-size: 2em;
       font-size: 3em;
-      border-radius: 50%;
+      border-radius: var(--icon-wrapper_radius, var(--icon-wrapper-radius, var(--bds-border_radius--circle)));
       display: flex;
       align-items: center;
       justify-content: center;
       margin: var(--bds-space_l) auto var(--bds-space_m);
-      background: var(--icon-wrapper-color, var(--bds-color_bg));
-      color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
-      fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
+      background: var(--icon-wrapper_color, var(--icon-wrapper-color, var(--bds-color_bg)));
+      color: var(--icon-wrapper_on-color, var(--bds-color_on-bg));
+      fill: currentcolor;
       position: relative;
       transition: var(--bds-animation_transition);
     }
@@ -43,17 +55,6 @@ export class BdsIconWrapper extends LitElement {
     }
   `;
 
-  static properties = {
-    ariaHidden: { type: String, attribute: 'aria-hidden', reflect: true },
-  };
-
-  declare ariaHidden: string;
-
-  constructor() {
-    super();
-    this.ariaHidden = '';
-  }
-
   render() {
     return html`<div class="wrapper"><slot></slot></div>`;
   }

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

@@ -69,4 +69,21 @@ describe('bds-link', () => {
     expect(el.getAttribute('variant')).toBe('standalone');
     cleanup(el);
   });
+
+  it('sets the color property (not a custom property) on :hover so variant rules cannot override it by source order', () => {
+    const cssText = BdsLink.styles.cssText;
+    expect(cssText).toMatch(/\.link:hover\s*{[^}]*color:\s*var\(--link_color-hover,\s*var\(--link_color-hover--variant,\s*var\(--bds-color_blue--strong\)\)\)/);
+  });
+
+  it('has variant rules write only to the internal --link_color--variant/--link_color-hover--variant slots, not the public tokens', () => {
+    const cssText = BdsLink.styles.cssText;
+    expect(cssText).not.toMatch(/\.--variant_default\s*{[^}]*--link_color:/);
+    expect(cssText).toMatch(/\.--variant_default\s*{[^}]*--link_color--variant:\s*var\(--link_color--default,/);
+    expect(cssText).toMatch(/\.--variant_default\s*{[^}]*--link_color-hover--variant:\s*var\(--link_color-hover--default,/);
+  });
+
+  it('lets the public --link_color / --link_color-hover tokens win over per-variant defaults', () => {
+    const cssText = BdsLink.styles.cssText;
+    expect(cssText).toMatch(/\.link\s*{[^}]*color:\s*var\(--link_color,\s*var\(--link_color--variant,\s*var\(--bds-color_interactive_on-bg\)\)\)/);
+  });
 });

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

@@ -22,12 +22,27 @@ export type LinkVariant = 'default' | 'subtle' | 'standalone';
  */
 export class BdsLink extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline;
     }
 
+    /* Layered cascade (mirrors Link.module.css): public override (--link_color)
+       wins over per-variant defaults. Variants write to the inner
+       --link_color--variant slot. Resting and hover have INDEPENDENT public
+       tokens — setting --link_color on an ancestor themes only resting;
+       setting --link_color-hover themes only hover. */
     .link {
-      color: var(--link_color, var(--bds-color_interactive_on-bg));
+      color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
       text-decoration: underline;
       text-underline-offset: 0.2em;
       transition: var(--bds-animation_transition);
@@ -42,23 +57,23 @@ export class BdsLink extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .link:hover {
-        --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
+        color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
       }
     }
 
-    .link.--variant_default {
-      --link_color:       var(--bds-color_interactive_on-bg);
-      --link_color-hover: var(--bds-color_blue--strong);
+    .--variant_default {
+      --link_color--variant:       var(--link_color--default, var(--bds-color_interactive_on-bg));
+      --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
     }
 
-    .link.--variant_subtle {
-      --link_color:       var(--bds-color_on-bg);
-      --link_color-hover: var(--bds-color_interactive_on-bg);
+    .--variant_subtle {
+      --link_color--variant:       var(--link_color--subtle, var(--bds-color_on-bg));
+      --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
     }
 
-    .link.--variant_standalone {
-      --link_color:       var(--bds-color_interactive_on-bg);
-      --link_color-hover: var(--bds-color_blue--strong);
+    .--variant_standalone {
+      --link_color--variant:       var(--link_color--standalone, var(--bds-color_interactive_on-bg));
+      --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
       display: inline-flex;
       align-items: center;
       gap: var(--bds-space_xxs);

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

@@ -12,6 +12,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsLoading extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: flex;
       justify-content: center;
@@ -23,7 +33,7 @@ export class BdsLoading extends LitElement {
       block-size: 2.5em;
       border: 4px solid var(--bds-color_bg);
       border-block-start: 4px solid var(--bds-color_interactive);
-      border-radius: 50%;
+      border-radius: var(--loading_radius, var(--bds-border_radius--circle));
       animation: spin 1s linear infinite;
     }
 

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

@@ -79,4 +79,17 @@ describe('bds-notification-banner', () => {
     expect(el.getAttribute('variant')).toBe('success');
     cleanup(el);
   });
+
+  it('gives the dismiss button a 44x44px minimum touch target', () => {
+    const cssText = BdsNotificationBanner.styles.cssText;
+    expect(cssText).toMatch(/\.dismiss\s*{[^}]*min-inline-size:\s*var\(--banner_dismiss-size,\s*2\.75rem\)/);
+    expect(cssText).toMatch(/\.dismiss\s*{[^}]*min-block-size:\s*var\(--banner_dismiss-size,\s*2\.75rem\)/);
+  });
+
+  it('names the dismiss border-color hook to match the --banner_* family, keeping the old name as an alias', () => {
+    const cssText = BdsNotificationBanner.styles.cssText;
+    expect(cssText).toMatch(
+      /--bdc_color:\s*var\(--banner_dismiss-border-color,\s*var\(--notification-banner_dismiss-border-color,\s*currentcolor\)\)/,
+    );
+  });
 });

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

@@ -25,6 +25,16 @@ export type NotificationBannerVariant = 'info' | 'success' | 'warning' | 'error'
  */
 export class BdsNotificationBanner extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -88,10 +98,17 @@ export class BdsNotificationBanner extends LitElement {
       flex-shrink: 0;
       cursor: pointer;
       color: currentcolor;
+
+      /* WCAG 2.5.5: minimum 44x44px interactive area — the visible icon stays
+         1rem; the hit area grows around it via min-inline-size/min-block-size. */
+      min-inline-size: var(--banner_dismiss-size, 2.75rem);
+      min-block-size: var(--banner_dismiss-size, 2.75rem);
       border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
       border: var(--banner_dismiss-border, none);
       transition: var(--bds-animation_transition);
-      --bdc_color: var(--notification-banner_dismiss-border-color, currentcolor);
+      /* --notification-banner_dismiss-border-color kept as a deprecated alias;
+         --banner_dismiss-border-color matches the --banner_* token family. */
+      --bdc_color: var(--banner_dismiss-border-color, var(--notification-banner_dismiss-border-color, currentcolor));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 

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

@@ -64,4 +64,48 @@ describe('bds-pagination', () => {
     expect(ellipsis.length).toBeGreaterThan(0);
     cleanup(el);
   });
+
+  it('gives numbered buttons a "Page N" accessible name', async () => {
+    const el = await fixture('<bds-pagination current-page="1" total-pages="3"></bds-pagination>');
+    const buttons = el.shadowRoot!.querySelectorAll<HTMLButtonElement>('.button:not(.--nav)');
+    expect(Array.from(buttons).map(b => b.getAttribute('aria-label'))).toEqual([
+      'Page 1',
+      'Page 2',
+      'Page 3',
+    ]);
+    cleanup(el);
+  });
+
+  it('omits aria-current on non-active page buttons instead of "false"', async () => {
+    const el = await fixture('<bds-pagination current-page="2" total-pages="3"></bds-pagination>');
+    const buttons = el.shadowRoot!.querySelectorAll<HTMLButtonElement>('.button:not(.--nav)');
+    expect(buttons[0].hasAttribute('aria-current')).toBe(false);
+    expect(buttons[1].getAttribute('aria-current')).toBe('page');
+    expect(buttons[2].hasAttribute('aria-current')).toBe(false);
+    cleanup(el);
+  });
+
+  it('exposes the layered --pagination_item-* token cascade with --btn_* deprecated aliases', async () => {
+    const el = await fixture('<bds-pagination total-pages="3"></bds-pagination>');
+    const styleText = el.shadowRoot!.querySelector('style')!.textContent!;
+    expect(styleText).toContain('var(--pagination_radius, var(--bds-border_radius--full))');
+    expect(styleText).toContain('var(--pagination_item-bg, var(--btn_bg, var(--btn_bg--state, transparent)))');
+    expect(styleText).toContain(
+      'var(--pagination_item-color, var(--btn_color, var(--btn_color--state, var(--bds-color_on-bg))))',
+    );
+    expect(styleText).toContain(
+      'var(--pagination_item-border, var(--btn_border, var(--btn_border--state, var(--bds-color_bg--subtle))))',
+    );
+    expect(styleText).toContain('var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)))');
+    cleanup(el);
+  });
+
+  it('sizes page and ellipsis buttons to the 44px (2.75rem) touch target and centers the nav', async () => {
+    const el = await fixture('<bds-pagination current-page="1" total-pages="3"></bds-pagination>');
+    const styleText = el.shadowRoot!.querySelector('style')!.textContent!;
+    expect(styleText).toContain('justify-content: center');
+    expect(styleText).toMatch(/\.button\s*\{[^}]*min-inline-size: 2\.75rem;[^}]*block-size: 2\.75rem;/s);
+    expect(styleText).toMatch(/\.ellipsis\s*\{[^}]*min-inline-size: 2\.75rem;[^}]*block-size: 2\.75rem;/s);
+    cleanup(el);
+  });
 });

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

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 function getPageRange(current: number, total: number): (number | '...')[] {
   const delta = 1;
@@ -32,13 +32,23 @@ function getPageRange(current: number, total: number): (number | '...')[] {
  */
 export class BdsPagination extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
 
     .pagination {
       display: flex;
-      align-items: center;
+      justify-content: center;
     }
 
     .list {
@@ -54,20 +64,26 @@ export class BdsPagination extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-inline-size: 2rem;
-      block-size: 2rem;
+      min-inline-size: 2.75rem;
+      block-size: 2.75rem;
       padding-inline: var(--bds-space_xs);
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
+      border-radius: var(--pagination_radius, var(--bds-border_radius--full));
+
+      /* Layered cascade: public overrides (--pagination_item-bg, --pagination_item-color,
+         --pagination_item-border) win over per-state defaults. The old --btn_* names are
+         kept as deprecated aliases. Hover/active write to the inner --btn_*--state slot. */
+      background-color: var(--pagination_item-bg, var(--btn_bg, var(--btn_bg--state, transparent)));
+      color: var(--pagination_item-color, var(--btn_color, var(--btn_color--state, var(--bds-color_on-bg))));
+      --bdc_color: var(--pagination_item-border, var(--btn_border, var(--btn_border--state, var(--bds-color_bg--subtle))));
+
       border: none;
-      background: none;
-      border-radius: var(--bds-border_radius--xs);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-variant-numeric: tabular-nums;
       cursor: pointer;
-      color: var(--bds-color_on-bg);
       transition: var(--bds-animation_transition);
-      --bdc_color: var(--pagination_border-color, transparent);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bdc-outline_shadow);
+      box-sizing: border-box;
     }
 
     .button:focus-visible {
@@ -76,14 +92,16 @@ export class BdsPagination extends LitElement {
     }
 
     @media (hover: hover) and (pointer: fine) {
-      .button:not(:disabled):not(.--active):hover {
-        background-color: var(--bds-color_bg--subtle);
+      .button:not(:disabled, .--active):hover {
+        --btn_bg--state: var(--pagination_item-bg--hover, var(--btn_bg--hover, var(--bds-color_bg--subtle)));
+        --btn_color--state: var(--pagination_item-color--hover, var(--btn_color--hover, var(--bds-color_interactive_on-bg)));
       }
     }
 
     .button.--active {
-      background-color: var(--bds-color_interactive);
-      color: var(--bds-color_on-interactive);
+      --btn_bg--state: var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)));
+      --btn_color--state: var(--pagination_item-color--active, var(--btn_color--active, var(--bdc-color_on-active)));
+      --btn_border--state: var(--pagination_item-border--active, var(--btn_border--active, var(--bdc-color_active)));
       font-weight: var(--bds-font_weight--semibold);
     }
 
@@ -100,9 +118,10 @@ export class BdsPagination extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-inline-size: 2rem;
+      min-inline-size: 2.75rem;
+      block-size: 2.75rem;
       color: var(--bds-color_on-bg--subtle);
-      font-size: var(--bds-font_size--body--s);
+      font-size: var(--bds-font_size--body);
       user-select: none;
     }
 
@@ -163,7 +182,8 @@ export class BdsPagination extends LitElement {
                     <button
                       type="button"
                       class="button ${page === this.currentPage ? '--active' : ''}"
-                      aria-current=${page === this.currentPage ? 'page' : 'false'}
+                      aria-label="Page ${page}"
+                      aria-current=${page === this.currentPage ? 'page' : nothing}
                       @click=${() => this._navigate(page as number)}
                     >${page}</button>
                   </li>

package/src/web-components/ui/bds-progress-circle.spec.ts

@@ -55,4 +55,25 @@ describe('bds-progress-circle', () => {
     expect(svg!.getAttribute('aria-hidden')).toBe('true');
     cleanup(el);
   });
+
+  it('omits aria-label instead of rendering it empty when label is unset', async () => {
+    const el = await fixture('<bds-progress-circle value="50"></bds-progress-circle>');
+    const wrapper = el.shadowRoot!.querySelector('[role="progressbar"]');
+    expect(wrapper!.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+
+  it('clamps aria-valuenow to max when value exceeds max', async () => {
+    const el = await fixture('<bds-progress-circle value="150" max="100" label="Done"></bds-progress-circle>');
+    const wrapper = el.shadowRoot!.querySelector('[role="progressbar"]');
+    expect(wrapper!.getAttribute('aria-valuenow')).toBe('100');
+    cleanup(el);
+  });
+
+  it('clamps aria-valuenow to 0 for negative values', async () => {
+    const el = await fixture('<bds-progress-circle value="-10" label="Done"></bds-progress-circle>');
+    const wrapper = el.shadowRoot!.querySelector('[role="progressbar"]');
+    expect(wrapper!.getAttribute('aria-valuenow')).toBe('0');
+    cleanup(el);
+  });
 });

package/src/web-components/ui/bds-progress-circle.ts

@@ -9,7 +9,9 @@ const STROKE_WIDTH = 4;
  * Attributes:
  *   value      — current progress value (required)
  *   max        — maximum value (default: 100)
- *   label      — accessible label for the progress bar
+ *   label      — accessible label for the progress bar (required — the host
+ *                renders role="progressbar" and is nameless to assistive
+ *                technology without it)
  *   show-value — boolean; when set, displays the percentage in the centre
  *   size       — "small" | "medium" (default) | "large"
  *
@@ -18,6 +20,16 @@ const STROKE_WIDTH = 4;
  */
 export class BdsProgressCircle extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       align-items: center;
@@ -30,7 +42,7 @@ export class BdsProgressCircle extends LitElement {
     }
 
     .track {
-      stroke: var(--bds-color_bg--subtle);
+      stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
     }
 
     .fill {
@@ -47,7 +59,7 @@ export class BdsProgressCircle extends LitElement {
       line-height: 1;
     }
 
-    :host([size='small'])  .value { font-size: 0.5rem; }
+    :host([size='small'])  .value { font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s)); }
     :host([size='large'])  .value { font-size: var(--bds-font_size--body); }
 
     @media (prefers-reduced-motion: reduce) {
@@ -91,8 +103,8 @@ export class BdsProgressCircle extends LitElement {
     return html`
       <div
         role="progressbar"
-        aria-label=${this.label}
-        aria-valuenow=${this.value}
+        aria-label=${this.label || nothing}
+        aria-valuenow=${Math.min(this.max, Math.max(0, this.value))}
         aria-valuemin="0"
         aria-valuemax=${this.max}
         style="position: relative; display: inline-flex; align-items: center; justify-content: center;"

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

@@ -63,4 +63,25 @@ describe('bds-progress', () => {
     expect(el.getAttribute('size')).toBe('large');
     cleanup(el);
   });
+
+  it('omits aria-label instead of rendering it empty when label is unset', async () => {
+    const el = await fixture('<bds-progress value="50"></bds-progress>');
+    const track = el.shadowRoot!.querySelector('.track');
+    expect(track!.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+
+  it('clamps aria-valuenow to max when value exceeds max', async () => {
+    const el = await fixture('<bds-progress value="150" max="100" label="Done"></bds-progress>');
+    const track = el.shadowRoot!.querySelector('.track');
+    expect(track!.getAttribute('aria-valuenow')).toBe('100');
+    cleanup(el);
+  });
+
+  it('clamps aria-valuenow to 0 for negative values', async () => {
+    const el = await fixture('<bds-progress value="-10" label="Done"></bds-progress>');
+    const track = el.shadowRoot!.querySelector('.track');
+    expect(track!.getAttribute('aria-valuenow')).toBe('0');
+    cleanup(el);
+  });
 });

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

@@ -6,7 +6,9 @@ import { LitElement, css, html, nothing } from 'lit';
  * Attributes:
  *   value      — current progress value (required)
  *   max        — maximum value (default: 100)
- *   label      — accessible label for the progress bar
+ *   label      — accessible label for the progress bar (required — without it the
+ *                progressbar has no accessible name; aria-label is omitted, not
+ *                rendered empty, when unset)
  *   show-label — boolean; when set, displays the label and percentage above the bar
  *   size       — "small" | "medium" (default) | "large"
  *
@@ -15,6 +17,16 @@ import { LitElement, css, html, nothing } from 'lit';
  */
 export class BdsProgress extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -41,8 +53,8 @@ export class BdsProgress extends LitElement {
     .track {
       inline-size: 100%;
       block-size: var(--progress_height, var(--bds-space_xs));
-      background-color: var(--bds-color_bg--subtle);
-      border-radius: 999px;
+      background-color: var(--progress_color-track, var(--bds-color_bg--subtle));
+      border-radius: var(--progress_radius, var(--bds-border_radius--full));
       overflow: hidden;
     }
 
@@ -53,7 +65,7 @@ export class BdsProgress extends LitElement {
     .fill {
       block-size: 100%;
       background-color: var(--progress_color-active, var(--bdc-color_active));
-      border-radius: 999px;
+      border-radius: var(--progress_radius, var(--bds-border_radius--full));
       transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
@@ -93,6 +105,7 @@ export class BdsProgress extends LitElement {
 
   render() {
     const pct = this._percentage;
+    const clampedValue = Math.min(this.max, Math.max(0, this.value));
     return html`
       <div class="container">
         ${this.showLabel
@@ -106,8 +119,8 @@ export class BdsProgress extends LitElement {
         <div
           class="track"
           role="progressbar"
-          aria-label=${this.label}
-          aria-valuenow=${this.value}
+          aria-label=${this.label || nothing}
+          aria-valuenow=${clampedValue}
           aria-valuemin="0"
           aria-valuemax=${this.max}
         >

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

@@ -67,4 +67,10 @@ describe('bds-rating', () => {
     expect(filledStars.length).toBe(4);
     cleanup(el);
   });
+
+  it('exposes --rating_color and --rating_color--filled override hooks, matching the React counterpart', () => {
+    const cssText = BdsRating.styles.cssText;
+    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\)\)/);
+  });
 });

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

@@ -15,6 +15,16 @@ const STAR_PATH = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.6
  */
 export class BdsRating extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
     }
@@ -22,7 +32,7 @@ export class BdsRating extends LitElement {
     .rating {
       display: inline-flex;
       gap: var(--bds-space_xxxs);
-      color: var(--bds-color_bg);
+      color: var(--rating_color, var(--bds-color_bg));
     }
 
     .star {
@@ -31,7 +41,7 @@ export class BdsRating extends LitElement {
     }
 
     .star.--filled {
-      color: var(--bds-color_warning);
+      color: var(--rating_color--filled, var(--bds-color_warning));
     }
   `;