@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -37,12 +37,29 @@ describe('bds-collapsible', () => {
     const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>') as BdsCollapsible;
     const handler = vi.fn();
     el.addEventListener('bds-toggle', handler);
-    // jsdom does not fire the native toggle event on summary click;
-    // dispatch it directly on the <details> element instead.
+    // jsdom does not simulate a real click-driven state change, so emulate it:
+    // flip the native <details> element's own `open` property first (what the
+    // browser does before dispatching), then fire the "toggle" event it would emit.
     const details = el.shadowRoot!.querySelector('details')!;
+    details.open = true;
     details.dispatchEvent(new Event('toggle', { bubbles: false }));
     await el.updateComplete;
     expect(handler).toHaveBeenCalledOnce();
+    expect(handler.mock.calls[0][0].detail).toEqual({ open: true });
+    expect(el.open).toBe(true);
+    cleanup(el);
+  });
+
+  it('does not dispatch a redundant bds-toggle when the toggle event fires without a real state change', async () => {
+    const el = await fixture('<bds-collapsible><span slot="summary">Title</span><p>Content</p></bds-collapsible>') as BdsCollapsible;
+    const handler = vi.fn();
+    el.addEventListener('bds-toggle', handler);
+    // Native <details> "toggle" event coalesces and only fires on real state changes;
+    // a spurious dispatch with no actual open-state change must be a no-op.
+    const details = el.shadowRoot!.querySelector('details')!;
+    details.dispatchEvent(new Event('toggle', { bubbles: false }));
+    await el.updateComplete;
+    expect(handler).not.toHaveBeenCalled();
     cleanup(el);
   });
 
@@ -53,4 +70,78 @@ describe('bds-collapsible', () => {
     expect(el.getAttribute('open')).not.toBeNull();
     cleanup(el);
   });
+
+  describe('name grouping (exclusive open)', () => {
+    it('closes other open members of the same group when one opens', async () => {
+      const a = await fixture(
+        '<bds-collapsible name="faq" open><span slot="summary">A</span><p>Content A</p></bds-collapsible>',
+      ) as BdsCollapsible;
+      const b = await fixture(
+        '<bds-collapsible name="faq"><span slot="summary">B</span><p>Content B</p></bds-collapsible>',
+      ) as BdsCollapsible;
+      expect(a.open).toBe(true);
+
+      b.open = true;
+      await b.updateComplete;
+      await a.updateComplete;
+
+      expect(b.open).toBe(true);
+      expect(a.open).toBe(false);
+      expect(a.hasAttribute('open')).toBe(false);
+      cleanup(a);
+      cleanup(b);
+    });
+
+    it('fires bds-toggle on the sibling that gets force-closed', async () => {
+      const a = await fixture(
+        '<bds-collapsible name="faq" open><span slot="summary">A</span><p>Content A</p></bds-collapsible>',
+      ) as BdsCollapsible;
+      const b = await fixture(
+        '<bds-collapsible name="faq"><span slot="summary">B</span><p>Content B</p></bds-collapsible>',
+      ) as BdsCollapsible;
+      const aHandler = vi.fn();
+      a.addEventListener('bds-toggle', aHandler);
+
+      b.open = true;
+      await b.updateComplete;
+      await a.updateComplete;
+
+      expect(aHandler).toHaveBeenCalledOnce();
+      expect(aHandler.mock.calls[0][0].detail).toEqual({ open: false });
+      cleanup(a);
+      cleanup(b);
+    });
+
+    it('does not affect open collapsibles in a different group', async () => {
+      const a = await fixture(
+        '<bds-collapsible name="faq" open><span slot="summary">A</span><p>Content A</p></bds-collapsible>',
+      ) as BdsCollapsible;
+      const b = await fixture(
+        '<bds-collapsible name="other"><span slot="summary">B</span><p>Content B</p></bds-collapsible>',
+      ) as BdsCollapsible;
+
+      b.open = true;
+      await b.updateComplete;
+      await a.updateComplete;
+
+      expect(a.open).toBe(true);
+      expect(b.open).toBe(true);
+      cleanup(a);
+      cleanup(b);
+    });
+
+    it('does not group collapsibles with no name attribute', async () => {
+      const a = await fixture('<bds-collapsible open><span slot="summary">A</span><p>Content A</p></bds-collapsible>') as BdsCollapsible;
+      const b = await fixture('<bds-collapsible><span slot="summary">B</span><p>Content B</p></bds-collapsible>') as BdsCollapsible;
+
+      b.open = true;
+      await b.updateComplete;
+      await a.updateComplete;
+
+      expect(a.open).toBe(true);
+      expect(b.open).toBe(true);
+      cleanup(a);
+      cleanup(b);
+    });
+  });
 });

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

@@ -7,8 +7,11 @@ import { LitElement, css, html } from 'lit';
  *
  * Attributes:
  *   open     — boolean; controlled open state
- *   name     — groups multiple collapsibles so only one is open at a time
- *               (native <details name="…"> behaviour)
+ *   name     — groups multiple collapsibles so only one is open at a time.
+ *               Each instance renders its own <details> in its own shadow root, so
+ *               native <details name> grouping (tree-scoped) can't see across
+ *               instances; the component emulates it by closing same-name siblings
+ *               found via document.querySelectorAll() whenever one opens.
  *
  * Slots:
  *   summary  — the always-visible trigger text
@@ -26,6 +29,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsCollapsible 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;
     }
@@ -91,7 +104,9 @@ export class BdsCollapsible extends LitElement {
 
     .content {
       padding: var(--bds-space_m);
-      background-color: var(--collapsible_content-bg, var(--bds-color_bg));
+      /* React counterpart leaves the content panel transparent; keep the override
+         hook for consumers but default it to match, not to --bds-color_bg. */
+      background-color: var(--collapsible_content-bg, transparent);
       color: var(--collapsible_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
@@ -131,20 +146,47 @@ export class BdsCollapsible extends LitElement {
         }
       }
     }
+
+    // Emulate native <details name="…"> exclusive-open grouping ourselves: each
+    // bds-collapsible renders its own <details> inside its own shadow root, so the
+    // browser's built-in name-based grouping is tree-scoped per shadow root and never
+    // sees siblings. Whenever this instance opens, close any other open member of the
+    // same group.
+    if (changed.has('open') && this.open && this.name) {
+      this._closeOtherGroupMembers();
+    }
   }
 
-  private _onToggle(e: Event) {
-    const details = e.currentTarget as HTMLDetailsElement;
-    this.open = details.open;
+  private _closeOtherGroupMembers() {
+    const groupName = this.name;
+    document.querySelectorAll('bds-collapsible').forEach((el) => {
+      if (el !== this && el.name === groupName && el.open) {
+        el._setOpen(false);
+      }
+    });
+  }
+
+  // State-guarded setter: returns early once already in the target state so a
+  // native <details> "toggle" event re-fired by the browser after a script-driven
+  // attribute change (see the toggle event spec's coalescing note) never dispatches
+  // a redundant bds-toggle.
+  private _setOpen(newOpen: boolean) {
+    if (this.open === newOpen) return;
+    this.open = newOpen;
     this.dispatchEvent(
       new CustomEvent('bds-toggle', {
         bubbles: true,
         composed: true,
-        detail: { open: this.open },
+        detail: { open: newOpen },
       }),
     );
   }
 
+  private _onToggle(e: Event) {
+    const details = e.currentTarget as HTMLDetailsElement;
+    this._setOpen(details.open);
+  }
+
   render() {
     return html`
       <details

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

@@ -116,4 +116,53 @@ describe('bds-dialog', () => {
     expect(el.querySelector('p')!.textContent).toBe('Hello world');
     cleanup(el);
   });
+
+  it('responds to the --show-modal custom command', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>') as BdsDialog;
+    expect(el.open).toBeFalsy();
+    el.dispatchEvent(makeCommandEvent('--show-modal'));
+    await el.updateComplete;
+    expect(el.open).toBe(true);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('responds to the --close custom command', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>') as BdsDialog;
+    el.dispatchEvent(makeCommandEvent('--close'));
+    await el.updateComplete;
+    expect(el.open).toBe(false);
+    expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('releases the body scroll lock when disconnected while open', async () => {
+    const el = await fixture('<bds-dialog open><p>Content</p></bds-dialog>') as BdsDialog;
+    expect(document.body.style.overflow).toBe('hidden');
+    el.remove();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('forwards host aria-label to the shadow dialog', async () => {
+    const el = await fixture('<bds-dialog aria-label="Confirm deletion"><p>Content</p></bds-dialog>');
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    expect(dialog.getAttribute('aria-label')).toBe('Confirm deletion');
+    cleanup(el);
+  });
+
+  it('omits aria-label on the shadow dialog when unset', async () => {
+    const el = await fixture('<bds-dialog><p>Content</p></bds-dialog>');
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    expect(dialog.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+
+  it('lays out the dialog as a flex column so dialog-content can scroll internally', () => {
+    expect(BdsDialog.styles.cssText).toMatch(/\.dialog\s*{[^}]*display:\s*flex/);
+    expect(BdsDialog.styles.cssText).toMatch(/\.dialog\s*{[^}]*flex-direction:\s*column/);
+  });
+
+  it('close button has a :focus-visible outline rule', () => {
+    expect(BdsDialog.styles.cssText).toMatch(/\.close-button:focus-visible\s*{[^}]*outline:/);
+  });
 });

package/src/web-components/interaction/bds-dialog.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"])';
 
@@ -7,10 +7,13 @@ const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabi
  *
  * Wraps a native `<dialog>` element with `showModal()` / `close()` lifecycle,
  * backdrop-click to dismiss, Escape key handling, Tab focus trapping, and
- * the Invoker Commands API (`command="show-modal"` / `command="close"`).
+ * the Invoker Commands API (custom commands `--show-modal` / `--close`; the
+ * unprefixed `show-modal` / `close` values are still accepted for
+ * compatibility with polyfilled/legacy environments).
  *
  * Attributes:
  *   open — boolean; controlled open state (syncs to native showModal/close)
+ *   aria-label — accessible name forwarded to the inner shadow <dialog>
  *
  * Slots:
  *   (default) — dialog content
@@ -20,13 +23,23 @@ const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabi
  *   bds-close — fired (bubbles, composed) when the dialog closes
  *
  * @example
- * <bds-dialog id="my-dialog">
+ * <bds-dialog id="my-dialog" aria-label="Confirm deletion">
  *   <p>Dialog content</p>
  * </bds-dialog>
- * <button commandfor="my-dialog" command="show-modal">Open</button>
+ * <button commandfor="my-dialog" command="--show-modal">Open</button>
  */
 export class BdsDialog 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;
     }
@@ -34,9 +47,11 @@ export class BdsDialog extends LitElement {
     .dialog {
       font-size: var(--bds-font_size--body--s);
       border: var(--dialog_border, none);
-      --bdc_color: var(--dialog_border-color, currentcolor);
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--m);
 
+      display: flex;
+      flex-direction: column;
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
       background-color: var(--dialog_color, var(--bds-color_grey--subtle));
@@ -44,10 +59,19 @@ export class BdsDialog extends LitElement {
       padding: var(--bds-space_l);
       max-inline-size: 90svw;
       max-block-size: 90svh;
+
+      /* visible (not hidden) so the close button, offset outside the box via
+         inset-*: -1em, is never clipped; .dialog-content scrolls internally. */
       overflow: visible;
       position: relative;
     }
 
+    /* A native <dialog> is display:none until opened; the flex layout above
+       would otherwise override the UA rule and render the dialog permanently. */
+    .dialog:not([open]) {
+      display: none;
+    }
+
     .dialog-content {
       display: grid;
       gap: var(--bds-grid_gap);
@@ -70,12 +94,26 @@ export class BdsDialog extends LitElement {
       background-color: var(--bds-color_bg);
       color: currentcolor;
       border: var(--dialog_close-border, none);
-      --bdc_color: var(--dialog_close-border-color, currentcolor);
+      --bdc_color: currentcolor;
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;
     }
 
+    /* Extend the hit area to the 44x44px minimum touch target (WCAG 2.5.5)
+       without growing the visual 2em disc. */
+    .close-button::after {
+      content: '';
+      position: absolute;
+      inset-block: -0.5rem;
+      inset-inline: -0.5rem;
+    }
+
+    .close-button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
     .close-button svg {
       inline-size: 1.25em;
       block-size: 1.25em;
@@ -88,16 +126,19 @@ export class BdsDialog extends LitElement {
   `;
 
   static properties = {
-    open: { type: Boolean, reflect: true },
+    open:      { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: 'aria-label' },
   };
 
   declare open: boolean;
+  declare ariaLabel: string | null;
 
   private _triggerEl: Element | null = null;
 
   constructor() {
     super();
     this.open = false;
+    this.ariaLabel = null;
   }
 
   connectedCallback() {
@@ -108,6 +149,13 @@ export class BdsDialog extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('command', this._onCommand);
+    // Release the body scroll-lock if the dialog is removed from the DOM
+    // while still open — otherwise the lock leaks and the page stays
+    // non-scrollable forever.
+    if (this.open) {
+      document.body.style.overflow = '';
+      this._triggerEl = null;
+    }
   }
 
   updated(changed: Map<string, unknown>) {
@@ -134,8 +182,12 @@ export class BdsDialog extends LitElement {
 
   private _onCommand = (e: Event) => {
     const command = (e as CommandEvent).command;
-    if (command === 'show-modal') this._openDialog();
-    else if (command === 'close') this._closeDialog();
+    // Custom (`--`-prefixed) commands are what the Invoker Commands API
+    // actually dispatches on a non-<dialog> custom-element target — the
+    // unprefixed "show-modal"/"close" keywords are still accepted so
+    // programmatic dispatches and polyfilled environments keep working.
+    if (command === '--show-modal' || command === 'show-modal') this._openDialog();
+    else if (command === '--close' || command === 'close') this._closeDialog();
   };
 
   private _openDialog() {
@@ -178,10 +230,14 @@ export class BdsDialog extends LitElement {
     if (all.length === 0) return;
     const first = all[0];
     const last = all[all.length - 1];
+    // Focus inside the shadow tree (e.g. the close button) resolves via
+    // shadowRoot.activeElement — document.activeElement only ever reports
+    // the host element for shadow-internal focus.
+    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(); }
     }
   }
 
@@ -190,6 +246,7 @@ export class BdsDialog extends LitElement {
       <dialog
         class="dialog"
         aria-modal="true"
+        aria-label=${this.ariaLabel ?? nothing}
         @click=${this._handleBackdropClick}
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}

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

@@ -71,24 +71,33 @@ describe('bds-drawer', () => {
     cleanup(el);
   });
 
-  it('fires bds-open on show-modal command', async () => {
+  it('fires bds-open on --show-modal command', async () => {
     const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
     const handler = vi.fn();
     el.addEventListener('bds-open', handler);
-    el.dispatchEvent(makeCommandEvent('show-modal'));
+    el.dispatchEvent(makeCommandEvent('--show-modal'));
     expect(handler).toHaveBeenCalledOnce();
     cleanup(el);
   });
 
-  it('fires bds-close on close command', async () => {
+  it('fires bds-close on --close command', async () => {
     const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
     const handler = vi.fn();
     el.addEventListener('bds-close', handler);
-    el.dispatchEvent(makeCommandEvent('close'));
+    el.dispatchEvent(makeCommandEvent('--close'));
     expect(handler).toHaveBeenCalledOnce();
     cleanup(el);
   });
 
+  it('ignores the reserved built-in "show-modal"/"close" command values (never fire on custom elements)', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
+    const openHandler = vi.fn();
+    el.addEventListener('bds-open', openHandler);
+    el.dispatchEvent(makeCommandEvent('show-modal'));
+    expect(openHandler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
   it('close button click fires bds-close', async () => {
     const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
     const handler = vi.fn();
@@ -110,4 +119,84 @@ describe('bds-drawer', () => {
     expect(el.querySelector('p')!.textContent).toBe('Body content');
     cleanup(el);
   });
+
+  it('releases body scroll lock when disconnected while open', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    expect(document.body.style.overflow).toBe('hidden');
+    cleanup(el);
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('does not touch body scroll when disconnected while closed', async () => {
+    const el = await fixture('<bds-drawer><p>Content</p></bds-drawer>');
+    document.body.style.overflow = 'hidden';
+    cleanup(el);
+    expect(document.body.style.overflow).toBe('hidden');
+    document.body.style.overflow = '';
+  });
+
+  it('wires aria-labelledby to the title element by default', async () => {
+    const el = await fixture('<bds-drawer><span slot="title">Settings</span></bds-drawer>');
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    expect(dialog.getAttribute('aria-labelledby')).toBe('title');
+    expect(dialog.hasAttribute('aria-label')).toBe(false);
+    const titleEl = el.shadowRoot!.querySelector('#title');
+    expect(titleEl).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('forwards a host aria-label as an override, dropping aria-labelledby', async () => {
+    const el = await fixture('<bds-drawer aria-label="Custom name"><span slot="title">Settings</span></bds-drawer>');
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    expect(dialog.getAttribute('aria-label')).toBe('Custom name');
+    expect(dialog.hasAttribute('aria-labelledby')).toBe(false);
+    cleanup(el);
+  });
+
+  it('closes when the backdrop (dialog element itself) is clicked', async () => {
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    dialog.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('does not close when an inner control is clicked, including a synthetic keyboard-activation click at 0,0 (target !== dialog)', async () => {
+    // Regression test: the previous implementation compared e.clientX/clientY
+    // against the panel's bounding rect, so a keyboard-activated synthetic
+    // click (dispatched at 0,0) on an inner control was misclassified as an
+    // "outside" backdrop click and closed the drawer. Coordinates must no
+    // longer matter — only event.target identity.
+    const el = await fixture('<bds-drawer open><p>Content</p></bds-drawer>');
+    const handler = vi.fn();
+    el.addEventListener('bds-close', handler);
+    const header = el.shadowRoot!.querySelector('.header')!;
+    header.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: 0, clientY: 0 }));
+    expect(handler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('Tab focus trap treats slotted body elements as part of the trap boundary', async () => {
+    // Regression test: previously the trap only queried the shadow tree, so
+    // `all` was just [close-button] and slotted light-DOM buttons were never
+    // reachable as the wrap boundary.
+    const el = await fixture(
+      '<bds-drawer open><button id="a">A</button><button id="b">B</button></bds-drawer>',
+    ) as BdsDrawer;
+    const dialog = el.shadowRoot!.querySelector('dialog')!;
+    const closeBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button.close-button')!;
+    const btnB = el.querySelector<HTMLButtonElement>('#b')!;
+    const focusSpy = vi.spyOn(btnB, 'focus');
+    // Stub shadowRoot.activeElement (jsdom doesn't implement shadow-DOM focus
+    // retargeting) to simulate focus currently sitting on the close button —
+    // the "first" stop in the merged [close-button, ...slotted] boundary list.
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: closeBtn, configurable: true });
+    const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true });
+    dialog.dispatchEvent(event);
+    // Shift+Tab from "first" must wrap to "last" — the last slotted button (#b).
+    expect(focusSpy).toHaveBeenCalled();
+    cleanup(el);
+  });
 });