@boostdev/design-system-components 2.15.0 → 2.16.0

package/src/components/ui/Alert/Alert.tsx

@@ -5,6 +5,7 @@ import type { WithClassName } from '../../../types';
 
 interface AlertProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   variant?: 'info' | 'success' | 'warning' | 'error';
+  appearance?: 'default' | 'gradient';
   icon?: ReactNode;
   title?: string;
   onDismiss?: () => void;
@@ -12,6 +13,7 @@ interface AlertProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>,
 
 export function Alert({
   variant = 'info',
+  appearance = 'default',
   icon,
   title,
   children,
@@ -27,7 +29,12 @@ export function Alert({
       role={isUrgent ? 'alert' : 'status'}
       aria-live={isUrgent ? 'assertive' : 'polite'}
       aria-atomic="true"
-      className={cn(css.alert, css[`--variant_${variant}`], className)}
+      className={cn(
+        css.alert,
+        css[`--variant_${variant}`],
+        appearance === 'gradient' && css['--appearance_gradient'],
+        className,
+      )}
     >
       {icon && (
         <span className={css.icon} aria-hidden="true">

package/src/components/ui/Avatar/Avatar.mdx

@@ -22,6 +22,12 @@ Circular user representation. Displays a profile image when available, falling b
 ### All sizes
 <Canvas of={Stories.AllSizes} />
 
+### Tones
+<Canvas of={Stories.AllTones} />
+
+### Automatic tone from the name
+<Canvas of={Stories.AutoTone} />
+
 ### Single name (one initial)
 <Canvas of={Stories.SingleName} />
 
@@ -34,6 +40,10 @@ Circular user representation. Displays a profile image when available, falling b
 
 <ArgTypes of={Stories} />
 
+## Tone
+
+`tone` colours the initials fallback with the subtle set of a palette: `'auto'` (default), `'primary'`, `'secondary'`, `'accent-1'`, `'accent-2'` or `'accent-3'`. With `auto` the tone is picked from `name`, so the same name always gets the same colour; no name gives `primary`. Image avatars ignore `tone`.
+
 ## CSS variables
 
 The override surface is **layered** — `--avatar_size` wins over the per-`size`-prop default, so you can theme one avatar or every avatar under an ancestor selector.
@@ -45,8 +55,18 @@ The override surface is **layered** — `--avatar_size` wins over the per-`size`
 <tbody>
 <tr><td>`--avatar_size`</td><td>per `size` (`2em` / `3em` / `4.5em`)</td><td>Avatar diameter. Set on the avatar or an ancestor to override the `size` prop's default.</td></tr>
 <tr><td>`--avatar_radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Avatar corner radius</td></tr>
-<tr><td>`--avatar_bg`</td><td>`var(--bds-color_blue)`</td><td>Background colour for the initials fallback</td></tr>
-<tr><td>`--avatar_text`</td><td>`var(--bds-color_on-blue)`</td><td>Text colour for the initials</td></tr>
+<tr><td>`--avatar_bg`</td><td>per `tone`</td><td>Background colour for the initials fallback; wins over every tone</td></tr>
+<tr><td>`--avatar_text`</td><td>per `tone`</td><td>Text colour for the initials; wins over every tone</td></tr>
+<tr><td>`--avatar_bg--primary`</td><td>`var(--bds-color_primary--subtle)`</td><td>Background for `tone="primary"`</td></tr>
+<tr><td>`--avatar_text--primary`</td><td>`var(--bds-color_on-primary--subtle)`</td><td>Text for `tone="primary"`</td></tr>
+<tr><td>`--avatar_bg--secondary`</td><td>`var(--bds-color_secondary--subtle)`</td><td>Background for `tone="secondary"`</td></tr>
+<tr><td>`--avatar_text--secondary`</td><td>`var(--bds-color_on-secondary--subtle)`</td><td>Text for `tone="secondary"`</td></tr>
+<tr><td>`--avatar_bg--accent-1`</td><td>`var(--bds-color_accent-1--subtle)`</td><td>Background for `tone="accent-1"`</td></tr>
+<tr><td>`--avatar_text--accent-1`</td><td>`var(--bds-color_on-accent-1--subtle)`</td><td>Text for `tone="accent-1"`</td></tr>
+<tr><td>`--avatar_bg--accent-2`</td><td>`var(--bds-color_accent-2--subtle)`</td><td>Background for `tone="accent-2"`</td></tr>
+<tr><td>`--avatar_text--accent-2`</td><td>`var(--bds-color_on-accent-2--subtle)`</td><td>Text for `tone="accent-2"`</td></tr>
+<tr><td>`--avatar_bg--accent-3`</td><td>`var(--bds-color_accent-3--subtle)`</td><td>Background for `tone="accent-3"`</td></tr>
+<tr><td>`--avatar_text--accent-3`</td><td>`var(--bds-color_on-accent-3--subtle)`</td><td>Text for `tone="accent-3"`</td></tr>
 </tbody>
 </table>
 

package/src/components/ui/Avatar/Avatar.module.css

@@ -16,11 +16,38 @@
   }
 
   .avatar.--fallback {
-    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: the outer --avatar_bg / --avatar_text still win, and each
+     tone has its own public hook (--avatar_bg--primary etc.). */
+  .avatar.--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)));
+  }
+
+  .avatar.--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)));
+  }
+
+  .avatar.--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)));
+  }
+
+  .avatar.--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)));
+  }
+
+  .avatar.--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)));
+  }
+
   .avatar.--size_small  { --avatar_size--variant: 2em; }
   .avatar.--size_medium { --avatar_size--variant: 3em; }
   .avatar.--size_large  { --avatar_size--variant: 4.5em; }

package/src/components/ui/Avatar/Avatar.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { Avatar } from './Avatar';
+import { toneFromName } from './avatarTone';
 
 describe('Avatar', () => {
   it('renders an image when src is provided', () => {
@@ -46,4 +47,29 @@ describe('Avatar', () => {
     render(<Avatar name="Jane Doe" className="custom" />);
     expect(screen.getByRole('img')).toHaveClass('custom');
   });
+
+  it('applies the tone class derived from the name by default', () => {
+    render(<Avatar name="Jane Doe" />);
+    expect(screen.getByRole('img').className).toContain(`--tone_${toneFromName('Jane Doe')}`);
+  });
+
+  it('applies primary when there is no name and no tone', () => {
+    render(<Avatar />);
+    expect(screen.getByRole('img').className).toContain('--tone_primary');
+  });
+
+  it('lets an explicit tone win over auto', () => {
+    render(<Avatar name="Jane Doe" tone="accent-3" />);
+    expect(screen.getByRole('img').className).toContain('--tone_accent-3');
+  });
+
+  it('applies the same tone class for tone="auto" as for no tone', () => {
+    render(<Avatar name="Jane Doe" tone="auto" />);
+    expect(screen.getByRole('img').className).toContain(`--tone_${toneFromName('Jane Doe')}`);
+  });
+
+  it('does not apply a tone class to image avatars', () => {
+    const { container } = render(<Avatar src="https://example.com/photo.jpg" name="Jane Doe" tone="accent-1" />);
+    expect(container.firstElementChild?.className).not.toContain('--tone_');
+  });
 });

package/src/components/ui/Avatar/Avatar.stories.tsx

@@ -6,6 +6,7 @@ const meta = {
   component: Avatar,
   argTypes: {
     size: { control: 'radio', options: ['small', 'medium', 'large'] },
+    tone: { control: 'select', options: ['auto', 'primary', 'secondary', 'accent-1', 'accent-2', 'accent-3'] },
   },
 } satisfies Meta<typeof Avatar>;
 
@@ -41,3 +42,25 @@ export const AllSizes: Story = {
     </div>
   ),
 };
+
+export const AllTones: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <Avatar name="Primary" tone="primary" />
+      <Avatar name="Secondary" tone="secondary" />
+      <Avatar name="Accent One" tone="accent-1" />
+      <Avatar name="Accent Two" tone="accent-2" />
+      <Avatar name="Accent Three" tone="accent-3" />
+    </div>
+  ),
+};
+
+export const AutoTone: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      {['Jane Doe', 'Bjorn Boonen', 'Sam Visser', 'Noor de Vries', 'Lars Bakker'].map(name => (
+        <Avatar key={name} name={name} />
+      ))}
+    </div>
+  ),
+};

package/src/components/ui/Avatar/Avatar.tsx

@@ -2,12 +2,14 @@ import { HTMLAttributes } from 'react';
 import css from './Avatar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
+import { resolveAvatarTone, type AvatarTone } from './avatarTone';
 
 interface AvatarProps extends WithClassName, HTMLAttributes<HTMLSpanElement> {
   src?: string;
   alt?: string;
   name?: string;
   size?: 'small' | 'medium' | 'large';
+  tone?: AvatarTone;
 }
 
 function getInitials(name: string): string {
@@ -19,7 +21,7 @@ function getInitials(name: string): string {
     .join('');
 }
 
-export function Avatar({ src, alt, name, size = 'medium', className, ...rest }: Readonly<AvatarProps>) {
+export function Avatar({ src, alt, name, size = 'medium', tone = 'auto', className, ...rest }: Readonly<AvatarProps>) {
   const sizeClass = css[`--size_${size}`];
 
   if (src) {
@@ -37,7 +39,7 @@ export function Avatar({ src, alt, name, size = 'medium', className, ...rest }:
       {...rest}
       role="img"
       aria-label={name ?? 'User avatar'}
-      className={cn(css.avatar, css['--fallback'], sizeClass, className)}
+      className={cn(css.avatar, css['--fallback'], css[`--tone_${resolveAvatarTone(tone, name)}`], sizeClass, className)}
     >
       <span className={css.initials} aria-hidden="true">
         {initials}

package/src/components/ui/Avatar/avatarTone.spec.ts

@@ -0,0 +1,41 @@
+import { AVATAR_TONES, resolveAvatarTone, toneFromName } from './avatarTone';
+
+describe('avatarTone', () => {
+  it('returns the same tone for the same name', () => {
+    expect(toneFromName('Jane Doe')).toBe(toneFromName('Jane Doe'));
+  });
+
+  it('ignores case and surrounding whitespace', () => {
+    expect(toneFromName('  JANE doe ')).toBe(toneFromName('jane doe'));
+  });
+
+  it('returns primary when there is no name', () => {
+    expect(toneFromName()).toBe('primary');
+    expect(toneFromName('')).toBe('primary');
+    expect(toneFromName('   ')).toBe('primary');
+  });
+
+  it('only returns known tones', () => {
+    const names = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi'];
+    names.forEach(name => expect(AVATAR_TONES).toContain(toneFromName(name)));
+  });
+
+  it('spreads different names over more than one tone', () => {
+    const names = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi'];
+    expect(new Set(names.map(toneFromName)).size).toBeGreaterThan(1);
+  });
+
+  it('falls back to the name for an unknown tone', () => {
+    // @ts-expect-error simulates an invalid attribute value from HTML
+    expect(resolveAvatarTone('foo', 'Jane Doe')).toBe(toneFromName('Jane Doe'));
+  });
+
+  it('lets an explicit tone win over the name', () => {
+    expect(resolveAvatarTone('accent-2', 'Jane Doe')).toBe('accent-2');
+  });
+
+  it('derives the tone from the name for auto and undefined', () => {
+    expect(resolveAvatarTone('auto', 'Jane Doe')).toBe(toneFromName('Jane Doe'));
+    expect(resolveAvatarTone(undefined, 'Jane Doe')).toBe(toneFromName('Jane Doe'));
+  });
+});

package/src/components/ui/Avatar/avatarTone.ts

@@ -0,0 +1,22 @@
+export const AVATAR_TONES = ['primary', 'accent-1', 'accent-2', 'accent-3', 'secondary'] as const;
+
+export type AvatarToneName = (typeof AVATAR_TONES)[number];
+export type AvatarTone = 'auto' | AvatarToneName;
+
+/** Picks a stable tone from a name: the same name always gives the same tone. */
+export function toneFromName(name?: string): AvatarToneName {
+  const normalised = (name ?? '').trim().toLowerCase();
+  if (!normalised) return 'primary';
+
+  const hash = [...normalised].reduce(
+    (h, ch) => (Math.imul(h, 31) + (ch.codePointAt(0) ?? 0)) >>> 0,
+    0,
+  );
+  return AVATAR_TONES[hash % AVATAR_TONES.length];
+}
+
+/** An explicit tone wins; `auto` (or no tone) derives one from the name. */
+export function resolveAvatarTone(tone: AvatarTone | undefined, name?: string): AvatarToneName {
+  const isKnownTone = (value: string): value is AvatarToneName => AVATAR_TONES.some(known => known === value);
+  return tone && isKnownTone(tone) ? tone : toneFromName(name);
+}

package/src/components/ui/Collapsible/Collapsible.module.css

@@ -2,11 +2,10 @@
   .collapsible {
     border: var(--collapsible_border, none);
     --bdc_color: var(--collapsible_border-color, var(--bds-color_bg--subtle));
-    --bdc-outline_width: var(--collapsible_border-width, 1px);
     --bdc-outline_radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
 
     border-radius: var(--bdc-outline_radius);
-    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    box-shadow: inset 0 0 0 var(--collapsible_border-width, var(--bdc-outline_width)) var(--bdc_color);
     overflow: hidden;
   }
 

package/src/components/ui/NotificationBanner/NotificationBanner.mdx

@@ -35,6 +35,13 @@ Full-width banner for page-level system messages. Sits at the top of the page or
 ### Dismissible
 <Canvas of={Stories.Dismissible} />
 
+### With icon
+<Canvas of={Stories.WithIcon} />
+
+### Gradient
+`appearance="gradient"` fades the variant tint to the surface and adds a shadow. The default appearance is unchanged.
+<Canvas of={Stories.Gradient} />
+
 ## Props
 
 > **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
@@ -55,6 +62,13 @@ The override surface is **layered**. Setting a public token on the banner (or an
 <tr><td>`--banner_bg`</td><td>per variant</td><td>Banner background colour. Set to theme every variant at once.</td></tr>
 <tr><td>`--banner_text`</td><td>per variant</td><td>Banner text colour.</td></tr>
 <tr><td>`--banner_border`</td><td>per variant</td><td>Banner block-end border colour.</td></tr>
+<tr><td>`--banner_border-width`</td><td>`3px`</td><td>Width of the block-end accent line.</td></tr>
+<tr><td>`--banner_gradient`</td><td>`linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%)`</td><td>Gradient laid over the variant background. Only used with `appearance="gradient"`.</td></tr>
+<tr><td>`--banner_shadow`</td><td>`var(--bds-shadow_s)`</td><td>Box shadow. Only used with `appearance="gradient"`; the default appearance has none.</td></tr>
+<tr><td>`--banner_accent--info`</td><td>`var(--bds-color_on-blue--subtle)`</td><td>Accent line colour of the info variant with `appearance="gradient"`. `--banner_border--info` and `--banner_border` win over it.</td></tr>
+<tr><td>`--banner_accent--success`</td><td>`var(--bds-color_on-success--subtle)`</td><td>Same, success variant.</td></tr>
+<tr><td>`--banner_accent--warning`</td><td>`var(--bds-color_warning)`</td><td>Same, warning variant.</td></tr>
+<tr><td>`--banner_accent--error`</td><td>`var(--bds-color_error)`</td><td>Same, error variant.</td></tr>
 <tr><td>`--banner_dismiss-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Dismiss button border radius.</td></tr>
 <tr><td>`--banner_dismiss-border`</td><td>`none`</td><td>Dismiss button border.</td></tr>
 <tr><td>`--banner_dismiss-opacity--hover`</td><td>`0.7`</td><td>Dismiss button opacity on hover.</td></tr>

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -9,7 +9,7 @@
        win over per-variant defaults. Variants write to the inner --banner_*--variant slot. */
     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%;
@@ -39,6 +39,36 @@
     --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. */
+  .--appearance_gradient {
+    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));
+  }
+
+  .--appearance_gradient.--variant_info {
+    --banner_border--variant: var(--banner_border--info, var(--banner_accent--info, var(--bds-color_on-blue--subtle)));
+  }
+
+  .--appearance_gradient.--variant_success {
+    --banner_border--variant: var(--banner_border--success, var(--banner_accent--success, var(--bds-color_on-success--subtle)));
+  }
+
+  .--appearance_gradient.--variant_warning {
+    --banner_border--variant: var(--banner_border--warning, var(--banner_accent--warning, var(--bds-color_warning)));
+  }
+
+  .--appearance_gradient.--variant_error {
+    --banner_border--variant: var(--banner_border--error, var(--banner_accent--error, var(--bds-color_error)));
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
   .content {
     flex: 1;
   }

package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx

@@ -59,4 +59,33 @@ describe('NotificationBanner', () => {
     expect(dismissRule).toMatch(/min-inline-size:\s*var\(--banner_dismiss-size,\s*2\.75rem\)/);
     expect(dismissRule).toMatch(/min-block-size:\s*var\(--banner_dismiss-size,\s*2\.75rem\)/);
   });
+
+  it('adds the gradient appearance class with appearance="gradient"', () => {
+    render(<NotificationBanner appearance="gradient">Msg</NotificationBanner>);
+    expect(screen.getByRole('status').className).toMatch(/appearance_gradient/);
+  });
+
+  it('does not add the gradient class by default', () => {
+    render(<NotificationBanner>Msg</NotificationBanner>);
+    expect(screen.getByRole('status').className).not.toMatch(/appearance_gradient/);
+  });
+
+  it('renders an icon with aria-hidden', () => {
+    render(<NotificationBanner icon={<svg data-testid="icon" />}>Msg</NotificationBanner>);
+    expect(screen.getByTestId('icon').parentElement).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('does not render an icon wrapper without icon', () => {
+    render(<NotificationBanner>Msg</NotificationBanner>);
+    expect(screen.getByRole('status').querySelector('[aria-hidden="true"]')).toBeNull();
+  });
+
+  it('wires the gradient hooks in the CSS', () => {
+    expect(cssSource).toMatch(/background-image:\s*var\(--banner_gradient,\s*linear-gradient\(100deg/);
+    expect(cssSource).toMatch(/box-shadow:\s*var\(--banner_shadow,\s*var\(--bds-shadow_s\)\)/);
+    expect(cssSource).toMatch(/border-block-end:\s*var\(--banner_border-width,\s*3px\)/);
+    ['info', 'success', 'warning', 'error'].forEach(v => {
+      expect(cssSource).toContain(`--banner_accent--${v}`);
+    });
+  });
 });

package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx

@@ -2,9 +2,19 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { NotificationBanner } from './NotificationBanner';
 import { Button } from '../../interaction/Button/Button';
 
+const icons = {
+  info: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" /></svg>,
+  success: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="m8 12 3 3 5-6" /></svg>,
+  warning: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 2 21h20L12 3Z" /><path d="M12 10v5M12 18h.01" /></svg>,
+  error: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 7v6M12 16h.01" /></svg>,
+};
+
 const meta = {
   title: 'React/UI/NotificationBanner',
   component: NotificationBanner,
+  argTypes: {
+    appearance: { control: 'select', options: ['default', 'gradient'] },
+  },
 } satisfies Meta<typeof NotificationBanner>;
 
 export default meta;
@@ -28,3 +38,18 @@ export const Dismissible: Story = {
     onDismiss: () => alert('dismissed'),
   },
 };
+
+export const WithIcon: Story = {
+  args: { variant: 'info', icon: icons.info, children: 'A new version is available. Refresh to update.' },
+};
+export const Gradient: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      {(['info', 'success', 'warning', 'error'] as const).map(v => (
+        <NotificationBanner key={v} variant={v} appearance="gradient" icon={icons[v]}>
+          This is a {v} notification banner.
+        </NotificationBanner>
+      ))}
+    </div>
+  ),
+};

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -5,6 +5,8 @@ import type { WithClassName } from '../../../types';
 
 interface NotificationBannerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'info' | 'success' | 'warning' | 'error';
+  appearance?: 'default' | 'gradient';
+  icon?: ReactNode;
   children: ReactNode;
   action?: ReactNode;
   onDismiss?: () => void;
@@ -12,6 +14,8 @@ interface NotificationBannerProps extends WithClassName, HTMLAttributes<HTMLDivE
 
 export function NotificationBanner({
   variant = 'info',
+  appearance = 'default',
+  icon,
   children,
   action,
   onDismiss,
@@ -26,8 +30,18 @@ export function NotificationBanner({
       role={isUrgent ? 'alert' : 'status'}
       aria-live={isUrgent ? 'assertive' : 'polite'}
       aria-atomic="true"
-      className={cn(css.banner, css[`--variant_${variant}`], className)}
+      className={cn(
+        css.banner,
+        css[`--variant_${variant}`],
+        appearance === 'gradient' && css['--appearance_gradient'],
+        className,
+      )}
     >
+      {icon && (
+        <span className={css.icon} aria-hidden="true">
+          {icon}
+        </span>
+      )}
       <div className={css.content}>{children}</div>
       {action && <div className={css.action}>{action}</div>}
       {onDismiss && (

package/src/components/ui/Separator/Separator.mdx

@@ -35,6 +35,7 @@ Visual divider between content sections. Renders a semantic `<hr>` (horizontal)
 <tbody>
 <tr><td>`--separator_color`</td><td>`var(--bds-color_on-bg--as-surface)`</td><td>Line colour. A separator is not text, so it takes the non-text member of the colour set (≥ 3:1) rather than the text colour. Falls back to `--bds-color_on-bg--border` and then `--bds-color_on-bg` on foundations older than 2.3.0.</td></tr>
 <tr><td>`--separator_thickness`</td><td>`1px`</td><td>Line thickness (height for horizontal, width for vertical)</td></tr>
+<tr><td>`--separator_spacing`</td><td>`var(--bds-space_s)` (vertical), `0` (horizontal)</td><td>Space around the line, without margin: padding on the separator with the colour clipped to the line. Vertical: inline space on both sides; horizontal: block space above and below.</td></tr>
 <tr><td>`--separator_length`</td><td>`1em`</td><td>Minimum height of the vertical separator when rendered outside a flex/grid container. Inside a flex or grid container the separator still stretches to fill the cross axis (`align-self: stretch`) — this token only sets a floor for standalone usage.</td></tr>
 </tbody>
 </table>

package/src/components/ui/Separator/Separator.module.css

@@ -8,6 +8,9 @@
     display: block;
     inline-size: 100%;
     block-size: var(--separator_thickness, 1px);
+    box-sizing: content-box;
+    padding-block: var(--separator_spacing, 0);
+    background-clip: content-box;
   }
 
   .separator.--vertical {
@@ -15,5 +18,8 @@
     inline-size: var(--separator_thickness, 1px);
     min-block-size: var(--separator_length, 1em);
     align-self: stretch;
+    box-sizing: content-box;
+    padding-inline: var(--separator_spacing, var(--bds-space_s));
+    background-clip: content-box;
   }
 }

package/src/components/ui/Separator/Separator.spec.tsx

@@ -1,6 +1,10 @@
 import { render, screen } from '@testing-library/react';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { Separator } from './Separator';
 
+const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Separator/Separator.module.css'), 'utf8');
+
 describe('Separator', () => {
   it('renders as an hr element by default', () => {
     const { container } = render(<Separator />);
@@ -23,6 +27,21 @@ describe('Separator', () => {
     expect(screen.getByRole('separator')).toHaveAttribute('aria-orientation', 'vertical');
   });
 
+  it('spaces the vertical line through --separator_spacing without a margin', () => {
+    const vertical = css.slice(css.indexOf('.separator.--vertical'));
+    expect(vertical).toContain('box-sizing: content-box');
+    expect(vertical).toContain('padding-inline: var(--separator_spacing, var(--bds-space_s))');
+    expect(vertical).toContain('background-clip: content-box');
+    expect(css).not.toMatch(/margin/);
+  });
+
+  it('spaces the horizontal line through --separator_spacing, 0 by default', () => {
+    const horizontal = css.slice(css.indexOf('.separator.--horizontal'), css.indexOf('.separator.--vertical'));
+    expect(horizontal).toContain('box-sizing: content-box');
+    expect(horizontal).toContain('padding-block: var(--separator_spacing, 0)');
+    expect(horizontal).toContain('background-clip: content-box');
+  });
+
   it('accepts a custom className', () => {
     const { container } = render(<Separator className="custom" />);
     expect(container.querySelector('hr')).toHaveClass('custom');

package/src/components/ui/Separator/Separator.stories.tsx

@@ -37,3 +37,18 @@ export const Vertical: Story = {
     ),
   ],
 };
+
+export const BetweenLinks: Story = {
+  args: { orientation: 'vertical' },
+  decorators: [
+    Story => (
+      <nav aria-label="Example" style={{ display: 'flex', alignItems: 'center' }}>
+        <a href="#one">Home</a>
+        <Story />
+        <a href="#two">Pricing</a>
+        <Story />
+        <a href="#three">Contact</a>
+      </nav>
+    ),
+  ],
+};

package/src/components/ui/Table/Table.mdx

@@ -46,7 +46,10 @@ Data table with optional sortable columns and caption.
 <tr><td>`--table_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Container frame shadow (appended to the inset border box-shadow)</td></tr>
 <tr><td>`--table_cell-padding`</td><td>`var(--bds-space_s) var(--bds-space_m)`</td><td>Padding shared by the caption, header cells and body cells</td></tr>
 <tr><td>`--table_font-size`</td><td>`var(--bds-font_size--body)`</td><td>Body cell font size</td></tr>
-<tr><td>`--table_header-font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Header cell / sort button font size</td></tr>
+<tr><td>`--table_header-font-size`</td><td>`var(--bds-font_size--body)`</td><td>Header cell / sort button font size</td></tr>
+<tr><td>`--table_header-font-weight`</td><td>`var(--bds-font_weight--bold)`</td><td>Header cell / sort button font weight</td></tr>
+<tr><td>`--table_header-color`</td><td>`var(--bds-color_on-bg--subtle)`</td><td>Header cell / sort button text colour</td></tr>
+<tr><td>`--table_header-bg`</td><td>`var(--bds-color_bg--subtle)`</td><td>Header row background</td></tr>
 <tr><td>`--table_sortBtn-color--hover`</td><td>`var(--bds-color_on-bg)`</td><td>Sort button text colour on hover</td></tr>
 <tr><td>`--table_row-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Table row background on hover</td></tr>
 </tbody>

package/src/components/ui/Table/Table.module.css

@@ -31,15 +31,15 @@
   }
 
   .thead {
-    background-color: var(--bds-color_bg--subtle);
+    background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
   }
 
   .th {
     padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
     text-align: start;
-    font-weight: var(--bds-font_weight--semibold);
-    font-size: var(--table_header-font-size, var(--bds-font_size--body--s));
-    color: var(--bds-color_on-bg--subtle);
+    font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
+    font-size: var(--table_header-font-size, var(--bds-font_size--body));
+    color: var(--table_header-color, var(--bds-color_on-bg--subtle));
     white-space: nowrap;
     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))));
   }
@@ -56,9 +56,9 @@
     padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
     inline-size: 100%;
     cursor: pointer;
-    color: var(--bds-color_on-bg--subtle);
-    font-weight: var(--bds-font_weight--semibold);
-    font-size: var(--table_header-font-size, var(--bds-font_size--body--s));
+    color: var(--table_header-color, var(--bds-color_on-bg--subtle));
+    font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
+    font-size: var(--table_header-font-size, var(--bds-font_size--body));
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }

package/src/components/ui/Table/Table.spec.tsx

@@ -1,7 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { Table } from './Table';
 
+const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Table/Table.module.css'), 'utf8');
+
 const columns = [
   { key: 'name', header: 'Name' },
   { key: 'role', header: 'Role', sortable: true },
@@ -122,4 +126,11 @@ describe('Table', () => {
     render(<Table columns={columns} rows={rows} caption="Team members" aria-label="Custom label" />);
     expect(screen.getByRole('region', { name: 'Custom label' })).toBeInTheDocument();
   });
+
+  it('styles the header and the sort button through the --table_header-* hooks', () => {
+    expect(css).toContain('background-color: var(--table_header-bg, var(--bds-color_bg--subtle))');
+    expect(css.match(/var\(--table_header-font-weight, var\(--bds-font_weight--bold\)\)/g)).toHaveLength(2);
+    expect(css.match(/var\(--table_header-font-size, var\(--bds-font_size--body\)\)/g)).toHaveLength(2);
+    expect(css.match(/var\(--table_header-color, var\(--bds-color_on-bg--subtle\)\)/g)).toHaveLength(2);
+  });
 });