@boostdev/design-system-components 0.1.18 → 1.0.0

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

@@ -63,6 +63,7 @@ export function NumberInput({
           type="button"
           className={css.stepper}
           aria-label="Decrease"
+          aria-controls={uid}
           disabled={disabled || (min !== undefined && currentValue <= min)}
           onClick={() => adjust(-step)}
           tabIndex={-1}
@@ -86,14 +87,16 @@ export function NumberInput({
           className={cn(css.input, error ? css.inputError : undefined)}
           onChange={e => {
             const v = parseFloat(e.target.value);
-            if (!isControlled) setInternalValue(isNaN(v) ? 0 : v);
-            onChange?.(v);
+            const safe = isNaN(v) ? 0 : v;
+            if (!isControlled) setInternalValue(safe);
+            onChange?.(safe);
           }}
         />
         <button
           type="button"
           className={css.stepper}
           aria-label="Increase"
+          aria-controls={uid}
           disabled={disabled || (max !== undefined && currentValue >= max)}
           onClick={() => adjust(step)}
           tabIndex={-1}

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

@@ -46,9 +46,9 @@ Single-select option within a group. Renders a styled native `<input type="radio
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--radio_color-active`</td><td>`var(--color_active)`</td><td>Selected fill and border colour</td></tr>
-<tr><td>`--radio_color-on-active`</td><td>`var(--color_on-active)`</td><td>Inner dot colour</td></tr>
-<tr><td>`--radio_description-color`</td><td>`var(--color_on-bg--subtle)`</td><td>Description text colour</td></tr>
+<tr><td>`--radio_color-active`</td><td>`var(--bds-active)`</td><td>Selected fill and border colour</td></tr>
+<tr><td>`--radio_color-on-active`</td><td>`var(--bds-on-active)`</td><td>Inner dot colour</td></tr>
+<tr><td>`--radio_description-color`</td><td>`var(--bds-on-bg--subtle)`</td><td>Description text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -1,7 +1,7 @@
 @layer component {
   .radioGroup {
-    --inputSize:     calc(var(--space_s) * 2);
-    --labelPosition: calc(var(--inputSize) + var(--space_m));
+    --inputSize:     calc(var(--bds-space_s) * 2);
+    --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
 
     display: flex;
     flex-direction: column;
@@ -10,20 +10,20 @@
   .inputWrapper {
     display: flex;
     align-items: flex-start;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
 
   .textWrapper {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxxs);
-    padding-block-start: var(--space_xxxs);
+    gap: var(--bds-space_xxxs);
+    padding-block-start: var(--bds-space_xxxs);
   }
 
   .description {
-    font-size: var(--font_size--body--s);
-    color: var(--radio_description-color, var(--color_on-bg--subtle));
-    line-height: var(--font_line-height--body);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--radio_description-color, var(--bds-on-bg--subtle));
+    line-height: var(--bds-font_line-height--body);
   }
 
   .radio {
@@ -31,19 +31,25 @@
     margin-block-start: 0.2em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--radio_color, var(--color_on-bg));
-    border: 1.5px solid currentcolor;
-    border-radius: 50%;
+    color: var(--radio_color, var(--bds-on-bg));
+    border: var(--radio_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: 50%;
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--radio_radius, var(--bdc_radius));
+    box-shadow: var(--radio_shadow, var(--bdc_shadow));
     appearance: none;
-    background-color: var(--radio_color_bg, var(--color_bg));
+    background-color: var(--radio_color_bg, var(--bds-bg));
     cursor: pointer;
     position: relative;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
+    transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
 
   .radio:checked {
-    background-color: var(--radio_color-active, var(--color_active));
-    border-color: var(--radio_color-active, var(--color_active));
+    background-color: var(--radio_color-active, var(--bds-active));
+    --bdc_color: var(--radio_color-active, var(--bds-active));
   }
 
   .radio:checked::after {
@@ -55,21 +61,19 @@
     width: 0.4em;
     height: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--color_on-active));
+    background-color: var(--radio_color-on-active, var(--bds-on-active));
   }
 
   .radio:focus {
-    outline: none;
-    border-color: var(--color_interactive);
-    box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+    --bdc_color: var(--bdc_color--focus);
   }
 
-  .radioError {
-    border-color: var(--color_error);
+  .radio:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
-  .radioError:focus {
-    border-color: var(--color_error);
-    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .radioError {
+    --bdc_color: var(--bdc_color--error);
   }
 }

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

@@ -17,7 +17,7 @@ export const WithHint: Story = { args: { label: 'Option', name: 'choice4', value
 export const Group: Story = {
   render: () => (
     <fieldset style={{ border: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-      <legend style={{ fontWeight: 'var(--font_weight--semibold)', marginBottom: '0.5rem' }}>Pick one</legend>
+      <legend style={{ fontWeight: 'var(--bds-font_weight--semibold)', marginBottom: '0.5rem' }}>Pick one</legend>
       <Radio label="Option A" name="group" value="a" description="Short description for option A." />
       <Radio label="Option B" name="group" value="b" description="Short description for option B." />
       <Radio label="Option C" name="group" value="c" />

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, useId } from 'react';
+import { InputHTMLAttributes, ReactNode, useId } from 'react';
 import css from './Radio.module.css';
 import { Message } from '../atoms/Message';
 import { Label } from '../atoms/Label';
@@ -6,7 +6,7 @@ import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
 
 interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label: string;
+  label: ReactNode;
   name: string;
   description?: string;
   error?: string;

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

@@ -0,0 +1,29 @@
+@layer component {
+  .group {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
+  }
+
+  .legend {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--medium);
+    color: var(--bds-on-bg);
+    padding: 0;
+    margin-block-end: var(--bds-space_xs);
+  }
+
+  .required {
+    color: var(--bds-error);
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
+  }
+}

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

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react';
+import { Radio } from '../Radio';
+import { RadioGroup } from './RadioGroup';
+
+describe('RadioGroup', () => {
+  it('renders a fieldset with a legend', () => {
+    render(
+      <RadioGroup legend="Preferred contact">
+        <Radio label="Email" name="contact" value="email" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('group', { name: 'Preferred contact' })).toBeInTheDocument();
+    expect(screen.getByText('Preferred contact')).toBeInTheDocument();
+  });
+
+  it('renders child radio inputs', () => {
+    render(
+      <RadioGroup legend="Size">
+        <Radio label="Small" name="size" value="small" />
+        <Radio label="Large" name="size" value="large" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('radio', { name: 'Small' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Large' })).toBeInTheDocument();
+  });
+
+  it('shows an error message', () => {
+    render(
+      <RadioGroup legend="Choice" error="Please select an option">
+        <Radio label="Option" name="opt" value="opt" />
+      </RadioGroup>
+    );
+    expect(screen.getByText('Please select an option')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(
+      <RadioGroup legend="Plan" hint="You can change this later">
+        <Radio label="Free" name="plan" value="free" />
+      </RadioGroup>
+    );
+    expect(screen.getByText('You can change this later')).toBeInTheDocument();
+  });
+
+  it('links error message via aria-describedby', () => {
+    render(
+      <RadioGroup legend="Required" error="Required field">
+        <Radio label="Option" name="opt" value="opt" />
+      </RadioGroup>
+    );
+    const fieldset = screen.getByRole('group');
+    const errorMsg = screen.getByText('Required field');
+    expect(fieldset).toHaveAttribute('aria-describedby');
+    expect(fieldset.getAttribute('aria-describedby')).toContain(errorMsg.id);
+  });
+
+  it('marks fieldset as required when required prop is set', () => {
+    render(
+      <RadioGroup legend="Required" required>
+        <Radio label="Option" name="opt" value="opt" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('group')).toHaveAttribute('aria-required', 'true');
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  it('disables the fieldset when disabled prop is set', () => {
+    render(
+      <RadioGroup legend="Disabled" disabled>
+        <Radio label="Option" name="opt" value="opt" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('group')).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio } from '../Radio';
+import { RadioGroup } from './RadioGroup';
+
+const meta = {
+  title: 'Form/RadioGroup',
+  component: RadioGroup,
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { legend: 'Preferred contact' },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio label="Email" name="contact" value="email" />
+      <Radio label="Phone" name="contact" value="phone" />
+      <Radio label="Post" name="contact" value="post" />
+    </RadioGroup>
+  ),
+};
+
+export const WithError: Story = {
+  args: { legend: 'Plan', error: 'Please select a plan' },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio label="Free" name="plan" value="free" />
+      <Radio label="Pro" name="plan" value="pro" />
+      <Radio label="Enterprise" name="plan" value="enterprise" />
+    </RadioGroup>
+  ),
+};
+
+export const WithHint: Story = {
+  args: { legend: 'Billing cycle', hint: 'You can change this at any time' },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio label="Monthly" name="billing" value="monthly" />
+      <Radio label="Annually" name="billing" value="annually" description="Save 20%" />
+    </RadioGroup>
+  ),
+};
+
+export const Required: Story = {
+  args: { legend: 'Size', required: true },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio label="Small" name="size" value="small" />
+      <Radio label="Medium" name="size" value="medium" defaultChecked />
+      <Radio label="Large" name="size" value="large" />
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { legend: 'Region', disabled: true },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio label="Europe" name="region" value="eu" defaultChecked />
+      <Radio label="North America" name="region" value="na" />
+    </RadioGroup>
+  ),
+};

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

@@ -0,0 +1,46 @@
+import { ReactNode, useId } from 'react';
+import css from './RadioGroup.module.css';
+import { Message } from '../atoms/Message';
+import { cn } from '@boostdev/design-system-foundation';
+
+export interface RadioGroupProps {
+  legend: string;
+  children: ReactNode;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function RadioGroup({
+  legend,
+  children,
+  error,
+  hint,
+  required,
+  disabled,
+  className,
+}: Readonly<RadioGroupProps>) {
+  const id = useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <fieldset
+      className={cn(css.group, className)}
+      disabled={disabled}
+      aria-required={required || undefined}
+      aria-describedby={describedBy}
+    >
+      <legend className={css.legend}>
+        {legend}
+        {required && <span className={css.required} aria-hidden="true"> *</span>}
+      </legend>
+      <div className={css.items}>{children}</div>
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </fieldset>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps } from './RadioGroup';

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

@@ -48,11 +48,11 @@ All options have **equal width** — the widest label determines the size for al
 <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>
+<tr><td>`--control_track-bg`</td><td>`var(--bds-bg--subtle)`</td><td>Track background</td></tr>
+<tr><td>`--control_thumb-bg`</td><td>`var(--bds-bg)`</td><td>Thumb (active indicator) background</td></tr>
+<tr><td>`--control_label-color`</td><td>`var(--bds-on-bg--subtle)`</td><td>Unselected label colour</td></tr>
+<tr><td>`--control_label-color--active`</td><td>`var(--bds-on-bg)`</td><td>Selected label colour</td></tr>
+<tr><td>`--control_label-color--hover`</td><td>`var(--bds-on-bg)`</td><td>Hovered (unselected) label colour</td></tr>
 </tbody>
 </table>
 

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

@@ -4,24 +4,24 @@
     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);
+    padding: var(--bds-space_xxxs);
+    background-color: var(--control_track-bg, var(--bds-bg--subtle));
+    border-radius: var(--bds-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);
+    top: var(--bds-space_xxxs);
+    bottom: var(--bds-space_xxxs);
+    left: var(--bds-space_xxxs);
+    width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
+    border-radius: var(--bds-border_radius--s);
+    background-color: var(--control_thumb-bg, var(--bds-bg));
+    box-shadow: var(--bds-shadow_s);
     pointer-events: none;
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .item {
@@ -31,8 +31,8 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--border_radius--s);
-    transition: var(--animation_transition);
+    border-radius: var(--bds-border_radius--s);
+    transition: var(--bds-animation_transition);
   }
 
   .item.--disabled {
@@ -50,40 +50,40 @@
 
   .label {
     display: block;
-    padding: var(--space_xs) var(--space_m);
+    padding: var(--bds-space_xs) var(--bds-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);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
+    color: var(--control_label-color, var(--bds-on-bg--subtle));
+    transition: color var(--bds-animation_transition-duration) var(--bds-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);
+    padding: var(--bds-space_xxs) var(--bds-space_s);
+    font-size: var(--bds-font_size--body--s);
   }
 
   .control.--size_large .label {
-    padding: var(--space_s) var(--space_m);
+    padding: var(--bds-space_s) var(--bds-space_m);
     white-space: normal;
     text-align: center;
   }
 
   .item.--active .label {
-    color: var(--control_label-color--active, var(--color_on-bg));
+    color: var(--control_label-color--active, var(--bds-on-bg));
   }
 
   .radio:focus-visible ~ .label {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
-    border-radius: var(--border_radius--s);
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
+    border-radius: var(--bds-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));
+      color: var(--control_label-color--hover, var(--bds-on-bg));
     }
   }
 

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

@@ -20,6 +20,7 @@ export interface SegmentedControlProps
   disabled?: boolean;
   size?: 'small' | 'medium' | 'large';
   className?: string;
+  'aria-label'?: string;
 }
 
 export function SegmentedControl({
@@ -31,6 +32,7 @@ export function SegmentedControl({
   disabled,
   size = 'medium',
   className,
+  'aria-label': ariaLabel,
   ...rest
 }: Readonly<SegmentedControlProps>) {
   const baseId = name + useId();
@@ -49,6 +51,8 @@ export function SegmentedControl({
 
   return (
     <div
+      role="group"
+      aria-label={ariaLabel}
       className={cn(css.control, css[`--size_${size}`], className)}
       style={{
         '--control_count': options.length,

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

@@ -13,23 +13,32 @@
   .select {
     appearance: none;
     width: 100%;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    padding: var(--space_s);
-    padding-inline-end: var(--space_xxl);
-    border: 1px solid var(--select_border-color, currentcolor);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--select_color_bg, var(--color_bg));
-    color: var(--select_color, var(--color_on-bg));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    padding: var(--bds-space_s);
+    padding-inline-end: var(--bds-space_xxl);
+    border: var(--select_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--select_radius, var(--bdc_radius));
+    box-shadow: var(--select_shadow, var(--bdc_shadow));
+    background-color: var(--select_color_bg, var(--bds-bg));
+    color: var(--select_color, var(--bds-on-bg));
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .select:focus {
-    --select_border-color: var(--color_interactive);
+    --bdc_color: var(--bdc_color--focus);
+  }
 
-    outline: none;
-    box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+  .select:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   .select:disabled {
@@ -38,20 +47,16 @@
   }
 
   .selectError {
-    --select_border-color: var(--color_error);
-  }
-
-  .selectError:focus {
-    --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+    --bdc_color: var(--bdc_color--error);
   }
 
   .chevron {
     position: absolute;
-    inset-inline-end: var(--space_s);
+    inset-inline-end: var(--bds-space_s);
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--select_color, var(--color_on-bg));
+    color: var(--select_color, var(--bds-on-bg));
   }
 
   .chevron svg {

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

@@ -29,6 +29,7 @@ export function Select({
   error,
   hint,
   className,
+  required,
   ...props
 }: Readonly<SelectProps>) {
   const id = name + useId();
@@ -44,7 +45,9 @@ export function Select({
           id={id}
           name={name}
           aria-invalid={!!error}
+          aria-required={required || undefined}
           aria-describedby={describedBy}
+          required={required}
           className={cn(css.select, error ? css.selectError : undefined)}
           {...props}
         >

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

@@ -46,7 +46,7 @@ Range input for selecting a numeric value within a bounded range.
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--slider_color-active`</td><td>`var(--color_active)`</td><td>Filled track and thumb colour</td></tr>
+<tr><td>`--slider_color-active`</td><td>`var(--bds-active)`</td><td>Filled track and thumb colour</td></tr>
 </tbody>
 </table>