@momentum-design/components 0.133.1 → 0.133.3

package/dist/components/dialog/dialog.component.d.ts

@@ -57,6 +57,7 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
  * @cssproperty --mdc-dialog-height - height of the dialog
+ * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @csspart body - The body section of the dialog.
  * @csspart description-text - The description text of the dialog.

package/dist/components/dialog/dialog.component.js

@@ -79,6 +79,7 @@ import styles from './dialog.styles';
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
  * @cssproperty --mdc-dialog-height - height of the dialog
+ * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @csspart body - The body section of the dialog.
  * @csspart description-text - The description text of the dialog.

package/dist/components/dialog/dialog.styles.js

@@ -9,6 +9,8 @@ const styles = css `
     --mdc-dialog-width: 27rem; /* Default to small */
     --mdc-dialog-height: auto;
     --mdc-dialog-padding: 1.5rem;
+    --mdc-dialog-backdrop-color: var(--mds-color-theme-common-overlays-secondary-normal);
+    --mdc-backdrop-mixin-background-color: var(--mdc-dialog-backdrop-color);
 
     background-color: var(--mdc-dialog-primary-background-color);
     border: 0.0625rem solid var(--mdc-dialog-border-color);

package/dist/components/popover/popover.component.d.ts

@@ -71,6 +71,7 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * @cssproperty --mdc-popover-max-width - max width of the popover
  * @cssproperty --mdc-popover-max-height - max height of the popover
  * @cssproperty --mdc-popover-width - width of the popover
+ * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @slot - Default slot for the popover content
  *

package/dist/components/popover/popover.component.js

@@ -91,6 +91,7 @@ import { PopoverUtils } from './popover.utils';
  * @cssproperty --mdc-popover-max-width - max width of the popover
  * @cssproperty --mdc-popover-max-height - max height of the popover
  * @cssproperty --mdc-popover-width - width of the popover
+ * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @slot - Default slot for the popover content
  *

package/dist/components/popover/popover.styles.js

@@ -13,6 +13,8 @@ const styles = css `
     --mdc-popover-width: unset;
     --mdc-popover-max-width: max-content;
     --mdc-popover-max-height: auto;
+    --mdc-popover-backdrop-color: var(--mds-color-theme-common-overlays-secondary-normal);
+    --mdc-backdrop-mixin-background-color: var(--mdc-popover-backdrop-color);
 
     display: none;
     position: absolute;

package/dist/components/tab/tab.component.d.ts

@@ -51,10 +51,9 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */
@@ -94,20 +93,7 @@ declare class Tab extends Tab_base {
      * @default undefined
      */
     tabId?: string;
-    /**
-     * @internal
-     */
-    private prevIconName?;
     connectedCallback(): void;
-    /**
-     * Modifies the icon name based on the active state.
-     * If the tab is active, the icon name is suffixed with '-filled'.
-     * If the tab is inactive, the icon name is restored to its original value.
-     * If '-filled' icon is not available, the icon name remains unchanged.
-     *
-     * @param active - The active state.
-     */
-    private modifyIconName;
     /**
      * Sets the variant attribute for the tab component.
      * If the provided variant is not included in the TAB_VARIANTS,
@@ -122,15 +108,7 @@ declare class Tab extends Tab_base {
      * @param active - The active state of the tab.
      */
     private handleTabActiveChange;
-    /**
-     * Sets the aria-selected attribute based on the active state of the Tab.
-     * If the tab is active, the filled version of the icon is displayed,
-     * else the icon is restored to its original value.
-     *
-     * @param element - The tab element.
-     * @param active - The active state of the tab.
-     */
-    protected setActive(element: HTMLElement, active: boolean): void;
+    private getFilledIconName;
     protected executeAction(): void;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/tab/tab.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -66,10 +67,9 @@ import styles from './tab.styles';
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */
@@ -121,25 +121,6 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
             this.onerror('tab id is required');
         }
     }
-    /**
-     * Modifies the icon name based on the active state.
-     * If the tab is active, the icon name is suffixed with '-filled'.
-     * If the tab is inactive, the icon name is restored to its original value.
-     * If '-filled' icon is not available, the icon name remains unchanged.
-     *
-     * @param active - The active state.
-     */
-    modifyIconName(active) {
-        if (this.iconName) {
-            if (active) {
-                this.prevIconName = this.iconName;
-                this.iconName = `${getIconNameWithoutStyle(this.iconName)}-filled`;
-            }
-            else if (this.prevIconName) {
-                this.iconName = this.prevIconName;
-            }
-        }
-    }
     /**
      * Sets the variant attribute for the tab component.
      * If the provided variant is not included in the TAB_VARIANTS,
@@ -150,17 +131,16 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
     setVariant(variant) {
         this.setAttribute('variant', Object.values(TAB_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
     }
-    /**
-     * Sets the aria-selected attribute based on the active state of the Tab.
-     * If the tab is active, the filled version of the icon is displayed,
-     * else the icon is restored to its original value.
-     *
-     * @param element - The tab element.
-     * @param active - The active state of the tab.
-     */
-    setActive(element, active) {
-        super.setActive(element, active);
-        this.modifyIconName(active);
+    getFilledIconName() {
+        if (!this.iconName) {
+            return undefined;
+        }
+        const isFilled = this.iconName.endsWith('-filled');
+        if (isFilled) {
+            return undefined;
+        }
+        const baseIcon = getIconNameWithoutStyle(this.iconName);
+        return `${baseIcon}-filled`;
     }
     executeAction() {
         // Toggle the active state of the tab.
@@ -178,7 +158,22 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
         <div part="leading">
           <slot name="prefix">
             ${this.iconName
-            ? html ` <mdc-icon name="${this.iconName}" size="1" length-unit="rem" part="icon"></mdc-icon>`
+            ? html `
+                  <div part="icon-container">
+                    <mdc-icon
+                      name="${this.iconName}"
+                      size="1"
+                      length-unit="rem"
+                      part="regular-icon"
+                    ></mdc-icon>
+                    <mdc-icon
+                      name="${ifDefined(this.getFilledIconName())}"
+                      size="1"
+                      length-unit="rem"
+                      part="filled-icon"
+                    ></mdc-icon>
+                  </div>
+                `
             : nothing}
           </slot>
           ${this.text

package/dist/components/tab/tab.styles.js

@@ -44,6 +44,26 @@ const styles = [
       justify-content: var(--mdc-tab-content-justification);
     }
 
+    :host::part(icon-container) {
+      position: relative;
+    }
+
+    :host([active])::part(regular-icon) {
+      display: none;
+    }
+
+    :host([active])::part(filled-icon) {
+      display: block;
+    }
+
+    :host::part(regular-icon) {
+      display: block;
+    }
+
+    :host::part(filled-icon) {
+      display: none;
+    }
+
     :host::part(leading),
     :host::part(trailing) {
       display: flex;

package/dist/custom-elements.json

@@ -2083,6 +2083,14 @@
                 "name": "Dialog",
                 "module": "src/components/dialog/dialog.component.ts"
               }
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-dialog-backdrop-color",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -12281,6 +12289,14 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-popover-backdrop-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "slots": [
@@ -16372,6 +16388,10 @@
             {
               "description": "height of the dialog",
               "name": "--mdc-dialog-height"
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-dialog-backdrop-color"
             }
           ],
           "cssParts": [
@@ -16939,7 +16959,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * ## Visibility\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerID` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * ## Accessibility\n *\n * Some attributes have to be explicitly set by the consumer of the component:\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * ## Responsive design\n *\n * Dialog has few built in logic to prevent content clipping on small screens\n *\n * - maximum height limited to the viewport height\n * - dialog body has `overflow: auto` by default\n * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more\n *\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The body section of the dialog.\n * @csspart description-text - The description text of the dialog.\n * @csspart dialog-close-btn - The close button of the dialog.\n * @csspart header - The header of the dialog.\n * @csspart header-section - The header section of the dialog.\n * @csspart header-text - The header text of the dialog.\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * ## Visibility\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerID` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * ## Accessibility\n *\n * Some attributes have to be explicitly set by the consumer of the component:\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * ## Responsive design\n *\n * Dialog has few built in logic to prevent content clipping on small screens\n *\n * - maximum height limited to the viewport height\n * - dialog body has `overflow: auto` by default\n * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more\n *\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)\n *\n * @csspart body - The body section of the dialog.\n * @csspart description-text - The description text of the dialog.\n * @csspart dialog-close-btn - The close button of the dialog.\n * @csspart header - The header of the dialog.\n * @csspart header-section - The header section of the dialog.\n * @csspart header-text - The header text of the dialog.\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
           "customElement": true
         }
       ],
@@ -29303,6 +29323,14 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-popover-backdrop-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ]
         }
@@ -33671,6 +33699,10 @@
             {
               "description": "width of the popover",
               "name": "--mdc-popover-width"
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-popover-backdrop-color"
             }
           ],
           "cssParts": [
@@ -34597,7 +34629,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-popover",
-          "jsDoc": "/**\n * Popover is generic overlay which can be triggered by any actionable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popovers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n *    </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <div>\n *        <Popover append-to=\"some-element-id\">...</mdc-popover>\n *      <div>}\n *    </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
+          "jsDoc": "/**\n * Popover is generic overlay which can be triggered by any actionable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popovers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n *    </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <div>\n *        <Popover append-to=\"some-element-id\">...</mdc-popover>\n *      <div>}\n *    </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
           "customElement": true
         }
       ],
@@ -45488,8 +45520,12 @@
               "name": "container"
             },
             {
-              "description": "The icon of the tab.",
-              "name": "icon"
+              "description": "The icon of the tab, if inactive.",
+              "name": "regular-icon"
+            },
+            {
+              "description": "The icon of the tab, if active.",
+              "name": "filled-icon"
             },
             {
               "description": "The indicator of the tab.",
@@ -45570,6 +45606,16 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "getFilledIconName",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "IconNames | undefined"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "handleBlur",
@@ -45645,26 +45691,6 @@
                 "module": "utils/mixins/IconNameMixin.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "modifyIconName",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "active",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state."
-                }
-              ],
-              "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
-            },
             {
               "kind": "field",
               "name": "name",
@@ -45704,17 +45730,18 @@
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The tab element."
+                  "description": "The button element"
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The active state of the tab."
+                  "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -46149,7 +46176,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-tab",
-          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n *\n *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
+          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
           "customElement": true,
           "slots": [
             {
@@ -50530,6 +50557,14 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-popover-backdrop-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "slots": [
@@ -51972,6 +52007,14 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "description": "background color of the backdrop (if backdrop is enabled)",
+              "name": "--mdc-popover-backdrop-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "members": [

package/dist/react/dialog/index.d.ts

@@ -55,6 +55,7 @@ import type { Events } from '../../components/dialog/dialog.types';
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
  * @cssproperty --mdc-dialog-height - height of the dialog
+ * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @csspart body - The body section of the dialog.
  * @csspart description-text - The description text of the dialog.

package/dist/react/dialog/index.js

@@ -56,6 +56,7 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
  * @cssproperty --mdc-dialog-height - height of the dialog
+ * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @csspart body - The body section of the dialog.
  * @csspart description-text - The description text of the dialog.

package/dist/react/popover/index.d.ts

@@ -68,6 +68,7 @@ import type { Events } from '../../components/popover/popover.types';
  * @cssproperty --mdc-popover-max-width - max width of the popover
  * @cssproperty --mdc-popover-max-height - max height of the popover
  * @cssproperty --mdc-popover-width - width of the popover
+ * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @slot - Default slot for the popover content
  *

package/dist/react/popover/index.js

@@ -69,6 +69,7 @@ import { TAG_NAME } from '../../components/popover/popover.constants';
  * @cssproperty --mdc-popover-max-width - max width of the popover
  * @cssproperty --mdc-popover-max-height - max height of the popover
  * @cssproperty --mdc-popover-width - width of the popover
+ * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)
  *
  * @slot - Default slot for the popover content
  *

package/dist/react/tab/index.d.ts

@@ -51,10 +51,9 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */

package/dist/react/tab/index.js

@@ -51,10 +51,9 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */

package/dist/utils/mixins/BackdropMixin.js

@@ -37,6 +37,10 @@ export const BackdropMixin = (superClass) => {
             const backdrop = document.createElement('div');
             backdrop.classList.add(`${classNamePrefix}-backdrop`);
             const styleElement = document.createElement('style');
+            const bgColor = this.isBackdropInvisible
+                ? 'transparent'
+                : getComputedStyle(this).getPropertyValue('--mdc-backdrop-mixin-background-color') ||
+                    `var(--mds-color-theme-common-overlays-secondary-normal)`;
             styleElement.textContent = `
         .${classNamePrefix}-backdrop {
           position: fixed;
@@ -44,7 +48,7 @@ export const BackdropMixin = (superClass) => {
           left: 0;
           width: 100%;
           height: 100%;
-          background: ${this.isBackdropInvisible ? `transparent` : `var(--mds-color-theme-common-overlays-secondary-normal)`};
+          background: ${bgColor};
           z-index: ${this.zIndex + OVERLAY_BACKDROP_Z_INDEX_OFFSET};
         }
       `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.1",
+  "version": "0.133.3",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"