@boostdev/design-system-components 2.15.0 → 2.16.0

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { resolveAvatarTone, type AvatarTone } from '../../components/ui/Avatar/avatarTone';
 
 /**
  * `<bds-avatar>` — framework-agnostic Avatar custom element.
@@ -11,6 +12,8 @@ import { LitElement, css, html, nothing } from 'lit';
  *          explicitly to mark the image as decorative (silences the accessible name).
  *   name — full name; used to compute initials and as fallback aria-label
  *   size — "small" | "medium" (default) | "large"
+ *   tone — "auto" (default, picked from `name`) | "primary" | "secondary" |
+ *          "accent-1" | "accent-2" | "accent-3"; colours the initials fallback
  *
  * @example
  * <bds-avatar src="/photo.jpg" name="Jane Doe"></bds-avatar>
@@ -53,11 +56,38 @@ export class BdsAvatar extends LitElement {
       justify-content: center;
       inline-size: 100%;
       block-size: 100%;
-      background-color: var(--avatar_bg, var(--bds-color_blue));
-      color: var(--avatar_text, var(--bds-color_on-blue));
+      background-color: var(--avatar_bg, var(--avatar_bg--variant));
+      color: var(--avatar_text, var(--avatar_text--variant));
       font-weight: var(--bds-font_weight--semibold);
     }
 
+    /* Tone slots (mirrors the React Avatar): outer --avatar_bg / --avatar_text
+       still win, each tone has its own public hook. */
+    .fallback.tone_primary {
+      --avatar_bg--variant: var(--avatar_bg--primary, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+      --avatar_text--variant: var(--avatar_text--primary, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    .fallback.tone_secondary {
+      --avatar_bg--variant: var(--avatar_bg--secondary, var(--bds-color_secondary--subtle, var(--bds-color_blue--subtle)));
+      --avatar_text--variant: var(--avatar_text--secondary, var(--bds-color_on-secondary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    .fallback.tone_accent-1 {
+      --avatar_bg--variant: var(--avatar_bg--accent-1, var(--bds-color_accent-1--subtle, var(--bds-color_green--subtle)));
+      --avatar_text--variant: var(--avatar_text--accent-1, var(--bds-color_on-accent-1--subtle, var(--bds-color_on-green--subtle)));
+    }
+
+    .fallback.tone_accent-2 {
+      --avatar_bg--variant: var(--avatar_bg--accent-2, var(--bds-color_accent-2--subtle, var(--bds-color_orange--subtle)));
+      --avatar_text--variant: var(--avatar_text--accent-2, var(--bds-color_on-accent-2--subtle, var(--bds-color_on-orange--subtle)));
+    }
+
+    .fallback.tone_accent-3 {
+      --avatar_bg--variant: var(--avatar_bg--accent-3, var(--bds-color_accent-3--subtle, var(--bds-color_blue--subtle)));
+      --avatar_text--variant: var(--avatar_text--accent-3, var(--bds-color_on-accent-3--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
     .initials {
       line-height: 1;
       user-select: none;
@@ -80,12 +110,14 @@ export class BdsAvatar extends LitElement {
     alt:  { type: String },
     name: { type: String },
     size: { type: String, reflect: true },
+    tone: { type: String, reflect: true },
   };
 
   declare src: string;
   declare alt: string;
   declare name: string;
   declare size: 'small' | 'medium' | 'large';
+  declare tone: AvatarTone;
 
   constructor() {
     super();
@@ -93,6 +125,7 @@ export class BdsAvatar extends LitElement {
     this.alt = '';
     this.name = '';
     this.size = 'medium';
+    this.tone = 'auto';
   }
 
   private get _initials(): string {
@@ -119,7 +152,7 @@ export class BdsAvatar extends LitElement {
 
     return html`
       <span
-        class="fallback"
+        class="fallback tone_${resolveAvatarTone(this.tone, this.name)}"
         role="img"
         aria-label=${this.name || 'User avatar'}
       >

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

@@ -92,4 +92,49 @@ describe('bds-notification-banner', () => {
       /--bdc_color:\s*var\(--banner_dismiss-border-color,\s*var\(--notification-banner_dismiss-border-color,\s*currentcolor\)\)/,
     );
   });
+
+  it('defaults to appearance="default"', async () => {
+    const el = await fixture('<bds-notification-banner>Message</bds-notification-banner>');
+    expect(el.getAttribute('appearance')).toBe('default');
+    cleanup(el);
+  });
+
+  it('reflects appearance="gradient"', async () => {
+    const el = await fixture('<bds-notification-banner appearance="gradient">Message</bds-notification-banner>') as BdsNotificationBanner;
+    expect(el.appearance).toBe('gradient');
+    el.appearance = 'default';
+    await el.updateComplete;
+    expect(el.getAttribute('appearance')).toBe('default');
+    cleanup(el);
+  });
+
+  it('wires the gradient hooks in the styles', () => {
+    const styles = String(BdsNotificationBanner.styles);
+    expect(styles).toContain(":host([appearance='gradient']) .banner");
+    expect(styles).toMatch(/background-image:\s*var\(--banner_gradient,\s*linear-gradient\(100deg/);
+    expect(styles).toMatch(/box-shadow:\s*var\(--banner_shadow,\s*var\(--bds-shadow_s\)\)/);
+    expect(styles).toMatch(/border-block-end:\s*var\(--banner_border-width,\s*3px\)/);
+    ['info', 'success', 'warning', 'error'].forEach(v => {
+      expect(styles).toContain(`--banner_accent--${v}`);
+    });
+  });
+
+  it('renders an aria-hidden icon wrapper around the icon slot', async () => {
+    const el = await fixture('<bds-notification-banner>Message<svg slot="icon"></svg></bds-notification-banner>');
+    const icon = el.shadowRoot!.querySelector('.icon');
+    expect(icon).not.toBeNull();
+    expect(icon!.getAttribute('aria-hidden')).toBe('true');
+    expect(icon!.querySelector('slot[name="icon"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('shows the icon wrapper only when the icon slot has content', async () => {
+    const el = await fixture('<bds-notification-banner>Message<svg slot="icon"></svg></bds-notification-banner>') as BdsNotificationBanner;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.icon')!.classList.contains('has-content')).toBe(true);
+    cleanup(el);
+    const plain = await fixture('<bds-notification-banner>Message</bds-notification-banner>') as BdsNotificationBanner;
+    expect(plain.shadowRoot!.querySelector('.icon')!.classList.contains('has-content')).toBe(false);
+    cleanup(plain);
+  });
 });

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

@@ -1,17 +1,20 @@
 import { LitElement, css, html, nothing } from 'lit';
 
 export type NotificationBannerVariant = 'info' | 'success' | 'warning' | 'error';
+export type NotificationBannerAppearance = 'default' | 'gradient';
 
 /**
  * `<bds-notification-banner>` — framework-agnostic Notification Banner custom element.
  *
  * Attributes:
  *   variant       — "info" (default) | "success" | "warning" | "error"
+ *   appearance    — "default" | "gradient" (fades the tint to the surface, accent line, shadow)
  *   dismissible   — boolean; shows a dismiss button when present
  *   dismiss-label — aria-label for the dismiss button (default: "Dismiss notification")
  *
  * Slots:
  *   (default) — banner body content
+ *   icon      — optional icon displayed before the content
  *   action    — optional action area (e.g. a button)
  *
  * Events:
@@ -46,7 +49,7 @@ export class BdsNotificationBanner extends LitElement {
       padding: var(--bds-space_s) var(--bds-space_m);
       background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
       color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
-      border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
+      border-block-end: var(--banner_border-width, 3px) solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
       inline-size: 100%;
@@ -77,6 +80,41 @@ export class BdsNotificationBanner extends LitElement {
       --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 
+    /* Gradient appearance: the variant background stays the base colour and a
+       gradient fades it to the surface. The accent line uses a per-variant
+       accent slot; --banner_border still wins over it. */
+    :host([appearance='gradient']) .banner {
+      background-image: var(--banner_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
+      box-shadow: var(--banner_shadow, var(--bds-shadow_s));
+    }
+
+    :host([appearance='gradient'][variant='info']) .banner {
+      --banner_border--variant: var(--banner_border--info, var(--banner_accent--info, var(--bds-color_on-blue--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='success']) .banner {
+      --banner_border--variant: var(--banner_border--success, var(--banner_accent--success, var(--bds-color_on-success--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='warning']) .banner {
+      --banner_border--variant: var(--banner_border--warning, var(--banner_accent--warning, var(--bds-color_warning)));
+    }
+
+    :host([appearance='gradient'][variant='error']) .banner {
+      --banner_border--variant: var(--banner_border--error, var(--banner_accent--error, var(--bds-color_error)));
+    }
+
+    /* Icon slot wrapper — hidden unless slot has content */
+    .icon {
+      display: none;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .icon.has-content {
+      display: flex;
+    }
+
     .content {
       flex: 1;
     }
@@ -131,22 +169,33 @@ export class BdsNotificationBanner extends LitElement {
 
   static properties = {
     variant:      { type: String, reflect: true },
+    appearance:   { type: String, reflect: true },
     dismissible:  { type: Boolean, reflect: true },
     dismissLabel: { type: String, attribute: 'dismiss-label' },
     _actionFilled: { state: true },
+    _iconFilled: { state: true },
   };
 
   declare variant: NotificationBannerVariant;
+  declare appearance: NotificationBannerAppearance;
   declare dismissible: boolean;
   declare dismissLabel: string;
   declare private _actionFilled: boolean;
+  declare private _iconFilled: boolean;
 
   constructor() {
     super();
     this.variant = 'info';
+    this.appearance = 'default';
     this.dismissible = false;
     this.dismissLabel = 'Dismiss notification';
     this._actionFilled = false;
+    this._iconFilled = false;
+  }
+
+  private _onIconSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this._iconFilled = slot.assignedNodes({ flatten: true }).length > 0;
   }
 
   private _onActionSlotChange(e: Event) {
@@ -170,6 +219,9 @@ export class BdsNotificationBanner extends LitElement {
         aria-live=${this._isUrgent ? 'assertive' : 'polite'}
         aria-atomic="true"
       >
+        <span class="icon ${this._iconFilled ? 'has-content' : ''}" aria-hidden="true">
+          <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        </span>
         <div class="content"><slot></slot></div>
         <div class="action ${this._actionFilled ? 'has-content' : ''}">
           <slot name="action" @slotchange=${this._onActionSlotChange}></slot>

package/src/web-components/ui/bds-section-header.spec.ts

@@ -80,9 +80,42 @@ describe('bds-section-header', () => {
     cleanup(el);
   });
 
-  it('mirrors React size-token fallbacks for the xs variant', () => {
+  it('mirrors the size table: each size has its own title and subtitle token', () => {
     const cssText = BdsSectionHeader.styles.cssText;
-    expect(cssText).toMatch(/\.header\.--xs\s+\.title\s*{[^}]*font-size:\s*var\(--sectionHeader_title-size,\s*var\(--bds-font_size--heading-2\)\)/);
-    expect(cssText).toMatch(/\.header\.--xs\s+\.subtitle\s*{[^}]*font-size:\s*var\(--sectionHeader_subtitle-size,\s*var\(--bds-font_size--body\)\)/);
+    const table: Record<string, [string, string]> = {
+      xs: ['body', 'body--s'],
+      small: ['heading-3', 'body'],
+      medium: ['heading-2', 'body'],
+      large: ['heading-1', 'heading-3'],
+    };
+    Object.entries(table).forEach(([size, [title, subtitle]]) => {
+      expect(cssText).toMatch(new RegExp(`\\.header\\.--${size}\\s+\\.title\\s*{[^}]*font-size:\\s*var\\(--sectionHeader_title-size,\\s*var\\(--bds-font_size--${title}\\)\\)`));
+      expect(cssText).toMatch(new RegExp(`\\.header\\.--${size}\\s+\\.subtitle\\s*{[^}]*font-size:\\s*var\\(--sectionHeader_subtitle-size,\\s*var\\(--bds-font_size--${subtitle}\\)\\)`));
+    });
+  });
+
+  it('uses the heading font family and muted subtitle colour by default', () => {
+    const cssText = BdsSectionHeader.styles.cssText;
+    expect(cssText).toMatch(/\.title\s*{[^}]*font-family:\s*var\(--sectionHeader_title-font-family,\s*var\(--bds-font_family--heading\)\)/);
+    expect(cssText).toMatch(/--sectionHeader_subtitle-color,\s*var\(--bds-color_on-bg--muted,\s*var\(--bds-color_grey--strong\)\)/);
+  });
+
+  it('defaults appearance to default without a gradient class', async () => {
+    const el = await fixture('<bds-section-header heading="Hello"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('.header')!.classList.contains('--gradient')).toBe(false);
+    cleanup(el);
+  });
+
+  it('adds the gradient class for appearance="gradient"', async () => {
+    const el = await fixture('<bds-section-header heading="Hello" appearance="gradient"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('.header')!.classList.contains('--gradient')).toBe(true);
+    expect(el.getAttribute('appearance')).toBe('gradient');
+    cleanup(el);
+  });
+
+  it('styles the gradient title behind @supports with a forced-colors fallback', () => {
+    const cssText = BdsSectionHeader.styles.cssText;
+    expect(cssText).toMatch(/@supports \(background-clip: text\)[^]*--sectionHeader_title-gradient/);
+    expect(cssText).toMatch(/@media \(forced-colors: active\)[^]*CanvasText/);
   });
 });

package/src/web-components/ui/bds-section-header.ts

@@ -13,6 +13,7 @@ import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
  *   subtitle  — optional subheading text
  *   alignment — "start" (default) | "center" | "end"
  *   size      — "xs" | "small" | "medium" (default) | "large"
+ *   appearance — "default" | "gradient" (gradient-filled title)
  *   title-as  — tag name for the title element (default: "h2")
  *
  * @example
@@ -45,11 +46,11 @@ export class BdsSectionHeader extends LitElement {
       /* --sectionHeader-title-color (kebab delimiter) is deprecated -- use --sectionHeader_title-color */
       color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
       margin: 0;
-      font-family: var(--bds-font_family--body);
+      font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
     }
 
     .subtitle {
-      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+      color: var(--sectionHeader_subtitle-color, var(--bds-color_on-bg--muted, var(--bds-color_grey--strong)));
       margin: 0;
       font-family: var(--bds-font_family--body);
       font-weight: var(--bds-font_weight--medium);
@@ -60,17 +61,35 @@ export class BdsSectionHeader extends LitElement {
     .header.--end    { align-items: flex-end;    text-align: end; }
 
     /* medium first -- default size, so MCP extraction picks up its fallbacks */
-    .header.--medium .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
-    .header.--medium .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); }
+    .header.--medium .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); }
+    .header.--medium .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); }
 
-    .header.--xs     .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
-    .header.--xs     .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
+    .header.--xs     .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); }
+    .header.--xs     .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body--s)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
 
-    .header.--small  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--small  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); }
     .header.--small  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
 
-    .header.--large  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--display)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); letter-spacing: var(--bds-font_tracking--tight); }
-    .header.--large  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); font-weight: var(--bds-font_weight--medium); }
+    .header.--large  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold))); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); font-weight: var(--bds-font_weight--medium); }
+
+    /* Gradient only where background-clip: text is supported; elsewhere the title keeps its normal colour */
+    @supports (background-clip: text) {
+      .header.--gradient .title {
+        inline-size: fit-content;
+        max-inline-size: 100%;
+        background-image: var(--sectionHeader_title-gradient, linear-gradient(90deg, var(--bds-color_primary--strong, var(--bds-color_blue--strong)), var(--bds-color_accent-3--strong, var(--bds-color_blue--strong))));
+        background-clip: text;
+        color: transparent;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .header.--gradient .title {
+        background-image: none;
+        color: CanvasText;
+      }
+    }
   `;
 
   static properties = {
@@ -79,6 +98,7 @@ export class BdsSectionHeader extends LitElement {
     subtitle:  { type: String },
     alignment: { type: String, reflect: true },
     size:      { type: String, reflect: true },
+    appearance: { type: String, reflect: true },
     titleAs:   { type: String, attribute: 'title-as' },
   };
 
@@ -94,6 +114,7 @@ export class BdsSectionHeader extends LitElement {
   declare subtitle: string;
   declare alignment: 'start' | 'center' | 'end';
   declare size: 'xs' | 'small' | 'medium' | 'large';
+  declare appearance: 'default' | 'gradient';
   declare titleAs: string;
 
   constructor() {
@@ -103,6 +124,7 @@ export class BdsSectionHeader extends LitElement {
     this.subtitle = '';
     this.alignment = 'start';
     this.size = 'medium';
+    this.appearance = 'default';
     this.titleAs = 'h2';
   }
 
@@ -113,7 +135,7 @@ export class BdsSectionHeader extends LitElement {
   render() {
     const tag = unsafeStatic(this.titleAs || 'h2');
     return html`
-      <div class="header --${this.alignment} --${this.size}">
+      <div class="header --${this.alignment} --${this.size}${this.appearance === 'gradient' ? ' --gradient' : ''}">
         ${staticHtml`<${tag} class="title">${this._headingText}</${tag}>`}
         ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : nothing}
       </div>

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

@@ -48,6 +48,14 @@ describe('bds-separator', () => {
     cleanup(el);
   });
 
+  it('spaces the line through --separator_spacing with content-box padding', () => {
+    const cssText = BdsSeparator.styles.cssText;
+    expect(cssText).toContain('padding-block: var(--separator_spacing, 0)');
+    expect(cssText).toContain('padding-inline: var(--separator_spacing, var(--bds-space_s))');
+    expect(cssText).toContain('background-clip: content-box');
+    expect(cssText).toMatch(/\.separator\s*\{[^}]*box-sizing:\s*content-box/);
+  });
+
   it('paints the line with the non-text member of the colour set', () => {
     const cssText = BdsSeparator.styles.cssText;
     expect(cssText).toMatch(

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

@@ -37,11 +37,18 @@ export class BdsSeparator extends LitElement {
       display: block;
       inline-size: 100%;
       block-size: var(--separator_thickness, 1px);
+      /* The padding is the space around the line; content-box keeps the line at the
+         thickness and background-clip stops the colour from painting into the padding. */
+      box-sizing: content-box;
+      padding-block: var(--separator_spacing, 0);
+      background-clip: content-box;
     }
 
     :host([orientation='vertical']) .separator {
       inline-size: var(--separator_thickness, 1px);
       block-size: 100%;
+      padding-block: 0;
+      padding-inline: var(--separator_spacing, var(--bds-space_s));
     }
   `;
 

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

@@ -97,6 +97,17 @@ describe('bds-table', () => {
     cleanup(el);
   });
 
+  it('styles header cells through the --table_header-* hooks', () => {
+    const cssText = Array.from(document.adoptedStyleSheets ?? [])
+      .flatMap((sheet) => Array.from(sheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join('\n');
+    expect(cssText).toContain('var(--table_header-font-size, var(--bds-font_size--body))');
+    expect(cssText).toContain('var(--table_header-font-weight, var(--bds-font_weight--bold))');
+    expect(cssText).toContain('var(--table_header-color, var(--bds-color_on-bg--subtle))');
+    expect(cssText).toContain('var(--table_header-bg, var(--bds-color_bg--subtle))');
+  });
+
   it('ships a --table_row-bg--hover token for slotted row hover, matching React Table', () => {
     const cssText = Array.from(document.adoptedStyleSheets ?? [])
       .flatMap((sheet) => Array.from(sheet.cssRules))

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

@@ -11,15 +11,15 @@ import { LitElement, css, html, nothing } from 'lit';
 const tableLightDomCss = `
   @layer boostdev.component {
     bds-table > table thead {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
     }
 
     bds-table > table th {
       padding: var(--bds-space_s) var(--bds-space_m);
-      font-weight: var(--bds-font_weight--semibold);
-      font-size: var(--bds-font_size--body--s);
+      font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
+      font-size: var(--table_header-font-size, var(--bds-font_size--body));
       text-align: start;
-      color: var(--bds-color_on-bg--subtle);
+      color: var(--table_header-color, var(--bds-color_on-bg--subtle));
       border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
       white-space: nowrap;
     }
@@ -37,7 +37,7 @@ const tableLightDomCss = `
     bds-table[sticky-header] > table thead th {
       position: sticky;
       inset-block-start: 0;
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
     }
 
     @media (hover: hover) and (pointer: fine) {

package/dist/web-components/chunk-QZAIRJ75.js

@@ -1,111 +0,0 @@
-import {
-  T,
-  i,
-  i2
-} from "./chunk-LGEZYFUU.js";
-
-// src/web-components/interaction/bds-dropdown-menu-item.ts
-var BdsDropdownMenuItem = class extends i2 {
-  static styles = i`
-    /* 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;
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    .item {
-      display: flex;
-      align-items: center;
-      gap: var(--bds-space_xs);
-      inline-size: 100%;
-      padding: var(--bds-space_xs) var(--bds-space_s);
-      font-size: var(--bds-font_size--body);
-      font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
-      background: none;
-      border: none;
-      text-align: start;
-      cursor: pointer;
-      border-radius: var(--bds-border_radius--xs);
-      transition: var(--bds-animation_transition);
-    }
-
-    :host([destructive]) .item {
-      color: var(--bds-color_error);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .item:hover {
-        background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
-        color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
-      }
-
-      :host([destructive]) .item:hover {
-        background-color: color-mix(in srgb, var(--bds-color_error) 10%, transparent);
-      }
-    }
-
-    .item:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
-    }
-  `;
-  static properties = {
-    value: { type: String, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    destructive: { type: Boolean, reflect: true }
-  };
-  constructor() {
-    super();
-    this.value = "";
-    this.disabled = false;
-    this.destructive = false;
-  }
-  _handleClick() {
-    if (this.disabled) return;
-    this.dispatchEvent(new CustomEvent("bds-select", {
-      detail: { value: this.value },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  _handleKeydown(e) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      this._handleClick();
-    }
-  }
-  render() {
-    return T`
-      <button
-        class="item"
-        type="button"
-        role="menuitem"
-        tabindex=${this.disabled ? "-1" : "0"}
-        ?disabled=${this.disabled}
-        @click=${this._handleClick}
-        @keydown=${this._handleKeydown}
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
-};
-customElements.define("bds-dropdown-menu-item", BdsDropdownMenuItem);
-
-export {
-  BdsDropdownMenuItem
-};