@boostdev/design-system-components 2.7.0 → 2.8.0

package/dist/web-components/index.js

@@ -1,39 +1,39 @@
 import {
   BdsSwitch
-} from "./chunk-XNA6WTXG.js";
+} from "./chunk-OF6FFGOT.js";
 import {
   BdsTextarea
-} from "./chunk-EBJM3VD4.js";
+} from "./chunk-DZOEPVFT.js";
 import {
   BdsCheckbox
-} from "./chunk-T6AETZRP.js";
+} from "./chunk-3GFWLSLS.js";
 import {
   BdsCombobox
-} from "./chunk-QLZ2362S.js";
+} from "./chunk-UUKSDCYS.js";
 import {
   BdsFileInput
 } from "./chunk-PY62FTRW.js";
 import {
   BdsNumberInput
-} from "./chunk-JUKB3BUP.js";
+} from "./chunk-PXZWYO6Z.js";
 import {
   BdsRadio
-} from "./chunk-HHHRF2PS.js";
+} from "./chunk-JYYRJS2D.js";
 import {
   BdsSegmentedControl
 } from "./chunk-2FGATTGT.js";
 import {
   BdsSelect
-} from "./chunk-X3FKVHLK.js";
+} from "./chunk-ARMKC4BQ.js";
 import {
   BdsSlider
-} from "./chunk-7FMR53BW.js";
+} from "./chunk-7YURXHTS.js";
 import {
   BdsDrawer
-} from "./chunk-OCODKRVZ.js";
+} from "./chunk-KUI55GFB.js";
 import {
   BdsPopover
-} from "./chunk-ECW3HHWA.js";
+} from "./chunk-TQ7IQ4GZ.js";
 import {
   BdsSkipLink
 } from "./chunk-BQLZ7I4G.js";
@@ -51,7 +51,7 @@ import {
 } from "./chunk-YLVTEY23.js";
 import {
   BdsTooltip
-} from "./chunk-HGBNDR22.js";
+} from "./chunk-Y7V7LM6R.js";
 import {
   BdsSeparator
 } from "./chunk-VMMVWLXL.js";
@@ -63,34 +63,34 @@ import {
 } from "./chunk-SOQQ7RVJ.js";
 import {
   BdsAccordion
-} from "./chunk-ZTC6GRP7.js";
+} from "./chunk-BKIHQYJR.js";
 import {
   BdsAccordionItem
-} from "./chunk-UFFCKVZE.js";
+} from "./chunk-FXURM6D5.js";
 import {
   BdsButton
-} from "./chunk-GER5UJOF.js";
+} from "./chunk-ORC56MDY.js";
 import {
   BdsCollapsible
 } from "./chunk-6I2DBFQ7.js";
 import {
   BdsDialog
-} from "./chunk-N6IMUOY4.js";
+} from "./chunk-65JXQOBA.js";
 import {
   BdsIconWrapper
-} from "./chunk-5TFWOPLH.js";
+} from "./chunk-A3RLT3AS.js";
 import {
   BdsLink
 } from "./chunk-CR5PGUHV.js";
 import {
   BdsLoading
-} from "./chunk-5R6IFELV.js";
+} from "./chunk-QLT6MTZF.js";
 import {
   BdsNotificationBanner
-} from "./chunk-AJSXNDAP.js";
+} from "./chunk-X46KL5BK.js";
 import {
   BdsProgress
-} from "./chunk-ITHLKR7Q.js";
+} from "./chunk-X3NQMBAQ.js";
 import {
   BdsProgressCircle
 } from "./chunk-QDST57JC.js";
@@ -104,10 +104,10 @@ import "./chunk-QPOKHLMQ.js";
 import "./chunk-3S42DZ7W.js";
 import {
   BdsAlert
-} from "./chunk-ZNKEZIYE.js";
+} from "./chunk-NCPQ7AF3.js";
 import {
   BdsAvatar
-} from "./chunk-57TRNCWQ.js";
+} from "./chunk-FSZRP43R.js";
 import {
   BdsBadge
 } from "./chunk-QWPACK5L.js";
@@ -116,7 +116,7 @@ import {
 } from "./chunk-Q4T5BJT6.js";
 import {
   BdsCard
-} from "./chunk-RTOS7LLG.js";
+} from "./chunk-PC3IOQAH.js";
 import {
   BdsDescriptionList
 } from "./chunk-AGKJTMJI.js";
@@ -622,6 +622,10 @@ var BdsTable = class extends i2 {
     .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) {
@@ -724,7 +728,7 @@ var BdsPagination = class extends i2 {
       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);
     }
@@ -1153,7 +1157,7 @@ var BdsFormInput = class extends i2 {
       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));
@@ -1372,8 +1376,8 @@ var BdsCarousel = class extends i2 {
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border: none;
-      border-radius: var(--bds-border_radius--full, 9999px);
-      background-color: var(--bds-color_bg--subtle);
+      border-radius: var(--carousel_navBtn-radius, var(--bds-border_radius--circle));
+      background-color: var(--carousel_navBtn-bg, var(--bds-color_bg--subtle));
       color: var(--bds-color_on-bg);
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -1386,7 +1390,7 @@ var BdsCarousel = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .nav-btn:hover {
-        background-color: var(--bds-color_bg--strong);
+        background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--strong));
       }
     }
 
@@ -1411,18 +1415,18 @@ var BdsCarousel = class extends i2 {
     .dot {
       inline-size: 0.5rem;
       block-size: 0.5rem;
-      border-radius: 50%;
+      border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
       border: none;
       padding: 0;
-      background-color: var(--bds-color_bg--strong);
+      background-color: var(--carousel_indicator-bg, var(--bds-color_bg--strong));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
 
     .dot.--active {
-      background-color: var(--bds-color_interactive);
+      background-color: var(--carousel_indicator-bg--active, var(--bds-color_interactive));
       inline-size: 1rem;
-      border-radius: 0.25rem;
+      border-radius: var(--carousel_indicator-radius--active, var(--bds-border_radius--full));
     }
 
     .dot:focus-visible {

package/dist/web-components/interaction/bds-accordion-item.js

@@ -1,6 +1,6 @@
 import {
   BdsAccordionItem
-} from "../chunk-UFFCKVZE.js";
+} from "../chunk-FXURM6D5.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordionItem

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

@@ -1,6 +1,6 @@
 import {
   BdsAccordion
-} from "../chunk-ZTC6GRP7.js";
+} from "../chunk-BKIHQYJR.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordion

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

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

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

@@ -1,6 +1,6 @@
 import {
   BdsDialog
-} from "../chunk-N6IMUOY4.js";
+} from "../chunk-65JXQOBA.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDialog

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

@@ -1,6 +1,6 @@
 import {
   BdsDrawer
-} from "../chunk-OCODKRVZ.js";
+} from "../chunk-KUI55GFB.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDrawer

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

@@ -1,6 +1,6 @@
 import {
   BdsPopover
-} from "../chunk-ECW3HHWA.js";
+} from "../chunk-TQ7IQ4GZ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsPopover

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

@@ -1,6 +1,6 @@
 import {
   BdsTooltip
-} from "../chunk-HGBNDR22.js";
+} from "../chunk-Y7V7LM6R.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTooltip

package/dist/web-components/interaction/form/bds-checkbox.js

@@ -1,6 +1,6 @@
 import {
   BdsCheckbox
-} from "../../chunk-T6AETZRP.js";
+} from "../../chunk-3GFWLSLS.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCheckbox

package/dist/web-components/interaction/form/bds-combobox.js

@@ -1,6 +1,6 @@
 import {
   BdsCombobox
-} from "../../chunk-QLZ2362S.js";
+} from "../../chunk-UUKSDCYS.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCombobox

package/dist/web-components/interaction/form/bds-number-input.js

@@ -1,6 +1,6 @@
 import {
   BdsNumberInput
-} from "../../chunk-JUKB3BUP.js";
+} from "../../chunk-PXZWYO6Z.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsNumberInput

package/dist/web-components/interaction/form/bds-radio.js

@@ -1,6 +1,6 @@
 import {
   BdsRadio
-} from "../../chunk-HHHRF2PS.js";
+} from "../../chunk-JYYRJS2D.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsRadio

package/dist/web-components/interaction/form/bds-select.js

@@ -1,6 +1,6 @@
 import {
   BdsSelect
-} from "../../chunk-X3FKVHLK.js";
+} from "../../chunk-ARMKC4BQ.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSelect

package/dist/web-components/interaction/form/bds-slider.js

@@ -1,6 +1,6 @@
 import {
   BdsSlider
-} from "../../chunk-7FMR53BW.js";
+} from "../../chunk-7YURXHTS.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSlider

package/dist/web-components/interaction/form/bds-switch.js

@@ -1,6 +1,6 @@
 import {
   BdsSwitch
-} from "../../chunk-XNA6WTXG.js";
+} from "../../chunk-OF6FFGOT.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSwitch

package/dist/web-components/interaction/form/bds-textarea.js

@@ -1,6 +1,6 @@
 import {
   BdsTextarea
-} from "../../chunk-EBJM3VD4.js";
+} from "../../chunk-DZOEPVFT.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsTextarea

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

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

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

@@ -1,6 +1,6 @@
 import {
   BdsAvatar
-} from "../chunk-57TRNCWQ.js";
+} from "../chunk-FSZRP43R.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAvatar

package/dist/web-components/ui/bds-card.d.ts

@@ -2,14 +2,13 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 type CardVariant = 'default' | 'elevated' | 'outlined';
-type CardPadding = 'none' | 'small' | 'medium' | 'large';
 type CardTextAlign = 'start' | 'center' | 'end';
 /**
  * `<bds-card>` — framework-agnostic Card layout custom element.
  *
  * 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 @@ 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>
  *
@@ -36,10 +35,6 @@ declare class BdsCard extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        padding: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         textAlign: {
             type: StringConstructor;
             attribute: string;
@@ -55,7 +50,6 @@ declare class BdsCard extends LitElement {
         };
     };
     variant: CardVariant;
-    padding: CardPadding;
     textAlign: CardTextAlign;
     clickable: boolean;
     ariaLabel: string;
@@ -69,4 +63,4 @@ declare global {
     }
 }
 
-export { BdsCard, type CardPadding, type CardTextAlign, type CardVariant };
+export { BdsCard, type CardTextAlign, type CardVariant };

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

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

package/dist/web-components/ui/bds-icon-wrapper.js

@@ -1,6 +1,6 @@
 import {
   BdsIconWrapper
-} from "../chunk-5TFWOPLH.js";
+} from "../chunk-A3RLT3AS.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsIconWrapper

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

@@ -1,6 +1,6 @@
 import {
   BdsLoading
-} from "../chunk-5R6IFELV.js";
+} from "../chunk-QLT6MTZF.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsLoading

package/dist/web-components/ui/bds-notification-banner.js

@@ -1,6 +1,6 @@
 import {
   BdsNotificationBanner
-} from "../chunk-AJSXNDAP.js";
+} from "../chunk-X46KL5BK.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

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

@@ -1,6 +1,6 @@
 import {
   BdsProgress
-} from "../chunk-ITHLKR7Q.js";
+} from "../chunk-X3NQMBAQ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsProgress

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -306,6 +306,7 @@
     "storybook-addon-tag-badges": "^1.4.0",
     "stylelint": "^16",
     "stylelint-config-standard": "^37",
+    "stylelint-declaration-strict-value": "^1.11.1",
     "tsup": "^8",
     "tsx": "^4",
     "typescript": "^5.8",

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

@@ -9,8 +9,8 @@
     justify-content: center;
     margin: var(--bds-space_l) auto var(--bds-space_m);
     background: var(--icon-wrapper-color, var(--bds-color_bg));
-    color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
-    fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
+    color: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
+    fill: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
     position: relative;
     transition: var(--bds-animation_transition);
   }

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,14 +56,15 @@ 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;
-      height: var(--button_height, 3em);
+      block-size: var(--button_height, 3em);
       font-size: var(--button_font-size, inherit);
       white-space: nowrap;
       line-height: 1;
+      scroll-padding-block-end: var(--bds-space_l);
 
       /* Identity tokens — override --button_color + --button_on-color to re-theme */
       --button_color:        var(--bds-color_interactive);
@@ -102,7 +103,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 +113,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);
     }
 
@@ -131,7 +130,7 @@ export class BdsButton extends LitElement {
     .button.is-icon-only {
       aspect-ratio: 1;
       box-sizing: border-box;
-      padding: var(--bds-space_xs);
+      padding: var(--bds-space_xxs);
     }
 
     :host([is-icon-only]) ::slotted(*) {
@@ -182,9 +181,9 @@ export class BdsButton extends LitElement {
       /* Default hover */
       .button.default:hover {
         --button_bg--variant:     var(--button_bg--hover, var(--bds-color_bg));
-        --button_text--variant:   var(--button_text--hover, var(--bds-color_interactive));
+        --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));
+        --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
       }
 
       /* Outline hover */
@@ -200,7 +199,6 @@ export class BdsButton extends LitElement {
     .button:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: var(--bds-border_radius--s);
     }
 
     /* Disabled */

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;