@boostdev/design-system-components 1.2.0 → 1.2.1

package/dist/web-components/interaction/bds-collapsible.js

@@ -1,6 +1,6 @@
 import {
   BdsCollapsible
-} from "../chunk-5IPHEONG.js";
+} from "../chunk-6I2DBFQ7.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCollapsible

package/dist/web-components/interaction/bds-drawer.js

@@ -1,6 +1,6 @@
 import {
   BdsDrawer
-} from "../chunk-DI46Q2EA.js";
+} from "../chunk-OCODKRVZ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDrawer

package/dist/web-components/interaction/form/bds-segmented-control.js

@@ -1,6 +1,6 @@
 import {
   BdsSegmentedControl
-} from "../../chunk-6MH5UWUD.js";
+} from "../../chunk-2FGATTGT.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSegmentedControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

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

@@ -1,84 +1,65 @@
 @layer component {
   .drawer {
     position: fixed;
-    inset: 0;
+    inset-block: 0;
+    inset-inline: auto 0;
+    inline-size: min(28rem, 90vw);
+    max-inline-size: 100vw;
+    block-size: 100dvh;
+    max-block-size: 100dvh;
     margin: 0;
     padding: 0;
-    inline-size: 100%;
-    max-inline-size: 100%;
-    block-size: 100%;
-    max-block-size: 100%;
-    border: none;
-    background: transparent;
-    overflow: hidden;
-    transition:
-      display var(--bds-animation_transition-duration) allow-discrete,
-      overlay var(--bds-animation_transition-duration) allow-discrete;
-  }
-
-  .drawer::backdrop {
-    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
-    backdrop-filter: blur(3px);
-    transition:
-      display var(--bds-animation_transition-duration) allow-discrete,
-      overlay var(--bds-animation_transition-duration) allow-discrete,
-      background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
-      backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
-  }
-
-  @starting-style {
-    .drawer[open]::backdrop {
-      background-color: transparent;
-      backdrop-filter: blur(0);
-    }
-  }
-
-  .panel {
-    position: absolute;
-    inset-block: 0;
-    inset-inline: auto;
     display: flex;
     flex-direction: column;
-    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));
+    border: none;
     box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
     translate: 100% 0;
-    transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
-  }
-
-  .--side_right .panel {
-    inset-inline-end: 0;
-    translate: 100% 0;
+    transition:
+      translate var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+      overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
   }
 
-  .--side_left .panel {
-    inset-inline-start: 0;
+  .--side_left.drawer {
+    inset-inline: 0 auto;
     translate: -100% 0;
   }
 
-  .drawer[open] .panel {
+  .drawer[open] {
     translate: 0 0;
   }
 
-  .drawer[open].--side_right .panel {
-    animation: bdc-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+  @starting-style {
+    .drawer[open] {
+      translate: 100% 0;
+    }
+
+    .--side_left.drawer[open] {
+      translate: -100% 0;
+    }
   }
 
-  .drawer[open].--side_left .panel {
-    animation: bdc-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+  .drawer::backdrop {
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
+    backdrop-filter: blur(3px);
+    opacity: 0;
+    transition:
+      opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+      overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
   }
 
-  @keyframes bdc-drawer-slide-right {
-    from { translate: 100% 0; }
-    to { translate: 0 0; }
+  .drawer[open]::backdrop {
+    opacity: 1;
   }
 
-  @keyframes bdc-drawer-slide-left {
-    from { translate: -100% 0; }
-    to { translate: 0 0; }
+  @starting-style {
+    .drawer[open]::backdrop {
+      opacity: 0;
+    }
   }
 
   .header {
@@ -128,14 +109,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .drawer,
-    .drawer::backdrop,
-    .panel {
+    .drawer::backdrop {
       transition: none;
     }
-
-    .drawer[open].--side_right .panel,
-    .drawer[open].--side_left .panel {
-      animation: none;
-    }
   }
 }

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

@@ -75,7 +75,13 @@ export function Drawer({
 
   // Close on backdrop click
   const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === dialogRef.current) onClose();
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    const outside =
+      e.clientX < rect.left || e.clientX > rect.right ||
+      e.clientY < rect.top  || e.clientY > rect.bottom;
+    if (outside) onClose();
   };
 
   // Close on Escape (dialog handles it natively, but we sync state)
@@ -94,23 +100,21 @@ export function Drawer({
       onClick={handleClick}
       onCancel={handleCancel}
     >
-      <div className={css.panel}>
-        <div className={css.header}>
-          {!!title && title}
-          <button
-            type="button"
-            className={css.closeButton}
-            commandfor={id}
-            command="close"
-            aria-label="Close drawer"
-          >
-            <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>
-        <div className={css.body}>{children}</div>
+      <div className={css.header}>
+        {!!title && title}
+        <button
+          type="button"
+          className={css.closeButton}
+          commandfor={id}
+          command="close"
+          aria-label="Close drawer"
+        >
+          <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>
+      <div className={css.body}>{children}</div>
     </dialog>
   );
 }

package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx

@@ -87,15 +87,19 @@ When `selectedIndex` is omitted, the component auto-detects the active item from
 
 | Variant | Description |
 |---------|-------------|
-| `outline` (default) | Transparent track, inset-border indicator slides to the active item |
-| `filled` | Coloured track, filled thumb slides behind the active item |
+| `outline` (default) | Subtle track background; active item has a `bg` background with inset-border indicator; inactive items are transparent |
+| `filled` | Subtle track background; coloured filled thumb slides behind the active item |
 
 ## CSS variables
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--control_track-bg` | `var(--bds-color_bg--subtle)` (filled) / `transparent` (outline) | Track background |
-| `--control_thumb-bg` | `var(--bds-color_interactive)` | Filled thumb colour |
+| `--control_track-bg` | `var(--bds-color_bg--subtle)` | Track background colour (both variants) |
+| `--control_item-bg` | `transparent` | Inactive item background (outline variant) |
+| `--control_item-bg--active` | `var(--bds-color_bg)` | Active item background (outline variant) |
+| `--control_radius` | `var(--bds-border_radius--m)` | Border radius of the outer track |
+| `--control_thumb-bg` | `var(--bds-color_interactive)` | Filled thumb colour (filled variant) |
+| `--control_thumb-radius` | `var(--bds-border_radius--s)` | Border radius of the thumb, indicator, and item focus ring |
 | `--control_label-color` | `var(--bds-color_on-bg--subtle)` | Inactive item text colour |
 | `--control_label-color--active` | `var(--bds-color_on-interactive)` (filled) / `var(--bds-color_interactive)` (outline) | Active item text colour |
 | `--control_label-color--hover` | `var(--bds-color_on-bg)` | Hovered inactive item text colour |

package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css

@@ -6,7 +6,7 @@
     grid-auto-columns: 1fr;
     padding: var(--bds-space_xxxs);
     background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
-    border-radius: var(--bds-border_radius--m);
+    border-radius: var(--control_radius, var(--bds-border_radius--m));
     gap: 0;
   }
 
@@ -16,7 +16,7 @@
     inset-block: var(--bds-space_xxxs);
     inset-inline-start: var(--bds-space_xxxs);
     inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
-    border-radius: var(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
     background-color: var(--control_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     pointer-events: none;
@@ -30,7 +30,7 @@
     inset-block: var(--bds-space_xxxs);
     inset-inline-start: var(--bds-space_xxxs);
     inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
-    border-radius: var(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
     pointer-events: none;
     z-index: 2;
     display: none;
@@ -46,7 +46,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
@@ -66,7 +66,7 @@
   .item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
-    border-radius: var(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
   }
 
   .item.--active {
@@ -92,7 +92,6 @@
 
   /* Outline variant — no thumb, sliding inset-border indicator, interactive active color */
   .control.--variant_outline {
-    background-color: var(--control_track-bg, transparent);
     --control_label-color--active: var(--bds-color_interactive);
   }
 
@@ -100,6 +99,14 @@
     display: none;
   }
 
+  .control.--variant_outline .item {
+    background-color: var(--control_item-bg, transparent);
+  }
+
+  .control.--variant_outline .item.--active {
+    background-color: var(--control_item-bg--active, var(--bds-color_bg));
+  }
+
   .control.--variant_outline .indicator {
     display: block;
     box-shadow: inset 0 0 0 2px var(--bds-color_interactive);

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/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

@@ -3,49 +3,101 @@ import * as Stories from './BdsAccordion.stories';
 
 <Meta of={Stories} />
 
-# Accordion
+# &lt;bds-accordion&gt;
 
-`<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.
+Framework-agnostic Accordion custom element. Coordinates open/closed state across `<bds-accordion-item>` children; by default only one item is open at a time.
 
-## Usage
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/components/web-components';
+```
+
+Or in HTML without a bundler:
 
 ```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>
+<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` | Allow more than one item open at a time |
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `allow-multiple` | boolean | `false` | When set, multiple items can be open simultaneously |
 
 ## Attributes — `<bds-accordion-item>`
 
-| Attribute  | Type      | Default | Description                       |
-|------------|-----------|---------|-----------------------------------|
-| `disabled` | `boolean` | `false` | Prevents this item from toggling  |
+| 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 clickable header text |
-| (default) | The collapsible body content |
+| Slot | Description |
+|------|-------------|
+| `header` | The always-visible trigger label |
+| `(default)` | The content revealed when the item is open |
 
-## Stories
+## Events
 
-<Canvas of={Stories.Default} />
-<Canvas of={Stories.AllVariants} />
+| Event | Bubbles | Description |
+|-------|---------|-------------|
+| `bds-accordion-item-toggle` | Yes | Fired by `<bds-accordion-item>` when the trigger is clicked; the parent accordion handles state |
 
-## Controls
+## Usage in plain HTML
 
-<ArgTypes of={Stories} />
+```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

@@ -1,85 +1,94 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import '../index';
+import '../index'; // auto-registers all custom elements
 
-function BdsAccordion({ allowMultiple }: { allowMultiple?: boolean }) {
+// 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 },
-    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.'),
-    ),
+    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: BdsAccordion,
+  component: BdsAccordionStory,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'padded' },
   argTypes: {
     allowMultiple: { control: 'boolean' },
   },
-} satisfies Meta<typeof BdsAccordion>;
+} 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: () =>
-    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 AllowMultiple: Story = {
+  args: { allowMultiple: true },
 };
 
-export const AllVariants: Story = {
+export const WithDisabledItem: 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>
+    <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>
   ),
 };