@momentum-design/components 0.133.2 → 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/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
         }
       ],
@@ -50525,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": [
@@ -51967,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/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.2",
+  "version": "0.133.3",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"