@boostdev/design-system-components 1.0.3 → 1.1.1

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

@@ -12,29 +12,26 @@
     background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
     color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
-    max-width: 90svw;
-    max-height: 90svh;
+    max-inline-size: 90svw;
+    max-block-size: 90svh;
     overflow: visible;
   }
 
   .dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
-    overflow-y: auto;
-    min-height: 0;
+    overflow-block: auto;
+    min-block-size: 0;
     flex: 1;
   }
 
-  .closeForm {
+  .closeButton {
+    all: unset;
     position: absolute;
     inset-block-start: -1em;
     inset-inline-end: -1em;
-  }
-
-  .closeButton {
-    all: unset;
-    width: 2em;
-    height: 2em;
+    inline-size: 2em;
+    block-size: 2em;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,8 +47,8 @@
   }
 
   .closeButton svg {
-    width: 1.25em;
-    height: 1.25em;
+    inline-size: 1.25em;
+    block-size: 1.25em;
   }
 
   .dialog::backdrop {

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

@@ -29,7 +29,26 @@ describe('Dialog', () => {
     expect(screen.getByRole('button', { name: /close dialog/i })).toBeInTheDocument();
   });
 
-  it('calls onClose when close button is clicked', async () => {
+  it('close button is type="button"', () => {
+    render(<Dialog isOpen><span>Content</span></Dialog>);
+    expect(screen.getByRole('button', { name: /close dialog/i })).toHaveAttribute('type', 'button');
+  });
+
+  it('close button always uses commandfor/command', () => {
+    render(<Dialog isOpen><span>Content</span></Dialog>);
+    const closeBtn = screen.getByRole('button', { name: /close dialog/i });
+    expect(closeBtn).toHaveAttribute('commandfor');
+    expect(closeBtn).toHaveAttribute('command', 'close');
+  });
+
+  it('close button commandfor matches dialog id', () => {
+    render(<Dialog id="my-dialog" isOpen><span>Content</span></Dialog>);
+    const closeBtn = screen.getByRole('button', { name: /close dialog/i });
+    expect(closeBtn).toHaveAttribute('commandfor', 'my-dialog');
+    expect(document.querySelector('dialog')).toHaveAttribute('id', 'my-dialog');
+  });
+
+  it('close button click via polyfill calls onClose', async () => {
     const user = userEvent.setup();
     const onClose = vi.fn();
     render(<Dialog isOpen onClose={onClose}><span>Content</span></Dialog>);
@@ -42,6 +61,12 @@ describe('Dialog', () => {
     expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
   });
 
+  it('does not call showModal again when dialog is already open', () => {
+    const { rerender } = render(<Dialog isOpen><span>Content</span></Dialog>);
+    rerender(<Dialog isOpen><span>Content</span></Dialog>);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+  });
+
   it('locks body scroll when open', () => {
     render(<Dialog isOpen><span>Content</span></Dialog>);
     expect(document.body.style.overflow).toBe('hidden');
@@ -77,4 +102,31 @@ describe('Dialog', () => {
 
     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(<Dialog onOpen={onOpen}><span>Content</span></Dialog>);
+      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(<Dialog isOpen onClose={onClose}><span>Content</span></Dialog>);
+      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/Dialog/Dialog.stories.tsx

@@ -4,7 +4,7 @@ import { Dialog } from './Dialog';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Dialog',
+  title: 'React/Interaction/Dialog',
   component: Dialog,
 } satisfies Meta<typeof Dialog>;
 
@@ -33,3 +33,20 @@ export const Interactive: Story = {
     );
   },
 };
+
+// Open and close using the Invoker Commands API — no JS event handlers needed.
+// The browser wires up the buttons to the dialog natively via commandfor/command.
+export const InvokerCommands: Story = {
+  render: () => (
+    <>
+      <Button type="button" commandfor="invoker-dialog" command="show-modal">
+        Open Dialog (no JS)
+      </Button>
+      <Dialog id="invoker-dialog">
+        <h2>Invoker Dialog</h2>
+        <p>This dialog was opened with a declarative HTML invoker command — no onClick needed.</p>
+        <p>The close button (×) inside also uses an invoker command.</p>
+      </Dialog>
+    </>
+  ),
+};

package/src/components/interaction/Dialog/Dialog.tsx

@@ -1,28 +1,38 @@
-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();
 
 const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 import css from './Dialog.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface DialogProps {
+interface DialogProps extends WithClassName {
   children: ReactNode;
-  className?: string;
+  id?: string;
   isOpen?: boolean;
+  onOpen?: () => void;
   onClose?: () => void;
 }
 
-export function Dialog({ children, isOpen = false, className, onClose }: DialogProps) {
+export function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }: DialogProps) {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const triggerRef = useRef<Element | null>(null);
 
+  // Controlled mode: open/close in response to the isOpen prop.
   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();
@@ -32,6 +42,30 @@ export function Dialog({ children, isOpen = false, className, onClose }: DialogP
     };
   }, [isOpen]);
 
+  // Invoker Commands API: sync state when the dialog is opened or closed via
+  // a <button commandfor="id" command="show-modal|close"> without JS.
+  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 = '';
+        // Defer focus restoration: the dialog is still open when the command
+        // event fires (the action runs after), so focusing outside would be
+        // blocked by the focus-trap. setTimeout defers until after close.
+        const trigger = triggerRef.current;
+        setTimeout(() => (trigger as HTMLElement | null)?.focus(), 0);
+        onClose?.();
+      }
+    };
+    dialog.addEventListener('command', handleCommand);
+    return () => dialog.removeEventListener('command', handleCommand);
+  }, [onOpen, onClose]);
+
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (e.target === dialogRef.current) onClose?.();
   };
@@ -59,24 +93,24 @@ export function Dialog({ children, isOpen = false, className, onClose }: DialogP
   return (
     <dialog
       ref={dialogRef}
+      id={id}
       className={cn(className, css.dialog)}
       aria-modal="true"
       onClick={handleBackdropClick}
       onCancel={handleCancel}
       onKeyDown={handleKeyDown}
     >
-      <form method="dialog" className={css.closeForm}>
-        <button
-          type="submit"
-          className={css.closeButton}
-          onClick={onClose}
-          aria-label="Close dialog"
-        >
-          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
-      </form>
+      <button
+        type="button"
+        className={css.closeButton}
+        commandfor={id}
+        command="close"
+        aria-label="Close dialog"
+      >
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
       <div className={css.dialogContent}>
         {children}
       </div>

package/src/components/interaction/Drawer/Drawer.mdx

@@ -28,6 +28,20 @@ Slide-in panel from the left or right edge of the viewport. Use for navigation,
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--drawer_color`</td><td>`var(--bds-color_bg)`</td><td>Panel background colour</td></tr>
+<tr><td>`--drawer_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Uses `<dialog>` internally — provides native focus trapping and `Escape` to close

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

@@ -4,10 +4,10 @@
     inset: 0;
     margin: 0;
     padding: 0;
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
     border: none;
     background: transparent;
     overflow: hidden;
@@ -23,8 +23,8 @@
     inset-block: 0;
     display: flex;
     flex-direction: column;
-    width: min(28rem, 90vw);
-    height: 100%;
+    inline-size: min(28rem, 90vw);
+    block-size: 100%;
     background-color: var(--drawer_color, var(--bds-color_bg));
     color: var(--drawer_on-color, var(--bds-color_on-bg));
     box-shadow: var(--bds-shadow_xl);
@@ -54,16 +54,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     border-radius: 50%;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
 
   .closeButton svg {
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
   }
 
   .closeButton:focus-visible {
@@ -79,7 +79,7 @@
 
   .body {
     flex: 1;
-    overflow-y: auto;
+    overflow-block: auto;
     padding: var(--bds-space_l);
     display: flex;
     flex-direction: column;

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.stories.tsx

@@ -4,7 +4,7 @@ import { Drawer } from './Drawer';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Drawer',
+  title: 'React/Interaction/Drawer',
   component: Drawer,
 } satisfies Meta<typeof Drawer>;
 

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

@@ -1,19 +1,28 @@
-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 {
+interface DrawerProps extends WithClassName {
+  id?: string;
   isOpen: boolean;
+  onOpen?: () => void;
   onClose: () => void;
   title: ReactNode;
   children: ReactNode;
   side?: 'left' | 'right';
-  className?: string;
   ariaLabel?: string;
 }
 
 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/DropdownMenu/DropdownMenu.stories.tsx

@@ -3,7 +3,7 @@ import { DropdownMenu } from './DropdownMenu';
 import {Button} from "../Button";
 
 const meta = {
-  title: 'Interaction/DropdownMenu',
+  title: 'React/Interaction/DropdownMenu',
   component: DropdownMenu,
   decorators: [
     Story => (

package/src/components/interaction/DropdownMenu/DropdownMenu.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react';
 import css from './DropdownMenu.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface DropdownMenuItem {
   id: string;
@@ -20,11 +21,10 @@ export interface DropdownMenuItem {
   separator?: boolean;
 }
 
-interface DropdownMenuProps {
+interface DropdownMenuProps extends WithClassName {
   trigger: ReactElement;
   items: DropdownMenuItem[];
   placement?: 'bottom-start' | 'bottom-end';
-  className?: string;
 }
 
 export function DropdownMenu({

package/src/components/interaction/Popover/Popover.mdx

@@ -27,6 +27,23 @@ Floating panel anchored to a trigger element. Unlike `Tooltip`, popovers can con
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--popover_color`</td><td>`var(--bds-color_bg)`</td><td>Panel background colour</td></tr>
+<tr><td>`--popover_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--popover_shadow`</td><td>`var(--bds-shadow_m)`</td><td>Panel box shadow</td></tr>
+<tr><td>`--popover_border`</td><td>`none`</td><td>Panel border</td></tr>
+<tr><td>`--popover_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Panel corner radius</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Trigger element gets `aria-haspopup="true"` and `aria-expanded` toggled on open/close