@momentum-design/components 0.85.9 → 0.85.10

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

@@ -77,6 +77,8 @@ declare class Dialog extends Dialog_base {
     visible: boolean;
     /**
      * The z-index of the dialog
+     *
+     * The backdrop will have z-index of `zIndex - 1`
      * @default 1000
      */
     zIndex: number;
@@ -165,6 +167,13 @@ declare class Dialog extends Dialog_base {
     protected lastActiveElement: HTMLElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Applies the z-index to the dialog and backdrop elements.
+     * The dialog will have a z-index of `zIndex` and the backdrop will have a z-index of `zIndex - 1`.
+     *
+     * @internal
+     */
+    private applyZIndex;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     /**

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

@@ -90,6 +90,8 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.visible = DEFAULTS.VISIBLE;
         /**
          * The z-index of the dialog
+         *
+         * The backdrop will have z-index of `zIndex - 1`
          * @default 1000
          */
         this.zIndex = DEFAULTS.Z_INDEX;
@@ -203,11 +205,22 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.focusBackToTrigger();
         DialogEventManager.onDestroyedDialog(this);
     }
+    /**
+     * Applies the z-index to the dialog and backdrop elements.
+     * The dialog will have a z-index of `zIndex` and the backdrop will have a z-index of `zIndex - 1`.
+     *
+     * @internal
+     */
+    applyZIndex() {
+        var _a;
+        this.style.setProperty('z-index', `${this.zIndex}`);
+        (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.style.setProperty('z-index', `${this.zIndex - 1}`);
+    }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.setAttribute('aria-modal', 'true');
         this.setupAriaLabelledDescribedBy();
-        this.style.zIndex = `${this.zIndex}`;
+        this.applyZIndex();
         DialogEventManager.onCreatedDialog(this);
     }
     async updated(changedProperties) {
@@ -221,7 +234,12 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
             await this.isOpenUpdated(oldValue, this.visible);
         }
         if (changedProperties.has('zIndex')) {
-            this.setAttribute('z-index', `${this.zIndex}`);
+            // If zIndex is not set, use the default value
+            // This is to ensure that the dialog has always a z-index set even if not explicitly defined
+            if (this.zIndex === null) {
+                this.zIndex = DEFAULTS.Z_INDEX;
+            }
+            this.applyZIndex();
         }
         if (changedProperties.has('variant')) {
             this.updateFooterButtonColors(this.variant);

package/dist/custom-elements.json

@@ -9579,7 +9579,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The z-index of the dialog",
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
               "default": "1000",
               "attribute": "z-index",
               "reflects": true
@@ -10369,7 +10369,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The z-index of the dialog",
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
               "default": "1000",
               "fieldName": "zIndex"
             },

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.85.9"
+  "version": "0.85.10"
 }