@boostdev/design-system-components 2.5.1 → 2.6.0

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
-};