@boostdev/design-system-components 2.6.0 → 2.7.1

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

@@ -6,10 +6,9 @@ describe('bds-card', () => {
     expect(customElements.get('bds-card')).toBe(BdsCard);
   });
 
-  it('defaults to variant="default", padding="medium", text-align="start"', async () => {
+  it('defaults to variant="default", text-align="start"', async () => {
     const el = await fixture('<bds-card>Content</bds-card>') as BdsCard;
     expect(el.getAttribute('variant')).toBe('default');
-    expect(el.getAttribute('padding')).toBe('medium');
     expect(el.getAttribute('text-align')).toBe('start');
     cleanup(el);
   });
@@ -45,11 +44,10 @@ describe('bds-card', () => {
     cleanup(el);
   });
 
-  it('applies variant, padding and text-align classes to the card element', async () => {
-    const el = await fixture('<bds-card variant="elevated" padding="large" text-align="center">Content</bds-card>');
+  it('applies variant and text-align classes to the card element', async () => {
+    const el = await fixture('<bds-card variant="elevated" text-align="center">Content</bds-card>');
     const card = el.shadowRoot!.querySelector('.card')!;
     expect(card.classList.contains('--elevated')).toBe(true);
-    expect(card.classList.contains('--padding-large')).toBe(true);
     expect(card.classList.contains('--text-center')).toBe(true);
     cleanup(el);
   });

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

@@ -1,7 +1,6 @@
 import { LitElement, css, html, nothing } from 'lit';
 
 export type CardVariant = 'default' | 'elevated' | 'outlined';
-export type CardPadding = 'none' | 'small' | 'medium' | 'large';
 export type CardTextAlign = 'start' | 'center' | 'end';
 
 /**
@@ -9,7 +8,7 @@ export type CardTextAlign = 'start' | 'center' | 'end';
  *
  * Attributes:
  *   variant    — "default" (default) | "elevated" | "outlined"
- *   padding    — "none" | "small" | "medium" (default) | "large"
+ *   --card_padding — CSS custom property to override padding (default: var(--bds-space_m))
  *   text-align — "start" (default) | "center" | "end"
  *   clickable  — boolean; renders as a <button> with hover/active effects
  *   aria-label — accessible label (useful when clickable)
@@ -21,7 +20,7 @@ export type CardTextAlign = 'start' | 'center' | 'end';
  *   bds-click — fired (bubbles, composed) when the card button is clicked
  *
  * @example
- * <bds-card variant="elevated" padding="large">
+ * <bds-card variant="elevated" style="--card_padding: var(--bds-space_l)">
  *   <p>Card content</p>
  * </bds-card>
  *
@@ -43,9 +42,11 @@ export class BdsCard extends LitElement {
       position: relative;
       box-sizing: border-box;
       inline-size: 100%;
+      block-size: 100%;
       text-align: inherit;
       font: inherit;
       border: none;
+      padding: var(--card_padding, var(--bds-space_m));
     }
 
     /* Resting shadows — consumers can override per-variant via
@@ -54,15 +55,11 @@ export class BdsCard extends LitElement {
     .card.--elevated { box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m)); }
 
     .card.--outlined {
+      border: var(--card_border, none);
       --bdc_color: currentcolor;
       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; }
-    .card.--padding-small  { padding: var(--bds-space_s); }
-    .card.--padding-medium { padding: var(--bds-space_m); }
-    .card.--padding-large  { padding: var(--bds-space_l); }
-
     .card.--text-start  { text-align: start; }
     .card.--text-center { text-align: center; }
     .card.--text-end    { text-align: end; }
@@ -96,14 +93,12 @@ export class BdsCard extends LitElement {
 
   static properties = {
     variant:   { type: String, reflect: true },
-    padding:   { type: String, reflect: true },
     textAlign: { type: String, attribute: 'text-align', reflect: true },
     clickable: { type: Boolean, reflect: true },
     ariaLabel: { type: String, attribute: 'aria-label' },
   };
 
   declare variant: CardVariant;
-  declare padding: CardPadding;
   declare textAlign: CardTextAlign;
   declare clickable: boolean;
   declare ariaLabel: string;
@@ -111,7 +106,6 @@ export class BdsCard extends LitElement {
   constructor() {
     super();
     this.variant = 'default';
-    this.padding = 'medium';
     this.textAlign = 'start';
     this.clickable = false;
     this.ariaLabel = '';
@@ -125,7 +119,6 @@ export class BdsCard extends LitElement {
     const classes = [
       'card',
       `--${this.variant}`,
-      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? '--clickable' : '',
     ].filter(Boolean).join(' ');

package/src/web-components/ui/bds-notification-banner.ts

@@ -34,9 +34,9 @@ export class BdsNotificationBanner extends LitElement {
       align-items: center;
       gap: var(--bds-space_m);
       padding: var(--bds-space_s) var(--bds-space_m);
-      background-color: var(--banner_bg, var(--bds-color_blue--subtle));
-      color: var(--banner_text, var(--bds-color_on-blue--subtle));
-      border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
+      background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
+      color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
+      border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
       inline-size: 100%;
@@ -44,27 +44,27 @@ export class BdsNotificationBanner extends LitElement {
     }
 
     :host([variant='info']) .banner {
-      --banner_bg:     var(--bds-color_blue--subtle);
-      --banner_text:   var(--bds-color_on-blue--subtle);
-      --banner_border: var(--bds-color_blue);
+      --banner_bg--variant:     var(--banner_bg--info, var(--bds-color_blue--subtle));
+      --banner_text--variant:   var(--banner_text--info, var(--bds-color_on-blue--subtle));
+      --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
     }
 
     :host([variant='success']) .banner {
-      --banner_bg:     var(--bds-color_success--subtle);
-      --banner_text:   var(--bds-color_on-success--subtle);
-      --banner_border: var(--bds-color_success);
+      --banner_bg--variant:     var(--banner_bg--success, var(--bds-color_success--subtle));
+      --banner_text--variant:   var(--banner_text--success, var(--bds-color_on-success--subtle));
+      --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
     }
 
     :host([variant='warning']) .banner {
-      --banner_bg:     var(--bds-color_orange--subtle);
-      --banner_text:   var(--bds-color_on-orange--subtle);
-      --banner_border: var(--bds-color_warning);
+      --banner_bg--variant:     var(--banner_bg--warning, var(--bds-color_orange--subtle));
+      --banner_text--variant:   var(--banner_text--warning, var(--bds-color_on-orange--subtle));
+      --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
     }
 
     :host([variant='error']) .banner {
-      --banner_bg:     rgb(from var(--bds-color_error) r g b / 12%);
-      --banner_text:   var(--bds-color_on-bg);
-      --banner_border: var(--bds-color_error);
+      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 
     .content {
@@ -88,9 +88,10 @@ export class BdsNotificationBanner extends LitElement {
       flex-shrink: 0;
       cursor: pointer;
       color: currentcolor;
-      border-radius: 50%;
+      border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
+      border: var(--banner_dismiss-border, none);
       transition: var(--bds-animation_transition);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--notification-banner_dismiss-border-color, currentcolor);
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
@@ -106,7 +107,7 @@ export class BdsNotificationBanner extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--banner_dismiss-opacity--hover, 0.7);
       }
     }
   `;

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

@@ -65,7 +65,7 @@ export class BdsPagination extends LitElement {
       cursor: pointer;
       color: var(--bds-color_on-bg);
       transition: var(--bds-animation_transition);
-      --bdc_color: transparent;
+      --bdc_color: var(--pagination_border-color, transparent);
       --bdc-outline_radius: var(--bds-border_radius--xs);
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bdc-outline_shadow);
     }

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

@@ -29,6 +29,10 @@ export class BdsTable extends LitElement {
     .wrapper {
       overflow-inline: auto;
       -webkit-overflow-scrolling: touch;
+      border: var(--table_border, none);
+      border-radius: var(--table_radius, var(--bds-border_radius--s));
+      --bdc_color: var(--bds-color_bg--subtle);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
     ::slotted(table) {