@boostdev/design-system-components 2.7.0 → 2.7.1

package/src/test/token-contract.spec.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { extractFoundationRefs, extractTokens } from '../../mcp/extract.ts';
+
+function collectFiles(dir: string, ext: string): string[] {
+  const results: string[] = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      results.push(...collectFiles(full, ext));
+    } else if (full.endsWith(ext)) {
+      results.push(full);
+    }
+  }
+  return results;
+}
+
+function loadDeclaredTokens(): Set<string> {
+  const tokensDir = join(__dirname, '../../node_modules/@boostdev/design-system-foundation/src/tokens');
+  const propertiesFile = join(tokensDir, 'properties.css');
+  const declared = new Set<string>();
+
+  for (const file of collectFiles(tokensDir, '.css')) {
+    const css = readFileSync(file, 'utf-8');
+    for (const token of extractTokens(css, 'all')) {
+      declared.add(token.name);
+    }
+  }
+
+  // @property declarations aren't captured by extractTokens — parse them separately
+  if (statSync(propertiesFile).isFile()) {
+    const css = readFileSync(propertiesFile, 'utf-8');
+    for (const [, name] of css.matchAll(/@property\s+(--bds-[\w-]+)/g)) {
+      declared.add(name);
+    }
+  }
+
+  // Also include deprecated aliases (they resolve to real tokens)
+  const deprecatedFile = join(tokensDir, 'deprecated.css');
+  const deprecatedCss = readFileSync(deprecatedFile, 'utf-8');
+  for (const [, name] of deprecatedCss.matchAll(/^\s*(--bds-[\w-]+)\s*:/gm)) {
+    declared.add(name);
+  }
+
+  return declared;
+}
+
+// Component-local tokens that were incorrectly given the --bds-* prefix.
+// Kept as deprecated fallbacks for backwards compatibility — remove in next major.
+const DEPRECATED_BDS_ALIASES = new Set([
+  '--bds-on-icon-wrapper-color',
+]);
+
+describe('token contract', () => {
+  const declared = loadDeclaredTokens();
+  const srcRoot = join(__dirname, '../');
+  const componentCssFiles = collectFiles(join(srcRoot, 'components'), '.module.css');
+  const bdcFile = join(srcRoot, 'css/bdc.css');
+
+  it('has a non-empty set of declared foundation tokens', () => {
+    expect(declared.size).toBeGreaterThan(50);
+  });
+
+  it('resolves every var(--bds-*) reference in component CSS to a declared token', () => {
+    const undeclared: { file: string; token: string }[] = [];
+
+    for (const file of [...componentCssFiles, bdcFile]) {
+      const css = readFileSync(file, 'utf-8');
+      for (const ref of extractFoundationRefs(css)) {
+        if (!declared.has(ref) && !DEPRECATED_BDS_ALIASES.has(ref)) {
+          undeclared.push({ file: relative(srcRoot, file), token: ref });
+        }
+      }
+    }
+
+    if (undeclared.length > 0) {
+      const report = undeclared
+        .map(({ file, token }) => `  ${token} in ${file}`)
+        .join('\n');
+      expect.fail(
+        `Found ${undeclared.length} reference(s) to undeclared foundation tokens:\n${report}`,
+      );
+    }
+  });
+});

package/src/web-components/interaction/bds-accordion-item.ts

@@ -69,7 +69,7 @@ export class BdsAccordionItem extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .trigger:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

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

@@ -26,6 +26,7 @@ export class BdsAccordion extends LitElement {
   static styles = css`
     :host {
       display: block;
+      border: var(--accordion_border, none);
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));

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

@@ -56,7 +56,7 @@ export class BdsButton extends LitElement {
       padding-inline: var(--bds-space_l);
       display: inline-flex;
       gap: var(--bds-space_xs);
-      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      border-radius: var(--button_radius, var(--bds-border_radius--full));
       align-items: center;
       cursor: pointer;
       justify-content: center;
@@ -102,7 +102,6 @@ export class BdsButton extends LitElement {
     .button.small {
       --button_height:    2.25em;
       --button_font-size: var(--bds-font_size--body--s);
-      --button_border_radius--s: var(--bds-border_radius--xs);
       padding-inline: var(--bds-space_m);
     }
 
@@ -113,7 +112,6 @@ export class BdsButton extends LitElement {
 
     .button.large {
       --button_font-size: var(--bds-font_size--heading-3);
-      --button_border_radius--s: var(--bds-border_radius--m);
       padding-inline: var(--bds-space_xl);
     }
 

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

@@ -34,7 +34,7 @@ export class BdsDialog extends LitElement {
     .dialog {
       font-size: var(--bds-font_size--body--s);
       border: var(--dialog_border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dialog_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--m);
 
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
@@ -66,11 +66,11 @@ export class BdsDialog extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
+      border-radius: var(--dialog_close-radius, var(--bds-border_radius--circle));
       background-color: var(--bds-color_bg);
       color: currentcolor;
       border: var(--dialog_close-border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dialog_close-border-color, currentcolor);
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;

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

@@ -119,7 +119,7 @@ export class BdsDrawer extends LitElement {
       justify-content: center;
       inline-size: 2rem;
       block-size: 2rem;
-      border-radius: 50%;
+      border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
@@ -136,7 +136,7 @@ export class BdsDrawer extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .close-button:hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

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

@@ -50,10 +50,15 @@ export class BdsPopover extends LitElement {
       overflow-y: auto;
       z-index: var(--popover_z-index, 100);
       min-width: 12rem;
+      max-width: var(--popover_max-width, 20rem);
+      max-height: var(--popover_max-height, 80dvh);
       padding: var(--bds-space_m);
-      border-radius: var(--bds-border_radius--s);
+      border: var(--popover_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--popover_radius, var(--bdc-outline_radius));
       background-color: var(--popover_color, var(--bds-color_bg));
-      box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
       color: var(--popover_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
     }

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

@@ -37,7 +37,7 @@ export class BdsTooltip extends LitElement {
       position: absolute;
       z-index: var(--bds-z-index_popover, 200);
       padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--bds-border_radius--xs);
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
       background-color: var(--tooltip_bg, var(--bds-color_on-bg));
       color: var(--tooltip_text, var(--bds-color_bg));
       font-size: var(--bds-font_size--body--s);

package/src/web-components/interaction/form/bds-checkbox.ts

@@ -49,7 +49,7 @@ export class BdsCheckbox extends LitElement {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--checkbox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/form/bds-combobox.ts

@@ -54,7 +54,7 @@ export class BdsCombobox extends LitElement {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--combobox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--combobox_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/form/bds-form-input.ts

@@ -58,7 +58,7 @@ export class BdsFormInput extends LitElement {
       position: relative;
       display: flex;
       align-items: center;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--formInput_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--formInput_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/form/bds-number-input.ts

@@ -42,7 +42,7 @@ export class BdsNumberInput extends LitElement {
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--number-input_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--number-input_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/form/bds-radio.ts

@@ -47,7 +47,7 @@ export class BdsRadio extends LitElement {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--radio_border-color, currentcolor);
       --bdc-outline_radius: 50%;
 
       border-radius: 50%;

package/src/web-components/interaction/form/bds-select.ts

@@ -55,7 +55,7 @@ export class BdsSelect extends LitElement {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--select_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--select_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/form/bds-switch.ts

@@ -46,7 +46,7 @@ export class BdsSwitch extends LitElement {
       block-size: 1.5rem;
       border-radius: 999px;
       background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --bdc_color: currentcolor;
+      --bdc_color: var(--switch_border-color, currentcolor);
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       transition: background-color 0.2s ease;

package/src/web-components/interaction/form/bds-textarea.ts

@@ -41,7 +41,7 @@ export class BdsTextarea extends LitElement {
       line-height: var(--bds-font_line-height--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--textarea_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--textarea_radius, var(--bdc-outline_radius));

package/src/web-components/ui/BdsCard.mdx

@@ -5,7 +5,7 @@ import * as Stories from './BdsCard.stories';
 
 # <bds-card>
 
-Framework-agnostic Card layout custom element. A versatile container with three visual variants, configurable padding, text alignment, and an optional clickable mode.
+Framework-agnostic Card layout custom element. A versatile container with three visual variants, text alignment, and an optional clickable mode. Padding is controlled via the `--card_padding` CSS custom property.
 
 > **Status: experimental** — API may change before stable release.
 
@@ -46,7 +46,6 @@ import '@boostdev/design-system-components/web-components';
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `variant` | `"default" \| "elevated" \| "outlined"` | `"default"` | Shadow and border style |
-| `padding` | `"none" \| "small" \| "medium" \| "large"` | `"medium"` | Inner padding |
 | `text-align` | `"start" \| "center" \| "end"` | `"start"` | Text alignment |
 | `clickable` | boolean | `false` | Renders the card as a `<button>` with hover/active effects |
 | `aria-label` | string | — | Accessible label (recommended when `clickable` is set) |
@@ -67,13 +66,15 @@ import '@boostdev/design-system-components/web-components';
 
 | Property | Description |
 |----------|-------------|
+| `--card_padding` | Inner padding (default: `var(--bds-space_m)`) |
 | `--card_color` | Card background colour |
 | `--card_on-color` | Card text/foreground colour |
+| `--card_border` | Border on outlined variant (default: `none`) |
 
 ## Usage in plain HTML
 
 ```html
-<bds-card variant="elevated" padding="large">
+<bds-card variant="elevated" style="--card_padding: var(--bds-space_l)">
   <p>Card content</p>
 </bds-card>
 

package/src/web-components/ui/BdsCard.stories.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { CardVariant, CardPadding, CardTextAlign } from './bds-card';
+import type { CardVariant, CardTextAlign } from './bds-card';
 import '../index'; // auto-registers all custom elements
 
 function BdsCard({
   variant = 'default',
-  padding = 'medium',
   textAlign = 'start',
   clickable,
   ariaLabel,
   children,
 }: {
   variant?: CardVariant;
-  padding?: CardPadding;
   textAlign?: CardTextAlign;
   clickable?: boolean;
   ariaLabel?: string;
@@ -22,7 +20,6 @@ function BdsCard({
     'bds-card',
     {
       variant,
-      padding,
       'text-align': textAlign,
       clickable: clickable || undefined,
       'aria-label': ariaLabel,
@@ -38,7 +35,6 @@ const meta = {
   parameters: { layout: 'centered' },
   argTypes: {
     variant:   { control: 'select', options: ['default', 'elevated', 'outlined'] },
-    padding:   { control: 'select', options: ['none', 'small', 'medium', 'large'] },
     textAlign: { control: 'select', options: ['start', 'center', 'end'] },
     clickable: { control: 'boolean' },
   },
@@ -47,19 +43,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = { args: { variant: 'default', padding: 'medium', children: 'Card content goes here.' } };
-export const Elevated: Story = { args: { variant: 'elevated', padding: 'medium', children: 'Elevated card.' } };
-export const Outlined: Story = { args: { variant: 'outlined', padding: 'medium', children: 'Outlined card.' } };
+export const Default: Story = { args: { variant: 'default', children: 'Card content goes here.' } };
+export const Elevated: Story = { args: { variant: 'elevated', children: 'Elevated card.' } };
+export const Outlined: Story = { args: { variant: 'outlined', children: 'Outlined card.' } };
 export const Clickable: Story = {
-  args: { variant: 'default', padding: 'medium', clickable: true, ariaLabel: 'Open details', children: 'Clickable card — hover me.' },
+  args: { variant: 'default', clickable: true, ariaLabel: 'Open details', children: 'Clickable card — hover me.' },
 };
 
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', maxWidth: 600 }}>
       {(['default', 'elevated', 'outlined'] as const).map(v =>
-        React.createElement('bds-card', { key: v, variant: v, padding: 'medium', style: 'width: 160px' },
-          React.createElement('p', { style: 'margin: 0' }, v),
+        React.createElement('bds-card', { key: v, variant: v, style: { width: 160 } },
+          React.createElement('p', { style: { margin: 0 } }, v),
         ),
       )}
     </div>

package/src/web-components/ui/BdsSkeleton.stories.tsx

@@ -41,10 +41,10 @@ export const Avatar: Story = {
 export const ContentBlock: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 300 }}>
-      {React.createElement('bds-skeleton', { style: 'width: 100%; height: 1.5rem;' })}
-      {React.createElement('bds-skeleton', { style: 'width: 80%; height: 1rem;' })}
-      {React.createElement('bds-skeleton', { style: 'width: 90%; height: 1rem;' })}
-      {React.createElement('bds-skeleton', { style: 'width: 60%; height: 1rem;' })}
+      {React.createElement('bds-skeleton', { style: { width: '100%', height: '1.5rem' } })}
+      {React.createElement('bds-skeleton', { style: { width: '80%', height: '1rem' } })}
+      {React.createElement('bds-skeleton', { style: { width: '90%', height: '1rem' } })}
+      {React.createElement('bds-skeleton', { style: { width: '60%', height: '1rem' } })}
     </div>
   ),
 };

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

@@ -112,7 +112,8 @@ export class BdsAlert extends LitElement {
       cursor: pointer;
       color: currentcolor;
       transition: var(--bds-animation_transition);
-      border-radius: 50%;
+      border: var(--alert_dismiss-border, none);
+      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);
     }
@@ -129,7 +130,7 @@ export class BdsAlert extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--alert_dismiss-opacity--hover, 0.7);
       }
     }
   `;

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) {