@boostdev/design-system-components 2.5.0 → 2.6.0

package/dist/web-components/chunk-QWPACK5L.js

@@ -0,0 +1,72 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-badge.ts
+var BdsBadge = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--bds-space_xxs) var(--bds-space_xs);
+      border-radius: var(--badge_radius, 2em);
+      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;
+      /* Layered cascade: public overrides (--badge_bg, --badge_text) win over
+         per-variant defaults. Variants write to the inner --badge_*--variant slot. */
+      background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
+      color:            var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
+    }
+
+    /* Per-variant resting overrides — consumers can theme per-variant via
+       --badge_bg--primary / --badge_bg--success / ... */
+    :host([variant='primary']) .badge {
+      --badge_bg--variant:   var(--badge_bg--primary, var(--bds-color_interactive));
+      --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
+    }
+
+    :host([variant='secondary']) .badge {
+      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_bg));
+      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
+    }
+
+    :host([variant='success']) .badge {
+      --badge_bg--variant:   var(--badge_bg--success, var(--bds-color_success));
+      --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
+    }
+
+    :host([variant='error']) .badge {
+      --badge_bg--variant:   var(--badge_bg--error, var(--bds-color_error));
+      --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
+    }
+
+    :host([variant='warning']) .badge {
+      --badge_bg--variant:   var(--badge_bg--warning, var(--bds-color_warning));
+      --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.variant = "primary";
+  }
+  render() {
+    return T`<span class="badge"><slot></slot></span>`;
+  }
+};
+customElements.define("bds-badge", BdsBadge);
+
+export {
+  BdsBadge
+};

package/dist/web-components/{chunk-YRXCVKHV.js → chunk-RTOS7LLG.js}

@@ -25,12 +25,14 @@ var BdsCard = class extends i2 {
       border: none;
     }
 
-    .card.--default  { box-shadow: var(--bds-shadow_s); }
-    .card.--elevated { box-shadow: var(--bds-shadow_m); }
+    /* Resting shadows — consumers can override per-variant via
+       --card_shadow--default / --card_shadow--elevated / --card_shadow--outlined. */
+    .card.--default  { box-shadow: var(--card_shadow--default, var(--bds-shadow_s)); }
+    .card.--elevated { box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m)); }
 
     .card.--outlined {
       --bdc_color: currentcolor;
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
+      box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
     }
 
     .card.--padding-none   { padding: 0; }
@@ -60,12 +62,12 @@ var BdsCard = class extends i2 {
     @media (hover: hover) and (pointer: fine) {
       .card.--clickable:hover {
         transform: translateY(-2px);
-        box-shadow: var(--bds-shadow_xl);
+        box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
       }
 
-      .card.--default:hover  { box-shadow: var(--bds-shadow_m); }
-      .card.--elevated:hover { box-shadow: var(--bds-shadow_2xl); }
-      .card.--outlined:hover { box-shadow: var(--bds-shadow_s); }
+      .card.--default:hover  { box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m)); }
+      .card.--elevated:hover { box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl)); }
+      .card.--outlined:hover { box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s)); }
     }
   `;
   static properties = {

package/dist/web-components/{chunk-BX3IPVOB.js → chunk-ZNKEZIYE.js}

@@ -18,36 +18,40 @@ var BdsAlert = class extends i2 {
       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-color_blue));
-      background-color: var(--alert_bg, var(--bds-color_blue--subtle));
-      color: var(--alert_text, var(--bds-color_on-blue--subtle));
+      /* Layered cascade: public overrides (--alert_bg, --alert_text, --alert_border)
+         are read OUTERMOST so an ancestor-set value always wins over variant
+         defaults. Variants write to the inner --alert_*--variant slot. */
+      background-color:    var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
+      color:               var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
+      border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
     }
 
-    /* Variant colours */
+    /* Per-variant resting overrides — consumers can theme per-variant via
+       --alert_bg--info / --alert_bg--success / ... */
     :host([variant='info']) .alert {
-      --alert_bg:     var(--bds-color_blue--subtle);
-      --alert_text:   var(--bds-color_on-blue--subtle);
-      --alert_border: var(--bds-color_blue);
+      --alert_bg--variant:     var(--alert_bg--info, var(--bds-color_blue--subtle));
+      --alert_text--variant:   var(--alert_text--info, var(--bds-color_on-blue--subtle));
+      --alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
     }
 
     :host([variant='success']) .alert {
-      --alert_bg:     var(--bds-color_success--subtle);
-      --alert_text:   var(--bds-color_on-success--subtle);
-      --alert_border: var(--bds-color_success);
+      --alert_bg--variant:     var(--alert_bg--success, var(--bds-color_success--subtle));
+      --alert_text--variant:   var(--alert_text--success, var(--bds-color_on-success--subtle));
+      --alert_border--variant: var(--alert_border--success, var(--bds-color_success));
     }
 
     :host([variant='warning']) .alert {
-      --alert_bg:     var(--bds-color_orange--subtle);
-      --alert_text:   var(--bds-color_on-orange--subtle);
-      --alert_border: var(--bds-color_warning);
+      --alert_bg--variant:     var(--alert_bg--warning, var(--bds-color_orange--subtle));
+      --alert_text--variant:   var(--alert_text--warning, var(--bds-color_on-orange--subtle));
+      --alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
     }
 
     :host([variant='error']) .alert {
-      --alert_bg:     rgb(from var(--bds-color_error) r g b / 12%);
-      --alert_text:   var(--bds-color_on-bg);
-      --alert_border: var(--bds-color_error);
+      --alert_bg--variant:     var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
+      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-bg));
+      --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
     }
 
     /* Icon slot wrapper — hidden unless slot has content */

package/dist/web-components/index.js

@@ -69,7 +69,7 @@ import {
 } from "./chunk-UFFCKVZE.js";
 import {
   BdsButton
-} from "./chunk-N3TN6WCH.js";
+} from "./chunk-GER5UJOF.js";
 import {
   BdsCollapsible
 } from "./chunk-6I2DBFQ7.js";
@@ -104,19 +104,19 @@ import "./chunk-QPOKHLMQ.js";
 import "./chunk-3S42DZ7W.js";
 import {
   BdsAlert
-} from "./chunk-BX3IPVOB.js";
+} from "./chunk-ZNKEZIYE.js";
 import {
   BdsAvatar
 } from "./chunk-57TRNCWQ.js";
 import {
   BdsBadge
-} from "./chunk-OHUTLSIQ.js";
+} from "./chunk-QWPACK5L.js";
 import {
   BdsBreadcrumb
 } from "./chunk-Q4T5BJT6.js";
 import {
   BdsCard
-} from "./chunk-YRXCVKHV.js";
+} from "./chunk-RTOS7LLG.js";
 import {
   BdsDescriptionList
 } from "./chunk-AGKJTMJI.js";
@@ -200,11 +200,11 @@ function applyMasonryLayout(container, rawChildren, options = {}) {
   }
   const heights = children.map((child) => child.offsetHeight);
   const cols = countGridColumns(container) || 1;
-  const totalRowSum = heights.reduce(
-    (s, h) => s + Math.max(1, Math.ceil(h + targetGap)),
-    0
-  );
-  const projectedRows = totalRowSum / cols;
+  const projectedRows = children.reduce((sum, child, i3) => {
+    const rowSpan = Math.max(1, Math.ceil(heights[i3] + targetGap));
+    const colSpan = readExplicitSpan(child, cols);
+    return sum + rowSpan * colSpan;
+  }, 0) / cols;
   const autoUnit = Math.max(
     1,
     Math.ceil(projectedRows / TARGET_MAX_IMPLICIT_ROWS)

package/dist/web-components/interaction/bds-button.js

@@ -1,6 +1,6 @@
 import {
   BdsButton
-} from "../chunk-N3TN6WCH.js";
+} from "../chunk-GER5UJOF.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsButton

package/dist/web-components/ui/bds-alert.js

@@ -1,6 +1,6 @@
 import {
   BdsAlert
-} from "../chunk-BX3IPVOB.js";
+} from "../chunk-ZNKEZIYE.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAlert

package/dist/web-components/ui/bds-badge.js

@@ -1,6 +1,6 @@
 import {
   BdsBadge
-} from "../chunk-OHUTLSIQ.js";
+} from "../chunk-QWPACK5L.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsBadge

package/dist/web-components/ui/bds-card.js

@@ -1,6 +1,6 @@
 import {
   BdsCard
-} from "../chunk-YRXCVKHV.js";
+} from "../chunk-RTOS7LLG.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

package/src/components/interaction/Button/Button.mdx

@@ -95,35 +95,109 @@ Provide `href` to render as an `<a>` with button styling. `disabled` on a link s
 
 ## CSS variables
 
+The override surface is **layered** — pick the level of specificity you need. Every public token cascades through any ancestor, so you can theme one button, a section, or the whole app from the same selector.
+
+### Quick theme — set two tokens
+
+For most re-themes, the **identity tokens** are all you need. They drive both variants at rest, plus outline-hover.
+
+```css
+.brand-buttons {
+  --button_color:    var(--color_viviq-green);
+  --button_on-color: var(--color_on-viviq-green);
+}
+```
+
+What that gets you, automatically:
+
+| State | Default variant | Outline variant |
+| --- | --- | --- |
+| Resting | bg = `--button_color`, text = `--button_on-color` | bg = transparent, text/border = `--button_color--on-bg` |
+| Hover | bg = page surface, text = `--bds-color_interactive_on-bg` | bg = `--button_color`, text = `--button_on-color` |
+
+Outline-resting still uses the **text-safe** `--button_color--on-bg` (a darker-on-light-bg variant) by default — so dark-on-light readability stays intact even when your identity colour is bright. To make the identity colour itself flow through outline-resting, set `--button_color--on-bg` too:
+
+```css
+.brand-buttons {
+  --button_color:        var(--color_viviq-green);
+  --button_on-color:     var(--color_on-viviq-green);
+  --button_color--on-bg: var(--color_viviq-green); /* outline-resting follows */
+}
+```
+
+### Full token surface
+
+Every public token below can be set on the button or any ancestor — the consumer-set value always wins over variant + state defaults. Tokens are grouped by **state × variant** so the symmetry is visible.
+
+#### Identity & geometry
+
 <table>
 <thead>
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--button_color`</td><td>`var(--bds-color_interactive)`</td><td>Identity colour — fills default, outlines outline. Set this to re-theme.</td></tr>
-<tr><td>`--button_on-color`</td><td>`var(--bds-color_on-interactive)`</td><td>Text/icon colour on the button. Pair with `--button_color`.</td></tr>
-<tr><td>`--button_color--on-bg`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Text-safe variant of `--button_color` for outline variant text/border.</td></tr>
+<tr><td>`--button_color`</td><td>`var(--bds-color_interactive)`</td><td>Identity colour. Fills default-resting; flows through outline-hover.</td></tr>
+<tr><td>`--button_on-color`</td><td>`var(--bds-color_on-interactive)`</td><td>Text/icon colour on default-resting. Flows through outline-hover.</td></tr>
+<tr><td>`--button_color--on-bg`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Text-safe variant of `--button_color` for outline-resting text + border.</td></tr>
+<tr><td>`--button_pulse-color`</td><td>`var(--button_color)`</td><td>Halo colour for the pulse animation.</td></tr>
 <tr><td>`--button_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Button border radius.</td></tr>
 <tr><td>`--button_height`</td><td>`3em` (medium)</td><td>Button height. Also drives the width when `isIconOnly` is set.</td></tr>
-<tr><td>`--button_bg--hover`</td><td>`var(--bds-color_bg)`</td><td>Default variant background on hover.</td></tr>
-<tr><td>`--button_text--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Default variant text colour on hover.</td></tr>
-<tr><td>`--button_bg--outline-hover`</td><td>`var(--button_color)`</td><td>Outline variant background on hover.</td></tr>
-<tr><td>`--button_text--outline-hover`</td><td>`var(--button_on-color)`</td><td>Outline variant text colour on hover.</td></tr>
-<tr><td>`--button_pulse-color`</td><td>`var(--button_color)`</td><td>Halo colour for the pulse animation.</td></tr>
+<tr><td>`--button_font-size`</td><td>`inherit` (medium)</td><td>Button font size.</td></tr>
+</tbody>
+</table>
+
+#### Default variant
+
+<table>
+<thead>
+<tr><th>State</th><th>Variable</th><th>Default</th></tr>
+</thead>
+<tbody>
+<tr><td rowspan="3">Resting</td><td>`--button_bg`</td><td>`var(--button_color)`</td></tr>
+<tr><td>`--button_text`</td><td>`var(--button_on-color)`</td></tr>
+<tr><td>`--button_border`</td><td>`transparent`</td></tr>
+<tr><td rowspan="4">Hover</td><td>`--button_bg--hover`</td><td>`var(--bds-color_bg)`</td></tr>
+<tr><td>`--button_text--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td></tr>
+<tr><td>`--button_border--hover`</td><td>`currentcolor`</td></tr>
+<tr><td>`--button_pulse-color--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td></tr>
 </tbody>
 </table>
 
-### Re-theming
+#### Outline variant
 
-Change the two identity custom properties to re-theme both variants at once:
+<table>
+<thead>
+<tr><th>State</th><th>Variable</th><th>Default</th></tr>
+</thead>
+<tbody>
+<tr><td rowspan="3">Resting</td><td>`--button_bg--outline`</td><td>`transparent`</td></tr>
+<tr><td>`--button_text--outline`</td><td>`var(--button_color--on-bg)`</td></tr>
+<tr><td>`--button_border--outline`</td><td>`var(--button_color--on-bg)`</td></tr>
+<tr><td rowspan="3">Hover</td><td>`--button_bg--outline-hover`</td><td>`var(--button_color)`</td></tr>
+<tr><td>`--button_text--outline-hover`</td><td>`var(--button_on-color)`</td></tr>
+<tr><td>`--button_border--outline-hover`</td><td>`transparent`</td></tr>
+</tbody>
+</table>
+
+### Worked example: brand re-theme with one fine-grained tweak
+
+Most consumers stop at the quick-theme. If you need to override one specific state — for example, you want default-hover to stay branded instead of fading to the page surface — drop a state-specific override alongside the identity tokens:
 
 ```css
-.danger-zone .button {
-  --button_color:    var(--bds-color_error);
-  --button_on-color: var(--bds-color_on-error);
+.brand-buttons {
+  /* Identity — themes both variants at rest, plus outline-hover */
+  --button_color:        var(--color_viviq-green);
+  --button_on-color:     var(--color_on-viviq-green);
+  --button_color--on-bg: var(--color_viviq-green);
+
+  /* One fine-grained override: keep default-hover on-brand instead of fading */
+  --button_bg--hover:    var(--color_viviq-green--dark);
+  --button_text--hover:  var(--color_on-viviq-green);
 }
 ```
 
+Outline-hover, default-resting, and outline-resting all derive from the identity tokens — you only spell out the override that diverges.
+
 ## Accessibility
 
 - Always provide children **or** `aria-label` — icon-only buttons without an accessible name are a WCAG failure.

package/src/components/interaction/Button/Button.module.css

@@ -46,17 +46,20 @@
     white-space: nowrap;
     line-height: 1;
 
-    /* Colour model: override --button_color + --button_on-color to re-theme */
+    /* Identity tokens — override --button_color + --button_on-color to re-theme */
     --button_color:        var(--bds-color_interactive);
     --button_on-color:     var(--bds-color_on-interactive);
 
-    /* Text-safe variant of --button_color for use on page background (ghost text/border) */
+    /* Text-safe variant of --button_color for use on page background (outline text/border) */
     --button_color--on-bg: var(--bds-color_interactive_on-bg);
 
-    background-color: var(--button_bg, var(--button_color));
-    color: var(--button_text, var(--button_on-color));
-    border: var(--button_border, none);
-    --bdc_color: transparent;
+    /* Layered cascade: the consumer-facing overrides (--button_bg, --button_text,
+       --button_border) are read OUTERMOST so an ancestor-set value always wins
+       over variant + hover defaults. Variants and hover write to the inner
+       --button_*--variant slot, never to the public tokens. */
+    background-color: var(--button_bg, var(--button_bg--variant, var(--button_color)));
+    color:            var(--button_text, var(--button_text--variant, var(--button_on-color)));
+    --bdc_color:      var(--button_border, var(--button_border--variant, transparent));
 
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
@@ -65,12 +68,14 @@
   /* Default: filled with --button_color, no visible border */
   .button.--default { /* inherits base — no overrides needed */ }
 
-  /* Outline: transparent background, border and text use text-safe --button_color--on-bg */
+  /* Outline: transparent background, border and text use text-safe --button_color--on-bg.
+     Resting overrides (--button_bg--outline, --button_text--outline, --button_border--outline)
+     are honored if the consumer sets them. */
   .button.--outline,
   .button.--ghost /* @deprecated — use variant="outline" */ {
-    --button_bg:   transparent;
-    --button_text: var(--button_color--on-bg);
-    --bdc_color:   var(--button_color--on-bg);
+    --button_bg--variant:     var(--button_bg--outline, transparent);
+    --button_text--variant:   var(--button_text--outline, var(--button_color--on-bg));
+    --button_border--variant: var(--button_border--outline, var(--button_color--on-bg));
   }
 
   .button.--size_small {
@@ -164,10 +169,10 @@
   /* Default hover: outline appears, bg becomes page surface */
   @media (hover: hover) and (pointer: fine) {
     .button.--default:hover {
-      --button_bg:          var(--button_bg--hover, var(--bds-color_bg));
-      --button_text:        var(--button_text--hover, var(--bds-color_interactive_on-bg));
-      --button_pulse-color: var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
-      --bdc_color:          currentcolor;
+      --button_bg--variant:     var(--button_bg--hover, var(--bds-color_bg));
+      --button_text--variant:   var(--button_text--hover, var(--bds-color_interactive_on-bg));
+      --button_border--variant: var(--button_border--hover, currentcolor);
+      --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
     }
   }
 
@@ -175,9 +180,9 @@
   @media (hover: hover) and (pointer: fine) {
     .button.--outline:hover,
     .button.--ghost:hover {
-      --button_bg:   var(--button_bg--outline-hover, var(--button_color));
-      --button_text: var(--button_text--outline-hover, var(--button_on-color));
-      --bdc_color:   transparent;
+      --button_bg--variant:     var(--button_bg--outline-hover, var(--button_color));
+      --button_text--variant:   var(--button_text--outline-hover, var(--button_on-color));
+      --button_border--variant: var(--button_border--outline-hover, transparent);
     }
   }
 }

package/src/components/interaction/Toast/Toast.mdx

@@ -67,17 +67,36 @@ showToast('New message received', 'info');
 
 ## CSS variables
 
+The override surface is **layered**. Setting a public token on the toast (or any ancestor) themes every variant; setting a per-variant token themes only that one variant.
+
+### Public override tokens (win over variant defaults)
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--toast_color`</td><td>per variant</td><td>Toast background. Set to theme every variant at once.</td></tr>
+<tr><td>`--toast_on-color`</td><td>per variant</td><td>Toast text colour.</td></tr>
+</tbody>
+</table>
+
+### Per-variant overrides
 
 <table>
 <thead>
-<tr><th>Variable</th><th>Description</th></tr>
+<tr><th>Variant</th><th>Background</th><th>Text</th></tr>
 </thead>
 <tbody>
-<tr><td>`--toast_color`</td><td>Toast background</td></tr>
-<tr><td>`--toast_on-color`</td><td>Toast text colour</td></tr>
+<tr><td>`info`</td><td>`--toast_color--info`</td><td>`--toast_on-color--info`</td></tr>
+<tr><td>`success`</td><td>`--toast_color--success`</td><td>`--toast_on-color--success`</td></tr>
+<tr><td>`warning`</td><td>`--toast_color--warning`</td><td>`--toast_on-color--warning`</td></tr>
+<tr><td>`error`</td><td>`--toast_color--error`</td><td>`--toast_on-color--error`</td></tr>
 </tbody>
 </table>
 
+Defaults resolve to the corresponding foundation tokens.
+
 
 ## Accessibility
 

package/src/components/interaction/Toast/Toast.module.css

@@ -16,8 +16,11 @@
 
   .toast {
     padding: var(--bds-space_m) var(--bds-space_l);
-    background-color: var(--toast_color, var(--bds-color_bg));
-    color: var(--toast_on-color, var(--bds-color_on-bg));
+
+    /* Layered cascade: public overrides (--toast_color, --toast_on-color) win
+       over per-variant defaults. Variants write to the inner --toast_*--variant slot. */
+    background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
+    color:            var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
     border-radius: var(--bds-border_radius--s);
     box-shadow: var(--bds-shadow_s);
     display: flex;
@@ -28,23 +31,23 @@
   }
 
   .toast.--variant_success {
-    --toast_color: var(--bds-color_success);
-    --toast_on-color: var(--bds-color_on-success);
+    --toast_color--variant:    var(--toast_color--success, var(--bds-color_success));
+    --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
   }
 
   .toast.--variant_warning {
-    --toast_color: var(--bds-color_warning);
-    --toast_on-color: var(--bds-color_on-warning);
+    --toast_color--variant:    var(--toast_color--warning, var(--bds-color_warning));
+    --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
   }
 
   .toast.--variant_info {
-    --toast_color: var(--bds-color_bg--subtle);
-    --toast_on-color: var(--bds-color_on-bg--subtle);
+    --toast_color--variant:    var(--toast_color--info, var(--bds-color_bg--subtle));
+    --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
   }
 
   .toast.--variant_error {
-    --toast_color: var(--bds-color_error);
-    --toast_on-color: var(--bds-color_on-error);
+    --toast_color--variant:    var(--toast_color--error, var(--bds-color_error));
+    --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
   }
 
   .message {

package/src/components/layout/Card/Card.mdx

@@ -43,23 +43,35 @@ Contained surface for grouping related content. Three visual variants provide di
 
 ## CSS variables
 
+### Card surface
 
 <table>
 <thead>
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--card_color`</td><td>`var(--bds-color_bg)`</td><td>Card background colour</td></tr>
-<tr><td>`--card_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Card text colour</td></tr>
-<tr><td>`--card_padding`</td><td>varies by `padding` prop</td><td>Card padding (overrides the variant default)</td></tr>
-<tr><td>`--card_border`</td><td>`none`</td><td>Border (outlined variant)</td></tr>
-<tr><td>`--card_shadow--clickable-hover`</td><td>`var(--bds-shadow_xl)`</td><td>Box shadow on hover for clickable cards</td></tr>
-<tr><td>`--card_shadow--default-hover`</td><td>`var(--bds-shadow_m)`</td><td>Box shadow on hover for default variant</td></tr>
-<tr><td>`--card_shadow--elevated-hover`</td><td>`var(--bds-shadow_2xl)`</td><td>Box shadow on hover for elevated variant</td></tr>
-<tr><td>`--card_shadow--outlined-hover`</td><td>`var(--bds-shadow_s)`</td><td>Box shadow on hover for outlined variant</td></tr>
+<tr><td>`--card_color`</td><td>`var(--bds-color_bg)`</td><td>Card background colour.</td></tr>
+<tr><td>`--card_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Card text colour.</td></tr>
+<tr><td>`--card_padding`</td><td>varies by `padding` prop</td><td>Card padding (overrides the prop default).</td></tr>
+<tr><td>`--card_border`</td><td>`none`</td><td>Border (outlined variant).</td></tr>
 </tbody>
 </table>
 
+### Per-variant box-shadow (resting + hover)
+
+<table>
+<thead>
+<tr><th>Variant</th><th>Resting shadow</th><th>Hover shadow</th></tr>
+</thead>
+<tbody>
+<tr><td>`default`</td><td>`--card_shadow--default` (`var(--bds-shadow_s)`)</td><td>`--card_shadow--default-hover` (`var(--bds-shadow_m)`)</td></tr>
+<tr><td>`elevated`</td><td>`--card_shadow--elevated` (`var(--bds-shadow_m)`)</td><td>`--card_shadow--elevated-hover` (`var(--bds-shadow_2xl)`)</td></tr>
+<tr><td>`outlined`</td><td>`--card_shadow--outlined` (inset border + `var(--bds-shadow_s)`)</td><td>`--card_shadow--outlined-hover` (`var(--bds-shadow_s)`)</td></tr>
+</tbody>
+</table>
+
+Plus `--card_shadow--clickable-hover` (`var(--bds-shadow_xl)`) for hover on any clickable card.
+
 
 ## Accessibility
 

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

@@ -7,19 +7,21 @@
     position: relative;
   }
 
+  /* Resting shadows — consumers can override per-variant via
+     --card_shadow--default / --card_shadow--elevated / --card_shadow--outlined. */
   .card.--default {
-    box-shadow: var(--bds-shadow_s);
+    box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
   }
 
   .card.--elevated {
-    box-shadow: var(--bds-shadow_m);
+    box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
   }
 
   .card.--outlined {
     border: var(--card_border, none);
     --bdc_color: currentcolor;
 
-    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
+    box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
   }
 
   .card.--clickable {

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

@@ -260,6 +260,25 @@ describe('applyMasonryLayout', () => {
       expect(items[0].style.gridRowEnd).toBe('span 100');
     });
 
+    it('accounts for column span when projecting implicit row count', () => {
+      // Regression: the projection has to weight each item by its column span,
+      // otherwise a gallery of half-span items reports half the true row
+      // count and the unit stays at 1. 30 items × 600px tall × 6-col span on
+      // a 12-col grid = 30 * 600 * 6 / 12 = 9,000 implicit rows; the naive
+      // sum(rowSpan)/cols formula would have said 1,500 → unit 1 → overlap in
+      // Firefox. Correct: ceil(9000/5000) = 2.
+      const container = makeContainer(0);
+      container.style.gridTemplateColumns = '100px '.repeat(12).trim();
+      const items = Array.from({ length: 30 }, () => {
+        const el = makeItem(600);
+        el.style.gridColumn = 'span 6';
+        return el;
+      });
+      container.append(...items);
+      applyMasonryLayout(container, items);
+      expect(container.style.gridAutoRows).toBe('2px');
+    });
+
     it('honors an explicit rowUnitPx override', () => {
       const container = makeContainer(10);
       const item = makeItem(100);