@boostdev/design-system-components 2.15.0 → 2.17.0

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);
     }
   `;
 

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
-};