@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -7,27 +7,39 @@ describe('bds-section-header', () => {
   });
 
   it('renders an <h2> title by default', async () => {
-    const el = await fixture('<bds-section-header title="Hello"></bds-section-header>');
+    const el = await fixture('<bds-section-header heading="Hello"></bds-section-header>');
     const h2 = el.shadowRoot!.querySelector('h2');
     expect(h2).not.toBeNull();
     expect(h2!.textContent).toBe('Hello');
     cleanup(el);
   });
 
-  it('renders the title text', async () => {
-    const el = await fixture('<bds-section-header title="Welcome"></bds-section-header>');
+  it('renders the heading text', async () => {
+    const el = await fixture('<bds-section-header heading="Welcome"></bds-section-header>');
     expect(el.shadowRoot!.querySelector('.title')!.textContent).toBe('Welcome');
     cleanup(el);
   });
 
+  it('falls back to the deprecated title attribute when heading is unset', async () => {
+    const el = await fixture('<bds-section-header title="Legacy heading"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('.title')!.textContent).toBe('Legacy heading');
+    cleanup(el);
+  });
+
+  it('prefers heading over the deprecated title attribute when both are set', async () => {
+    const el = await fixture('<bds-section-header heading="New" title="Old"></bds-section-header>');
+    expect(el.shadowRoot!.querySelector('.title')!.textContent).toBe('New');
+    cleanup(el);
+  });
+
   it('does not render subtitle when not set', async () => {
-    const el = await fixture('<bds-section-header title="Hello"></bds-section-header>');
+    const el = await fixture('<bds-section-header heading="Hello"></bds-section-header>');
     expect(el.shadowRoot!.querySelector('.subtitle')).toBeNull();
     cleanup(el);
   });
 
   it('renders subtitle when set', async () => {
-    const el = await fixture('<bds-section-header title="Hello" subtitle="Subtitle text"></bds-section-header>');
+    const el = await fixture('<bds-section-header heading="Hello" subtitle="Subtitle text"></bds-section-header>');
     const subtitle = el.shadowRoot!.querySelector('.subtitle');
     expect(subtitle).not.toBeNull();
     expect(subtitle!.textContent).toBe('Subtitle text');
@@ -35,23 +47,42 @@ describe('bds-section-header', () => {
   });
 
   it('uses title-as to override the title element', async () => {
-    const el = await fixture('<bds-section-header title="Hello" title-as="h1"></bds-section-header>');
+    const el = await fixture('<bds-section-header heading="Hello" title-as="h1"></bds-section-header>');
     expect(el.shadowRoot!.querySelector('h1')).not.toBeNull();
     expect(el.shadowRoot!.querySelector('h2')).toBeNull();
     cleanup(el);
   });
 
   it('applies alignment class', async () => {
-    const el = await fixture('<bds-section-header title="Hello" alignment="center"></bds-section-header>');
+    const el = await fixture('<bds-section-header heading="Hello" alignment="center"></bds-section-header>');
     const header = el.shadowRoot!.querySelector('.header');
     expect(header!.classList.contains('--center')).toBe(true);
     cleanup(el);
   });
 
   it('applies size class', async () => {
-    const el = await fixture('<bds-section-header title="Hello" size="large"></bds-section-header>');
+    const el = await fixture('<bds-section-header heading="Hello" size="large"></bds-section-header>');
     const header = el.shadowRoot!.querySelector('.header');
     expect(header!.classList.contains('--large')).toBe(true);
     cleanup(el);
   });
+
+  it('applies the xs size class (previously unstyled)', async () => {
+    const el = await fixture('<bds-section-header heading="Hello" size="xs"></bds-section-header>');
+    const header = el.shadowRoot!.querySelector('.header');
+    expect(header!.classList.contains('--xs')).toBe(true);
+    cleanup(el);
+  });
+
+  it('spans the full grid row via --bds-grid_span-100', async () => {
+    const el = await fixture('<bds-section-header heading="Hello"></bds-section-header>');
+    expect(BdsSectionHeader.styles.cssText).toMatch(/:host\s*{[^}]*grid-column:\s*var\(--bds-grid_span-100\)/);
+    cleanup(el);
+  });
+
+  it('mirrors React size-token fallbacks for the xs variant', () => {
+    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\)\)/);
+  });
 });

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

@@ -5,29 +5,45 @@ import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
  * `<bds-section-header>` — framework-agnostic Section Header custom element.
  *
  * Attributes:
- *   title     — heading text (required)
+ *   heading   — heading text (required)
+ *   title     — deprecated alias for `heading`. Collides with the global HTML
+ *               `title` attribute, which triggers a native browser tooltip on
+ *               hover — use `heading` instead. Kept working for backwards
+ *               compatibility; will be removed in a later major.
  *   subtitle  — optional subheading text
  *   alignment — "start" (default) | "center" | "end"
- *   size      — "small" | "medium" (default) | "large"
+ *   size      — "xs" | "small" | "medium" (default) | "large"
  *   title-as  — tag name for the title element (default: "h2")
  *
  * @example
- * <bds-section-header title="Our Products" subtitle="Browse the full range" size="large"></bds-section-header>
+ * <bds-section-header heading="Our Products" subtitle="Browse the full range" size="large"></bds-section-header>
  */
 export class BdsSectionHeader 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;
+      grid-column: var(--bds-grid_span-100);
     }
 
     .header {
       display: flex;
       flex-direction: column;
-      gap: var(--bds-space_m);
+      gap: var(--sectionHeader_gap, var(--bds-space_m));
     }
 
     .title {
-      color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
+      /* --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);
     }
@@ -43,17 +59,22 @@ export class BdsSectionHeader extends LitElement {
     .header.--center { align-items: center;      text-align: center; }
     .header.--end    { align-items: flex-end;    text-align: end; }
 
-    .header.--small  .title { font-size: var(--bds-font_size--heading-1); line-height: var(--bds-font_line-height--heading); font-weight: var(--bds-font_weight--bold); }
-    .header.--small  .subtitle { font-size: var(--bds-font_size--body); line-height: 1.4; }
+    /* 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.--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.--medium .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); }
-    .header.--medium .subtitle { font-size: var(--bds-font_size--heading-3); line-height: 1.3; }
+    .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  .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(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); letter-spacing: var(--bds-font_tracking--tight); }
-    .header.--large  .subtitle { font-size: var(--bds-font_size--heading-2); line-height: 1.3; font-weight: var(--bds-font_weight--medium); }
+    .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); }
   `;
 
   static properties = {
+    heading:   { type: String },
     title:     { type: String },
     subtitle:  { type: String },
     alignment: { type: String, reflect: true },
@@ -61,14 +82,23 @@ export class BdsSectionHeader extends LitElement {
     titleAs:   { type: String, attribute: 'title-as' },
   };
 
+  // `declare` annotates the type without emitting a class field initializer
+  // that would shadow Lit's reactive accessors on the prototype.
+  declare heading: string;
+  /**
+   * @deprecated Use `heading` instead. Sharing the name with the global HTML
+   * `title` attribute makes the browser show a native tooltip on hover.
+   * Still read as a fallback for the heading text when `heading` is unset.
+   */
   declare title: string;
   declare subtitle: string;
   declare alignment: 'start' | 'center' | 'end';
-  declare size: 'small' | 'medium' | 'large';
+  declare size: 'xs' | 'small' | 'medium' | 'large';
   declare titleAs: string;
 
   constructor() {
     super();
+    this.heading = '';
     this.title = '';
     this.subtitle = '';
     this.alignment = 'start';
@@ -76,11 +106,15 @@ export class BdsSectionHeader extends LitElement {
     this.titleAs = 'h2';
   }
 
+  private get _headingText() {
+    return this.heading || this.title;
+  }
+
   render() {
     const tag = unsafeStatic(this.titleAs || 'h2');
     return html`
       <div class="header --${this.alignment} --${this.size}">
-        ${staticHtml`<${tag} class="title">${this.title}</${tag}>`}
+        ${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.ts

@@ -12,6 +12,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsSeparator 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;
     }

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

@@ -10,6 +10,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsSkeleton 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;
     }

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

@@ -42,4 +42,67 @@ describe('bds-table', () => {
     expect(el.querySelector('table')).not.toBeNull();
     cleanup(el);
   });
+
+  it('adopts a document-level stylesheet styling slotted thead/th/td descendants', () => {
+    // ::slotted() only matches the directly-slotted <table>, never its thead/th/td
+    // descendants, so those must be styled from a document-level adopted stylesheet.
+    const cssText = Array.from(document.adoptedStyleSheets ?? [])
+      .flatMap((sheet) => Array.from(sheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join('\n');
+    expect(cssText).toContain('bds-table > table thead');
+    expect(cssText).toContain('bds-table > table th');
+    expect(cssText).toContain('bds-table > table td');
+  });
+
+  it('ships a sticky-header rule targeting slotted thead th', () => {
+    const cssText = Array.from(document.adoptedStyleSheets ?? [])
+      .flatMap((sheet) => Array.from(sheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join('\n');
+    expect(cssText).toContain('bds-table[sticky-header] > table thead th');
+    expect(cssText).toContain('position: sticky');
+  });
+
+  it('wrapper is keyboard-focusable so it can be scrolled without a mouse', async () => {
+    const el = await fixture('<bds-table></bds-table>');
+    const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+    expect(wrapper.getAttribute('tabindex')).toBe('0');
+    cleanup(el);
+  });
+
+  it('wrapper has no region role when no aria-label is provided', async () => {
+    const el = await fixture('<bds-table></bds-table>');
+    const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+    expect(wrapper.getAttribute('role')).toBeNull();
+    expect(wrapper.getAttribute('aria-label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('forwards aria-label onto the wrapper as an accessible region name', async () => {
+    const el = await fixture('<bds-table aria-label="Team members"></bds-table>') as BdsTable;
+    expect(el.ariaLabel).toBe('Team members');
+    const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+    expect(wrapper.getAttribute('role')).toBe('region');
+    expect(wrapper.getAttribute('aria-label')).toBe('Team members');
+    cleanup(el);
+  });
+
+  it('wrapper radius resolves through the shared --bdc-outline_radius token', async () => {
+    const el = await fixture('<bds-table></bds-table>');
+    // jsdom in this project falls back to a <style> tag in the shadow root (no adoptedStyleSheets
+    // support on Document.prototype), so the compiled CSS text is readable directly.
+    const shadowStyle = el.shadowRoot!.querySelector('style')!.textContent!;
+    expect(shadowStyle).toContain('border-radius: var(--table_radius, var(--bdc-outline_radius))');
+    cleanup(el);
+  });
+
+  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))
+      .map((rule) => rule.cssText)
+      .join('\n');
+    expect(cssText).toContain('bds-table > table tbody tr:hover');
+    expect(cssText).toContain('var(--table_row-bg--hover, var(--bds-color_bg--subtle))');
+  });
 });

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

@@ -1,19 +1,81 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
+
+/**
+ * `::slotted()` only matches the node placed directly into the slot — the `<table>` itself —
+ * never its descendants (`<thead>`, `<th>`, `<td>`, …). Those have to be styled from outside
+ * the shadow root, so this stylesheet is adopted onto the document once (guarded so re-imports
+ * / hot-reload don't duplicate it) and targets the slotted table via light-DOM selectors scoped
+ * to `bds-table > table`. Keep these rules in sync with `src/components/ui/Table/Table.module.css`
+ * (the React counterpart is the token source of truth).
+ */
+const tableLightDomCss = `
+  @layer boostdev.component {
+    bds-table > table thead {
+      background-color: 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);
+      text-align: start;
+      color: var(--bds-color_on-bg--subtle);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      white-space: nowrap;
+    }
+
+    bds-table > table td {
+      padding: var(--bds-space_s) var(--bds-space_m);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      vertical-align: middle;
+    }
+
+    bds-table > table tr:last-child td {
+      border-block-end: none;
+    }
+
+    bds-table[sticky-header] > table thead th {
+      position: sticky;
+      inset-block-start: 0;
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      bds-table > table tbody tr:hover {
+        background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
+      }
+    }
+  }
+`;
+
+if (!('__bdsTableStylesInjected' in document)) {
+  Object.defineProperty(document, '__bdsTableStylesInjected', { value: true });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(tableLightDomCss);
+  // Some environments (older Safari, certain jsdom versions) report `document.adoptedStyleSheets`
+  // as `undefined` until it has been assigned at least once — default to an empty array so the
+  // spread never throws.
+  document.adoptedStyleSheets = [...(document.adoptedStyleSheets ?? []), sheet];
+}
 
 /**
  * `<bds-table>` — scrollable table wrapper with design-system styles.
  *
  * Slotted content should be a standard `<table>` with `<thead>` / `<tbody>`.
- * Design-token styles are applied to the table and its cells via `::slotted`.
+ * The `<table>` itself is styled via `::slotted(table)` inside the shadow root; its
+ * `thead`/`th`/`td` descendants are styled from a document-level stylesheet (adopted once by
+ * this module) scoped to `bds-table > table …`, since `::slotted()` cannot reach descendants
+ * of the slotted node.
  *
  * Attributes:
  *   sticky-header — freezes `<thead>` at the top when the table overflows vertically
+ *   aria-label    — accessible name for the scrollable region (also enables `role="region"`)
  *
  * Slots:
  *   (default) — a `<table>` element
  *
  * @example
- * <bds-table sticky-header>
+ * <bds-table sticky-header aria-label="Team members">
  *   <table>
  *     <thead><tr><th>Name</th><th>Value</th></tr></thead>
  *     <tbody><tr><td>Alpha</td><td>1</td></tr></tbody>
@@ -22,6 +84,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsTable 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;
     }
@@ -30,11 +102,17 @@ export class BdsTable extends LitElement {
       overflow-inline: auto;
       -webkit-overflow-scrolling: touch;
       border: var(--table_border, none);
-      border-radius: var(--table_radius, var(--bds-border_radius--s));
       --bdc_color: var(--bds-color_bg--subtle);
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--table_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
+    .wrapper:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
     ::slotted(table) {
       inline-size: 100%;
       border-collapse: collapse;
@@ -42,47 +120,29 @@ export class BdsTable extends LitElement {
       font-family: var(--bds-font_family--body);
       color: var(--bds-color_on-bg);
     }
-
-    ::slotted(thead) {
-      background-color: var(--bds-color_bg--subtle);
-    }
-
-    ::slotted(th) {
-      padding: var(--bds-space_xs) var(--bds-space_s);
-      font-weight: var(--bds-font_weight--semibold);
-      font-size: var(--bds-font_size--body--s);
-      text-align: start;
-      color: var(--bds-color_on-bg--subtle);
-      border-block-end: 1px solid var(--bds-color_bg--subtle);
-      white-space: nowrap;
-    }
-
-    ::slotted(td) {
-      padding: var(--bds-space_xs) var(--bds-space_s);
-      border-block-end: 1px solid var(--bds-color_bg--subtle);
-      vertical-align: middle;
-    }
-
-    ::slotted(tr:last-child td) {
-      border-block-end: none;
-    }
   `;
 
   static properties = {
     stickyHeader: { type: Boolean, attribute: 'sticky-header', reflect: true },
+    ariaLabel:    { type: String, attribute: 'aria-label' },
   };
 
   declare stickyHeader: boolean;
+  declare ariaLabel: string | null;
 
   constructor() {
     super();
     this.stickyHeader = false;
+    this.ariaLabel = null;
   }
 
   render() {
     return html`
       <div
         class="wrapper"
+        tabindex="0"
+        role=${this.ariaLabel ? 'region' : nothing}
+        aria-label=${this.ariaLabel ?? nothing}
         style=${this.stickyHeader ? 'max-block-size: 100%; overflow-block: auto;' : ''}
       >
         <slot></slot>

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

@@ -73,4 +73,51 @@ describe('bds-typography', () => {
     expect(el.shadowRoot!.querySelector('h2')).not.toBeNull();
     cleanup(el);
   });
+
+  it('binds the variant into the class attribute as plain text, not parsed as markup (no unsafeStatic injection)', async () => {
+    const el = await fixture('<bds-typography>Text</bds-typography>') as BdsTypography;
+    // Simulate an untrusted/attacker-controlled value bypassing the TypographyVariant
+    // union at runtime (e.g. via direct property assignment or a compromised upstream value).
+    const malicious = 'h1"><img src="x">';
+    (el as unknown as { variant: string }).variant = malicious;
+    await el.updateComplete;
+    // With unsafeStatic removed, the value is set via a normal (safe) attribute binding —
+    // it must never be parsed as markup, so no <img> element should appear in the shadow DOM.
+    expect(el.shadowRoot!.querySelector('img')).toBeNull();
+    const p = el.shadowRoot!.querySelector('p');
+    expect(p).not.toBeNull();
+    expect(p!.getAttribute('class')).toBe(`typography --${malicious}`);
+    cleanup(el);
+  });
+
+  it('reflects the component property to an attribute so :host([component]) selectors match', async () => {
+    const el = await fixture('<bds-typography>Text</bds-typography>') as BdsTypography;
+    el.component = 'span';
+    await el.updateComplete;
+    expect(el.getAttribute('component')).toBe('span');
+    cleanup(el);
+  });
+
+  it('reflects component="span" so it is present as an attribute for :host([component]) matching', async () => {
+    const el = await fixture(
+      '<bds-typography component="span">Text</bds-typography>',
+    ) as BdsTypography;
+    await el.updateComplete;
+    expect(el.getAttribute('component')).toBe('span');
+    cleanup(el);
+  });
+
+  // jsdom's CSS engine does not reliably evaluate :host([attr=value]) selectors
+  // via getComputedStyle (see other bds-*.spec.ts files, e.g. bds-drawer's
+  // :host([side='left']) is likewise only verified structurally). Assert the
+  // rule exists in source instead of relying on computed style in tests.
+  it('defines a :host([component="span"]) rule that switches the host to display:inline', () => {
+    const cssText = BdsTypography.styles.cssText;
+    expect(cssText).toMatch(/:host\(\[component=['"]span['"]\]\)\s*{[^}]*display:\s*inline/);
+  });
+
+  it('defines the default :host rule as display:block', () => {
+    const cssText = BdsTypography.styles.cssText;
+    expect(cssText).toMatch(/:host\s*{[^}]*display:\s*block/);
+  });
 });

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

@@ -29,10 +29,26 @@ const VARIANT_TAG: Record<TypographyVariant, string> = {
  */
 export class BdsTypography 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;
     }
 
+    /* component="span" (or any inline tag) should flow inline, matching the
+       React counterpart which has no host wrapper to force block layout. */
+    :host([component='span']) {
+      display: inline;
+    }
+
     .typography {
       margin: 0;
       font-family: var(--bds-font_family--body);
@@ -41,39 +57,39 @@ export class BdsTypography extends LitElement {
 
     .typography.--h1 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-1);
+      font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
       font-weight: var(--bds-font_weight--bold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--h2 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-2);
+      font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
       font-weight: var(--bds-font_weight--semibold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--h3 {
       font-family: var(--bds-font_family--heading);
-      font-size: var(--bds-font_size--heading-3);
+      font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
       font-weight: var(--bds-font_weight--semibold);
       line-height: var(--bds-font_line-height--heading);
     }
 
     .typography.--body {
-      font-size: var(--bds-font_size--body);
+      font-size: var(--typography_font-size--body, var(--bds-font_size--body));
       line-height: var(--bds-font_line-height--body);
     }
 
     .typography.--body_s {
-      font-size: var(--bds-font_size--body--s);
+      font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
       line-height: var(--bds-font_line-height--body);
     }
   `;
 
   static properties = {
     variant:   { type: String, reflect: true },
-    component: { type: String },
+    component: { type: String, reflect: true },
   };
 
   declare variant: TypographyVariant;
@@ -91,12 +107,14 @@ export class BdsTypography extends LitElement {
   }
 
   render() {
-    // unsafeStatic is safe here — tag values are derived from a known allowlist
-    // (VARIANT_TAG map + the `component` property which is developer-controlled).
+    // unsafeStatic is required here only for the tag name — Lit's html templates
+    // can't bind a dynamic element name any other way. Tag values come from a
+    // known allowlist (VARIANT_TAG map + the developer-controlled `component`
+    // property). The class attribute below is bound normally (not unsafeStatic)
+    // since it is ordinary, escaped attribute content — no injection sink.
     const tag = unsafeStatic(this._tag);
-    const variant = unsafeStatic(this.variant);
     return html`
-      <${tag} class="typography --${variant}">
+      <${tag} class="typography --${this.variant}">
         <slot></slot>
       </${tag}>
     `;