@globalpayments/vega 2.92.0 → 2.94.0

package/dist/esm/vega-left-nav_5.entry.js

@@ -7,12 +7,13 @@ import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e
 import { e as executeAfterTransition } from './effect-f50e072d.js';
 import { F as FeatureFlag } from './feature-flag-controller-3fd04ea9.js';
 import { j as checkIsVoiceOverClick, k as getFirstFocusableElement, f as findParent } from './ui-d73f756a.js';
+import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
-import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
-import { I as InjectKeyboardManager } from './inject-keyboard-manager-13cc77ab.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-03deba18.js';
-import { U as VegaStateUpdate, W as VegaGroupClick, X as VegaMenuClick, a as VegaClick, Y as VegaActionClick } from './vega-event-id-d3017041.js';
+import { t as tryGetDocument } from './try-get-document-bef0f526.js';
+import { I as InjectKeyboardManager } from './inject-keyboard-manager-86126b5b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
+import { W as VegaStateUpdate, X as VegaGroupClick, Y as VegaMenuClick, a as VegaClick, Z as VegaActionClick } from './vega-event-id-270fe47e.js';
 import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-ac703085.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
 import { J as VegaInternalLeftNavLinkClick, K as VegaInternalLeftNavGroupExpand, L as VegaInternalLeftNavLinkSelected, M as VegaInternalInitializeLeftNavLinkSelected, N as VegaInternalLeftNavLinkSelectedTopic } from './vega-internal-event-id-827eb1ce.js';
@@ -25,32 +26,31 @@ import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-64532d94.js';
 import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-ea34fa7b.js';
-import { f as formatAndValidResponsiveToken } from './design-token-cb5ed6b9.js';
-import './try-get-document-bef0f526.js';
+import { f as formatAndValidResponsiveToken } from './design-token-76bd217c.js';
 import './index-9c9865c0.js';
+import './ui-93922c59.js';
+import './breakpoints-d9faf11c.js';
 import './icon-manager-4ef3f6dd.js';
 import './create-public-api-runtime-metrics-slimmer-48f85199.js';
 import './dynamic-slimmer-90b8af32.js';
 import './misc-9fdbcfbb.js';
 import './number-4398f2e1.js';
-import './ui-93922c59.js';
-import './breakpoints-d9faf11c.js';
-import './keyboard-manager-fe885db1.js';
-import './type-guard-91087018.js';
+import './keyboard-manager-a0c3e1cf.js';
+import './type-guard-ec5e8628.js';
 import './typography-19c3b9be.js';
-import './internal-translation-controller-8e8a514a.js';
+import './internal-translation-controller-16709132.js';
 import './static-subject-title-1c86e974.js';
-import './internal-vega-event-manager-75e5e3bb.js';
+import './internal-vega-event-manager-48690e5b.js';
 import './vega-nonce-manager-497e5eb5.js';
 import './index-3b327f29.js';
 import './tinycolor-polyfill-7be0eb93.js';
 import './object-0c277f57.js';
-import './responsive-format-facade-fb424f5b.js';
+import './responsive-format-facade-ced96b0b.js';
 import './pixel-f32c07ce.js';
 import './array-7888f339.js';
-import './state-border-formatter-1a528ca4.js';
+import './state-border-formatter-b680e922.js';
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -65,7 +65,11 @@ class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     /* eslint-disable jsdoc/require-jsdoc*/
     super({
       callback: /* istanbul ignore next */ () => {
+        if (this.showAsOverlay) {
+          return;
+        }
         this.updateMainContentUI(this.openState);
+        this.backdropManager.watchOpenState(this.openState);
       },
     });
     this.isVoiceOverClick = false;
@@ -118,6 +122,7 @@ class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   watchOpenState(newState) {
+    this.backdropManager.watchOpenState(newState);
     this.updateMainContentUI(newState);
     if (newState === 'open') {
       this.open = true;
@@ -138,6 +143,7 @@ class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   watchShowAsOverlay() {
+    this.backdropManager.watchShowAsOverlay();
     this.updateMainContentUI(this.openState);
   }
   /**
@@ -215,7 +221,7 @@ class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
       this.host.style.display = 'flex';
       setTimeout(() => {
         this.host.classList.add('open');
-        if (mainContent && !this.backdropController.shouldShowBackdrop()) {
+        if (mainContent && !this.shouldShowBackdrop()) {
           bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.remove('vega-overflow-hidden');
           mainContent.classList.add('open');
         }
@@ -236,38 +242,45 @@ class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
       }, this.host);
     }
   }
+  shouldShowBackdrop() {
+    const breakpoint = getCurrentBreakpoint();
+    return this.showAsOverlay || (breakpoint !== 'L' && breakpoint !== 'XL');
+  }
 }
-__decorate$n([
+__decorate$p([
   MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "host", void 0);
-__decorate$n([
+__decorate$p([
   MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "open", void 0);
-__decorate$n([
+__decorate$p([
   MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "openState", void 0);
-__decorate$n([
+__decorate$p([
   MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
   MapToComponentField()
-], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);
-__decorate$n([
+], VegaLeftNavOpenStateController.prototype, "showAsOverlay", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaLeftNavOpenStateController.prototype, "backdropManager", void 0);
+__decorate$p([
   MapToComponentMethod('componentDidLoad')
 ], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);
-__decorate$n([
+__decorate$p([
   MapToComponentMethod('componentDidRender')
 ], VegaLeftNavOpenStateController.prototype, "componentDidRender", null);
-__decorate$n([
+__decorate$p([
   MapToComponentMethod('toggle')
 ], VegaLeftNavOpenStateController.prototype, "toggle", null);
-__decorate$n([
+__decorate$p([
   MapToComponentMethod('watchOpen')
 ], VegaLeftNavOpenStateController.prototype, "watchOpen", null);
-__decorate$n([
+__decorate$p([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavOpenStateController.prototype, "watchOpenState", null);
-__decorate$n([
+__decorate$p([
   MapToComponentMethod('watchShowAsOverlay')
 ], VegaLeftNavOpenStateController.prototype, "watchShowAsOverlay", null);
 
@@ -283,7 +296,7 @@ const Icons = {
   },
 };
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -317,20 +330,20 @@ class VegaLeftNavHeaderRenderer extends VegaSlimmer {
 (() => {
   VegaInternalIconManager.register(Icons);
 })();
-__decorate$m([
+__decorate$o([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "host", void 0);
-__decorate$m([
+__decorate$o([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "headerConfig", void 0);
-__decorate$m([
+__decorate$o([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "currentBranding", void 0);
-__decorate$m([
+__decorate$o([
   MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavHeaderRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -349,17 +362,17 @@ class VegaLeftNavFooterRenderer extends VegaSlimmer {
       h("div", { class: "footer-container" }, this.hasFooterSlot ? (h("slot", { name: "footer-slot" })) : (h("div", { class: "footer-footnote" }, this.footnote))))));
   }
 }
-__decorate$l([
+__decorate$n([
   MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "host", void 0);
-__decorate$l([
+__decorate$n([
   MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "footnote", void 0);
-__decorate$l([
+__decorate$n([
   MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavFooterRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -375,7 +388,7 @@ class VegaLeftNavZIndexController extends VegaSlimmer {
    */
   /* istanbul ignore next */
   updateZIndex() {
-    const backDrop = this.backdropController.getBackdrop();
+    const backDrop = this.backdropManager.getBackdrop();
     if (this.openState == 'open') {
       backDrop && InternalVegaZIndexManager.setZIndex(backDrop, 'base');
       InternalVegaZIndexManager.setZIndex(this.host, 'base');
@@ -388,117 +401,308 @@ class VegaLeftNavZIndexController extends VegaSlimmer {
     }
   }
 }
-__decorate$k([
+__decorate$m([
   MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "host", void 0);
-__decorate$k([
+__decorate$m([
   MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "openState", void 0);
-__decorate$k([
+__decorate$m([
   MapToComponentField()
-], VegaLeftNavZIndexController.prototype, "backdropController", void 0);
-__decorate$k([
+], VegaLeftNavZIndexController.prototype, "backdropManager", void 0);
+__decorate$m([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavZIndexController.prototype, "watchOpenState", null);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
+/**
+ * Abstract base slimmer with shared backdrop state.
+ */
+class SharedBackdropManager extends VegaSlimmer {
   /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-left-nav-e2e-resize-with-desktop}
+   * Register this consumer and ensure a shared backdrop exists.
    */
-  constructor() {
-    /* eslint-disable jsdoc/require-jsdoc*/
-    super({
-      callback: /* istanbul ignore next */ () => {
-        this.updateBackdropUI(this.openState);
-      },
-    });
-    this.backdrop = null;
-    /* eslint-enable jsdoc/require-jsdoc*/
-  }
   connectedCallback() {
-    if (!this.backdrop || !this.backdrop.isConnected) {
-      this.backdrop = this.createBackdrop();
+    const managerClass = this.constructor;
+    this.resetStaleSharedState();
+    if (!managerClass.consumers.has(this)) {
+      managerClass.consumers.add(this);
+      managerClass.visibilityIntents.set(this, false);
+      managerClass.consumerCount++;
     }
+    this.ensureBackdrop();
   }
+  /**
+   * Unregister this consumer and remove shared backdrop when last consumer disconnects.
+   */
   disconnectedCallback() {
-    this.backdrop && this.backdrop.remove();
-    this.backdrop = null;
+    var _a;
+    const managerClass = this.constructor;
+    const hasConsumer = managerClass.consumers.has(this);
+    const hadVisibilityIntent = (_a = managerClass.visibilityIntents.get(this)) !== null && _a !== void 0 ? _a : false;
+    managerClass.consumers.delete(this);
+    managerClass.visibilityIntents.delete(this);
+    if (hasConsumer && managerClass.consumerCount > 0) {
+      managerClass.consumerCount--;
+    }
+    if (hadVisibilityIntent && managerClass.visibilityIntentCount > 0) {
+      managerClass.visibilityIntentCount--;
+      this.syncVisibility();
+    }
+    if (managerClass.consumerCount === 0) {
+      this.removeBackdrop();
+    }
+  }
+  /**
+   * Get current backdrop element.
+   *
+   * @returns {Nullable<HTMLVegaBackdropElement>} Backdrop element or null.
+   */
+  getBackdrop() {
+    const managerClass = this.constructor;
+    return managerClass.backdropRef;
+  }
+  /**
+   * Get current connected consumer count.
+   *
+   * @returns {number} Consumer count.
+   */
+  getConsumerCount() {
+    const managerClass = this.constructor;
+    return managerClass.consumerCount;
+  }
+  /**
+   * Clear all shared state and remove backdrop.
+   */
+  clear() {
+    const managerClass = this.constructor;
+    this.removeBackdrop();
+    managerClass.consumerCount = 0;
+    managerClass.visibilityIntentCount = 0;
+  }
+  /**
+   * Set visibility intent for this slimmer consumer.
+   *
+   * @param {boolean} visible - Desired visibility.
+   */
+  setVisibilityIntent(visible) {
+    var _a;
+    const managerClass = this.constructor;
+    const currentIntent = (_a = managerClass.visibilityIntents.get(this)) !== null && _a !== void 0 ? _a : false;
+    if (currentIntent !== visible) {
+      managerClass.visibilityIntents.set(this, visible);
+      if (visible) {
+        managerClass.visibilityIntentCount++;
+      }
+      else {
+        managerClass.visibilityIntentCount--;
+      }
+      this.syncVisibility();
+    }
+  }
+  /**
+   * Ensure a backdrop exists for this subclass and return it.
+   *
+   * @returns {HTMLVegaBackdropElement} Shared backdrop element.
+   */
+  ensureBackdrop() {
+    const managerClass = this.constructor;
+    const doc = tryGetDocument();
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
+      throw new Error('SharedBackdropManager requires a browser document.');
+    }
+    this.resetStaleSharedState();
+    if (managerClass.backdropRef && doc.body.contains(managerClass.backdropRef)) {
+      return managerClass.backdropRef;
+    }
+    const backdrop = this.createBackdrop(doc);
+    managerClass.backdropRef = backdrop;
+    return backdrop;
+  }
+  /**
+   * Remove the shared backdrop for this subclass from the DOM.
+   */
+  removeBackdrop() {
+    var _a;
+    const managerClass = this.constructor;
+    if ((_a = managerClass.backdropRef) === null || _a === void 0 ? void 0 : _a.isConnected) {
+      managerClass.backdropRef.remove();
+    }
+    managerClass.backdropRef = null;
+  }
+  /**
+   * Sync shared backdrop `visible` based on current visibility intents.
+   */
+  syncVisibility() {
+    const managerClass = this.constructor;
+    const shouldShow = managerClass.visibilityIntentCount > 0;
+    if (managerClass.backdropRef) {
+      managerClass.backdropRef.visible = shouldShow;
+    }
   }
+  /**
+   * Reset stale static shared state when the tracked backdrop is no longer in the DOM.
+   */
+  resetStaleSharedState() {
+    const managerClass = this.constructor;
+    const doc = tryGetDocument();
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
+      managerClass.backdropRef = null;
+      managerClass.consumerCount = 0;
+      managerClass.visibilityIntentCount = 0;
+      return;
+    }
+    if (managerClass.backdropRef && !doc.body.contains(managerClass.backdropRef)) {
+      managerClass.backdropRef = null;
+      managerClass.consumerCount = 0;
+      managerClass.visibilityIntentCount = 0;
+    }
+  }
+}
+SharedBackdropManager.backdropRef = null;
+SharedBackdropManager.consumers = new WeakSet();
+SharedBackdropManager.visibilityIntents = new WeakMap();
+SharedBackdropManager.consumerCount = 0;
+SharedBackdropManager.visibilityIntentCount = 0;
+__decorate$l([
+  MapToComponentMethod('connectedCallback')
+], SharedBackdropManager.prototype, "connectedCallback", null);
+__decorate$l([
+  MapToComponentMethod('disconnectedCallback')
+], SharedBackdropManager.prototype, "disconnectedCallback", null);
+
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Left-nav specific backdrop manager — extends SharedBackdropManager to get its own static scope.
+ * Each subclass of SharedBackdropManager gets its own separate static state (consumers, visibility intents, etc).
+ */
+class VegaLeftNavBackdropManager extends SharedBackdropManager {
+  /**
+   * Watch openState changes and update visibility intent.
+   *
+   * @param {LeftNavOpenStateType} newState - The new open state.
+   */
   watchOpenState(newState) {
-    this.updateBackdropUI(newState);
+    const shouldShow = newState === 'open' && this.shouldShowBackdrop();
+    this.setVisibilityIntent(shouldShow);
   }
+  /**
+   * Watch showAsOverlay changes and re-evaluate visibility.
+   */
   watchShowAsOverlay() {
-    this.updateBackdropUI(this.openState);
+    this.watchOpenState(this.openState);
   }
-  getBackdrop() {
-    return this.backdrop;
+  /**
+   * Customize backdrop creation for left-nav use case.
+   *
+   * @param {Document} doc - The document reference.
+   * @returns {HTMLVegaBackdropElement} The created and configured backdrop element.
+   */
+  createBackdrop(doc) {
+    const backdrop = doc.createElement('vega-backdrop');
+    backdrop.classList.add(VegaLeftNavBackdropManager.backdropClassName);
+    backdrop.duration = 150;
+    backdrop.visible = false;
+    doc.body.append(backdrop);
+    return backdrop;
   }
+  /**
+   * Determine if backdrop should be shown based on current state.
+   *
+   * @returns {boolean} True if backdrop should be visible.
+   */
   shouldShowBackdrop() {
-    return this.isLargeScreen() && !this.showAsOverlay ? false : true;
+    return this.showAsOverlay || !this.isLargeScreen();
+  }
+  /**
+   * Check if current breakpoint is large screen.
+   *
+   * @returns {boolean} True if current breakpoint is 'L' or 'XL'.
+   */
+  isLargeScreen() {
+    const breakpoint = getCurrentBreakpoint();
+    return breakpoint === 'L' || breakpoint === 'XL';
+  }
+}
+VegaLeftNavBackdropManager.backdropClassName = 'vega-left-nav-backdrop';
+__decorate$k([
+  MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "openState", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "showAsOverlay", void 0);
+__decorate$k([
+  MapToComponentMethod('watchOpenState')
+], VegaLeftNavBackdropManager.prototype, "watchOpenState", null);
+__decorate$k([
+  MapToComponentMethod('watchShowAsOverlay')
+], VegaLeftNavBackdropManager.prototype, "watchShowAsOverlay", null);
+
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Backdrop click handler controller for left-nav.
+ * Manages backdrop interaction (click events) while the VegaLeftNavBackdropManager
+ * handles visibility state through its slimmer watch methods.
+ */
+class VegaLeftNavBackdropController {
+  constructor() {
+    this.handleBackdropClick = () => {
+      this.openStateController.setOpenState('close');
+    };
+  }
+  connectedCallback() {
+    this.attachBackdropClickEvent();
+  }
+  disconnectedCallback() {
+    this.detachBackdropClickEvent();
   }
   /**
+   * Attach backdrop click event listener.
    * The below method is e2e-test covered in
    * @see{module:vega-left-nav-e2e-vega-click-backdrop}
    */
   /* istanbul ignore next */
-  createBackdrop() {
-    // eslint-disable-next-line no-restricted-globals
-    const backdrop = document.createElement('vega-backdrop');
-    backdrop.visible = false;
-    backdrop.duration = 150;
-    backdrop.addEventListener('vegaClick', () => {
-      this.openStateController.setOpenState('close');
-    });
-    // eslint-disable-next-line no-restricted-globals
-    document.body.append(backdrop);
-    return backdrop;
-  }
-  updateBackdropUI(state) {
-    // eslint-disable-next-line no-restricted-globals
-    const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
-    const backdrop = this.backdrop;
+  attachBackdropClickEvent() {
+    const backdrop = this.backdropManager.getBackdrop();
     if (!backdrop)
       return;
-    if (state === 'open') {
-      backdrop.visible = !mainContent || this.shouldShowBackdrop();
-    }
-    else {
-      backdrop.visible = false;
-    }
+    backdrop.removeEventListener('vegaClick', this.handleBackdropClick);
+    backdrop.addEventListener('vegaClick', this.handleBackdropClick);
   }
-  isLargeScreen() {
-    const currentBreakpoint = getCurrentBreakpoint();
-    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
+  detachBackdropClickEvent() {
+    const backdrop = this.backdropManager.getBackdrop();
+    if (!backdrop)
+      return;
+    backdrop.removeEventListener('vegaClick', this.handleBackdropClick);
   }
 }
 __decorate$j([
   MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "openState", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
+], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
 __decorate$j([
   MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
+], VegaLeftNavBackdropController.prototype, "backdropManager", void 0);
 __decorate$j([
   MapToComponentMethod('connectedCallback')
 ], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
 __decorate$j([
   MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
-__decorate$j([
-  MapToComponentMethod('watchOpenState')
-], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
-__decorate$j([
-  MapToComponentMethod('watchShowAsOverlay')
-], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);
 
 var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -563,9 +767,9 @@ class VegaLeftNavAutoCollapseController extends VegaSlimmer {
     DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalLeftNavLinkClick);
   }
   shouldAutoCollapse() {
-    return (this.autoCollapseOnOverlay &&
-      this.backdropController.shouldShowBackdrop() &&
-      this.openState === 'open');
+    const breakpoint = getCurrentBreakpoint();
+    const shouldShowBackdrop = this.showAsOverlay || (breakpoint !== 'L' && breakpoint !== 'XL');
+    return this.autoCollapseOnOverlay && shouldShowBackdrop && this.openState === 'open';
   }
 }
 __decorate$h([
@@ -580,9 +784,6 @@ __decorate$h([
 __decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "showAsOverlay", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaLeftNavAutoCollapseController.prototype, "backdropController", void 0);
 __decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openStateController", void 0);
@@ -641,6 +842,7 @@ const VegaLeftNav = class {
     this.headerRenderer = new VegaLeftNavHeaderRenderer();
     this.footerRenderer = new VegaLeftNavFooterRenderer();
     this.openStateController = new VegaLeftNavOpenStateController();
+    this.backdropManager = new VegaLeftNavBackdropManager();
     this.backdropController = new VegaLeftNavBackdropController();
     this.zIndexController = new VegaLeftNavZIndexController();
     this.listRenderer = new VegaNavListRenderer();
@@ -762,6 +964,9 @@ __decorate$g([
 __decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "openStateController", void 0);
+__decorate$g([
+  InjectVegaSlimmer()
+], VegaLeftNav.prototype, "backdropManager", void 0);
 __decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "backdropController", void 0);
@@ -795,7 +1000,7 @@ __decorate$g([
       keyCode: 'Escape',
       // eslint-disable-next-line jsdoc/require-jsdoc
       activeElementInScope: /* istanbul ignore next */ () => {
-        const backdrop = target.backdropController.getBackdrop();
+        const backdrop = target.backdropManager.getBackdrop();
         if (backdrop && backdrop.visible) {
           // eslint-disable-next-line no-restricted-globals
           return [document.body];
@@ -803,7 +1008,7 @@ __decorate$g([
         return [target.host];
       },
       callback: /* istanbul ignore next */ () => {
-        const backdrop = target.backdropController.getBackdrop();
+        const backdrop = target.backdropManager.getBackdrop();
         if (backdrop && backdrop.visible) {
           target.openStateController.setOpenState('close');
         }

package/dist/esm/vega-loader-wrapper_2.entry.js

@@ -4,15 +4,15 @@ import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlim
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { a as arrayToClassString } from './ui-d73f756a.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-fb424f5b.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-ced96b0b.js';
 import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
 import './number-4398f2e1.js';
-import './type-guard-91087018.js';
+import './type-guard-ec5e8628.js';
 import './breakpoints-d9faf11c.js';
 import './ui-93922c59.js';
 import './typography-19c3b9be.js';
-import './internal-translation-controller-8e8a514a.js';
+import './internal-translation-controller-16709132.js';
 import './change-manager-6a7eb88c.js';
 import './static-subject-title-1c86e974.js';
 import './pixel-f32c07ce.js';