@momentum-design/components 0.129.46 → 0.129.47

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

@@ -92,7 +92,7 @@ declare class Searchpopover extends Searchfield {
      * Override this to make sure this stays on top of other components.
      * @default 1000
      */
-    popoverZIndex: number;
+    popoverZIndex?: number;
     /**
      * The aria-label for the popover within Searchpopover.
      * Use to provide an accessible name for the popover i.e. "Search results".

package/dist/components/searchpopover/searchpopover.component.js

@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import Searchfield from '../searchfield/searchfield.component';
-import { POPOVER_PLACEMENT, DEFAULTS as POPOVER_DEFAULTS } from '../popover/popover.constants';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
 import styles from './searchpopover.styles';
@@ -111,7 +111,7 @@ class Searchpopover extends Searchfield {
          * Override this to make sure this stays on top of other components.
          * @default 1000
          */
-        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        this.popoverZIndex = undefined;
     }
     renderInputElement() {
         var _a, _b;

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

@@ -114,7 +114,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * Override this to make sure this stays on top of other components.
      * @default 1000
      */
-    popoverZIndex: number;
+    popoverZIndex?: number;
     /**
      * Determines whether the dropdown should flip its position when it hits the boundary.
      * @default false

package/dist/components/select/select.component.js

@@ -131,7 +131,7 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
          * Override this to make sure this stays on top of other components.
          * @default 1000
          */
-        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        this.popoverZIndex = undefined;
         /**
          * Determines whether the dropdown should flip its position when it hits the boundary.
          * @default false
@@ -704,8 +704,10 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
           boundary="${ifDefined(this.boundary)}"
           strategy="${ifDefined(this.strategy)}"
           placement="${this.placement}"
-          @closebyescape="${() => {
-            this.displayPopover = false;
+          @closebyescape="${(event) => {
+            if (event.target === event.currentTarget) {
+                this.displayPopover = false;
+            }
         }}"
           @closebyoutsideclick="${() => {
             this.displayPopover = false;

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

@@ -71,6 +71,7 @@ declare class Tooltip extends Popover {
      * @param changedProperties - The changed properties.
      */
     private onTooltipTypeUpdated;
+    protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     update(changedProperties: PropertyValues<this>): Promise<void>;
     show(): void;
     static styles: Array<CSSResult>;

package/dist/components/tooltip/tooltip.component.js

@@ -164,6 +164,23 @@ class Tooltip extends Popover {
             }
         }
     }
+    async isOpenUpdated(oldValue, newValue) {
+        const { triggerElement } = this;
+        if (oldValue === newValue || !triggerElement) {
+            return;
+        }
+        if (!newValue) {
+            // Timing is critical when the popover pushed/popped from the stack.
+            //
+            // Timing here:
+            // Tooltip closes -> New Popover opens -> Tooltip popped from the stack -> it popes out the new popover as well.
+            //
+            // It happens because by default the popped element automatically pop the element above it in the stack.
+            // To avoid this, we explicitly remove the tooltip from the stack before it is popped.
+            this.depthManager.remove([this]);
+        }
+        await super.isOpenUpdated(oldValue, newValue);
+    }
     async update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('id')) {

package/dist/custom-elements.json

@@ -2525,13 +2525,12 @@
             {
               "kind": "field",
               "name": "zIndex",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - OVERLAY_BACKDROP_Z_INDEX_OFFSET`.\nThe trigger element of the backdrop will have a z-index of `zIndex - OVERLAY_TRIGGER_Z_INDEX_OFFSET`,\nto make sure that it is above the backdrop and clickable.",
+              "attribute": "z-index",
+              "reflects": true,
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Dialog",
                 "module": "components/dialog/dialog.component.js"
@@ -2648,11 +2647,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
+              "description": "The effective z-index of the dialog.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Dialog",
@@ -12458,7 +12453,7 @@
             {
               "kind": "field",
               "name": "zIndex",
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - OVERLAY_BACKDROP_Z_INDEX_OFFSET`.\nThe trigger element of the backdrop will have a z-index of `zIndex - OVERLAY_TRIGGER_Z_INDEX_OFFSET`,\nto make sure that it is above the backdrop and clickable.",
               "attribute": "z-index",
               "reflects": true,
               "type": {
@@ -12862,7 +12857,7 @@
             },
             {
               "name": "z-index",
-              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -13666,10 +13661,10 @@
               "kind": "field",
               "name": "popoverZIndex",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
+              "default": "undefined",
               "description": "The z-index of the popover within Combobox.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
               "attribute": "popover-z-index",
               "reflects": true
             },
@@ -14194,10 +14189,10 @@
             {
               "name": "popover-z-index",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
+              "default": "undefined",
               "description": "The z-index of the popover within Combobox.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
               "fieldName": "popoverZIndex"
             },
             {
@@ -14877,8 +14872,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
+              "description": "The effective z-index of the dialog.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -14944,11 +14938,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
+              "description": "The effective z-index of the dialog.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex"
             },
             {
@@ -22677,27 +22667,16 @@
               ]
             },
             {
-              "kind": "method",
+              "kind": "field",
               "name": "handleClick",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus.",
               "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                },
                 {
                   "description": "The target menu item that was clicked.",
                   "name": "target"
                 }
-              ],
-              "description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
+              ]
             },
             {
               "kind": "method",
@@ -26272,7 +26251,7 @@
                   "description": "The popover to close until."
                 }
               ],
-              "description": "Closes all menu popovers in the stack.\nThis method is used to ensure that when a menu item is clicked,\nall other open popovers are closed, maintaining a clean user interface.\nIt iterates through the `popoverStack` and hides each popover until the stack is empty."
+              "description": "Closes all menu popovers in the stack.\nThis method is used to ensure that when a menu item is clicked,\nall other open popovers are closed, maintaining a clean user interface.\nIt iterates through the overlay stack and hides each popover until the stack is empty."
             },
             {
               "kind": "field",
@@ -26548,7 +26527,7 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "Event"
                   },
                   "description": "The mouse event that triggered the click."
                 }
@@ -27012,7 +26991,7 @@
             {
               "kind": "field",
               "name": "zIndex",
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - OVERLAY_BACKDROP_Z_INDEX_OFFSET`.\nThe trigger element of the backdrop will have a z-index of `zIndex - OVERLAY_TRIGGER_Z_INDEX_OFFSET`,\nto make sure that it is above the backdrop and clickable.",
               "attribute": "z-index",
               "reflects": true,
               "type": {
@@ -27413,7 +27392,7 @@
             },
             {
               "name": "z-index",
-              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -32569,7 +32548,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -32837,7 +32816,7 @@
             },
             {
               "name": "z-index",
-              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex"
             },
             {
@@ -38815,10 +38794,10 @@
               "kind": "field",
               "name": "popoverZIndex",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
+              "default": "undefined",
               "description": "The z-index of the popover within Searchpopover.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
               "attribute": "popover-z-index",
               "reflects": true
             },
@@ -39287,10 +39266,10 @@
             {
               "name": "popover-z-index",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
+              "default": "undefined",
               "description": "The z-index of the popover within Searchpopover.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
               "fieldName": "popoverZIndex"
             },
             {
@@ -40362,10 +40341,10 @@
               "kind": "field",
               "name": "popoverZIndex",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
+              "default": "undefined",
               "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
               "attribute": "popover-z-index",
               "reflects": true
             },
@@ -40840,10 +40819,10 @@
             {
               "name": "popover-z-index",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
+              "default": "undefined",
               "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
               "fieldName": "popoverZIndex"
             },
             {
@@ -48279,7 +48258,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - OVERLAY_BACKDROP_Z_INDEX_OFFSET`.\nThe trigger element of the backdrop will have a z-index of `zIndex - OVERLAY_TRIGGER_Z_INDEX_OFFSET`,\nto make sure that it is above the backdrop and clickable.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -48675,7 +48654,7 @@
             },
             {
               "name": "z-index",
-              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -49412,15 +49391,13 @@
                   "name": "oldValue",
                   "type": {
                     "text": "boolean"
-                  },
-                  "description": "The old value of the visible property."
+                  }
                 },
                 {
                   "name": "newValue",
                   "type": {
                     "text": "boolean"
-                  },
-                  "description": "The new value of the visible property."
+                  }
                 }
               ],
               "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
@@ -49741,7 +49718,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - OVERLAY_BACKDROP_Z_INDEX_OFFSET`.\nThe trigger element of the backdrop will have a z-index of `zIndex - OVERLAY_TRIGGER_Z_INDEX_OFFSET`,\nto make sure that it is above the backdrop and clickable.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -50147,7 +50124,7 @@
             },
             {
               "name": "z-index",
-              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then it automatically calculated\nto ensure proper stacking order among multiple overlays.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -51468,7 +51445,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable."
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - OVERLAY_BACKDROP_Z_INDEX_OFFSET`.\nThe trigger element of the backdrop will have a z-index of `zIndex - OVERLAY_TRIGGER_Z_INDEX_OFFSET`,\nto make sure that it is above the backdrop and clickable."
             }
           ],
           "parameters": [
@@ -52395,6 +52372,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/FocusTrapMixin.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/FooterMixin.js",

package/dist/utils/controllers/DepthManager.d.ts

@@ -0,0 +1,202 @@
+import { ReactiveController } from 'lit';
+import type { Component } from '../../models';
+/**
+ * Types of changes that can occur in the stack
+ *
+ * - 'added': An element was added to the stack, e.g.: pushed
+ * - 'removed': An element was removed from the stack, e.g.: popped or removed
+ * - 'moved': An element's position in the stack changed e.g.: another element above it was removed
+ */
+export type StackChange = 'added' | 'removed' | 'moved';
+/**
+ * A component that can be managed by the DepthManager stack.
+ *
+ * These elements can receive notifications when their position in the stack changes
+ * if they implement the `onComponentStackChanged` callback.
+ */
+export interface StackedOverlayComponent extends Component {
+    /**
+     * Callback invoked when the component's position in the stack changes.
+     *
+     * @param change - The type of change that occurred in the stack.
+     */
+    onComponentStackChanged?: (change: StackChange) => void;
+    /**
+     * ID of the trigger element associated with this overlay component
+     */
+    triggerID?: string;
+}
+/**
+ * Predicate function used to determine whether to pop an item from the stack.
+ * - Returns true to pop the item.
+ * - Returns false to stop popping items.
+ * - Returns 'skip' to skip the item without popping it.
+ */
+type PopPredicateFn = (item: StackedOverlayComponent, idx: number) => true | false | 'skip';
+export declare const OVERLAY_BACKDROP_Z_INDEX_OFFSET = -2;
+export declare const OVERLAY_TRIGGER_Z_INDEX_OFFSET = -1;
+/**
+ * DepthManager is a controller that manages a stack of elements to control their depth (z-index).
+ *
+ * It uses a global stack to keep track of the order of elements, allowing for proper layering of overlays.
+ *
+ * ## Use Case
+ *
+ * ### Pop single overlay
+ *
+ * The easiest one, usually the host removes itself from the stack when it is closed, with the `popHost` method.
+ *
+ * ### Pop until specific overlay
+ *
+ * When the chain of nested popover (e.g.: submenus) opened and the user closes other than the last one,
+ * we have to close all overlays stacked above the specific one. In this case, the `popItem` or directly the `pupUntil` method is used.
+ *
+ * ### Closing "sibling" overlays
+ *
+ * In some cases, multiple overlays can be opened from the same trigger (e.g.: tooltip, context menu, etc.), we can not close
+ * all overlays above the specific one, because they independently opened.
+ *
+ * `popUntil` method can handle this case by skipping the overlays which share the same trigger ID as the specified one.
+ *
+ * ### Manually removing overlays
+ *
+ * When the user switch from one sub-menu to another, we need to close all sub-menus from common parent menu.
+ * DepthManager does not have built-in solution for this case. The host component need to make sure the submenu
+ * hide before the new one is shown.
+ *
+ * @example
+ * ```ts
+ * // Add and remove item based on the disabled state
+ * class Container extends Component {
+ *    private this.depthManager = new DepthManager<>(this);
+ *
+ *    constructor() {
+ *      super();
+ *      this.addEventListener('modified', this.handleModifiedEvent);
+ *    }
+ *
+ *    openOverlay() {
+ *       this.depthManager.pushHost()
+ *    }
+ *
+ *    closeOverlay() {
+ *      this.depthManager.popHost()
+ *    }
+ *
+ *    onComponentStackChanged (change: StackChange) {
+ *       switch (change) {
+ *          case 'added':
+ *             return;
+ *          case 'removed':
+ *             return this.closeOverlay()
+ *          case 'moved':
+ *             return this.requestUpdate('zIndex');
+ *       }
+ *    }
+ * }
+ * ```
+ */
+export declare class DepthManager implements ReactiveController {
+    private readonly host;
+    /**
+     * Creates an instance of DepthManager.
+     */
+    constructor(host: StackedOverlayComponent);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Gets the total number of elements in the stack
+     */
+    get length(): number;
+    /**
+     * Adds host element to the stack
+     *
+     * @returns push was successful (true) or not (false)
+     */
+    pushHost(): boolean;
+    /**
+     * Pops all the items above the host and then pops the host itself
+     *
+     * @returns The host if it was in the stack, undefined otherwise
+     */
+    popHost(): StackedOverlayComponent | undefined;
+    /**
+     * Pops all the items above the specified item and then pops the item itself
+     *
+     * @param item - The item to pop
+     * @returns The item if it was in the stack, undefined otherwise
+     */
+    popItem(item: StackedOverlayComponent): StackedOverlayComponent | undefined;
+    /**
+     * Removes the last element from the stack
+     *
+     * @returns The last element in the stack
+     */
+    pop(): StackedOverlayComponent | undefined;
+    /**
+     * Removes elements from the stack until the predicate function returns false
+     *
+     * Note: it will remove the
+     *
+     * @param predicateFn - The predicate function to test each element
+     * @returns The removed elements
+     */
+    popUntil(predicateFn: PopPredicateFn): StackedOverlayComponent[];
+    /**
+     * Returns the last element in the stack
+     * without removing it
+     *
+     * @returns The last element in the stack
+     */
+    peek(): StackedOverlayComponent | undefined;
+    /**
+     * Removes one or more elements from the stack without popping others.
+     *
+     * It notifies the elements on the stack which were removed and those which changed position.
+     * Items removed in bach, notify moved items only once.
+     *
+     * @param elements - Popover instance
+     * @returns undefined when the element was not found, the removed element otherwise
+     */
+    remove(elements: StackedOverlayComponent[]): StackedOverlayComponent[];
+    /**
+     * Checks if the stack has a specific element
+     *
+     * @param element - Popover instance
+     * @returns True if the stack has the element, false otherwise
+     */
+    has(element: StackedOverlayComponent): boolean;
+    /**
+     * Gets the depth of the host element in the stack
+     */
+    getHostDepth(): number;
+    /**
+     * Gets the depth of the element in the stack
+     * @param element - The element to get the depth of
+     */
+    getElementDepth(element: StackedOverlayComponent): number;
+    /**
+     * Gets the z-index of the host element in the stack
+     */
+    getHostZIndex(): number;
+    /**
+     * Gets the z-index of the element in the stack
+     * @param element - The element to get the z-index of
+     *
+     * @returns The z-index of the element if found, otherwise returns -1
+     */
+    getItemZIndex(element: StackedOverlayComponent): number;
+    /**
+     * Checks if host is at the top of the stack
+     *
+     * @returns True if host is on top, false otherwise
+     */
+    isHostOnTop(): boolean;
+    /**
+     * Clears the stack
+     *
+     * Pops all elements from the stack one-by-one.
+     */
+    clear(): void;
+}
+export {};