@globalpayments/vega 2.47.1 → 2.48.0

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

@@ -12,19 +12,19 @@ import { c as createEventEmitSlimmer } from './event-emit-slimmer-b7d511f6.js';
 import { H as VegaStateUpdate, d as domNodeSubjectFactory, I as VegaGroupClick, J as VegaMenuClick, a as VegaClick, K as VegaActionClick } from './dom-node-subject-factory-f77cf9cc.js';
 import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-000e0c11.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-715dccf9.js';
-import { x as VegaInternalLeftNavLinkClick, y as VegaInternalLeftNavGroupExpand } from './vega-internal-event-id-7d1ff289.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-2216c7dc.js';
+import { x as VegaInternalLeftNavLinkClick, y as VegaInternalLeftNavGroupExpand, z as VegaInternalLeftNavLinkSelected, A as VegaInternalInitializeLeftNavLinkSelected } from './vega-internal-event-id-85ad403f.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-4e3cf09d.js';
 import { B as BrandSwitchControllerSlimmer } from './brand-switch-state-controller-slimmer-05c85e6d.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-2ada8e22.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { L as LEFT_NAV_LINK_SELECTED_TOPIC } from './static-subject-title-ca83d6b6.js';
 import { O as Observer } from './observer-3959f9dd.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-be7a6ce3.js';
 import { f as findParent } from './ui-ed1283bb.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-da938c88.js';
+import { L as LEFT_NAV_LINK_SELECTED_TOPIC } from './static-subject-title-ca83d6b6.js';
 import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-32575f02.js';
-import { f as formatAndValidResponsiveToken } from './design-token-fb43f78a.js';
+import { f as formatAndValidResponsiveToken } from './design-token-070b7326.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
 import './index-44c794b4.js';
@@ -38,16 +38,16 @@ import './object-261e7344.js';
 import './type-guard-158f6d7a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './responsive-format-facade-ae799f25.js';
+import './responsive-format-facade-dfed6d94.js';
 import './pixel-f32c07ce.js';
 import './array-3113609f.js';
 import './vega-env-manager-8f8dc473.js';
 import './wait-for-vega-handler-b18eb955.js';
 import './translation-cf7f020a.js';
-import './content-state-7437e069.js';
+import './content-state-6dba6625.js';
 import './state-background-color-formatter-121ae7d3.js';
 
-var __decorate$k = (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;
@@ -154,34 +154,34 @@ class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
 }
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "host", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "open", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "openState", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('componentDidLoad')
 ], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('toggle')
 ], VegaLeftNavOpenStateController.prototype, "toggle", null);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('watchOpen')
 ], VegaLeftNavOpenStateController.prototype, "watchOpen", null);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavOpenStateController.prototype, "watchOpenState", null);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('watchShowAsOverlay')
 ], VegaLeftNavOpenStateController.prototype, "watchShowAsOverlay", null);
 
@@ -197,7 +197,7 @@ const Icons = {
   },
 };
 
-var __decorate$j = (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;
@@ -231,20 +231,20 @@ class VegaLeftNavHeaderRenderer extends VegaSlimmer {
 (() => {
   VegaInternalIconManager.register(Icons);
 })();
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "host", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "headerConfig", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "currentBranding", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavHeaderRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$i = (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;
@@ -263,17 +263,17 @@ class VegaLeftNavFooterRenderer extends VegaSlimmer {
       h("div", { class: "footer-container" }, this.hasFooterSlot ? (h("slot", { name: "footer-slot" })) : (h("div", { class: "footer-footnote" }, this.footnote))))));
   }
 }
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "host", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "footnote", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavFooterRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$h = (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;
@@ -302,20 +302,20 @@ class VegaLeftNavZIndexController extends VegaSlimmer {
     }
   }
 }
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "host", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "openState", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "backdropController", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavZIndexController.prototype, "watchOpenState", null);
 
-var __decorate$g = (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;
@@ -387,29 +387,29 @@ class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
     return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
   }
 }
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "openState", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('connectedCallback')
 ], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('watchShowAsOverlay')
 ], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);
 
-var __decorate$f = (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;
@@ -448,13 +448,13 @@ class VegaNavListRenderer extends VegaSlimmer {
     return (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$f([
+__decorate$i([
   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.disableAnimation+.vega-left-nav-content.open{transition-duration:0s}.vega-left-nav-content.open{margin-left:300px}";
 
-var __decorate$e = (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;
@@ -477,28 +477,28 @@ class VegaLeftNavAutoCollapseController extends VegaSlimmer {
       this.openState === 'open');
   }
 }
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "host", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openState", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "autoCollapseOnOverlay", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "showAsOverlay", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "backdropController", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openStateController", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentMethod('connectedCallback')
 ], VegaLeftNavAutoCollapseController.prototype, "registerMenuClickObserver", null);
-__decorate$e([
+__decorate$h([
   MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavAutoCollapseController.prototype, "unregisterMenuClickObserver", null);
 
@@ -531,7 +531,7 @@ const VegaLeftNavRuntimeMetricsPayloadDefinition = [
 
 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$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
@@ -601,8 +601,24 @@ const VegaLeftNav = class {
      * @vegaVersion 2.7.0
      */
     this.autoCollapseOnOverlay = false;
-    /** Determines whether the left navigation automatically opens one group and closes the other open groups.
-     * @vegaVersion 2.32.0
+    /**
+     * 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;
   }
@@ -614,6 +630,16 @@ const VegaLeftNav = class {
   }
   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.
    *
@@ -633,48 +659,48 @@ const VegaLeftNav = class {
     "autoCollapseGroups": ["watchAutoCollapseGroups"]
   }; }
 };
-__decorate$d([
+__decorate$g([
   InjectVegaGlobalSlimmer()
 ], VegaLeftNav.prototype, "globalSlimmers", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "headerRenderer", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "footerRenderer", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "openStateController", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "backdropController", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "zIndexController", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "listRenderer", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "vegaLeftNavAutoCollapseController", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "stateUpdateEventEmitter", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "componentGlobalStyleSlimmer", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "autoCollapseGroupsNotifySlimmer", void 0);
-__decorate$d([
+__decorate$g([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "brandSwitchControllerSlimmer", void 0);
 VegaLeftNav.style = vegaLeftNavCss;
 
-var __decorate$c = (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;
@@ -687,12 +713,10 @@ class VegaLeftNavGroupRenderer extends VegaSlimmer {
       const currentTarget = e.currentTarget;
       if (currentTarget && currentTarget.dataset.root === '$1') {
         e.preventDefault();
-        this.groupContainer.classList.toggle('open');
-        const isExpand = this.groupContainer.classList.contains('open');
+        this.vegaLeftNavGroupOpenStateController.toggle();
+        const isExpand = this.vegaLeftNavGroupOpenStateController.isOpen();
         this.groupClickEventEmitter.emit(isExpand ? 'EXPAND' : 'COLLAPSE');
-        if (this.autoCollapseGroups) {
-          this.notifyOtherGroup(isExpand);
-        }
+        this.notifyOtherGroup();
       }
     };
   }
@@ -720,9 +744,9 @@ class VegaLeftNavGroupRenderer extends VegaSlimmer {
   /**
    * Notify other left nav groups to collapse
    */
-  notifyOtherGroup(isExpand) {
-    const topParent = this.siblingObserverController.getTopParent();
-    if (topParent && isExpand) {
+  notifyOtherGroup() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
       ChangeManager.notify(domNodeSubjectFactory.getSubject(topParent, VegaInternalLeftNavGroupExpand), { host: this.host });
     }
   }
@@ -733,152 +757,157 @@ class VegaLeftNavGroupRenderer extends VegaSlimmer {
     'chevron-down': chevronDown,
   });
 })();
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "host", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "autoCollapseGroups", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "icon", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "label", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "groupClickEventEmitter", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
-], VegaLeftNavGroupRenderer.prototype, "siblingObserverController", void 0);
-__decorate$c([
+], VegaLeftNavGroupRenderer.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "openByDefault", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "itemKey", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "vegaLeftNavGroupOpenStateController", void 0);
 
-var __decorate$b = (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;
 };
-/**
- * The code is defining an abstract class called `VegaNavObserverSlimmer` that extends the `VegaSlimmer` class.
- */
-class VegaNavObserverSlimmer extends 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 */
+class VegaLeftNavGroupForLeftNavLinkClickObserver extends VegaSlimmer {
   /**
-   * Unregister the observer with subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   * Component lifecycle - [disconnectedCallback]
    */
   disconnectedCallback() {
-    ChangeManager.unregister(LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      ChangeManager.unregister(domNodeSubjectFactory.getSubject(topParent, VegaInternalLeftNavLinkSelected), this.observer);
+    }
   }
-  /**
-   * The function creates an observer to observe the subject of LEFT_NAV_LINK_SELECTED_TOPIC.
-   */
   componentWillLoad() {
-    this.observer = new Observer(this.isAcceptableNavListObserver.bind(this), this.observerListener.bind(this));
-    ChangeManager.register(LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      this.observer = new Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      ChangeManager.register(domNodeSubjectFactory.getSubject(topParent, VegaInternalLeftNavLinkSelected), this.observer);
+    }
+  }
+  isAcceptableObserver(input) {
+    return !this.host.contains(input['host']);
   }
   /**
-   * The function checks if the input is an HTMLElement and if it has the same parent element with the host element.
+   * 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.
    *
-   * @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 {boolean} - Returns true if the group should be collapsed, otherwise false.
    */
-  isAcceptableNavListObserver(input) {
-    return (input instanceof HTMLElement &&
-      findParent(this.host, '.vega-nav-list-container') ===
-        findParent(input, '.vega-nav-list-container'));
+  shouldCollapse() {
+    return (this.autoCollapseGroups === 'on-link-click' ||
+      this.autoCollapseGroups === true ||
+      this.autoCollapseGroups === false ||
+      this.autoCollapseGroups === 'always');
+  }
+  observerListener() {
+    if (this.shouldCollapse()) {
+      this.vegaLeftNavGroupOpenStateController.close();
+    }
   }
 }
-__decorate$b([
+__decorate$e([
+  MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "host", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "autoCollapseGroups", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "openByDefault", void 0);
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
-], VegaNavObserverSlimmer.prototype, "disconnectedCallback", null);
-__decorate$b([
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "disconnectedCallback", null);
+__decorate$e([
   MapToComponentMethod('componentWillLoad')
-], VegaNavObserverSlimmer.prototype, "componentWillLoad", null);
+], VegaLeftNavGroupForLeftNavLinkClickObserver.prototype, "componentWillLoad", null);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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 VegaLeftNavGroupController extends VegaNavObserverSlimmer {
+class VegaLeftNavGroupForOtherGroupsClickObserver extends 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.unregister(domNodeSubjectFactory.getSubject(topParent, VegaInternalLeftNavGroupExpand), this.observer);
     }
-    else {
-      this.renderer.getGroupContainer().classList.remove('open');
+  }
+  componentWillLoad() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      this.observer = new Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      ChangeManager.register(domNodeSubjectFactory.getSubject(topParent, VegaInternalLeftNavGroupExpand), this.observer);
     }
   }
-}
-__decorate$a([
-  MapToComponentField()
-], VegaLeftNavGroupController.prototype, "host", void 0);
-__decorate$a([
-  MapToComponentField()
-], VegaLeftNavGroupController.prototype, "renderer", void 0);
-
-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 VegaLeftNavGroupSiblingObserverController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.listenerCallback = () => {
-      this.renderer.getGroupContainer().classList.remove('open');
-    };
+  isAcceptableObserver(input) {
+    return input['host'] !== this.host && !this.host.contains(input['host']);
   }
-  /**
-   * Get the top parent
-   *
-   * @returns {Nullable<HTMLVegaLeftNavElement>} the top parent
-   */
-  getTopParent() {
-    return this.parent;
+  shouldCollapse() {
+    return (this.autoCollapseGroups == true ||
+      this.autoCollapseGroups === 'on-group-click' ||
+      this.autoCollapseGroups === 'always');
   }
-  addObserver() {
-    this.observer = new Observer(this.acceptHandler.bind(this), this.listenerCallback);
-    const parent = findParent(this.host, 'vega-left-nav');
-    if (parent) {
-      this.parent = parent;
-      ChangeManager.register(domNodeSubjectFactory.getSubject(parent, VegaInternalLeftNavGroupExpand), this.observer);
+  observerListener() {
+    if (this.shouldCollapse()) {
+      this.vegaLeftNavGroupOpenStateController.close();
     }
   }
-  acceptHandler(input) {
-    return input.host !== this.host && !this.host.contains(input.host);
-  }
 }
-__decorate$9([
+__decorate$d([
   MapToComponentField()
-], VegaLeftNavGroupSiblingObserverController.prototype, "renderer", void 0);
-__decorate$9([
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "host", void 0);
+__decorate$d([
   MapToComponentField()
-], VegaLeftNavGroupSiblingObserverController.prototype, "host", void 0);
-__decorate$9([
-  MapToComponentMethod('componentDidLoad')
-], VegaLeftNavGroupSiblingObserverController.prototype, "addObserver", null);
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "autoCollapseGroups", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$d([
+  MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "disconnectedCallback", null);
+__decorate$d([
+  MapToComponentMethod('componentWillLoad')
+], VegaLeftNavGroupForOtherGroupsClickObserver.prototype, "componentWillLoad", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -901,16 +930,145 @@ class VegaLeftNavGroupStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$8([
+__decorate$c([
   MapToComponentField()
 ], VegaLeftNavGroupStateController.prototype, "host", void 0);
-__decorate$8([
+__decorate$c([
   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 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.
+   */
+  isOpen() {
+    return this.renderer.getGroupContainer().classList.contains('open');
+  }
+  /**
+   * Opens the left nav group.
+   * This method adds the 'open' class to the group container.
+   */
+  open() {
+    this.renderer.getGroupContainer().classList.add('open');
+  }
+  /**
+   * 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([
+  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 VegaSlimmer {
+  componentWillLoad() {
+    const leftNavTopParent = findParent(this.host, 'vega-left-nav');
+    const navCardTopParent = findParent(this.host, 'vega-nav-card');
+    if (leftNavTopParent || navCardTopParent) {
+      this.parent = leftNavTopParent || navCardTopParent;
+    }
+  }
+  /**
+   * Get the top parent
+   *
+   * @returns {Nullable<HTMLVegaLeftNavRoot>} the top parent
+   */
+  getTopParent() {
+    return this.parent;
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], VegaLeftNavHierarchyController.prototype, "host", void 0);
+__decorate$a([
+  MapToComponentMethod('componentWillLoad')
+], VegaLeftNavHierarchyController.prototype, "componentWillLoad", null);
+
+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 VegaLeftNavGroupForInitializeSelectedObserver extends VegaSlimmer {
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      ChangeManager.unregister(domNodeSubjectFactory.getSubject(topParent, VegaInternalInitializeLeftNavLinkSelected), this.observer);
+    }
+  }
+  /**
+   * 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(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      ChangeManager.register(domNodeSubjectFactory.getSubject(topParent, VegaInternalInitializeLeftNavLinkSelected), this.observer);
+    }
+  }
+  isAcceptableObserver(input) {
+    return this.host.contains(input['host']);
+  }
+  observerListener() {
+    this.vegaLeftNavGroupOpenStateController.open();
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "openByDefault", void 0);
+__decorate$9([
+  MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavGroupForInitializeSelectedObserver.prototype, "disconnectedCallback", null);
+__decorate$9([
+  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}@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);
@@ -927,11 +1085,14 @@ const VegaLeftNavGroup = class {
     this.groupClick = createEvent(this, "groupClick", 7);
     this.globalSlimmers = {};
     this.renderer = new VegaLeftNavGroupRenderer();
-    this.controller = new VegaLeftNavGroupController();
-    this.siblingObserverController = new VegaLeftNavGroupSiblingObserverController();
+    this.vegaLeftNavHierarchyController = new VegaLeftNavHierarchyController();
+    this.linkClickObserverController = new VegaLeftNavGroupForLeftNavLinkClickObserver();
+    this.otherGroupsClickObserverController = new VegaLeftNavGroupForOtherGroupsClickObserver();
     this.groupClickEventEmitter = createEventEmitSlimmer(VegaLeftNavGroup, VegaGroupClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     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
@@ -948,30 +1109,39 @@ const VegaLeftNavGroup = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$7([
+__decorate$8([
   InjectVegaGlobalSlimmer()
 ], VegaLeftNavGroup.prototype, "globalSlimmers", void 0);
-__decorate$7([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$8([
   InjectVegaSlimmer()
-], VegaLeftNavGroup.prototype, "controller", void 0);
-__decorate$7([
+], VegaLeftNavGroup.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$8([
   InjectVegaSlimmer()
-], VegaLeftNavGroup.prototype, "siblingObserverController", void 0);
-__decorate$7([
+], VegaLeftNavGroup.prototype, "linkClickObserverController", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "otherGroupsClickObserverController", void 0);
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "groupClickEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$7([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaLeftNavGroup.prototype, "vegaLeftNavGroupStateController", void 0);
+__decorate$8([
+  InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "vegaLeftNavGroupOpenStateController", void 0);
+__decorate$8([
+  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;
@@ -991,6 +1161,7 @@ class VegaLeftNavLinkRenderer extends VegaSlimmer {
       }
       this.menuClickEventEmitter.emit();
       this.notifyVegaLeftNav();
+      this.notifyVegaLeftGroup();
     };
   }
   render() {
@@ -1015,37 +1186,96 @@ class VegaLeftNavLinkRenderer extends VegaSlimmer {
       });
     }
   }
+  notifyVegaLeftGroup() {
+    const topParent = this.vegaLeftNavHierarchyController.getTopParent();
+    if (topParent) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(topParent, VegaInternalLeftNavLinkSelected), {
+        host: this.host,
+      });
+    }
+  }
 }
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "selected", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "url", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "counterBadge", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "icon", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "menuClickEventEmitter", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "controller", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "deprecatedPropertySlimmer", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "itemKey", void 0);
+__decorate$7([
+  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 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.unregister(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(this.isAcceptableNavListObserver.bind(this), this.observerListener.bind(this));
+    ChangeManager.register(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 &&
+      findParent(this.host, '.vega-nav-list-container') ===
+        findParent(input, '.vega-nav-list-container'));
+  }
+}
+__decorate$6([
+  MapToComponentMethod('disconnectedCallback')
+], VegaNavObserverSlimmer.prototype, "disconnectedCallback", null);
+__decorate$6([
+  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;
@@ -1054,6 +1284,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.notify(domNodeSubjectFactory.getSubject(topParent, VegaInternalInitializeLeftNavLinkSelected), {
+          host: this.host,
+        });
+      }
+    }
+  }
   componentDidRender() {
     if (this.selected) {
       ChangeManager.notify(LEFT_NAV_LINK_SELECTED_TOPIC, this.host);
@@ -1084,6 +1327,12 @@ __decorate$5([
 __decorate$5([
   MapToComponentField({ writable: true })
 ], VegaLeftNavLinkController.prototype, "selected", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaLeftNavLinkController.prototype, "vegaLeftNavHierarchyController", void 0);
+__decorate$5([
+  MapToComponentMethod('componentWillRender')
+], VegaLeftNavLinkController.prototype, "componentWillRender", null);
 __decorate$5([
   MapToComponentMethod('componentDidRender')
 ], VegaLeftNavLinkController.prototype, "componentDidRender", null);
@@ -1107,6 +1356,7 @@ const VegaLeftNavLink = class {
     this.menuClick = createEvent(this, "menuClick", 7);
     this.globalSlimmers = {};
     this.renderer = new VegaLeftNavLinkRenderer();
+    this.vegaLeftNavHierarchyController = new VegaLeftNavHierarchyController();
     this.controller = new VegaLeftNavLinkController();
     this.menuClickEventEmitter = createEventEmitSlimmer(VegaLeftNavLink, VegaMenuClick);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaLeftNavLink, 'counterBadge.count', 'counterBadge.counter', undefined);
@@ -1138,6 +1388,9 @@ __decorate$4([
 __decorate$4([
   InjectVegaSlimmer()
 ], VegaLeftNavLink.prototype, "renderer", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "vegaLeftNavHierarchyController", void 0);
 __decorate$4([
   InjectVegaSlimmer()
 ], VegaLeftNavLink.prototype, "controller", void 0);