@boostdev/design-system-components 2.7.0 → 2.7.1

package/dist/web-components/{chunk-HHHRF2PS.js → chunk-IYGF6CD5.js}

@@ -30,7 +30,7 @@ var BdsRadio = class extends i2 {
       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/dist/web-components/{chunk-OCODKRVZ.js → chunk-KUI55GFB.js}

@@ -96,7 +96,7 @@ var BdsDrawer = class extends i2 {
       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);
     }
@@ -113,7 +113,7 @@ var BdsDrawer = class extends i2 {
 
     @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/dist/web-components/{chunk-ZNKEZIYE.js → chunk-NCPQ7AF3.js}

@@ -89,7 +89,8 @@ var BdsAlert = class extends i2 {
       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);
     }
@@ -106,7 +107,7 @@ var BdsAlert = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--alert_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/dist/web-components/{chunk-RTOS7LLG.js → chunk-PC3IOQAH.js}

@@ -20,9 +20,11 @@ var BdsCard = class extends i2 {
       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
@@ -31,15 +33,11 @@ var BdsCard = class extends i2 {
     .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; }
@@ -72,7 +70,6 @@ var BdsCard = class extends i2 {
   `;
   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" }
@@ -80,7 +77,6 @@ var BdsCard = class extends i2 {
   constructor() {
     super();
     this.variant = "default";
-    this.padding = "medium";
     this.textAlign = "start";
     this.clickable = false;
     this.ariaLabel = "";
@@ -92,7 +88,6 @@ var BdsCard = class extends i2 {
     const classes = [
       "card",
       `--${this.variant}`,
-      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? "--clickable" : ""
     ].filter(Boolean).join(" ");

package/dist/web-components/{chunk-JUKB3BUP.js → chunk-PXZWYO6Z.js}

@@ -28,7 +28,7 @@ var BdsNumberInput = class extends i2 {
       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/dist/web-components/{chunk-EBJM3VD4.js → chunk-QBB6ZX4R.js}

@@ -24,7 +24,7 @@ var BdsTextarea = class extends i2 {
       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/dist/web-components/{chunk-ECW3HHWA.js → chunk-TQ7IQ4GZ.js}

@@ -28,10 +28,15 @@ var BdsPopover = class extends i2 {
       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/dist/web-components/{chunk-AJSXNDAP.js → chunk-X46KL5BK.js}

@@ -17,9 +17,9 @@ var BdsNotificationBanner = class extends i2 {
       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%;
@@ -27,27 +27,27 @@ var BdsNotificationBanner = class extends i2 {
     }
 
     :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 {
@@ -71,9 +71,10 @@ var BdsNotificationBanner = class extends i2 {
       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);
     }
 
@@ -89,7 +90,7 @@ var BdsNotificationBanner = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--banner_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/dist/web-components/{chunk-XNA6WTXG.js → chunk-Y3POAKGS.js}

@@ -30,7 +30,7 @@ var BdsSwitch = class extends i2 {
       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/dist/web-components/{chunk-HGBNDR22.js → chunk-Y7V7LM6R.js}

@@ -17,7 +17,7 @@ var BdsTooltip = class extends i2 {
       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/dist/web-components/index.js

@@ -1,39 +1,39 @@
 import {
   BdsSwitch
-} from "./chunk-XNA6WTXG.js";
+} from "./chunk-Y3POAKGS.js";
 import {
   BdsTextarea
-} from "./chunk-EBJM3VD4.js";
+} from "./chunk-QBB6ZX4R.js";
 import {
   BdsCheckbox
-} from "./chunk-T6AETZRP.js";
+} from "./chunk-3GFWLSLS.js";
 import {
   BdsCombobox
-} from "./chunk-QLZ2362S.js";
+} from "./chunk-CZBIVR4V.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-IYGF6CD5.js";
 import {
   BdsSegmentedControl
 } from "./chunk-2FGATTGT.js";
 import {
   BdsSelect
-} from "./chunk-X3FKVHLK.js";
+} from "./chunk-CM3KYZ6Z.js";
 import {
   BdsSlider
 } from "./chunk-7FMR53BW.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,19 +63,19 @@ 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-F5E3IT7G.js";
 import {
   BdsCollapsible
 } from "./chunk-6I2DBFQ7.js";
 import {
   BdsDialog
-} from "./chunk-N6IMUOY4.js";
+} from "./chunk-65JXQOBA.js";
 import {
   BdsIconWrapper
 } from "./chunk-5TFWOPLH.js";
@@ -87,7 +87,7 @@ import {
 } from "./chunk-5R6IFELV.js";
 import {
   BdsNotificationBanner
-} from "./chunk-AJSXNDAP.js";
+} from "./chunk-X46KL5BK.js";
 import {
   BdsProgress
 } from "./chunk-ITHLKR7Q.js";
@@ -104,7 +104,7 @@ import "./chunk-QPOKHLMQ.js";
 import "./chunk-3S42DZ7W.js";
 import {
   BdsAlert
-} from "./chunk-ZNKEZIYE.js";
+} from "./chunk-NCPQ7AF3.js";
 import {
   BdsAvatar
 } from "./chunk-57TRNCWQ.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));

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-F5E3IT7G.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-CZBIVR4V.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-IYGF6CD5.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-CM3KYZ6Z.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSelect

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

@@ -1,6 +1,6 @@
 import {
   BdsSwitch
-} from "../../chunk-XNA6WTXG.js";
+} from "../../chunk-Y3POAKGS.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-QBB6ZX4R.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-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-notification-banner.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "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);
   }