@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -66,6 +66,69 @@ describe('bds-dropdown-menu', () => {
     expect(el.open).toBe(false);
     cleanup(el);
   });
+
+  it('wires aria-haspopup, aria-controls and aria-expanded onto the slotted trigger', async () => {
+    const el = await fixture(`
+      <bds-dropdown-menu>
+        <button slot="trigger" type="button">Options</button>
+        <bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>
+      </bds-dropdown-menu>
+    `) as BdsDropdownMenu;
+    await new Promise(r => requestAnimationFrame(() => r(null)));
+    const trigger = el.querySelector('button[slot="trigger"]')!;
+    const panel = el.shadowRoot!.querySelector('.panel')!;
+
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    expect(trigger.getAttribute('aria-controls')).toBe(panel.id);
+    expect(panel.id).not.toBe('');
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+
+    cleanup(el);
+  });
+
+  it('keeps aria-expanded on the trigger in sync with open/close', async () => {
+    const el = await fixture(`
+      <bds-dropdown-menu>
+        <button slot="trigger" type="button">Options</button>
+        <bds-dropdown-menu-item value="edit">Edit</bds-dropdown-menu-item>
+      </bds-dropdown-menu>
+    `) as BdsDropdownMenu;
+    await new Promise(r => requestAnimationFrame(() => r(null)));
+    const trigger = el.querySelector('button[slot="trigger"]')!;
+
+    el._open();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+
+    el._close();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+
+    cleanup(el);
+  });
+
+  it('focuses the first item on Home and the last item on End', async () => {
+    const el = await fixture(`
+      <bds-dropdown-menu>
+        <button slot="trigger" type="button">Options</button>
+        <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-item value="c">C</bds-dropdown-menu-item>
+      </bds-dropdown-menu>
+    `) as BdsDropdownMenu;
+    const items = [...el.querySelectorAll('bds-dropdown-menu-item')] as BdsDropdownMenuItem[];
+    el._open();
+    await Promise.all(items.map(item => item.updateComplete));
+
+    const buttons = items.map(item => item.shadowRoot!.querySelector<HTMLButtonElement>('button')!);
+    const focusSpies = buttons.map(btn => vi.spyOn(btn, 'focus'));
+
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    expect(focusSpies[2]).toHaveBeenCalled();
+
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    expect(focusSpies[0]).toHaveBeenCalled();
+
+    cleanup(el);
+  });
 });
 
 describe('bds-dropdown-menu-item', () => {

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

@@ -6,9 +6,12 @@ export type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start'
 /**
  * `<bds-dropdown-menu>` — anchored dropdown menu with keyboard navigation.
  *
- * Uses the native Popover API for the floating panel (light-dismiss, top-layer).
- * The trigger slot element controls open/close. The component handles keyboard
- * navigation (Arrow keys, Escape, Tab) and focus management.
+ * The panel is an absolutely-positioned element inside the shadow root (not
+ * the native Popover API / top layer) — it can be clipped by an ancestor's
+ * `overflow` or stacking context. Light-dismiss is implemented via a
+ * document-level `click` listener. The trigger slot element controls
+ * open/close. The component handles keyboard navigation (Arrow keys, Home,
+ * End, Escape, Tab) and focus management.
  *
  * Attributes:
  *   open      — controls open/closed state (reflected)
@@ -31,6 +34,16 @@ export type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start'
  */
 export class BdsDropdownMenu extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-block;
       position: relative;
@@ -41,11 +54,17 @@ export class BdsDropdownMenu extends LitElement {
       inset-block-start: calc(100% + var(--bds-space_xxs));
       inset-inline-start: 0;
       min-inline-size: 10rem;
-      background-color: var(--bds-color_bg);
-      border-radius: var(--bds-border_radius--s);
-      box-shadow: var(--bds-shadow_m);
+      border: var(--dropdown_border, none);
+      --bdc_color: currentcolor;
+      --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));
+      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);
-      z-index: var(--bds-z-index_dropdown, 200);
+      z-index: var(--bds-z-index_dropdown);
       display: none;
       flex-direction: column;
     }
@@ -81,6 +100,13 @@ export class BdsDropdownMenu extends LitElement {
   declare open: boolean;
   declare placement: DropdownMenuPlacement;
 
+  // Stable id for aria-controls wiring from the slotted trigger to the panel
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  private get _panelId(): string {
+    return `bds-dropdown-panel-${this._uid}`;
+  }
+
   constructor() {
     super();
     this.open = false;
@@ -115,6 +141,7 @@ export class BdsDropdownMenu extends LitElement {
   _open() {
     if (this.open) return;
     this.open = true;
+    this._trigger?.setAttribute('aria-expanded', 'true');
     this.dispatchEvent(new CustomEvent('bds-open', { bubbles: true, composed: true }));
     // Focus first item after render
     this.updateComplete.then(() => {
@@ -125,6 +152,7 @@ export class BdsDropdownMenu extends LitElement {
   _close() {
     if (!this.open) return;
     this.open = false;
+    this._trigger?.setAttribute('aria-expanded', 'false');
     this.dispatchEvent(new CustomEvent('bds-close', { bubbles: true, composed: true }));
     this._trigger?.focus();
   }
@@ -160,6 +188,12 @@ export class BdsDropdownMenu extends LitElement {
       e.preventDefault();
       const prev = (focused - 1 + items.length) % items.length;
       items[prev]?.shadowRoot?.querySelector<HTMLElement>('button')?.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      items[0]?.shadowRoot?.querySelector<HTMLElement>('button')?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      items[items.length - 1]?.shadowRoot?.querySelector<HTMLElement>('button')?.focus();
     } else if (e.key === 'Tab') {
       this._close();
     }
@@ -174,6 +208,9 @@ export class BdsDropdownMenu extends LitElement {
     if (trigger) {
       trigger.removeEventListener('click', this._handleTriggerClick);
       trigger.addEventListener('click', this._handleTriggerClick);
+      trigger.setAttribute('aria-haspopup', 'menu');
+      trigger.setAttribute('aria-controls', this._panelId);
+      trigger.setAttribute('aria-expanded', String(this.open));
     }
   }
 
@@ -181,6 +218,7 @@ export class BdsDropdownMenu extends LitElement {
     return html`
       <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
       <div
+        id=${this._panelId}
         class="panel"
         role="menu"
         aria-hidden=${!this.open ? 'true' : 'false'}

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

@@ -101,19 +101,93 @@ describe('bds-popover', () => {
 
   it('injects a unique anchor-name CSS custom property on :host', async () => {
     const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>');
-    const anchorValue = el.style.getPropertyValue('--bds-popover-anchor');
-    expect(anchorValue).toMatch(/^--bds-popover-[a-z0-9]+$/);
+    const anchorValue = el.style.getPropertyValue('--popover-anchor');
+    expect(anchorValue).toMatch(/^--popover-[a-z0-9]+$/);
     cleanup(el);
   });
 
-  it('panel has role="region" and aria-label="Popover"', async () => {
+  it('panel omits role/aria-label by default (no aria-label attribute)', async () => {
     const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>');
     const panel = el.shadowRoot!.querySelector('.panel');
+    expect(panel!.hasAttribute('role')).toBe(false);
+    expect(panel!.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+
+  it('forwards host aria-label to the panel and sets role="region"', async () => {
+    const el = await fixture(
+      '<bds-popover aria-label="Notifications"><button slot="trigger">Open</button></bds-popover>',
+    );
+    const panel = el.shadowRoot!.querySelector('.panel');
     expect(panel!.getAttribute('role')).toBe('region');
-    expect(panel!.getAttribute('aria-label')).toBe('Popover');
+    expect(panel!.getAttribute('aria-label')).toBe('Notifications');
     cleanup(el);
   });
 
+  describe('trigger ARIA wiring', () => {
+    it('sets aria-haspopup and aria-controls on the slotted trigger', async () => {
+      const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>');
+      await new Promise(r => requestAnimationFrame(() => r(null)));
+      const trigger = el.querySelector('button')!;
+      expect(trigger.getAttribute('aria-haspopup')).toBe('true');
+      expect(trigger.getAttribute('aria-controls')).toBeTruthy();
+      const panel = el.shadowRoot!.querySelector('.panel')!;
+      expect(trigger.getAttribute('aria-controls')).toBe(panel.id);
+      cleanup(el);
+    });
+
+    it('sets aria-expanded="false" on the trigger by default', async () => {
+      const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>');
+      await new Promise(r => requestAnimationFrame(() => r(null)));
+      const trigger = el.querySelector('button')!;
+      expect(trigger.getAttribute('aria-expanded')).toBe('false');
+      cleanup(el);
+    });
+
+    it('flips the trigger aria-expanded to "true" when opened', async () => {
+      const el = await fixture('<bds-popover><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+      await new Promise(r => requestAnimationFrame(() => r(null)));
+      const trigger = el.querySelector('button')!;
+      el.shadowRoot!.querySelector('slot[name="trigger"]')!
+        .dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(trigger.getAttribute('aria-expanded')).toBe('true');
+      cleanup(el);
+    });
+  });
+
+  describe('focus restoration on close', () => {
+    it('restores focus to the trigger when Escape closes with focus inside the panel', async () => {
+      const el = await fixture(
+        '<bds-popover open><button slot="trigger">Open</button></bds-popover>',
+      ) as BdsPopover;
+      await new Promise(r => requestAnimationFrame(() => r(null)));
+      const trigger = el.querySelector('button[slot="trigger"]') as HTMLElement;
+      // Focus is inside the popover (on the trigger itself) when Escape fires.
+      trigger.focus();
+      expect(document.activeElement).toBe(trigger);
+      const focusSpy = vi.spyOn(trigger, 'focus');
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await el.updateComplete;
+      expect(focusSpy).toHaveBeenCalled();
+      cleanup(el);
+    });
+
+    it('does not steal focus when outside click closes the panel', async () => {
+      const outside = document.createElement('button');
+      document.body.appendChild(outside);
+      const el = await fixture('<bds-popover open><button slot="trigger">Open</button></bds-popover>') as BdsPopover;
+      await new Promise(r => requestAnimationFrame(() => r(null)));
+      outside.focus();
+      expect(document.activeElement).toBe(outside);
+      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+      await el.updateComplete;
+      expect(document.activeElement).toBe(outside);
+      cleanup(el);
+      outside.remove();
+    });
+  });
+
   describe('Invoker Commands API (command event on host)', () => {
     it('opens on --open command', async () => {
       const el = await fixture('<bds-popover id="p1"><button slot="trigger">T</button></bds-popover>') as BdsPopover;
@@ -165,8 +239,8 @@ describe('bds-popover', () => {
   it('two instances get different anchor names', async () => {
     const a = await fixture('<bds-popover><button slot="trigger">A</button></bds-popover>');
     const b = await fixture('<bds-popover><button slot="trigger">B</button></bds-popover>');
-    const anchorA = a.style.getPropertyValue('--bds-popover-anchor');
-    const anchorB = b.style.getPropertyValue('--bds-popover-anchor');
+    const anchorA = a.style.getPropertyValue('--popover-anchor');
+    const anchorB = b.style.getPropertyValue('--popover-anchor');
     expect(anchorA).not.toBe(anchorB);
     cleanup(a);
     cleanup(b);

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

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 export type PopoverPlacement = 'bottom' | 'top' | 'left' | 'right';
 
@@ -10,11 +10,14 @@ export type PopoverPlacement = 'bottom' | 'top' | 'left' | 'right';
  * overflow the viewport (`@position-try` fallbacks).
  *
  * Attributes:
- *   placement — "bottom" (default) | "top" | "left" | "right"
- *   open      — boolean; reflects whether the panel is visible
+ *   placement  — "bottom" (default) | "top" | "left" | "right"
+ *   open       — boolean; reflects whether the panel is visible
+ *   aria-label — accessible name for the panel; when present the panel gets
+ *                `role="region"` (mirrors the React implementation)
  *
  * Slots:
- *   trigger   — the element that opens/closes the panel on click
+ *   trigger   — the element that opens/closes the panel on click. Receives
+ *               `aria-haspopup`, `aria-controls` and `aria-expanded` wiring.
  *   (default) — panel content
  *
  * Events:
@@ -29,6 +32,16 @@ export type PopoverPlacement = 'bottom' | 'top' | 'left' | 'right';
  */
 export class BdsPopover extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       position: relative;
@@ -39,19 +52,23 @@ export class BdsPopover extends LitElement {
        gets its own unique name without colliding with siblings. */
     .wrapper {
       display: inline-flex;
-      anchor-name: var(--bds-popover-anchor);
+      anchor-name: var(--popover-anchor);
     }
 
     .panel {
       display: none;
-      position: absolute;
-      position-anchor: var(--bds-popover-anchor);
+
+      /* position: fixed (not absolute) — containing block is the viewport,
+         so the panel escapes ancestor overflow:hidden/scroll clipping and
+         stacking contexts, matching the React implementation. */
+      position: fixed;
+      position-anchor: var(--popover-anchor);
       margin: 0;
-      overflow-y: auto;
+      overflow-block: auto;
       z-index: var(--popover_z-index, 100);
-      min-width: 12rem;
-      max-width: var(--popover_max-width, 20rem);
-      max-height: var(--popover_max-height, 80dvh);
+      min-inline-size: 12rem;
+      max-inline-size: var(--popover_max-width, 20rem);
+      max-block-size: var(--popover_max-height, 80dvh);
       padding: var(--bds-space_m);
       border: var(--popover_border, none);
       --bdc_color: currentcolor;
@@ -72,86 +89,94 @@ export class BdsPopover extends LitElement {
     .panel[data-placement='bottom'] {
       top: anchor(bottom);
       left: anchor(left);
-      margin-top: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-top, --bds-popover-right, --bds-popover-left;
+      margin-block-start: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-top, --popover-right, --popover-left;
     }
 
     .panel[data-placement='top'] {
       bottom: anchor(top);
       left: anchor(left);
-      margin-bottom: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-bottom, --bds-popover-right, --bds-popover-left;
+      margin-block-end: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-bottom, --popover-right, --popover-left;
     }
 
     .panel[data-placement='right'] {
       top: anchor(top);
       left: anchor(right);
-      margin-left: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-left, --bds-popover-bottom, --bds-popover-top;
+      margin-inline-start: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-left, --popover-bottom, --popover-top;
     }
 
     .panel[data-placement='left'] {
       top: anchor(top);
       right: anchor(left);
-      margin-right: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-right, --bds-popover-bottom, --bds-popover-top;
+      margin-inline-end: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-right, --popover-bottom, --popover-top;
     }
 
     /* Fallback placements */
 
-    @position-try --bds-popover-bottom {
+    @position-try --popover-bottom {
       top: anchor(bottom);
       right: unset;
       bottom: unset;
       left: anchor(left);
       margin: 0;
-      margin-top: var(--bds-space_xs, 8px);
+      margin-block-start: var(--bds-space_xs, 8px);
     }
 
-    @position-try --bds-popover-top {
+    @position-try --popover-top {
       top: unset;
       right: unset;
       bottom: anchor(top);
       left: anchor(left);
       margin: 0;
-      margin-bottom: var(--bds-space_xs, 8px);
+      margin-block-end: var(--bds-space_xs, 8px);
     }
 
-    @position-try --bds-popover-right {
+    @position-try --popover-right {
       top: anchor(top);
       right: unset;
       bottom: unset;
       left: anchor(right);
       margin: 0;
-      margin-left: var(--bds-space_xs, 8px);
+      margin-inline-start: var(--bds-space_xs, 8px);
     }
 
-    @position-try --bds-popover-left {
+    @position-try --popover-left {
       top: anchor(top);
       right: anchor(left);
       bottom: unset;
       left: unset;
       margin: 0;
-      margin-right: var(--bds-space_xs, 8px);
+      margin-inline-end: var(--bds-space_xs, 8px);
     }
   `;
 
   static properties = {
     placement: { type: String, reflect: true },
     open:      { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: 'aria-label' },
   };
 
   declare placement: PopoverPlacement;
   declare open: boolean;
+  declare ariaLabel: string | null;
 
   private _anchorName: string;
+  private _panelId: string;
+  private _triggerEl: HTMLElement | null = null;
 
   constructor() {
     super();
     this.placement = 'bottom';
     this.open = false;
+    this.ariaLabel = null;
     const uid = Math.random().toString(36).slice(2, 8);
-    this._anchorName = `--bds-popover-${uid}`;
+    // Non-`--bds-` prefixed — these are internal coordination idents, not
+    // foundation-owned tokens, so they must not squat the `--bds-` namespace.
+    this._anchorName = `--popover-${uid}`;
+    this._panelId = `bds-popover-panel-${uid}`;
   }
 
   connectedCallback() {
@@ -159,7 +184,7 @@ export class BdsPopover extends LitElement {
     // Inject the unique anchor-name as a CSS custom property so both
     // `.wrapper` (anchor-name) and `.panel` (position-anchor) reference
     // the same value without hard-coding it in the shared static styles.
-    this.style.setProperty('--bds-popover-anchor', this._anchorName);
+    this.style.setProperty('--popover-anchor', this._anchorName);
     document.addEventListener('keydown', this._onKeydown);
     document.addEventListener('mousedown', this._onOutsideClick);
     // Invoker Commands API — host is in light DOM so commandfor can reference its id.
@@ -199,25 +224,51 @@ export class BdsPopover extends LitElement {
   private _open() {
     if (this.open) return;
     this.open = true;
+    this._triggerEl?.setAttribute('aria-expanded', 'true');
     this.dispatchEvent(new CustomEvent('bds-open', { bubbles: true, composed: true }));
   }
 
   private _close() {
     if (!this.open) return;
     this.open = false;
+    this._triggerEl?.setAttribute('aria-expanded', 'false');
     this.dispatchEvent(new CustomEvent('bds-close', { bubbles: true, composed: true }));
+    // Restore focus to the trigger only if it was inside this popover (panel
+    // content or the trigger itself) — an outside click that closes the
+    // panel has already moved focus elsewhere and should not be overridden.
+    if (this.contains(document.activeElement)) {
+      this._triggerEl?.focus();
+    }
+  }
+
+  // Track the slotted trigger so aria-expanded/haspopup/controls can be kept
+  // in sync and focus can be restored on close (mirrors the React
+  // cloneElement wiring and bds-dropdown-menu's trigger-tracking pattern).
+  private _onTriggerSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this._triggerEl = (slot.assignedElements()[0] as HTMLElement) ?? null;
+    if (this._triggerEl) {
+      this._triggerEl.setAttribute('aria-haspopup', 'true');
+      this._triggerEl.setAttribute('aria-controls', this._panelId);
+      this._triggerEl.setAttribute('aria-expanded', String(this.open));
+    }
   }
 
   render() {
     return html`
       <span class="wrapper">
-        <slot name="trigger" @click=${this._toggle}></slot>
+        <slot
+          name="trigger"
+          @click=${this._toggle}
+          @slotchange=${this._onTriggerSlotChange}
+        ></slot>
       </span>
       <div
         class="panel ${this.open ? 'open' : ''}"
         data-placement=${this.placement}
-        role="region"
-        aria-label="Popover"
+        id=${this._panelId}
+        role=${this.ariaLabel ? 'region' : nothing}
+        aria-label=${this.ariaLabel ?? nothing}
       >
         <slot></slot>
       </div>

package/src/web-components/interaction/bds-skip-link.spec.ts

@@ -39,4 +39,22 @@ describe('bds-skip-link', () => {
     expect(el.textContent?.trim()).toBe('Go to main');
     cleanup(el);
   });
+
+  it('uses a themeable z-index token with a fallback instead of a hardcoded value', () => {
+    const cssText = BdsSkipLink.styles.cssText;
+    expect(cssText).toContain('z-index: var(--skip-link_z-index, var(--bds-z-index_xl))');
+    expect(cssText).not.toContain('z-index: 9999');
+  });
+
+  it('exposes the --skip-link_border hook and the bdc inset focus-border chain', () => {
+    const cssText = BdsSkipLink.styles.cssText;
+    expect(cssText).toContain('border: var(--skip-link_border, none)');
+    expect(cssText).toMatch(/box-shadow:\s*inset 0 0 0 var\(--bdc-outline_width\) var\(--bdc_color\)/);
+    expect(cssText).toContain('var(--skip-link_shadow, var(--bdc-outline_shadow))');
+  });
+
+  it('guards the slide-in transition with prefers-reduced-motion', () => {
+    const cssText = BdsSkipLink.styles.cssText;
+    expect(cssText).toMatch(/@media \(prefers-reduced-motion: reduce\)\s*{\s*\.skip-link\s*{\s*transition:\s*none;/);
+  });
 });

package/src/web-components/interaction/bds-skip-link.ts

@@ -17,24 +17,39 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsSkipLink extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
 
     .skip-link {
       position: absolute;
-      inset-block-start: var(--bds-space_s);
-      inset-inline-start: var(--bds-space_s);
-      z-index: 9999;
-      padding: var(--bds-space_xs) var(--bds-space_m);
+      inset-block-start: var(--skip-link_inset, var(--bds-space_s));
+      inset-inline-start: var(--skip-link_inset, var(--bds-space_s));
+      z-index: var(--skip-link_z-index, var(--bds-z-index_xl));
+      padding: var(--skip-link_padding, var(--bds-space_xs) var(--bds-space_m));
       background-color: var(--bds-color_bg);
       color: var(--bds-color_on-bg);
-      border-radius: var(--bds-border_radius--s);
+      border-radius: var(--skip-link_radius, var(--bds-border_radius--s));
       font-weight: var(--bds-font_weight--semibold);
-      font-size: var(--bds-font_size--body);
+      font-size: var(--skip-link_font-size, var(--bds-font_size--body));
       text-decoration: none;
-      box-shadow: var(--bds-shadow_m);
-      transform: translateY(calc(-100% - var(--bds-space_s)));
+
+      --bdc_color: var(--color_focus, var(--bds-color_interactive));
+
+      border: var(--skip-link_border, none);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+        var(--skip-link_shadow, var(--bdc-outline_shadow));
+      transform: translateY(calc(-100% - var(--skip-link_inset, var(--bds-space_s))));
       transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
@@ -43,6 +58,12 @@ export class BdsSkipLink extends LitElement {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skip-link {
+        transition: none;
+      }
+    }
   `;
 
   static properties = {

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

@@ -14,6 +14,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsTabPanel extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
       padding-block-start: var(--bds-space_m);

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

@@ -68,4 +68,29 @@ describe('bds-tab', () => {
     expect(btn.hasAttribute('disabled')).toBe(true);
     cleanup(el);
   });
+
+  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\)\)\)/,
+    );
+    expect(cssText).toMatch(
+      /\.tab\s*{[^}]*border-block-end:\s*2px solid var\(--tab_border-color,\s*var\(--tab_border-color--state,\s*transparent\)\)/,
+    );
+  });
+
+  it('has the selected/hover rules write only to the internal --tab_*--state slots, not the public tokens', () => {
+    const cssText = BdsTab.styles.cssText;
+    expect(cssText).not.toMatch(/:host\(\[selected\]\)\s*\.tab\s*{[^}]*--tab_color:/);
+    expect(cssText).not.toMatch(/:host\(\[selected\]\)\s*\.tab\s*{[^}]*--tab_border-color:/);
+    expect(cssText).toMatch(
+      /:host\(\[selected\]\)\s*\.tab\s*{[^}]*--tab_color--state:\s*var\(--tab_color--active,/,
+    );
+    expect(cssText).toMatch(
+      /:host\(\[selected\]\)\s*\.tab\s*{[^}]*--tab_border-color--state:\s*var\(--tab_border-color--active,/,
+    );
+    expect(cssText).toMatch(
+      /--tab_color--state:\s*var\(--tab_color--hover,/,
+    );
+  });
 });