@globalpayments/vega 2.13.0-backfill-beta.2 → 2.50.0

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

@@ -2,39 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1299d729.js');
-const component = require('./component-c3bbaf20.js');
-const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const index = require('./index-7700600c.js');
+const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
-const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
-const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-8d417925.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
 const effect = require('./effect-37695d3d.js');
-const internalIconManager = require('./internal-icon-manager-b21347bf.js');
-const zIndexManager = require('./zIndexManager-48482b9d.js');
-const breakpoints = require('./breakpoints-cb3291ba.js');
-const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
-const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
-const componentGlobalStyleSlimmer = require('./componentGlobalStyleSlimmer-b45a5d2f.js');
-const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
-const vegaInternalEventId = require('./vegaInternalEventId-b27735af.js');
-const chevronDown = require('./chevron-down-ca2fa88e.js');
-const staticSubjectTitle = require('./staticSubjectTitle-380a1e34.js');
-const changeManager = require('./changeManager-7c13d64f.js');
-const ui = require('./ui-fa68545a.js');
-const deprecatedPropertySlimmer = require('./deprecatedPropertySlimmer-51f92b36.js');
-const designToken = require('./designToken-91ea7c25.js');
-require('./iconManager-a9c2209d.js');
-require('./number-459031f7.js');
-require('./ui-077fc009.js');
-require('./dynamic-slimmer-d5ea4204.js');
-require('./internalVegaEventManager-a3672e0c.js');
+const featureFlagController = require('./feature-flag-controller-5e58aae4.js');
+const internalIconManager = require('./internal-icon-manager-00f49470.js');
+const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-83e05b6c.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-ee7a8c06.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-6749808c.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a7a3b196.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6cdc95fe.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-06e0a8db.js');
+const brandSwitchStateControllerSlimmer = require('./brand-switch-state-controller-slimmer-5efa1b24.js');
+const darkModeStyleController = require('./dark-mode-style-controller-4adb7fb2.js');
+const chevronUp = require('./chevron-up-21465cf7.js');
+const chevronDown = require('./chevron-down-9847bf78.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const observer = require('./observer-f49483e8.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-66f3038c.js');
+const ui = require('./ui-13b42af0.js');
+const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
+const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-4f15005f.js');
+const designToken = require('./design-token-36495784.js');
+require('./ui-32e69595.js');
+require('./breakpoints-ebde4837.js');
+require('./index-8b247c17.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./icon-manager-9a47399c.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-58afcde7.js');
+require('./number-4816603d.js');
 require('./object-bbd4ed7f.js');
-require('./typeGuard-b1a74545.js');
+require('./type-guard-4ba85fdc.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsiveFormatFacade-12dd896d.js');
+require('./responsive-format-facade-325d3d90.js');
+require('./pixel-98f2a10c.js');
+require('./array-249289f2.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-e5003a00.js');
+require('./content-state-d2f6a5ac.js');
+require('./code-block-d0b98262.js');
+require('./state-background-color-formatter-e585a027.js');
 
-var __decorate$i = (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;
@@ -60,7 +78,15 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
    */
   /* istanbul ignore next */
   componentDidLoad() {
-    this.open === true ? (this.openState = 'open') : (this.openState = 'close');
+    if (this.open === true) {
+      this.openState = 'open';
+      if (featureFlagController.FeatureFlag.isEnabled('VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD')) {
+        this.host.classList.add('disableAnimation');
+      }
+    }
+    else {
+      this.openState = 'close';
+    }
   }
   /** Call this method to toggle the left nav menu */
   async toggle() {
@@ -81,6 +107,10 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
     }
     else {
       this.open = false;
+      if (featureFlagController.FeatureFlag.isEnabled('VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD') &&
+        this.host.classList.contains('disableAnimation')) {
+        this.host.classList.remove('disableAnimation');
+      }
     }
     this.stateUpdateEventEmitter.emit(this.openState);
   }
@@ -129,34 +159,34 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
     }
   }
 }
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "host", void 0);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "open", void 0);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "openState", void 0);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('toggle')
 ], VegaLeftNavOpenStateController.prototype, "toggle", null);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('watchOpen')
 ], VegaLeftNavOpenStateController.prototype, "watchOpen", null);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
 ], VegaLeftNavOpenStateController.prototype, "watchOpenState", null);
-__decorate$i([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
 ], VegaLeftNavOpenStateController.prototype, "watchShowAsOverlay", null);
 
@@ -172,7 +202,7 @@ const Icons = {
   },
 };
 
-var __decorate$h = (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;
@@ -189,25 +219,37 @@ class VegaLeftNavHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const { title, subtitle } = this.headerConfig;
     return (index.h(index.Fragment, null,
       index.h("div", { class: "header-container" },
-        this.hasHeaderSlot ? (index.h("slot", { name: "header-slot" })) : title ? (index.h("div", { class: "header-title" }, title)) : (index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('heartland-logo') })),
+        this.hasHeaderSlot ? (index.h("slot", { name: "header-slot" })) : title ? (index.h("div", { class: "header-title" }, title)) : (this.renderHeaderLogo()),
         subtitle && index.h("div", { class: "header-subtitle" }, subtitle)),
       index.h(VegaLeftNavSeparator, null)));
   }
+  renderHeaderLogo() {
+    if (this.currentBranding === 'gp') {
+      return index.h("vega-brand-logo", { name: "global-payments", size: "small" });
+    }
+    if (this.currentBranding === 'genius') {
+      return index.h("vega-brand-logo", { name: "genius", size: "small" });
+    }
+    return index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('heartland-logo') });
+  }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register(Icons);
 })();
-__decorate$h([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "host", void 0);
-__decorate$h([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "headerConfig", void 0);
-__decorate$h([
+__decorate$m([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavHeaderRenderer.prototype, "currentBranding", void 0);
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavHeaderRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$g = (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;
@@ -226,17 +268,17 @@ class VegaLeftNavFooterRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("div", { class: "footer-container" }, this.hasFooterSlot ? (index.h("slot", { name: "footer-slot" })) : (index.h("div", { class: "footer-footnote" }, this.footnote))))));
   }
 }
-__decorate$g([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "host", void 0);
-__decorate$g([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "footnote", void 0);
-__decorate$g([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavFooterRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -254,31 +296,31 @@ class VegaLeftNavZIndexController extends globalSlimmerRegistry.VegaSlimmer {
   updateZIndex() {
     const backDrop = this.backdropController.getBackdrop();
     if (this.openState == 'open') {
-      zIndexManager.ZIndexManager.setZIndex(backDrop, 'base');
-      zIndexManager.ZIndexManager.setZIndex(this.host, 'base');
+      vegaSkeletonLoaderController.InternalVegaZIndexManager.setZIndex(backDrop, 'base');
+      vegaSkeletonLoaderController.InternalVegaZIndexManager.setZIndex(this.host, 'base');
     }
     else {
       effect.executeAfterTransition(() => {
-        zIndexManager.ZIndexManager.removeZIndex(backDrop, 'base');
-        zIndexManager.ZIndexManager.removeZIndex(this.host, 'base');
+        vegaSkeletonLoaderController.InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
+        vegaSkeletonLoaderController.InternalVegaZIndexManager.removeZIndex(this.host, 'base');
       }, this.host, 300);
     }
   }
 }
-__decorate$f([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "host", void 0);
-__decorate$f([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "openState", void 0);
-__decorate$f([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "backdropController", void 0);
-__decorate$f([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
 ], VegaLeftNavZIndexController.prototype, "watchOpenState", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -346,33 +388,33 @@ class VegaLeftNavBackdropController extends pageResizeObserverSlimmer.PageResize
     }
   }
   isLargeScreen() {
-    const currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    const currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
   }
 }
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "openState", void 0);
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
 ], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
-__decorate$e([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
 ], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
   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;
@@ -401,23 +443,23 @@ class VegaNavListRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
   renderSection(section) {
     var _a;
-    return (index.h("vega-left-nav-section", { sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
+    return (index.h("vega-left-nav-section", { itemKey: section.key, sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
   }
   renderGroup(item) {
     var _a;
-    return (index.h("vega-left-nav-group", { key: item.name, icon: item.icon, label: item.name }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
+    return (index.h("vega-left-nav-group", { itemKey: item.key, key: item.key || item.name, icon: item.icon, label: item.name, "open-by-default": item.openByDefault }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
   }
   renderLink(item) {
-    return (index.h("vega-left-nav-link", { key: item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
+    return (index.h("vega-left-nav-link", { itemKey: item.key, key: item.key || item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
   }
 }
-__decorate$d([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaNavListRenderer.prototype, "source", void 0);
 
-const vegaLeftNavContentCss = ".vega-left-nav-content{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:200ms;transition-property:margin}.vega-left-nav-content.open{margin-left:300px}";
+const vegaLeftNavContentCss = ".vega-left-nav-content{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:200ms;transition-property:margin}vega-left-nav.disableAnimation+.vega-left-nav-content.open{transition-duration:0s}.vega-left-nav-content.open{margin-left:300px}";
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (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;
@@ -440,34 +482,61 @@ class VegaLeftNavAutoCollapseController extends globalSlimmerRegistry.VegaSlimme
       this.openState === 'open');
   }
 }
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "host", void 0);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openState", void 0);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "autoCollapseOnOverlay", void 0);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "showAsOverlay", void 0);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "backdropController", void 0);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openStateController", void 0);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaLeftNavAutoCollapseController.prototype, "registerMenuClickObserver", null);
-__decorate$c([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavAutoCollapseController.prototype, "unregisterMenuClickObserver", null);
 
-const vegaLeftNavCss = ":host{display:none;flex-direction:column;height:100%;min-height:100vh;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:fixed;top:0px;right:0px;bottom:0px;left:0px;text-align:left;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);width:300px;transition-duration:200ms;transition-property:transform;transform:translateX(-320px)}:host(.open){transform:translateX(0px)}.header-container{padding-left:24px;padding-right:24px;padding-top:24px;padding-bottom:16px}.header-container .header-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}.header-container .header-subtitle{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;margin-top:2px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}.header-footer-separator-container{padding-left:12px;padding-right:12px}.header-footer-separator{width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}.vega-nav-list-container{flex-grow:1;padding-left:12px;padding-right:12px;padding-top:12px;overflow-y:auto;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-nav-list-container .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}.footer-container{padding-top:16px;padding-bottom:16px;padding-left:24px;padding-right:24px}.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}body.vega-overflow-hidden{overflow:hidden}.header-container vega-icon{width:142px;height:26px}.header-container vega-icon[icon=\"v-internal-icon heartland-logo\"]+.header-subtitle{margin-top:8px}";
+const VegaLeftNavRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the left nav',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !host.source || host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the left nav',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !!host.source && host.source.length > 0,
+  },
+];
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const vegaLeftNavCss = ":host{display:none;flex-direction:column;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:fixed;top:0px;right:0px;bottom:0px;left:0px;text-align:left;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);width:300px;transition-duration:200ms;transition-property:transform;transform:translateX(-320px)}:host(.open.disableAnimation){transition-duration:0s}:host(.open){transform:translateX(0px)}.header-container{padding-left:24px;padding-right:24px;padding-top:24px;padding-bottom:16px}.header-container .header-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}.header-container .header-subtitle{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;margin-top:2px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}.header-footer-separator-container{padding-left:12px;padding-right:12px}.header-footer-separator{width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}.vega-nav-list-container{flex-grow:1;padding-left:12px;padding-right:12px;padding-top:12px;overflow-y:auto;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-nav-list-container .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}.footer-container{padding-top:16px;padding-bottom:16px;padding-left:24px;padding-right:24px}.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}body.vega-overflow-hidden{overflow:hidden}.header-container vega-icon[icon=\"v-internal-icon heartland-logo\"]+.header-subtitle{margin-top:8px}";
+
+var __decorate$g = (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);
@@ -490,24 +559,33 @@ const VegaLeftNav = class {
     this.zIndexController = new VegaLeftNavZIndexController();
     this.listRenderer = new VegaNavListRenderer();
     this.vegaLeftNavAutoCollapseController = new VegaLeftNavAutoCollapseController();
-    this.stateUpdateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNav, vegaEventId.VegaStateUpdate);
+    this.stateUpdateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNav, domNodeSubjectFactory.VegaStateUpdate);
     this.componentGlobalStyleSlimmer = new componentGlobalStyleSlimmer.ComponentGlobalStyleSlimmer(vegaLeftNavContentCss);
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaLeftNavRuntimeMetricsPayloadDefinition);
+    this.autoCollapseGroupsNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaLeftNav, 'autoCollapseGroups', 'watchAutoCollapseGroups');
+    this.brandSwitchControllerSlimmer = new brandSwitchStateControllerSlimmer.BrandSwitchControllerSlimmer();
+    this.currentBranding = darkModeStyleController.VegaInternalThemeManager.getBranding();
     this.openState = 'close';
     /**
      * Determines whether the left navigation is expanded or collapsed.
+     *
+     * @vegaVersion 1.39.2
      */
-    // eslint-disable-next-line @stencil/strict-mutable
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.open = false;
     /**
      * Specifies the configuration options for the header within the left-nav.
      *
      * You can use this property to define a custom title and subtitle.
+     *
+     * @vegaVersion 1.31.0
      */
     this.headerConfig = {};
     /**
      * Provides additional information or context in the form of
      *    a footnote in the left-nav footer.
+     *
+     * @vegaVersion 1.31.0
      */
     this.footnote = '';
     /**
@@ -520,10 +598,34 @@ const VegaLeftNav = class {
      *    property is set to `false` within the `vega-left-nav` component. Additionally, enclose all content
      *    within an element possessing the class `vega-left-nav-content` immediately following the
      *    `vega-left-nav` component.
+     *
+     * @vegaVersion 1.33.0
      */
     this.showAsOverlay = true;
-    /** Determines whether the left navigation automatically collapses when the left navigation link is clicked in overlay mode. */
+    /** Determines whether the left navigation automatically collapses when the left navigation link is clicked in overlay mode. *
+     * @vegaVersion 2.7.0
+     */
     this.autoCollapseOnOverlay = false;
+    /**
+     * Determines how the left navigation groups behave when clicked, controlling the automatic collapsing of open groups.
+     *
+     * Available options:
+     * - `true`:
+     *      Collapses the group when clicking either a group or a link.
+     * - `false`:
+     *     Collapses the group only when clicking a link; clicking a group does not collapse it.
+     * - `always`:
+     *     Always collapses the group when clicking a group or link (equivalent to true).
+     * - `on-group-click`:
+     *      Collapses the group only when clicking a group; clicking a link does not collapse it.
+     * - `on-link-click`:
+     *      Collapses the group only when clicking a link; clicking a group does not collapse it.
+     * - `never`:
+     *      Never collapses groups when clicking a group or link.
+     * @vegaVersion 2.48.0
+     * @VegaWarning - Boolean types are deprecated, please use "on-group-click" | "on-link-click" | "never" | "always" instead.
+     */
+    this.autoCollapseGroups = false;
   }
   watchOpenState() {
   }
@@ -531,8 +633,22 @@ const VegaLeftNav = class {
   }
   watchShowAsOverlay() {
   }
+  watchAutoCollapseGroups() {
+  }
+  componentWillLoad() {
+    if (typeof this.autoCollapseGroups === 'string') {
+      if (this.autoCollapseGroups.includes('true')) {
+        this.autoCollapseGroups = true;
+      }
+      else if (this.autoCollapseGroups.includes('false')) {
+        this.autoCollapseGroups = false;
+      }
+    }
+  }
   /**
    * Invoke this method to toggle the left-nav's open state.
+   *
+   * @vegaVersion 1.31.0
    */
   async toggle() {
   }
@@ -544,45 +660,52 @@ const VegaLeftNav = class {
   static get watchers() { return {
     "openState": ["watchOpenState"],
     "open": ["watchOpen"],
-    "showAsOverlay": ["watchShowAsOverlay"]
+    "showAsOverlay": ["watchShowAsOverlay"],
+    "autoCollapseGroups": ["watchAutoCollapseGroups"]
   }; }
 };
-__decorate$b([
+__decorate$g([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaLeftNav.prototype, "globalSlimmers", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "headerRenderer", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "footerRenderer", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "openStateController", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "backdropController", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "zIndexController", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "listRenderer", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "vegaLeftNavAutoCollapseController", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "stateUpdateEventEmitter", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "componentGlobalStyleSlimmer", void 0);
-__decorate$b([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$g([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "autoCollapseGroupsNotifySlimmer", void 0);
+__decorate$g([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "brandSwitchControllerSlimmer", void 0);
 VegaLeftNav.style = vegaLeftNavCss;
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (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;
@@ -595,21 +718,23 @@ class VegaLeftNavGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
       const currentTarget = e.currentTarget;
       if (currentTarget && currentTarget.dataset.root === '$1') {
         e.preventDefault();
-        this.groupContainer.classList.toggle('open');
-        this.groupClickEventEmitter.emit(this.groupContainer.classList.contains('open') ? 'EXPAND' : 'COLLAPSE');
+        this.vegaLeftNavGroupOpenStateController.toggle();
+        const isExpand = this.vegaLeftNavGroupOpenStateController.isOpen();
+        this.groupClickEventEmitter.emit(isExpand ? 'EXPAND' : 'COLLAPSE');
+        this.notifyOtherGroup();
       }
     };
   }
   /**
    * Get the map of the row form refs
    *
-   * @returns {Map} The map of row form refs
+   * @returns {HTMLDivElement} The map of row form refs
    */
   getGroupContainer() {
     return this.groupContainer;
   }
   render() {
-    return (index.h("div", { class: "vega-li-main", ref: (ref) => (this.groupContainer = ref) },
+    return (index.h("div", { class: `vega-li-main ${this.openByDefault ? 'open' : ''}`, ref: (ref) => (this.groupContainer = ref) },
       index.h("a", { href: `#${this.label}`, role: 'button', tabIndex: 0, "data-root": "$1", onClick: this.handleClick, "aria-label": this.label || 'No label defined' },
         this.icon && (index.h("div", { class: "vega-links-icon" },
           index.h("div", { class: "prefix-icon" },
@@ -621,103 +746,334 @@ class VegaLeftNavGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("div", { class: "vega-nav-list-sub" },
         index.h("slot", null))));
   }
+  /**
+   * Notify other left nav groups to collapse
+   */
+  notifyOtherGroup() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalLeftNavGroupExpand), { host: this.host });
+    }
+  }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'chevron-up': chevronDown.chevronUp,
+    'chevron-up': chevronUp.chevronUp,
     'chevron-down': chevronDown.chevronDown,
   });
 })();
-__decorate$a([
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "host", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "autoCollapseGroups", void 0);
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "icon", void 0);
-__decorate$a([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "label", void 0);
-__decorate$a([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "groupClickEventEmitter", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "openByDefault", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "itemKey", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "vegaLeftNavGroupOpenStateController", void 0);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (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 VegaLeftNavGroupForLeftNavLinkClickObserver extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalLeftNavLinkSelected), this.observer);
+    }
+  }
+  componentWillLoad() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      this.observer = new observer.Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalLeftNavLinkSelected), this.observer);
+    }
+  }
+  isAcceptableObserver(input) {
+    return !this.host.contains(input['host']);
+  }
+  /**
+   * Determines if the group should be collapsed based on the autoCollapseGroups property and the openByDefault property.
+   * If autoCollapseGroups is 'on-link-click', true, false, or 'always', then the group should be collapsed.
+   *
+   * @returns {boolean} - Returns true if the group should be collapsed, otherwise false.
+   */
+  shouldCollapse() {
+    return (this.autoCollapseGroups === 'on-link-click' ||
+      this.autoCollapseGroups === true ||
+      this.autoCollapseGroups === false ||
+      this.autoCollapseGroups === 'always');
+  }
+  observerListener() {
+    if (this.shouldCollapse()) {
+      this.vegaLeftNavGroupOpenStateController.close();
+    }
+  }
+}
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "host", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "autoCollapseGroups", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "openByDefault", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "disconnectedCallback", null);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "componentWillLoad", null);
+
+var __decorate$d = (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 VegaLeftNavGroupForOtherGroupsClickObserver extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalLeftNavGroupExpand), this.observer);
+    }
+  }
+  componentWillLoad() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      this.observer = new observer.Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalLeftNavGroupExpand), this.observer);
+    }
+  }
+  isAcceptableObserver(input) {
+    return input['host'] !== this.host && !this.host.contains(input['host']);
+  }
+  shouldCollapse() {
+    return (this.autoCollapseGroups == true ||
+      this.autoCollapseGroups === 'on-group-click' ||
+      this.autoCollapseGroups === 'always');
+  }
+  observerListener() {
+    if (this.shouldCollapse()) {
+      this.vegaLeftNavGroupOpenStateController.close();
+    }
+  }
+}
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "host", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "autoCollapseGroups", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "disconnectedCallback", null);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "componentWillLoad", null);
+
+var __decorate$c = (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;
 };
 /**
- * The code is defining an abstract class called `VegaNavObserverSlimmer` that extends the `VegaSlimmer` class.
+ * Controller for the left nav group states
  */
-class VegaNavObserverSlimmer extends globalSlimmerRegistry.VegaSlimmer {
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-left-nav-link-e2e-disconnected}
-   * @see{module:vega-left-nav-group-e2e-disconnected}
+class VegaLeftNavGroupStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-left-nav',
+      subStates: [
+        {
+          subStateName: 'autoCollapseGroups',
+          parentStateName: 'autoCollapseGroups',
+        },
+      ],
+    });
+  }
+}
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupStateController.prototype, "host", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaLeftNavGroupStateController.prototype, "autoCollapseGroups", void 0);
+
+var __decorate$b = (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 VegaLeftNavGroupOpenStateController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Checks if the left nav group is currently open.
+   * This method checks if the 'open' class is present in the group container.
+   *
+   * @returns {boolean} - Returns true if the group is open, false otherwise.
    */
-  /* istanbul ignore next */
+  isOpen() {
+    return this.renderer.getGroupContainer().classList.contains('open');
+  }
   /**
-   * Unregister the observer with subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   * Opens the left nav group.
+   * This method adds the 'open' class to the group container.
    */
-  disconnectedCallback() {
-    changeManager.ChangeManager.unregister(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+  open() {
+    this.renderer.getGroupContainer().classList.add('open');
   }
   /**
-   * The function creates an observer to observe the subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   * Closes the left nav group.
+   * This method removes the 'open' class from the group container.
    */
+  close() {
+    this.renderer.getGroupContainer().classList.remove('open');
+  }
+  /**
+   * Toggle the left nav group.
+   * This method toggle the 'open' class from the group container.
+   */
+  toggle() {
+    if (this.isOpen()) {
+      this.close();
+    }
+    else {
+      this.open();
+    }
+  }
+}
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupOpenStateController.prototype, "renderer", void 0);
+
+var __decorate$a = (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 VegaLeftNavHierarchyController extends globalSlimmerRegistry.VegaSlimmer {
   componentWillLoad() {
-    this.observer = new domNodeSubjectObserverFactory.Observer(this.isAcceptableNavListObserver.bind(this), this.observerListener.bind(this));
-    changeManager.ChangeManager.register(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+    const leftNavTopParent = ui.findParent(this.host, 'vega-left-nav');
+    const navCardTopParent = ui.findParent(this.host, 'vega-nav-card');
+    if (leftNavTopParent || navCardTopParent) {
+      this.parent = leftNavTopParent || navCardTopParent;
+    }
   }
   /**
-   * The function checks if the input is an HTMLElement and if it has the same parent element with the host element.
+   * Get the top parent
    *
-   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
-   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   * @returns {Nullable<HTMLVegaLeftNavRoot>} the top parent
    */
-  isAcceptableNavListObserver(input) {
-    return (input instanceof HTMLElement &&
-      ui.findParent(this.host, '.vega-nav-list-container') ===
-        ui.findParent(input, '.vega-nav-list-container'));
+  getTopParent() {
+    return this.parent;
   }
 }
-__decorate$9([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], VegaNavObserverSlimmer.prototype, "disconnectedCallback", null);
-__decorate$9([
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavHierarchyController.prototype, "host", void 0);
+__decorate$a([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
-], VegaNavObserverSlimmer.prototype, "componentWillLoad", null);
+], VegaLeftNavHierarchyController.prototype, "componentWillLoad", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (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 VegaLeftNavGroupController extends VegaNavObserverSlimmer {
+class VegaLeftNavGroupForInitializeSelectedObserver extends globalSlimmerRegistry.VegaSlimmer {
   /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-left-nav-group-observer-with-selected}
+   * Component lifecycle - [disconnectedCallback]
    */
-  /* istanbul ignore next */
-  observerListener(castInput) {
-    const hasSelectedLinkItem = this.host.contains(castInput);
-    if (hasSelectedLinkItem) {
-      this.renderer.getGroupContainer().classList.add('open');
+  disconnectedCallback() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalInitializeLeftNavLinkSelected), this.observer);
     }
-    else {
-      this.renderer.getGroupContainer().classList.remove('open');
+  }
+  /**
+   * When the selected of the link is true during initialization, the current group should be opened
+   */
+  componentWillLoad() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent && !this.openByDefault) {
+      this.observer = new observer.Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalInitializeLeftNavLinkSelected), this.observer);
     }
   }
+  isAcceptableObserver(input) {
+    return this.host.contains(input['host']);
+  }
+  observerListener() {
+    this.vegaLeftNavGroupOpenStateController.open();
+  }
 }
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavGroupController.prototype, "host", void 0);
-__decorate$8([
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "host", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavGroupController.prototype, "renderer", void 0);
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "openByDefault", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "disconnectedCallback", null);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "componentWillLoad", null);
 
-const vegaLeftNavGroupCss = ":host{display:block}.suffix-icons{padding-left:8px}.suffix-icons vega-icon,.vega-li-main.open>a>.suffix-icons vega-icon:first-of-type{display:none}.suffix-icons vega-icon:first-of-type,.vega-li-main.open>a>.suffix-icons vega-icon:last-of-type{display:inline-flex}.vega-nav-list-sub{display:none}.vega-li-main.open>.vega-nav-list-sub{display:block}.vega-li-main>a{display:flex;align-items:center;overflow:hidden;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px;cursor:pointer;text-decoration:none;outline:none}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}.vega-li-main>a:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}.vega-li-main>a:hover{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}.vega-li-main>a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}.vega-links-icon{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-right:12px;box-sizing:border-box}.vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}::slotted(vega-left-nav-group){padding-left:32px}::slotted(vega-left-nav-link){padding-left:32px}";
+const vegaLeftNavGroupCss = ":host{display:block}.suffix-icons{padding-left:8px}.suffix-icons vega-icon,.vega-li-main.open>a>.suffix-icons vega-icon:first-of-type{display:none}.suffix-icons vega-icon:first-of-type,.vega-li-main.open>a>.suffix-icons vega-icon:last-of-type{display:inline-flex}.vega-nav-list-sub{display:none}.vega-li-main.open>.vega-nav-list-sub{display:block}.vega-li-main>a{display:flex;align-items:center;overflow:hidden;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px;cursor:pointer;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}.vega-li-main>a:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.vega-li-main>a:hover{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}.vega-li-main>a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}.vega-links-icon{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-right:12px;box-sizing:border-box}.vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}::slotted(vega-left-nav-group){padding-left:32px}::slotted(vega-left-nav-link){padding-left:32px}";
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (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);
@@ -734,36 +1090,63 @@ const VegaLeftNavGroup = class {
     this.groupClick = index.createEvent(this, "groupClick", 7);
     this.globalSlimmers = {};
     this.renderer = new VegaLeftNavGroupRenderer();
-    this.controller = new VegaLeftNavGroupController();
-    this.groupClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavGroup, vegaEventId.VegaGroupClick);
+    this.vegaLeftNavHierarchyController = new VegaLeftNavHierarchyController();
+    this.linkClickObserverController = new VegaLeftNavGroupForLeftNavLinkClickObserver();
+    this.otherGroupsClickObserverController = new VegaLeftNavGroupForOtherGroupsClickObserver();
+    this.groupClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavGroup, domNodeSubjectFactory.VegaGroupClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    /** label attached to the left nav group items **/
+    this.vegaLeftNavGroupStateController = new VegaLeftNavGroupStateController();
+    this.vegaLeftNavGroupOpenStateController = new VegaLeftNavGroupOpenStateController();
+    this.vegaLeftNavGroupForInitializeSelectedController = new VegaLeftNavGroupForInitializeSelectedObserver();
+    this.autoCollapseGroups = false;
+    /** label attached to the left nav group items **
+     * @vegaVersion 1.31.0
+     */
     this.label = '';
+    /** Specifies whether the navigation group is expanded by default **
+     * @vegaVersion 2.44.0
+     */
+    this.openByDefault = false;
   }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
-    return component.sanitizeVegaComponent(this.renderer.render(), this.host);
+    return (index.h(index.Host, { "data-key": this.itemKey }, component.sanitizeVegaComponent(this.renderer.render(), this.host)));
   }
   get host() { return index.getElement(this); }
 };
-__decorate$7([
+__decorate$8([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaLeftNavGroup.prototype, "globalSlimmers", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaLeftNavGroup.prototype, "controller", void 0);
-__decorate$7([
+], VegaLeftNavGroup.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "linkClickObserverController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "otherGroupsClickObserverController", void 0);
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "groupClickEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "vegaLeftNavGroupStateController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "vegaLeftNavGroupForInitializeSelectedController", void 0);
 VegaLeftNavGroup.style = vegaLeftNavGroupCss;
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (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;
@@ -778,18 +1161,19 @@ class VegaLeftNavLinkRenderer extends globalSlimmerRegistry.VegaSlimmer {
      */
     /* istanbul ignore next */
     this.handleClick = () => {
-      if (!this.selected) {
+      if (!this.selected && !this.customSelectionEnabled) {
         this.controller.setSelected(true);
       }
       this.menuClickEventEmitter.emit();
       this.notifyVegaLeftNav();
+      this.notifyVegaLeftGroup();
     };
   }
   render() {
     var _a;
     const url = this.url || 'javascript:void(0);';
     const classList = this.selected === true ? 'selected' : '';
-    return (index.h(index.Host, { class: classList },
+    return (index.h(index.Host, { class: classList, "data-key": this.itemKey },
       index.h("a", { href: url, onClick: this.handleClick },
         this.icon && (index.h("div", { class: "vega-links-icon" },
           index.h("div", { class: "prefix-icon" },
@@ -802,36 +1186,101 @@ class VegaLeftNavLinkRenderer extends globalSlimmerRegistry.VegaSlimmer {
   notifyVegaLeftNav() {
     const vegaLeftNav = ui.findParent(this.host, 'vega-left-nav');
     if (vegaLeftNav) {
-      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(vegaLeftNav, vegaInternalEventId.VegaInternalLeftNavLinkClick), {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(vegaLeftNav, vegaInternalEventId.VegaInternalLeftNavLinkClick), {
+        host: this.host,
+      });
+    }
+  }
+  notifyVegaLeftGroup() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalLeftNavLinkSelected), {
         host: this.host,
       });
     }
   }
 }
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "selected", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "url", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "counterBadge", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "icon", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "menuClickEventEmitter", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "controller", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "itemKey", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "vegaLeftNavHierarchyController", void 0);
+
+var __decorate$6 = (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;
+};
+/**
+ * The code is defining an abstract class called `VegaNavObserverSlimmer` that extends the `VegaSlimmer` class.
+ */
+class VegaNavObserverSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-link-e2e-disconnected}
+   * @see{module:vega-left-nav-group-e2e-disconnected}
+   */
+  /* istanbul ignore next */
+  /**
+   * Unregister the observer with subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  /**
+   * The function creates an observer to observe the subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   */
+  componentWillLoad() {
+    this.observer = new observer.Observer(this.isAcceptableNavListObserver.bind(this), this.observerListener.bind(this));
+    changeManager.ChangeManager.register(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  /**
+   * The function checks if the input is an HTMLElement and if it has the same parent element with the host element.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   */
+  isAcceptableNavListObserver(input) {
+    return (input instanceof HTMLElement &&
+      ui.findParent(this.host, '.vega-nav-list-container') ===
+        ui.findParent(input, '.vega-nav-list-container'));
+  }
+}
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaNavObserverSlimmer.prototype, "disconnectedCallback", null);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaNavObserverSlimmer.prototype, "componentWillLoad", null);
 
 var __decorate$5 = (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;
@@ -840,6 +1289,19 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaLeftNavLinkController extends VegaNavObserverSlimmer {
+  /**
+   * When selected is true during initialization, the VegaInternalInitializeLeftNavLinkSelected observer needs to be notified
+   */
+  componentWillRender() {
+    if (this.selected) {
+      const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+      if (topParent) {
+        changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalInitializeLeftNavLinkSelected), {
+          host: this.host,
+        });
+      }
+    }
+  }
   componentDidRender() {
     if (this.selected) {
       changeManager.ChangeManager.notify(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.host);
@@ -870,11 +1332,17 @@ __decorate$5([
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaLeftNavLinkController.prototype, "selected", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkController.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
+], VegaLeftNavLinkController.prototype, "componentWillRender", null);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaLeftNavLinkController.prototype, "componentDidRender", null);
 
-const vegaLeftNavLinkCss = ":host{display:block}:host(.selected) .vega-links-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.selected) a{background-color:rgba(0, 151, 255, 0.3)}:host .vega-counter-badge{position:relative;width:32px;height:20px}:host vega-counter-badge{position:absolute;top:10px;left:18px}:host a{display:flex;align-items:center;overflow:hidden;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px;cursor:pointer;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}:host a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}:host .vega-links-icon{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-right:12px;box-sizing:border-box}:host .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}:host(:not(.selected)) a:hover{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host>a{outline:none}:host>a:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}";
+const vegaLeftNavLinkCss = ":host{display:block}:host(.selected) .vega-links-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.selected) a{background-color:rgba(0, 151, 255, 0.3)}:host .vega-counter-badge{position:relative;width:32px;height:20px}:host vega-counter-badge{position:absolute;top:10px;left:18px}:host a{display:flex;align-items:center;overflow:hidden;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px;cursor:pointer;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}:host a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}:host .vega-links-icon{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-right:12px;box-sizing:border-box}:host .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}:host(:not(.selected)) a:hover{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host>a:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}";
 
 var __decorate$4 = (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;
@@ -893,13 +1361,25 @@ const VegaLeftNavLink = class {
     this.menuClick = index.createEvent(this, "menuClick", 7);
     this.globalSlimmers = {};
     this.renderer = new VegaLeftNavLinkRenderer();
+    this.vegaLeftNavHierarchyController = new VegaLeftNavHierarchyController();
     this.controller = new VegaLeftNavLinkController();
-    this.menuClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavLink, vegaEventId.VegaMenuClick);
+    this.menuClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavLink, domNodeSubjectFactory.VegaMenuClick);
     this.deprecatedPropertySlimmer = deprecatedPropertySlimmer.createDeprecatedPropertySlimmer(VegaLeftNavLink, 'counterBadge.count', 'counterBadge.counter', undefined);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    /** boolean indicating if current link item is selected **/
-    // eslint-disable-next-line @stencil/strict-mutable
+    /**
+     * A boolean that indicates whether the current link item is selected.
+     *
+     * @VegaWarning Note: Ensure that the `custom-selection-enabled` property is set to `true` before modifying this value, as modifying it without this setting may lead to unexpected behavior.
+     * @vegaVersion 1.31.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.selected = false;
+    /**
+     * Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link’s selection behavior.
+     *
+     * @vegaVersion 2.37.0
+     */
+    this.customSelectionEnabled = false;
   }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
@@ -913,6 +1393,9 @@ __decorate$4([
 __decorate$4([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNavLink.prototype, "renderer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "vegaLeftNavHierarchyController", void 0);
 __decorate$4([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNavLink.prototype, "controller", void 0);
@@ -935,7 +1418,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaLeftNavSectionRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
-    return (index.h(index.Host, null,
+    return (index.h(index.Host, { "data-key": this.itemKey },
       this.renderSectionHeader(),
       index.h("slot", null),
       this.renderListSeparator()));
@@ -951,7 +1434,7 @@ class VegaLeftNavSectionRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.sectionHeader.actionTitle && (index.h("vega-button-link", { label: this.sectionHeader.actionTitle, size: "small", link: this.sectionHeader.actionLink, eventful: this.sectionHeader.actionEventful, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaClick, () => {
             this.actionClickEventEmitter.emit();
           });
         } })))));
@@ -963,6 +1446,9 @@ __decorate$3([
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavSectionRenderer.prototype, "actionClickEventEmitter", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavSectionRenderer.prototype, "itemKey", void 0);
 
 const vegaLeftNavSectionCss = ":host{display:block}:host(:last-child) .list-separator-container{display:none}.list-separator-container{padding-left:12px;padding-right:12px;padding-top:20px;padding-bottom:20px}.list-separator{width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}.section-header{display:flex;align-items:center;gap:12px;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:4px}.section-header>.section-header-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;flex:1 1 0%;overflow:hidden;text-transform:uppercase}@media screen and (min-width: 768px) and (max-width: 1023px){.section-header>.section-header-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.section-header>.section-header-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.section-header>.section-header-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}.section-header>vega-button-link{flex-basis:0}";
 
@@ -983,7 +1469,7 @@ const VegaLeftNavSection = class {
     this.actionClick = index.createEvent(this, "actionClick", 7);
     this.globalSlimmers = {};
     this.renderer = new VegaLeftNavSectionRenderer();
-    this.actionClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavSection, vegaEventId.VegaActionClick);
+    this.actionClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavSection, domNodeSubjectFactory.VegaActionClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {
@@ -1042,6 +1528,33 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('watchMaxHeight')
 ], VegaNavCardMaxHeightController.prototype, "watchMaxHeight", null);
 
+const VegaNavCardRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the nav card',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !host.source || host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the nav card',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !!host.source && host.source.length > 0,
+  },
+];
+
 const vegaNavCardCss = ":host{display:block;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:12px;box-shadow:var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1));text-align:left;overflow-y:auto;width:300px}.vega-nav-list-container{padding:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-nav-list-container .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1060,7 +1573,7 @@ const VegaNavCard = class {
     this.globalSlimmers = {};
     this.listRenderer = new VegaNavListRenderer();
     this.maxHeightController = new VegaNavCardMaxHeightController();
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaNavCardRuntimeMetricsPayloadDefinition);
   }
   watchMaxHeight() {
   }