@boostdev/design-system-components 2.14.1 → 2.16.0

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

package/src/components/ui/Tabs/Tabs.mdx

@@ -48,6 +48,8 @@ The override surface is **layered**. Setting `--tab_color` / `--tab_border-color
 <tbody>
 <tr><td>`--tab_color`</td><td>per state</td><td>Tab text colour. Set to theme every state at once.</td></tr>
 <tr><td>`--tab_border-color`</td><td>per state</td><td>Tab block-end border colour.</td></tr>
+<tr><td>`--tab_font-weight`</td><td>per state</td><td>Tab font weight. Set to theme every state at once.</td></tr>
+<tr><td>`--tab_indicator-width`</td><td>`3px`</td><td>Thickness of the block-end indicator line.</td></tr>
 </tbody>
 </table>
 
@@ -55,16 +57,16 @@ The override surface is **layered**. Setting `--tab_color` / `--tab_border-color
 
 <table>
 <thead>
-<tr><th>State</th><th>Text</th><th>Border</th></tr>
+<tr><th>State</th><th>Text</th><th>Border</th><th>Font weight</th></tr>
 </thead>
 <tbody>
-<tr><td>resting</td><td>(`var(--bds-color_on-bg)`)</td><td>(`transparent`)</td></tr>
-<tr><td>hover</td><td>`--tab_color--hover`</td><td>—</td></tr>
-<tr><td>active</td><td>`--tab_color--active`</td><td>`--tab_border-color--active`</td></tr>
+<tr><td>resting</td><td>`--tab_color--inactive`</td><td>(`transparent`)</td><td>`--tab_font-weight--inactive`</td></tr>
+<tr><td>hover</td><td>`--tab_color--hover`</td><td>—</td><td>—</td></tr>
+<tr><td>active</td><td>`--tab_color--active`</td><td>`--tab_border-color--active`</td><td>`--tab_font-weight--active`</td></tr>
 </tbody>
 </table>
 
-Defaults: hover/active text resolves to `--bds-color_interactive_on-bg`; active border to `--bds-color_interactive`.
+Defaults: resting text is `--bds-color_on-bg--muted` (falls back to `--bds-color_on-bg`) at `--bds-font_weight--medium`; hover and active text are `--bds-color_on-bg`; active is `--bds-font_weight--bold` with a `--bds-color_interactive` indicator.
 
 ### Spacing tokens
 
@@ -80,6 +82,10 @@ Defaults: hover/active text resolves to `--bds-color_interactive_on-bg`; active
 </tbody>
 </table>
 
+## Layout stability
+
+The label sits in a `<span data-label>` with a hidden `::after` that repeats the text at the active weight (`--tab_font-weight--active`), so the tab keeps its bold width and selecting a tab does not shift the row. The text comes from `TabItem.label` (strings, numbers and nested elements); the hidden copy is invisible and not read by screen readers.
+
 ## Accessibility
 
 - Implements ARIA tabs pattern: `role="tablist"`, `role="tab"`, `role="tabpanel"`

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

@@ -17,19 +17,37 @@
     padding: var(--tab_padding, var(--bds-space_s) var(--bds-space_m));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
-    font-weight: var(--bds-font_weight--semibold);
+    font-weight: var(--tab_font-weight, var(--tab_font-weight--state, var(--tab_font-weight--inactive, var(--bds-font_weight--medium))));
 
     /* Layered cascade: public overrides (--tab_color, --tab_border-color) win over
        per-state defaults. Active/hover write to the inner --tab_*--state slot. */
-    color:            var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
-    border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
+    color:            var(--tab_color, var(--tab_color--state, var(--tab_color--inactive, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)))));
+    border-block-end: var(--tab_indicator-width, 3px) solid var(--tab_border-color, var(--tab_border-color--state, transparent));
     margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
 
+  /* Reserves the width of the bold label so selecting a tab does not shift the row.
+     The hidden ::after repeats the label at the active weight in the same grid cell:
+     it adds width but no height and stays out of the accessibility tree. */
+  .label {
+    display: inline-grid;
+  }
+
+  .label::after {
+    content: attr(data-label);
+    grid-area: 1 / 1;
+    font-weight: var(--tab_font-weight, var(--tab_font-weight--active, var(--bds-font_weight--bold)));
+    visibility: hidden;
+    pointer-events: none;
+    block-size: 0;
+    overflow: hidden;
+  }
+
   .tab.--active {
-    --tab_color--state:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+    --tab_color--state:        var(--tab_color--active, var(--bds-color_on-bg));
+    --tab_font-weight--state: var(--tab_font-weight--active, var(--bds-font_weight--bold));
     --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
   }
 
@@ -46,7 +64,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tab:not(:disabled, .--active):hover {
-      --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
+      --tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
     }
   }
 

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

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Tabs } from './Tabs';
@@ -108,4 +110,41 @@ describe('Tabs', () => {
     render(<Tabs tabs={tabs} />);
     expect(screen.getByText('First panel').closest('[role="tabpanel"]')).toHaveAttribute('tabindex', '0');
   });
+
+  it('wraps the label with a data-label that reserves the bold width', () => {
+    render(<Tabs tabs={[{ id: 'a', label: <>Inbox <em>4</em></>, content: null }]} />);
+    const label = screen.getByRole('tab').querySelector('span');
+    expect(label).toHaveAttribute('data-label', 'Inbox 4');
+    expect(label).toHaveTextContent('Inbox 4');
+  });
+
+  describe('styling hooks', () => {
+    it('reserves the active font weight through a hidden ::after', () => {
+      const rules = readFileSync(resolve(process.cwd(), 'src/components/ui/Tabs/Tabs.module.css'), 'utf8');
+      expect(rules).toMatch(/\.label\s*\{\s*display:\s*inline-grid;/);
+      expect(rules).toMatch(/\.label::after\s*\{[^}]*content:\s*attr\(data-label\)/);
+      expect(rules).toMatch(/\.label::after\s*\{[^}]*font-weight:\s*var\(--tab_font-weight,\s*var\(--tab_font-weight--active,\s*var\(--bds-font_weight--bold\)\)\)/);
+      expect(rules).toMatch(/\.label::after\s*\{[^}]*visibility:\s*hidden/);
+    });
+
+    const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Tabs/Tabs.module.css'), 'utf8');
+
+    it('styles the resting tab muted and medium', () => {
+      expect(css).toMatch(/color:\s*var\(--tab_color,\s*var\(--tab_color--state,\s*var\(--tab_color--inactive,\s*var\(--bds-color_on-bg--muted,\s*var\(--bds-color_on-bg\)\)\)\)\)/);
+      expect(css).toMatch(/font-weight:\s*var\(--tab_font-weight,\s*var\(--tab_font-weight--state,\s*var\(--tab_font-weight--inactive,\s*var\(--bds-font_weight--medium\)\)\)\)/);
+    });
+
+    it('styles the active tab in the full text colour and bold', () => {
+      expect(css).toMatch(/--tab_color--state:\s*var\(--tab_color--active,\s*var\(--bds-color_on-bg\)\)/);
+      expect(css).toMatch(/--tab_font-weight--state:\s*var\(--tab_font-weight--active,\s*var\(--bds-font_weight--bold\)\)/);
+    });
+
+    it('sizes the indicator through --tab_indicator-width', () => {
+      expect(css).toMatch(/border-block-end:\s*var\(--tab_indicator-width,\s*3px\) solid/);
+    });
+
+    it('shows the full text colour on hover', () => {
+      expect(css).toMatch(/--tab_color--state:\s*var\(--tab_color--hover,\s*var\(--bds-color_on-bg\)\)/);
+    });
+  });
 });

package/src/components/ui/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, KeyboardEvent, ReactNode, useId, useRef, useState } fro
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
+import { getNodeText } from './getNodeText';
 
 export interface TabItem {
   id: string;
@@ -74,7 +75,7 @@ export function Tabs({ tabs, defaultTab, className, ...rest }: Readonly<TabsProp
               onClick={() => setActiveTab(tab.id)}
               onKeyDown={e => handleKeyDown(e, i)}
             >
-              {tab.label}
+              <span className={css.label} data-label={getNodeText(tab.label)}>{tab.label}</span>
             </button>
           );
         })}

package/src/components/ui/Tabs/getNodeText.spec.tsx

@@ -0,0 +1,23 @@
+import { getNodeText } from './getNodeText';
+
+describe('getNodeText', () => {
+  it('returns strings and numbers as text', () => {
+    expect(getNodeText('Overview')).toBe('Overview');
+    expect(getNodeText(3)).toBe('3');
+  });
+
+  it('ignores booleans, null and undefined', () => {
+    expect(getNodeText(null)).toBe('');
+    expect(getNodeText(undefined)).toBe('');
+    expect(getNodeText(false)).toBe('');
+    expect(getNodeText(true)).toBe('');
+  });
+
+  it('joins arrays', () => {
+    expect(getNodeText(['Inbox ', 4, false])).toBe('Inbox 4');
+  });
+
+  it('reads element children recursively', () => {
+    expect(getNodeText(<span>Inbox <strong>(<em>4</em>)</strong></span>)).toBe('Inbox (4)');
+  });
+});

package/src/components/ui/Tabs/getNodeText.ts

@@ -0,0 +1,13 @@
+import { isValidElement } from 'react';
+import type { ReactNode } from 'react';
+
+/**
+ * Plain text of a ReactNode: strings and numbers as written, arrays and element
+ * children joined, booleans/null/undefined ignored. Pure, so it also runs on the server.
+ */
+export function getNodeText(node: ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).join('');
+  if (isValidElement<{ children?: ReactNode }>(node)) return getNodeText(node.props.children);
+  return '';
+}

package/src/components/ui/Tooltip/Tooltip.mdx

@@ -29,6 +29,9 @@ Short contextual label that appears on hover or focus. Use to supplement icon bu
 ### Right
 <Canvas of={Stories.Right} />
 
+### Long text
+<Canvas of={Stories.LongText} />
+
 ### All placements
 <Canvas of={Stories.AllPlacements} />
 
@@ -48,11 +51,11 @@ Short contextual label that appears on hover or focus. Use to supplement icon bu
 <tbody>
 <tr><td>`--tooltip_bg`</td><td>`var(--bds-color_on-bg)`</td><td>Tooltip background colour</td></tr>
 <tr><td>`--tooltip_text`</td><td>`var(--bds-color_bg)`</td><td>Tooltip text colour</td></tr>
-<tr><td>`--tooltip_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Tooltip corner radius</td></tr>
-<tr><td>`--tooltip_padding`</td><td>`var(--bds-space_xxs) var(--bds-space_xs)`</td><td>Tooltip padding</td></tr>
+<tr><td>`--tooltip_radius`</td><td>`var(--bds-border_radius--xs)`</td><td>Tooltip corner radius</td></tr>
+<tr><td>`--tooltip_padding`</td><td>`var(--bds-space_xxs) var(--bds-space_s)`</td><td>Tooltip padding</td></tr>
 <tr><td>`--tooltip_font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Tooltip text size</td></tr>
 <tr><td>`--tooltip_offset`</td><td>`var(--bds-space_xs)`</td><td>Gap between the trigger and the tooltip. Set to `0` to close the gap so the pointer can travel from the trigger onto the tooltip without a dead zone.</td></tr>
-<tr><td>`--tooltip_max-inline-size`</td><td>`20rem`</td><td>Maximum inline size before content wraps</td></tr>
+<tr><td>`--tooltip_max-inline-size`</td><td>`20rem`</td><td>Maximum inline size before content wraps. The tooltip is as wide as its text (`max-content`) up to this value</td></tr>
 </tbody>
 </table>
 

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

@@ -17,12 +17,16 @@
     display: block;
     position: absolute;
     z-index: var(--bds-z-index_popover);
-    padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_xs));
-    border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+    padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s));
+    border-radius: var(--tooltip_radius, var(--bds-border_radius--xs));
     background-color: var(--tooltip_bg, var(--bds-color_on-bg));
     color: var(--tooltip_text, var(--bds-color_bg));
     font-size: var(--tooltip_font-size, var(--bds-font_size--body--s));
     line-height: var(--bds-font_line-height--body);
+
+    /* Size to the text, not to the (possibly narrow) trigger wrapper the
+       tooltip is absolutely positioned in; wrap only at the max width. */
+    inline-size: max-content;
     max-inline-size: var(--tooltip_max-inline-size, 20rem);
     white-space: normal;
     pointer-events: none;

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

@@ -1,5 +1,7 @@
 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 { Tooltip } from './Tooltip';
 
 describe('Tooltip', () => {
@@ -99,4 +101,12 @@ describe('Tooltip', () => {
     await user.unhover(tooltip);
     expect(tooltip).not.toBeVisible();
   });
+
+  it('sizes the tooltip to its text and uses the xs radius hook default', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Tooltip/Tooltip.module.css'), 'utf8');
+    expect(css).toMatch(/inline-size:\s*max-content;/);
+    expect(css).toMatch(/max-inline-size:\s*var\(--tooltip_max-inline-size,\s*20rem\);/);
+    expect(css).toContain('var(--tooltip_radius, var(--bds-border_radius--xs))');
+    expect(css).toContain('var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s))');
+  });
 });

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

@@ -56,6 +56,19 @@ export const Right: Story = {
   ),
 };
 
+export const LongText: Story = {
+  args: {
+    content:
+      'Longer explanation that wraps onto a second line once it reaches the maximum width of the tooltip.',
+    placement: 'bottom',
+  },
+  render: args => (
+    <Tooltip {...args}>
+      <Button>Long tooltip</Button>
+    </Tooltip>
+  ),
+};
+
 export const AllPlacements: Story = {
   render: () => (
     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '3rem' }}>