@boostdev/design-system-components 2.7.1 → 2.11.0

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

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

@@ -17,6 +17,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsTab 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;
     }
@@ -29,8 +39,13 @@ export class BdsTab extends LitElement {
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       font-weight: var(--bds-font_weight--semibold);
-      color: var(--tab_color, var(--bds-color_on-bg));
-      border-block-end: 2px solid var(--tab_border-color, transparent);
+
+      /* Layered cascade: public overrides (--tab_color, --tab_border-color) win over
+         per-state defaults. Active/hover write to the inner --tab_*--state slot —
+         mirrors the React Tabs.module.css pattern so a consumer's --tab_color
+         override is never shadowed by the selected/hover rules below. */
+      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));
       margin-block-end: -1px;
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -38,8 +53,8 @@ export class BdsTab extends LitElement {
     }
 
     :host([selected]) .tab {
-      --tab_color:        var(--bds-color_interactive_on-bg);
-      --tab_border-color: var(--bds-color_interactive);
+      --tab_color--state:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+      --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
     }
 
     .tab:disabled {
@@ -55,7 +70,7 @@ export class BdsTab extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .tab:not(:disabled, [aria-selected='true']):hover {
-        --tab_color: var(--bds-color_interactive_on-bg);
+        --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
       }
     }
   `;

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

@@ -36,6 +36,23 @@ describe('bds-tabs', () => {
     cleanup(el);
   });
 
+  it('does not select a disabled first tab — activates the first enabled tab instead', async () => {
+    const el = await fixture(`
+      <bds-tabs>
+        <bds-tab slot="tab" disabled>Tab 1</bds-tab>
+        <bds-tab slot="tab">Tab 2</bds-tab>
+        <bds-tab-panel slot="panel">Panel 1</bds-tab-panel>
+        <bds-tab-panel slot="panel">Panel 2</bds-tab-panel>
+      </bds-tabs>
+    `);
+    // Wait for deferred _applyState
+    await Promise.resolve();
+    const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
+    expect(tabs[0].selected).toBe(false);
+    expect(tabs[1].selected).toBe(true);
+    cleanup(el);
+  });
+
   it('first panel is visible, others are hidden by default', async () => {
     const el = await fixture(html);
     await Promise.resolve();
@@ -77,9 +94,10 @@ describe('bds-tabs', () => {
   it('ArrowRight moves to next enabled tab', async () => {
     const el = await fixture(html);
     await Promise.resolve();
-    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    await Promise.resolve();
     const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
+    // Real usage: the keydown originates from the focused (currently active) tab.
+    tabs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    await Promise.resolve();
     expect(tabs[1].selected).toBe(true);
     cleanup(el);
   });
@@ -89,7 +107,7 @@ describe('bds-tabs', () => {
     await Promise.resolve();
     const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
     tabs[2].disabled = true; // ensure disabled is set (Lit property may not reflect from HTML attribute in jsdom)
-    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    tabs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
     // disabled tab is skipped; enabled tabs are 0 and 1 → wraps to last enabled (index 1)
     expect(tabs[1].selected).toBe(true);
     cleanup(el);
@@ -102,7 +120,7 @@ describe('bds-tabs', () => {
     await Promise.all(tabs.map(t => t.updateComplete));
     // Navigate to tab 1 first
     tabs[1].dispatchEvent(new CustomEvent('bds-tab-select', { bubbles: true, composed: true }));
-    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    tabs[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
     expect(tabs[0].selected).toBe(true);
     cleanup(el);
   });
@@ -112,9 +130,78 @@ describe('bds-tabs', () => {
     await Promise.resolve();
     const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
     tabs[2].disabled = true; // ensure disabled is set
-    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    tabs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
     // Last enabled tab is index 1 (tab 3 is disabled)
     expect(tabs[1].selected).toBe(true);
     cleanup(el);
   });
+
+  it('does not hijack Arrow/Home/End keys typed outside a <bds-tab> (e.g. host-level dispatch)', async () => {
+    const el = await fixture(html);
+    await Promise.resolve();
+    const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
+    // Dispatched directly on the <bds-tabs> host — not on a <bds-tab> — must be ignored.
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    await Promise.resolve();
+    expect(tabs[0].selected).toBe(true);
+    expect(tabs[1].selected).toBe(false);
+    cleanup(el);
+  });
+
+  it('does not hijack ArrowLeft pressed inside a tab-panel input (caret movement stays with the input)', async () => {
+    const el = await fixture(`
+      <bds-tabs>
+        <bds-tab slot="tab">Tab 1</bds-tab>
+        <bds-tab slot="tab">Tab 2</bds-tab>
+        <bds-tab-panel slot="panel"><input type="text" /></bds-tab-panel>
+        <bds-tab-panel slot="panel">Panel 2</bds-tab-panel>
+      </bds-tabs>
+    `);
+    await Promise.resolve();
+    const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
+    const input = el.querySelector('input')!;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    await Promise.resolve();
+    expect(tabs[0].selected).toBe(true);
+    expect(tabs[1].selected).toBe(false);
+    cleanup(el);
+  });
+
+  it('wires role/id/aria-controls on tabs and role/id/aria-labelledby on panels', async () => {
+    const el = await fixture(html);
+    await Promise.resolve();
+    const tabs = [...el.querySelectorAll<BdsTab>('bds-tab')];
+    const panels = [...el.querySelectorAll<BdsTabPanel>('bds-tab-panel')];
+
+    tabs.forEach((tab, i) => {
+      expect(tab.getAttribute('role')).toBe('tab');
+      expect(tab.id).toBeTruthy();
+      expect(tab.getAttribute('aria-controls')).toBe(panels[i].id);
+    });
+
+    panels.forEach((panel, i) => {
+      expect(panel.getAttribute('role')).toBe('tabpanel');
+      expect(panel.id).toBeTruthy();
+      expect(panel.getAttribute('aria-labelledby')).toBe(tabs[i].id);
+    });
+
+    cleanup(el);
+  });
+
+  it('preserves a consumer-supplied id instead of overwriting it', async () => {
+    const el = await fixture(`
+      <bds-tabs>
+        <bds-tab slot="tab" id="custom-tab-id">Tab 1</bds-tab>
+        <bds-tab-panel slot="panel" id="custom-panel-id">Panel 1</bds-tab-panel>
+      </bds-tabs>
+    `);
+    await Promise.resolve();
+    const tab = el.querySelector<BdsTab>('bds-tab')!;
+    const panel = el.querySelector<BdsTabPanel>('bds-tab-panel')!;
+    expect(tab.id).toBe('custom-tab-id');
+    expect(panel.id).toBe('custom-panel-id');
+    expect(tab.getAttribute('aria-controls')).toBe('custom-panel-id');
+    expect(panel.getAttribute('aria-labelledby')).toBe('custom-tab-id');
+    cleanup(el);
+  });
 });

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

@@ -26,6 +26,16 @@ import type { BdsTabPanel } from './bds-tab-panel';
  */
 export class BdsTabs 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: flex;
       flex-direction: column;
@@ -40,6 +50,7 @@ export class BdsTabs extends LitElement {
 
   private _activeIndex = 0;
   private _mo: MutationObserver | null = null;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
 
   connectedCallback() {
     super.connectedCallback();
@@ -70,7 +81,10 @@ export class BdsTabs extends LitElement {
   private get _enabledIndexes(): number[] {
     return this._tabs
       .map((tab, i) => ({ tab, i }))
-      .filter(({ tab }) => !tab.disabled)
+      // Check the attribute too: on first render the reflected `disabled`
+      // property may not be set yet when _applyState runs, but the authored
+      // `disabled` attribute is already present.
+      .filter(({ tab }) => !tab.disabled && !tab.hasAttribute('disabled'))
       .map(({ i }) => i);
   }
 
@@ -83,8 +97,28 @@ export class BdsTabs extends LitElement {
       this._activeIndex = Math.max(0, tabs.length - 1);
     }
 
+    // A disabled tab must never be the active one. If the current active index
+    // is not an enabled tab (e.g. the default index-0 tab is <bds-tab disabled>),
+    // move selection to the first enabled tab — matching the React Tabs behaviour.
+    if (this._enabledIndexes.length && !this._enabledIndexes.includes(this._activeIndex)) {
+      this._activeIndex = this._enabledIndexes[0];
+    }
+
+    // Assign role/id/aria-* on the light-DOM host elements (not the shadow-internal
+    // button/slot) — <bds-tab> and <bds-tab-panel> share the light-DOM tree with
+    // <bds-tabs>, so id-based aria-controls/aria-labelledby references resolve.
+    // Shadow-internal ids would not be valid IDREF targets from outside their root.
     tabs.forEach((tab, i) => {
+      const panel = panels[i];
       tab.selected = (i === this._activeIndex);
+      tab.setAttribute('role', 'tab');
+      if (!tab.id) tab.id = `bds-tabs-${this._uid}-tab-${i}`;
+      if (panel) {
+        if (!panel.id) panel.id = `bds-tabs-${this._uid}-panel-${i}`;
+        tab.setAttribute('aria-controls', panel.id);
+        panel.setAttribute('role', 'tabpanel');
+        panel.setAttribute('aria-labelledby', tab.id);
+      }
     });
 
     panels.forEach((panel, i) => {
@@ -106,6 +140,13 @@ export class BdsTabs extends LitElement {
   };
 
   private _handleKeydown = (e: KeyboardEvent) => {
+    // Only handle Arrow/Home/End when the key originates from a <bds-tab> (i.e. a
+    // tab button has focus). Without this guard the host-level listener hijacked
+    // these keys anywhere in the light DOM, including tab-panel content such as
+    // text inputs, sliders, or carousels.
+    const origin = e.target as Element | null;
+    if (!origin?.closest('bds-tab')) return;
+
     const enabled = this._enabledIndexes;
     if (!enabled.length) return;