@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -1,16 +1,19 @@
 @layer boostdev.component {
+  /* --icon-wrapper-radius / --icon-wrapper-color (hyphen-delimited) are deprecated
+     aliases for --icon-wrapper_radius / --icon-wrapper_color, kept working for one major. */
   .wrapper {
     inline-size: 2em;
     block-size: 2em;
-    font-size: 3em;
-    border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
+    font-size: var(--icon-wrapper_size, 3em);
+    border-radius: var(--icon-wrapper_radius, var(--icon-wrapper-radius, var(--bds-border_radius--circle)));
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: var(--bds-space_l) auto var(--bds-space_m);
-    background: var(--icon-wrapper-color, var(--bds-color_bg));
-    color: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
-    fill: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
+    margin-block: var(--icon-wrapper_margin-block-start, var(--bds-space_l)) var(--icon-wrapper_margin-block-end, var(--bds-space_m));
+    margin-inline: auto;
+    background: var(--icon-wrapper_color, var(--icon-wrapper-color, var(--bds-color_bg)));
+    color: var(--icon-wrapper_on-color, var(--bds-color_on-bg));
+    fill: var(--icon-wrapper_on-color, var(--bds-color_on-bg));
     position: relative;
     transition: var(--bds-animation_transition);
   }

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

@@ -43,15 +43,18 @@ 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-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>
+<tr><td>`--sectionHeader_subtitle-line-height`</td><td>`1.4` (`xs`/`small`), `1.3` (`medium`/`large`)</td><td>Subtitle line-height</td></tr>
+<tr><td>`--sectionHeader_gap`</td><td>`var(--bds-space_m)`</td><td>Gap between title and subtitle</td></tr>
 </tbody>
 </table>
 
+> `--sectionHeader-title-color` (hyphen-delimited) is a deprecated alias for `--sectionHeader_title-color` — still supported, but new code should use the underscore-delimited name.
 
 ## Accessibility
 

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

@@ -2,12 +2,13 @@
   .sectionHeader {
     display: flex;
     flex-direction: column;
-    gap: var(--bds-space_m);
+    gap: var(--sectionHeader_gap, var(--bds-space_m));
     grid-column: var(--bds-grid_span-100);
   }
 
   .title {
-    color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
+    /* --sectionHeader-title-color (kebab delimiter) is deprecated — use --sectionHeader_title-color */
+    color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
     margin: 0;
     font-family: var(--bds-font_family--body);
   }
@@ -36,25 +37,25 @@
 
   /* 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-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(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
-    line-height: 1.3;
+    line-height: var(--sectionHeader_subtitle-line-height, 1.3);
   }
 
   .sectionHeader.--xs .title {
-    font-size: var(--sectionHeader_title-size, 1.5em);
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
     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;
+    line-height: var(--sectionHeader_subtitle-line-height, 1.4);
   }
 
   .sectionHeader.--small .title {
@@ -65,7 +66,7 @@
 
   .sectionHeader.--small .subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
-    line-height: 1.4;
+    line-height: var(--sectionHeader_subtitle-line-height, 1.4);
   }
 
   .sectionHeader.--large .title {
@@ -77,7 +78,7 @@
 
   .sectionHeader.--large .subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
-    line-height: 1.3;
+    line-height: var(--sectionHeader_subtitle-line-height, 1.3);
     font-weight: var(--bds-font_weight--medium);
   }
 }

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

@@ -31,6 +31,8 @@ Vertically stacked sections that can be expanded and collapsed independently.
 
 ## Props
 
+> **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
+
 <ArgTypes of={Stories} />
 
 ## CSS variables
@@ -43,6 +45,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_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Container box-shadow tail (layered after the frame border)</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>
@@ -52,4 +55,4 @@ Vertically stacked sections that can be expanded and collapsed independently.
 
 - Implements ARIA disclosure pattern: trigger buttons use `aria-expanded` and `aria-controls`
 - Content panels use `role="region"` with `aria-labelledby`
-- Disabled items have `aria-disabled="true"` and are excluded from keyboard focus
+- Disabled items use the native `disabled` attribute, which conveys the state to assistive technology and removes the trigger from the tab order

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

@@ -7,7 +7,8 @@
     --bdc-outline_radius: var(--bds-border_radius--s);
 
     border-radius: var(--accordion_radius, var(--bdc-outline_radius));
-    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+      var(--accordion_shadow, var(--bdc-outline_shadow));
     overflow: hidden;
   }
 

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

@@ -40,6 +40,8 @@ Inline contextual feedback message. Use for confirmations, warnings, errors, and
 
 ## Props
 
+> **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
+
 <ArgTypes of={Stories} />
 
 ## CSS variables
@@ -70,9 +72,12 @@ The override surface is **layered**. Setting a public token on the alert (or any
 <tr><td>`--alert_bg`</td><td>per variant</td><td>Background colour. Set this to theme every variant at once.</td></tr>
 <tr><td>`--alert_text`</td><td>per variant</td><td>Text and icon colour.</td></tr>
 <tr><td>`--alert_border`</td><td>per variant</td><td>Inline-start border (the coloured strip).</td></tr>
+<tr><td>`--alert_radius`</td><td>`var(--bds-border_radius--s)`</td><td>Root border radius.</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-shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Dismiss button box-shadow tail (appended after the bdc inset border).</td></tr>
 <tr><td>`--alert_dismiss-opacity--hover`</td><td>`0.7`</td><td>Dismiss button opacity on hover.</td></tr>
+<tr><td>`--alert_dismiss-size`</td><td>`2.75rem`</td><td>Dismiss button minimum hit area (44x44px, WCAG 2.5.5). The 1rem icon stays centered inside it.</td></tr>
 </tbody>
 </table>
 
@@ -90,11 +95,23 @@ The override surface is **layered**. Setting a public token on the alert (or any
 </tbody>
 </table>
 
-Defaults resolve to the corresponding `--bds-color_{variant}--subtle` / `--bds-color_on-{variant}--subtle` / `--bds-color_{variant}` foundation tokens.
+Each variant's actual default resolution:
+
+<table>
+<thead>
+<tr><th>Variant</th><th>Background default</th><th>Text default</th><th>Border default</th></tr>
+</thead>
+<tbody>
+<tr><td>`info`</td><td>`--bds-color_blue--subtle`</td><td>`--bds-color_on-blue--subtle`</td><td>`--bds-color_blue`</td></tr>
+<tr><td>`success`</td><td>`--bds-color_success--subtle`</td><td>`--bds-color_on-success--subtle`</td><td>`--bds-color_success`</td></tr>
+<tr><td>`warning`</td><td>`--bds-color_orange--subtle`</td><td>`--bds-color_on-orange--subtle`</td><td>`--bds-color_warning`</td></tr>
+<tr><td>`error`</td><td>relative-colour mix of `--bds-color_error` (12% alpha)</td><td>`--bds-color_on-bg`</td><td>`--bds-color_error`</td></tr>
+</tbody>
+</table>
 
 
 ## Accessibility
 
-- Uses `role="alert"` to announce content to screen readers immediately on mount
-- `onDismiss` close button has `aria-label="Dismiss"` — ensure the label is meaningful in context
-- Colour alone is not used to convey meaning: each variant includes an icon
+- Uses `role="alert"`/`aria-live="assertive"` for the `error` and `warning` variants, and `role="status"`/`aria-live="polite"` for `info` and `success`
+- `onDismiss` close button has `aria-label="Dismiss alert"`
+- Colour alone is not used to convey meaning — pass the `icon` prop so each variant has a non-colour indicator too (icons are optional and do not render on their own)

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

@@ -4,7 +4,7 @@
         align-items: flex-start;
         gap: var(--bds-space_s);
         padding: var(--bds-space_m);
-        border-radius: var(--bds-border_radius--s);
+        border-radius: var(--alert_radius, var(--bds-border_radius--s));
 
         /* Layered cascade: public overrides (--alert_bg, --alert_text, --alert_border)
            are read OUTERMOST so an ancestor-set value always wins over variant
@@ -74,13 +74,18 @@
         border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
         --bdc_color: currentcolor;
 
-        box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+        /* WCAG 2.5.5: minimum 44x44px interactive area — the visible icon stays
+           1rem; the hit area grows around it via min-inline-size/min-block-size. */
+        min-inline-size: var(--alert_dismiss-size, 2.75rem);
+        min-block-size: var(--alert_dismiss-size, 2.75rem);
+        box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+                    var(--alert_dismiss-shadow, var(--bdc-outline_shadow));
 
     }
 
     .dismiss svg {
-        width: 1rem;
-        height: 1rem;
+        inline-size: 1rem;
+        block-size: 1rem;
     }
 
     .dismiss:focus-visible {

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

@@ -1,7 +1,14 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Alert } from './Alert';
 
+const cssSource = readFileSync(
+  resolve(process.cwd(), 'src/components/ui/Alert/Alert.module.css'),
+  'utf8',
+);
+
 describe('Alert', () => {
   it('renders children', () => {
     render(<Alert>Something went wrong</Alert>);
@@ -60,4 +67,17 @@ describe('Alert', () => {
     render(<Alert className="custom">Message</Alert>);
     expect(screen.getByRole('status')).toHaveClass('custom');
   });
+
+  it('gives the dismiss button a 44x44px minimum hit area (WCAG 2.5.5)', () => {
+    // jsdom has no layout engine, so this can't be asserted via
+    // getBoundingClientRect(); pin the contract in the CSS source instead
+    // (same approach as NotificationBanner.spec.tsx). The visible icon (1rem)
+    // can stay small — only the interactive hit area must reach 44px (2.75rem).
+    const dismissRuleMatch = cssSource.match(/\.dismiss\s*{[^}]*}/);
+    expect(dismissRuleMatch).not.toBeNull();
+    const dismissRule = dismissRuleMatch?.[0] ?? '';
+
+    expect(dismissRule).toMatch(/min-inline-size:\s*var\(--alert_dismiss-size,\s*2\.75rem\)/);
+    expect(dismissRule).toMatch(/min-block-size:\s*var\(--alert_dismiss-size,\s*2\.75rem\)/);
+  });
 });

package/src/components/ui/Avatar/Avatar.mdx

@@ -30,18 +30,23 @@ Circular user representation. Displays a profile image when available, falling b
 
 ## Props
 
+> **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
+
 <ArgTypes of={Stories} />
 
 ## CSS variables
 
+The override surface is **layered** — `--avatar_size` wins over the per-`size`-prop default, so you can theme one avatar or every avatar under an ancestor selector.
 
 <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>`--avatar_color`</td><td>Background colour for initials fallback</td></tr>
-<tr><td>`--avatar_on-color`</td><td>Text colour for initials</td></tr>
+<tr><td>`--avatar_size`</td><td>per `size` (`2em` / `3em` / `4.5em`)</td><td>Avatar diameter. Set on the avatar or an ancestor to override the `size` prop's default.</td></tr>
+<tr><td>`--avatar_radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Avatar corner radius</td></tr>
+<tr><td>`--avatar_bg`</td><td>`var(--bds-color_blue)`</td><td>Background colour for the initials fallback</td></tr>
+<tr><td>`--avatar_text`</td><td>`var(--bds-color_on-blue)`</td><td>Text colour for the initials</td></tr>
 </tbody>
 </table>
 

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

@@ -3,11 +3,16 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--avatar_size, 3em);
-    height: var(--avatar_size, 3em);
+    flex-shrink: 0;
+
+    /* Layered cascade: public override (--avatar_size) wins over the
+       per-size-variant default. Size classes write to the inner
+       --avatar_size--variant slot only, so an ancestor setting
+       --avatar_size still cascades correctly. */
+    inline-size: var(--avatar_size, var(--avatar_size--variant, 3em));
+    block-size: var(--avatar_size, var(--avatar_size--variant, 3em));
     border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
     overflow: hidden;
-    flex-shrink: 0;
   }
 
   .avatar.--fallback {
@@ -16,13 +21,13 @@
     font-weight: var(--bds-font_weight--semibold);
   }
 
-  .avatar.--size_small  { --avatar_size: 2em; }
-  .avatar.--size_medium { --avatar_size: 3em; }
-  .avatar.--size_large  { --avatar_size: 4.5em; }
+  .avatar.--size_small  { --avatar_size--variant: 2em; }
+  .avatar.--size_medium { --avatar_size--variant: 3em; }
+  .avatar.--size_large  { --avatar_size--variant: 4.5em; }
 
   .image {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     object-fit: cover;
     display: block;
   }

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

@@ -38,6 +38,8 @@ Compact inline label for status, category, or count. Renders a `<span>` with a s
 
 ## Props
 
+> **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
+
 <ArgTypes of={Stories} />
 
 ## CSS variables
@@ -73,7 +75,7 @@ The override surface is **layered**. Setting a public token on the badge (or any
 </tbody>
 </table>
 
-Defaults resolve to the corresponding `--bds-color_{variant}` / `--bds-color_on-{variant}` foundation tokens.
+Defaults resolve to foundation tokens per variant: `success`/`error`/`warning` map directly to `--bds-color_{variant}` / `--bds-color_on-{variant}`. `primary` maps to `--bds-color_interactive` / `--bds-color_on-interactive`, and `secondary` maps to `--bds-color_bg` / `--bds-color_on-bg` — neither follows the generic `{variant}` naming.
 
 
 ## Accessibility

package/src/components/ui/Breadcrumb/Breadcrumb.mdx

@@ -27,6 +27,8 @@ Hierarchical navigation trail showing the user's location within the site struct
 
 ## Props
 
+> **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
+
 <ArgTypes of={Stories} />
 
 ## Accessibility
@@ -34,3 +36,4 @@ Hierarchical navigation trail showing the user's location within the site struct
 - Wraps in `<nav aria-label="Breadcrumb">`
 - The current page item has `aria-current="page"`
 - Separator glyphs are `aria-hidden="true"`
+- Non-last items without an `href` render as non-interactive text rather than an unusable link (an `<a>` without `href` is not focusable and isn't exposed to assistive tech with the link role)

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

@@ -43,6 +43,10 @@
     user-select: none;
   }
 
+  .text {
+    color: var(--bds-color_on-bg--subtle);
+  }
+
   .current {
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);

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

@@ -37,6 +37,18 @@ describe('Breadcrumb', () => {
     expect(screen.getByText('Home')).toHaveAttribute('aria-current', 'page');
   });
 
+  it('renders a non-last item without href as non-interactive text, not a link', () => {
+    render(
+      <Breadcrumb
+        items={[{ label: 'Home', href: '/' }, { label: 'Products' }, { label: 'Shoes' }]}
+      />
+    );
+    expect(screen.queryByRole('link', { name: 'Products' })).not.toBeInTheDocument();
+    const products = screen.getByText('Products');
+    expect(products.tagName).toBe('SPAN');
+    expect(products).not.toHaveAttribute('aria-current');
+  });
+
   it('accepts a custom className', () => {
     render(<Breadcrumb items={items} className="custom" />);
     expect(screen.getByRole('navigation')).toHaveClass('custom');

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -5,6 +5,10 @@ import type { WithClassName } from '../../../types';
 
 export interface BreadcrumbItem {
   label: string;
+  /**
+   * Destination URL. Optional even for non-last items: an item without
+   * `href` renders as non-interactive text instead of an unusable link.
+   */
   href?: string;
 }
 
@@ -27,9 +31,13 @@ export function Breadcrumb({ items, className, ...rest }: Readonly<BreadcrumbPro
                 </span>
               ) : (
                 <>
-                  <a href={item.href} className={css.link}>
-                    {item.label}
-                  </a>
+                  {item.href ? (
+                    <a href={item.href} className={css.link}>
+                      {item.label}
+                    </a>
+                  ) : (
+                    <span className={css.text}>{item.label}</span>
+                  )}
                   <span className={css.separator} aria-hidden="true">›</span>
                 </>
               )}

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

@@ -24,6 +24,8 @@ Date picker calendar grid. Use standalone or as the popover content inside a dat
 
 ## Props
 
+> **HTML attributes** — all standard HTML attributes for the root element are forwarded via `{...rest}` (`id`, `className`, `style`, `data-*`, `aria-*`, event handlers, etc.). Component-controlled attributes take precedence.
+
 <ArgTypes of={Stories} />
 
 ## CSS variables
@@ -37,12 +39,16 @@ Date picker calendar grid. Use standalone or as the popover content inside a dat
 <tr><td>`--calendar_border`</td><td>`none`</td><td>Container border</td></tr>
 <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_size`</td><td>`17rem`</td><td>Container inline-size (capped at 100% of its parent)</td></tr>
+<tr><td>`--calendar_button-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Nav and day button border radius</td></tr>
 <tr><td>`--calendar_today-border`</td><td>`none`</td><td>Border on today's date cell</td></tr>
+<tr><td>`--calendar_today-shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Shadow tail appended after today's ring outline</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>
+<tr><td>`--calendar_day-bg--in-range`</td><td>`var(--bds-color_blue--subtle)`</td><td>Background of days between the range endpoints</td></tr>
 </tbody>
 </table>
 

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

@@ -1,8 +1,8 @@
 @layer boostdev.component {
   .calendar {
-    display: inline-flex;
-    flex-direction: column;
-    gap: var(--bds-space_s);
+    display: inline-block;
+    inline-size: fit-content;
+    max-inline-size: 100%;
     background-color: var(--bds-color_bg);
     border: var(--calendar_border, none);
     --bdc_color: var(--bds-color_bg--subtle);
@@ -11,13 +11,34 @@
     border-radius: var(--calendar_radius, var(--bdc-outline_radius));
     padding: var(--bds-space_m);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
-    inline-size: 20rem;
   }
 
-  .header {
+  .months {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--bds-space_l);
+  }
+
+  .month {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_s);
+    inline-size: var(--calendar_size, 17rem);
+    max-inline-size: 100%;
+  }
+
+  .monthHeader {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--bds-space_xs);
+  }
+
+  .navSlot {
+    display: inline-flex;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    flex: none;
   }
 
   .monthYear {
@@ -31,8 +52,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: 2rem;
-    block-size: 2rem;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
     border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
     cursor: pointer;
     color: var(--bds-color_on-bg);
@@ -56,36 +77,46 @@
   }
 
   .grid {
-    border-collapse: collapse;
-    inline-size: 100%;
-    table-layout: fixed;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--bds-space_xxxs);
+  }
+
+  /* Rows exist only for the ARIA grid > row > gridcell hierarchy; they must not
+     participate in the CSS grid layout, so their cells are promoted. */
+  .row {
+    display: contents;
   }
 
   .weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: 2rem;
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-color_on-bg);
-    text-align: center;
-    padding-block-end: var(--bds-space_xs);
+    color: var(--bds-color_on-bg--subtle);
+    user-select: none;
   }
 
-  .empty {
-    padding: 0;
+  .cell {
+    display: flex;
+    aspect-ratio: 1;
   }
 
   .day {
     all: unset;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
     inline-size: 100%;
-    aspect-ratio: 1;
+    block-size: 100%;
     border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     cursor: pointer;
     transition: var(--bds-animation_transition);
-    box-sizing: border-box;
   }
 
   .day:focus-visible {
@@ -94,18 +125,24 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .day:not(.disabled, .selected):hover {
+    .day:not(.disabled, .selected, .rangeStart, .rangeEnd):hover {
       background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
     }
   }
 
+  .outside {
+    color: var(--bds-color_on-bg--subtle);
+    opacity: 0.4;
+  }
+
   .today {
     font-weight: var(--bds-font_weight--semibold);
 
     --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);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+      var(--calendar_today-shadow, var(--bdc-outline_shadow));
   }
 
   .selected {
@@ -114,6 +151,18 @@
     font-weight: var(--bds-font_weight--semibold);
   }
 
+  .inRange {
+    background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle));
+    border-radius: 0;
+  }
+
+  .rangeStart,
+  .rangeEnd {
+    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);
+  }
+
   .disabled {
     opacity: 0.35;
     cursor: not-allowed;