@boostdev/design-system-components 0.1.17 → 1.0.0

package/src/components/ui/Table/Table.tsx

@@ -57,6 +57,7 @@ export function Table<Row extends Record<string, unknown>>({
                     type="button"
                     className={css.sortButton}
                     onClick={() => handleSort(col.key)}
+                    aria-label={`Sort by ${String(col.header)}${sortKey === col.key ? `, currently ${sortDirection === 'asc' ? 'ascending' : 'descending'}` : ''}`}
                   >
                     {col.header}
                     <svg
@@ -83,7 +84,7 @@ export function Table<Row extends Record<string, unknown>>({
         </thead>
         <tbody className={css.tbody}>
           {rows.map((row, rowIndex) => (
-            <tr key={rowIndex} className={css.tr}>
+            <tr key={JSON.stringify(row) || rowIndex} className={css.tr}>
               {columns.map(col => (
                 <td key={col.key} className={css.td}>
                   {col.render ? col.render(row) : String(row[col.key] ?? '')}

package/src/components/ui/Tabs/Tabs.module.css

@@ -6,28 +6,28 @@
 
   .tabList {
     display: flex;
-    border-bottom: 1px solid var(--color_bg--subtle);
-    gap: var(--space_xxs);
+    border-bottom: 1px solid var(--bds-bg--subtle);
+    gap: var(--bds-space_xxs);
   }
 
   .tab {
     all: unset;
     display: inline-flex;
     align-items: center;
-    padding: var(--space_s) var(--space_m);
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    color: var(--tab_color, var(--color_on-bg));
+    padding: var(--bds-space_s) var(--bds-space_m);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--tab_color, var(--bds-on-bg));
     border-bottom: 2px solid var(--tab_border-color, transparent);
     margin-bottom: -1px;
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .tab.--active {
-    --tab_color:        var(--color_interactive);
-    --tab_border-color: var(--color_interactive);
+    --tab_color:        var(--bds-interactive);
+    --tab_border-color: var(--bds-interactive);
   }
 
   .tab:disabled {
@@ -36,23 +36,23 @@
   }
 
   .tab:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
-    border-radius: var(--border_radius--xs);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+    border-radius: var(--bds-border_radius--xs);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .tab:not(:disabled, .--active):hover {
-      --tab_color: var(--color_interactive);
+      --tab_color: var(--bds-interactive);
     }
   }
 
   .panel {
-    padding-block-start: var(--space_m);
+    padding-block-start: var(--bds-space_m);
   }
 
   .panel:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 }

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

@@ -87,7 +87,6 @@ export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
             id={panelId}
             role="tabpanel"
             aria-labelledby={tabId}
-            tabIndex={0}
             hidden={!isActive}
             className={css.panel}
           >

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -7,20 +7,20 @@
 
   .tooltip {
     position: absolute;
-    z-index: var(--z-index_popover);
-    padding: var(--space_xxs) var(--space_xs);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--tooltip_bg, var(--color_on-bg));
-    color: var(--tooltip_text, var(--color_bg));
-    font-size: var(--font_size--body--s);
-    line-height: var(--font_line-height--body);
+    z-index: var(--bds-z-index_popover);
+    padding: var(--bds-space_xxs) var(--bds-space_xs);
+    border-radius: var(--bds-border_radius--xs);
+    background-color: var(--tooltip_bg, var(--bds-on-bg));
+    color: var(--tooltip_text, var(--bds-bg));
+    font-size: var(--bds-font_size--body--s);
+    line-height: var(--bds-font_line-height--body);
     white-space: nowrap;
     pointer-events: none;
 
     /* Hidden by default */
     visibility: hidden;
     opacity: 0;
-    transition: opacity var(--animation_transition-duration) var(--animation_easing);
+    transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   /* Show on hover and keyboard focus */
@@ -32,28 +32,28 @@
 
   /* Placement: top (default) */
   .--placement_top {
-    bottom: calc(100% + var(--space_xs));
+    bottom: calc(100% + var(--bds-space_xs));
     left: 50%;
     transform: translateX(-50%);
   }
 
   /* Placement: bottom */
   .--placement_bottom {
-    top: calc(100% + var(--space_xs));
+    top: calc(100% + var(--bds-space_xs));
     left: 50%;
     transform: translateX(-50%);
   }
 
   /* Placement: left */
   .--placement_left {
-    right: calc(100% + var(--space_xs));
+    right: calc(100% + var(--bds-space_xs));
     top: 50%;
     transform: translateY(-50%);
   }
 
   /* Placement: right */
   .--placement_right {
-    left: calc(100% + var(--space_xs));
+    left: calc(100% + var(--bds-space_xs));
     top: 50%;
     transform: translateY(-50%);
   }

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

@@ -18,8 +18,8 @@ describe('Tooltip', () => {
         <button type="button">Trigger</button>
       </Tooltip>
     );
-    expect(screen.getByRole('tooltip')).toBeInTheDocument();
-    expect(screen.getByRole('tooltip')).toHaveTextContent('Tooltip text');
+    expect(screen.getByRole('tooltip', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByRole('tooltip', { hidden: true })).toHaveTextContent('Tooltip text');
   });
 
   it('links trigger to tooltip via aria-describedby', () => {
@@ -29,7 +29,7 @@ describe('Tooltip', () => {
       </Tooltip>
     );
     const trigger = screen.getByRole('button', { name: 'Action' });
-    const tooltip = screen.getByRole('tooltip');
+    const tooltip = screen.getByRole('tooltip', { hidden: true });
     expect(trigger).toHaveAttribute('aria-describedby', tooltip.id);
   });
 

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, cloneElement, isValidElement, useId } from 'react';
+import { ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
 import css from './Tooltip.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
@@ -16,6 +16,7 @@ export function Tooltip({
   className,
 }: Readonly<TooltipProps>) {
   const tooltipId = useId();
+  const [isVisible, setIsVisible] = useState(false);
 
   const trigger = isValidElement(children)
     ? cloneElement(children as ReactElement<Record<string, unknown>>, {
@@ -24,11 +25,18 @@ export function Tooltip({
     : children;
 
   return (
-    <span className={cn(css.wrapper, className)}>
+    <span
+      className={cn(css.wrapper, className)}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+    >
       {trigger}
       <span
         id={tooltipId}
         role="tooltip"
+        aria-hidden={!isVisible}
         className={cn(css.tooltip, css[`--placement_${placement}`])}
       >
         {content}

package/src/components/ui/Typography/Typography.module.css

@@ -1,38 +1,38 @@
 @layer component {
   .typography {
     margin: 0;
-    font-family: var(--font_family--body);
-    color: var(--typography_color, var(--color_on-bg));
+    font-family: var(--bds-font_family--body);
+    color: var(--typography_color, var(--bds-on-bg));
   }
 
   .--h1 {
-    font-family: var(--font_family--heading);
-    font-size: var(--font_size--heading-1);
-    font-weight: var(--font_weight--bold);
-    line-height: var(--font_line-height--heading);
+    font-family: var(--bds-font_family--heading);
+    font-size: var(--bds-font_size--heading-1);
+    font-weight: var(--bds-font_weight--bold);
+    line-height: var(--bds-font_line-height--heading);
   }
 
   .--h2 {
-    font-family: var(--font_family--heading);
-    font-size: var(--font_size--heading-2);
-    font-weight: var(--font_weight--semibold);
-    line-height: var(--font_line-height--heading);
+    font-family: var(--bds-font_family--heading);
+    font-size: var(--bds-font_size--heading-2);
+    font-weight: var(--bds-font_weight--semibold);
+    line-height: var(--bds-font_line-height--heading);
   }
 
   .--h3 {
-    font-family: var(--font_family--heading);
-    font-size: var(--font_size--heading-3);
-    font-weight: var(--font_weight--semibold);
-    line-height: var(--font_line-height--heading);
+    font-family: var(--bds-font_family--heading);
+    font-size: var(--bds-font_size--heading-3);
+    font-weight: var(--bds-font_weight--semibold);
+    line-height: var(--bds-font_line-height--heading);
   }
 
   .--body {
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
   }
 
   .--body_s {
-    font-size: var(--font_size--body--s);
-    line-height: var(--font_line-height--body);
+    font-size: var(--bds-font_size--body--s);
+    line-height: var(--bds-font_line-height--body);
   }
 }

package/src/css/bdc.css

@@ -0,0 +1,61 @@
+/* ─── bdc: Border Decoration Tokens ────────────────────────────────────────────
+ *
+ * Registered CSS custom properties for consistent borders across all components.
+ * Components use outline (not border) for their visual edge so that the decoration
+ * has zero layout impact and can animate via registered <color> transitions.
+ *
+ * @property declarations must be top-level (not inside @layer).
+ * inherits: false means each element owns its own instance — setting --bdc_color
+ * on :focus animates that element's border colour independently.
+ * ─────────────────────────────────────────────────────────────────────────────── */
+
+@property --bdc_color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: currentcolor;
+}
+
+@property --bdc_width {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 1px;
+}
+
+@property --bdc_offset {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: -1px;
+}
+
+@property --bdc_radius {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 0;
+}
+
+/* '*' syntax cannot be interpolated but gives a guaranteed none default */
+@property --bdc_shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: none;
+}
+
+@layer component {
+  :root {
+    /* border: none by default — outline provides the visual edge */
+    --bdc_border:       none;
+
+    /* Colour tokens */
+    --bdc_color:        currentcolor;
+    --bdc_color--focus: var(--bds-interactive);
+    --bdc_color--error: var(--bds-error);
+
+    /* Geometry */
+    --bdc_width:  1px;
+    --bdc_offset: -1px; /* inset — appears inside the element like a traditional border */
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    /* Shadow: opt-in, none by default */
+    --bdc_shadow: none;
+  }
+}

package/src/css/index.css

@@ -1,4 +1,5 @@
 /* @boostdev/components — framework-agnostic CSS barrel */
+@import './bdc.css';
 
 /* UI */
 @import '../components/ui/Accordion/Accordion.module.css';
@@ -8,6 +9,7 @@
 @import '../components/ui/Breadcrumb/Breadcrumb.module.css';
 @import '../components/ui/Calendar/Calendar.module.css';
 @import '../components/ui/Carousel/Carousel.module.css';
+@import '../components/ui/Collapsible/Collapsible.module.css';
 @import '../components/ui/DescriptionList/DescriptionList.module.css';
 @import '../components/ui/Link/Link.module.css';
 @import '../components/ui/Loading/Loading.module.css';
@@ -35,12 +37,15 @@
 
 /* Form */
 @import '../components/interaction/form/Checkbox/Checkbox.module.css';
+@import '../components/interaction/form/CheckboxGroup/CheckboxGroup.module.css';
 @import '../components/interaction/form/Combobox/Combobox.module.css';
 @import '../components/interaction/form/FileInput/FileInput.module.css';
 @import '../components/interaction/form/FormInput/FormInput.module.css';
 @import '../components/interaction/form/NumberInput/NumberInput.module.css';
 @import '../components/interaction/form/Radio/Radio.module.css';
+@import '../components/interaction/form/RadioGroup/RadioGroup.module.css';
 @import '../components/interaction/form/Select/Select.module.css';
+@import '../components/interaction/form/SegmentedControl/SegmentedControl.module.css';
 @import '../components/interaction/form/Slider/Slider.module.css';
 @import '../components/interaction/form/Switch/Switch.module.css';
 @import '../components/interaction/form/Textarea/Textarea.module.css';

package/src/index.ts

@@ -30,6 +30,7 @@ export { Typography } from './components/ui/Typography';
 
 // Interaction
 export { Button } from './components/interaction/Button';
+export type { ButtonProps } from './components/interaction/Button';
 export { Command } from './components/interaction/Command';
 export type { CommandItem } from './components/interaction/Command';
 export { Dialog } from './components/interaction/Dialog';
@@ -42,12 +43,16 @@ export { ToastProvider, useToast } from './components/interaction/Toast';
 
 // Form
 export { Checkbox } from './components/interaction/form/Checkbox';
+export { CheckboxGroup } from './components/interaction/form/CheckboxGroup';
+export type { CheckboxGroupProps } from './components/interaction/form/CheckboxGroup';
 export { Combobox } from './components/interaction/form/Combobox';
 export type { ComboboxOption } from './components/interaction/form/Combobox';
 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 { RadioGroup } from './components/interaction/form/RadioGroup';
+export type { RadioGroupProps } from './components/interaction/form/RadioGroup';
 export { SegmentedControl } from './components/interaction/form/SegmentedControl';
 export type { SegmentedControlProps, SegmentedControlOption } from './components/interaction/form/SegmentedControl';
 export { Select } from './components/interaction/form/Select';
@@ -58,9 +63,11 @@ export { Textarea } from './components/interaction/form/Textarea';
 
 // Layout
 export { ButtonGroup } from './components/layout/ButtonGroup';
+export type { ButtonGroupProps } from './components/layout/ButtonGroup';
 export { Card } from './components/layout/Card';
 export { SectionHeader } from './components/layout/SectionHeader';
 export { IconWrapper } from './components/layout/IconWrapper';
+export type { IconWrapperProps } from './components/layout/IconWrapper';
 
 // Utilities
 export { cn } from '@boostdev/design-system-foundation';

package/src/stories/DesignSystem/Borders.mdx

@@ -0,0 +1,158 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Design System/Borders" />
+
+export const BorderDemo = ({ label, token, color = 'currentcolor', offset = '-1px', width = '1px' }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', alignItems: 'center' }}>
+    <div style={{
+      width: '8rem',
+      height: '5rem',
+      background: 'var(--bds-bg)',
+      borderRadius: '0.5rem',
+      outline: `${width} solid ${color}`,
+      outlineOffset: offset,
+    }} />
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: '0.8rem', fontWeight: 600 }}>{label}</div>
+      <div style={{ fontSize: '0.7rem', fontFamily: 'monospace', opacity: 0.6, marginTop: '0.1rem' }}>{token}</div>
+    </div>
+  </div>
+);
+
+export const TokenRow = ({ token, type, defaultValue, description }) => (
+  <tr>
+    <td><code>{token}</code></td>
+    <td style={{ fontFamily: 'monospace' }}>{type}</td>
+    <td style={{ fontFamily: 'monospace' }}>{defaultValue}</td>
+    <td>{description}</td>
+  </tr>
+);
+
+# Borders
+
+The `bdc` system unifies all component borders behind five registered CSS custom properties. Every form control, card, and interactive surface draws its border from these tokens — ensuring consistent visual weight, smooth animated state transitions, and a single override point for theming.
+
+## Why outline, not border?
+
+Components use `outline` rather than `border` for their decorative edge. The reasons:
+
+- **Zero layout impact** — `outline` lives outside the box model, so changing width or color never shifts surrounding elements.
+- **Inset appearance** — `outline-offset: -1px` pulls the ring inside the element, making it visually indistinguishable from a traditional border.
+- **Animatable colour** — `@property --bdc_color { syntax: '<color>'; }` registers the token as a typed custom property, which lets the browser interpolate it directly. A single `transition: --bdc_color 150ms ease-out` handles focus, hover, and error state changes without JavaScript.
+
+## Tokens
+
+<table>
+  <thead>
+    <tr>
+      <th>Token</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <TokenRow token="--bdc_color"  type="<color>"              defaultValue="currentcolor" description="Border colour — transitions smoothly between states" />
+    <TokenRow token="--bdc_width"  type="<length>"             defaultValue="1px"          description="Border width" />
+    <TokenRow token="--bdc_offset" type="<length>"             defaultValue="-1px"         description="Negative = inset (border-like); positive = outer halo" />
+    <TokenRow token="--bdc_radius" type="<length-percentage>"  defaultValue="0"            description="Border radius, synced with the element's own radius" />
+    <TokenRow token="--bdc_shadow" type="*"                    defaultValue="none"         description="Box shadow — opt-in accent, e.g. focus glow" />
+  </tbody>
+</table>
+
+---
+
+## Visual examples
+
+<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+  <BorderDemo label="Default" token="currentcolor" color="currentcolor" />
+  <BorderDemo label="Focus" token="--bdc_color--focus" color="var(--bds-interactive)" />
+  <BorderDemo label="Error" token="--bdc_color--error" color="var(--bds-error)" />
+  <BorderDemo label="Outer halo" token="--bdc_offset: 2px" color="var(--bds-interactive)" offset="2px" width="2px" />
+</div>
+
+| State | `--bdc_color` resolves to | Trigger |
+|-------|--------------------------|---------|
+| Default | `currentcolor` | — |
+| Focus | `var(--bdc_color--focus)` → `--bds-interactive` | `:focus` |
+| Error | `var(--bdc_color--error)` → `--bds-error` | `[aria-invalid="true"]` |
+| Keyboard ring | `var(--bds-outline_default)` | `:focus-visible` |
+
+---
+
+## Component pattern
+
+Every component that renders a bordered element follows this CSS pattern:
+
+```css
+.element {
+  /* Suppress any browser default border — consumer can re-enable
+     via the --component_border custom property if needed. */
+  border: none;
+
+  /* bdc defaults */
+  --bdc_color: currentcolor;
+
+  /* Rendered border (zero layout impact) */
+  outline: var(--bdc_width) solid var(--bdc_color);
+  outline-offset: var(--bdc_offset);
+  border-radius: var(--bdc_radius);
+  box-shadow: var(--bdc_shadow);
+
+  /* Smooth colour transitions via registered @property */
+  transition: --bdc_color 150ms ease-out;
+}
+
+/* State overrides — only the colour token changes */
+.element:focus              { --bdc_color: var(--bdc_color--focus); }
+.element[aria-invalid="true"] { --bdc_color: var(--bdc_color--error); }
+
+/* Keyboard accessibility ring — replaces outline on focus-visible */
+.element:focus-visible {
+  outline: var(--bds-outline_default);
+  outline-offset: var(--bds-outline_offset);
+}
+```
+
+---
+
+## Consumer overrides
+
+Override a component's border colour for a specific context by reassigning `--bdc_color`:
+
+```css
+/* Scoped to a single component instance */
+.my-context .my-input {
+  --bdc_color: var(--bds-warning);
+}
+
+/* Override globally via the token layer */
+@layer tokens.override {
+  :root {
+    --bdc_color: var(--bds-brand);
+  }
+}
+```
+
+To change width or radius independently:
+
+```css
+.my-card {
+  --bdc_width: 2px;
+  --bdc_radius: var(--bds-border_radius--m);
+}
+```
+
+---
+
+## Import
+
+The `bdc` tokens are included automatically when you import the component stylesheet:
+
+```css
+/* Included automatically with the full component CSS */
+@import '@boostdev/components/css';
+
+/* Or load the token layer standalone */
+@import '@boostdev/components/css/bdc';
+```