@boostdev/design-system-components 2.8.0 → 2.11.0

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

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 {