@boostdev/design-system-components 0.1.18 → 1.0.0

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

@@ -2,7 +2,7 @@
   .formGroup {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
 
   .labelRow {
@@ -12,35 +12,35 @@
   }
 
   .value {
-    font-size: var(--font_size--body--s);
+    font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
-    color: var(--color_on-bg--subtle);
+    color: var(--bds-on-bg--subtle);
   }
 
   .slider {
     --slider_fill:         0%;
-    --slider_track-height: var(--space_xxs);
-    --slider_thumb-size:   calc(var(--space_s) * 2);
+    --slider_track-height: var(--bds-space_xxs);
+    --slider_thumb-size:   calc(var(--bds-space_s) * 2);
 
-    color: var(--slider_color, var(--color_on-bg));
+    color: var(--slider_color, var(--bds-on-bg));
     appearance: none;
     width: 100%;
     height: var(--slider_track-height);
     border-radius: 999px;
     background: linear-gradient(
       to right,
-      var(--slider_color-active, var(--color_active)) 0%,
-      var(--slider_color-active, var(--color_active)) var(--slider_fill),
-      var(--color_bg--subtle) var(--slider_fill),
-      var(--color_bg--subtle) 100%
+      var(--slider_color-active, var(--bds-active)) 0%,
+      var(--slider_color-active, var(--bds-active)) var(--slider_fill),
+      var(--bds-bg--subtle) var(--slider_fill),
+      var(--bds-bg--subtle) 100%
     );
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .slider:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
     border-radius: 999px;
   }
 
@@ -55,9 +55,9 @@
     width: var(--slider_thumb-size);
     height: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--color_active));
-    box-shadow: var(--shadow_s);
-    transition: var(--animation_transition);
+    background-color: var(--slider_color-active, var(--bds-active));
+    box-shadow: var(--bds-shadow_s);
+    transition: var(--bds-animation_transition);
     cursor: pointer;
   }
 
@@ -67,27 +67,27 @@
     height: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--color_active));
-    box-shadow: var(--shadow_s);
+    background-color: var(--slider_color-active, var(--bds-active));
+    box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
 
   .sliderError {
     background: linear-gradient(
       to right,
-      var(--color_error) 0%,
-      var(--color_error) var(--slider_fill),
-      var(--color_bg--subtle) var(--slider_fill),
-      var(--color_bg--subtle) 100%
+      var(--bds-error) 0%,
+      var(--bds-error) var(--slider_fill),
+      var(--bds-bg--subtle) var(--slider_fill),
+      var(--bds-bg--subtle) 100%
     );
   }
 
   .sliderError::-webkit-slider-thumb {
-    background-color: var(--color_error);
+    background-color: var(--bds-error);
   }
 
   .sliderError::-moz-range-thumb {
-    background-color: var(--color_error);
+    background-color: var(--bds-error);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -60,6 +60,7 @@ export function Slider({
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={currentValue}
+        aria-valuetext={String(currentValue)}
         className={cn(css.slider, error ? css.sliderError : undefined)}
         style={{ '--slider_fill': `${fillPct}%` } as CSSProperties}
         onChange={handleChange}

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

@@ -52,10 +52,10 @@ Toggle control for binary settings that take immediate effect — without requir
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--switch_track-bg`</td><td>`var(--color_grey--subtle)`</td><td>Track background when off</td></tr>
-<tr><td>`--switch_thumb-bg`</td><td>`var(--color_grey)`</td><td>Thumb colour when off (also track outline)</td></tr>
-<tr><td>`--switch_track-bg--active`</td><td>`var(--color_active--subtle)`</td><td>Track background when on</td></tr>
-<tr><td>`--switch_thumb-bg--active`</td><td>`var(--color_active--strong)`</td><td>Thumb colour when on (also track outline)</td></tr>
+<tr><td>`--switch_track-bg`</td><td>`var(--bds-grey--subtle)`</td><td>Track background when off</td></tr>
+<tr><td>`--switch_thumb-bg`</td><td>`var(--bds-grey)`</td><td>Thumb colour when off (also track outline)</td></tr>
+<tr><td>`--switch_track-bg--active`</td><td>`var(--bds-active--subtle)`</td><td>Track background when on</td></tr>
+<tr><td>`--switch_thumb-bg--active`</td><td>`var(--bds-active--strong)`</td><td>Thumb colour when on (also track outline)</td></tr>
 </tbody>
 </table>
 

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

@@ -1,11 +1,11 @@
 @layer component {
   .switchGroup {
     --switch_thumb-size:   1.25em;
-    --switch_track-pad:    var(--space_xxxs);
+    --switch_track-pad:    var(--bds-space_xxxs);
     --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
     --switch_track-width:  calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
 
-    color: var(--switch_color, var(--color_on-bg));
+    color: var(--switch_color, var(--bds-on-bg));
     display: flex;
     flex-direction: column;
   }
@@ -17,7 +17,7 @@
   .inputWrapper {
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
 
   .trackWrapper {
@@ -53,12 +53,17 @@
     width: var(--switch_track-width);
     height: var(--switch_track-height);
     border-radius: 999px;
-    background-color: var(--switch_track-bg, var(--color_grey--subtle));
+    background-color: var(--switch_track-bg, var(--bds-grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
-    transition: var(--animation_transition);
-    outline: 1px solid var(--switch_thumb-bg, var(--color_grey));
-    outline-offset: var(--outline_offset);
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bds-outline_offset);
+    box-shadow: var(--switch_shadow, var(--bdc_shadow));
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+
+    --bdc_color: var(--switch_thumb-bg, var(--bds-grey));
   }
 
   /* Thumb */
@@ -67,32 +72,33 @@
     width: var(--switch_thumb-size);
     height: var(--switch_thumb-size);
     border-radius: 50%;
-    background-color: var(--switch_thumb-bg, var(--color_grey));
-    box-shadow: var(--shadow_s);
-    transition: var(--animation_transition);
+    background-color: var(--switch_thumb-bg, var(--bds-grey));
+    box-shadow: var(--bds-shadow_s);
+    transition: var(--bds-animation_transition);
     transform: translateX(0);
   }
 
   /* Error state — declared before checked/focus so higher-specificity states can override */
   .switch.switchError + .track {
-    outline: 1px solid var(--color_error);
+    --bdc_color: var(--bds-error);
   }
 
   /* Checked state via CSS sibling combinator */
   .switch:checked + .track {
-    background-color: var(--switch_track-bg--active, var(--color_active--subtle));
-    outline-color: var(--switch_thumb-bg--active, var(--color_active--strong));
+    background-color: var(--switch_track-bg--active, var(--bds-active--subtle));
+
+    --bdc_color: var(--switch_thumb-bg--active, var(--bds-active--strong));
   }
 
   .switch:checked + .track .thumb {
-    background-color: var(--switch_thumb-bg--active, var(--color_active--strong));
+    background-color: var(--switch_thumb-bg--active, var(--bds-active--strong));
     transform: translateX(var(--switch_thumb-size));
   }
 
   /* Focus visible on the visual track */
   .switch:focus-visible + .track {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
     border-radius: 999px;
   }
 

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

@@ -33,7 +33,7 @@ export function Switch({
   return (
     <InputContainer className={cn(css.switchGroup, css[`--size_${size}`], className)}>
       <div className={css.inputWrapper}>
-        {prefix && <Label id={id} label={prefix}/>}
+        {prefix && <span>{prefix}</span>}
         <div className={css.trackWrapper}>
           <input
             type="checkbox"

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

@@ -5,24 +5,33 @@
   }
 
   .textarea {
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
-    padding: var(--space_s);
-    border: 1px solid var(--textarea_border-color, currentcolor);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--textarea_color_bg, var(--color_bg));
-    color: var(--textarea_color, var(--color_on-bg));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
+    padding: var(--bds-space_s);
+    border: var(--textarea_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(--textarea_radius, var(--bdc_radius));
+    box-shadow: var(--textarea_shadow, var(--bdc_shadow));
+    background-color: var(--textarea_color_bg, var(--bds-bg));
+    color: var(--textarea_color, var(--bds-on-bg));
     resize: vertical;
-    min-height: calc(var(--space_m) * 5);
-    transition: var(--animation_transition);
+    min-height: calc(var(--bds-space_m) * 5);
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .textarea:focus {
-    --textarea_border-color: var(--color_interactive);
+    --bdc_color: var(--bdc_color--focus);
+  }
 
-    outline: none;
-    box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+  .textarea:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   .textarea:disabled {
@@ -32,10 +41,6 @@
   }
 
   .textareaError {
-    --textarea_border-color: var(--color_error);
-  }
-
-  .textareaError:focus {
-    --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+    --bdc_color: var(--bdc_color--error);
   }
 }

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

@@ -19,6 +19,7 @@ export function Textarea({
   error,
   hint,
   className,
+  required,
   ...props
 }: Readonly<TextareaProps>) {
   const id = name + useId();
@@ -34,6 +35,8 @@ export function Textarea({
         name={name}
         aria-invalid={!!error}
         aria-describedby={describedBy}
+        aria-required={required || undefined}
+        required={required}
         className={cn(css.textarea, error ? css.textareaError : undefined)}
         {...props}
       />

package/src/components/interaction/form/atoms/InputContainer.module.css

@@ -1,9 +1,9 @@
 @layer component {
   .container {
-    --labelPosition: calc(var(--inputSize) + var(--space_m));
+    --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
 
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxxs);
+    gap: var(--bds-space_xxxs);
   }
 }

package/src/components/interaction/form/atoms/Label.module.css

@@ -2,8 +2,8 @@
   .label {
     display: flex;
     align-items: center;
-    font-family: var(--font_family--body);
-    color: var(--color_on-bg);
+    font-family: var(--bds-font_family--body);
+    color: var(--bds-on-bg);
     cursor: pointer;
   }
 }

package/src/components/interaction/form/atoms/Message.module.css

@@ -1,11 +1,11 @@
 @layer component {
   .error,
   .hint {
-    font-size: var(--font_size--body--s);
+    font-size: var(--bds-font_size--body--s);
     margin-inline-start: var(--labelPosition);
   }
 
   .error {
-    color: var(--color_error);
+    color: var(--bds-error);
   }
 }

package/src/components/layout/ButtonGroup/ButtonGroup.module.css

@@ -2,14 +2,14 @@
   .buttonGroup {
     container-type: inline-size;
     container-name: button-group;
-    grid-column: var(--grid_span-100);
+    grid-column: var(--bds-grid_span-100);
   }
 
   .buttonGroup .container {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
-    gap: var(--space_l);
+    gap: var(--bds-space_l);
     align-items: center;
   }
 

package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx

@@ -15,8 +15,8 @@ type Story = StoryObj<typeof meta>;
 
 const TwoButtons = () => (
   <>
-    <Button variant="secondary">Cancel</Button>
-    <Button variant="primary">Confirm</Button>
+    <Button variant="ghost">Cancel</Button>
+    <Button variant="default">Confirm</Button>
   </>
 );
 

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -2,15 +2,20 @@ import { ReactNode } from 'react';
 import css from './ButtonGroup.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface ButtonGroupProps {
+export interface ButtonGroupProps {
   children: ReactNode;
   className?: string;
   variant?: 'flow' | 'card' | 'modal' | 'content';
+  'aria-label'?: string;
 }
 
-export function ButtonGroup({ children, className, variant }: ButtonGroupProps) {
+export function ButtonGroup({ children, className, variant, 'aria-label': ariaLabel }: ButtonGroupProps) {
   return (
-    <div className={cn(css.buttonGroup, className, variant && css[`--variant_${variant}`])}>
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={cn(css.buttonGroup, className, variant && css[`--variant_${variant}`])}
+    >
       <div className={css.container}>{children}</div>
     </div>
   );

package/src/components/layout/ButtonGroup/index.ts

@@ -1 +1,2 @@
 export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';

package/src/components/layout/Card/Card.module.css

@@ -1,23 +1,27 @@
 @layer component {
   .card {
-    background-color: var(--card_color, var(--color_bg));
-    color: var(--card_on-color, var(--color_on-bg));
-    border-radius: var(--border_radius--m);
+    background-color: var(--card_color, var(--bds-bg));
+    color: var(--card_on-color, var(--bds-on-bg));
+    border-radius: var(--bds-border_radius--m);
     transition: all 0.3s ease;
     position: relative;
   }
 
   .card.--default {
-    box-shadow: var(--shadow_s);
+    box-shadow: var(--bds-shadow_s);
   }
 
   .card.--elevated {
-    box-shadow: var(--shadow_m);
+    box-shadow: var(--bds-shadow_m);
   }
 
   .card.--outlined {
-    border: 1px solid currentcolor;
-    box-shadow: var(--shadow_s);
+    border: var(--card_border, none);
+    --bdc_color: currentcolor;
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    box-shadow: var(--bds-shadow_s);
   }
 
   .card.--clickable {
@@ -29,19 +33,19 @@
   }
 
   .card.--padding-small {
-    padding: var(--space_s);
+    padding: var(--bds-space_s);
   }
 
   .card.--padding-medium {
-    padding: var(--space_m);
+    padding: var(--bds-space_m);
   }
 
   .card.--padding-large {
-    padding: var(--space_l);
+    padding: var(--bds-space_l);
   }
 
   .card.--text-start {
-    text-align: left;
+    text-align: start;
   }
 
   .card.--text-center {
@@ -49,25 +53,35 @@
   }
 
   .card.--text-end {
-    text-align: right;
+    text-align: end;
+  }
+
+  .card.--clickable:focus-visible {
+    outline: 2px solid var(--color_focus, currentcolor);
+    outline-offset: 2px;
+  }
+
+  .card.--clickable:active {
+    transform: translateY(0);
+    box-shadow: var(--bds-shadow_s);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .card.--clickable:hover {
       transform: translateY(-2px);
-      box-shadow: var(--shadow_xl);
+      box-shadow: var(--bds-shadow_xl);
     }
 
     .card.--default:hover {
-      box-shadow: var(--shadow_m);
+      box-shadow: var(--bds-shadow_m);
     }
 
     .card.--elevated:hover {
-      box-shadow: var(--shadow_2xl);
+      box-shadow: var(--bds-shadow_2xl);
     }
 
     .card.--outlined:hover {
-      box-shadow: var(--shadow_s);
+      box-shadow: var(--bds-shadow_s);
     }
   }
 }

package/src/components/layout/Card/Card.tsx

@@ -4,7 +4,7 @@ import { cn } from '@boostdev/design-system-foundation';
 
 interface CardProps {
   children: ReactNode;
-  className?: string;
+  className?: string | undefined;
   variant?: 'default' | 'elevated' | 'outlined';
   padding?: 'none' | 'small' | 'medium' | 'large';
   textAlign?: 'start' | 'center' | 'end';

package/src/components/layout/IconWrapper/IconWrapper.mdx

@@ -28,8 +28,8 @@ Circular container that sizes to its own `font-size`. Use to give an SVG icon a
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--icon-wrapper_color`</td><td>`var(--color_cta--subtle)`</td><td>Background colour</td></tr>
-<tr><td>`--icon-wrapper_on-color`</td><td>`var(--color_on-cta--subtle)`</td><td>Icon colour</td></tr>
+<tr><td>`--icon-wrapper_color`</td><td>`var(--bds-cta--subtle)`</td><td>Background colour</td></tr>
+<tr><td>`--icon-wrapper_on-color`</td><td>`var(--bds-on-cta--subtle)`</td><td>Icon colour</td></tr>
 </tbody>
 </table>
 

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -7,12 +7,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: var(--space_l) auto var(--space_m);
-    background: var(--icon-wrapper-color, var(--color_bg));
-    color: var(--color_on-icon-wrapper-color, var(--color_on-bg));
-    fill: var(--color_on-icon-wrapper-color, var(--color_on-bg));
+    margin: var(--bds-space_l) auto var(--bds-space_m);
+    background: var(--icon-wrapper-color, var(--bds-bg));
+    color: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
+    fill: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
     position: relative;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .wrapper svg {

package/src/components/layout/IconWrapper/IconWrapper.tsx

@@ -2,13 +2,14 @@ import { ReactNode } from 'react';
 import css from './IconWrapper.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface Props {
+export interface IconWrapperProps {
   children: ReactNode;
   className?: string;
+  'aria-hidden'?: boolean | 'true' | 'false';
 }
 
-export function IconWrapper({ children, className }: Props) {
+export function IconWrapper({ children, className, 'aria-hidden': ariaHidden }: IconWrapperProps) {
   return (
-    <div className={cn(className, css.wrapper)}>{children}</div>
+    <div className={cn(className, css.wrapper)} aria-hidden={ariaHidden}>{children}</div>
   );
 }

package/src/components/layout/IconWrapper/index.ts

@@ -1 +1,2 @@
 export { IconWrapper } from './IconWrapper';
+export type { IconWrapperProps } from './IconWrapper';

package/src/components/layout/SectionHeader/SectionHeader.module.css

@@ -2,26 +2,26 @@
   .sectionHeader {
     display: flex;
     flex-direction: column;
-    gap: var(--space_m);
-    grid-column: var(--grid_span-100);
+    gap: var(--bds-space_m);
+    grid-column: var(--bds-grid_span-100);
   }
 
   .title {
-    color: var(--sectionHeader-title-color, var(--color_on-bg));
+    color: var(--sectionHeader-title-color, var(--bds-on-bg));
     margin: 0;
-    font-family: var(--font_family--body);
+    font-family: var(--bds-font_family--body);
   }
 
   .subtitle {
-    color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
+    color: var(--sectionHeader_subtitle-color, var(--bds-grey--strong));
     margin: 0;
-    font-family: var(--font_family--body);
-    font-weight: var(--font_weight--medium);
+    font-family: var(--bds-font_family--body);
+    font-weight: var(--bds-font_weight--medium);
   }
 
   .sectionHeader.--start {
     align-items: flex-start;
-    text-align: left;
+    text-align: start;
   }
 
   .sectionHeader.--center {
@@ -31,41 +31,41 @@
 
   .sectionHeader.--end {
     align-items: flex-end;
-    text-align: right;
+    text-align: end;
   }
 
   .sectionHeader.--small .title {
-    font-size: var(--font_size--heading-1);
-    line-height: var(--font_line-height--heading);
-    font-weight: var(--font_weight--bold);
+    font-size: var(--bds-font_size--heading-1);
+    line-height: var(--bds-font_line-height--heading);
+    font-weight: var(--bds-font_weight--bold);
   }
 
   .sectionHeader.--small .subtitle {
-    font-size: var(--font_size--body);
+    font-size: var(--bds-font_size--body);
     line-height: 1.4;
   }
 
   .sectionHeader.--medium .title {
-    font-size: var(--font_size--display);
-    line-height: var(--font_line-height--display);
-    font-weight: var(--font_weight--bold);
+    font-size: var(--bds-font_size--display);
+    line-height: var(--bds-font_line-height--display);
+    font-weight: var(--bds-font_weight--bold);
   }
 
   .sectionHeader.--medium .subtitle {
-    font-size: var(--font_size--heading-3);
+    font-size: var(--bds-font_size--heading-3);
     line-height: 1.3;
   }
 
   .sectionHeader.--large .title {
-    font-size: var(--font_size--display);
-    line-height: var(--font_line-height--display);
-    font-weight: var(--font_weight--bold);
-    letter-spacing: var(--font_tracking--tight);
+    font-size: var(--bds-font_size--display);
+    line-height: var(--bds-font_line-height--display);
+    font-weight: var(--bds-font_weight--bold);
+    letter-spacing: var(--bds-font_tracking--tight);
   }
 
   .sectionHeader.--large .subtitle {
-    font-size: var(--font_size--heading-2);
+    font-size: var(--bds-font_size--heading-2);
     line-height: 1.3;
-    font-weight: var(--font_weight--medium);
+    font-weight: var(--bds-font_weight--medium);
   }
 }