@boostdev/design-system-components 1.1.1 → 1.2.0

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

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

@@ -0,0 +1,34 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSkipLink.stories';
+
+<Meta of={Stories} />
+
+# Skip Link
+
+`<bds-skip-link>` renders a visually hidden anchor that becomes visible on focus, allowing keyboard users to skip directly to the main content. This is a critical accessibility component that should be the first focusable element on every page.
+
+## Usage
+
+```html
+<bds-skip-link href="#main-content">Skip to main content</bds-skip-link>
+<!-- ... navigation ... -->
+<main id="main-content">...</main>
+```
+
+## Attributes
+
+| Attribute | Type     | Default | Description                            |
+|-----------|----------|---------|----------------------------------------|
+| `href`    | `string` | `""`    | Target anchor ID (e.g. `#main-content`) |
+
+## Slots
+
+| Slot      | Description              |
+|-----------|--------------------------|
+| (default) | The visible link text    |
+
+## Notes
+
+- The link is visually hidden until it receives keyboard focus (Tab key)
+- Place it as the very first element inside `<body>` before any navigation
+- The `href` must point to an `id` on the main content container

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index';
+
+function BdsSkipLink({ href, children }: { href?: string; children?: React.ReactNode }) {
+  return React.createElement('bds-skip-link', { href }, children);
+}
+
+const meta = {
+  title: 'Web Components/Interaction/SkipLink',
+  component: BdsSkipLink,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof BdsSkipLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '80px', border: '1px dashed #ccc', padding: '8px' }}>
+      <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>
+        Tab into this area to reveal the skip link
+      </p>
+      <BdsSkipLink href="#main">Skip to main content</BdsSkipLink>
+      <p style={{ margin: '8px 0 0', fontSize: '0.875rem' }}>Press Tab to focus the skip link above</p>
+    </div>
+  ),
+};
+
+export const CustomTarget: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '80px' }}>
+      <BdsSkipLink href="#main-content">Skip to main content</BdsSkipLink>
+    </div>
+  ),
+};
+
+export const CustomLabel: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '80px' }}>
+      <BdsSkipLink href="#content">Jump to content</BdsSkipLink>
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '120px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <p style={{ margin: 0, fontSize: '0.75rem', color: '#888' }}>Tab to reveal — visually hidden until focused</p>
+      <BdsSkipLink href="#main">Skip to main content</BdsSkipLink>
+      <BdsSkipLink href="#nav">Skip to navigation</BdsSkipLink>
+    </div>
+  ),
+};

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

@@ -0,0 +1,47 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsTabs.stories';
+
+<Meta of={Stories} />
+
+# Tabs
+
+`<bds-tabs>` provides a tabbed interface. Place `<bds-tab>` elements in the `tab` slot and matching `<bds-tab-panel>` elements in the `panel` slot. Tabs and panels are associated by order.
+
+## Usage
+
+```html
+<bds-tabs>
+  <bds-tab slot="tab">Overview</bds-tab>
+  <bds-tab slot="tab">Details</bds-tab>
+  <bds-tab-panel slot="panel">
+    <p>Overview content.</p>
+  </bds-tab-panel>
+  <bds-tab-panel slot="panel">
+    <p>Details content.</p>
+  </bds-tab-panel>
+</bds-tabs>
+```
+
+## Attributes — `<bds-tab>`
+
+| Attribute  | Type      | Default | Description               |
+|------------|-----------|---------|---------------------------|
+| `disabled` | `boolean` | `false` | Prevents selecting this tab |
+
+## Keyboard Navigation
+
+| Key         | Action                  |
+|-------------|-------------------------|
+| `ArrowLeft` | Move to previous tab    |
+| `ArrowRight`| Move to next tab        |
+| `Home`      | Move to first tab       |
+| `End`       | Move to last tab        |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />