@boostdev/design-system-components 1.1.2 → 1.2.1

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/stories/Introduction.mdx

@@ -5,6 +5,7 @@ import foundationPackageJson from '../../node_modules/@boostdev/design-system-fo
 import './Introduction.css';
 import {ButtonGroup} from "../components/layout/ButtonGroup/index.ts";
 import {Card} from "../components/layout/Card/index.ts";
+import logo from '../static/logo.svg';
 
 <Meta title="Introduction"/>
 
@@ -12,7 +13,7 @@ import {Card} from "../components/layout/Card/index.ts";
 
 <div>
     <div>
-        <img src="../../src/static/logo.svg" alt="BoostDev logo" width={200}/>
+        <img src={logo} alt="BoostDev logo" width={200}/>
         <div className="title">Design System Foundation {foundationPackageJson.version} &<br/> Components {componentsPackageJson.version}</div>
     </div>
     <div className="main-description">

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/index.ts

@@ -57,3 +57,15 @@ export { BdsIconWrapper } from './ui/bds-icon-wrapper';
 export { BdsDescriptionList } from './ui/bds-description-list';
 export { BdsBreadcrumb } from './ui/bds-breadcrumb';
 export { BdsLink } from './ui/bds-link';
+
+// Phase 8 — complete parity with React library
+export { BdsButtonGroup } from './ui/bds-button-group';
+export { BdsTable } from './ui/bds-table';
+export { BdsPagination } from './ui/bds-pagination';
+export { BdsCheckboxGroup } from './interaction/form/bds-checkbox-group';
+export { BdsRadioGroup } from './interaction/form/bds-radio-group';
+export { BdsFormInput } from './interaction/form/bds-form-input';
+export { BdsCarousel } from './ui/bds-carousel';
+export { BdsCalendar } from './ui/bds-calendar';
+export { BdsDropdownMenu } from './interaction/bds-dropdown-menu';
+export { BdsDropdownMenuItem } from './interaction/bds-dropdown-menu-item';

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

@@ -0,0 +1,103 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsAccordion.stories';
+
+<Meta of={Stories} />
+
+# &lt;bds-accordion&gt;
+
+Framework-agnostic Accordion custom element. Coordinates open/closed state across `<bds-accordion-item>` children; by default only one item is open at a time.
+
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/components/web-components';
+```
+
+Or in HTML without a bundler:
+
+```html
+<script type="module">
+  import '@boostdev/components/web-components';
+</script>
+```
+
+## When to use
+
+- Displaying a list of questions and answers (FAQ)
+- Grouping related settings or options to reduce visual clutter
+- Progressive disclosure of content sections on a page
+
+## When not to use
+
+- When all sections should be visible at once — use a regular list or `<bds-collapsible>` per section instead
+- For navigation — use a menu or sidebar
+
+## Examples
+
+### Default (single open)
+<Canvas of={Stories.Default} />
+
+### Allow multiple open
+<Canvas of={Stories.AllowMultiple} />
+
+### With disabled item
+<Canvas of={Stories.WithDisabledItem} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Attributes — `<bds-accordion>`
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `allow-multiple` | boolean | `false` | When set, multiple items can be open simultaneously |
+
+## Attributes — `<bds-accordion-item>`
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `open` | boolean | `false` | Whether this panel is currently expanded |
+| `disabled` | boolean | `false` | Prevents the user from toggling this item |
+
+## Slots — `<bds-accordion-item>`
+
+| Slot | Description |
+|------|-------------|
+| `header` | The always-visible trigger label |
+| `(default)` | The content revealed when the item is open |
+
+## Events
+
+| Event | Bubbles | Description |
+|-------|---------|-------------|
+| `bds-accordion-item-toggle` | Yes | Fired by `<bds-accordion-item>` when the trigger is clicked; the parent accordion handles state |
+
+## Usage in plain HTML
+
+```html
+<bds-accordion>
+  <bds-accordion-item open>
+    <span slot="header">What is Boost Components?</span>
+    <p>A framework-agnostic component library built on web standards.</p>
+  </bds-accordion-item>
+  <bds-accordion-item>
+    <span slot="header">How do I install it?</span>
+    <p>Run npm install @boostdev/components.</p>
+  </bds-accordion-item>
+</bds-accordion>
+
+<!-- Allow multiple panels open at once -->
+<bds-accordion allow-multiple>
+  <!-- ... -->
+</bds-accordion>
+```
+
+## Accessibility
+
+- Each trigger is a `<button>` inside an `<h3>` heading with `aria-expanded` and `aria-controls` wired to the corresponding panel
+- Panels use `role="region"` and `aria-labelledby` pointing back to the trigger
+- `disabled` prevents toggle and conveys state via the native `disabled` attribute on the button
+- Chevron icon is `aria-hidden="true"`

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index'; // auto-registers all custom elements
+
+// Thin wrapper for bds-accordion-item
+function BdsAccordionItem({
+  open,
+  disabled,
+  header,
+  children,
+}: {
+  open?: boolean;
+  disabled?: boolean;
+  header?: string;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-accordion-item',
+    { open: open || undefined, disabled: disabled || undefined },
+    React.createElement('span', { slot: 'header' }, header ?? 'Accordion item'),
+    children ?? React.createElement('p', { style: { margin: 0 } }, 'Accordion panel content.'),
+  );
+}
+
+// Thin wrapper for bds-accordion
+function BdsAccordion({
+  allowMultiple,
+  children,
+}: {
+  allowMultiple?: boolean;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-accordion',
+    { 'allow-multiple': allowMultiple || undefined },
+    children,
+  );
+}
+
+// Top-level wrapper used by Storybook controls
+function BdsAccordionStory({
+  allowMultiple = false,
+}: {
+  allowMultiple?: boolean;
+}) {
+  return (
+    <BdsAccordion allowMultiple={allowMultiple}>
+      <BdsAccordionItem header="What is Boost Components?" open>
+        {React.createElement('p', { style: { margin: 0 } }, 'A framework-agnostic component library built on web standards.')}
+      </BdsAccordionItem>
+      <BdsAccordionItem header="How do I install it?">
+        {React.createElement('p', { style: { margin: 0 } }, 'Run npm install @boostdev/components and import the web components entry point.')}
+      </BdsAccordionItem>
+      <BdsAccordionItem header="Does it support dark mode?">
+        {React.createElement('p', { style: { margin: 0 } }, 'Yes — all design tokens respond to [data-theme="dark"] and prefers-color-scheme: dark.')}
+      </BdsAccordionItem>
+    </BdsAccordion>
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Accordion',
+  component: BdsAccordionStory,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    allowMultiple: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsAccordionStory>;
+
+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: () => (
+    <BdsAccordion>
+      <BdsAccordionItem header="Available item" open>
+        {React.createElement('p', { style: { margin: 0 } }, 'This item can be toggled.')}
+      </BdsAccordionItem>
+      <BdsAccordionItem header="Disabled item" disabled>
+        {React.createElement('p', { style: { margin: 0 } }, 'This content is inaccessible because the item is disabled.')}
+      </BdsAccordionItem>
+      <BdsAccordionItem header="Another available item">
+        {React.createElement('p', { style: { margin: 0 } }, 'This item can also be toggled.')}
+      </BdsAccordionItem>
+    </BdsAccordion>
+  ),
+};

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

@@ -0,0 +1,116 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsCollapsible.stories';
+
+<Meta of={Stories} />
+
+# &lt;bds-collapsible&gt;
+
+Framework-agnostic Collapsible custom element. Wraps a native `<details>`/`<summary>` pair for built-in toggle behaviour with design-system styling and a `bds-toggle` event.
+
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/components/web-components';
+```
+
+Or in HTML without a bundler:
+
+```html
+<script type="module">
+  import '@boostdev/components/web-components';
+</script>
+```
+
+## When to use
+
+- Revealing secondary content on demand (e.g. "More details", "Advanced options")
+- Standalone expandable sections that are independent of each other
+- When accordion-style coordination is not required
+
+## When not to use
+
+- When multiple related sections need to be coordinated (open one, close others) — use `<bds-accordion>` instead
+- For navigation menus — use a dedicated nav component
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Open by default
+<Canvas of={Stories.Open} />
+
+### Grouped (only one open at a time)
+<Canvas of={Stories.Grouped} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `open` | boolean | `false` | Whether the panel is currently expanded |
+| `name` | string | `""` | Groups collapsibles so only one in a group is open at a time (native `<details name>` behaviour) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `summary` | The always-visible trigger text |
+| `(default)` | The content revealed when expanded |
+
+## Events
+
+| Event | Bubbles | Detail | Description |
+|-------|---------|--------|-------------|
+| `bds-toggle` | Yes | `{ open: boolean }` | Fired when the collapsible opens or closes; `detail.open` reflects the new state |
+
+## Usage in plain HTML
+
+```html
+<bds-collapsible>
+  <span slot="summary">Show details</span>
+  <p>Hidden content revealed on toggle.</p>
+</bds-collapsible>
+
+<!-- Open by default -->
+<bds-collapsible open>
+  <span slot="summary">Open section</span>
+  <p>This is visible immediately.</p>
+</bds-collapsible>
+
+<!-- Grouped: only one open at a time -->
+<bds-collapsible name="faq">
+  <span slot="summary">Question 1</span>
+  <p>Answer 1</p>
+</bds-collapsible>
+<bds-collapsible name="faq">
+  <span slot="summary">Question 2</span>
+  <p>Answer 2</p>
+</bds-collapsible>
+```
+
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--collapsible_bg` | `var(--bds-color_bg)` | Summary (header) background colour |
+| `--collapsible_bg--hover` | `var(--bds-color_bg--subtle)` | Summary background on hover |
+| `--collapsible_content-bg` | `var(--bds-color_bg)` | Content panel background colour |
+| `--collapsible_color` | `var(--bds-color_on-bg)` | Summary text colour |
+| `--collapsible_on-color` | `var(--bds-color_on-bg)` | Content text colour |
+| `--collapsible_border-color` | `var(--bds-color_bg--subtle)` | Border colour |
+| `--collapsible_border-width` | `1px` | Border width |
+| `--collapsible_border-radius` | `var(--bds-border_radius--m)` | Border radius |
+
+## Accessibility
+
+- Built on native `<details>`/`<summary>`, which is keyboard accessible out of the box
+- The `summary` slot element is focusable and responds to Enter/Space
+- Focus outline follows design system tokens
+- Chevron icon is `aria-hidden="true"`
+- `prefers-reduced-motion` disables the chevron transition

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index'; // auto-registers all custom elements
+
+// Thin React wrapper so Storybook controls work with the custom element's props
+function BdsCollapsible({
+  open = false,
+  name,
+  summary,
+  children,
+}: {
+  open?: boolean;
+  name?: string;
+  summary?: string;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-collapsible',
+    { open: open || undefined, name: name || undefined },
+    React.createElement('span', { slot: 'summary' }, summary ?? 'Toggle section'),
+    children ?? React.createElement('p', { style: { margin: 0 } }, 'Collapsible panel content.'),
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Collapsible',
+  component: BdsCollapsible,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    open: { control: 'boolean' },
+    name: { control: 'text' },
+    summary: { control: 'text' },
+  },
+} satisfies Meta<typeof BdsCollapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    summary: 'Show details',
+    open: false,
+  },
+};
+
+export const Open: Story = {
+  args: {
+    summary: 'Open by default',
+    open: true,
+    children: React.createElement('p', { style: { margin: 0 } }, 'This collapsible is open by default via the open attribute.'),
+  },
+};
+
+export const Grouped: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxWidth: '480px' }}>
+      {(['Section A', 'Section B', 'Section C'] as const).map((label, i) =>
+        React.createElement(
+          'bds-collapsible',
+          { key: label, name: 'group', open: i === 0 ? '' : undefined },
+          React.createElement('span', { slot: 'summary' }, label),
+          React.createElement('p', { style: { margin: 0 } }, `Content for ${label}. Only one section in this group can be open at a time.`),
+        ),
+      )}
+    </div>
+  ),
+};

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

@@ -0,0 +1,110 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsDialog.stories';
+
+<Meta of={Stories} />
+
+# &lt;bds-dialog&gt;
+
+Framework-agnostic Dialog custom element. Wraps a native `<dialog>` element with `showModal()` / `close()` lifecycle, backdrop-click to dismiss, Escape key handling, Tab focus trapping, and the Invoker Commands API.
+
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/components/web-components';
+```
+
+Or in HTML without a bundler:
+
+```html
+<script type="module">
+  import '@boostdev/components/web-components';
+</script>
+```
+
+## When to use
+
+- Confirmations that require a decision before continuing
+- Short forms (edit profile, create item) that interrupt the current flow
+- Alerts or notices that must be acknowledged
+
+## When not to use
+
+- Complex multi-step flows — consider a dedicated page instead
+- Non-blocking panels — use `<bds-drawer>` or `<bds-popover>` instead
+- Displaying lots of scrollable content — prefer a full page or `<bds-drawer>`
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With form content
+<Canvas of={Stories.WithForm} />
+
+### Invoker Commands API
+<Canvas of={Stories.InvokerCommands} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `open` | boolean | `false` | Controlled open state — syncs to native `showModal()` / `close()` |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `(default)` | Dialog content |
+
+## Events
+
+| Event | Bubbles | Description |
+|-------|---------|-------------|
+| `bds-open` | Yes | Fired when the dialog opens |
+| `bds-close` | Yes | Fired when the dialog closes (backdrop click, Escape, or close button) |
+
+## Invoker Commands API
+
+Open or close the dialog declaratively using the Invoker Commands API:
+
+```html
+<button commandfor="my-dialog" command="show-modal">Open</button>
+<button commandfor="my-dialog" command="close">Close</button>
+
+<bds-dialog id="my-dialog">
+  <p>Dialog content</p>
+</bds-dialog>
+```
+
+The Invoker Commands API is a native browser feature. For browsers that do not support it yet, use the `open` attribute or JavaScript.
+
+## Usage in plain HTML
+
+```html
+<bds-dialog id="my-dialog">
+  <h2>Confirm deletion</h2>
+  <p>This action cannot be undone.</p>
+  <div>
+    <button onclick="document.getElementById('my-dialog').open = false">Cancel</button>
+    <button>Delete</button>
+  </div>
+</bds-dialog>
+
+<button onclick="document.getElementById('my-dialog').open = true">Delete item</button>
+```
+
+## Accessibility
+
+- Renders a native `<dialog>` element with `aria-modal="true"`
+- Focus is trapped inside the dialog while open (Tab / Shift+Tab cycle)
+- Escape key closes the dialog
+- Clicking the backdrop closes the dialog
+- Focus returns to the triggering element on close
+- A visually positioned close button is provided with `aria-label="Close dialog"`
+- `document.body.overflow` is set to `hidden` while the dialog is open to prevent background scroll