@boostdev/design-system-components 0.1.18 → 1.0.1

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

@@ -2,37 +2,42 @@
   .wrapper {
     width: 100%;
     overflow-x: auto;
-    border-radius: var(--border_radius--s);
-    border: 1px solid var(--color_bg--subtle);
+    border: var(--table_border, none);
+    --bdc_color: var(--bds-bg--subtle);
+    --bdc-outline_radius: var(--bds-border_radius--s);
+
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--table_radius, var(--bdc-outline_radius));
   }
 
   .table {
     width: 100%;
     border-collapse: collapse;
-    font-size: var(--font_size--body);
-    font-family: var(--font_family--body);
+    font-size: var(--bds-font_size--body);
+    font-family: var(--bds-font_family--body);
   }
 
   .caption {
     caption-side: top;
     text-align: start;
-    padding: var(--space_s) var(--space_m);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+    padding: var(--bds-space_s) var(--bds-space_m);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
   }
 
   .thead {
-    background-color: var(--color_bg--subtle);
+    background-color: var(--bds-bg--subtle);
   }
 
   .th {
-    padding: var(--space_s) var(--space_m);
+    padding: var(--bds-space_s) var(--bds-space_m);
     text-align: start;
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--subtle);
+    font-weight: var(--bds-font_weight--semibold);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--color_bg--subtle);
+    border-bottom: 1px solid var(--bds-bg--subtle);
   }
 
   .th.--sortable {
@@ -43,25 +48,25 @@
     all: unset;
     display: flex;
     align-items: center;
-    gap: var(--space_xxs);
-    padding: var(--space_s) var(--space_m);
+    gap: var(--bds-space_xxs);
+    padding: var(--bds-space_s) var(--bds-space_m);
     width: 100%;
     cursor: pointer;
-    color: var(--color_on-bg--subtle);
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body--s);
-    transition: var(--animation_transition);
+    color: var(--bds-on-bg--subtle);
+    font-weight: var(--bds-font_weight--semibold);
+    font-size: var(--bds-font_size--body--s);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
 
   .sortButton:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .sortButton:hover {
-      color: var(--color_on-bg);
+      color: var(--bds-on-bg);
     }
   }
 
@@ -69,13 +74,13 @@
     width: 1rem;
     height: 1rem;
     opacity: 0.4;
-    transition: transform var(--animation_transition-duration) var(--animation_easing),
-      opacity var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .sortIcon.--sort-active {
     opacity: 1;
-    color: var(--color_interactive);
+    color: var(--bds-interactive);
   }
 
   .sortIcon.--sort-desc {
@@ -83,8 +88,8 @@
   }
 
   .tbody .tr {
-    border-bottom: 1px solid var(--color_bg--subtle);
-    transition: var(--animation_transition);
+    border-bottom: 1px solid var(--bds-bg--subtle);
+    transition: var(--bds-animation_transition);
   }
 
   .tbody .tr:last-child {
@@ -93,13 +98,13 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tbody .tr:hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 
   .td {
-    padding: var(--space_s) var(--space_m);
-    color: var(--color_on-bg);
+    padding: var(--bds-space_s) var(--bds-space_m);
+    color: var(--bds-on-bg);
     vertical-align: middle;
   }
 

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,66 @@
+/* ─── 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.
+ *
+ * Naming:
+ *  --bdc_color*        — colour tokens (exception: colour is shared across CSS properties)
+ *  --bdc-outline_*     — tokens that directly map to CSS outline sub-properties
+ *
+ * @property declarations must be top-level (not inside @layer).
+ * --bdc_color uses inherits: false so each element owns its own colour instance,
+ * enabling per-element transition: --bdc_color for focus/error state animations.
+ * ─────────────────────────────────────────────────────────────────────────────── */
+
+/* Colour — exception: kept as --bdc_color because colour is semantic across properties */
+@property --bdc_color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: currentcolor;
+}
+
+@property --bdc-outline_width {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 1px;
+}
+
+@property --bdc-outline_offset {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: -1px;
+}
+
+@property --bdc-outline_radius {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 0;
+}
+
+/* '*' syntax cannot be interpolated but gives a guaranteed none default */
+@property --bdc-outline_shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: none;
+}
+
+@layer component {
+  :root {
+    /* border: none by default — outline provides the visual edge */
+    --bdc-outline_border: none;
+
+    /* Colour tokens (kept as --bdc_color — see naming note above) */
+    --bdc_color:        currentcolor;
+    --bdc_color--focus: var(--bds-interactive);
+    --bdc_color--error: var(--bds-error);
+
+    /* Outline geometry */
+    --bdc-outline_width:  1px;
+    --bdc-outline_offset: -1px; /* inset — appears inside the element like a traditional border */
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+
+    /* Shadow: opt-in, none by default */
+    --bdc-outline_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';