@globalpayments/vega 2.92.0 → 2.94.0

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/controllers/vega-dropdown-item-state-controller.js

@@ -6,12 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField } from 'vega-slimmer/core';
 import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+import { isSelectAllItemIndeterminate } from '../../../slimmers/controllers/vega-dropdown-select-all-controller';
 import { findParent } from '../../../../../utils/ui';
+import { VEGA_DROPDOWN_SELECT_ALL_KEY } from '../../../constants';
 /**
  * Controller for the vega dropdown item states
  */
 export class VegaDropdownItemStateController extends SubStateObserverSlimmer {
-  // eslint-disable-next-line jsdoc/require-jsdoc
+  /**
+   * Initializes the dropdown item state controller with parent state observer setup
+   */
   constructor() {
     super({
       // eslint-disable-next-line jsdoc/require-jsdoc
@@ -57,11 +61,55 @@ export class VegaDropdownItemStateController extends SubStateObserverSlimmer {
             this.selected = Array.isArray(selectedSourceKey)
               ? selectedSourceKey.includes(this.itemKey)
               : selectedSourceKey === this.itemKey;
+            this.indeterminate = this.isSelectAllIndeterminate(selectedSourceKey);
           },
         },
       ],
       pullStatesWhenReattached: true,
     });
+    this.selectAllKey = VEGA_DROPDOWN_SELECT_ALL_KEY;
+  }
+  /**
+   * Gets the source of the parent dropdown, with fallback logic for different rendering modes
+   *
+   * @returns {VegaDropdown['source']} The source array from parent dropdown or content-box parent ref
+   */
+  getParentDropdownSource() {
+    const parentDropdown = this.getParentDropdown();
+    if (parentDropdown && Array.isArray(parentDropdown.source)) {
+      return parentDropdown.source;
+    }
+    const appender = findParent(this.host, 'vega-dropdown-content-box');
+    const parentRef = appender === null || appender === void 0 ? void 0 : appender['data-parent-ref'];
+    if (parentRef && Array.isArray(parentRef.source)) {
+      return parentRef.source;
+    }
+    return [];
+  }
+  /* eslint-disable jsdoc/no-undefined-types */
+  /**
+   * Gets the parent dropdown element for the current item.
+   * Supports both direct template ancestry and content-box appender fallback.
+   *
+   * @returns {Nullable<HTMLVegaDropdownElement>} The parent dropdown element when found, otherwise null/undefined
+   */
+  getParentDropdown() {
+    const parentDropdown = findParent(this.host, 'vega-dropdown');
+    if (parentDropdown) {
+      return parentDropdown;
+    }
+    const appender = findParent(this.host, 'vega-dropdown-content-box');
+    return appender === null || appender === void 0 ? void 0 : appender['data-parent-ref'];
+  }
+  /* eslint-enable jsdoc/no-undefined-types */
+  /**
+   * Determines if the select-all checkbox should display in indeterminate state
+   *
+   * @param {VegaDropdown['selectedSourceKey']} selectedSourceKey - The currently selected keys
+   * @returns {boolean} True if this is a select-all item with some but not all items selected
+   */
+  isSelectAllIndeterminate(selectedSourceKey) {
+    return isSelectAllItemIndeterminate(this.itemKey, selectedSourceKey, this.getParentDropdownSource(), this.selectAllKey);
   }
 }
 __decorate([
@@ -76,6 +124,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "selected", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "indeterminate", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "prefixIconSlot", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -44,7 +44,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     return this.selected && h("vega-icon", { icon: "checkmark", size: "size-16" });
   }
   renderMultipleSelectIcon() {
-    return h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
+    return (h("vega-checkbox", { size: "small", checked: this.selected, indeterminate: this.indeterminate, disabled: this.disabled }));
   }
   renderPrefixIcon() {
     return ((this.prefixIcon || this.prefixIconSlot) && (h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
@@ -123,6 +123,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "selected", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "indeterminate", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "selectType", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.js

@@ -35,6 +35,10 @@ export class VegaDropdownItem {
      * Specifies the dropdown item's selected status.
      */
     this.selected = false;
+    /**
+     * Specifies whether the dropdown item checkbox should show indeterminate state.
+     */
+    this.indeterminate = false;
     /**
      * Specifies the dropdown item's rule of display.
      */
@@ -214,6 +218,7 @@ export class VegaDropdownItem {
     "selectType": {},
     "prefixIconSlot": {},
     "selected": {},
+    "indeterminate": {},
     "itemDisplayRule": {},
     "itemTooltipProps": {}
   }; }

package/dist/collection/components/vega-dropdown/vega-dropdown.js

@@ -22,7 +22,7 @@ import { VegaDropdownRenderModeController } from './slimmers/controllers/vega-dr
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaDropdownChildrenController } from './slimmers/controllers/vega-dropdown-children-controller';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaCreate, VegaDropdownClick, VegaDropdownSelectAllClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { DROPDOWN_ITEM_CLICK } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
@@ -31,6 +31,7 @@ import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dr
 import { VegaDropdownRemoteInvocationController } from './slimmers/controllers/vega-dropdown-remote-invocation-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaDropdownResetRenderer } from './slimmers/renderers/vega-dropdown-reset-renderer';
+import { VegaDropdownSelectAllController } from './slimmers/controllers/vega-dropdown-select-all-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -49,6 +50,7 @@ export class VegaDropdown {
     this.keyboardController = new VegaDropdownKeyboardController();
     this.appenderController = new VegaDropdownAppenderController();
     this.searchController = new VegaDropdownSearchController();
+    this.selectAllController = new VegaDropdownSelectAllController();
     /**
      * childrenController should be defined before selectedController,
      *     which can ensure collecting information before verifying it.
@@ -66,6 +68,7 @@ export class VegaDropdown {
     this.showEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownShow);
     this.hideEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownHide);
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownClick);
+    this.selectAllClickEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSelectAllClick);
     this.resetEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaReset);
     this.createEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaCreate);
     this.searchEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSearch);
@@ -264,6 +267,14 @@ export class VegaDropdown {
      * @vegaVersion 2.74.0
      */
     this.searchNoResultsText = 'No results found';
+    /**
+     * Allows users to select or deselect all items in the dropdown.
+     *    Only applicable when selectType is set to 'multiple'.
+     *    When enabled, a "Select All" option is added to the dropdown menu.
+     *
+     * @vegaVersion 2.93.0
+     */
+    this.allowSelectAll = false;
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -289,6 +300,9 @@ export class VegaDropdown {
   watchCaseSensitive() {
     methodPlaceholder();
   }
+  watchAllowSelectAll() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to programmatically display the dropdown menu.
    *
@@ -346,6 +360,26 @@ export class VegaDropdown {
   async setSelection(keys) {
     methodPlaceholder(keys);
   }
+  /**
+   * Invoke this method to manually sync template/slot-based dropdown data.
+   * Useful when template items are dynamically added or removed.
+   *
+   * @example
+   * const dropdown = document.querySelector("vega-dropdown");
+   * const itemsContainer = dropdown.querySelector('[slot="items"]');
+   *
+   * const item = document.createElement('vega-dropdown-item');
+   * item.itemKey = 'new-item';
+   * item.label = 'New item';
+   * itemsContainer.appendChild(item);
+   *
+   * await dropdown.syncTemplateData();
+   *
+   * @vegaVersion 2.93.0
+   */
+  async syncTemplateData() {
+    methodPlaceholder();
+  }
   render() {
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
@@ -1038,6 +1072,27 @@ export class VegaDropdown {
       "attribute": "search-no-results-text",
       "reflect": false,
       "defaultValue": "'No results found'"
+    },
+    "allowSelectAll": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Allows users to select or deselect all items in the dropdown.\n   Only applicable when selectType is set to 'multiple'.\n   When enabled, a \"Select All\" option is added to the dropdown menu."
+      },
+      "attribute": "allow-select-all",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -1084,6 +1139,45 @@ export class VegaDropdown {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaDropdownSelectAllClick",
+      "name": "vegaDropdownSelectAllClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "An event emitter notifying that the Select All option has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownSelectAllClick",
+      "name": "dropdownSelectAllClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "An event emitter notifying that the Select All option has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }, {
       "method": "vegaShow",
       "name": "vegaShow",
@@ -1455,6 +1549,28 @@ export class VegaDropdown {
             "text": "1.47.0"
           }]
       }
+    },
+    "syncTemplateData": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to manually sync template/slot-based dropdown data.\nUseful when template items are dynamically added or removed.",
+        "tags": [{
+            "name": "example",
+            "text": "const dropdown = document.querySelector(\"vega-dropdown\");\nconst itemsContainer = dropdown.querySelector('[slot=\"items\"]');\n\nconst item = document.createElement('vega-dropdown-item');\nitem.itemKey = 'new-item';\nitem.label = 'New item';\nitemsContainer.appendChild(item);\n\nawait dropdown.syncTemplateData();"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }]
+      }
     }
   }; }
   static get elementRef() { return "host"; }
@@ -1482,6 +1598,9 @@ export class VegaDropdown {
     }, {
       "propName": "caseSensitive",
       "methodName": "watchCaseSensitive"
+    }, {
+      "propName": "allowSelectAll",
+      "methodName": "watchAllowSelectAll"
     }]; }
 }
 __decorate([
@@ -1523,6 +1642,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectAllController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "childrenController", void 0);
@@ -1562,6 +1684,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectAllClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "resetEventEmitter", void 0);

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -18,7 +18,7 @@ import { VegaFieldLabelLabelAnnouncementRenderer } from './slimmers/renderers/ve
  */
 /**
  * This is an internal used component and shouldn't be used by clients,
- *    it doesn't show up in storybook either.
+ *    it is not part of the public component surface.
  */
 export class VegaFieldLabel {
   constructor() {

package/dist/collection/components/vega-hint/vega-hint.js

@@ -14,7 +14,7 @@ import { sanitizeVegaComponent } from '../../utils/component';
  */
 /**
  * This is an internal used component and shouldn't be used by client,
- *    it doesn't show up in storybook either.
+ *    it is not part of the public component surface.
  */
 export class VegaHint {
   constructor() {

package/dist/collection/components/vega-modal/slimmers/renderers/vega-modal-renderer.js

@@ -36,7 +36,7 @@ export class VegaModalRenderer extends VegaSlimmer {
       h("vega-box", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, width: isResponsiveSizeType(this.size) ? this.size : DefaultModalSize, height: this.height, margin: this.margin }, this.renderContainer())));
   }
   renderContainer() {
-    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
+    return (h("vega-box", { class: "modal-container", corners: this.corners, ref: (node) => (this.modalContainer = node) },
       this.renderHeader(),
       this.renderContent(),
       this.renderFooter()));
@@ -117,6 +117,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "height", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "corners", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "showCloseButton", void 0);

package/dist/collection/components/vega-modal/vega-modal.css

@@ -5223,7 +5223,6 @@
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
   box-shadow: var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16));
-  border-radius: 12px;
   box-sizing: border-box;
   pointer-events: auto;
   overflow: hidden;

package/dist/collection/components/vega-modal/vega-modal.js

@@ -130,6 +130,14 @@ export class VegaModal {
      * @vegaVersion 2.81.0
      */
     this.margin = { y: 'size-64', x: 'auto' };
+    /**
+     * Defines the corner of the modal dialog.
+     *    It accepts a string value representing a valid
+     *    border radius token.
+     *
+     * @vegaVersion 2.93.0
+     */
+    this.corners = 'rounded-12';
     /**
      * Provides a callback function that is triggered when a user clicks the
      *    close button located in the top right corner of the modal.
@@ -560,6 +568,36 @@ export class VegaModal {
       "attribute": "content-max-height",
       "reflect": false
     },
+    "corners": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<CornersType>",
+        "resolved": "\"rounded-12\" | \"rounded-16\" | \"rounded-2\" | \"rounded-24\" | \"rounded-32\" | \"rounded-4\" | \"rounded-48\" | \"rounded-8\" | \"rounded-full\" | \"rounded-none\" | { S?: CornersType; M?: CornersType; L?: CornersType; XL?: CornersType; default?: CornersType; } | { left?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; right?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; top?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; bottom?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"top-left\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"top-right\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"bottom-left\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"bottom-right\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "CornersType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Defines the corner of the modal dialog.\n   It accepts a string value representing a valid\n   border radius token."
+      },
+      "attribute": "corners",
+      "reflect": false,
+      "defaultValue": "'rounded-12'"
+    },
     "handleClose": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-auto-collapse-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaInternalLeftNavLinkClick } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { getCurrentBreakpoint } from '../../../../../utils/breakpoints';
 export class VegaLeftNavAutoCollapseController extends VegaSlimmer {
   registerMenuClickObserver() {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalLeftNavLinkClick, () => {
@@ -19,9 +20,9 @@ export 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([
@@ -36,9 +37,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "showAsOverlay", void 0);
-__decorate([
-  MapToComponentField()
-], VegaLeftNavAutoCollapseController.prototype, "backdropController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openStateController", void 0);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-controller.js

@@ -5,97 +5,52 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
-import { getCurrentBreakpoint } from '../../../../../utils/breakpoints';
-import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
-export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-left-nav-e2e-resize-with-desktop}
-   */
+/**
+ * Backdrop click handler controller for left-nav.
+ * Manages backdrop interaction (click events) while the VegaLeftNavBackdropManager
+ * handles visibility state through its slimmer watch methods.
+ */
+export class VegaLeftNavBackdropController {
   constructor() {
-    /* eslint-disable jsdoc/require-jsdoc*/
-    super({
-      callback: /* istanbul ignore next */ () => {
-        this.updateBackdropUI(this.openState);
-      },
-    });
-    this.backdrop = null;
-    /* eslint-enable jsdoc/require-jsdoc*/
+    this.handleBackdropClick = () => {
+      this.openStateController.setOpenState('close');
+    };
   }
   connectedCallback() {
-    if (!this.backdrop || !this.backdrop.isConnected) {
-      this.backdrop = this.createBackdrop();
-    }
+    this.attachBackdropClickEvent();
   }
   disconnectedCallback() {
-    this.backdrop && this.backdrop.remove();
-    this.backdrop = null;
-  }
-  watchOpenState(newState) {
-    this.updateBackdropUI(newState);
-  }
-  watchShowAsOverlay() {
-    this.updateBackdropUI(this.openState);
-  }
-  getBackdrop() {
-    return this.backdrop;
-  }
-  shouldShowBackdrop() {
-    return this.isLargeScreen() && !this.showAsOverlay ? false : true;
+    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([
   MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "openState", void 0);
-__decorate([
-  MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
+], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
 __decorate([
   MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
+], VegaLeftNavBackdropController.prototype, "backdropManager", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
-__decorate([
-  MapToComponentMethod('watchOpenState')
-], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
-__decorate([
-  MapToComponentMethod('watchShowAsOverlay')
-], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-manager.js

@@ -0,0 +1,74 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { getCurrentBreakpoint } from '../../../../../utils/breakpoints';
+import { SharedBackdropManager } from '../../../../../helpers/backdrop';
+/**
+ * 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).
+ */
+export class VegaLeftNavBackdropManager extends SharedBackdropManager {
+  /**
+   * Watch openState changes and update visibility intent.
+   *
+   * @param {LeftNavOpenStateType} newState - The new open state.
+   */
+  watchOpenState(newState) {
+    const shouldShow = newState === 'open' && this.shouldShowBackdrop();
+    this.setVisibilityIntent(shouldShow);
+  }
+  /**
+   * Watch showAsOverlay changes and re-evaluate visibility.
+   */
+  watchShowAsOverlay() {
+    this.watchOpenState(this.openState);
+  }
+  /**
+   * 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.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([
+  MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "openState", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "showAsOverlay", void 0);
+__decorate([
+  MapToComponentMethod('watchOpenState')
+], VegaLeftNavBackdropManager.prototype, "watchOpenState", null);
+__decorate([
+  MapToComponentMethod('watchShowAsOverlay')
+], VegaLeftNavBackdropManager.prototype, "watchShowAsOverlay", null);