@boostdev/design-system-components 2.5.0 → 2.6.0

package/src/web-components/interaction/bds-button.ts

@@ -65,14 +65,20 @@ export class BdsButton extends LitElement {
       white-space: nowrap;
       line-height: 1;
 
+      /* 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 (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),
@@ -83,12 +89,13 @@ export class BdsButton extends LitElement {
       text-decoration: none;
     }
 
-    /* Variants */
+    /* Variants — outline-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));
     }
 
     /* Sizes */
@@ -174,18 +181,18 @@ export class BdsButton extends LitElement {
 
       /* Default hover */
       .button.default:hover {
-        --button_bg:          var(--bds-color_bg);
-        --button_text:        var(--bds-color_interactive);
-        --button_pulse-color: var(--bds-color_interactive);
-        --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));
+        --button_border--variant: var(--button_border--hover, currentcolor);
+        --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive));
       }
 
       /* Outline hover */
       .button.outline:hover,
       .button.ghost:hover {
-        --button_bg:   var(--button_color);
-        --button_text: 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/web-components/ui/bds-alert.ts

@@ -41,36 +41,40 @@ export class BdsAlert extends LitElement {
       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/src/web-components/ui/bds-badge.ts

@@ -30,34 +30,37 @@ export class BdsBadge extends LitElement {
       font-weight: var(--bds-font_weight--semibold);
       line-height: 1;
       white-space: nowrap;
-      background-color: var(--badge_bg, var(--bds-color_blue));
-      color: var(--badge_text, var(--bds-color_on-blue));
+      /* 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)));
     }
 
-    /* Variant overrides */
+    /* Per-variant resting overrides — consumers can theme per-variant via
+       --badge_bg--primary / --badge_bg--success / ... */
     :host([variant='primary']) .badge {
-      --badge_bg:   var(--bds-color_interactive);
-      --badge_text: var(--bds-color_on-interactive);
+      --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:   var(--bds-color_bg);
-      --badge_text: var(--bds-color_on-bg);
+      --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:   var(--bds-color_success);
-      --badge_text: var(--bds-color_on-success);
+      --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:   var(--bds-color_error);
-      --badge_text: var(--bds-color_on-error);
+      --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:   var(--bds-color_warning);
-      --badge_text: var(--bds-color_on-warning);
+      --badge_bg--variant:   var(--badge_bg--warning, var(--bds-color_warning));
+      --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
     }
   `;
 

package/src/web-components/ui/bds-card.ts

@@ -48,12 +48,14 @@ export class BdsCard extends LitElement {
       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; }
@@ -83,12 +85,12 @@ export class BdsCard extends LitElement {
     @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)); }
     }
   `;
 

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

@@ -1,69 +0,0 @@
-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;
-      background-color: var(--badge_bg, var(--bds-color_blue));
-      color: var(--badge_text, var(--bds-color_on-blue));
-    }
-
-    /* Variant overrides */
-    :host([variant='primary']) .badge {
-      --badge_bg:   var(--bds-color_interactive);
-      --badge_text: var(--bds-color_on-interactive);
-    }
-
-    :host([variant='secondary']) .badge {
-      --badge_bg:   var(--bds-color_bg);
-      --badge_text: var(--bds-color_on-bg);
-    }
-
-    :host([variant='success']) .badge {
-      --badge_bg:   var(--bds-color_success);
-      --badge_text: var(--bds-color_on-success);
-    }
-
-    :host([variant='error']) .badge {
-      --badge_bg:   var(--bds-color_error);
-      --badge_text: var(--bds-color_on-error);
-    }
-
-    :host([variant='warning']) .badge {
-      --badge_bg:   var(--bds-color_warning);
-      --badge_text: 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
-};