@boostdev/design-system-components 2.15.0 → 2.17.0

package/src/web-components/ui/BdsSectionHeader.stories.tsx

@@ -7,25 +7,28 @@ function BdsSectionHeader({
   subtitle,
   alignment = 'start',
   size = 'medium',
+  appearance = 'default',
   titleAs,
 }: {
   heading?: string;
   subtitle?: string;
   alignment?: 'start' | 'center' | 'end';
   size?: 'xs' | 'small' | 'medium' | 'large';
+  appearance?: 'default' | 'gradient';
   titleAs?: string;
 }) {
-  return React.createElement('bds-section-header', { heading, subtitle, alignment, size, 'title-as': titleAs });
+  return React.createElement('bds-section-header', { heading, subtitle, alignment, size, appearance, 'title-as': titleAs });
 }
 
 const meta = {
   title: 'Web Components/Layout/SectionHeader',
   component: BdsSectionHeader,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'padded' },
   argTypes: {
     alignment: { control: 'select', options: ['start', 'center', 'end'] },
     size:      { control: 'select', options: ['xs', 'small', 'medium', 'large'] },
+    appearance: { control: 'select', options: ['default', 'gradient'] },
     titleAs:   { control: 'text' },
   },
 } satisfies Meta<typeof BdsSectionHeader>;
@@ -54,3 +57,8 @@ export const AllSizes: Story = {
     </div>
   ),
 };
+
+export const Gradient: Story = { args: { heading: 'Gradient Header', subtitle: 'Gradient title', appearance: 'gradient' } };
+export const GradientExtraSmall: Story = { args: { heading: 'Gradient Extra Small', subtitle: 'Gradient title', appearance: 'gradient', size: 'xs' } };
+export const GradientSmall: Story = { args: { heading: 'Gradient Small', subtitle: 'Gradient title', appearance: 'gradient', size: 'small' } };
+export const GradientLarge: Story = { args: { heading: 'Gradient Large', subtitle: 'Gradient title', appearance: 'gradient', size: 'large' } };

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsSeparator.stories';
 
 Framework-agnostic Separator custom element. Renders a thin decorative line to visually divide content. Supports both horizontal and vertical orientations.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -56,6 +56,7 @@ Or in HTML without a bundler:
 |----------|-------------|
 | `--separator_color` | Line colour (defaults to `--bds-color_on-bg--as-surface`, the non-text member of the set — a rule is not text, so it needs 3:1, not 4.5:1) |
 | `--separator_thickness` | Line thickness (default: `1px`) |
+| `--separator_spacing` | Space around the line: inline for vertical (default: `var(--bds-space_s)`), block for horizontal (default: `0`) |
 
 ## Usage in plain HTML
 

package/src/web-components/ui/BdsSeparator.stories.tsx

@@ -13,7 +13,7 @@ function BdsSeparator({
 const meta = {
   title: 'Web Components/UI/Separator',
   component: BdsSeparator,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
@@ -53,3 +53,15 @@ export const Vertical: Story = {
     </div>
   ),
 };
+
+export const BetweenLinks: Story = {
+  render: () => (
+    <nav aria-label="Example" style={{ display: 'flex', alignItems: 'center' }}>
+      <a href="#one">Home</a>
+      {React.createElement('bds-separator', { orientation: 'vertical' })}
+      <a href="#two">Pricing</a>
+      {React.createElement('bds-separator', { orientation: 'vertical' })}
+      <a href="#three">Contact</a>
+    </nav>
+  ),
+};

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsSkeleton.stories';
 
 Framework-agnostic Skeleton loading placeholder custom element. Displays an animated shimmer while real content is loading. Size is set via inline styles or CSS on the host element.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/ui/BdsSkeleton.stories.tsx

@@ -10,7 +10,7 @@ function BdsSkeleton({ width = '200px', height = '1rem' }: { width?: string; hei
 const meta = {
   title: 'Web Components/UI/Skeleton',
   component: BdsSkeleton,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     width:  { control: 'text' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsTable.stories';
 
 Framework-agnostic scrollable Table wrapper custom element. Apply design-system styles to a standard `<table>` element by nesting it in the default slot.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 > **Light-DOM styling contract:** `::slotted()` can only match the node placed directly into
 > the slot (the `<table>` itself), never its descendants. `<thead>`/`<th>`/`<td>` styling is
@@ -57,6 +57,10 @@ import '@boostdev/design-system-components/web-components';
 | Property | Description |
 |----------|-------------|
 | `--table_divider-color` | Colour of the header underline and row rules (default: `--bds-color_on-bg--as-surface`, the non-text member of the set — ≥ 3:1, not a ground colour) |
+| `--table_header-font-size` | Header cell font size (default: `var(--bds-font_size--body)`) |
+| `--table_header-font-weight` | Header cell font weight (default: `var(--bds-font_weight--bold)`) |
+| `--table_header-color` | Header cell text colour (default: `var(--bds-color_on-bg--subtle)`) |
+| `--table_header-bg` | Header row background (default: `var(--bds-color_bg--subtle)`) |
 | `--table_border` | Wrapper border (default: `none`) |
 | `--table_radius` | Wrapper corner radius (default: `var(--bdc-outline_radius)`, itself set to `var(--bds-border_radius--s)` on the wrapper) |
 | `--table_row-bg--hover` | Row background on hover, pointer devices only (default: `var(--bds-color_bg--subtle)`) |

package/src/web-components/ui/BdsTable.stories.tsx

@@ -58,7 +58,7 @@ const sampleTable = () =>
 const meta = {
   title: 'Web Components/UI/Table',
   component: BdsTable,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'fullscreen' },
   argTypes: {
     stickyHeader: { control: 'boolean' },

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

@@ -7,7 +7,7 @@ import * as Stories from './BdsTypography.stories';
 
 Framework-agnostic Typography custom element. Renders slotted text inside the appropriate semantic HTML element (`h1`–`h3`, `p`) based on the `variant` attribute, with optional tag override via `component`.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/ui/BdsTypography.stories.tsx

@@ -18,7 +18,7 @@ function BdsTypography({
 const meta = {
   title: 'Web Components/UI/Typography',
   component: BdsTypography,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },

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

@@ -121,4 +121,38 @@ describe('bds-alert', () => {
     expect(div!.getAttribute('role')).toBe('alert');
     cleanup(el);
   });
+
+  it('defaults to appearance="default"', async () => {
+    const el = await fixture('<bds-alert>Message</bds-alert>');
+    expect(el.getAttribute('appearance')).toBe('default');
+    cleanup(el);
+  });
+
+  it('reflects appearance="gradient"', async () => {
+    const el = await fixture('<bds-alert appearance="gradient">Message</bds-alert>') as BdsAlert;
+    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(BdsAlert.styles);
+    expect(styles).toContain(":host([appearance='gradient']) .alert");
+    expect(styles).toMatch(/background-image:\s*var\(--alert_gradient,\s*linear-gradient\(100deg/);
+    expect(styles).toMatch(/box-shadow:\s*var\(--alert_shadow,\s*var\(--bds-shadow_s\)\)/);
+    expect(styles).toContain('--alert_border-width--variant: 3px');
+    expect(styles).toMatch(/\.alert \{[^}]*--alert_border-width--variant:\s*initial/);
+    ['info', 'success', 'warning', 'error'].forEach(v => {
+      expect(styles).toContain(`--alert_accent--${v}`);
+    });
+  });
+
+  it('paints the error variant with the error subtle pair, matching the React counterpart', () => {
+    const styles = String(BdsAlert.styles);
+    expect(styles).toMatch(/--alert_bg--variant:\s*var\(--alert_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(styles).toMatch(/--alert_text--variant:\s*var\(--alert_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(styles).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

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

@@ -1,12 +1,14 @@
 import { LitElement, css, html, nothing } from 'lit';
 
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export type AlertAppearance = 'default' | 'gradient';
 
 /**
  * `<bds-alert>` — framework-agnostic Alert custom element.
  *
  * Attributes:
  *   variant     — "info" (default) | "success" | "warning" | "error"
+ *   appearance  — "default" | "gradient" (fades the tint to the surface, 3px accent line, shadow)
  *   heading     — optional heading above the body text
  *   title       — deprecated alias for `heading`. Collides with the global HTML
  *                 `title` attribute, which triggers a native browser tooltip on
@@ -60,9 +62,12 @@ export class BdsAlert extends LitElement {
          defaults. Variants write to the inner --alert_*--variant slot. */
       background-color:    var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
       color:               var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
-      border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
+      border-inline-start: var(--alert_border-width, var(--alert_border-width--variant, var(--bds-space_s))) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
+
+      /* Reset the slot so a nested default alert does not inherit a parent's gradient width. */
+      --alert_border-width--variant: initial;
     }
 
     /* Per-variant resting overrides — consumers can theme per-variant via
@@ -86,11 +91,36 @@ export class BdsAlert extends LitElement {
     }
 
     :host([variant='error']) .alert {
-      --alert_bg--variant:     var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-bg));
+      --alert_bg--variant:     var(--alert_bg--error, var(--bds-color_error--subtle));
+      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-error--subtle));
       --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
     }
 
+    /* Gradient appearance: the variant background stays the base colour and a
+       gradient fades it to the surface. The accent line is thinner and uses a
+       per-variant accent slot; --alert_border still wins over it. */
+    :host([appearance='gradient']) .alert {
+      --alert_border-width--variant: 3px;
+      background-image: var(--alert_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
+      box-shadow: var(--alert_shadow, var(--bds-shadow_s));
+    }
+
+    :host([appearance='gradient'][variant='info']) .alert {
+      --alert_border--variant: var(--alert_border--info, var(--alert_accent--info, var(--bds-color_on-blue--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='success']) .alert {
+      --alert_border--variant: var(--alert_border--success, var(--alert_accent--success, var(--bds-color_on-success--subtle)));
+    }
+
+    :host([appearance='gradient'][variant='warning']) .alert {
+      --alert_border--variant: var(--alert_border--warning, var(--alert_accent--warning, var(--bds-color_warning)));
+    }
+
+    :host([appearance='gradient'][variant='error']) .alert {
+      --alert_border--variant: var(--alert_border--error, var(--alert_accent--error, var(--bds-color_error)));
+    }
+
     /* Icon slot wrapper — hidden unless slot has content */
     .icon {
       display: none;
@@ -151,6 +181,7 @@ export class BdsAlert extends LitElement {
 
   static properties = {
     variant:     { type: String, reflect: true },
+    appearance:  { type: String, reflect: true },
     heading:     { type: String },
     title:       { type: String },
     dismissible: { type: Boolean, reflect: true },
@@ -160,6 +191,7 @@ export class BdsAlert extends LitElement {
   // `declare` annotates the type without emitting a class field initializer
   // that would shadow Lit's reactive accessors on the prototype.
   declare variant: AlertVariant;
+  declare appearance: AlertAppearance;
   declare heading: string;
   /**
    * @deprecated Use `heading` instead. Sharing the name with the global HTML
@@ -173,6 +205,7 @@ export class BdsAlert extends LitElement {
   constructor() {
     super();
     this.variant = 'info';
+    this.appearance = 'default';
     this.heading = '';
     this.title = '';
     this.dismissible = false;

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

@@ -1,5 +1,6 @@
 import { fixture, cleanup } from '../test/helpers';
 import { BdsAvatar } from './bds-avatar';
+import { toneFromName } from '../../components/ui/Avatar/avatarTone';
 
 describe('bds-avatar', () => {
   it('is registered as a custom element', () => {
@@ -101,4 +102,50 @@ describe('bds-avatar', () => {
     // The public --avatar_size token itself must never be set directly by a size selector.
     expect(cssText).not.toMatch(/:host\(\[size=[^)]*\]\)\s*\{\s*--avatar_size:/);
   });
+
+  it('defaults to tone="auto"', async () => {
+    const el = await fixture('<bds-avatar name="Jane Doe"></bds-avatar>');
+    expect(el.getAttribute('tone')).toBe('auto');
+    cleanup(el);
+  });
+
+  it('picks the same tone as the React Avatar for the same name', async () => {
+    const el = await fixture('<bds-avatar name="Jane Doe"></bds-avatar>');
+    const fallback = el.shadowRoot!.querySelector('.fallback');
+    expect(fallback!.classList.contains(`tone_${toneFromName('Jane Doe')}`)).toBe(true);
+    cleanup(el);
+  });
+
+  it('uses primary when there is no name', async () => {
+    const el = await fixture('<bds-avatar></bds-avatar>');
+    expect(el.shadowRoot!.querySelector('.fallback')!.classList.contains('tone_primary')).toBe(true);
+    cleanup(el);
+  });
+
+  it('falls back to the name tone for an unknown tone attribute', async () => {
+    const el = await fixture('<bds-avatar name="Jane Doe" tone="foo"></bds-avatar>');
+    expect(el.shadowRoot!.querySelector('.fallback')!.classList.contains(`tone_${toneFromName('Jane Doe')}`)).toBe(true);
+  });
+
+  it('lets an explicit tone win over auto', async () => {
+    const el = await fixture('<bds-avatar name="Jane Doe" tone="accent-2"></bds-avatar>');
+    expect(el.shadowRoot!.querySelector('.fallback')!.classList.contains('tone_accent-2')).toBe(true);
+    cleanup(el);
+  });
+
+  it('does not render a tone for image avatars', async () => {
+    const el = await fixture('<bds-avatar src="/photo.jpg" name="Jane Doe" tone="accent-1"></bds-avatar>');
+    expect(el.shadowRoot!.querySelector('.fallback')).toBeNull();
+    cleanup(el);
+  });
+
+  it('exposes a hook per tone and lets --avatar_bg and --avatar_text win', () => {
+    const cssText = BdsAvatar.styles.cssText;
+    expect(cssText).toMatch(/background-color:\s*var\(--avatar_bg,\s*var\(--avatar_bg--variant\)\)/);
+    expect(cssText).toMatch(/color:\s*var\(--avatar_text,\s*var\(--avatar_text--variant\)\)/);
+    ['primary', 'secondary', 'accent-1', 'accent-2', 'accent-3'].forEach(tone => {
+      expect(cssText).toContain(`--avatar_bg--${tone}`);
+      expect(cssText).toContain(`--avatar_text--${tone}`);
+    });
+  });
 });

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-badge.spec.ts

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

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

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

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

@@ -92,4 +92,56 @@ 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);
+  });
+
+  it('paints the error variant with the error subtle pair, matching the React counterpart', () => {
+    const styles = String(BdsNotificationBanner.styles);
+    expect(styles).toMatch(/--banner_bg--variant:\s*var\(--banner_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(styles).toMatch(/--banner_text--variant:\s*var\(--banner_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(styles).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

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

@@ -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%;
@@ -72,11 +75,46 @@ export class BdsNotificationBanner extends LitElement {
     }
 
     :host([variant='error']) .banner {
-      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_bg--variant:     var(--banner_bg--error, var(--bds-color_error--subtle));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-error--subtle));
       --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 
+    /* 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-rating.spec.ts

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