@boostdev/design-system-components 1.1.0 → 1.1.1

package/src/components/interaction/Drawer/Drawer.spec.tsx

@@ -24,7 +24,21 @@ describe('Drawer', () => {
     expect(screen.getByText('Navigation items')).toBeInTheDocument();
   });
 
-  it('calls onClose when close button clicked', async () => {
+  it('close button uses commandfor/command', () => {
+    render(<Drawer isOpen title="Menu" onClose={() => {}}>Content</Drawer>);
+    const closeBtn = screen.getByRole('button', { name: 'Close drawer' });
+    expect(closeBtn).toHaveAttribute('commandfor');
+    expect(closeBtn).toHaveAttribute('command', 'close');
+  });
+
+  it('close button commandfor matches dialog id', () => {
+    render(<Drawer id="my-drawer" isOpen title="Menu" onClose={() => {}}>Content</Drawer>);
+    const closeBtn = screen.getByRole('button', { name: 'Close drawer' });
+    expect(closeBtn).toHaveAttribute('commandfor', 'my-drawer');
+    expect(document.querySelector('dialog')).toHaveAttribute('id', 'my-drawer');
+  });
+
+  it('close button click via polyfill calls onClose', async () => {
     const onClose = vi.fn();
     render(<Drawer isOpen title="Menu" onClose={onClose}>Content</Drawer>);
     await userEvent.click(screen.getByRole('button', { name: 'Close drawer' }));
@@ -42,6 +56,12 @@ describe('Drawer', () => {
     expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
   });
 
+  it('does not call showModal again when already open', () => {
+    const { rerender } = render(<Drawer isOpen title="Test" onClose={() => {}}>Body</Drawer>);
+    rerender(<Drawer isOpen title="Test" onClose={() => {}}>Body</Drawer>);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+  });
+
   it('locks body scroll when open', () => {
     render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
     expect(document.body.style.overflow).toBe('hidden');
@@ -88,4 +108,31 @@ describe('Drawer', () => {
 
     document.body.removeChild(trigger);
   });
+
+  describe('command event (Invoker Commands API)', () => {
+    function makeCommandEvent(command: string) {
+      const event = new Event('command');
+      Object.defineProperty(event, 'command', { value: command, configurable: true });
+      return event;
+    }
+
+    it('locks scroll and calls onOpen on show-modal command', () => {
+      const onOpen = vi.fn();
+      render(<Drawer title="Menu" isOpen={false} onOpen={onOpen} onClose={() => {}}>Content</Drawer>);
+      const dialog = document.querySelector('dialog')!;
+      dialog.dispatchEvent(makeCommandEvent('show-modal'));
+      expect(document.body.style.overflow).toBe('hidden');
+      expect(onOpen).toHaveBeenCalled();
+    });
+
+    it('restores scroll and calls onClose on close command', () => {
+      const onClose = vi.fn();
+      render(<Drawer title="Menu" isOpen onClose={onClose}>Content</Drawer>);
+      document.body.style.overflow = 'hidden';
+      const dialog = document.querySelector('dialog')!;
+      dialog.dispatchEvent(makeCommandEvent('close'));
+      expect(document.body.style.overflow).toBe('');
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
 });

package/src/components/interaction/Drawer/Drawer.tsx

@@ -1,10 +1,17 @@
-import { ReactNode, useEffect, useRef } from 'react';
+import { ReactNode, useEffect, useId, useRef } from 'react';
+import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
+
+// Install once at module load — no-op if native support is present.
+installInvokerCommandsPolyfill();
+
 import css from './Drawer.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
 interface DrawerProps extends WithClassName {
+  id?: string;
   isOpen: boolean;
+  onOpen?: () => void;
   onClose: () => void;
   title: ReactNode;
   children: ReactNode;
@@ -13,7 +20,9 @@ interface DrawerProps extends WithClassName {
 }
 
 export function Drawer({
+  id: idProp,
   isOpen,
+  onOpen,
   onClose,
   title,
   children,
@@ -21,17 +30,20 @@ export function Drawer({
   ariaLabel,
   className,
 }: Readonly<DrawerProps>) {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+
   const dialogRef = useRef<HTMLDialogElement>(null);
   const triggerRef = useRef<Element | null>(null);
 
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
-    if (isOpen) {
+    if (isOpen && !dialog.open) {
       triggerRef.current = document.activeElement;
       dialog.showModal();
       document.body.style.overflow = 'hidden';
-    } else if (dialog.open) {
+    } else if (!isOpen && dialog.open) {
       dialog.close();
       document.body.style.overflow = '';
       (triggerRef.current as HTMLElement | null)?.focus();
@@ -41,6 +53,26 @@ export function Drawer({
     };
   }, [isOpen]);
 
+  // Invoker Commands API: sync state when opened/closed via commandfor/command.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleCommand = (e: CommandEvent) => {
+      if (e.command === 'show-modal') {
+        triggerRef.current = document.activeElement;
+        document.body.style.overflow = 'hidden';
+        onOpen?.();
+      } else if (e.command === 'close') {
+        document.body.style.overflow = '';
+        const trigger = triggerRef.current;
+        setTimeout(() => (trigger as HTMLElement | null)?.focus(), 0);
+        onClose();
+      }
+    };
+    dialog.addEventListener('command', handleCommand);
+    return () => dialog.removeEventListener('command', handleCommand);
+  }, [onOpen, onClose]);
+
   // Close on backdrop click
   const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (e.target === dialogRef.current) onClose();
@@ -55,6 +87,7 @@ export function Drawer({
   return (
     <dialog
       ref={dialogRef}
+      id={id}
       className={cn(css.drawer, css[`--side_${side}`], className)}
       aria-label={ariaLabel}
       aria-modal="true"
@@ -67,7 +100,8 @@ export function Drawer({
           <button
             type="button"
             className={css.closeButton}
-            onClick={onClose}
+            commandfor={id}
+            command="close"
             aria-label="Close drawer"
           >
             <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -6,9 +6,9 @@
 
   .menu {
     position: absolute;
-    top: calc(100% + var(--bds-space_xxs));
+    inset-block-start: calc(100% + var(--bds-space_xxs));
     z-index: var(--bds-z-index_dropdown);
-    min-width: 10rem;
+    min-inline-size: 10rem;
     padding: var(--bds-space_xxs) 0;
     border: var(--dropdown_border, none);
     --bdc_color: currentcolor;
@@ -24,12 +24,12 @@
     margin: 0;
   }
 
-  .--placement_bottom-start { left: 0; }
-  .--placement_bottom-end   { right: 0; }
+  .--placement_bottom-start { inset-inline-start: 0; }
+  .--placement_bottom-end   { inset-inline-end: 0; }
 
   .separator {
     border: none;
-    border-top: 1px solid currentcolor;
+    border-block-start: 1px solid currentcolor;
     margin: var(--bds-space_xxs) 0;
     opacity: 0.15;
   }
@@ -39,7 +39,7 @@
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
-    width: 100%;
+    inline-size: 100%;
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);

package/src/components/interaction/Popover/Popover.module.css

@@ -1,18 +1,25 @@
 @layer component {
   .wrapper {
-    position: relative;
     display: inline-flex;
+
+    /* No position: relative — the panel is position: fixed so it doesn't need
+       the wrapper as a containing block. */
   }
 
   .panel {
-    /* Absolute positioning keeps the panel anchored to the wrapper/trigger and
-       scrolls with the page. CSS anchor positioning sets the exact placement;
-       @position-try fallbacks handle automatic repositioning on overflow. */
-    position: absolute;
+    /* Fixed positioning: containing block is the viewport.
+       - CSS anchor() values resolve in viewport space → polyfill applies them correctly.
+       - Ancestor overflow / stacking contexts cannot clip the panel. */
+    position: fixed;
+
+    /* Reset UA [popover] defaults (inset: 0, margin: auto, border, padding). */
+    inset: unset;
     margin: 0;
-    overflow-y: auto;
+    overflow-block: auto;
     z-index: var(--popover_z-index, 100);
-    min-width: 12rem;
+    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;
@@ -34,28 +41,28 @@
   .panel[data-placement='bottom'] {
     top: anchor(bottom);
     left: anchor(left);
-    margin-top: var(--bds-space_xs, 8px);
+    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);
+    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);
+    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);
+    margin-inline-end: var(--bds-space_xs, 8px);
     position-try-fallbacks: --popover-right, --popover-bottom, --popover-top;
   }
 
@@ -69,7 +76,7 @@
     bottom: unset;
     left: anchor(left);
     margin: 0;
-    margin-top: var(--bds-space_xs, 8px);
+    margin-block-start: var(--bds-space_xs, 8px);
   }
 
   @position-try --popover-top {
@@ -78,7 +85,7 @@
     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 --popover-right {
@@ -87,7 +94,7 @@
     bottom: unset;
     left: anchor(right);
     margin: 0;
-    margin-left: var(--bds-space_xs, 8px);
+    margin-inline-start: var(--bds-space_xs, 8px);
   }
 
   @position-try --popover-left {
@@ -96,6 +103,58 @@
     bottom: unset;
     left: unset;
     margin: 0;
-    margin-right: var(--bds-space_xs, 8px);
+    margin-inline-end: var(--bds-space_xs, 8px);
+  }
+
+  /* Full-width fallback blocks for narrow screens.
+     Defined at layer level (not inside @media) because @position-try cannot
+     be nested inside @media. These preserve left:8px/right:8px so the
+     panel stays edge-to-edge even when a @position-try fallback fires. */
+
+  @position-try --popover-bottom-fullwidth {
+    top: anchor(bottom);
+    right: var(--bds-space_xs, 8px);
+    bottom: unset;
+    left: var(--bds-space_xs, 8px);
+    margin: 0;
+    margin-block-start: var(--bds-space_xs, 8px);
+  }
+
+  @position-try --popover-top-fullwidth {
+    top: unset;
+    right: var(--bds-space_xs, 8px);
+    bottom: anchor(top);
+    left: var(--bds-space_xs, 8px);
+    margin: 0;
+    margin-block-end: var(--bds-space_xs, 8px);
+  }
+
+  /* Narrow screens (≤420px): span full viewport width and only flip vertically.
+     max-width: none overrides the base 20rem cap; left/right edge constraints
+     handle the width instead. The panel still touches the anchor on the
+     vertical axis (top/bottom via anchor() is not overridden here). */
+  @media (width <= 420px) {
+    .panel[data-placement='bottom'],
+    .panel[data-placement='top'],
+    .panel[data-placement='left'],
+    .panel[data-placement='right'] {
+      left: var(--bds-space_xs, 8px);
+      right: var(--bds-space_xs, 8px);
+      inline-size: 100%;
+      max-inline-size: calc(100svw - 2 * var(--bds-space_xs, 8px));
+      position-try-fallbacks: --popover-top-fullwidth, --popover-bottom-fullwidth;
+    }
+  }
+
+  /* Wide + short screens (e.g. landscape mobile, split-screen): when the
+     viewport has more horizontal room than vertical, prefer side placements. */
+  @media (aspect-ratio >= 2/1) {
+    .panel[data-placement='bottom'] {
+      position-try-fallbacks: --popover-top, --popover-right, --popover-left;
+    }
+
+    .panel[data-placement='top'] {
+      position-try-fallbacks: --popover-bottom, --popover-right, --popover-left;
+    }
   }
 }

package/src/components/interaction/Popover/Popover.spec.tsx

@@ -2,8 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Popover } from './Popover';
 
-// jsdom doesn't implement CSS.supports — provide a minimal stub so the
-// polyfill guard in Popover.tsx doesn't throw.
+// jsdom doesn't implement CSS.supports — stub so the anchor polyfill guard doesn't throw.
 beforeAll(() => {
   Object.defineProperty(globalThis, 'CSS', {
     value: { supports: () => true },
@@ -11,6 +10,39 @@ beforeAll(() => {
   });
 });
 
+// jsdom doesn't implement the Popover API — mock showPopover/hidePopover/togglePopover
+// and dispatch the `toggle` event so our state-sync listener fires.
+beforeEach(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    const event = new Event('toggle');
+    Object.defineProperty(event, 'newState', { value: 'open', configurable: true });
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    const event = new Event('toggle');
+    Object.defineProperty(event, 'newState', { value: 'closed', configurable: true });
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.togglePopover = vi.fn(function (this: HTMLElement) {
+    const isCurrentlyOpen = this.getAttribute('data-popover-open') === 'true';
+    if (isCurrentlyOpen) {
+      this.setAttribute('data-popover-open', 'false');
+      const event = new Event('toggle');
+      Object.defineProperty(event, 'newState', { value: 'closed', configurable: true });
+      this.dispatchEvent(event);
+    } else {
+      this.setAttribute('data-popover-open', 'true');
+      const event = new Event('toggle');
+      Object.defineProperty(event, 'newState', { value: 'open', configurable: true });
+      this.dispatchEvent(event);
+    }
+  });
+});
+
+function getPanel() {
+  return document.querySelector<HTMLElement>('[popover]')!;
+}
+
 describe('Popover', () => {
   it('renders the trigger', () => {
     render(
@@ -21,15 +53,23 @@ describe('Popover', () => {
     expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
   });
 
-  it('does not show the panel by default', () => {
+  it('renders the panel as a [popover] element', () => {
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    expect(getPanel()).toBeInTheDocument();
+    expect(getPanel()).toHaveAttribute('popover', 'auto');
+  });
+
+  it('panel is not open by default', () => {
     render(
       <Popover content={<p>Panel content</p>}>
         <button type="button">Open</button>
       </Popover>
     );
-    // The dialog element is always in DOM; closed state = no open attribute.
-    const dialog = document.querySelector('dialog');
-    expect(dialog).not.toHaveAttribute('open');
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toBe('false');
   });
 
   it('shows the panel when trigger is clicked', async () => {
@@ -40,44 +80,44 @@ describe('Popover', () => {
       </Popover>
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(document.querySelector('dialog')).toHaveAttribute('open');
+    expect(HTMLElement.prototype.togglePopover).toHaveBeenCalled();
   });
 
-  it('closes the panel when trigger is clicked again', async () => {
+  it('sets aria-expanded true after opening', async () => {
     const user = userEvent.setup();
     render(
-      <Popover content={<p>Panel content</p>}>
-        <button type="button">Toggle</button>
+      <Popover content={<p>Panel</p>}>
+        <button type="button">Open</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Toggle' }));
-    await user.click(screen.getByRole('button', { name: 'Toggle' }));
-    expect(document.querySelector('dialog')).not.toHaveAttribute('open');
+    const trigger = screen.getByRole('button');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('closes the panel when Escape is pressed', async () => {
+  it('closes the panel when trigger is clicked again', async () => {
     const user = userEvent.setup();
     render(
       <Popover content={<p>Panel content</p>}>
-        <button type="button">Open</button>
+        <button type="button">Toggle</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Open' }));
-    await user.keyboard('{Escape}');
-    expect(document.querySelector('dialog')).not.toHaveAttribute('open');
+    await user.click(screen.getByRole('button', { name: 'Toggle' }));
+    await user.click(screen.getByRole('button', { name: 'Toggle' }));
+    expect(screen.getByRole('button', { name: 'Toggle' })).toHaveAttribute('aria-expanded', 'false');
   });
 
-  it('sets aria-expanded on the trigger when open', async () => {
-    const user = userEvent.setup();
+  it('trigger uses commandfor/command="toggle-popover"', () => {
     render(
       <Popover content={<p>Panel</p>}>
         <button type="button">Open</button>
       </Popover>
     );
     const trigger = screen.getByRole('button');
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute('commandfor');
+    expect(trigger).toHaveAttribute('command', 'toggle-popover');
+    expect(trigger.getAttribute('commandfor')).toBe(getPanel().id);
   });
 
   it('sets anchor-name on the trigger and position-anchor on the panel', () => {
@@ -87,71 +127,66 @@ describe('Popover', () => {
       </Popover>
     );
     const trigger = screen.getByRole('button');
-    const dialog = document.querySelector('dialog')!;
-    // Both should reference the same CSS anchor ident.
+    const panel = getPanel();
     const anchorName = trigger.style.getPropertyValue('anchor-name');
-    const positionAnchor = dialog.style.getPropertyValue('position-anchor');
+    const positionAnchor = panel.style.getPropertyValue('position-anchor');
     expect(anchorName).toMatch(/^--popover-/);
     expect(positionAnchor).toBe(anchorName);
   });
 
-  it('renders role="region" with aria-label when aria-label prop is provided', async () => {
-    const user = userEvent.setup();
+  it('each instance gets a unique anchor-name', () => {
     render(
-      <Popover content={<p>Filters</p>} aria-label="Filter options">
+      <>
+        <Popover content={<p>A</p>}>
+          <button type="button">A</button>
+        </Popover>
+        <Popover content={<p>B</p>}>
+          <button type="button">B</button>
+        </Popover>
+      </>
+    );
+    const [btnA, btnB] = screen.getAllByRole('button');
+    expect(btnA.style.getPropertyValue('anchor-name')).not.toBe(
+      btnB.style.getPropertyValue('anchor-name')
+    );
+  });
+
+  it('sets data-placement from the placement prop', () => {
+    render(
+      <Popover content={<p>Panel</p>} placement="top">
         <button type="button">Open</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(screen.getByRole('region', { name: 'Filter options' })).toBeInTheDocument();
+    expect(getPanel()).toHaveAttribute('data-placement', 'top');
   });
 
-  it('does not render role="region" when no aria-label is provided', async () => {
-    const user = userEvent.setup();
+  it('defaults data-placement to "bottom"', () => {
     render(
       <Popover content={<p>Panel</p>}>
         <button type="button">Open</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+    expect(getPanel()).toHaveAttribute('data-placement', 'bottom');
   });
 
-  it('constrains maxHeight when trigger is near the bottom of the viewport', async () => {
+  it('renders role="region" with aria-label when aria-label prop is provided', async () => {
     const user = userEvent.setup();
-    Object.defineProperty(window, 'innerHeight', { value: 600, configurable: true });
-    Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true });
-    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
-      top: 530, bottom: 550, left: 100, right: 200, width: 100, height: 20,
-      x: 100, y: 530, toJSON: () => {},
-    });
     render(
-      <Popover content={<p>Panel</p>} placement="bottom">
+      <Popover content={<p>Filters</p>} aria-label="Filter options">
         <button type="button">Open</button>
       </Popover>
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
-    const dialog = document.querySelector('dialog')!;
-    // max-height = vh - rect.bottom - GAP * 2 = 600 - 550 - 16 = 34
-    expect(dialog.style.maxHeight).toBe('34px');
+    expect(getPanel()).toHaveAttribute('role', 'region');
+    expect(getPanel()).toHaveAttribute('aria-label', 'Filter options');
   });
 
-  it('constrains maxWidth when trigger is near the right edge of the viewport', async () => {
-    const user = userEvent.setup();
-    Object.defineProperty(window, 'innerHeight', { value: 600, configurable: true });
-    Object.defineProperty(window, 'innerWidth', { value: 400, configurable: true });
-    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
-      top: 100, bottom: 120, left: 350, right: 390, width: 40, height: 20,
-      x: 350, y: 100, toJSON: () => {},
-    });
+  it('does not render role="region" when no aria-label is provided', () => {
     render(
-      <Popover content={<p>Panel</p>} placement="bottom">
+      <Popover content={<p>Panel</p>}>
         <button type="button">Open</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Open' }));
-    const dialog = document.querySelector('dialog')!;
-    // max-width = vw - rect.left - GAP = 400 - 350 - 8 = 42
-    expect(dialog.style.maxWidth).toBe('42px');
+    expect(getPanel()).not.toHaveAttribute('role');
   });
 });