@boostdev/design-system-components 2.14.1 → 2.16.0

package/src/web-components/interaction/BdsToastProvider.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsToastProvider.stories';
 
 Framework-agnostic toast notification provider. Wrap your page content in `<bds-toast-provider>` to enable toast notifications that render in the browser top layer (above fixed/sticky elements). Auto-dismisses after 5 seconds.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/BdsToastProvider.stories.tsx

@@ -37,7 +37,7 @@ function ToastDemo() {
 const meta = {
   title: 'Web Components/Interaction/ToastProvider',
   component: ToastDemo,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
 } satisfies Meta<typeof ToastDemo>;
 

package/src/web-components/interaction/BdsTooltip.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsTooltip.stories';
 
 Framework-agnostic Tooltip custom element. Displays a small informational label on hover and keyboard focus using CSS-only visibility — no JavaScript positioning required.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -52,6 +52,9 @@ Or in HTML without a bundler:
 ### Right placement
 <Canvas of={Stories.Right} />
 
+### Long text
+<Canvas of={Stories.LongText} />
+
 ### All placements
 <Canvas of={Stories.AllPlacements} />
 
@@ -74,10 +77,15 @@ Or in HTML without a bundler:
 
 ## CSS Custom Properties
 
-| Property | Description |
-|----------|-------------|
-| `--tooltip_bg` | Tooltip background colour (default: `var(--bds-color_on-bg)`) |
-| `--tooltip_text` | Tooltip text colour (default: `var(--bds-color_bg)`) |
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--tooltip_bg` | `var(--bds-color_on-bg)` | Tooltip background colour |
+| `--tooltip_text` | `var(--bds-color_bg)` | Tooltip text colour |
+| `--tooltip_radius` | `var(--bds-border_radius--xs)` | Tooltip corner radius |
+| `--tooltip_padding` | `var(--bds-space_xxs) var(--bds-space_s)` | Tooltip padding |
+| `--tooltip_font-size` | `var(--bds-font_size--body--s)` | Tooltip text size |
+| `--tooltip_offset` | `var(--bds-space_xs)` | Gap between the trigger and the tooltip |
+| `--tooltip_max-inline-size` | `20rem` | Maximum inline size before content wraps. The tooltip is as wide as its text (`max-content`) up to this value |
 
 ## Usage in plain HTML
 

package/src/web-components/interaction/BdsTooltip.stories.tsx

@@ -16,14 +16,14 @@ function BdsTooltip({
   return React.createElement(
     'bds-tooltip',
     { content, placement },
-    children ?? React.createElement('button', { type: 'button' }, 'Hover me'),
+    children ?? React.createElement('bds-button', null, 'Hover me'),
   );
 }
 
 const meta = {
   title: 'Web Components/UI/Tooltip',
   component: BdsTooltip,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     content: { control: 'text' },
@@ -44,11 +44,7 @@ export const OnButton: Story = {
     React.createElement(
       'bds-tooltip',
       { content: args.content, placement: args.placement },
-      React.createElement(
-        'button',
-        { type: 'button', style: { padding: '0.5rem 1rem', cursor: 'pointer' } },
-        'Save',
-      ),
+      React.createElement('bds-button', null, 'Save'),
     ),
 };
 
@@ -64,6 +60,14 @@ export const Right: Story = {
   args: { content: 'Appears to the right', placement: 'right' },
 };
 
+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',
+  },
+};
+
 export const AllPlacements: Story = {
   render: () => (
     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: '4rem', padding: '3rem' }}>
@@ -74,11 +78,7 @@ export const AllPlacements: Story = {
           React.createElement(
             'bds-tooltip',
             { content: `Placement: ${placement}`, placement },
-            React.createElement(
-              'button',
-              { type: 'button', style: { padding: '0.5rem 1rem', cursor: 'pointer' } },
-              placement,
-            ),
+            React.createElement('bds-button', null, placement),
           ),
         ),
       )}

package/src/web-components/interaction/bds-button.ts

@@ -70,7 +70,9 @@ export class BdsButton extends LitElement {
       all: unset;
       position: relative;
       font: inherit;
-      padding-inline: var(--bds-space_l);
+      --button_padding-inline--size: var(--bds-space_l);
+
+      padding-inline: var(--button_padding-inline--size);
       display: inline-flex;
       gap: var(--bds-space_xs);
       border-radius: var(--button_radius, var(--bds-border_radius--full));
@@ -120,17 +122,17 @@ export class BdsButton extends LitElement {
     .button.small {
       --button_height:    2.25em;
       --button_font-size: var(--bds-font_size--body--s);
-      padding-inline: var(--bds-space_m);
+      --button_padding-inline--size: var(--bds-space_m);
     }
 
     .button.medium {
       --button_height: 3em;
-      padding-inline: var(--bds-space_l);
+      --button_padding-inline--size: var(--bds-space_l);
     }
 
     .button.large {
       --button_font-size: var(--bds-font_size--heading-3);
-      padding-inline: var(--bds-space_xl);
+      --button_padding-inline--size: var(--bds-space_xl);
     }
 
     /* Pulse */
@@ -173,15 +175,23 @@ export class BdsButton extends LitElement {
       align-items: center;
     }
 
+    /* Icon offset — pulls the icon into the padding so the optical gap between
+       icon and edge matches the gap between label and edge. Defaults to half
+       the size's inline padding (--button_padding-inline--size, set above per
+       size), so it scales automatically with size and with the responsive
+       space tokens. --button_icon-offset is the public override; it is read
+       only as a var() fallback here, never declared on .button, so a value
+       set on the host or an ancestor inherits through the shadow boundary
+       instead of being shadowed by a same-element declaration. */
     .icon-start.has-content {
       display: flex;
-      margin-inline-start: calc(var(--bds-space_s) * -1);
+      margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
       transition: var(--bds-animation_transition);
     }
 
     .icon-end.has-content {
       display: flex;
-      margin-inline-end: calc(var(--bds-space_s) * -1);
+      margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
       transition: var(--bds-animation_transition);
     }
 

package/src/web-components/interaction/bds-dropdown-menu-group.ts

@@ -0,0 +1,72 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+/**
+ * `<bds-dropdown-menu-group>` — a labelled group of `<bds-dropdown-menu-item>`
+ * elements inside a `<bds-dropdown-menu>`.
+ *
+ * The shadow root renders a `role="group"` element named by the visible label
+ * (`aria-labelledby` inside the same shadow root). The label is not focusable;
+ * keyboard navigation in the menu only visits the items.
+ *
+ * Attributes:
+ *   label — visible group label, also the accessible name of the group
+ *
+ * Slots:
+ *   (default) — `<bds-dropdown-menu-item>` elements
+ *
+ * @example
+ * <bds-dropdown-menu-group label="Edit">
+ *   <bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>
+ * </bds-dropdown-menu-group>
+ */
+export class BdsDropdownMenuGroup extends LitElement {
+  static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it here. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+    }
+
+    .label {
+      padding: var(--dropdown_group-label-padding, var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs));
+      font-family: var(--bds-font_family--body);
+      font-size: var(--dropdown_group-label-font-size, var(--bds-font_size--body--s));
+      font-weight: var(--dropdown_group-label-font-weight, var(--bds-font_weight--bold));
+      color: var(--dropdown_group-label-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+    }
+  `;
+
+  static properties = {
+    label: { type: String, reflect: true },
+  };
+
+  declare label: string;
+
+  constructor() {
+    super();
+    this.label = '';
+  }
+
+  render() {
+    return html`
+      <div role="group" aria-labelledby=${this.label ? 'label' : nothing}>
+        ${this.label ? html`<div id="label" class="label">${this.label}</div>` : nothing}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-dropdown-menu-group', BdsDropdownMenuGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-dropdown-menu-group': BdsDropdownMenuGroup;
+  }
+}

package/src/web-components/interaction/bds-dropdown-menu-item.ts

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 /**
  * `<bds-dropdown-menu-item>` — a single item inside a `<bds-dropdown-menu>`.
@@ -6,9 +6,12 @@ import { LitElement, css, html } from 'lit';
  * Attributes:
  *   value       — value associated with this item
  *   disabled    — disables this item
- *   destructive — renders the item in a destructive (red) style
+ *   destructive — renders the item in a destructive (error colour) style
+ *   shortcut    — keyboard shortcut as display text (decorative, `aria-hidden`);
+ *                 the consumer wires the actual key
  *
  * Slots:
+ *   icon      — optional icon shown before the label (decorative)
  *   (default) — item label text
  *
  * Events:
@@ -34,7 +37,7 @@ export class BdsDropdownMenuItem extends LitElement {
     }
 
     :host([disabled]) {
-      opacity: 0.5;
+      opacity: var(--dropdown_item-opacity--disabled, 0.4);
       pointer-events: none;
     }
 
@@ -43,36 +46,67 @@ export class BdsDropdownMenuItem extends LitElement {
       align-items: center;
       gap: var(--bds-space_xs);
       inline-size: 100%;
-      padding: var(--bds-space_xs) var(--bds-space_s);
-      font-size: var(--bds-font_size--body);
+      padding: var(--dropdown_item-padding, var(--bds-space_xs) var(--bds-space_s));
+      font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
       font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
+      color: inherit;
       background: none;
       border: none;
       text-align: start;
       cursor: pointer;
-      border-radius: var(--bds-border_radius--xs);
+      border-radius: var(--dropdown_item-radius, var(--bds-border_radius--xs));
       transition: var(--bds-animation_transition);
     }
 
     :host([destructive]) .item {
-      color: var(--bds-color_error);
+      color: var(--dropdown_item-color--destructive, var(--bds-color_error_on-bg));
+    }
+
+    .item:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
+    .item:not(:disabled):focus-visible {
+      background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+      color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    :host([destructive]) .item:not(:disabled):focus-visible {
+      background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+      color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
     }
 
     @media (hover: hover) and (pointer: fine) {
-      .item:hover {
-        background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
-        color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
+      .item:not(:disabled):hover {
+        background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+        color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
       }
 
-      :host([destructive]) .item:hover {
-        background-color: color-mix(in srgb, var(--bds-color_error) 10%, transparent);
+      :host([destructive]) .item:not(:disabled):hover {
+        background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+        color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
       }
     }
 
-    .item:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
+    .icon[hidden] {
+      display: none;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .label {
+      flex: 1;
+    }
+
+    .shortcut {
+      flex-shrink: 0;
+      color: var(--dropdown_shortcut-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+      font-size: var(--dropdown_shortcut-font-size, var(--bds-font_size--body--s));
     }
   `;
 
@@ -80,17 +114,27 @@ export class BdsDropdownMenuItem extends LitElement {
     value:       { type: String, reflect: true },
     disabled:    { type: Boolean, reflect: true },
     destructive: { type: Boolean, reflect: true },
+    shortcut:    { type: String, reflect: true },
+    _hasIcon:    { state: true },
   };
 
   declare value: string;
   declare disabled: boolean;
   declare destructive: boolean;
+  declare shortcut: string;
+  declare _hasIcon: boolean;
 
   constructor() {
     super();
     this.value = '';
     this.disabled = false;
     this.destructive = false;
+    this.shortcut = '';
+    this._hasIcon = false;
+  }
+
+  private _onIconSlotChange(e: Event) {
+    this._hasIcon = (e.target as HTMLSlotElement).assignedNodes().length > 0;
   }
 
   private _handleClick() {
@@ -120,7 +164,11 @@ export class BdsDropdownMenuItem extends LitElement {
         @click=${this._handleClick}
         @keydown=${this._handleKeydown}
       >
-        <slot></slot>
+        <span class="icon" aria-hidden="true" ?hidden=${!this._hasIcon}>
+          <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        </span>
+        <span class="label"><slot></slot></span>
+        ${this.shortcut ? html`<span class="shortcut" aria-hidden="true">${this.shortcut}</span>` : nothing}
       </button>
     `;
   }

package/src/web-components/interaction/bds-dropdown-menu.spec.ts

@@ -1,6 +1,13 @@
 import { fixture, cleanup } from '../test/helpers';
 import { BdsDropdownMenu } from './bds-dropdown-menu';
 import { BdsDropdownMenuItem } from './bds-dropdown-menu-item';
+import { BdsDropdownMenuGroup } from './bds-dropdown-menu-group';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const itemSource = readFileSync(resolve(process.cwd(), 'src/web-components/interaction/bds-dropdown-menu-item.ts'), 'utf8');
+const groupSource = readFileSync(resolve(process.cwd(), 'src/web-components/interaction/bds-dropdown-menu-group.ts'), 'utf8');
+const menuSource = readFileSync(resolve(process.cwd(), 'src/web-components/interaction/bds-dropdown-menu.ts'), 'utf8');
 
 describe('bds-dropdown-menu', () => {
   it('is registered as a custom element', () => {
@@ -163,3 +170,131 @@ describe('bds-dropdown-menu-item', () => {
     cleanup(el);
   });
 });
+
+describe('bds-dropdown-menu-item colour', () => {
+  it('inherits the colour from the menu panel so --dropdown_on-color applies', () => {
+    expect(String(BdsDropdownMenuItem.styles)).toMatch(/\.item \{[^}]*color:\s*inherit/);
+    expect(String(BdsDropdownMenuItem.styles)).not.toMatch(/\.item \{[^}]*color:\s*var\(--bds-color_on-bg\)/);
+    expect(itemSource).toContain(':host([destructive]) .item {');
+  });
+});
+
+describe('bds-dropdown-menu-item shortcut, icon and destructive', () => {
+  it('renders the shortcut aria-hidden and reflects the attribute', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="edit" shortcut="⌘E">Edit</bds-dropdown-menu-item>') as BdsDropdownMenuItem;
+    const shortcut = el.shadowRoot!.querySelector('.shortcut')!;
+    expect(shortcut.textContent).toBe('⌘E');
+    expect(shortcut.getAttribute('aria-hidden')).toBe('true');
+    expect(el.getAttribute('shortcut')).toBe('⌘E');
+    cleanup(el);
+  });
+
+  it('omits the shortcut element when no shortcut is set', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>');
+    expect(el.shadowRoot!.querySelector('.shortcut')).toBeNull();
+    cleanup(el);
+  });
+
+  it('offers an icon slot before the label, hidden until filled', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>') as BdsDropdownMenuItem;
+    const icon = el.shadowRoot!.querySelector('.icon')!;
+    expect(icon.querySelector('slot[name="icon"]')).toBeTruthy();
+    expect(icon.hasAttribute('hidden')).toBe(true);
+    expect(icon.compareDocumentPosition(el.shadowRoot!.querySelector('.label')!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    cleanup(el);
+  });
+
+  it('reflects the destructive attribute', async () => {
+    const el = await fixture('<bds-dropdown-menu-item value="delete" destructive>Delete</bds-dropdown-menu-item>') as BdsDropdownMenuItem;
+    expect(el.destructive).toBe(true);
+    expect(el.hasAttribute('destructive')).toBe(true);
+    cleanup(el);
+  });
+
+  it.each([
+    '--dropdown_item-padding',
+    '--dropdown_item-radius',
+    '--dropdown_item-font-size',
+    '--dropdown_item-bg--hover',
+    '--dropdown_item-color--hover',
+    '--dropdown_item-opacity--disabled',
+    '--dropdown_item-color--destructive',
+    '--dropdown_item-bg--destructive-hover',
+    '--dropdown_item-color--destructive-hover',
+    '--dropdown_shortcut-color',
+    '--dropdown_shortcut-font-size',
+  ])('reads %s through var() in the item stylesheet', hook => {
+    expect(itemSource).toContain(`var(${hook},`);
+  });
+});
+
+describe('bds-dropdown-menu-group', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-dropdown-menu-group')).toBe(BdsDropdownMenuGroup);
+  });
+
+  it('renders a role="group" named by its visible label', async () => {
+    const el = await fixture('<bds-dropdown-menu-group label="Edit"></bds-dropdown-menu-group>') as BdsDropdownMenuGroup;
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    const labelId = group.getAttribute('aria-labelledby')!;
+    const label = el.shadowRoot!.getElementById(labelId)!;
+    expect(label.textContent?.trim()).toBe('Edit');
+    cleanup(el);
+  });
+
+  it('renders no label element and no aria-labelledby without a label', async () => {
+    const el = await fixture('<bds-dropdown-menu-group></bds-dropdown-menu-group>') as BdsDropdownMenuGroup;
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    expect(group.hasAttribute('aria-labelledby')).toBe(false);
+    expect(el.shadowRoot!.querySelector('.label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('updates the label when the attribute changes', async () => {
+    const el = await fixture('<bds-dropdown-menu-group label="Edit"></bds-dropdown-menu-group>') as BdsDropdownMenuGroup;
+    el.setAttribute('label', 'Danger');
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.label')!.textContent?.trim()).toBe('Danger');
+    cleanup(el);
+  });
+
+  it.each([
+    '--dropdown_group-label-font-size',
+    '--dropdown_group-label-font-weight',
+    '--dropdown_group-label-color',
+    '--dropdown_group-label-padding',
+  ])('reads %s through var() in the group stylesheet', hook => {
+    expect(groupSource).toContain(`var(${hook},`);
+  });
+
+  it('moves focus from the last item of one group to the first of the next', async () => {
+    const el = await fixture(`
+      <bds-dropdown-menu>
+        <button slot="trigger" type="button">Options</button>
+        <bds-dropdown-menu-group label="Edit">
+          <bds-dropdown-menu-item value="a">A</bds-dropdown-menu-item>
+          <bds-dropdown-menu-item value="b">B</bds-dropdown-menu-item>
+        </bds-dropdown-menu-group>
+        <bds-dropdown-menu-group label="Danger">
+          <bds-dropdown-menu-item value="c" destructive>C</bds-dropdown-menu-item>
+        </bds-dropdown-menu-group>
+      </bds-dropdown-menu>
+    `) as BdsDropdownMenu;
+    const items = [...el.querySelectorAll('bds-dropdown-menu-item')] as BdsDropdownMenuItem[];
+    await Promise.all(items.map(item => item.updateComplete));
+    el._open();
+    await el.updateComplete;
+    const buttons = items.map(item => item.shadowRoot!.querySelector<HTMLButtonElement>('button')!);
+    const spy = vi.spyOn(buttons[2], 'focus');
+    buttons[1].focus();
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    expect(spy).toHaveBeenCalled();
+    cleanup(el);
+  });
+});
+
+describe('bds-dropdown-menu panel hooks', () => {
+  it.each(['--dropdown_padding', '--dropdown_border-color'])('reads %s through var()', hook => {
+    expect(menuSource).toContain(`var(${hook},`);
+  });
+});

package/src/web-components/interaction/bds-dropdown-menu.ts

@@ -19,7 +19,8 @@ export type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start'
  *
  * Slots:
  *   trigger   — the activating element (button or similar)
- *   (default) — `<bds-dropdown-menu-item>` elements
+ *   (default) — `<bds-dropdown-menu-item>` elements, optionally wrapped in
+ *               `<bds-dropdown-menu-group label="...">`
  *
  * Events:
  *   bds-open  — fired when the menu opens
@@ -55,15 +56,15 @@ export class BdsDropdownMenu extends LitElement {
       inset-inline-start: 0;
       min-inline-size: 10rem;
       border: var(--dropdown_border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dropdown_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
       --bdc-outline_radius: var(--bds-border_radius--s);
 
       border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
       background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
       color: var(--dropdown_on-color, var(--bds-color_on-bg));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
-        var(--dropdown_shadow, var(--bds-shadow_m));
-      padding: var(--bds-space_xxs);
+        var(--dropdown_shadow, var(--bds-shadow_l));
+      padding: var(--dropdown_padding, var(--bds-space_xxs));
       z-index: var(--bds-z-index_dropdown);
       display: none;
       flex-direction: column;

package/src/web-components/interaction/bds-tab.spec.ts

@@ -14,6 +14,22 @@ describe('bds-tab', () => {
     cleanup(el);
   });
 
+  it('copies the slotted label into data-label to reserve the bold width', async () => {
+    const el = await fixture('<bds-tab>Overview</bds-tab>') as BdsTab;
+    const slot = el.shadowRoot!.querySelector('slot')!;
+    slot.dispatchEvent(new Event('slotchange'));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.label')!.getAttribute('data-label')).toBe('Overview');
+    cleanup(el);
+  });
+
+  it('styles a hidden ::after at the active weight', () => {
+    const css = BdsTab.styles.toString();
+    expect(css).toMatch(/\.label::after\s*\{[^}]*content:\s*attr\(data-label\)/);
+    expect(css).toMatch(/\.label::after\s*\{[^}]*font-weight:\s*var\(--tab_font-weight,\s*var\(--tab_font-weight--active,\s*var\(--bds-font_weight--bold\)\)\)/);
+    expect(css).toMatch(/\.label::after\s*\{[^}]*visibility:\s*hidden/);
+  });
+
   it('is not selected by default', async () => {
     const el = await fixture('<bds-tab>Label</bds-tab>') as BdsTab;
     expect(el.selected).toBe(false);
@@ -72,10 +88,10 @@ describe('bds-tab', () => {
   it('lets the public --tab_color/--tab_border-color tokens win over selected/hover-state defaults', () => {
     const cssText = BdsTab.styles.cssText;
     expect(cssText).toMatch(
-      /\.tab\s*{[^}]*color:\s*var\(--tab_color,\s*var\(--tab_color--state,\s*var\(--bds-color_on-bg\)\)\)/,
+      /\.tab\s*{[^}]*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(cssText).toMatch(
-      /\.tab\s*{[^}]*border-block-end:\s*2px solid var\(--tab_border-color,\s*var\(--tab_border-color--state,\s*transparent\)\)/,
+      /\.tab\s*{[^}]*border-block-end:\s*var\(--tab_indicator-width,\s*3px\) solid var\(--tab_border-color,\s*var\(--tab_border-color--state,\s*transparent\)\)/,
     );
   });
 
@@ -93,4 +109,20 @@ describe('bds-tab', () => {
       /--tab_color--state:\s*var\(--tab_color--hover,/,
     );
   });
+
+  it('styles the resting tab muted and medium, the selected tab strong and bold, and hover in the full text colour', () => {
+    const cssText = BdsTab.styles.cssText;
+    expect(cssText).toMatch(
+      /\.tab\s*{[^}]*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\)\)\)\)/,
+    );
+    expect(cssText).toMatch(
+      /:host\(\[selected\]\)\s*\.tab\s*{[^}]*--tab_color--state:\s*var\(--tab_color--active,\s*var\(--bds-color_on-bg\)\)/,
+    );
+    expect(cssText).toMatch(
+      /:host\(\[selected\]\)\s*\.tab\s*{[^}]*--tab_font-weight--state:\s*var\(--tab_font-weight--active,\s*var\(--bds-font_weight--bold\)\)/,
+    );
+    expect(cssText).toMatch(
+      /--tab_color--state:\s*var\(--tab_color--hover,\s*var\(--bds-color_on-bg\)\)/,
+    );
+  });
 });