@boostdev/design-system-components 1.1.2 → 1.2.0

package/src/components/ui/Carousel/Carousel.module.css

@@ -39,12 +39,10 @@
     --bdc_color: var(--bds-color_on-bg);
 
     border: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
     cursor: pointer;
     flex-shrink: 0;
     transition: var(--bds-animation_transition);
-    box-shadow: var(--bds-shadow_s);
   }
 
   .navBtn svg {

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -57,8 +57,7 @@
     transition: var(--bds-animation_transition);
     --bdc_color: currentcolor;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .dismiss svg {

package/src/components/ui/Pagination/Pagination.module.css

@@ -27,8 +27,7 @@
     --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
 
     border: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     color: var(--btn_color, var(--bds-color_on-bg));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);

package/src/components/ui/SkipLink/SkipLink.module.css

@@ -15,8 +15,7 @@
     --bdc_color: var(--color_focus, var(--bds-color_interactive));
 
     border: var(--skip-link_border, none);
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     transform: translateY(-200%);
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

package/src/components/ui/Table/Table.module.css

@@ -6,9 +6,8 @@
     --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--table_radius, var(--bdc-outline_radius));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .table {

package/src/css/bdc.css

@@ -38,11 +38,12 @@
   initial-value: 0;
 }
 
-/* '*' syntax cannot be interpolated but gives a guaranteed none default */
+/* '*' syntax cannot be interpolated; use a transparent shadow (not 'none') so it
+   can safely appear as the trailing item in a comma-separated box-shadow list. */
 @property --bdc-outline_shadow {
   syntax: '*';
   inherits: false;
-  initial-value: none;
+  initial-value: 0 0 0 0 transparent;
 }
 
 @layer component {
@@ -56,19 +57,23 @@
     --bdc_color--error: var(--bds-color_error);
 
     /* Active / selected state colours — override these to theme all filled form controls globally */
-    --bdc-color_active:            var(--bds-color_green);
-    --bdc-color_on-active:         var(--bds-color_on-green);
-    --bdc-color_active--subtle:    var(--bds-color_green--subtle);
-    --bdc-color_on-active--subtle: var(--bds-color_on-green--subtle);
-    --bdc-color_active--strong:    var(--bds-color_green--strong);
-    --bdc-color_on-active--strong: var(--bds-color_on-green--strong);
+    --bdc-color_active:            var(--bds-color_interactive);
+    --bdc-color_on-active:         var(--bds-color_on-interactive);
+    --bdc-color_active--subtle:    var(--bds-color_blue--subtle);
+    --bdc-color_on-active--subtle: var(--bds-color_on-blue--subtle);
+    --bdc-color_active--strong:    var(--bds-color_interactive_on-bg);
+    --bdc-color_on-active--strong: var(--bds-color_on-blue--strong);
 
     /* Outline geometry */
     --bdc-outline_width:  1px;
-    --bdc-outline_offset: -1px; /* inset — appears inside the element like a traditional border */
+    --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
     --bdc-outline_radius: var(--bds-border_radius--xs);
 
-    /* Shadow: opt-in, none by default */
-    --bdc-outline_shadow: none;
+    /* Shadow: opt-in; transparent (not 'none') so it's valid in a comma-separated box-shadow list */
+    --bdc-outline_shadow: 0 0 0 0 transparent;
+
+    /* Focus-visible ring — solid interactive colour, replaces foundation's dotted grey default */
+    --bds-outline_default: 2px solid var(--bds-color_interactive);
+    --bds-outline_offset:  2px;
   }
 }

package/src/index.ts

@@ -56,7 +56,7 @@ export { Radio } from './components/interaction/form/Radio';
 export { RadioGroup } from './components/interaction/form/RadioGroup';
 export type { RadioGroupProps } from './components/interaction/form/RadioGroup';
 export { SegmentedControl } from './components/interaction/form/SegmentedControl';
-export type { SegmentedControlProps, SegmentedControlOption } from './components/interaction/form/SegmentedControl';
+export type { SegmentedControlProps } from './components/interaction/form/SegmentedControl';
 export { Select } from './components/interaction/form/Select';
 export type { SelectOption } from './components/interaction/form/Select';
 export { Slider } from './components/interaction/form/Slider';

package/src/web-components/globals.ts

@@ -33,7 +33,7 @@ const bdcCss = `
   @property --bdc-outline_shadow {
     syntax: '*';
     inherits: false;
-    initial-value: none;
+    initial-value: 0 0 0 0 transparent;
   }
 
   @layer component {
@@ -45,9 +45,9 @@ const bdcCss = `
       --bdc_color--error: var(--bds-color_error);
 
       --bdc-outline_width:  1px;
-      --bdc-outline_offset: -1px;
+      --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
       --bdc-outline_radius: var(--bds-border_radius--xs);
-      --bdc-outline_shadow: none;
+      --bdc-outline_shadow: 0 0 0 0 transparent;
     }
   }
 `;

package/src/web-components/interaction/BdsAccordion.mdx

@@ -0,0 +1,51 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsAccordion.stories';
+
+<Meta of={Stories} />
+
+# Accordion
+
+`<bds-accordion>` is a container for one or more `<bds-accordion-item>` elements. Each item shows a header and reveals its body on click. By default only one item can be open at a time; set `allow-multiple` to allow several.
+
+## Usage
+
+```html
+<bds-accordion>
+  <bds-accordion-item>
+    <span slot="header">Section 1</span>
+    <p>Content for section 1.</p>
+  </bds-accordion-item>
+  <bds-accordion-item>
+    <span slot="header">Section 2</span>
+    <p>Content for section 2.</p>
+  </bds-accordion-item>
+</bds-accordion>
+```
+
+## Attributes — `<bds-accordion>`
+
+| Attribute        | Type      | Default | Description                             |
+|------------------|-----------|---------|-----------------------------------------|
+| `allow-multiple` | `boolean` | `false` | Allow more than one item open at a time |
+
+## Attributes — `<bds-accordion-item>`
+
+| Attribute  | Type      | Default | Description                       |
+|------------|-----------|---------|-----------------------------------|
+| `disabled` | `boolean` | `false` | Prevents this item from toggling  |
+
+## Slots — `<bds-accordion-item>`
+
+| Slot      | Description              |
+|-----------|--------------------------|
+| `header`  | The clickable header text |
+| (default) | The collapsible body content |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/BdsAccordion.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index';
+
+function BdsAccordion({ allowMultiple }: { allowMultiple?: boolean }) {
+  return React.createElement(
+    'bds-accordion',
+    { 'allow-multiple': allowMultiple || undefined },
+    React.createElement(
+      'bds-accordion-item',
+      null,
+      React.createElement('span', { slot: 'header' }, 'What is a web component?'),
+      React.createElement('p', { style: { margin: 0 } }, 'A web component is a reusable custom element built with native web platform APIs — no framework required.'),
+    ),
+    React.createElement(
+      'bds-accordion-item',
+      null,
+      React.createElement('span', { slot: 'header' }, 'How do I use it?'),
+      React.createElement('p', { style: { margin: 0 } }, 'Import the package and add the custom element tag to your HTML. Works in any framework.'),
+    ),
+    React.createElement(
+      'bds-accordion-item',
+      null,
+      React.createElement('span', { slot: 'header' }, 'Is it accessible?'),
+      React.createElement('p', { style: { margin: 0 } }, 'Yes. Each item uses proper ARIA attributes: aria-expanded, aria-controls, and aria-labelledby.'),
+    ),
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Accordion',
+  component: BdsAccordion,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    allowMultiple: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsAccordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { allowMultiple: false } };
+export const AllowMultiple: Story = { args: { allowMultiple: true } };
+
+export const WithDisabledItem: Story = {
+  render: () =>
+    React.createElement(
+      'bds-accordion',
+      null,
+      React.createElement(
+        'bds-accordion-item',
+        null,
+        React.createElement('span', { slot: 'header' }, 'Available item'),
+        React.createElement('p', { style: { margin: 0 } }, 'This item can be opened and closed.'),
+      ),
+      React.createElement(
+        'bds-accordion-item',
+        { disabled: true },
+        React.createElement('span', { slot: 'header' }, 'Disabled item'),
+        React.createElement('p', { style: { margin: 0 } }, 'This item cannot be toggled.'),
+      ),
+      React.createElement(
+        'bds-accordion-item',
+        null,
+        React.createElement('span', { slot: 'header' }, 'Another available item'),
+        React.createElement('p', { style: { margin: 0 } }, 'This item can also be opened.'),
+      ),
+    ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888', fontWeight: 600 }}>Single open (default)</p>
+        <BdsAccordion />
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888', fontWeight: 600 }}>Multiple open</p>
+        <BdsAccordion allowMultiple />
+      </div>
+    </div>
+  ),
+};

package/src/web-components/interaction/BdsCollapsible.mdx

@@ -0,0 +1,46 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsCollapsible.stories';
+
+<Meta of={Stories} />
+
+# Collapsible
+
+`<bds-collapsible>` reveals or hides content on demand. Built on native `<details>/<summary>` semantics for built-in accessibility. Set the same `name` on multiple collapsibles to link them — opening one will close the others.
+
+## Usage
+
+```html
+<bds-collapsible>
+  <span slot="summary">Show more</span>
+  <p>Hidden content revealed on click.</p>
+</bds-collapsible>
+```
+
+## Attributes
+
+| Attribute | Type      | Default     | Description                                  |
+|-----------|-----------|-------------|----------------------------------------------|
+| `open`    | `boolean` | `false`     | Controls the open/closed state               |
+| `name`    | `string`  | `undefined` | Links collapsibles into a mutually-exclusive group |
+
+## Slots
+
+| Slot      | Description                      |
+|-----------|----------------------------------|
+| `summary` | The always-visible clickable label |
+| (default) | The collapsible body content     |
+
+## Events
+
+| Event        | Detail                          | Description                    |
+|--------------|---------------------------------|--------------------------------|
+| `bds-toggle` | `{ open: boolean }`             | Fired when open state changes  |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.Grouped} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/BdsCollapsible.stories.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index';
+
+function BdsCollapsible({
+  open,
+  name,
+  summary,
+  children,
+  onToggle,
+}: {
+  open?: boolean;
+  name?: string;
+  summary?: string;
+  children?: React.ReactNode;
+  onToggle?: (e: Event) => void;
+}) {
+  return React.createElement(
+    'bds-collapsible',
+    { open: open || undefined, name, onbdstoggle: onToggle },
+    React.createElement('span', { slot: 'summary' }, summary ?? 'Toggle section'),
+    children ?? React.createElement('p', { style: { margin: 0 } }, 'Collapsible content goes here.'),
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Collapsible',
+  component: BdsCollapsible,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    open: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsCollapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { summary: 'Show more details' } };
+export const OpenByDefault: Story = { args: { summary: 'Open by default', open: true } };
+
+export const Grouped: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '480px' }}>
+      <BdsCollapsible name="faq" summary="What is this component?">
+        <p style={{ margin: 0 }}>A Collapsible reveals or hides content on demand.</p>
+      </BdsCollapsible>
+      <BdsCollapsible name="faq" summary="How does grouping work?">
+        <p style={{ margin: 0 }}>Setting the same `name` on multiple collapsibles links them — opening one closes the others.</p>
+      </BdsCollapsible>
+      <BdsCollapsible name="faq" summary="Is it accessible?">
+        <p style={{ margin: 0 }}>Yes — built on native `&lt;details&gt;/&lt;summary&gt;` semantics.</p>
+      </BdsCollapsible>
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '480px' }}>
+      <BdsCollapsible summary="Closed by default">
+        <p style={{ margin: 0 }}>This starts closed.</p>
+      </BdsCollapsible>
+      <BdsCollapsible summary="Open by default" open>
+        <p style={{ margin: 0 }}>This starts open.</p>
+      </BdsCollapsible>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (
+      <div style={{ maxWidth: '480px' }}>
+        <p style={{ margin: '0 0 8px', fontSize: '0.875rem' }}>State: {isOpen ? 'open' : 'closed'}</p>
+        <BdsCollapsible
+          summary="Controlled collapsible"
+          open={isOpen}
+          onToggle={(e: Event) => setIsOpen((e as CustomEvent<{ open: boolean }>).detail.open)}
+        >
+          <p style={{ margin: 0 }}>Controlled via React state. The bds-toggle event updates the parent.</p>
+        </BdsCollapsible>
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/BdsDialog.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsDialog.stories';
+
+<Meta of={Stories} />
+
+# Dialog
+
+`<bds-dialog>` is a modal dialog built on the native `<dialog>` element. It traps focus while open, dismisses on Escape and backdrop click, and restores focus to the trigger element on close. Supports the native Invoker Commands API.
+
+## Usage
+
+```html
+<bds-dialog id="my-dialog">
+  <h2>Dialog title</h2>
+  <p>Dialog body content.</p>
+  <button type="button">Close</button>
+</bds-dialog>
+
+<!-- Declarative open via Invoker API -->
+<button type="button" commandfor="my-dialog" command="show-modal">Open</button>
+```
+
+## Attributes
+
+| Attribute | Type      | Default | Description                 |
+|-----------|-----------|---------|-----------------------------|
+| `open`    | `boolean` | `false` | Controls the open state     |
+
+## Events
+
+| Event       | Description                           |
+|-------------|---------------------------------------|
+| `bds-open`  | Fired when the dialog opens           |
+| `bds-close` | Fired when the dialog closes          |
+
+## Slots
+
+| Slot      | Description                         |
+|-----------|-------------------------------------|
+| (default) | Dialog content (title, body, actions) |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.InvokerAPI} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/BdsDialog.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index';
+
+function DialogDemo({ title = 'Dialog title', withForm = false }: { title?: string; withForm?: boolean }) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div>
+      <button type="button" onClick={() => setOpen(true)}>Open dialog</button>
+      {React.createElement(
+        'bds-dialog',
+        { open: open || undefined, onbdsclose: () => setOpen(false) },
+        React.createElement('h2', { style: { margin: '0 0 12px' } }, title),
+        withForm
+          ? React.createElement(
+              'form',
+              { style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
+              React.createElement('label', null,
+                'Name',
+                React.createElement('input', { type: 'text', placeholder: 'Your name', style: { display: 'block', width: '100%', marginTop: '4px' } }),
+              ),
+              React.createElement('label', null,
+                'Email',
+                React.createElement('input', { type: 'email', placeholder: 'you@example.com', style: { display: 'block', width: '100%', marginTop: '4px' } }),
+              ),
+            )
+          : React.createElement('p', { style: { margin: '0 0 12px' } }, 'This is the dialog body. Press Escape or click the × button to close.'),
+        React.createElement(
+          'div',
+          { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '12px' } },
+          React.createElement('button', { type: 'button', onClick: () => setOpen(false) }, 'Cancel'),
+          React.createElement('button', { type: 'button', onClick: () => setOpen(false) }, 'Confirm'),
+        ),
+      )}
+    </div>
+  );
+}
+
+function BdsDialogStory({ withForm }: { withForm?: boolean }) {
+  return React.createElement(DialogDemo, { withForm });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Dialog',
+  component: BdsDialogStory,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof BdsDialogStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { withForm: false } };
+export const WithForm: Story = { args: { withForm: true } };
+
+export const InvokerAPI: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
+      <p style={{ margin: 0, fontSize: '0.875rem', color: '#666' }}>
+        Uses native Invoker Commands API — no JavaScript needed.
+      </p>
+      {React.createElement('button', { type: 'button', commandfor: 'invoker-dialog', command: 'show-modal' }, 'Open via commandfor')}
+      {React.createElement(
+        'bds-dialog',
+        { id: 'invoker-dialog' },
+        React.createElement('h2', { style: { margin: '0 0 12px' } }, 'Opened via Invoker API'),
+        React.createElement('p', { style: { margin: 0 } }, 'This dialog was opened declaratively using commandfor and command attributes.'),
+      )}
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => React.createElement(DialogDemo, { title: 'Confirmation' }),
+};

package/src/web-components/interaction/BdsDrawer.mdx

@@ -0,0 +1,50 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsDrawer.stories';
+
+<Meta of={Stories} />
+
+# Drawer
+
+`<bds-drawer>` is a slide-in side panel built on the native `<dialog>` element. It uses the same modal infrastructure as `<bds-dialog>` but positions itself at the edge of the viewport. Supports the native Invoker Commands API.
+
+## Usage
+
+```html
+<bds-drawer id="settings-drawer" side="right">
+  <span slot="title">Settings</span>
+  <p>Drawer body content.</p>
+</bds-drawer>
+
+<!-- Declarative open via Invoker API -->
+<button type="button" commandfor="settings-drawer" command="show-modal">Open settings</button>
+```
+
+## Attributes
+
+| Attribute | Type                    | Default   | Description                   |
+|-----------|-------------------------|-----------|-------------------------------|
+| `open`    | `boolean`               | `false`   | Controls the open state       |
+| `side`    | `"left" \| "right"`     | `"right"` | Which side the drawer slides in from |
+
+## Slots
+
+| Slot      | Description                      |
+|-----------|----------------------------------|
+| `title`   | Drawer title text in the header  |
+| (default) | Drawer body content              |
+
+## Events
+
+| Event       | Description                     |
+|-------------|---------------------------------|
+| `bds-open`  | Fired when the drawer opens     |
+| `bds-close` | Fired when the drawer closes    |
+
+## Stories
+
+<Canvas of={Stories.Right} />
+<Canvas of={Stories.InvokerAPI} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/BdsDrawer.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { DrawerSide } from './bds-drawer';
+import '../index';
+
+function DrawerDemo({ side = 'right' }: { side?: DrawerSide }) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div>
+      <button type="button" onClick={() => setOpen(true)}>Open drawer</button>
+      {React.createElement(
+        'bds-drawer',
+        { open: open || undefined, side, onbdsclose: () => setOpen(false) },
+        React.createElement('span', { slot: 'title' }, side === 'left' ? 'Left Drawer' : 'Settings'),
+        React.createElement('p', { style: { margin: '0 0 12px' } }, 'Drawer content goes here. Press Escape or click × to close.'),
+        React.createElement('button', { type: 'button', onClick: () => setOpen(false) }, 'Close'),
+      )}
+    </div>
+  );
+}
+
+function BdsDrawer({ side }: { side?: DrawerSide }) {
+  return React.createElement(DrawerDemo, { side });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Drawer',
+  component: BdsDrawer,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    side: { control: 'select', options: ['left', 'right'] },
+  },
+} satisfies Meta<typeof BdsDrawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Right: Story = { args: { side: 'right' } };
+export const Left: Story = { args: { side: 'left' } };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px' }}>
+      <DrawerDemo side="right" />
+      <DrawerDemo side="left" />
+    </div>
+  ),
+};
+
+export const InvokerAPI: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
+      <p style={{ margin: 0, fontSize: '0.875rem', color: '#666' }}>
+        Uses native Invoker Commands API — no JavaScript needed.
+      </p>
+      {React.createElement('button', { type: 'button', commandfor: 'invoker-drawer', command: 'show-modal' }, 'Open via commandfor')}
+      {React.createElement(
+        'bds-drawer',
+        { id: 'invoker-drawer', side: 'right' },
+        React.createElement('span', { slot: 'title' }, 'Opened via Invoker API'),
+        React.createElement('p', { style: { margin: 0 } }, 'This drawer was opened declaratively using commandfor and command attributes.'),
+      )}
+    </div>
+  ),
+};