@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
@@ -13,6 +13,7 @@ export type DrawerSide = 'left' | 'right';
  * Attributes:
  *   open — boolean; controlled open state
  *   side — "left" | "right" (default: "right")
+ *   aria-label — optional; overrides the default accessible name (the title slot)
  *
  * Slots:
  *   title   — drawer title text
@@ -27,10 +28,20 @@ export type DrawerSide = 'left' | 'right';
  *   <span slot="title">Settings</span>
  *   <p>Drawer content</p>
  * </bds-drawer>
- * <button commandfor="my-drawer" command="show-modal">Open</button>
+ * <button commandfor="my-drawer" command="--show-modal">Open</button>
  */
 export class BdsDrawer 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: contents;
     }
@@ -59,6 +70,13 @@ export class BdsDrawer extends LitElement {
         overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
     }
 
+    /* Closed native <dialog> must be display:none — the flex layout above would
+       otherwise keep it rendered (off-screen, focusable, causing overflow). The
+       display/overlay allow-discrete transitions above animate the none↔flex. */
+    .drawer:not([open]) {
+      display: none;
+    }
+
     :host([side='left']) .drawer {
       inset-inline: 0 auto;
       translate: -100% 0;
@@ -84,8 +102,8 @@ export class BdsDrawer extends LitElement {
       opacity: 0;
       transition:
         opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
-        display var(--bds-animation_transition-duration) allow-discrete,
-        overlay var(--bds-animation_transition-duration) allow-discrete;
+        display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+        overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
     }
 
     .drawer[open]::backdrop {
@@ -117,8 +135,8 @@ export class BdsDrawer extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      inline-size: 2rem;
-      block-size: 2rem;
+      inline-size: 2.75rem;
+      block-size: 2.75rem;
       border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -159,10 +177,12 @@ export class BdsDrawer extends LitElement {
   static properties = {
     open: { type: Boolean, reflect: true },
     side: { type: String, reflect: true },
+    ariaLabel: { type: String, attribute: 'aria-label' },
   };
 
   declare open: boolean;
   declare side: DrawerSide;
+  declare ariaLabel: string | null;
 
   private _triggerEl: Element | null = null;
 
@@ -170,6 +190,7 @@ export class BdsDrawer extends LitElement {
     super();
     this.open = false;
     this.side = 'right';
+    this.ariaLabel = null;
   }
 
   connectedCallback() {
@@ -180,6 +201,7 @@ export class BdsDrawer extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('command', this._onCommand);
+    if (this.open) document.body.style.overflow = '';
   }
 
   updated(changed: Map<string, unknown>) {
@@ -206,8 +228,8 @@ export class BdsDrawer extends LitElement {
 
   private _onCommand = (e: Event) => {
     const command = (e as CommandEvent).command;
-    if (command === 'show-modal') this._openDrawer();
-    else if (command === 'close') this._closeDrawer();
+    if (command === '--show-modal') this._openDrawer();
+    else if (command === '--close') this._closeDrawer();
   };
 
   private _openDrawer() {
@@ -223,14 +245,12 @@ export class BdsDrawer extends LitElement {
     this.dispatchEvent(new CustomEvent('bds-close', { bubbles: true, composed: true }));
   }
 
+  // Close on backdrop click. The dialog element's own box is only the visible
+  // panel — clicking the ::backdrop dispatches with e.target === the dialog
+  // itself, so this correctly ignores clicks (including keyboard-activated
+  // synthetic clicks at 0,0) on controls inside the panel.
   private _handleBackdropClick(e: MouseEvent) {
-    const dialog = this._dialog;
-    if (!dialog) return;
-    const rect = dialog.getBoundingClientRect();
-    const outside =
-      e.clientX < rect.left || e.clientX > rect.right ||
-      e.clientY < rect.top  || e.clientY > rect.bottom;
-    if (outside) this._closeDrawer();
+    if (e.target === this._dialog) this._closeDrawer();
   }
 
   private _handleCancel(e: Event) {
@@ -243,13 +263,24 @@ export class BdsDrawer extends LitElement {
     const dialog = this._dialog;
     if (!dialog) return;
     const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE));
-    if (focusable.length === 0) return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
+    // Also include slotted elements from light DOM via the title + default slots
+    const slots = Array.from(dialog.querySelectorAll<HTMLSlotElement>('slot'));
+    const slottedFocusable = slots.flatMap(slot =>
+      slot.assignedElements({ flatten: true })
+        .flatMap(el => [
+          ...(el.matches(FOCUSABLE) ? [el as HTMLElement] : []),
+          ...Array.from(el.querySelectorAll<HTMLElement>(FOCUSABLE)),
+        ]),
+    );
+    const all = [...focusable, ...slottedFocusable];
+    if (all.length === 0) return;
+    const first = all[0];
+    const last = all[all.length - 1];
+    const active = this.shadowRoot?.activeElement ?? document.activeElement;
     if (e.shiftKey) {
-      if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+      if (active === first) { e.preventDefault(); last.focus(); }
     } else {
-      if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+      if (active === last) { e.preventDefault(); first.focus(); }
     }
   }
 
@@ -258,12 +289,14 @@ export class BdsDrawer extends LitElement {
       <dialog
         class="drawer"
         aria-modal="true"
+        aria-label=${this.ariaLabel ?? nothing}
+        aria-labelledby=${this.ariaLabel ? nothing : 'title'}
         @click=${this._handleBackdropClick}
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}
       >
         <div class="header">
-          <span class="title"><slot name="title"></slot></span>
+          <span class="title" id="title"><slot name="title"></slot></span>
           <button
             type="button"
             class="close-button"

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

@@ -19,6 +19,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsDropdownMenuItem 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;
     }
@@ -51,7 +61,8 @@ export class BdsDropdownMenuItem extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .item:hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
+        color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
       }
 
       :host([destructive]) .item:hover {

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