@boostdev/design-system-components 1.2.5 → 1.2.7

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

@@ -6,7 +6,7 @@ const meta = {
   component: Card,
   argTypes: {
     variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
-    padding: { control: 'select', options: ['none', 'small', 'medium', 'large'] },
+    padding: { control: 'select', options: ['none', 'small', 'medium', 'large', 'extra-large'] },
     textAlign: { control: 'select', options: ['start', 'center', 'end'] },
   },
 } satisfies Meta<typeof Card>;
@@ -18,6 +18,8 @@ export const Default: Story = { args: { children: 'Card content', variant: 'defa
 export const Elevated: Story = { args: { children: 'Elevated card', variant: 'elevated' } };
 export const Outlined: Story = { args: { children: 'Outlined card', variant: 'outlined' } };
 export const Clickable: Story = { args: { children: 'Click me', onClick: () => alert('clicked') } };
+export const AsLink: Story = { args: { children: 'Card as link', as: 'a', href: '#' } as Record<string, unknown> };
+export const AsSection: Story = { args: { children: 'Card as section', as: 'section' } as Record<string, unknown> };
 export const Centered: Story = { args: { children: 'Centered', textAlign: 'center' } };
 export const AllVariants: Story = {
   args: { children: '' },

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

@@ -1,23 +1,27 @@
-import { HTMLAttributes } from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
 import css from './Card.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface CardProps extends WithClassName, HTMLAttributes<HTMLElement> {
+type CardOwnProps = WithClassName & {
   variant?: 'default' | 'elevated' | 'outlined';
-  padding?: 'none' | 'small' | 'medium' | 'large';
+  padding?: 'none' | 'small' | 'medium' | 'large' | 'extra-large';
   textAlign?: 'start' | 'center' | 'end';
-}
+  as?: ElementType;
+};
+
+type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
 
-export function Card({
+export function Card<C extends ElementType = 'div'>({
   children,
   className,
   variant = 'default',
   padding = 'medium',
   textAlign = 'start',
+  as,
   onClick,
   ...rest
-}: CardProps) {
+}: CardProps<C>) {
   const classNames = cn(
     css.card,
     css[`--${variant}`],
@@ -27,14 +31,14 @@ export function Card({
     className,
   );
 
-  const Component = onClick ? 'button' : 'div';
+  const Component = as ?? (onClick ? 'button' : 'div');
 
   return (
     <Component
       {...rest}
       className={classNames}
       onClick={onClick}
-      {...(onClick && { type: 'button' as const })}
+      {...(!as && onClick && { type: 'button' as const })}
     >
       {children}
     </Component>

package/src/components/layout/SectionHeader/SectionHeader.mdx

@@ -19,12 +19,15 @@ Heading block with optional subtitle for introducing a content section.
 ### Without subtitle
 <Canvas of={Stories.WithoutSubtitle} />
 
-### Large
-<Canvas of={Stories.Large} />
+### Extra Small
+<Canvas of={Stories.ExtraSmall} />
 
 ### Small
 <Canvas of={Stories.Small} />
 
+### Large
+<Canvas of={Stories.Large} />
+
 ### Centered
 <Canvas of={Stories.Centered} />
 
@@ -40,7 +43,12 @@ Heading block with optional subtitle for introducing a content section.
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
+<tr><td>`--sectionHeader-title-color`</td><td>`var(--bds-color_on-bg)`</td><td>Title text colour</td></tr>
+<tr><td>`--sectionHeader_title-size`</td><td>varies by `size` prop</td><td>Title font-size (overrides the variant default)</td></tr>
+<tr><td>`--sectionHeader_title-line-height`</td><td>varies by `size` prop</td><td>Title line-height</td></tr>
+<tr><td>`--sectionHeader_title-weight`</td><td>`var(--bds-font_weight--bold)`</td><td>Title font-weight</td></tr>
 <tr><td>`--sectionHeader_subtitle-color`</td><td>`var(--bds-color_grey--strong)`</td><td>Subtitle text colour</td></tr>
+<tr><td>`--sectionHeader_subtitle-size`</td><td>varies by `size` prop</td><td>Subtitle font-size</td></tr>
 </tbody>
 </table>
 

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

@@ -34,37 +34,49 @@
     text-align: end;
   }
 
-  .sectionHeader.--small .title {
-    font-size: var(--bds-font_size--heading-1);
-    line-height: var(--bds-font_line-height--heading);
-    font-weight: var(--bds-font_weight--bold);
+  /* medium first — default size, so MCP extraction picks up its fallbacks */
+  .sectionHeader.--medium .title {
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
+    line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
   }
 
-  .sectionHeader.--small .subtitle {
-    font-size: var(--bds-font_size--body);
+  .sectionHeader.--medium .subtitle {
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
+    line-height: 1.3;
+  }
+
+  .sectionHeader.--xs .title {
+    font-size: var(--sectionHeader_title-size, 1.5em);
+    line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
+  }
+
+  .sectionHeader.--xs .subtitle {
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
     line-height: 1.4;
   }
 
-  .sectionHeader.--medium .title {
-    font-size: var(--bds-font_size--display);
-    line-height: var(--bds-font_line-height--display);
-    font-weight: var(--bds-font_weight--bold);
+  .sectionHeader.--small .title {
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
+    line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
   }
 
-  .sectionHeader.--medium .subtitle {
-    font-size: var(--bds-font_size--heading-3);
-    line-height: 1.3;
+  .sectionHeader.--small .subtitle {
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
+    line-height: 1.4;
   }
 
   .sectionHeader.--large .title {
-    font-size: var(--bds-font_size--display);
-    line-height: var(--bds-font_line-height--display);
-    font-weight: var(--bds-font_weight--bold);
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
+    line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
     letter-spacing: var(--bds-font_tracking--tight);
   }
 
   .sectionHeader.--large .subtitle {
-    font-size: var(--bds-font_size--heading-2);
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
     line-height: 1.3;
     font-weight: var(--bds-font_weight--medium);
   }

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

@@ -28,4 +28,9 @@ describe('SectionHeader', () => {
     const { container } = render(<SectionHeader title="Title" className="custom" />);
     expect(container.firstChild).toHaveClass('custom');
   });
+
+  it('renders the xs size variant', () => {
+    const { container } = render(<SectionHeader title="XS Title" size="xs" />);
+    expect(container.firstChild).toHaveClass('--xs');
+  });
 });

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

@@ -6,7 +6,7 @@ const meta = {
   component: SectionHeader,
   argTypes: {
     alignment: { control: 'select', options: ['start', 'center', 'end'] },
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    size: { control: 'select', options: ['xs', 'small', 'medium', 'large'] },
   },
 } satisfies Meta<typeof SectionHeader>;
 
@@ -16,5 +16,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = { args: { title: 'Section Title', subtitle: 'A descriptive subtitle.' } };
 export const WithoutSubtitle: Story = { args: { title: 'Title Only' } };
 export const Centered: Story = { args: { title: 'Centered Title', subtitle: 'Centered subtitle.', alignment: 'center' } };
+export const ExtraSmall: Story = { args: { title: 'Extra Small Header', subtitle: 'Extra small size.', size: 'xs' } };
 export const Small: Story = { args: { title: 'Small Header', subtitle: 'Small size.', size: 'small' } };
 export const Large: Story = { args: { title: 'Large Header', subtitle: 'Large size.', size: 'large' } };

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

@@ -9,7 +9,7 @@ type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, '
   title: string;
   subtitle?: string;
   alignment?: 'start' | 'center' | 'end';
-  size?: 'small' | 'medium' | 'large';
+  size?: 'xs' | 'small' | 'medium' | 'large';
   titleAs?: IntrinsicElement;
 };
 

package/src/components/ui/Accordion/Accordion.mdx

@@ -43,6 +43,7 @@ Vertically stacked sections that can be expanded and collapsed independently.
 <tbody>
 <tr><td>`--accordion_border`</td><td>`none`</td><td>Container border</td></tr>
 <tr><td>`--accordion_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+<tr><td>`--accordion_trigger-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Trigger button background on hover</td></tr>
 </tbody>
 </table>
 

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

@@ -52,7 +52,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .trigger:not(:disabled):hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 

package/src/components/ui/Alert/Alert.mdx

@@ -47,11 +47,14 @@ Inline contextual feedback message. Use for confirmations, warnings, errors, and
 
 <table>
 <thead>
-<tr><th>Variable</th><th>Description</th></tr>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--alert_color`</td><td>Background colour (defaults to variant semantic token)</td></tr>
-<tr><td>`--alert_on-color`</td><td>Text and icon colour</td></tr>
+<tr><td>`--alert_color`</td><td>Per variant</td><td>Background colour (defaults to variant semantic token)</td></tr>
+<tr><td>`--alert_on-color`</td><td>Per variant</td><td>Text and icon colour</td></tr>
+<tr><td>`--alert_dismiss-border`</td><td>`none`</td><td>Dismiss button border</td></tr>
+<tr><td>`--alert_dismiss-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Dismiss button border radius</td></tr>
+<tr><td>`--alert_dismiss-opacity--hover`</td><td>`0.7`</td><td>Dismiss button opacity on hover</td></tr>
 </tbody>
 </table>
 

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

@@ -84,7 +84,7 @@
 
     @media (hover: hover) and (pointer: fine) {
         .dismiss:hover {
-            opacity: 0.7;
+            opacity: var(--alert_dismiss-opacity--hover, 0.7);
         }
     }
 }

package/src/components/ui/Calendar/Calendar.mdx

@@ -38,6 +38,11 @@ Date picker calendar grid. Use standalone or as the popover content inside a dat
 <tr><td>`--calendar_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
 <tr><td>`--calendar_shadow`</td><td>`var(--bds-shadow_s)`</td><td>Container box shadow</td></tr>
 <tr><td>`--calendar_today-border`</td><td>`none`</td><td>Border on today's date cell</td></tr>
+<tr><td>`--calendar_navBtn-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Month navigation button background on hover</td></tr>
+<tr><td>`--calendar_day-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Day cell background on hover</td></tr>
+<tr><td>`--calendar_today-color`</td><td>`var(--bds-color_interactive)`</td><td>Today's date text colour</td></tr>
+<tr><td>`--calendar_day-bg--selected`</td><td>`var(--bds-color_interactive)`</td><td>Selected day background</td></tr>
+<tr><td>`--calendar_day-color--selected`</td><td>`var(--bds-color_on-interactive)`</td><td>Selected day text colour</td></tr>
 </tbody>
 </table>
 

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

@@ -51,7 +51,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
@@ -95,22 +95,22 @@
 
   @media (hover: hover) and (pointer: fine) {
     .day:not(.disabled, .selected):hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
   .today {
     font-weight: var(--bds-font_weight--semibold);
 
-    --bdc_color: var(--bds-color_interactive);
+    --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
 
     border: var(--calendar_today-border, none);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .selected {
-    background-color: var(--bds-color_interactive);
-    color: var(--bds-color_on-interactive);
+    background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
+    color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
     font-weight: var(--bds-font_weight--semibold);
   }
 

package/src/components/ui/Carousel/Carousel.mdx

@@ -24,6 +24,20 @@ Horizontally scrollable slide container with previous/next navigation.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--carousel_indicator-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Navigation button border radius</td></tr>
+<tr><td>`--carousel_navBtn-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Navigation button background on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Prev/next buttons have `aria-label="Previous"` / `"Next"`

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

@@ -57,7 +57,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .navBtn:hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 

package/src/components/ui/NotificationBanner/NotificationBanner.mdx

@@ -39,6 +39,24 @@ Full-width banner for page-level system messages. Sits at the top of the page or
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--banner_bg`</td><td>Per variant</td><td>Banner background colour</td></tr>
+<tr><td>`--banner_text`</td><td>Per variant</td><td>Banner text colour</td></tr>
+<tr><td>`--banner_border`</td><td>Per variant</td><td>Banner bottom border colour</td></tr>
+<tr><td>`--banner_dismiss-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Dismiss button border radius</td></tr>
+<tr><td>`--banner_dismiss-border`</td><td>`none`</td><td>Dismiss button border</td></tr>
+<tr><td>`--banner_dismiss-opacity--hover`</td><td>`0.7`</td><td>Dismiss button opacity on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Uses `role="alert"` for error/warning variants and `role="status"` for info/success

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

@@ -72,7 +72,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .dismiss:hover {
-      opacity: 0.7;
+      opacity: var(--banner_dismiss-opacity--hover, 0.7);
     }
   }
 }

package/src/components/ui/Pagination/Pagination.mdx

@@ -32,6 +32,27 @@ Navigation control for paged data sets. Renders prev/next buttons plus numbered
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--pagination_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Page button border radius</td></tr>
+<tr><td>`--btn_bg`</td><td>`transparent`</td><td>Default button background</td></tr>
+<tr><td>`--btn_color`</td><td>`var(--bds-color_on-bg)`</td><td>Default button text colour</td></tr>
+<tr><td>`--btn_border`</td><td>`var(--bds-color_bg--subtle)`</td><td>Default button border colour</td></tr>
+<tr><td>`--btn_bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Button background on hover</td></tr>
+<tr><td>`--btn_color--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Button text colour on hover</td></tr>
+<tr><td>`--btn_bg--active`</td><td>`var(--bds-color_interactive)`</td><td>Active (current page) button background</td></tr>
+<tr><td>`--btn_color--active`</td><td>`var(--bds-color_on-interactive)`</td><td>Active (current page) button text colour</td></tr>
+<tr><td>`--btn_border--active`</td><td>`var(--bds-color_interactive)`</td><td>Active (current page) button border colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Wraps in `<nav aria-label="Pagination">`

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

@@ -53,15 +53,15 @@
 
   @media (hover: hover) and (pointer: fine) {
     .button:not(:disabled, .--active):hover {
-      --btn_bg:    var(--bds-color_bg--subtle);
-      --btn_color: var(--bds-color_interactive_on-bg);
+      --btn_bg:    var(--btn_bg--hover, var(--bds-color_bg--subtle));
+      --btn_color: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
     }
   }
 
   .button.--active {
-    --btn_bg:     var(--bds-color_interactive);
-    --btn_color:  var(--bds-color_on-interactive);
-    --btn_border: var(--bds-color_interactive);
+    --btn_bg:     var(--btn_bg--active, var(--bds-color_interactive));
+    --btn_color:  var(--btn_color--active, var(--bds-color_on-interactive));
+    --btn_border: var(--btn_border--active, var(--bds-color_interactive));
   }
 
   .button.--nav svg {

package/src/components/ui/Table/Table.mdx

@@ -40,6 +40,8 @@ Data table with optional sortable columns and caption.
 <tbody>
 <tr><td>`--table_border`</td><td>`none`</td><td>Container border</td></tr>
 <tr><td>`--table_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Container corner radius</td></tr>
+<tr><td>`--table_sortBtn-color--hover`</td><td>`var(--bds-color_on-bg)`</td><td>Sort button text colour on hover</td></tr>
+<tr><td>`--table_row-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Table row background on hover</td></tr>
 </tbody>
 </table>
 

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

@@ -65,7 +65,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .sortButton:hover {
-      color: var(--bds-color_on-bg);
+      color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
     }
   }
 
@@ -97,7 +97,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tbody .tr:hover {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 

package/src/components/ui/Tabs/Tabs.mdx

@@ -33,6 +33,23 @@ Organises content into discrete panels accessible via a horizontal tab list.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--tab_color`</td><td>`var(--bds-color_on-bg)`</td><td>Default tab text colour</td></tr>
+<tr><td>`--tab_border-color`</td><td>`transparent`</td><td>Default tab bottom border colour</td></tr>
+<tr><td>`--tab_color--active`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Active tab text colour</td></tr>
+<tr><td>`--tab_border-color--active`</td><td>`var(--bds-color_interactive)`</td><td>Active tab bottom border colour</td></tr>
+<tr><td>`--tab_color--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Tab text colour on hover</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Implements ARIA tabs pattern: `role="tablist"`, `role="tab"`, `role="tabpanel"`

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

@@ -26,8 +26,8 @@
   }
 
   .tab.--active {
-    --tab_color:        var(--bds-color_interactive_on-bg);
-    --tab_border-color: var(--bds-color_interactive);
+    --tab_color:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+    --tab_border-color: var(--tab_border-color--active, var(--bds-color_interactive));
   }
 
   .tab:disabled {
@@ -43,7 +43,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tab:not(:disabled, .--active):hover {
-      --tab_color: var(--bds-color_interactive_on-bg);
+      --tab_color: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
     }
   }
 

package/src/css/bdc.css

@@ -68,6 +68,7 @@
     --bdc-outline_width:  1px;
     --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
     --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius--l: 1.5em;
 
     /* Shadow: opt-in; transparent (not 'none') so it's valid in a comma-separated box-shadow list */
     --bdc-outline_shadow: 0 0 0 0 transparent;