@momentum-design/components 0.129.46 → 0.129.47

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

@@ -136,7 +136,7 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
      * Override this to make sure this stays on top of other components.
      * @default 1000
      */
-    popoverZIndex: number;
+    popoverZIndex?: number;
     /**
      * ID of the element where the backdrop will be appended to.
      * This is useful to ensure that the backdrop is appended to the correct element in the DOM.

package/dist/components/combobox/combobox.component.js

@@ -152,7 +152,7 @@ class Combobox extends KeyToActionMixin(CaptureDestroyEventForChildElement(AutoF
          * Override this to make sure this stays on top of other components.
          * @default 1000
          */
-        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        this.popoverZIndex = undefined;
         /** @internal */
         this.isOpen = false;
         /** @internal */
@@ -468,10 +468,7 @@ class Combobox extends KeyToActionMixin(CaptureDestroyEventForChildElement(AutoF
                 if (activeIndex !== -1) {
                     this.updateOptionAttributes(options[activeIndex], false);
                 }
-                if (options.length && this.shouldDisplayPopover(options.length)) {
-                    this.closePopover();
-                }
-                else {
+                if (!(options.length && this.shouldDisplayPopover(options.length))) {
                     this.resetSelectedValue();
                     // clear the visible value
                     this.filteredValue = '';

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValues, nothing } from 'lit';
 import { Component } from '../../models';
+import { StackChange, type StackedOverlayComponent } from '../../utils/controllers/DepthManager';
 import type { DialogRole, DialogSize, DialogVariant } from './dialog.types';
 declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/focus/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
 /**
@@ -74,11 +75,15 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred
  */
-declare class Dialog extends Dialog_base {
+declare class Dialog extends Dialog_base implements StackedOverlayComponent {
     /** @internal */
     protected readonly responsiveSettingsContext: import("@lit/context").ContextConsumer<{
         __context__: import("../responsivesettingsprovider/responsivesettingsprovider.types").ResponsiveSettings;
     }, import("lit").ReactiveElement>;
+    /** track the depth of the popover for z-index calculation
+     * @internal
+     */
+    private depthManager;
     /**
      * The unique ID of the dialog
      */
@@ -97,12 +102,18 @@ declare class Dialog extends Dialog_base {
      */
     visible: boolean;
     /**
-     * The z-index of the dialog
+     * The internal z-index of the dialog.
+     * @internal
+     */
+    private internalZIndex?;
+    /**
+     * The effective z-index of the dialog.
      *
-     * The backdrop will have z-index of `zIndex - 1`
-     * @default 1000
+     * If no explicit `z-index` value is provided, then it automatically calculated
+     * to ensure proper stacking order among multiple overlays.
      */
-    zIndex: number;
+    get zIndex(): number;
+    set zIndex(value: number);
     /**
      * The internal value helps to restore original size when responsive settings disabled.
      *
@@ -203,8 +214,7 @@ declare class Dialog extends Dialog_base {
     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`.
+     * Applies the z-index to the dialog element.
      *
      * @internal
      */
@@ -239,6 +249,8 @@ declare class Dialog extends Dialog_base {
      * @param event - The keyboard event.
      */
     private onEscapeKeydown;
+    /** @internal */
+    onComponentStackChanged(changed: StackChange): void;
     /**
      * Handles the dialog visibility change.
      * Handles the exit event to close the dialog.

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

@@ -19,6 +19,7 @@ import { FooterMixin } from '../../utils/mixins/FooterMixin';
 import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
 import providerUtils from '../../utils/provider';
 import ResponsiveSettingsProvider from '../responsivesettingsprovider';
+import { DepthManager } from '../../utils/controllers/DepthManager';
 import { DEFAULTS } from './dialog.constants';
 import { DialogEventManager } from './dialog.events';
 import styles from './dialog.styles';
@@ -104,6 +105,10 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             subscribe: true,
             syncProperties: ['size'],
         });
+        /** track the depth of the popover for z-index calculation
+         * @internal
+         */
+        this.depthManager = new DepthManager(this);
         /**
          * The unique ID of the dialog
          */
@@ -115,13 +120,6 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          * @default false
          */
         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;
         /**
          * The internal value helps to restore original size when responsive settings disabled.
          *
@@ -211,7 +209,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          * @param event - The keyboard event.
          */
         this.onEscapeKeydown = (event) => {
-            if (!this.visible || event.code !== 'Escape') {
+            if (!this.visible || event.code !== 'Escape' || !this.depthManager.isHostOnTop()) {
                 return;
             }
             event.preventDefault();
@@ -221,6 +219,21 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             this.closeDialog();
         };
     }
+    /**
+     * The effective z-index of the dialog.
+     *
+     * If no explicit `z-index` value is provided, then it automatically calculated
+     * to ensure proper stacking order among multiple overlays.
+     */
+    get zIndex() {
+        if (!Number.isInteger(this.internalZIndex)) {
+            return this.depthManager.getHostZIndex();
+        }
+        return this.internalZIndex;
+    }
+    set zIndex(value) {
+        this.internalZIndex = value;
+    }
     /**
      * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
      * @default small
@@ -251,15 +264,12 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
         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`.
+     * Applies the z-index to the dialog element.
      *
      * @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);
@@ -350,8 +360,18 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
      * has to be done by the consumer of the component.
      */
     closeDialog() {
+        this.depthManager.popHost();
         DialogEventManager.onCloseDialog(this, false);
     }
+    /** @internal */
+    onComponentStackChanged(changed) {
+        if (changed === 'removed') {
+            this.visible = false;
+        }
+        else if (changed === 'moved') {
+            this.requestUpdate('zIndex');
+        }
+    }
     /**
      * Handles the dialog visibility change.
      * Handles the exit event to close the dialog.
@@ -365,6 +385,10 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             return;
         }
         if (newValue && !oldValue) {
+            if (this.depthManager.pushHost()) {
+                // request update to trigger zIndex recalculation
+                this.requestUpdate('zIndex');
+            }
             // Store the currently focused element before opening the dialog
             this.lastActiveElement = document.activeElement;
             // create backdrop if enabled
@@ -384,6 +408,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             DialogEventManager.onShowDialog(this);
         }
         else if (!newValue && oldValue) {
+            this.depthManager.popHost();
             // Always remove backdrop if it exists, regardless of current hideBackdrop value
             // This handles the case where hideBackdrop was changed while dialog was open
             this.removeBackdrop();
@@ -481,8 +506,9 @@ __decorate([
 ], Dialog.prototype, "visible", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'z-index' }),
-    __metadata("design:type", Number)
-], Dialog.prototype, "zIndex", void 0);
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], Dialog.prototype, "zIndex", null);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String),

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

@@ -1,5 +1,6 @@
 import type { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
+import { DepthManager } from '../../utils/controllers/DepthManager';
 declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & typeof Component;
 /**
  * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
@@ -25,9 +26,14 @@ declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor
  * @slot default - Contains the menu items and their associated popovers
  */
 declare class MenuBar extends MenuBar_base {
+    /** track the depth of the popover for z-index calculation
+     * @internal
+     */
+    protected depthManager: DepthManager;
     menusections: Array<HTMLElement>;
     constructor();
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
     /**
      * Returns all menuitem elements, including those nested inside menusection.
      */

package/dist/components/menubar/menubar.component.js

@@ -15,7 +15,7 @@ import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { TAG_NAME as SIDENAV_TAGNAME } from '../sidenavigation/sidenavigation.constants';
-import { popoverStack } from '../popover/popover.stack';
+import { DepthManager } from '../../utils/controllers/DepthManager';
 import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, TAG_NAME as MENUBAR_TAGNAME } from './menubar.constants';
 import styles from './menubar.styles';
@@ -45,7 +45,29 @@ import styles from './menubar.styles';
 class MenuBar extends KeyToActionMixin(Component) {
     constructor() {
         super();
-        this.addEventListener('click', this.handleClick.bind(this));
+        /** track the depth of the popover for z-index calculation
+         * @internal
+         */
+        this.depthManager = new DepthManager(this);
+        /**
+         * Closes all other submenus on the top level.
+         * This method is used to ensure that only one topolevel submenu is open at a time.
+         * It finds all other menu items with submenus and closes their submenus.
+         * @param target - The target menu item that was clicked.
+         */
+        this.handleClick = (event) => {
+            // Event is triggered from within the menubar
+            if (event.composed && event.composedPath().find(el => el === this)) {
+                const target = event.target;
+                if (!target || !this.isTopLevelMenuItem(target))
+                    return;
+                const otherMenuItemsOnTop = this.menuItems.filter(item => item !== target);
+                const otherOpenSubMenus = this.getVisibleSubMenusOfItems(otherMenuItemsOnTop);
+                otherOpenSubMenus.forEach(subMenu => {
+                    subMenu.hide();
+                });
+            }
+        };
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
     async connectedCallback() {
@@ -53,12 +75,17 @@ class MenuBar extends KeyToActionMixin(Component) {
         super.connectedCallback();
         this.role = ROLE.MENUBAR;
         this.ariaOrientation = DEFAULTS.ORIENTATION;
+        document.addEventListener('click', this.handleClick, { capture: true });
         await this.updateComplete;
         // to make sure menusection dividers have the correct divider variant
         (_a = this.menusections) === null || _a === void 0 ? void 0 : _a.forEach(section => {
             section.setAttribute('divider-variant', 'gradient');
         });
     }
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleClick, { capture: true });
+    }
     /**
      * Returns all menuitem elements, including those nested inside menusection.
      */
@@ -128,22 +155,6 @@ class MenuBar extends KeyToActionMixin(Component) {
         this.resetTabIndexAndSetActiveTabIndex(this.menuItems);
         this.updatePopoverPlacement();
     }
-    /**
-     * Closes all other submenus on the top level.
-     * This method is used to ensure that only one topolevel submenu is open at a time.
-     * It finds all other menu items with submenus and closes their submenus.
-     * @param target - The target menu item that was clicked.
-     */
-    handleClick(event) {
-        const target = event.target;
-        if (!target || !this.isTopLevelMenuItem(target))
-            return;
-        const otherMenuItemsOnTop = this.menuItems.filter(item => item !== target);
-        const otherOpenSubMenus = this.getVisibleSubMenusOfItems(otherMenuItemsOnTop);
-        otherOpenSubMenus.forEach(subMenu => {
-            subMenu.hide();
-        });
-    }
     /**
      * Resets all list items tabindex to -1 and sets the tabindex of the
      * element at the given index to 0, effectively setting the active
@@ -228,14 +239,7 @@ class MenuBar extends KeyToActionMixin(Component) {
         return !!element.closest(MENUPOPOVER_TAGNAME) && element.role === ROLE.MENUITEM;
     }
     async closeAllMenuPopovers() {
-        const popovers = [];
-        while (popoverStack.peek()) {
-            const popover = popoverStack.pop();
-            if (popover) {
-                popover.hide();
-                popovers.push(popover);
-            }
-        }
+        const popovers = this.depthManager.popUntil(item => this.contains(item));
         await Promise.all(popovers.map(popover => popover.updateComplete));
     }
     async crossMenubarNavigationOnLeft(element) {

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

@@ -109,7 +109,7 @@ declare class MenuPopover extends Popover {
      * Closes all menu popovers in the stack.
      * This method is used to ensure that when a menu item is clicked,
      * all other open popovers are closed, maintaining a clean user interface.
-     * It iterates through the `popoverStack` and hides each popover until the stack is empty.
+     * It iterates through the overlay stack and hides each popover until the stack is empty.
      *
      * @param until - The popover to close until.
      */

package/dist/components/menupopover/menupopover.component.js

@@ -16,7 +16,6 @@ import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuit
 import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
-import { popoverStack } from '../popover/popover.stack';
 import { ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
@@ -99,7 +98,7 @@ class MenuPopover extends Popover {
          * @param event - The mouse event that triggered the outside click.
          */
         this.onOutsidePopoverClick = (event) => {
-            if (popoverStack.peek() !== this)
+            if (!this.depthManager.isHostOnTop())
                 return;
             const path = event.composedPath();
             const insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement) || path.includes(this);
@@ -117,13 +116,20 @@ class MenuPopover extends Popover {
          */
         this.togglePopoverVisible = (event) => {
             var _a;
-            if (((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled')) || !this.isEventFromTrigger(event))
+            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled'))
                 return;
-            if (this.visible) {
-                this.hide();
+            // Handle mouse click in the parent menupopover to hide open sibling submenus
+            if (event.composedPath().find(el => el.tagName === this.tagName) === this) {
+                this.handleMouseClick(event);
             }
-            else {
-                this.show();
+            // Toggle visibility of the current menupopover
+            if (this.isEventFromTrigger(event)) {
+                if (this.visible) {
+                    this.hide();
+                }
+                else {
+                    this.show();
+                }
             }
         };
         this.handleItemCreation = (event) => {
@@ -220,8 +226,10 @@ class MenuPopover extends Popover {
                     break;
                 }
                 case ACTIONS.ESCAPE: {
-                    this.resetTabIndexAndSetFocus(0, currentIndex);
-                    isKeyHandled = true;
+                    if (this.depthManager.isHostOnTop()) {
+                        this.resetTabIndexAndSetFocus(0, currentIndex);
+                        isKeyHandled = true;
+                    }
                     break;
                 }
                 case ACTIONS.ENTER: {
@@ -289,7 +297,6 @@ class MenuPopover extends Popover {
         };
         this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('keyup', this.handleKeyUp);
-        this.addEventListener('click', this.handleMouseClick);
         this.addEventListener('created', this.handleItemCreation);
     }
     /**
@@ -419,22 +426,12 @@ class MenuPopover extends Popover {
      * Closes all menu popovers in the stack.
      * This method is used to ensure that when a menu item is clicked,
      * all other open popovers are closed, maintaining a clean user interface.
-     * It iterates through the `popoverStack` and hides each popover until the stack is empty.
+     * It iterates through the overlay stack and hides each popover until the stack is empty.
      *
      * @param until - The popover to close until.
      */
     closeAllMenuPopovers(until) {
-        while (popoverStack.peek() !== until) {
-            if (!isValidMenuPopover(popoverStack.peek()))
-                break;
-            const popover = popoverStack.pop();
-            if (popover) {
-                popover.hide();
-            }
-            else {
-                break;
-            }
-        }
+        this.depthManager.popUntil(item => item !== until && isValidMenuPopover(item));
     }
     /**
      * Closes all other submenus on the same level as the target menu item.
@@ -468,8 +465,6 @@ class MenuPopover extends Popover {
      */
     handleMouseClick(event) {
         const target = event.target;
-        // stopPropagation to prevent the click from bubbling up to parent elements
-        event.stopPropagation();
         // if the target is not a valid menu item or if the event is not trusted (
         // e.g., triggered by keydown originally), do nothing. Pressing space and enter
         // is handled separately in the respective handler.

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
+import { DepthManager, StackChange } from '../../utils/controllers/DepthManager';
 import type { PopoverBoundaryRoot, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/focus/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
@@ -77,6 +78,10 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * @csspart popover-hover-bridge - The hover bridge of the popover.
  */
 declare class Popover extends Popover_base {
+    /** track the depth of the popover for z-index calculation
+     * @internal
+     */
+    protected depthManager: DepthManager;
     /**
      * The unique ID of the popover.
      */
@@ -261,20 +266,16 @@ declare class Popover extends Popover_base {
      * @default false
      */
     size: boolean;
+    /**
+     * The internal z-index of the popovere.
+     * @internal
+     */
+    private internalZIndex?;
     /**
      * The effective z-index of the popover.
      *
-     * If no explicit `z-index` value is provided, then we calculate
-     * z-index based on the popover’s nesting depth (`popoverDepth`)
-     * to ensure proper stacking order among multiple popovers.
-     *
-     * The formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.
-     * This approach guarantees that each nested popover appears above its parent.
-     * Ex: A root-level popover has a z-index of 1000,
-     *    its first-level child popover will have a z-index of 1003,
-     *    and a second-level child popover will have a z-index of 1006, and so on.
-     *
-     * When a value is explicitly set, it overrides the internally computed value.
+     * If no explicit `z-index` value is provided, then it automatically calculated
+     * to ensure proper stacking order among multiple overlays.
      */
     get zIndex(): number;
     set zIndex(value: number);
@@ -355,20 +356,6 @@ declare class Popover extends Popover_base {
     private floatingUICleanupFunction;
     /** @internal */
     protected shouldSuppressOpening: boolean;
-    /**
-     * The internal z-index of the popover.
-     * @internal
-     */
-    private internalZIndex?;
-    /**
-     * At root-level popover starts with a depth of `0`. Each subsequent
-     * child popover increases the depth by one.
-     *
-     * This value is used to compute stacking order (z-index) dynamically,
-     * ensuring that nested popovers appear above their parent popovers.
-     * @internal
-     */
-    private popoverDepth;
     /** @internal */
     private get connectedTooltip();
     /**
@@ -427,6 +414,8 @@ declare class Popover extends Popover_base {
      * @internal
      */
     private onPopoverFocusOut;
+    /** @internal */
+    onComponentStackChanged(changed: StackChange): void;
     /**
      * Handles the popover visibility change and position the popover.
      * Handles the exit event to close the popover.

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

@@ -18,9 +18,9 @@ import { FocusTrapMixin } from '../../utils/mixins/focus/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { Timers } from '../../utils/controllers/Timers';
 import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
+import { DepthManager } from '../../utils/controllers/DepthManager';
 import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TIMEOUTS, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
-import { popoverStack } from './popover.stack';
 import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
@@ -101,21 +101,12 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
     /**
      * The effective z-index of the popover.
      *
-     * If no explicit `z-index` value is provided, then we calculate
-     * z-index based on the popover’s nesting depth (`popoverDepth`)
-     * to ensure proper stacking order among multiple popovers.
-     *
-     * The formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.
-     * This approach guarantees that each nested popover appears above its parent.
-     * Ex: A root-level popover has a z-index of 1000,
-     *    its first-level child popover will have a z-index of 1003,
-     *    and a second-level child popover will have a z-index of 1006, and so on.
-     *
-     * When a value is explicitly set, it overrides the internally computed value.
+     * If no explicit `z-index` value is provided, then it automatically calculated
+     * to ensure proper stacking order among multiple overlays.
      */
     get zIndex() {
-        if (this.internalZIndex === undefined || !Number.isInteger(this.internalZIndex)) {
-            return DEFAULTS.Z_INDEX + this.popoverDepth * 3;
+        if (!Number.isInteger(this.internalZIndex)) {
+            return this.depthManager.getHostZIndex();
         }
         return this.internalZIndex;
     }
@@ -136,6 +127,10 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
     }
     constructor() {
         super();
+        /** track the depth of the popover for z-index calculation
+         * @internal
+         */
+        this.depthManager = new DepthManager(this);
         /**
          * The unique ID of the popover.
          */
@@ -374,15 +369,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
         this.floatingUICleanupFunction = null;
         /** @internal */
         this.shouldSuppressOpening = false;
-        /**
-         * At root-level popover starts with a depth of `0`. Each subsequent
-         * child popover increases the depth by one.
-         *
-         * This value is used to compute stacking order (z-index) dynamically,
-         * ensuring that nested popovers appear above their parent popovers.
-         * @internal
-         */
-        this.popoverDepth = 0;
         /** @internal */
         this.timers = new Timers(this);
         /** @internal */
@@ -465,7 +451,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             }
             if (this.hideOnEscape) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
-                document.removeEventListener('keydown', this.onEscapeKeydown, { capture: true });
+                document.removeEventListener('keydown', this.onEscapeKeydown);
             }
             if (this.hideOnBlur) {
                 this.removeEventListener('focusout', this.onPopoverFocusOut);
@@ -478,7 +464,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
          * @internal
          */
         this.onOutsidePopoverClick = (event) => {
-            if (popoverStack.peek() !== this)
+            if (!this.depthManager.isHostOnTop())
                 return;
             const path = event.composedPath();
             const insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement) || path.includes(this);
@@ -497,7 +483,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
          * @internal
          */
         this.onEscapeKeydown = (event) => {
-            if (!this.visible || this.getActionForKeyEvent(event) !== ACTIONS.ESCAPE) {
+            if (!this.visible || this.getActionForKeyEvent(event) !== ACTIONS.ESCAPE || !this.depthManager.isHostOnTop()) {
                 return;
             }
             if (!this.propagateEventOnEscape) {
@@ -754,7 +740,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
         }
         this.utils.cleanupAppendTo();
         PopoverEventManager.onDestroyedPopover(this);
-        popoverStack.remove(this);
     }
     async updated(changedProperties) {
         super.updated(changedProperties);
@@ -817,6 +802,15 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             }
         }
     }
+    /** @internal */
+    onComponentStackChanged(changed) {
+        if (changed === 'removed') {
+            this.hide();
+        }
+        else if (changed === 'moved') {
+            this.requestUpdate('zIndex');
+        }
+    }
     /**
      * Handles the popover visibility change and position the popover.
      * Handles the exit event to close the popover.
@@ -831,8 +825,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             return;
         }
         if (newValue && !this.shouldSuppressOpening) {
-            if (popoverStack.peek() !== this) {
-                this.popoverDepth = popoverStack.push(this);
+            if (this.depthManager.pushHost()) {
                 // request update to trigger zIndex recalculation
                 this.requestUpdate('zIndex');
             }
@@ -875,9 +868,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             PopoverEventManager.onShowPopover(this);
         }
         else {
-            if (popoverStack.peek() === this) {
-                popoverStack.pop();
-            }
+            this.depthManager.popHost();
             // cleanup floating-ui on closing the popover
             (_a = this.floatingUICleanupFunction) === null || _a === void 0 ? void 0 : _a.call(this);
             if (this.backdrop) {