@boostdev/design-system-components 1.2.0 → 1.2.2

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
+import { HTMLAttributes, KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -10,12 +10,12 @@ export interface TabItem {
   disabled?: boolean;
 }
 
-interface TabsProps extends WithClassName {
+interface TabsProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   tabs: TabItem[];
   defaultTab?: string;
 }
 
-export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
+export function Tabs({ tabs, defaultTab, className, ...rest }: Readonly<TabsProps>) {
   const baseId = useId();
   const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -49,7 +49,7 @@ export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
   };
 
   return (
-    <div className={cn(css.tabs, className)}>
+    <div {...rest} className={cn(css.tabs, className)}>
       <div role="tablist" className={css.tabList}>
         {tabs.map((tab, i) => {
           const tabId = `${baseId}-tab-${tab.id}`;

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
 import css from './Tooltip.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface TooltipProps extends WithClassName {
+interface TooltipProps extends WithClassName, Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   children: ReactElement;
@@ -14,6 +14,7 @@ export function Tooltip({
   placement = 'top',
   children,
   className,
+  ...rest
 }: Readonly<TooltipProps>) {
   const tooltipId = useId();
   const [isVisible, setIsVisible] = useState(false);
@@ -26,6 +27,7 @@ export function Tooltip({
 
   return (
     <span
+      {...rest}
       className={cn(css.wrapper, className)}
       onMouseEnter={() => setIsVisible(true)}
       onMouseLeave={() => setIsVisible(false)}

package/src/components/ui/Typography/Typography.tsx

@@ -1,14 +1,13 @@
-import { ReactNode, ElementType } from 'react';
+import { ElementType, HTMLAttributes } from 'react';
 import css from './Typography.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 
-interface TypographyProps extends WithClassName {
+interface TypographyProps extends WithClassName, HTMLAttributes<HTMLElement> {
   variant?: TypographyVariant;
   component?: ElementType;
-  children: ReactNode;
 }
 
 const variantToElement: Record<TypographyVariant, ElementType> = {
@@ -19,10 +18,10 @@ const variantToElement: Record<TypographyVariant, ElementType> = {
   body_s: 'p',
 };
 
-export function Typography({ variant = 'body', component, children, className }: TypographyProps) {
+export function Typography({ variant = 'body', component, children, className, ...rest }: TypographyProps) {
   const Component = component || variantToElement[variant];
 
   return (
-    <Component className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
+    <Component {...rest} className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
   );
 }

package/src/stories/DesignSystem/Grid.mdx

@@ -122,6 +122,8 @@ Apply the built-in layout utilities to use the grid system without writing CSS:
 </div>
 ```
 
+> **Important:** Every direct child of `utl-main-grid` **must** set `grid-column: var(--bds-grid_span-<variant>);` (e.g. `--bds-grid_span-100`, `--bds-grid_span-50`). Without it the child collapses to a single column and the responsive grid behaviour is lost.
+
 ## Custom grid usage
 
 ```css

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

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

@@ -3,44 +3,114 @@ import * as Stories from './BdsCollapsible.stories';
 
 <Meta of={Stories} />
 
-# Collapsible
+# &lt;bds-collapsible&gt;
 
-`<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.
+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.
 
-## Usage
+> **Status: experimental** — API may change before stable release.
+
+## Installation
+
+```js
+import '@boostdev/components/web-components';
+```
+
+Or in HTML without a bundler:
 
 ```html
-<bds-collapsible>
-  <span slot="summary">Show more</span>
-  <p>Hidden content revealed on click.</p>
-</bds-collapsible>
+<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`     | Controls the open/closed state               |
-| `name`    | `string`  | `undefined` | Links collapsibles into a mutually-exclusive group |
+| 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 clickable label |
-| (default) | The collapsible body content     |
+| Slot | Description |
+|------|-------------|
+| `summary` | The always-visible trigger text |
+| `(default)` | The content revealed when expanded |
 
 ## Events
 
-| Event        | Detail                          | Description                    |
-|--------------|---------------------------------|--------------------------------|
-| `bds-toggle` | `{ open: boolean }`             | Fired when open state changes  |
+| Event | Bubbles | Detail | Description |
+|-------|---------|--------|-------------|
+| `bds-toggle` | Yes | `{ open: boolean }` | Fired when the collapsible opens or closes; `detail.open` reflects the new state |
 
-## Stories
+## Usage in plain HTML
 
-<Canvas of={Stories.Default} />
-<Canvas of={Stories.Grouped} />
+```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>
+```
 
-## Controls
+## CSS Custom Properties
 
-<ArgTypes of={Stories} />
+| 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