@boostdev/design-system-components 0.1.16 → 0.1.17

package/package.json

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

package/src/components/interaction/Command/Command.mdx

@@ -26,3 +26,4 @@ Keyboard-first command palette for searching and executing actions. Commonly tri
 - Results list uses `role="listbox"` with `role="option"` items
 - `aria-activedescendant` tracks the highlighted option
 - Keyboard: `↑`/`↓` to navigate, `Enter` to execute, `Escape` to dismiss
+- Body scroll is locked while open (`overflow: hidden`) and restored on close or unmount

package/src/components/interaction/Command/Command.spec.tsx

@@ -10,6 +10,7 @@ beforeEach(() => {
   HTMLDialogElement.prototype.close = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
     this.removeAttribute('open');
   });
+  document.body.style.overflow = '';
 });
 
 const items: CommandItem[] = [
@@ -57,4 +58,21 @@ describe('Command', () => {
     render(<Command isOpen items={items} onClose={() => {}} />);
     expect(screen.getByText('Save current file')).toBeInTheDocument();
   });
+
+  it('locks body scroll when open', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('restores body scroll when closed', () => {
+    const { rerender } = render(<Command isOpen items={items} onClose={() => {}} />);
+    rerender(<Command isOpen={false} items={items} onClose={() => {}} />);
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores body scroll on unmount', () => {
+    const { unmount } = render(<Command isOpen items={items} onClose={() => {}} />);
+    unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
 });

package/src/components/interaction/Command/Command.tsx

@@ -56,12 +56,17 @@ export function Command({
     if (!dialog) return;
     if (isOpen) {
       dialog.showModal();
+      document.body.style.overflow = 'hidden';
       setQuery('');
       setActiveIndex(0);
       setTimeout(() => inputRef.current?.focus(), 0);
     } else if (dialog.open) {
       dialog.close();
+      document.body.style.overflow = '';
     }
+    return () => {
+      document.body.style.overflow = '';
+    };
   }, [isOpen]);
 
   useEffect(() => {

package/src/components/interaction/Dialog/Dialog.spec.tsx

@@ -10,6 +10,7 @@ beforeEach(() => {
   HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
     this.removeAttribute('open');
   });
+  document.body.style.overflow = '';
 });
 
 describe('Dialog', () => {
@@ -40,4 +41,21 @@ describe('Dialog', () => {
     render(<Dialog isOpen={false}><span>Content</span></Dialog>);
     expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
   });
+
+  it('locks body scroll when open', () => {
+    render(<Dialog isOpen><span>Content</span></Dialog>);
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('restores body scroll when closed', () => {
+    const { rerender } = render(<Dialog isOpen><span>Content</span></Dialog>);
+    rerender(<Dialog isOpen={false}><span>Content</span></Dialog>);
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores body scroll on unmount', () => {
+    const { unmount } = render(<Dialog isOpen><span>Content</span></Dialog>);
+    unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
 });

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

@@ -10,6 +10,7 @@ beforeEach(() => {
   HTMLDialogElement.prototype.close = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
     this.removeAttribute('open');
   });
+  document.body.style.overflow = '';
 });
 
 describe('Drawer', () => {
@@ -40,4 +41,21 @@ describe('Drawer', () => {
     rerender(<Drawer isOpen={false} title="Test" onClose={() => {}}>Body</Drawer>);
     expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
   });
+
+  it('locks body scroll when open', () => {
+    render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('restores body scroll when closed', () => {
+    const { rerender } = render(<Drawer isOpen title="Test" onClose={() => {}}>Body</Drawer>);
+    rerender(<Drawer isOpen={false} title="Test" onClose={() => {}}>Body</Drawer>);
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores body scroll on unmount', () => {
+    const { unmount } = render(<Drawer isOpen title="Test" onClose={() => {}}>Body</Drawer>);
+    unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
 });

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

@@ -28,9 +28,14 @@ export function Drawer({
     if (!dialog) return;
     if (isOpen) {
       dialog.showModal();
+      document.body.style.overflow = 'hidden';
     } else if (dialog.open) {
       dialog.close();
+      document.body.style.overflow = '';
     }
+    return () => {
+      document.body.style.overflow = '';
+    };
   }, [isOpen]);
 
   // Close on backdrop click

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

@@ -0,0 +1,64 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './SegmentedControl.stories';
+
+<Meta of={Stories} />
+
+# SegmentedControl
+
+Single-select control where all options sit inside a shared track and a sliding thumb highlights the active choice. Based on radio inputs.
+
+All options have **equal width** — the widest label determines the size for all. In the `large` variant, labels may wrap.
+
+## When to use
+- Switching between a small set of mutually exclusive views or modes (2–5 options)
+- When all options should be visible simultaneously with clear visual feedback
+
+## When not to use
+- More than 5 options — use `Select` or `Tabs`
+- Independent toggles — use `Switch` or `Checkbox`
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Small
+<Canvas of={Stories.Small} />
+
+### Large (wrapping labels)
+<Canvas of={Stories.WrappingLabels} />
+
+### With disabled option
+<Canvas of={Stories.WithDisabledOption} />
+
+### All disabled
+<Canvas of={Stories.AllDisabled} />
+
+### Controlled
+<Canvas of={Stories.Controlled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## CSS variables
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--control_track-bg`</td><td>`var(--color_bg--subtle)`</td><td>Track background</td></tr>
+<tr><td>`--control_thumb-bg`</td><td>`var(--color_bg)`</td><td>Thumb (active indicator) background</td></tr>
+<tr><td>`--control_label-color`</td><td>`var(--color_on-bg--subtle)`</td><td>Unselected label colour</td></tr>
+<tr><td>`--control_label-color--active`</td><td>`var(--color_on-bg)`</td><td>Selected label colour</td></tr>
+<tr><td>`--control_label-color--hover`</td><td>`var(--color_on-bg)`</td><td>Hovered (unselected) label colour</td></tr>
+</tbody>
+</table>
+
+## Accessibility
+
+- Each option is a native `<input type="radio">` — grouped by `name`, keyboard navigable with arrow keys
+- The visual thumb is `aria-hidden` and purely decorative
+- Labels are `<label>` elements with `htmlFor` pointing to each radio
+- Disabled options remain focusable for screen reader discovery but cannot be activated

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

@@ -0,0 +1,99 @@
+@layer component {
+  .control {
+    position: relative;
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    padding: var(--space_xxxs);
+    background-color: var(--control_track-bg, var(--color_bg--subtle));
+    border-radius: var(--border_radius--m);
+    gap: 0;
+  }
+
+  .thumb {
+    position: absolute;
+    top: var(--space_xxxs);
+    bottom: var(--space_xxxs);
+    left: var(--space_xxxs);
+    width: calc((100% - 2 * var(--space_xxxs)) / var(--control_count, 1));
+    border-radius: var(--border_radius--s);
+    background-color: var(--control_thumb-bg, var(--color_bg));
+    box-shadow: var(--shadow_s);
+    pointer-events: none;
+    transform: translateX(calc(var(--control_selected-index, 0) * 100%));
+    transition: transform var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .item {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: var(--border_radius--s);
+    transition: var(--animation_transition);
+  }
+
+  .item.--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .radio {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+  }
+
+  .label {
+    display: block;
+    padding: var(--space_xs) var(--space_m);
+    white-space: nowrap;
+    font-size: var(--font_size--body);
+    line-height: var(--font_line-height--body);
+    color: var(--control_label-color, var(--color_on-bg--subtle));
+    transition: color var(--animation_transition-duration) var(--animation_easing);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .control.--size_small .label {
+    padding: var(--space_xxs) var(--space_s);
+    font-size: var(--font_size--body--s);
+  }
+
+  .control.--size_large .label {
+    padding: var(--space_s) var(--space_m);
+    white-space: normal;
+    text-align: center;
+  }
+
+  .item.--active .label {
+    color: var(--control_label-color--active, var(--color_on-bg));
+  }
+
+  .radio:focus-visible ~ .label {
+    outline: var(--outline_default);
+    outline-offset: calc(var(--outline_offset) * -1);
+    border-radius: var(--border_radius--s);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .item:not(.--active, .--disabled):hover .label {
+      color: var(--control_label-color--hover, var(--color_on-bg));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .thumb {
+      transition: none;
+    }
+
+    .label {
+      transition: none;
+    }
+  }
+}

package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SegmentedControl } from './SegmentedControl';
+
+const options = [
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+];
+
+describe('SegmentedControl', () => {
+  it('renders all option labels', () => {
+    render(<SegmentedControl name="view" options={options} />);
+    expect(screen.getByText('Day')).toBeInTheDocument();
+    expect(screen.getByText('Week')).toBeInTheDocument();
+    expect(screen.getByText('Month')).toBeInTheDocument();
+  });
+
+  it('selects the first option by default', () => {
+    render(<SegmentedControl name="view" options={options} />);
+    expect(screen.getByRole('radio', { name: 'Day' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Week' })).not.toBeChecked();
+  });
+
+  it('selects defaultValue when provided', () => {
+    render(<SegmentedControl name="view" options={options} defaultValue="week" />);
+    expect(screen.getByRole('radio', { name: 'Week' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Day' })).not.toBeChecked();
+  });
+
+  it('selects an option on click', async () => {
+    const user = userEvent.setup();
+    render(<SegmentedControl name="view" options={options} />);
+    await user.click(screen.getByRole('radio', { name: 'Month' }));
+    expect(screen.getByRole('radio', { name: 'Month' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Day' })).not.toBeChecked();
+  });
+
+  it('calls onChange with the selected value', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<SegmentedControl name="view" options={options} onChange={onChange} />);
+    await user.click(screen.getByRole('radio', { name: 'Week' }));
+    expect(onChange).toHaveBeenCalledWith('week');
+  });
+
+  it('respects controlled value', () => {
+    render(<SegmentedControl name="view" options={options} value="month" onChange={() => {}} />);
+    expect(screen.getByRole('radio', { name: 'Month' })).toBeChecked();
+  });
+
+  it('disables a specific option', () => {
+    const opts = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B', disabled: true },
+    ];
+    render(<SegmentedControl name="opt" options={opts} />);
+    expect(screen.getByRole('radio', { name: 'B' })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: 'A' })).not.toBeDisabled();
+  });
+
+  it('disables all options when disabled prop is set', () => {
+    render(<SegmentedControl name="view" options={options} disabled />);
+    screen.getAllByRole('radio').forEach(radio => expect(radio).toBeDisabled());
+  });
+
+  it('sets --control_count on the container', () => {
+    const { container } = render(<SegmentedControl name="view" options={options} />);
+    const control = container.firstChild as HTMLElement;
+    expect(control.style.getPropertyValue('--control_count')).toBe('3');
+  });
+
+  it('sets --control_selected-index to the selected option index', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<SegmentedControl name="view" options={options} defaultValue="day" />);
+    const control = container.firstChild as HTMLElement;
+    expect(control.style.getPropertyValue('--control_selected-index')).toBe('0');
+    await user.click(screen.getByRole('radio', { name: 'Month' }));
+    expect(control.style.getPropertyValue('--control_selected-index')).toBe('2');
+  });
+
+  it('renders all radios in the same name group', () => {
+    render(<SegmentedControl name="view" options={options} />);
+    const radios = screen.getAllByRole('radio');
+    radios.forEach(r => expect(r).toHaveAttribute('name', expect.stringContaining('view')));
+  });
+});

package/src/components/interaction/form/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SegmentedControl } from './SegmentedControl';
+
+const meta = {
+  title: 'Form/SegmentedControl',
+  component: SegmentedControl,
+  argTypes: {
+    size: { control: 'radio', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: 'view',
+    options: [
+      { value: 'day', label: 'Day' },
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+    ],
+    defaultValue: 'week',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    name: 'size-s',
+    size: 'small',
+    options: [
+      { value: 'list', label: 'List' },
+      { value: 'grid', label: 'Grid' },
+    ],
+    defaultValue: 'list',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    name: 'size-l',
+    size: 'large',
+    options: [
+      { value: 'personal', label: 'Personal plan' },
+      { value: 'team', label: 'Team plan' },
+      { value: 'enterprise', label: 'Enterprise plan' },
+    ],
+    defaultValue: 'team',
+  },
+};
+
+export const WrappingLabels: Story = {
+  args: {
+    name: 'wrap',
+    size: 'large',
+    options: [
+      { value: 'solar', label: 'Solar energy only' },
+      { value: 'wind', label: 'Wind energy only' },
+      { value: 'mixed', label: 'Mix of sustainable sources' },
+    ],
+    defaultValue: 'mixed',
+  },
+  decorators: [Story => <div style={{ maxWidth: '360px' }}><Story /></div>],
+};
+
+export const WithDisabledOption: Story = {
+  args: {
+    name: 'disabled-opt',
+    options: [
+      { value: 'active', label: 'Active' },
+      { value: 'paused', label: 'Paused' },
+      { value: 'archived', label: 'Archived', disabled: true },
+    ],
+    defaultValue: 'active',
+  },
+};
+
+export const AllDisabled: Story = {
+  args: {
+    name: 'all-disabled',
+    options: [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+    ],
+    defaultValue: 'a',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('month');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'flex-start' }}>
+        <SegmentedControl
+          name="controlled"
+          value={value}
+          onChange={setValue}
+          options={[
+            { value: 'day', label: 'Day' },
+            { value: 'week', label: 'Week' },
+            { value: 'month', label: 'Month' },
+          ]}
+        />
+        <span style={{ fontSize: '0.875rem', opacity: 0.6 }}>Selected: {value}</span>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,89 @@
+import { InputHTMLAttributes, ReactNode, useId, useState } from 'react';
+import css from './SegmentedControl.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+export interface SegmentedControlOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+  name: string;
+  options: SegmentedControlOption[];
+  /** Controlled selected value */
+  value?: string;
+  /** Uncontrolled initial value (defaults to first option) */
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+export function SegmentedControl({
+  name,
+  options,
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  size = 'medium',
+  className,
+  ...rest
+}: Readonly<SegmentedControlProps>) {
+  const baseId = name + useId();
+
+  const [internalValue, setInternalValue] = useState<string>(
+    defaultValue ?? options[0]?.value ?? '',
+  );
+
+  const activeValue = value ?? internalValue;
+  const selectedIndex = options.findIndex(o => o.value === activeValue);
+
+  const handleChange = (optionValue: string) => {
+    if (value === undefined) setInternalValue(optionValue);
+    onChange?.(optionValue);
+  };
+
+  return (
+    <div
+      className={cn(css.control, css[`--size_${size}`], className)}
+      style={{
+        '--control_count': options.length,
+        '--control_selected-index': Math.max(0, selectedIndex),
+      } as React.CSSProperties}
+    >
+      {/* Sliding thumb — purely visual */}
+      <span className={css.thumb} aria-hidden="true" />
+
+      {options.map((option, index) => {
+        const id = `${baseId}-${index}`;
+        const isChecked = option.value === activeValue;
+        const isDisabled = disabled || option.disabled;
+
+        return (
+          <label
+            key={option.value}
+            htmlFor={id}
+            className={cn(css.item, isChecked && css['--active'], isDisabled && css['--disabled'])}
+          >
+            <input
+              {...rest}
+              type="radio"
+              id={id}
+              name={name}
+              value={option.value}
+              checked={isChecked}
+              disabled={isDisabled}
+              className={css.radio}
+              onChange={() => handleChange(option.value)}
+            />
+            <span className={css.label}>{option.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/interaction/form/SegmentedControl/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';

package/src/index.ts

@@ -48,6 +48,8 @@ export { FileInput } from './components/interaction/form/FileInput';
 export { FormInput } from './components/interaction/form/FormInput';
 export { NumberInput } from './components/interaction/form/NumberInput';
 export { Radio } from './components/interaction/form/Radio';
+export { SegmentedControl } from './components/interaction/form/SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlOption } 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

@@ -55,8 +55,8 @@ import {Card} from "../components/layout/Card/index.ts";
             <strong>UI</strong>
             <div className="cardContent">
                 Badge · Typography · Alert · Avatar · Loading · Skeleton · Separator · Tooltip · Progress ·
-                ProgressCircle · Tabs · Breadcrumb · Accordion · Pagination · Link · Table · DescriptionList ·
-                NotificationBanner · SkipLink · Carousel · Calendar
+                ProgressCircle · Tabs · Breadcrumb · Accordion · Collapsible · Pagination · Link · Table ·
+                DescriptionList · NotificationBanner · SkipLink · Carousel · Calendar
             </div>
         </Card>
 
@@ -70,7 +70,8 @@ import {Card} from "../components/layout/Card/index.ts";
         <Card className="card">
             <strong>Form</strong>
             <div className="cardContent">
-                FormInput · Checkbox · Radio · Switch · Select · Textarea · Slider · NumberInput · FileInput · Combobox
+                FormInput · Checkbox · Radio · Switch · SegmentedControl · Select · Textarea · Slider ·
+                NumberInput · FileInput · Combobox
             </div>
         </Card>