@boostdev/design-system-components 1.2.0 → 1.2.2

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.2",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
+import { HTMLAttributes, useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
 import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
 
 // Install once at module load — no-op if native support is present.
@@ -17,8 +17,7 @@ export interface CommandItem {
   onSelect: () => void;
 }
 
-interface CommandProps extends WithClassName {
-  id?: string;
+interface CommandProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
   isOpen: boolean;
   onOpen?: () => void;
   onClose: () => void;
@@ -34,6 +33,7 @@ export function Command({
   items,
   placeholder = 'Search commands…',
   className,
+  ...rest
 }: Readonly<CommandProps>) {
   const [query, setQuery] = useState('');
   const [activeIndex, setActiveIndex] = useState(0);
@@ -139,6 +139,7 @@ export function Command({
 
   return (
     <dialog
+      {...rest}
       ref={dialogRef}
       id={dialogId}
       className={cn(css.dialog, className)}

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

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useId, useRef } from 'react';
+import { HTMLAttributes, useEffect, useId, useRef } from 'react';
 import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
 
 // Install once at module load — no-op if native support is present.
@@ -9,15 +9,13 @@ import css from './Dialog.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface DialogProps extends WithClassName {
-  children: ReactNode;
-  id?: string;
+interface DialogProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
   isOpen?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
 }
 
-export function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }: DialogProps) {
+export function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose, ...rest }: DialogProps) {
   const generatedId = useId();
   const id = idProp ?? generatedId;
 
@@ -92,6 +90,7 @@ export function Dialog({ children, id: idProp, isOpen = false, className, onOpen
 
   return (
     <dialog
+      {...rest}
       ref={dialogRef}
       id={id}
       className={cn(className, css.dialog)}

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.spec.tsx

@@ -85,13 +85,13 @@ describe('Drawer', () => {
     expect(dialog).toHaveAttribute('aria-modal', 'true');
   });
 
-  it('renders aria-label on the dialog when ariaLabel prop is provided', () => {
-    render(<Drawer isOpen title="Settings" ariaLabel="Settings panel" onClose={() => {}}>Content</Drawer>);
+  it('renders aria-label on the dialog when aria-label prop is provided', () => {
+    render(<Drawer isOpen title="Settings" aria-label="Settings panel" onClose={() => {}}>Content</Drawer>);
     const dialog = document.querySelector('dialog');
     expect(dialog).toHaveAttribute('aria-label', 'Settings panel');
   });
 
-  it('does not render aria-label when ariaLabel prop is not provided', () => {
+  it('does not render aria-label when aria-label prop is not provided', () => {
     render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
     const dialog = document.querySelector('dialog');
     expect(dialog).not.toHaveAttribute('aria-label');

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

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useId, useRef } from 'react';
+import { HTMLAttributes, ReactNode, useEffect, useId, useRef } from 'react';
 import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
 
 // Install once at module load — no-op if native support is present.
@@ -8,15 +8,12 @@ import css from './Drawer.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface DrawerProps extends WithClassName {
-  id?: string;
+interface DrawerProps extends WithClassName, Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
   isOpen: boolean;
   onOpen?: () => void;
   onClose: () => void;
   title: ReactNode;
-  children: ReactNode;
   side?: 'left' | 'right';
-  ariaLabel?: string;
 }
 
 export function Drawer({
@@ -27,8 +24,8 @@ export function Drawer({
   title,
   children,
   side = 'right',
-  ariaLabel,
   className,
+  ...rest
 }: Readonly<DrawerProps>) {
   const generatedId = useId();
   const id = idProp ?? generatedId;
@@ -75,7 +72,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)
@@ -86,31 +89,29 @@ export function Drawer({
 
   return (
     <dialog
+      {...rest}
       ref={dialogRef}
       id={id}
       className={cn(css.drawer, css[`--side_${side}`], className)}
-      aria-label={ariaLabel}
       aria-modal="true"
       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/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import {
+  HTMLAttributes,
   KeyboardEvent,
   ReactElement,
   cloneElement,
@@ -21,7 +22,7 @@ export interface DropdownMenuItem {
   separator?: boolean;
 }
 
-interface DropdownMenuProps extends WithClassName {
+interface DropdownMenuProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   trigger: ReactElement;
   items: DropdownMenuItem[];
   placement?: 'bottom-start' | 'bottom-end';
@@ -32,6 +33,7 @@ export function DropdownMenu({
   items,
   placement = 'bottom-start',
   className,
+  ...rest
 }: Readonly<DropdownMenuProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -105,7 +107,7 @@ export function DropdownMenu({
     : trigger;
 
   return (
-    <div ref={containerRef} className={cn(css.wrapper, className)}>
+    <div {...rest} ref={containerRef} className={cn(css.wrapper, className)}>
       {triggerEl}
       {isOpen && (
         <ul

package/src/components/interaction/Popover/Popover.tsx

@@ -1,4 +1,5 @@
 import {
+  HTMLAttributes,
   ReactElement,
   ReactNode,
   cloneElement,
@@ -25,11 +26,10 @@ if (
   import('@oddbird/css-anchor-positioning').catch(() => {});
 }
 
-interface PopoverProps extends WithClassName {
+interface PopoverProps extends WithClassName, Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
   children: ReactElement;
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
-  'aria-label'?: string;
 }
 
 export function Popover({
@@ -38,6 +38,7 @@ export function Popover({
   placement = 'bottom',
   className,
   'aria-label': ariaLabel,
+  ...rest
 }: Readonly<PopoverProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLSpanElement>(null);
@@ -102,7 +103,7 @@ export function Popover({
     : children;
 
   return (
-    <span ref={containerRef} className={cn(css.wrapper, className)}>
+    <span {...rest} ref={containerRef} className={cn(css.wrapper, className)}>
       {trigger}
       <div
         ref={panelRef}

package/src/components/interaction/Rating/Rating.tsx

@@ -1,15 +1,17 @@
+import { HTMLAttributes } from 'react';
 import css from './Rating.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface RatingProps extends WithClassName {
+interface RatingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   value: number;
   max?: number;
 }
 
-export function Rating({ value, max = 5, className }: RatingProps) {
+export function Rating({ value, max = 5, className, ...rest }: RatingProps) {
   return (
     <div
+      {...rest}
       className={cn(css.rating, className)}
       role="img"
       aria-label={`${value} out of ${max} stars`}

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

@@ -1,16 +1,14 @@
-import { ReactNode, useId } from 'react';
+import { FieldsetHTMLAttributes, useId } from 'react';
 import css from './CheckboxGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-export interface CheckboxGroupProps extends WithClassName {
+export interface CheckboxGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   legend: string;
-  children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
-  disabled?: boolean;
 }
 
 export function CheckboxGroup({
@@ -19,8 +17,8 @@ export function CheckboxGroup({
   error,
   hint,
   required,
-  disabled,
   className,
+  ...rest
 }: Readonly<CheckboxGroupProps>) {
   const id = useId();
   const hintId = id + 'hint';
@@ -29,8 +27,8 @@ export function CheckboxGroup({
 
   return (
     <fieldset
+      {...rest}
       className={cn(css.group, className)}
-      disabled={disabled}
       aria-required={required || undefined}
       aria-describedby={describedBy}
     >

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

@@ -1,5 +1,6 @@
 import {
   ChangeEvent,
+  HTMLAttributes,
   KeyboardEvent,
   ReactNode,
   useEffect,
@@ -21,7 +22,7 @@ export interface ComboboxOption {
   disabled?: boolean;
 }
 
-interface ComboboxProps extends WithClassName {
+interface ComboboxProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: ReactNode;
   name: string;
   options: ComboboxOption[];
@@ -44,6 +45,7 @@ export function Combobox({
   error,
   hint,
   className,
+  ...rest
 }: Readonly<ComboboxProps>) {
   const id = name + useId();
   const listboxId = id + 'listbox';
@@ -122,7 +124,7 @@ export function Combobox({
   };
 
   return (
-    <InputContainer className={cn(css.formGroup, className)}>
+    <InputContainer {...rest} className={cn(css.formGroup, className)}>
       <Label id={id} label={label} />
       <div ref={containerRef} className={css.inputWrapper}>
         <input

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

@@ -1,11 +1,11 @@
-import { useId, useRef, useState, DragEvent, ChangeEvent } from 'react';
+import { HTMLAttributes, useId, useRef, useState, DragEvent, ChangeEvent } from 'react';
 import css from './FileInput.module.css';
 import { Message } from '../atoms/Message';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-interface FileInputProps extends WithClassName {
+interface FileInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: string;
   name: string;
   accept?: string;
@@ -28,6 +28,7 @@ export function FileInput({
   hint,
   onChange,
   className,
+  ...rest
 }: Readonly<FileInputProps>) {
   const uid = name + useId();
   const hintId = uid + 'hint';
@@ -73,7 +74,7 @@ export function FileInput({
   const handleDragLeave = () => setIsDragging(false);
 
   return (
-    <InputContainer className={cn(css.formGroup, className)}>
+    <InputContainer {...rest} className={cn(css.formGroup, className)}>
       <label
         htmlFor={uid}
         className={cn(css.dropZone, isDragging && css.isDragging, error && css.hasError, disabled && css.isDisabled)}

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

@@ -1,4 +1,4 @@
-import {useId, useRef, useState} from 'react';
+import {HTMLAttributes, useId, useRef, useState} from 'react';
 import css from './NumberInput.module.css';
 import {Label} from '../atoms/Label';
 import {Message} from '../atoms/Message';
@@ -6,7 +6,7 @@ import {InputContainer} from '../atoms/InputContainer';
 import {cn} from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-interface NumberInputProps extends WithClassName {
+interface NumberInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: string;
   name: string;
   value?: number;
@@ -33,6 +33,7 @@ export function NumberInput({
   hint,
   onChange,
   className,
+  ...rest
 }: Readonly<NumberInputProps>) {
   const uid = name + useId();
   const hintId = uid + 'hint';
@@ -62,7 +63,7 @@ export function NumberInput({
   };
 
   return (
-    <InputContainer className={cn(css.formGroup, className)}>
+    <InputContainer {...rest} className={cn(css.formGroup, className)}>
       <Label id={uid} label={label} />
       <div className={css.inputRow}>
         <button

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

@@ -1,16 +1,14 @@
-import { ReactNode, useId } from 'react';
+import { FieldsetHTMLAttributes, useId } from 'react';
 import css from './RadioGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-export interface RadioGroupProps extends WithClassName {
+export interface RadioGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   legend: string;
-  children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
-  disabled?: boolean;
 }
 
 export function RadioGroup({
@@ -19,8 +17,8 @@ export function RadioGroup({
   error,
   hint,
   required,
-  disabled,
   className,
+  ...rest
 }: Readonly<RadioGroupProps>) {
   const id = useId();
   const hintId = id + 'hint';
@@ -29,8 +27,8 @@ export function RadioGroup({
 
   return (
     <fieldset
+      {...rest}
       className={cn(css.group, className)}
-      disabled={disabled}
       aria-required={required || undefined}
       aria-describedby={describedBy}
     >

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 |