@boostdev/design-system-components 0.1.17 → 1.0.0

package/src/components/layout/SectionHeader/SectionHeader.spec.tsx

@@ -17,11 +17,11 @@ describe('SectionHeader', () => {
     expect(screen.queryByText('Subtitle text')).not.toBeInTheDocument();
   });
 
-  it('renders inside a header element', () => {
+  it('renders inside a div wrapper', () => {
     render(<SectionHeader title="Title" />);
     const heading = screen.getByRole('heading', { level: 2 });
     expect(heading).toBeInTheDocument();
-    expect(heading.closest('header')).toBeInTheDocument();
+    expect(heading.closest('div')).toBeInTheDocument();
   });
 
   it('accepts a custom className', () => {

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -23,9 +23,9 @@ export function SectionHeader({
 }: Readonly<SectionHeaderProps>) {
   const Title = titleAs;
   return (
-    <header className={cn(css.sectionHeader, css[`--${alignment}`], css[`--${size}`], className)}>
+    <div className={cn(css.sectionHeader, css[`--${alignment}`], css[`--${size}`], className)}>
       <Title className={css.title}>{title}</Title>
       {subtitle && <p className={css.subtitle}>{subtitle}</p>}
-    </header>
+    </div>
   );
 }

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

@@ -2,13 +2,18 @@
   .accordion {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--color_bg--subtle);
-    border-radius: var(--border_radius--s);
+    border: var(--accordion_border, none);
+    --bdc_color: var(--bds-bg--subtle);
+    --bdc_radius: var(--bds-border_radius--s);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--accordion_radius, var(--bdc_radius));
     overflow: hidden;
   }
 
   .item {
-    border-bottom: 1px solid var(--color_bg--subtle);
+    border-bottom: 1px solid var(--bds-bg--subtle);
   }
 
   .item:last-child {
@@ -25,13 +30,13 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: var(--space_m);
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+    padding: 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(--bds-on-bg);
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
 
@@ -41,14 +46,14 @@
   }
 
   .trigger:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
-    border-radius: var(--border_radius--xs);
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
+    border-radius: var(--bds-border_radius--xs);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .trigger:not(:disabled):hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 
@@ -61,7 +66,7 @@
     width: 1.25rem;
     height: 1.25rem;
     flex-shrink: 0;
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .item.--open .chevron {
@@ -73,10 +78,10 @@
   }
 
   .panelContent {
-    padding: 0 var(--space_m) var(--space_m);
-    color: var(--color_on-bg);
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+    padding: 0 var(--bds-space_m) var(--bds-space_m);
+    color: var(--bds-on-bg);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -2,38 +2,38 @@
     .alert {
         display: flex;
         align-items: flex-start;
-        gap: var(--space_s);
-        padding: var(--space_m);
-        border-radius: var(--border_radius--s);
-        border-inline-start: var(--space_s) solid var(--alert_border, var(--color_blue));
-        background-color: var(--alert_bg, var(--color_blue--subtle));
-        color: var(--alert_text, var(--color_on-blue--subtle));
-        font-size: var(--font_size--body);
-        line-height: var(--font_line-height--body);
+        gap: var(--bds-space_s);
+        padding: var(--bds-space_m);
+        border-radius: var(--bds-border_radius--s);
+        border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-blue));
+        background-color: var(--alert_bg, var(--bds-blue--subtle));
+        color: var(--alert_text, var(--bds-on-blue--subtle));
+        font-size: var(--bds-font_size--body);
+        line-height: var(--bds-font_line-height--body);
     }
 
     .--variant_info {
-        --alert_bg: var(--color_blue--subtle);
-        --alert_text: var(--color_on-blue--subtle);
-        --alert_border: var(--color_blue);
+        --alert_bg: var(--bds-blue--subtle);
+        --alert_text: var(--bds-on-blue--subtle);
+        --alert_border: var(--bds-blue);
     }
 
     .--variant_success {
-        --alert_bg: var(--color_success--subtle);
-        --alert_text: var(--color_on-success--subtle);
-        --alert_border: var(--color_success);
+        --alert_bg: var(--bds-success--subtle);
+        --alert_text: var(--bds-on-success--subtle);
+        --alert_border: var(--bds-success);
     }
 
     .--variant_warning {
-        --alert_bg: var(--color_orange--subtle);
-        --alert_text: var(--color_on-orange--subtle);
-        --alert_border: var(--color_warning);
+        --alert_bg: var(--bds-orange--subtle);
+        --alert_text: var(--bds-on-orange--subtle);
+        --alert_border: var(--bds-warning);
     }
 
     .--variant_error {
-        --alert_bg: rgb(from var(--color_error) r g b / 12%);
-        --alert_text: var(--color_on-bg);
-        --alert_border: var(--color_error);
+        --alert_bg: rgb(from var(--bds-error) r g b / 12%);
+        --alert_text: var(--bds-on-bg);
+        --alert_border: var(--bds-error);
     }
 
     .icon {
@@ -47,12 +47,12 @@
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: var(--space_xxs);
+        gap: var(--bds-space_xxs);
     }
 
     .title {
-        font-weight: var(--font_weight--semibold);
-        font-size: var(--font_size--body);
+        font-weight: var(--bds-font_weight--semibold);
+        font-size: var(--bds-font_size--body);
     }
 
     .dismiss {
@@ -63,9 +63,13 @@
         flex-shrink: 0;
         cursor: pointer;
         color: currentcolor;
-        transition: var(--animation_transition);
-        border: 1px solid currentcolor;
+        transition: var(--bds-animation_transition);
+        border: var(--alert_dismiss-border, none);
         border-radius: 50%;
+        --bdc_color: currentcolor;
+
+        outline: var(--bdc_width) solid var(--bdc_color);
+        outline-offset: var(--bdc_offset);
 
     }
 
@@ -75,8 +79,8 @@
     }
 
     .dismiss:focus-visible {
-        outline: var(--outline_default);
-        outline-offset: var(--outline_offset);
+        outline: var(--bds-outline_default);
+        outline-offset: var(--bds-outline_offset);
     }
 
     @media (hover: hover) and (pointer: fine) {

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

@@ -11,9 +11,9 @@
   }
 
   .avatar.--fallback {
-    background-color: var(--avatar_bg, var(--color_blue));
-    color: var(--avatar_text, var(--color_on-blue));
-    font-weight: var(--font_weight--semibold);
+    background-color: var(--avatar_bg, var(--bds-blue));
+    color: var(--avatar_text, var(--bds-on-blue));
+    font-weight: var(--bds-font_weight--semibold);
   }
 
   .avatar.--size_small  { --avatar_size: 2em; }
@@ -30,9 +30,9 @@
   .initials {
     line-height: 1;
     user-select: none;
-    font-size: var(--font_size--body);
+    font-size: var(--bds-font_size--body);
   }
 
-  .avatar.--size_small  .initials { font-size: var(--font_size--body--s); }
-  .avatar.--size_large  .initials { font-size: var(--font_size--heading-3); }
+  .avatar.--size_small  .initials { font-size: var(--bds-font_size--body--s); }
+  .avatar.--size_large  .initials { font-size: var(--bds-font_size--heading-3); }
 }

package/src/components/ui/Avatar/Avatar.tsx

@@ -24,7 +24,7 @@ export function Avatar({ src, alt, name, size = 'medium', className }: Readonly<
   if (src) {
     return (
       <span className={cn(css.avatar, sizeClass, className)}>
-        <img src={src} alt={alt ?? name ?? ''} className={css.image} />
+        <img src={src} alt={alt ?? name ?? 'User avatar'} className={css.image} />
       </span>
     );
   }

package/src/components/ui/Badge/Badge.mdx

@@ -50,8 +50,8 @@ Override these on a parent element to customise the badge without touching globa
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--badge_color`</td><td>`var(--color_cta--subtle)`</td><td>Background colour</td></tr>
-<tr><td>`--badge_on-color`</td><td>`var(--color_on-cta--subtle)`</td><td>Text colour</td></tr>
+<tr><td>`--badge_color`</td><td>`var(--bds-cta--subtle)`</td><td>Background colour</td></tr>
+<tr><td>`--badge_on-color`</td><td>`var(--bds-on-cta--subtle)`</td><td>Text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -3,38 +3,38 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--space_xxs) var(--space_xs);
+    padding: var(--bds-space_xxs) var(--bds-space_xs);
     border-radius: var(--badge_radius, 2em);
-    font-size: var(--badge_font-size, var(--font_size--body--s));
-    font-weight: var(--font_weight--semibold);
+    font-size: var(--badge_font-size, var(--bds-font_size--body--s));
+    font-weight: var(--bds-font_weight--semibold);
     line-height: 1;
     white-space: nowrap;
-    background-color: var(--badge_bg, var(--color_blue));
-    color: var(--badge_text, var(--color_on-blue));
+    background-color: var(--badge_bg, var(--bds-blue));
+    color: var(--badge_text, var(--bds-on-blue));
   }
 
   .--variant_primary {
-    --badge_bg:   var(--color_interactive);
-    --badge_text: var(--color_on-interactive);
+    --badge_bg:   var(--bds-interactive);
+    --badge_text: var(--bds-on-interactive);
   }
 
   .--variant_secondary {
-    --badge_bg:   var(--color_bg);
-    --badge_text: var(--color_on-bg);
+    --badge_bg:   var(--bds-bg);
+    --badge_text: var(--bds-on-bg);
   }
 
   .--variant_success {
-    --badge_bg:   var(--color_success);
-    --badge_text: var(--color_on-success);
+    --badge_bg:   var(--bds-success);
+    --badge_text: var(--bds-on-success);
   }
 
   .--variant_error {
-    --badge_bg:   var(--color_error);
-    --badge_text: var(--color_on-error);
+    --badge_bg:   var(--bds-error);
+    --badge_text: var(--bds-on-error);
   }
 
   .--variant_warning {
-    --badge_bg:   var(--color_warning);
-    --badge_text: var(--color_on-warning);
+    --badge_bg:   var(--bds-warning);
+    --badge_text: var(--bds-on-warning);
   }
 }

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

@@ -1,13 +1,13 @@
 @layer component {
   .breadcrumb {
-    font-size: var(--font_size--body--s);
+    font-size: var(--bds-font_size--body--s);
   }
 
   .list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
     list-style: none;
     margin: 0;
     padding: 0;
@@ -16,19 +16,19 @@
   .item {
     display: flex;
     align-items: center;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
 
   .link {
-    color: var(--color_interactive);
+    color: var(--bds-interactive);
     text-decoration: none;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .link: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) {
@@ -39,12 +39,12 @@
   }
 
   .separator {
-    color: var(--color_on-bg--subtle);
+    color: var(--bds-on-bg--subtle);
     user-select: none;
   }
 
   .current {
-    color: var(--color_on-bg--subtle);
-    font-weight: var(--font_weight--semibold);
+    color: var(--bds-on-bg--subtle);
+    font-weight: var(--bds-font_weight--semibold);
   }
 }

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

@@ -2,12 +2,17 @@
   .calendar {
     display: inline-flex;
     flex-direction: column;
-    gap: var(--space_s);
-    background-color: var(--color_bg);
-    border: 1px solid var(--color_bg--subtle);
-    border-radius: var(--border_radius--m);
-    padding: var(--space_m);
-    box-shadow: var(--shadow_s);
+    gap: var(--bds-space_s);
+    background-color: var(--bds-bg);
+    border: var(--calendar_border, none);
+    --bdc_color: var(--bds-bg--subtle);
+    --bdc_radius: var(--bds-border_radius--m);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--calendar_radius, var(--bdc_radius));
+    padding: var(--bds-space_m);
+    box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
     width: 20rem;
   }
 
@@ -18,9 +23,9 @@
   }
 
   .monthYear {
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
   }
 
   .navBtn {
@@ -32,8 +37,8 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--color_on-bg);
-    transition: var(--animation_transition);
+    color: var(--bds-on-bg);
+    transition: var(--bds-animation_transition);
   }
 
   .navBtn svg {
@@ -42,13 +47,13 @@
   }
 
   .navBtn:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 
@@ -59,11 +64,11 @@
   }
 
   .weekday {
-    font-size: var(--font_size--body--s);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg--muted);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
     text-align: center;
-    padding-block-end: var(--space_xs);
+    padding-block-end: var(--bds-space_xs);
   }
 
   .empty {
@@ -78,33 +83,38 @@
     width: 100%;
     aspect-ratio: 1;
     border-radius: 50%;
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
 
   .day:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .day:not(.disabled, .selected):hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 
   .today {
-    border: 2px solid var(--color_interactive);
-    font-weight: var(--font_weight--semibold);
+    font-weight: var(--bds-font_weight--semibold);
+
+    --bdc_color: var(--bds-interactive);
+
+    border: var(--calendar_today-border, none);
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
   }
 
   .selected {
-    background-color: var(--color_interactive);
-    color: var(--color_on-interactive);
-    font-weight: var(--font_weight--semibold);
+    background-color: var(--bds-interactive);
+    color: var(--bds-on-interactive);
+    font-weight: var(--bds-font_weight--semibold);
   }
 
   .disabled {

package/src/components/ui/Calendar/Calendar.tsx

@@ -3,6 +3,10 @@ import css from './Calendar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
 const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const DAY_LABELS: Record<string, string> = {
+  Su: 'Sunday', Mo: 'Monday', Tu: 'Tuesday', We: 'Wednesday',
+  Th: 'Thursday', Fr: 'Friday', Sa: 'Saturday',
+};
 const MONTHS = [
   'January', 'February', 'March', 'April', 'May', 'June',
   'July', 'August', 'September', 'October', 'November', 'December',
@@ -138,7 +142,7 @@ export function Calendar({ value, defaultValue, min, max, onChange, className }:
         <thead>
           <tr>
             {DAYS.map(d => (
-              <th key={d} scope="col" abbr={d} className={css.weekday}>
+              <th key={d} scope="col" aria-label={DAY_LABELS[d] ?? d} className={css.weekday}>
                 {d}
               </th>
             ))}
@@ -167,7 +171,7 @@ export function Calendar({ value, defaultValue, min, max, onChange, className }:
                         disabled && css.disabled,
                       )}
                       aria-label={date.toLocaleDateString('en', { month: 'long', day: 'numeric', year: 'numeric' })}
-                      aria-pressed={isSelected}
+                      aria-selected={isSelected}
                       aria-current={isToday ? 'date' : undefined}
                       aria-disabled={disabled}
                       disabled={disabled}

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

@@ -3,12 +3,12 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
 
   .track {
     display: flex;
-    gap: var(--space_m);
+    gap: var(--bds-space_m);
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
@@ -33,13 +33,18 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    background-color: var(--color_bg);
-    border: 1px solid var(--color_on-bg);
-    color: var(--color_on-bg);
+    background-color: var(--bds-bg);
+    color: var(--bds-on-bg);
+
+    --bdc_color: var(--bds-on-bg);
+
+    border: none;
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
     cursor: pointer;
     flex-shrink: 0;
-    transition: var(--animation_transition);
-    box-shadow: var(--shadow_s);
+    transition: var(--bds-animation_transition);
+    box-shadow: var(--bds-shadow_s);
   }
 
   .navBtn svg {
@@ -48,13 +53,13 @@
   }
 
   .navBtn:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 

package/src/components/ui/Carousel/Carousel.stories.tsx

@@ -15,7 +15,7 @@ const cardStyle: React.CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  background: 'var(--color_bg--subtle)',
+  background: 'var(--bds-bg--subtle)',
   borderRadius: '0.5rem',
   fontSize: '1.5rem',
   fontWeight: 600,

package/src/components/ui/Collapsible/Collapsible.mdx

@@ -41,13 +41,13 @@ Use the `name` prop to link multiple Collapsibles so only one can be open at a t
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--collapsible_border-color`</td><td>`var(--color_bg--subtle)`</td><td>Border and separator colour</td></tr>
+<tr><td>`--collapsible_border-color`</td><td>`var(--bds-bg--subtle)`</td><td>Border and separator colour</td></tr>
 <tr><td>`--collapsible_border-width`</td><td>`1px`</td><td>Border and separator width</td></tr>
-<tr><td>`--collapsible_border-radius`</td><td>`var(--border_radius--m)`</td><td>Corner radius</td></tr>
-<tr><td>`--collapsible_bg`</td><td>`var(--color_bg)`</td><td>Summary background</td></tr>
-<tr><td>`--collapsible_bg--hover`</td><td>`var(--color_bg--subtle)`</td><td>Summary background on hover</td></tr>
-<tr><td>`--collapsible_color`</td><td>`var(--color_on-bg)`</td><td>Summary text colour</td></tr>
-<tr><td>`--collapsible_on-color`</td><td>`var(--color_on-bg)`</td><td>Content text colour</td></tr>
+<tr><td>`--collapsible_border-radius`</td><td>`var(--bds-border_radius--m)`</td><td>Corner radius</td></tr>
+<tr><td>`--collapsible_bg`</td><td>`var(--bds-bg)`</td><td>Summary background</td></tr>
+<tr><td>`--collapsible_bg--hover`</td><td>`var(--bds-bg--subtle)`</td><td>Summary background on hover</td></tr>
+<tr><td>`--collapsible_color`</td><td>`var(--bds-on-bg)`</td><td>Summary text colour</td></tr>
+<tr><td>`--collapsible_on-color`</td><td>`var(--bds-on-bg)`</td><td>Content text colour</td></tr>
 </tbody>
 </table>