@visma-swno/vsn-navigation 1.2.0-beta.1 → 1.2.0-beta.10

package/dist/assets/vsn-navigation.js

@@ -275,40 +275,40 @@ function De(e) {
 function w(e) {
 	window.dispatchEvent(new CustomEvent(y, { detail: e }));
 }
-var T = "", E, Oe, D, O, ke, k = new ye();
-k.resolve();
-var A = 0, Ae = (e) => (ge(((e, t) => Ee(ke, e, t))), T = Oe = e.sourceLocale, D = new Set(e.targetLocales), D.add(e.sourceLocale), O = e.loadLocale, {
-	getLocale: je,
-	setLocale: Me
-}), je = () => T, Me = (e) => {
-	if (e === (E ?? T)) return k.promise;
-	if (!D || !O) throw Error("Internal error");
+var T = "", E, Oe, D, ke, Ae, O = new ye();
+O.resolve();
+var k = 0, je = (e) => (ge(((e, t) => Ee(Ae, e, t))), T = Oe = e.sourceLocale, D = new Set(e.targetLocales), D.add(e.sourceLocale), ke = e.loadLocale, {
+	getLocale: Me,
+	setLocale: Ne
+}), Me = () => T, Ne = (e) => {
+	if (e === (E ?? T)) return O.promise;
+	if (!D || !ke) throw Error("Internal error");
 	if (!D.has(e)) throw Error("Invalid locale code");
-	A++;
-	let t = A;
-	return E = e, k.settled && (k = new ye()), w({
+	k++;
+	let t = k;
+	return E = e, O.settled && (O = new ye()), w({
 		status: "loading",
 		loadingLocale: e
-	}), (e === Oe ? Promise.resolve({ templates: void 0 }) : O(e)).then((n) => {
-		A === t && (T = e, E = void 0, ke = n.templates, w({
+	}), (e === Oe ? Promise.resolve({ templates: void 0 }) : ke(e)).then((n) => {
+		k === t && (T = e, E = void 0, Ae = n.templates, w({
 			status: "ready",
 			readyLocale: e
-		}), k.resolve());
+		}), O.resolve());
 	}, (n) => {
-		A === t && (w({
+		k === t && (w({
 			status: "error",
 			errorLocale: e,
 			errorMessage: n.toString()
-		}), k.reject(n));
-	}), k.promise;
-}, Ne = () => {
+		}), O.reject(n));
+	}), O.promise;
+}, Pe = () => {
 	if (typeof navigator > "u") return !1;
 	let e = navigator.userAgentData?.platform ?? navigator.platform ?? "";
 	return /mac/i.test(e);
-}, Pe = (e) => Ne() ? e.metaKey : e.ctrlKey, Fe = () => x("Choose a service"), Ie = () => x("Search"), Le = () => Ne() ? "Cmd+K" : "CTRL+K", Re = (e) => x(b`Type at least ${e} characters to search`), ze = () => x("Menu items"), Be = (e) => x(b`Load ${e} more`), Ve = () => x("VSN"), He = "survicate-sdk", Ue = "ui-components-feedback", We = (e) => `https://survey.survicate.com/workspaces/${e}/web_surveys.js`;
+}, Fe = (e) => !e.shiftKey && !e.altKey && (Pe() ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey), A = (e) => e.shiftKey || e.altKey || e.ctrlKey || e.metaKey, j = (e) => !A(e), Ie = () => x("Choose a service"), Le = () => x("Search"), Re = () => Pe() ? "Cmd+K" : "CTRL+K", ze = (e) => x(b`Type at least ${e} characters to search`), Be = () => x("Menu items"), Ve = (e) => x(b`Load ${e} more`), He = () => x("VSN"), Ue = "survicate-sdk", We = "ui-components-feedback", Ge = (e) => `https://survey.survicate.com/workspaces/${e}/web_surveys.js`;
 //#endregion
 //#region src/shared/icons.ts
-function j(e, t = 24, r) {
+function M(e, t = 24, r) {
 	return n`<svg
       xmlns="http://www.w3.org/2000/svg"
       width="${t}"
@@ -323,23 +323,23 @@ function j(e, t = 24, r) {
       class=${r ?? ""}
   >${e}</svg>`;
 }
-var Ge = i`
+var Ke = i``, qe = i`
   <path d="M4 5h16"/>
   <path d="M4 12h16"/>
   <path d="M4 19h16"/>
-`, Ke = i`
+`, Je = i`
   <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
   <path d="M20 2v4"/>
   <path d="M22 4h-4"/>
   <circle cx="4" cy="20" r="2"/>
-`, qe = i`
+`, Ye = i`
   <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
   <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>
-`, Je = i`
+`, Xe = i`
   <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
   <path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/>
   <circle cx="18" cy="5" r="3"/>
-`, Ye = i`
+`, Ze = i`
   <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
   <path d="M7 10v12"/>
 `;
@@ -350,14 +350,14 @@ i`
   <path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"/>
   <path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/>
 `;
-var Xe = i`
+var Qe = i`
   <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
   <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-`, Ze = i`
+`, $e = i`
   <circle cx="12" cy="12" r="10"/>
   <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
   <path d="M12 17h.01"/>
-`, Qe = i`
+`, et = i`
   <circle cx="12" cy="8" r="5"/>
   <path d="M20 21a8 8 0 0 0-16 0"/>
 `;
@@ -368,11 +368,11 @@ i`
   <path d="M12 17v5"/>
   <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
 `;
-var $e = i`
+var tt = i`
   <path d="m16 17 5-5-5-5"/>
   <path d="M21 12H9"/>
   <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-`, et = i`
+`, nt = i`
   <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/>
   <path d="m21 3-9 9"/>
   <path d="M15 3h6v6"/>
@@ -381,17 +381,17 @@ i`
   <circle cx="12" cy="12" r="10"/>
   <circle cx="12" cy="12" r="1"/>
 `;
-var tt = i`
+var rt = i`
   <path d="m7 15 5 5 5-5"/>
   <path d="m7 9 5-5 5 5"/>
-`, nt = i`
+`, it = i`
   <path d="m18 15-6-6-6 6"/>
-`, M = i`
+`, N = i`
   <path d="m6 9 6 6 6-6"/>
-`, rt = i`
+`, at = i`
   <circle cx="11" cy="11" r="8"/>
   <path d="m21 21-4.3-4.3"/>
-`, it = i`
+`, ot = i`
   <circle cx="12" cy="12" r="10"/>
   <path d="m15 9-6 6"/>
   <path d="m9 9 6 6"/>
@@ -401,7 +401,7 @@ i`
   <line x1="12" x2="12" y1="8" y2="12"/>
   <line x1="12" x2="12.01" y1="16" y2="16"/>
 `;
-var at = i`
+var st = i`
   <path d="M12 16h.01"/>
   <path d="M12 8v4"/>
   <path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>
@@ -412,12 +412,12 @@ i`
 `, i`
   <path fill-rule="evenodd" clip-rule="evenodd" d="M2.60982 1.03843C2.99778 0.96126 3.39992 1.00087 3.76537 1.15224C4.13082 1.30362 4.44318 1.55996 4.66294 1.88886C4.8827 2.21776 5 2.60444 5 3V4H7V3C7 2.60444 7.1173 2.21776 7.33706 1.88886C7.55682 1.55996 7.86918 1.30362 8.23463 1.15224C8.60009 1.00087 9.00222 0.96126 9.39018 1.03843C9.77814 1.1156 10.1345 1.30608 10.4142 1.58579C10.6939 1.86549 10.8844 2.22186 10.9616 2.60982C11.0387 2.99778 10.9991 3.39992 10.8478 3.76537C10.6964 4.13082 10.44 4.44318 10.1111 4.66294C9.78224 4.8827 9.39556 5 9 5H8V7H9C9.39556 7 9.78224 7.1173 10.1111 7.33706C10.44 7.55682 10.6964 7.86918 10.8478 8.23463C10.9991 8.60009 11.0387 9.00222 10.9616 9.39018C10.8844 9.77814 10.6939 10.1345 10.4142 10.4142C10.1345 10.6939 9.77814 10.8844 9.39018 10.9616C9.00222 11.0387 8.60009 10.9991 8.23463 10.8478C7.86918 10.6964 7.55682 10.44 7.33706 10.1111C7.1173 9.78224 7 9.39556 7 9V8H5V9C5 9.39556 4.8827 9.78224 4.66294 10.1111C4.44318 10.44 4.13082 10.6964 3.76537 10.8478C3.39992 10.9991 2.99778 11.0387 2.60982 10.9616C2.22186 10.8844 1.86549 10.6939 1.58579 10.4142C1.30608 10.1345 1.1156 9.77814 1.03843 9.39018C0.96126 9.00222 1.00087 8.60009 1.15224 8.23463C1.30362 7.86918 1.55996 7.55682 1.88886 7.33706C2.21776 7.1173 2.60444 7 3 7H4V5H3C2.60444 5 2.21776 4.8827 1.88886 4.66294C1.55996 4.44318 1.30362 4.13082 1.15224 3.76537C1.00087 3.39992 0.96126 2.99778 1.03843 2.60982C1.1156 2.22186 1.30608 1.86549 1.58579 1.58579C1.86549 1.30608 2.22186 1.1156 2.60982 1.03843ZM4 4V3C4 2.80222 3.94135 2.60888 3.83147 2.44443C3.72159 2.27998 3.56541 2.15181 3.38268 2.07612C3.19996 2.00043 2.99889 1.98063 2.80491 2.01922C2.61093 2.0578 2.43275 2.15304 2.29289 2.29289C2.15304 2.43275 2.0578 2.61093 2.01922 2.80491C1.98063 2.99889 2.00043 3.19996 2.07612 3.38268C2.15181 3.56541 2.27998 3.72159 2.44443 3.83147C2.60888 3.94135 2.80222 4 3 4H4ZM5 5V7H7V5H5ZM4 8H3C2.80222 8 2.60888 8.05865 2.44443 8.16853C2.27998 8.27841 2.15181 8.43459 2.07612 8.61732C2.00043 8.80004 1.98063 9.00111 2.01922 9.19509C2.0578 9.38907 2.15304 9.56726 2.29289 9.70711C2.43275 9.84696 2.61093 9.9422 2.80491 9.98079C2.99889 10.0194 3.19996 9.99957 3.38268 9.92388C3.56541 9.84819 3.72159 9.72002 3.83147 9.55557C3.94135 9.39112 4 9.19778 4 9V8ZM8 8V9C8 9.19778 8.05865 9.39112 8.16853 9.55557C8.27841 9.72002 8.43459 9.84819 8.61732 9.92388C8.80004 9.99957 9.00111 10.0194 9.19509 9.98079C9.38907 9.9422 9.56726 9.84696 9.70711 9.70711C9.84696 9.56726 9.9422 9.38907 9.98079 9.19509C10.0194 9.00111 9.99957 8.80004 9.92388 8.61732C9.84819 8.43459 9.72002 8.27841 9.55557 8.16853C9.39112 8.05865 9.19778 8 9 8H8ZM8 4H9C9.19778 4 9.39112 3.94135 9.55557 3.83147C9.72002 3.72159 9.84819 3.56541 9.92388 3.38268C9.99957 3.19996 10.0194 2.99889 9.98079 2.80491C9.9422 2.61093 9.84696 2.43275 9.70711 2.29289C9.56726 2.15304 9.38907 2.0578 9.19509 2.01922C9.00111 1.98063 8.80004 2.00043 8.61732 2.07612C8.43459 2.15181 8.27841 2.27998 8.16853 2.44443C8.05865 2.60888 8 2.80222 8 3V4Z"/>
 `;
-var ot = i`
+var ct = i`
   <path d="m9 18 6-6-6-6"/>
 `;
 //#endregion
 //#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
-function N(e, t, n, r) {
+function P(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
@@ -425,12 +425,9 @@ function N(e, t, n, r) {
 }
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu-item.ts
-var P, F = class extends e {
-	static {
-		P = this;
-	}
+var F, I = class extends e {
 	static {
-		this.styles = [h];
+		F = this;
 	}
 	static {
 		this._idCounter = 0;
@@ -452,7 +449,7 @@ var P, F = class extends e {
 			}
 		}, this._onItemMouseLeave = () => {
 			this._showTooltip = !1;
-		}, this._tooltipId = `vsn-side-menu-item-tooltip-${P._idCounter++}`;
+		}, this._tooltipId = `vsn-side-menu-item-tooltip-${F._idCounter++}`;
 	}
 	willUpdate(e) {
 		let t = this.tree;
@@ -477,7 +474,7 @@ var P, F = class extends e {
         <div class="ga-tooltip ga-tooltip--right-center w-34 max-w-135">${this.tree?.label}</div>
       </div>
       <span class="ga-side-navigation__item-icon">
-			  ${e ? this._isExpanded ? j(M, 16) : j(ot, 16) : ""}
+			  ${e ? this._isExpanded ? M(N, 16) : M(ct, 16) : ""}
       </span>
       <div class="ga-side-navigation__item-content">
         <div class="ga-side-navigation__item-label">${this.tree?.label}</div>
@@ -511,7 +508,7 @@ var P, F = class extends e {
 			this._isExpanded = !this._isExpanded, e.preventDefault(), e.stopPropagation();
 			return;
 		}
-		if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+		if (e.button !== 0 || A(e)) return;
 		e.preventDefault(), e.stopPropagation();
 		let n = new CustomEvent("vsn-menu-item-changed", {
 			bubbles: !0,
@@ -521,19 +518,16 @@ var P, F = class extends e {
 		this.dispatchEvent(n);
 	}
 };
-N([s({ attribute: !1 })], F.prototype, "tree", void 0), N([s({ type: Number })], F.prototype, "level", void 0), N([ue({
+P([s({ attribute: !1 })], I.prototype, "tree", void 0), P([s({ type: Number })], I.prototype, "level", void 0), P([ue({
 	context: de,
 	subscribe: !0
-}), l()], F.prototype, "_currentActiveId", void 0), N([l()], F.prototype, "_isActive", void 0), N([l()], F.prototype, "_isExpanded", void 0), N([l()], F.prototype, "_showTooltip", void 0), N([l()], F.prototype, "_tooltipPos", void 0), N([c(".ga-side-navigation__item-label")], F.prototype, "_labelEl", void 0), F = P = N([o("vsn-menu-item")], F);
+}), l()], I.prototype, "_currentActiveId", void 0), P([l()], I.prototype, "_isActive", void 0), P([l()], I.prototype, "_isExpanded", void 0), P([l()], I.prototype, "_showTooltip", void 0), P([l()], I.prototype, "_tooltipPos", void 0), P([c(".ga-side-navigation__item-label")], I.prototype, "_labelEl", void 0), I = F = P([o("vsn-menu-item")], I);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu.ts
-var I = class extends e {
+var L = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this._currentActiveId = "", this.currentItem = "";
 	}
-	static {
-		this.styles = [h];
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -542,125 +536,143 @@ var I = class extends e {
 	}
 	render() {
 		return n`
-        <div class="flex flex-col ga-side-navigation__body h-full">
-          <div  class="flex-1 overflow-y-auto">
-            ${d(this.items, (e) => this.menuItem(e))}
-          </div>
-          <div>
-            <slot name="nav-footer"></slot>
-          </div>
+      <div class="flex flex-col ga-side-navigation__body h-full">
+        <div class="flex-1 overflow-y-auto ga-scroll">
+          ${d(this.items, (e) => this.menuItem(e))}
+        </div>
+        <div>
+          <slot name="nav-footer"></slot>
         </div>
+      </div>
     `;
 	}
 	menuItem(e) {
-		return n`<vsn-menu-item .tree=${e}></vsn-menu-item>`;
+		return n`
+      <vsn-menu-item .tree=${e}></vsn-menu-item>`;
 	}
 };
-N([s({ attribute: !1 })], I.prototype, "items", void 0), N([le({ context: de }), l()], I.prototype, "_currentActiveId", void 0), N([s()], I.prototype, "currentItem", void 0), I = N([o("vsn-menu")], I);
+P([s({ attribute: !1 })], L.prototype, "items", void 0), P([le({ context: de }), l()], L.prototype, "_currentActiveId", void 0), P([s()], L.prototype, "currentItem", void 0), L = P([o("vsn-menu")], L);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu-button.ts
-var L = class extends e {
+var R = class extends e {
 	constructor(...e) {
-		super(...e), this.label = "", this._onKeydown = (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+		super(...e), this.label = "", this.closeOnClick = !1, this._onKeydown = (e) => {
+			e.defaultPrevented || j(e) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), this.click());
+		}, this._onClick = (e) => {
+			e.defaultPrevented || e.button !== 0 || A(e) || this.closeOnClick && this.dispatchEvent(new CustomEvent("vsn-side-bar-close", {
+				bubbles: !0,
+				composed: !0
+			}));
 		};
 	}
 	static {
 		this.styles = [t`
-        /* Every dimension multiplies by --ga-base-scaling-factor (default 1) so the
-           whole component scales uniformly with the host's density setting.
-           Layout spacing lives on the inner .row, NOT on :host — a consuming app's
-           reset (* { margin: 0; padding: 0 }) overrides :host but can't reach the shadow. */
-        :host {
-            display: block;
-            border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
-        }
+    /* Every dimension multiplies by --ga-base-scaling-factor (default 1) so the
+       whole component scales uniformly with the host's density setting.
+       Layout spacing lives on the inner .row, NOT on :host — a consuming app's
+       reset (* { margin: 0; padding: 0 }) overrides :host but can't reach the shadow. */
 
-        :host(:hover) {
-            background-color: var(--ga-color-surface-action-hover-2);
-        }
+    :host {
+      display: block;
+      cursor: pointer;
+      outline-style: none;
+    }
 
-        :host(:focus-visible) {
-            outline: calc(2px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-focus);
-            outline-offset: calc(4px * var(--ga-base-scaling-factor, 1));
-        }
+    :host(:hover) {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
 
-        .row {
-            display: flex;
-            align-items: center;
-            /* spacing-04 padding-block + 20px label line-height = 44px row,
-               matching Gaia's .ga-side-navigation__item (py-3 / px-4 / gap-3). */
-            gap: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
-            padding-block: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
-            padding-inline: calc(var(--ga-size-spacing-05) * var(--ga-base-scaling-factor, 1));
-        }
+    :host(:focus-visible) > .row::after {
+      position: absolute;
+      inset: 3px;
+      border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--ga-color-border-focus);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
 
-        .icon {
-            width: calc(1rem * var(--ga-base-scaling-factor, 1));
-            flex-shrink: 0;
-            color: var(--ga-color-icon-primary);
-            display: inline-flex;
-            align-items: center;
-        }
+    .row {
+      position: relative;
+      display: flex;
+      align-items: center;
+      /* spacing-04 padding-block + 20px label line-height = 44px row,
+         matching Gaia's .ga-side-navigation__item (py-3 / px-4 / gap-3). */
+      gap: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
+      padding-block: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
+      padding-inline: calc(var(--ga-size-spacing-05) * var(--ga-base-scaling-factor, 1));
+    }
 
-        .label {
-            flex: 1;
-            display: inline-flex;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-            font-feature-settings: 'liga' 1, 'calt' 1;
-            font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
-            line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
-            letter-spacing: calc(var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1));
-            color: var(--ga-color-text-action);
-        }
+    .icon {
+      width: calc(1rem * var(--ga-base-scaling-factor, 1));
+      flex-shrink: 0;
+      color: var(--ga-color-icon-primary);
+      display: inline-flex;
+      align-items: center;
+    }
 
-        slot[name="kbd"]::slotted(kbd) {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: calc(0.125rem * var(--ga-base-scaling-factor, 1));
-            flex-shrink: 0;
-            cursor: default;
-            border: calc(1px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-disabled);
-            border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
-            background-color: var(--ga-color-white);
-            /* !important: the <kbd> is host-provided slotted content, so a
-               consuming app's * { padding: 0 } reset overrides ::slotted normal
-               rules. We can't move it to an inner shadow element (it's the
-               host's element), so important is the accepted defense here. */
-            padding-inline: calc(var(--ga-size-spacing-02) * var(--ga-base-scaling-factor, 1)) !important;
-            padding-block: calc(1px * var(--ga-base-scaling-factor, 1)) !important;
-            font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-            font-size: calc(var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1));
-            line-height: calc(var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1));
-            letter-spacing: calc(var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1));
-            color: var(--ga-color-text-body);
-        }
-    `];
+    .label {
+      flex: 1;
+      display: inline-flex;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+      font-feature-settings: 'liga' 1, 'calt' 1;
+      font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
+      line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
+      letter-spacing: calc(var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1));
+      color: var(--ga-color-text-action);
+    }
+
+    slot[name="kbd"]::slotted(kbd) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(0.125rem * var(--ga-base-scaling-factor, 1));
+      flex-shrink: 0;
+      cursor: default;
+      border: calc(1px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-disabled);
+      border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
+      background-color: var(--ga-color-white);
+      /* !important: the <kbd> is host-provided slotted content, so a
+         consuming app's * { padding: 0 } reset overrides ::slotted normal
+         rules. We can't move it to an inner shadow element (it's the
+         host's element), so important is the accepted defense here. */
+      padding-inline: calc(var(--ga-size-spacing-02) * var(--ga-base-scaling-factor, 1)) !important;
+      padding-block: calc(1px * var(--ga-base-scaling-factor, 1)) !important;
+      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+      font-size: calc(var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1));
+      line-height: calc(var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1));
+      letter-spacing: calc(var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1));
+      color: var(--ga-color-text-body);
+    }
+  `];
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._onKeydown);
+		super.connectedCallback(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this._onKeydown), this.addEventListener("click", this._onClick);
 	}
 	disconnectedCallback() {
-		this.removeEventListener("keydown", this._onKeydown), super.disconnectedCallback();
+		this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("click", this._onClick), super.disconnectedCallback();
 	}
 	render() {
 		return n`
-            <div class="row">
-                <span class="icon"><slot name="icon"></slot></span>
-                <span class="label">${this.label}</span>
-                <slot name="kbd"></slot>
-            </div>
-        `;
+      <div class="row">
+        <span class="icon"><slot name="icon"></slot></span>
+        <span class="label">${this.label}</span>
+        <slot name="kbd"></slot>
+      </div>
+    `;
 	}
 };
-N([s()], L.prototype, "label", void 0), L = N([o("vsn-menu-button")], L);
+P([s()], R.prototype, "label", void 0), P([s({
+	type: Boolean,
+	attribute: "close-on-click"
+})], R.prototype, "closeOnClick", void 0), R = P([o("vsn-menu-button")], R);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu-separator.ts
-var st = class extends e {
+var lt = class extends e {
 	static {
 		this.styles = [t`
         /* flow-root establishes a BFC so the .line's margins stay contained.
@@ -683,29 +695,30 @@ var st = class extends e {
 		return n`<div class="line"></div>`;
 	}
 };
-st = N([o("vsn-menu-separator")], st);
+lt = P([o("vsn-menu-separator")], lt);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-footer/vsn-footer.keyboard.ts
-var ct = class {
+var ut = class {
 	constructor(e) {
 		this._prevExpanded = !1, this.onUserKeydown = (e) => {
-			e.key === "Enter" || e.key === " " ? (e.preventDefault(), this.host.expanded = !this.host.expanded) : e.key === "Escape" && this.host.expanded && (e.preventDefault(), this.host.expanded = !1);
+			e.defaultPrevented || (j(e) && (e.key === "Enter" || e.key === " ") ? (e.preventDefault(), this.host.expanded = !this.host.expanded) : j(e) && e.key === "Escape" && this.host.expanded && (e.preventDefault(), this.host.expanded = !1));
 		}, this.onDropdownKeydown = (e) => {
-			if (e.key === "Escape") {
+			if (e.defaultPrevented) return;
+			if (j(e) && e.key === "Escape") {
 				e.preventDefault(), this._closeAndRefocus();
 				return;
 			}
-			if (e.key === "Enter" || e.key === " ") {
+			if (j(e) && (e.key === "Enter" || e.key === " ")) {
 				let t = e.target;
 				t instanceof HTMLElement && t.classList.contains("ga-side-navigation__footer-dropdown-item") && (e.preventDefault(), t.click());
 				return;
 			}
-			if (e.key === "Tab" && !e.shiftKey) {
+			if (j(e) && e.key === "Tab") {
 				let t = Array.from(this.host.querySelectorAll(".ga-side-navigation__footer-dropdown-item")), n = t[t.length - 1];
 				n && e.target === n && (this.host.expanded = !1);
 				return;
 			}
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			if (A(e) || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			e.preventDefault();
 			let t = this.host.querySelector(".ga-side-navigation__footer-dropdown");
 			if (!t) return;
@@ -725,7 +738,7 @@ var ct = class {
 			this.host.querySelector(".ga-side-navigation__user")?.focus();
 		});
 	}
-}, lt = class {
+}, dt = class {
 	constructor(e, t, n) {
 		this._onPointerDown = (e) => {
 			let t = e.composedPath();
@@ -742,79 +755,40 @@ var ct = class {
 	hostDisconnected() {
 		document.removeEventListener("pointerdown", this._onPointerDown, !0);
 	}
-}, ut = t`
-  @layer components {
-    :where(.ga-side-navigation__user),
-    :where(.ga-side-navigation__footer-dropdown-item) {
-      width: 100%;
-      cursor: pointer;
-    }
-
-    .ga-side-navigation__footer-dropdown-item:focus-visible {
-      outline: 2px solid var(--ga-color-border-focus);
-      outline-offset: 4px;
-    }
-
-    .vsn-side-navigation__user-info {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 0;
-    }
-
-    .vsn-side-navigation__user-info > .ga-side-navigation__user-name {
-      flex: initial;
-    }
-
-    .vsn-side-navigation__user-email {
-      font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-      line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-      font-weight: 400;
-    }
-
-    .vsn-side-navigation__user-avatar--icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-`, dt = "initials";
-function ft(e, t, n, r) {
+}, ft = "initials";
+function pt(e, t, n, r) {
 	if (!t) return;
 	let i = new URLSearchParams({
-		type: dt,
+		type: ft,
 		size: r
 	});
 	return n && i.set("client_id", n), `${e}${t}?${i}`;
 }
 //#endregion
 //#region src/components/vsn-side-bar/vsn-footer/vsn-footer.ts
-var pt = {
-	profile: Qe,
-	logout: $e
-}, mt = () => ({
+var mt = {
+	profile: et,
+	logout: tt
+}, ht = () => ({
 	profile: x("My profile"),
 	logout: x("Log out")
-}), R = class extends e {
-	static {
-		this.styles = [h, ut];
-	}
+}), z = class extends e {
 	createRenderRoot() {
 		return this;
 	}
 	get _items() {
 		return [{
 			id: "profile",
-			label: mt().profile,
+			label: ht().profile,
 			url: this.myProfileUrl
 		}, {
 			id: "logout",
-			label: mt().logout,
+			label: ht().logout,
 			url: "/logout"
 		}];
 	}
 	constructor() {
-		super(), this.expanded = !1, this._avatarFailed = !1, this._keyboard = new ct(this), new lt(this, [".ga-side-navigation__footer-dropdown", ".ga-side-navigation__user"], () => {
+		super(), this.expanded = !1, this._avatarFailed = !1, this._keyboard = new ut(this), new dt(this, [".ga-side-navigation__footer-dropdown", ".ga-side-navigation__user"], () => {
 			this.expanded = !1;
 		});
 	}
@@ -826,62 +800,63 @@ var pt = {
 	}
 	render() {
 		return n`
-        <div class="ga-side-navigation__footer">
-          ${this.expanded ? this.renderDropdown() : r}
+      <div class="ga-side-navigation__footer">
+        ${this.expanded ? this.renderDropdown() : r}
 
-          <div
-            role="button"
-            tabindex="0"
-            aria-expanded="${this.expanded}"
-            aria-haspopup="menu"
-            class="ga-side-navigation__user
+        <div
+          role="button"
+          tabindex="0"
+          aria-expanded="${this.expanded}"
+          aria-haspopup="menu"
+          class="ga-side-navigation__user
                    ${this.expanded ? "ga-side-navigation__user--active" : ""}"
-            @click=${this._toggle}
-            @keydown=${this._keyboard.onUserKeydown}>
+          @click=${this._toggle}
+          @keydown=${this._keyboard.onUserKeydown}>
 
-            ${this.renderAvatar()}
+          ${this.renderAvatar()}
 
-            <div class="vsn-side-navigation__user-info">
+          <div class="vsn-side-navigation__user-info">
               <span class="ga-side-navigation__user-name">
                 ${this.user.userName}
               </span>
-              ${this.user.userEmail ? n`<span class="vsn-side-navigation__user-email">
+            ${this.user.userEmail ? n`<span class="vsn-side-navigation__user-email">
                     ${this.user.userEmail}
                   </span>` : r}
-            </div>
+          </div>
 
-            <span class="ga-side-navigation__user-action">
-              ${this.expanded ? j(nt, 16) : j(tt, 16)}
+          <span class="ga-side-navigation__user-action">
+              ${this.expanded ? M(it, 16) : M(rt, 16)}
             </span>
 
-          </div>
         </div>
+      </div>
     `;
 	}
 	renderDropdown() {
 		return n`
       <div class="ga-side-navigation__footer-dropdown" @keydown=${this._keyboard.onDropdownKeydown}>
 
-          ${this._items.map((e) => {
+        ${this._items.map((e) => {
 			let t = n`
-              <span class="ga-side-navigation__footer-dropdown-icon">
-                ${j(pt[e.id], 16)}
+            <span class="ga-side-navigation__footer-dropdown-icon">
+                ${M(mt[e.id], 16)}
               </span>
-              <span class="ga-side-navigation__footer-dropdown-title">
+            <span class="ga-side-navigation__footer-dropdown-title">
                 ${e.label}
               </span>
-              ${e.external ? n`
-                <span class="ga-side-navigation__footer-dropdown-trail">
-                  ${j(et, 16)}
+            ${e.external ? n`
+              <span class="ga-side-navigation__footer-dropdown-trail">
+                  ${M(nt, 16)}
                 </span>
-              ` : r}
-            `;
+            ` : r}
+          `;
 			return e.id === "profile" ? n`<a
-                class="ga-side-navigation__footer-dropdown-item"
-                href=${e.url ?? ""}
-                @click=${(t) => this._handleProfileClick(t, e)}>
-                ${t}
-              </a>` : n`<div
+              class="ga-side-navigation__footer-dropdown-item"
+              href=${e.url ?? ""}
+              @click=${(t) => this._handleProfileClick(t, e)}>
+              ${t}
+            </a>` : n`
+            <div
               role="button"
               tabindex="0"
               class="ga-side-navigation__footer-dropdown-item"
@@ -912,60 +887,63 @@ var pt = {
 		}));
 	}
 	renderAvatar() {
-		let e = ft(this.profilePictureBaseUrl, this.user.userId, this.user.clientId, "small");
+		let e = pt(this.profilePictureBaseUrl, this.user.userId, this.user.clientId, "small");
 		return e && !this._avatarFailed ? n`<img
         class="ga-side-navigation__user-avatar"
         src=${e}
         alt=""
         @error=${() => {
 			this._avatarFailed = !0;
-		}} />` : n`<span class="ga-side-navigation__user-avatar vsn-side-navigation__user-avatar--icon">
-      ${j(Qe, 24)}
+		}}/>` : n`<span class="ga-side-navigation__user-avatar vsn-side-navigation__user-avatar--icon">
+      ${M(et, 24)}
     </span>`;
 	}
 };
-N([s({ attribute: !1 })], R.prototype, "user", void 0), N([s()], R.prototype, "profilePictureBaseUrl", void 0), N([s()], R.prototype, "myProfileUrl", void 0), N([s({
+P([s({ attribute: !1 })], z.prototype, "user", void 0), P([s()], z.prototype, "profilePictureBaseUrl", void 0), P([s()], z.prototype, "myProfileUrl", void 0), P([s({
 	type: Boolean,
 	reflect: !0
-})], R.prototype, "expanded", void 0), N([l()], R.prototype, "_avatarFailed", void 0), R = N([S(), o("vsn-footer")], R);
+})], z.prototype, "expanded", void 0), P([l()], z.prototype, "_avatarFailed", void 0), z = P([S(), o("vsn-footer")], z);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-header/vsn-header.keyboard.ts
-var ht = class {
+var gt = class {
 	constructor(e) {
 		this.onSwitcherKeydown = (e) => {
-			if (e.key === "Enter" || e.key === " ") {
-				if (e.preventDefault(), this.host.expanded && !this.host.canClose) return;
-				(this.host.expanded || this.host.hasAvailableItems || this.host.modulesLoading) && (this.host.expanded = !this.host.expanded);
-				return;
-			}
-			if (e.key === "ArrowDown" && !this.host.expanded) {
-				if (!this.host.hasAvailableItems) return;
-				e.preventDefault(), this.host.expanded = !0;
-				return;
-			}
-			if (e.key === "Escape" && this.host.expanded) {
-				if (!this.host.canClose) return;
-				e.preventDefault(), this.host.expanded = !1;
+			if (!e.defaultPrevented) {
+				if (j(e) && (e.key === "Enter" || e.key === " ")) {
+					if (e.preventDefault(), this.host.expanded && !this.host.canClose) return;
+					(this.host.expanded || this.host.hasAvailableItems || this.host.modulesLoading) && (this.host.expanded = !this.host.expanded);
+					return;
+				}
+				if (j(e) && e.key === "ArrowDown" && !this.host.expanded) {
+					if (!this.host.hasAvailableItems) return;
+					e.preventDefault(), this.host.expanded = !0;
+					return;
+				}
+				if (j(e) && e.key === "Escape" && this.host.expanded) {
+					if (!this.host.canClose) return;
+					e.preventDefault(), this.host.expanded = !1;
+				}
 			}
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, gt = ".ga-side-navigation__switcher:focus{outline-offset:2px;outline:2px solid #3b82f6}", z = class extends e {
+}, B = class extends e {
 	constructor(...e) {
-		super(...e), this.items = [], this.loading = !1, this._handleKeydown = (e) => {
-			if (e.key === "Escape") {
+		super(...e), this.items = [], this.loading = !1, this.maxHeight = 0, this._handleKeydown = (e) => {
+			if (e.defaultPrevented) return;
+			if (j(e) && e.key === "Escape") {
 				e.preventDefault(), this.dispatchEvent(new CustomEvent("close-request", {
 					bubbles: !0,
 					composed: !0
 				}));
 				return;
 			}
-			if (e.key === "Enter" || e.key === " ") {
+			if (j(e) && (e.key === "Enter" || e.key === " ")) {
 				let t = e.target;
 				t instanceof HTMLElement && t.classList.contains("ga-side-navigation__switcher-dropdown-item") && (e.preventDefault(), t.click());
 				return;
 			}
-			if (e.key === "Tab" && !e.shiftKey) {
+			if (j(e) && e.key === "Tab") {
 				let t = Array.from(this.querySelectorAll(".ga-side-navigation__switcher-dropdown-item")), n = t[t.length - 1];
 				n && e.target === n && this.dispatchEvent(new CustomEvent("tab-exit", {
 					bubbles: !0,
@@ -973,7 +951,7 @@ var ht = class {
 				}));
 				return;
 			}
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			if (A(e) || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			e.preventDefault();
 			let t = Array.from(this.querySelectorAll(".ga-side-navigation__switcher-dropdown-item"));
 			if (t.length === 0) return;
@@ -999,11 +977,11 @@ var ht = class {
 		this.loading || this.querySelector(".ga-side-navigation__switcher-dropdown-item")?.focus();
 	}
 	_handleItemClick(e, t) {
-		e.preventDefault(), this.dispatchEvent(new CustomEvent("item-select", {
+		A(e) || (e.preventDefault(), this.dispatchEvent(new CustomEvent("item-select", {
 			detail: { id: t },
 			bubbles: !0,
 			composed: !0
-		}));
+		})));
 	}
 	render() {
 		return this.loading ? n`
@@ -1014,11 +992,12 @@ var ht = class {
           <span class="vsn-spinner"></span>
         </div>
       ` : n`
-      <div class="ga-side-navigation__switcher-dropdown"
+      <div class="ga-side-navigation__switcher-dropdown ga-scroll"
            role="menu"
-           aria-label=${Fe()}
+           style=${`max-height: ${Math.max(0, this.maxHeight)}px`}
+           aria-label=${Ie()}
            @keydown=${this._handleKeydown}>
-        <span class="ga-side-navigation__switcher-dropdown-header">${Fe()}</span>
+        <span class="ga-side-navigation__switcher-dropdown-header">${Ie()}</span>
         ${this.items.map((e) => n`
           <a class="ga-side-navigation__switcher-dropdown-item"
              href=${e.url ?? ""}
@@ -1031,59 +1010,10 @@ var ht = class {
     `;
 	}
 };
-N([s({ attribute: !1 })], z.prototype, "items", void 0), N([s({ type: Boolean })], z.prototype, "loading", void 0), z = N([S(), o("vsn-switcher-menu")], z);
+P([s({ attribute: !1 })], B.prototype, "items", void 0), P([s({ type: Boolean })], B.prototype, "loading", void 0), P([s({ attribute: !1 })], B.prototype, "maxHeight", void 0), B = P([S(), o("vsn-switcher-menu")], B);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-search/vsn-search.css.ts
-var _t = t`
-  .vsn-search__trigger,
-  .vsn-search__clear {
-    display: inline-flex;
-    align-items: center;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  .vsn-search__trigger {
-    color: var(--ga-color-icon-primary);
-  }
-
-  .vsn-search__clear {
-    color: var(--ga-color-icon-action);
-  }
-
-  .vsn-search__trigger:disabled {
-    cursor: default;
-    opacity: 0.5;
-  }
-
-  .vsn-search__helper {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    flex: 1 0 0;
-    max-width: 550px;
-    margin-inline: calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1));
-    padding: 0 calc(0.25rem * 2 * var(--ga-base-scaling-factor, 1));
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 400;
-    color: var(--ga-color-text-body);
-  }
-
-  .ga-side-navigation__search input {
-    color: var(--ga-color-text-body);
-  }
-
-  .ga-side-navigation__search input::placeholder {
-    color: var(--ga-color-text-disable-selected);
-  }
-`, B = class extends e {
+//#region src/components/vsn-side-bar/vsn-search/vsn-search.ts
+var V = class extends e {
 	constructor(...e) {
 		super(...e), this.shortcut = "", this.value = "", this.loading = !1, this._emitSearch = () => {
 			this._canSearch && this.dispatchEvent(new CustomEvent("vsn-search-submit", {
@@ -1091,22 +1021,18 @@ var _t = t`
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this._emitEscape = () => {
-			this.dispatchEvent(new CustomEvent("vsn-search-escape", {
-				detail: { value: this.value },
+		}, this._emitSearchCleared = () => {
+			this.dispatchEvent(new CustomEvent("vsn-search-cleared", {
 				bubbles: !0,
 				composed: !0
 			}));
 		}, this._handleEscape = (e) => {
-			e.key === "Escape" && this._emitEscape();
+			e.defaultPrevented || j(e) && e.key === "Escape" && this.value.length > 0 && (e.preventDefault(), this._emitSearchCleared());
 		};
 	}
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, _t];
-	}
 	focus() {
 		let e = this.querySelector("input");
 		e?.focus(), e?.select();
@@ -1123,7 +1049,7 @@ var _t = t`
 		}));
 	}
 	_handleEnter(e) {
-		e.key === "Enter" && this._emitSearch();
+		e.defaultPrevented || j(e) && e.key === "Enter" && this._emitSearch();
 	}
 	render() {
 		let e = this.value.length > 0 && this.value.length < 3;
@@ -1135,16 +1061,17 @@ var _t = t`
           aria-label=${x("Search")}
           ?disabled=${!this._canSearch}
           @click=${this._emitSearch}>
-          ${j(rt, 24)}
+          ${M(at, 24)}
         </button>
         <input type="search"
-          .placeholder=${Ie()}
-          .value=${this.value}
-          @input=${this._handleInput}
-          @keydown=${this._handleEnter} />
+               .placeholder=${Le()}
+               .value=${this.value}
+               @input=${this._handleInput}
+               @keydown=${this._handleEnter}/>
         ${this._trailingSlot()}
       </div>
-      ${u(e, () => n`<div class="vsn-search__helper">${Re(3)}</div>`)}
+      ${u(e, () => n`
+        <div class="vsn-search__helper">${ze(3)}</div>`)}
     `;
 	}
 	_trailingSlot() {
@@ -1161,8 +1088,8 @@ var _t = t`
 	_clearButton() {
 		return n`
       <button class="vsn-search__clear" aria-label=${x("Clear search")}
-        @click=${this._emitEscape}>
-        ${j(it, 16)}
+              @click=${this._emitSearchCleared}>
+        ${M(ot, 16)}
       </button>
     `;
 	}
@@ -1170,18 +1097,15 @@ var _t = t`
 		return n`<kbd class="ga-side-navigation__search-shortcut">${this.shortcut}</kbd>`;
 	}
 };
-N([s()], B.prototype, "shortcut", void 0), N([s()], B.prototype, "value", void 0), N([s({ type: Boolean })], B.prototype, "loading", void 0), B = N([S(), o("vsn-search")], B);
+P([s()], V.prototype, "shortcut", void 0), P([s()], V.prototype, "value", void 0), P([s({ type: Boolean })], V.prototype, "loading", void 0), V = P([S(), o("vsn-search")], V);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-header/vsn-header.ts
-var V = class extends e {
+var H = class extends e {
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, a(gt)];
-	}
 	constructor() {
-		super(), this.modules = [], this.modulesLoading = !1, this.hasMenu = !1, this.searchValue = "", this.searchLoading = !1, this.expanded = !1, this._keyboard = new ht(this), new lt(this, [".ga-side-navigation__switcher-dropdown", ".ga-side-navigation__switcher"], () => {
+		super(), this.modules = [], this.modulesLoading = !1, this.hasMenu = !1, this.moduleSwitcherMaxHeight = 0, this.searchValue = "", this.searchLoading = !1, this.expanded = !1, this._keyboard = new gt(this), new dt(this, [".ga-side-navigation__switcher-dropdown", ".ga-side-navigation__switcher"], () => {
 			this.canClose && (this.expanded = !1);
 		});
 	}
@@ -1199,29 +1123,28 @@ var V = class extends e {
                @keydown=${this._keyboard.onSwitcherKeydown}
                title="">
             <span class="ga-side-navigation__switcher-title">${e.title}</span>
-            ${u(this.canClose, () => n`
-              <span class="ga-side-navigation__switcher-action">
-                ${this.expanded ? j(M, 16) : j(tt, 16)}
-              </span>
-            `)}
+            <span class="ga-side-navigation__switcher-action">
+                ${this.canClose ? this.expanded ? M(N, 16) : M(rt, 16) : M(Ke, 16)}
+            </span>
           </div>
 
           ${u(this.expanded, () => n`
             <vsn-switcher-menu
-                .items=${e.kind === "loading" ? [] : e.available}
-                .loading=${e.kind === "loading"}
-                @item-select=${this._onItemSelect}
-                @close-request=${this._onCloseRequest}
-                @focus-switcher=${this._onFocusSwitcher}
-                @tab-exit=${this._onTabExit}>
+              .items=${e.kind === "loading" ? [] : e.available}
+              .loading=${e.kind === "loading"}
+              .maxHeight=${this.moduleSwitcherMaxHeight}
+              @item-select=${this._onItemSelect}
+              @close-request=${this._onCloseRequest}
+              @focus-switcher=${this._onFocusSwitcher}
+              @tab-exit=${this._onTabExit}>
             </vsn-switcher-menu>`)}
         </div>
 
         ${u(this.search?.enabled, () => n`
           <vsn-search
-              .shortcut=${this.search?.shortcut ?? Le()}
-              .value=${this.searchValue}
-              .loading=${this.searchLoading}>
+            .shortcut=${Re()}
+            .value=${this.searchValue}
+            .loading=${this.searchLoading}>
           </vsn-search>`)}
       </div>
     `;
@@ -1229,7 +1152,7 @@ var V = class extends e {
 	get _state() {
 		if (this.modulesLoading) return {
 			kind: "loading",
-			title: this.activeModuleLabel || Ve()
+			title: this.activeModuleLabel || He()
 		};
 		let e = this.modules.find((e) => e.id === this.activeModuleId);
 		return e ? {
@@ -1238,7 +1161,7 @@ var V = class extends e {
 			available: this.modules.filter((t) => t.id !== e.id)
 		} : {
 			kind: "no-active",
-			title: Ve(),
+			title: He(),
 			available: this.modules
 		};
 	}
@@ -1282,85 +1205,16 @@ var V = class extends e {
 		this.canClose && (this.expanded = !1);
 	}
 };
-N([s({ attribute: !1 })], V.prototype, "modules", void 0), N([s()], V.prototype, "activeModuleId", void 0), N([s()], V.prototype, "activeModuleLabel", void 0), N([s({ type: Boolean })], V.prototype, "modulesLoading", void 0), N([s({ type: Boolean })], V.prototype, "hasMenu", void 0), N([s({ attribute: !1 })], V.prototype, "search", void 0), N([s()], V.prototype, "searchValue", void 0), N([s({ type: Boolean })], V.prototype, "searchLoading", void 0), N([s({
+P([s({ attribute: !1 })], H.prototype, "modules", void 0), P([s()], H.prototype, "activeModuleId", void 0), P([s()], H.prototype, "activeModuleLabel", void 0), P([s({ type: Boolean })], H.prototype, "modulesLoading", void 0), P([s({ type: Boolean })], H.prototype, "hasMenu", void 0), P([s({ attribute: !1 })], H.prototype, "moduleSwitcherMaxHeight", void 0), P([s({ attribute: !1 })], H.prototype, "search", void 0), P([s()], H.prototype, "searchValue", void 0), P([s({ type: Boolean })], H.prototype, "searchLoading", void 0), P([s({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "expanded", void 0), V = N([S(), o("vsn-header")], V);
+})], H.prototype, "expanded", void 0), H = P([S(), o("vsn-header")], H);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-search-results/vsn-search-results.css.ts
-var vt = t`
-  .vsn-search-results__empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: calc(2rem * var(--ga-base-scaling-factor, 1)) calc(1.5rem * var(--ga-base-scaling-factor, 1));
-    text-align: center;
-    gap: calc(0.25rem * var(--ga-base-scaling-factor, 1));
-  }
-
-  .vsn-search-results__empty-title {
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 600;
-    margin-bottom: calc(0.25rem * var(--ga-base-scaling-factor, 1));
-  }
-
-  .vsn-search-results__empty-message,
-  .vsn-search-results__empty-hint {
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 400;
-    color: var(--ga-color-text-disable-selected);
-  }
-
-  .vsn-search-results__empty-support {
-    margin-top: calc(1.5rem * var(--ga-base-scaling-factor, 1));
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 400;
-    color: var(--ga-color-text-on-disabled);
-  }
-
-  .vsn-search-results__error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: calc(2rem * var(--ga-base-scaling-factor, 1)) calc(1.5rem * var(--ga-base-scaling-factor, 1));
-    text-align: center;
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 400;
-    color: var(--ga-color-text-body);
-  }
-
-  .vsn-search-results__load-more {
-    width: 100%;
-    padding: calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1)) calc(0.25rem * 4 * var(--ga-base-scaling-factor, 1));
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--ga-color-text-action);
-    text-align: center;
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
-    font-style: normal;
-    font-weight: 500;
-    line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
-    letter-spacing: var(--ga-text-md-letter-spacing);
-  }
-
-  .vsn-search-results__load-more:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`, yt = class {
+//#region src/components/vsn-side-bar/vsn-search-results/vsn-search-results.keyboard.ts
+var _t = class {
 	constructor(e) {
 		this.onResultsKeydown = (e) => {
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			if (e.defaultPrevented || A(e) || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			e.preventDefault();
 			let t = Array.from(this.host.querySelectorAll(".ga-side-navigation__search-results-item"));
 			if (t.length === 0) return;
@@ -1371,16 +1225,13 @@ var vt = t`
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, H = class extends e {
+}, U = class extends e {
 	constructor(...e) {
-		super(...e), this.loadingMore = !1, this._keyboard = new yt(this);
+		super(...e), this.loadingMore = !1, this._keyboard = new _t(this);
 	}
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, vt];
-	}
 	render() {
 		return this.errorMessage ? this._errorState(this.errorMessage) : this.results === void 0 ? n`${r}` : this.results.length === 0 ? this._emptyState() : this._resultsList(this.results);
 	}
@@ -1404,7 +1255,8 @@ var vt = t`
 	_resultsList(e) {
 		let t = e.length;
 		return n`
-      <div class="ga-side-navigation__body h-full" @keydown=${this._keyboard.onResultsKeydown}>
+      <div class="ga-side-navigation__body h-full ga-scroll"
+           @keydown=${this._keyboard.onResultsKeydown}>
         <div class="ga-side-navigation__search-results-title">
           ${x(t === 1 ? b`${t} result` : b`${t} results`)}
         </div>
@@ -1415,7 +1267,7 @@ var vt = t`
             class="vsn-search-results__load-more"
             ?disabled=${this.loadingMore}
             @click=${this._onLoadMore}>
-            ${Be(30)}
+            ${Ve(30)}
           </button>
         `)}
       </div>
@@ -1450,44 +1302,26 @@ var vt = t`
 		}));
 	}
 };
-N([s({ attribute: !1 })], H.prototype, "results", void 0), N([s()], H.prototype, "errorMessage", void 0), N([s()], H.prototype, "nextCursor", void 0), N([s({ type: Boolean })], H.prototype, "loadingMore", void 0), H = N([S(), o("vsn-search-results")], H);
+P([s({ attribute: !1 })], U.prototype, "results", void 0), P([s()], U.prototype, "errorMessage", void 0), P([s()], U.prototype, "nextCursor", void 0), P([s({ type: Boolean })], U.prototype, "loadingMore", void 0), U = P([S(), o("vsn-search-results")], U);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-template/vsn-template.css.ts
-var bt = t`
-  .vsn-template__row {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    align-self: stretch;
-    padding: calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1)) 0;
-  }
-
-  .vsn-template__bar {
-    height: calc(1rem * var(--ga-base-scaling-factor, 1));
-    border-radius: var(--ga-radius);
-    background: var(--ga-color-miscellaneous-skeleton-element, #F2F3F5);
-    flex-shrink: 0;
-  }
-`, xt = [
+//#region src/components/vsn-side-bar/vsn-template/vsn-template.ts
+var vt = [
 	160,
 	96,
 	144,
 	192,
 	160
-], St = class extends e {
+], yt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, bt];
-	}
 	render() {
 		return n`
       <div class="ga-side-navigation__body h-full"
-        role="status"
-        aria-busy="true"
-        aria-label=${x("Loading results")}>
-        ${xt.map((e) => n`
+           role="status"
+           aria-busy="true"
+           aria-label=${x("Loading results")}>
+        ${vt.map((e) => n`
           <div class="vsn-template__row">
             <div class="vsn-template__bar" style="width: ${e}px"></div>
           </div>
@@ -1496,59 +1330,17 @@ var bt = t`
     `;
 	}
 };
-St = N([S(), o("vsn-template")], St);
+yt = P([S(), o("vsn-template")], yt);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-error-state/vsn-error-state.css.ts
-var Ct = t`
-  .vsn-error-state {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: calc(1.5rem * var(--ga-base-scaling-factor, 1)) calc(1rem * var(--ga-base-scaling-factor, 1));
-    gap: calc(0.25rem * var(--ga-base-scaling-factor, 1));
-  }
-
-  .vsn-error-state__icon {
-    display: inline-flex;
-    color: var(--ga-color-icon-error);
-    margin-bottom: calc(0.5rem * var(--ga-base-scaling-factor, 1));
-  }
-
-  .vsn-error-state__title {
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 600;
-    margin-bottom: calc(0.25rem * var(--ga-base-scaling-factor, 1));
-  }
-
-  .vsn-error-state__message,
-  .vsn-error-state__hint {
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 400;
-  }
-
-  .vsn-error-state__support {
-    margin-top: calc(1.5rem * var(--ga-base-scaling-factor, 1));
-    font-family: var(--ga-font-family-primary);
-    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
-    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
-    font-weight: 400;
-    color: var(--ga-color-text-on-disabled);
-  }
-`, wt = class extends e {
+//#region src/components/vsn-side-bar/vsn-error-state/vsn-error-state.ts
+var bt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, Ct];
-	}
 	render() {
 		return n`
       <div class="vsn-error-state" role="alert" aria-live="assertive">
-        <div class="vsn-error-state__icon">${j(at, 24)}</div>
+        <div class="vsn-error-state__icon">${M(st, 24)}</div>
         <div class="vsn-error-state__title">${x("Loading error")}</div>
         <div class="vsn-error-state__message">${x("We're unable to load the menu.")}</div>
         <div class="vsn-error-state__hint">${x("Please check your internet connection and try again.")}</div>
@@ -1557,43 +1349,19 @@ var Ct = t`
     `;
 	}
 };
-wt = N([S(), o("vsn-error-state")], wt);
+bt = P([S(), o("vsn-error-state")], bt);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-search-scopes/vsn-search-scopes.css.ts
-var Tt = t`
-  @layer components {
-    vsn-search-scopes {
-      display: block;
-      flex-shrink: 0;
-      padding: calc(0.25rem * 2 * var(--ga-base-scaling-factor, 1)) calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1));
-    }
-
-    vsn-search-scopes .ga-radio-group {
-      gap: calc(0.25rem * 2 * var(--ga-base-scaling-factor, 1));
-    }
-
-    vsn-search-scopes .ga-radio-button__label {
-      line-height: calc(0.25rem * 6 * var(--ga-base-scaling-factor, 1));
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-`, U, W = class extends e {
+//#region src/components/vsn-side-bar/vsn-search-scopes/vsn-search-scopes.ts
+var W, G = class extends e {
 	static {
-		U = this;
+		W = this;
 	}
 	constructor(...e) {
-		super(...e), this.scopes = [], this.selectedScopeId = "", this._name = `vsn-search-scope-${++U._counter}`;
+		super(...e), this.scopes = [], this.selectedScopeId = "", this._name = `vsn-search-scope-${++W._counter}`;
 	}
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, Tt];
-	}
 	static {
 		this._counter = 0;
 	}
@@ -1628,16 +1396,16 @@ var Tt = t`
 		}));
 	}
 };
-N([s({ attribute: !1 })], W.prototype, "scopes", void 0), N([s()], W.prototype, "selectedScopeId", void 0), W = U = N([S(), o("vsn-search-scopes")], W);
+P([s({ attribute: !1 })], G.prototype, "scopes", void 0), P([s()], G.prototype, "selectedScopeId", void 0), G = W = P([S(), o("vsn-search-scopes")], G);
 //#endregion
 //#region src/shared/lang/locale-codes.ts
-var Et = "en", Dt = [
+var xt = "en", St = [
 	"da",
 	"fi",
 	"nl",
 	"no",
 	"sv"
-], Ot = /* @__PURE__ */ p({ templates: () => kt }), kt = {
+], Ct = /* @__PURE__ */ p({ templates: () => wt }), wt = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Har du brug for hjælp? Kontakt support.",
 	s1228605ee65ddefa: b`${0} resultat`,
@@ -1667,7 +1435,7 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Prøv andre søgeord eller tjek stavningen.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, At = /* @__PURE__ */ p({ templates: () => jt }), jt = {
+}, Tt = /* @__PURE__ */ p({ templates: () => Et }), Et = {
 	s09a45db408570a7a: "Oma profiili",
 	s119f9875b7d4cdfc: "Tarvitsetko apua? Ota yhteyttä tukeen.",
 	s1228605ee65ddefa: b`${0} tulos`,
@@ -1697,7 +1465,7 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Kokeile eri hakusanoja tai tarkista kirjoitusasu.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Mt = /* @__PURE__ */ p({ templates: () => Nt }), Nt = {
+}, Dt = /* @__PURE__ */ p({ templates: () => Ot }), Ot = {
 	s09a45db408570a7a: "Mijn profiel",
 	s119f9875b7d4cdfc: "Hulp nodig? Neem contact op met ondersteuning.",
 	s1228605ee65ddefa: b`${0} resultaat`,
@@ -1727,7 +1495,7 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Probeer andere zoekwoorden of controleer de spelling.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Pt = /* @__PURE__ */ p({ templates: () => Ft }), Ft = {
+}, kt = /* @__PURE__ */ p({ templates: () => At }), At = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Trenger du hjelp? Kontakt støtte.",
 	s1228605ee65ddefa: b`${0} resultat`,
@@ -1757,7 +1525,7 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Prøv andre søkeord eller sjekk stavemåten.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, It = /* @__PURE__ */ p({ templates: () => Lt }), Lt = {
+}, jt = /* @__PURE__ */ p({ templates: () => Mt }), Mt = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Behöver du hjälp? Kontakta support.",
 	s1228605ee65ddefa: b`${0} resultat`,
@@ -1787,31 +1555,260 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Prova andra sökord eller kontrollera stavningen.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Rt = {
-	da: Ot,
-	fi: At,
-	nl: Mt,
-	no: Pt,
-	sv: It
-}, { getLocale: zt, setLocale: Bt } = Ae({
-	sourceLocale: Et,
-	targetLocales: Dt,
-	loadLocale: (e) => Rt[e] ? Promise.resolve(Rt[e]) : Promise.reject(/* @__PURE__ */ Error(`Unknown locale: ${e}`))
-}), Vt = t`
+}, Nt = {
+	da: Ct,
+	fi: Tt,
+	nl: Dt,
+	no: kt,
+	sv: jt
+}, { getLocale: Pt, setLocale: Ft } = je({
+	sourceLocale: xt,
+	targetLocales: St,
+	loadLocale: (e) => Nt[e] ? Promise.resolve(Nt[e]) : Promise.reject(/* @__PURE__ */ Error(`Unknown locale: ${e}`))
+}), It = t`
+  @layer components {
+    :where(.ga-side-navigation__user),
+    :where(.ga-side-navigation__footer-dropdown-item) {
+      width: 100%;
+      cursor: pointer;
+    }
+
+    .ga-side-navigation__footer-dropdown-item:focus-visible {
+      outline: 2px solid var(--ga-color-border-focus);
+      outline-offset: 4px;
+    }
+
+    .vsn-side-navigation__user-info {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .vsn-side-navigation__user-info > .ga-side-navigation__user-name {
+      flex: initial;
+    }
+
+    .vsn-side-navigation__user-email {
+      font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+      line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+      font-weight: 400;
+    }
+
+    .vsn-side-navigation__user-avatar--icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+`, Lt = t`
+  @layer components {
+    .vsn-switcher-anchor {
+      position: relative;
+    }
+
+    .ga-side-navigation__switcher-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      z-index: 10;
+    }
+  }
+`, Rt = t`
+  .vsn-search__trigger,
+  .vsn-search__clear {
+    display: inline-flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .vsn-search__trigger {
+    color: var(--ga-color-icon-primary);
+  }
+
+  .vsn-search__clear {
+    color: var(--ga-color-icon-action);
+  }
+
+  .vsn-search__trigger:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .vsn-search__helper {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    flex: 1 0 0;
+    max-width: 550px;
+    margin-inline: calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1));
+    padding: 0 calc(0.25rem * 2 * var(--ga-base-scaling-factor, 1));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 400;
+    color: var(--ga-color-text-body);
+  }
+
+  .ga-side-navigation__search input {
+    color: var(--ga-color-text-body);
+  }
+
+  .ga-side-navigation__search input::placeholder {
+    color: var(--ga-color-text-disable-selected);
+  }
+`, zt = t`
+  .vsn-search-results__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: calc(2rem * var(--ga-base-scaling-factor, 1)) calc(1.5rem * var(--ga-base-scaling-factor, 1));
+    text-align: center;
+    gap: calc(0.25rem * var(--ga-base-scaling-factor, 1));
+  }
+
+  .vsn-search-results__empty-title {
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 600;
+    margin-bottom: calc(0.25rem * var(--ga-base-scaling-factor, 1));
+  }
+
+  .vsn-search-results__empty-message,
+  .vsn-search-results__empty-hint {
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 400;
+    color: var(--ga-color-text-disable-selected);
+  }
+
+  .vsn-search-results__empty-support {
+    margin-top: calc(1.5rem * var(--ga-base-scaling-factor, 1));
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 400;
+    color: var(--ga-color-text-on-disabled);
+  }
+
+  .vsn-search-results__error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: calc(2rem * var(--ga-base-scaling-factor, 1)) calc(1.5rem * var(--ga-base-scaling-factor, 1));
+    text-align: center;
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 400;
+    color: var(--ga-color-text-body);
+  }
+
+  .vsn-search-results__load-more {
+    width: 100%;
+    padding: calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1)) calc(0.25rem * 4 * var(--ga-base-scaling-factor, 1));
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--ga-color-text-action);
+    text-align: center;
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
+    font-style: normal;
+    font-weight: 500;
+    line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
+    letter-spacing: var(--ga-text-md-letter-spacing);
+  }
+
+  .vsn-search-results__load-more:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`, Bt = t`
   @layer components {
-    .vsn-switcher-anchor {
-      position: relative;
+    vsn-search-scopes {
+      display: block;
+      flex-shrink: 0;
+      padding: calc(0.25rem * 2 * var(--ga-base-scaling-factor, 1)) calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1));
     }
 
-    .ga-side-navigation__switcher-dropdown {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      z-index: 10;
+    vsn-search-scopes .ga-radio-group {
+      gap: calc(0.25rem * 2 * var(--ga-base-scaling-factor, 1));
+    }
+
+    vsn-search-scopes .ga-radio-button__label {
+      line-height: calc(0.25rem * 6 * var(--ga-base-scaling-factor, 1));
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
+`, Vt = t`
+  .vsn-template__row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    padding: calc(0.25rem * 3 * var(--ga-base-scaling-factor, 1)) 0;
+  }
+
+  .vsn-template__bar {
+    height: calc(1rem * var(--ga-base-scaling-factor, 1));
+    border-radius: var(--ga-radius);
+    background: var(--ga-color-miscellaneous-skeleton-element, #F2F3F5);
+    flex-shrink: 0;
+  }
 `, Ht = t`
+  .vsn-error-state {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: calc(1.5rem * var(--ga-base-scaling-factor, 1)) calc(1rem * var(--ga-base-scaling-factor, 1));
+    gap: calc(0.25rem * var(--ga-base-scaling-factor, 1));
+  }
+
+  .vsn-error-state__icon {
+    display: inline-flex;
+    color: var(--ga-color-icon-error);
+    margin-bottom: calc(0.5rem * var(--ga-base-scaling-factor, 1));
+  }
+
+  .vsn-error-state__title {
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 600;
+    margin-bottom: calc(0.25rem * var(--ga-base-scaling-factor, 1));
+  }
+
+  .vsn-error-state__message,
+  .vsn-error-state__hint {
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 400;
+  }
+
+  .vsn-error-state__support {
+    margin-top: calc(1.5rem * var(--ga-base-scaling-factor, 1));
+    font-family: var(--ga-font-family-primary);
+    font-size: calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));
+    line-height: calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));
+    font-weight: 400;
+    color: var(--ga-color-text-on-disabled);
+  }
+`, Ut = t`
   .vsn-spinner {
     display: inline-block;
     flex-shrink: 0;
@@ -1831,7 +1828,7 @@ var Et = "en", Dt = [
   @keyframes vsn-spin {
     to { transform: rotate(360deg); }
   }
-`, Ut = class {
+`, Wt = class {
 	constructor(e, t, n) {
 		this._onHostClick = (e) => {
 			let t = this._host.renderRoot.querySelector(this._clickedSelector);
@@ -1844,14 +1841,14 @@ var Et = "en", Dt = [
 	hostDisconnected() {
 		this._host.removeEventListener("click", this._onHostClick);
 	}
-}, Wt = "button:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])", Gt = class {
+}, Gt = "button:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])", Kt = class {
 	constructor(e) {
 		this.onKeydown = (e) => {
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			if (e.defaultPrevented || A(e) || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			let t = this.host.renderRoot.querySelector("slot[name=\"nav-footer\"]");
 			if (!t) return;
 			let n = [];
-			for (let e of t.assignedElements({ flatten: !0 })) e.matches(Wt) && n.push(e), n.push(...Array.from(e.querySelectorAll(Wt)));
+			for (let e of t.assignedElements({ flatten: !0 })) e.matches(Gt) && n.push(e), n.push(...Array.from(e.querySelectorAll(Gt)));
 			if (n.length === 0) return;
 			let r = e.composedPath()[0];
 			if (!(r instanceof HTMLElement)) return;
@@ -1863,18 +1860,24 @@ var Et = "en", Dt = [
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, G = class extends e {
+}, K = t`
+  .ga-scroll {
+    scrollbar-color: var(--ga-color-text-disabled) var(--ga-color-surface-page);
+    scrollbar-width: thin;
+  }
+`, q = class extends e {
 	static {
 		this.styles = [
 			h,
+			K,
+			Lt,
+			It,
+			Rt,
+			zt,
+			Bt,
 			Vt,
-			ut,
-			_t,
-			vt,
-			Tt,
-			bt,
-			Ct,
 			Ht,
+			Ut,
 			t`
       :host {
         position: absolute;
@@ -1889,7 +1892,7 @@ var Et = "en", Dt = [
 		];
 	}
 	constructor() {
-		super(), this.modules = [], this.modulesLoading = !1, this.lang = "en", this.error = !1, this.open = !1, this._searchQuery = "", this._searchLoading = !1, this._activeScopeId = "menu", this._searchLoadingMore = !1, this._navFooterKeyboard = new Gt(this), this._onNavigate = (e) => {
+		super(), this.modules = [], this.modulesLoading = !1, this.lang = "en", this.error = !1, this.open = !1, this._searchQuery = "", this._searchLoading = !1, this._activeScopeId = "menu", this._searchLoadingMore = !1, this._moduleSwitcherMaxHeight = 0, this._navFooterKeyboard = new Kt(this), this._onNavigate = (e) => {
 			this._searchQuery = "", this._searchResults = void 0, this.dispatchEvent(new CustomEvent("vsn-side-bar-close", {
 				bubbles: !0,
 				composed: !0
@@ -1906,13 +1909,18 @@ var Et = "en", Dt = [
 			}));
 		}, this._onScopeChanged = (e) => {
 			this._activeScopeId = e.detail.scopeId, this._runSearch(this._searchQuery, this._activeScopeId);
-		}, new Ut(this, ".ga-side-navigation", () => this.dispatchEvent(new CustomEvent("vsn-side-bar-close", {
+		}, new Wt(this, ".ga-side-navigation", () => this.dispatchEvent(new CustomEvent("vsn-side-bar-close", {
 			bubbles: !0,
 			composed: !0
-		})));
+		}))), this._resizeObserver = new ResizeObserver((e) => {
+			this._observeMenuSize(e);
+		}), this._resizeObserver.observe(this);
+	}
+	_observeMenuSize(e) {
+		this._moduleSwitcherMaxHeight = Math.max(0, e[0].contentRect.height - 134);
 	}
 	willUpdate(e) {
-		e.has("lang") && Bt(this.lang).catch(console.error), e.has("open") && e.get("open") && !this.open && (this._searchQuery = "", this._activeScopeId = "menu", this._clearSearchState(), this.renderRoot.querySelector("vsn-header")?.reset(), this.renderRoot.querySelector("vsn-footer")?.reset());
+		e.has("lang") && Ft(this.lang).catch(console.error), e.has("open") && e.get("open") && !this.open && (this._searchQuery = "", this._activeScopeId = "menu", this._clearSearchState(), this.renderRoot.querySelector("vsn-header")?.reset(), this.renderRoot.querySelector("vsn-footer")?.reset());
 	}
 	async focusSearch() {
 		await this.updateComplete, this.menu?.search?.enabled && this.renderRoot.querySelector("vsn-search")?.focus();
@@ -1923,11 +1931,8 @@ var Et = "en", Dt = [
 	_onSearchSubmit(e) {
 		this._runSearch(e.detail.query, this._activeScopeId);
 	}
-	_onSearchEscape(e) {
-		e.detail.value.length > 0 ? (this._searchQuery = "", this._clearSearchState(), this.focusSearch()) : this.dispatchEvent(new CustomEvent("vsn-side-bar-close", {
-			bubbles: !0,
-			composed: !0
-		}));
+	_onSearchCleared() {
+		this._searchQuery = "", this._clearSearchState(), this.focusSearch();
 	}
 	_clearSearchState() {
 		this._searchAbort?.abort(), this._searchAbort = void 0, this._searchResults = void 0, this._searchLoading = !1, this._searchLoadingMore = !1, this._searchError = void 0, this._searchNextCursor = void 0;
@@ -2013,43 +2018,48 @@ var Et = "en", Dt = [
         ${this.header()}
         ${this.scopesGroup()}
         ${e === "error" ? this.errorState() : e === "loading" ? this.loadingState() : e === "results" ? this.searchResults() : this.renderMenu(this.menu)}
-        ${e === "menu" ? n`<slot name="nav-footer"></slot>` : n``}
+        ${e === "menu" ? n`
+          <slot name="nav-footer"></slot>` : n``}
         ${this.auth ? this.footer(this.auth) : ""}
       </div>
     `;
 	}
 	searchResults() {
-		return n`<vsn-search-results
-      class="flex-1 min-h-0"
-      .results=${this._searchResults}
-      .errorMessage=${this._searchError}
-      .nextCursor=${this._searchNextCursor}
-      .loadingMore=${this._searchLoadingMore}>
-    </vsn-search-results>`;
+		return n`
+      <vsn-search-results
+        class="flex-1 min-h-0"
+        .results=${this._searchResults}
+        .errorMessage=${this._searchError}
+        .nextCursor=${this._searchNextCursor}
+        .loadingMore=${this._searchLoadingMore}>
+      </vsn-search-results>`;
 	}
 	loadingState() {
-		return n`<vsn-template class="flex-1 min-h-0"></vsn-template>`;
+		return n`
+      <vsn-template class="flex-1 min-h-0"></vsn-template>`;
 	}
 	errorState() {
-		return n`<vsn-error-state class="flex-1 min-h-0"></vsn-error-state>`;
+		return n`
+      <vsn-error-state class="flex-1 min-h-0"></vsn-error-state>`;
 	}
 	header() {
 		let e = this.menu?.items.length ? this.menu.search : void 0;
 		return n`
-        <vsn-header
-          .modules=${this.modules}
-          .activeModuleId=${this.activeModuleId}
-          .activeModuleLabel=${this.activeModuleLabel}
-          .modulesLoading=${this.modulesLoading}
-          .hasMenu=${(this.menu?.items.length ?? 0) > 0}
-          .search=${e}
-          .searchValue=${this._searchQuery}
-          .searchLoading=${this._searchLoading}
-          @vsn-search-input=${this._onSearchInput}
-          @vsn-search-submit=${this._onSearchSubmit}
-          @vsn-search-escape=${this._onSearchEscape}
-          >
-        </vsn-header>`;
+      <vsn-header
+        .modules=${this.modules}
+        .activeModuleId=${this.activeModuleId}
+        .activeModuleLabel=${this.activeModuleLabel}
+        .modulesLoading=${this.modulesLoading}
+        .hasMenu=${(this.menu?.items.length ?? 0) > 0}
+        .search=${e}
+        .searchValue=${this._searchQuery}
+        .searchLoading=${this._searchLoading}
+        .moduleSwitcherMaxHeight=${this._moduleSwitcherMaxHeight}
+        @vsn-search-input=${this._onSearchInput}
+        @vsn-search-submit=${this._onSearchSubmit}
+        @vsn-search-cleared=${this._onSearchCleared}
+      >
+      </vsn-header>`;
 	}
 	scopesGroup() {
 		if (!this.menu?.search?.enabled) return n``;
@@ -2058,7 +2068,7 @@ var Et = "en", Dt = [
       <vsn-search-scopes
         .scopes=${[{
 			id: "menu",
-			label: ze()
+			label: Be()
 		}, ...e.map((e) => ({
 			id: e.id,
 			label: e.label
@@ -2069,30 +2079,28 @@ var Et = "en", Dt = [
     `;
 	}
 	renderMenu(e) {
-		return n`<vsn-menu class="flex-1 min-h-0" .items=${e?.items ?? []} .currentItem=${e?.currentItem ?? ""}></vsn-menu>`;
+		return n`
+      <vsn-menu class="flex-1 min-h-0" .items=${e?.items ?? []} .currentItem=${e?.currentItem ?? ""}></vsn-menu>`;
 	}
 	footer(e) {
 		return n`
       <vsn-footer
-          .user=${e.user}
-          .profilePictureBaseUrl=${e.profilePictureBaseUrl}
-          .myProfileUrl=${e.myProfileUrl}>
+        .user=${e.user}
+        .profilePictureBaseUrl=${e.profilePictureBaseUrl}
+        .myProfileUrl=${e.myProfileUrl}>
       </vsn-footer>
     `;
 	}
 };
-N([s({ attribute: !1 })], G.prototype, "modules", void 0), N([s()], G.prototype, "activeModuleId", void 0), N([s()], G.prototype, "activeModuleLabel", void 0), N([s({ type: Boolean })], G.prototype, "modulesLoading", void 0), N([s()], G.prototype, "lang", void 0), N([s({ attribute: !1 })], G.prototype, "auth", void 0), N([s({ type: Boolean })], G.prototype, "error", void 0), N([s({
+P([s({ attribute: !1 })], q.prototype, "modules", void 0), P([s()], q.prototype, "activeModuleId", void 0), P([s()], q.prototype, "activeModuleLabel", void 0), P([s({ type: Boolean })], q.prototype, "modulesLoading", void 0), P([s()], q.prototype, "lang", void 0), P([s({ attribute: !1 })], q.prototype, "auth", void 0), P([s({ type: Boolean })], q.prototype, "error", void 0), P([s({
 	type: Boolean,
 	reflect: !0
-})], G.prototype, "open", void 0), N([s({ attribute: !1 })], G.prototype, "menu", void 0), N([l()], G.prototype, "_searchQuery", void 0), N([l()], G.prototype, "_searchResults", void 0), N([l()], G.prototype, "_searchLoading", void 0), N([l()], G.prototype, "_activeScopeId", void 0), N([l()], G.prototype, "_searchError", void 0), N([l()], G.prototype, "_searchNextCursor", void 0), N([l()], G.prototype, "_searchLoadingMore", void 0), G = N([o("vsn-side-bar")], G);
+})], q.prototype, "open", void 0), P([s({ attribute: !1 })], q.prototype, "menu", void 0), P([l()], q.prototype, "_searchQuery", void 0), P([l()], q.prototype, "_searchResults", void 0), P([l()], q.prototype, "_searchLoading", void 0), P([l()], q.prototype, "_activeScopeId", void 0), P([l()], q.prototype, "_searchError", void 0), P([l()], q.prototype, "_searchNextCursor", void 0), P([l()], q.prototype, "_searchLoadingMore", void 0), P([l()], q.prototype, "_moduleSwitcherMaxHeight", void 0), q = P([o("vsn-side-bar")], q);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-breadcrumb-menu-item.ts
-var K, q = class extends e {
-	static {
-		K = this;
-	}
+var J, Y = class extends e {
 	static {
-		this.styles = h;
+		J = this;
 	}
 	static {
 		this._idCounter = 0;
@@ -2116,7 +2124,7 @@ var K, q = class extends e {
 				e.preventDefault(), e.stopPropagation(), this._isExpanded = !this._isExpanded;
 				return;
 			}
-			if (!this.tree || e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+			if (!this.tree || e.button !== 0 || A(e)) return;
 			e.preventDefault(), e.stopPropagation();
 			let t = [...this.ancestorPath, this.tree];
 			this.dispatchEvent(new CustomEvent("vsn-breadcrumb-menu-leaf-select", {
@@ -2124,7 +2132,7 @@ var K, q = class extends e {
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this._tooltipId = `vsn-menu-item-tooltip-${K._idCounter++}`;
+		}, this._tooltipId = `vsn-menu-item-tooltip-${J._idCounter++}`;
 	}
 	createRenderRoot() {
 		return this;
@@ -2150,7 +2158,7 @@ var K, q = class extends e {
         <div class="ga-tooltip ga-tooltip--right-start" style="white-space: nowrap">${e}</div>
       </div>
       <span class="ga-side-navigation__item-icon">
-			  ${this._isParent() ? this._isExpanded ? j(M, 16) : j(ot, 16) : ""}
+			  ${this._isParent() ? this._isExpanded ? M(N, 16) : M(ct, 16) : ""}
       </span>
       <div class="ga-side-navigation__item-content">
         <div class="ga-side-navigation__item-label">${e}</div>
@@ -2174,33 +2182,33 @@ var K, q = class extends e {
 		if (this.tree && _(this.tree)) return this.tree.items.length > 0;
 	}
 };
-N([s({ attribute: !1 })], q.prototype, "tree", void 0), N([s({ type: Number })], q.prototype, "level", void 0), N([s({ type: Array })], q.prototype, "ancestorPath", void 0), N([l()], q.prototype, "_isExpanded", void 0), N([l()], q.prototype, "_showTooltip", void 0), N([l()], q.prototype, "_tooltipPos", void 0), N([c(".ga-side-navigation__item-label")], q.prototype, "_labelEl", void 0), q = K = N([o("vsn-breadcrumb-menu-item")], q);
+P([s({ attribute: !1 })], Y.prototype, "tree", void 0), P([s({ type: Number })], Y.prototype, "level", void 0), P([s({ type: Array })], Y.prototype, "ancestorPath", void 0), P([l()], Y.prototype, "_isExpanded", void 0), P([l()], Y.prototype, "_showTooltip", void 0), P([l()], Y.prototype, "_tooltipPos", void 0), P([c(".ga-side-navigation__item-label")], Y.prototype, "_labelEl", void 0), Y = J = P([o("vsn-breadcrumb-menu-item")], Y);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-breadcrumb-menu.ts
-var J = class extends e {
-	static {
-		this.styles = h;
-	}
+var qt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
 	menuItem(e) {
-		return n`<vsn-breadcrumb-menu-item .tree=${e}></vsn-breadcrumb-menu-item>`;
+		return n`
+      <vsn-breadcrumb-menu-item .tree=${e}></vsn-breadcrumb-menu-item>`;
 	}
 	render() {
 		return n`
-      <div class="ga-side-navigation" style="height: auto; overflow: visible; width: 238px; min-width: var(--ga-size-160); max-width: 512px; border-radius: var(--ga-radius); border: var(--ga-size-border-width-sm) solid var(--ga-color-border-primary); background: var(--ga-color-surface-primary);">
-        <div class="ga-side-navigation__body" style="overflow-x: hidden; overflow-y: auto; max-height: 60vh;">
+      <div class="ga-side-navigation ga-scroll"
+           style="height: auto; overflow: visible; width: 238px; min-width: var(--ga-size-160); max-width: 512px; border-radius: var(--ga-radius); border: var(--ga-size-border-width-sm) solid var(--ga-color-border-primary); background: var(--ga-color-surface-primary);">
+        <div class="ga-side-navigation__body overflow-y-auto ga-scroll"
+             style="overflow-x: hidden; max-height: 60vh;">
           ${d(this.treeList, (e) => this.menuItem(e))}
         </div>
       </div>
     `;
 	}
 };
-N([s({ attribute: !1 })], J.prototype, "treeList", void 0), J = N([o("vsn-breadcrumb-menu")], J);
+P([s({ attribute: !1 })], qt.prototype, "treeList", void 0), qt = P([o("vsn-breadcrumb-menu")], qt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-breadcrumbs.ts
-var Y = class extends e {
+var X = class extends e {
 	constructor(...e) {
 		super(...e), this.modules = [], this._openPopoverId = null, this._displayMode = "full", this._overflowCount = 0, this._tooltip = null, this._mqDesktop = window.matchMedia("(min-width: 1440px)"), this._mqTablet = window.matchMedia("(min-width: 768px) and (max-width: 1439px)"), this._ro = null, this._lastContainerWidth = 0, this._mounted = !1, this._handleMediaChange = () => {
 			this._mqDesktop.matches ? (this._displayMode = "full", this._overflowCount = 0) : this._mqTablet.matches ? (this._displayMode = "overflow", this._overflowCount = 0, this._mounted && this.updateComplete.then(() => this._recalculateOverflow())) : (this._displayMode = "mobile", this._overflowCount = 0);
@@ -2219,14 +2227,20 @@ var Y = class extends e {
 		};
 	}
 	static {
-		this.styles = [h, t`
+		this.styles = [
+			h,
+			K,
+			t`
       /* Temporary, until breadcrumb styles are updated */
+
       .ga-breadcrumb {
         flex-wrap: nowrap;
         overflow-x: clip;
       }
+
       /* Dropdowns use the native Popover API — promoted to the top layer on open,
          bypassing all stacking contexts. */
+
       .ga-breadcrumb-item__menu[popover] {
         position: fixed;
         inset: unset;
@@ -2236,34 +2250,42 @@ var Y = class extends e {
         background: transparent;
         overflow: visible;
       }
+
       .ga-breadcrumb-item__trigger[aria-expanded='true'] .ga-breadcrumb-item__label {
         outline: none;
       }
+
       .ga-breadcrumb-item--link .ga-breadcrumb-item__trigger:hover,
       .ga-breadcrumb-item--overflow .ga-breadcrumb-item__trigger:hover {
         background-color: var(--ga-color-surface-action-hover-2);
         text-decoration: none;
       }
+
       .ga-breadcrumb-item--link .ga-breadcrumb-item__trigger:hover .ga-breadcrumb-item__label,
       .ga-breadcrumb-item--overflow .ga-breadcrumb-item__trigger:hover .ga-breadcrumb-item__label {
         text-decoration: none;
       }
+
       .ga-breadcrumb-item.ga-breadcrumb-item--ancestor .ga-breadcrumb-item__trigger {
         color: var(--ga-color-text-body);
         cursor: default;
       }
+
       .ga-breadcrumb-item.ga-breadcrumb-item--ancestor .ga-breadcrumb-item__trigger .ga-breadcrumb-item__label {
         color: var(--ga-color-text-body);
       }
+
       .ga-breadcrumb-item.ga-breadcrumb-item--ancestor .ga-breadcrumb-item__trigger:hover {
         background-color: transparent;
         color: var(--ga-color-text-body);
       }
+
       .ga-breadcrumb-item.ga-breadcrumb-item--ancestor .ga-breadcrumb-item__trigger:hover .ga-breadcrumb-item__label {
         text-decoration: none;
         color: var(--ga-color-text-body);
       }
-    `];
+    `
+		];
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._mqDesktop.addEventListener("change", this._handleMediaChange), this._mqTablet.addEventListener("change", this._handleMediaChange), this._handleMediaChange();
@@ -2370,10 +2392,11 @@ var Y = class extends e {
         >
           <span class="ga-breadcrumb-item__label">${"VSN"}</span>
         </button>
-        ${this._breadcrumbPath.length > 0 ? n`<span class="ga-breadcrumb-item__separator" aria-hidden="true">/</span>` : ""}
+        ${this._breadcrumbPath.length > 0 ? n`<span class="ga-breadcrumb-item__separator"
+                                                       aria-hidden="true">/</span>` : ""}
         <div
           id="vsn-bc-modules-popover"
-          class="ga-breadcrumb-item__menu"
+          class="ga-breadcrumb-item__menu ga-scroll"
           popover="auto"
           @beforetoggle=${(e) => this._handlePopoverBeforeToggle("vsn-bc-modules-trigger", e)}
           @toggle=${(e) => this._handlePopoverToggle("vsn-bc-modules-popover", e)}
@@ -2399,7 +2422,10 @@ var Y = class extends e {
 	}
 	_renderLeafAsAncestor(e) {
 		return n`
-      <div class="ga-breadcrumb-item ga-breadcrumb-item--link ga-breadcrumb-item--ancestor" aria-describedby=${this._tooltip ? "vsn-breadcrumb-tooltip" : r} data-tooltip-label="${e.label ?? ""}" @mouseenter=${this._onBreadcrumbMouseEnter} @mouseleave=${this._onBreadcrumbMouseLeave}>
+      <div class="ga-breadcrumb-item ga-breadcrumb-item--link ga-breadcrumb-item--ancestor"
+           aria-describedby=${this._tooltip ? "vsn-breadcrumb-tooltip" : r}
+           data-tooltip-label="${e.label ?? ""}" @mouseenter=${this._onBreadcrumbMouseEnter}
+           @mouseleave=${this._onBreadcrumbMouseLeave}>
         <span class="ga-breadcrumb-item__trigger">
           <span class="ga-breadcrumb-item__label">${e.label ?? ""}</span>
         </span>
@@ -2419,7 +2445,10 @@ var Y = class extends e {
 	}
 	_renderCurrentItem(e) {
 		return n`
-      <div class="ga-breadcrumb-item ga-breadcrumb-item--current-page" aria-describedby=${this._tooltip ? "vsn-breadcrumb-tooltip" : r} data-tooltip-label="${e.label ?? ""}" @mouseenter=${this._onBreadcrumbMouseEnter} @mouseleave=${this._onBreadcrumbMouseLeave}>
+      <div class="ga-breadcrumb-item ga-breadcrumb-item--current-page"
+           aria-describedby=${this._tooltip ? "vsn-breadcrumb-tooltip" : r}
+           data-tooltip-label="${e.label ?? ""}" @mouseenter=${this._onBreadcrumbMouseEnter}
+           @mouseleave=${this._onBreadcrumbMouseLeave}>
         <span class="ga-breadcrumb-item__trigger" aria-current="page">
           <span class="ga-breadcrumb-item__label">${e.label ?? ""}</span>
         </span>
@@ -2429,7 +2458,10 @@ var Y = class extends e {
 		if (!_(e) || e.items.length === 0) return n``;
 		let i = this._popoverItemId(t), a = this._popoverItemTriggerId(t);
 		return n`
-      <div class="ga-breadcrumb-item ga-breadcrumb-item--link" aria-describedby=${this._tooltip ? "vsn-breadcrumb-tooltip" : r} data-tooltip-label="${e.label ?? ""}" @mouseenter=${this._onBreadcrumbMouseEnter} @mouseleave=${this._onBreadcrumbMouseLeave}>
+      <div class="ga-breadcrumb-item ga-breadcrumb-item--link"
+           aria-describedby=${this._tooltip ? "vsn-breadcrumb-tooltip" : r}
+           data-tooltip-label="${e.label ?? ""}" @mouseenter=${this._onBreadcrumbMouseEnter}
+           @mouseleave=${this._onBreadcrumbMouseLeave}>
         <button
           id=${a}
           class="ga-breadcrumb-item__trigger"
@@ -2512,7 +2544,8 @@ var Y = class extends e {
           ${this._displayMode === "full" ? this._renderFullBreadcrumbs() : this._displayMode === "overflow" ? this._renderOverflowBreadcrumbs() : this._renderMobileBreadcrumbs()}
         </div>
         ${this._tooltip ? n`
-          <div id="vsn-breadcrumb-tooltip" role="tooltip" style="position: fixed; left: ${this._tooltip.x}px; top: ${this._tooltip.y}px; pointer-events: none; z-index: 9999;">
+          <div id="vsn-breadcrumb-tooltip" role="tooltip"
+               style="position: fixed; left: ${this._tooltip.x}px; top: ${this._tooltip.y}px; pointer-events: none; z-index: 9999;">
             <div class="ga-tooltip ga-tooltip--bottom-start" style="white-space: nowrap">${this._tooltip.label}</div>
           </div>
         ` : r}
@@ -2520,13 +2553,10 @@ var Y = class extends e {
     `;
 	}
 };
-N([s({ attribute: !1 })], Y.prototype, "tree", void 0), N([s({ type: Array })], Y.prototype, "modules", void 0), N([s()], Y.prototype, "activeModuleId", void 0), N([l()], Y.prototype, "_openPopoverId", void 0), N([l()], Y.prototype, "_displayMode", void 0), N([l()], Y.prototype, "_overflowCount", void 0), N([l()], Y.prototype, "_tooltip", void 0), Y = N([S(), o("vsn-breadcrumbs")], Y);
+P([s({ attribute: !1 })], X.prototype, "tree", void 0), P([s({ type: Array })], X.prototype, "modules", void 0), P([s()], X.prototype, "activeModuleId", void 0), P([l()], X.prototype, "_openPopoverId", void 0), P([l()], X.prototype, "_displayMode", void 0), P([l()], X.prototype, "_overflowCount", void 0), P([l()], X.prototype, "_tooltip", void 0), X = P([S(), o("vsn-breadcrumbs")], X);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-ai-assistant.ts
-var Kt = class extends e {
-	static {
-		this.styles = h;
-	}
+var Jt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
@@ -2539,24 +2569,22 @@ var Kt = class extends e {
 	}
 	render() {
 		return n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Open AI assistant")} @click=${this._handleClick}>
-        <span class="ga-icon">${j(Ke)}</span>
+      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only"
+              aria-label=${x("Open AI assistant")} @click=${this._handleClick}>
+        <span class="ga-icon">${M(Je)}</span>
       </button>
     `;
 	}
 };
-Kt = N([S(), o("vsn-ai-assistant")], Kt);
+Jt = P([S(), o("vsn-ai-assistant")], Jt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-feedback.ts
-var X = class extends e {
+var Z = class extends e {
 	constructor(...e) {
 		super(...e), this._compact = !1, this.feedback = null, this._mqMobile = window.matchMedia("(max-width: 767px)"), this._handleMediaChange = () => {
 			this._compact = this._mqMobile.matches;
 		}, this._traitSet = !1;
 	}
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2566,7 +2594,7 @@ var X = class extends e {
 	updated(e) {
 		if (super.updated(e), e.has("feedback") && this.feedback?.workspaceId && !document.getElementById("survicate-sdk") && !window._sva) {
 			let e = document.createElement("script");
-			e.id = He, e.src = We(this.feedback.workspaceId), e.async = !0, e.onload = () => this._applyVisitorTraits(), document.head.appendChild(e);
+			e.id = Ue, e.src = Ge(this.feedback.workspaceId), e.async = !0, e.onload = () => this._applyVisitorTraits(), document.head.appendChild(e);
 		}
 		if (e.has("auth")) {
 			let t = e.get("auth");
@@ -2586,27 +2614,26 @@ var X = class extends e {
 		this.dispatchEvent(new CustomEvent("vsn-feedback", {
 			bubbles: !0,
 			composed: !0
-		})), this.feedback?.surveyId && (this._applyVisitorTraits(), window._sva?.invokeEvent(Ue));
+		})), this.feedback?.surveyId && (this._applyVisitorTraits(), window._sva?.invokeEvent(We));
 	}
 	render() {
 		return this._compact ? n`
-        <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Send feedback")} @click=${this._handleClick}>
-          <span class="ga-icon">${j(Ye)}</span>
+        <button type="button" class="ga-button ga-button--secondary ga-button--icon-only"
+                aria-label=${x("Send feedback")} @click=${this._handleClick}>
+          <span class="ga-icon">${M(Ze)}</span>
         </button>
       ` : n`
-      <button type="button" class="ga-button ga-button--secondary" aria-label=${x("Send feedback")} @click=${this._handleClick}>
+      <button type="button" class="ga-button ga-button--secondary" aria-label=${x("Send feedback")}
+              @click=${this._handleClick}>
         ${x("Feedback")}
       </button>
     `;
 	}
 };
-N([l()], X.prototype, "_compact", void 0), N([s({ attribute: !1 })], X.prototype, "feedback", void 0), N([s({ attribute: !1 })], X.prototype, "auth", void 0), X = N([S(), o("vsn-feedback")], X);
+P([l()], Z.prototype, "_compact", void 0), P([s({ attribute: !1 })], Z.prototype, "feedback", void 0), P([s({ attribute: !1 })], Z.prototype, "auth", void 0), Z = P([S(), o("vsn-feedback")], Z);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-home.ts
-var Z = class extends e {
-	static {
-		this.styles = h;
-	}
+var Yt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
@@ -2623,30 +2650,17 @@ var Z = class extends e {
 	}
 	render() {
 		return this.landingPageUrl ? n`
-      <a href=${this.landingPageUrl} class="ga-button ga-button--ghost ga-button--icon-only" aria-label=${x("Home")} @click=${this._handleClick}>
-        <span class="ga-icon">${j(Xe)}</span>
+      <a href=${this.landingPageUrl} class="ga-button ga-button--ghost ga-button--icon-only" aria-label=${x("Home")}
+         @click=${this._handleClick}>
+        <span class="ga-icon">${M(Qe)}</span>
       </a>
     ` : r;
 	}
 };
-N([s({ attribute: "landing-page-url" })], Z.prototype, "landingPageUrl", void 0), Z = N([S(), o("vsn-home")], Z);
+P([s({ attribute: "landing-page-url" })], Yt.prototype, "landingPageUrl", void 0), Yt = P([S(), o("vsn-home")], Yt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-menu-toggle.ts
-var qt = class extends e {
-	constructor(...e) {
-		super(...e), this._tooltip = null, this._onMouseEnter = (e) => {
-			let t = e.currentTarget.getBoundingClientRect();
-			this._tooltip = {
-				x: t.left,
-				y: t.bottom + 4
-			};
-		}, this._onMouseLeave = () => {
-			this._tooltip = null;
-		};
-	}
-	static {
-		this.styles = h;
-	}
+var Xt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
@@ -2654,34 +2668,42 @@ var qt = class extends e {
 		this.querySelector("button")?.focus(e);
 	}
 	_handleClick() {
-		this._tooltip = null, this.dispatchEvent(new CustomEvent("toggle-side-bar", {
+		this._tooltipElement.hidePopover?.(), this.dispatchEvent(new CustomEvent("toggle-side-bar", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
+	_onActivate(e) {
+		let t = e.currentTarget.getBoundingClientRect();
+		this._tooltipElement.style.left = `${t.left}px`, this._tooltipElement.style.top = `${t.bottom + 4}px`, this._tooltipElement.showPopover?.();
+	}
+	_onDeactivate() {
+		this._tooltipElement.hidePopover?.();
+	}
 	render() {
 		return n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Open menu")} aria-describedby=${this._tooltip ? "vsn-menu-toggle-tooltip" : r} @click=${this._handleClick} @mouseenter=${this._onMouseEnter} @mouseleave=${this._onMouseLeave}>
-        <span class="ga-icon">${j(Ge)}</span>
+      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Open menu")}
+              aria-describedby="vsn-menu-toggle-tooltip"
+              @click=${this._handleClick}
+              @mouseenter=${this._onActivate}
+              @mouseleave=${this._onDeactivate}>
+        <span class="ga-icon">${M(qe)}</span>
       </button>
-      ${this._tooltip ? n`
-        <div id="vsn-menu-toggle-tooltip" role="tooltip" style="position: fixed; left: ${this._tooltip.x}px; top: ${this._tooltip.y}px; pointer-events: none; z-index: 9999;">
-          <div class="ga-tooltip ga-tooltip--bottom-start" style="white-space: nowrap">${Le()}</div>
-        </div>
-      ` : r}
+      <div id="vsn-menu-toggle-tooltip" role="tooltip"
+           style="position: fixed; inset: unset; margin: 0; padding: 0; border: none; background: transparent; overflow: visible; pointer-events: none; z-index: 9999;"
+           popover="manual">
+        <div class="ga-tooltip ga-tooltip--bottom-start" style="white-space: nowrap">${Re()}</div>
+      </div>
     `;
 	}
 };
-N([l()], qt.prototype, "_tooltip", void 0), qt = N([S(), o("vsn-menu-toggle")], qt);
+P([c("div[role=\"tooltip\"]", !0)], Xt.prototype, "_tooltipElement", void 0), Xt = P([S(), o("vsn-menu-toggle")], Xt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-notifications.ts
-var Jt = class extends e {
+var Zt = class extends e {
 	constructor(...e) {
 		super(...e), this.notificationActive = !1;
 	}
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2693,22 +2715,23 @@ var Jt = class extends e {
 		}));
 	}
 	render() {
-		let e = this.notificationActive ? Je : qe;
+		let e = this.notificationActive ? Xe : Ye;
 		return n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Notifications")} @click=${this._handleClick}>
-        <span class="ga-icon">${j(e)}</span>
+      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only"
+              aria-label=${x("Notifications")} @click=${this._handleClick}>
+        <span class="ga-icon">${M(e)}</span>
       </button>
     `;
 	}
 };
-N([s({
+P([s({
 	type: Boolean,
 	attribute: "notification-active",
 	reflect: !0
-})], Jt.prototype, "notificationActive", void 0), Jt = N([S(), o("vsn-notifications")], Jt);
+})], Zt.prototype, "notificationActive", void 0), Zt = P([S(), o("vsn-notifications")], Zt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-help.ts
-function Yt(e) {
+function Qt(e) {
 	try {
 		let t = new URL(e);
 		return t.protocol === "https:" || t.protocol === "http:";
@@ -2716,10 +2739,7 @@ function Yt(e) {
 		return !1;
 	}
 }
-var Xt = class extends e {
-	static {
-		this.styles = h;
-	}
+var $t = class extends e {
 	createRenderRoot() {
 		return this;
 	}
@@ -2731,18 +2751,20 @@ var Xt = class extends e {
 		}));
 	}
 	render() {
-		return this.helpUrl && Yt(this.helpUrl) ? n`
-        <a href=${this.helpUrl} rel="noopener noreferrer" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Help")}>
-          <span class="ga-icon">${j(Ze)}</span>
+		return this.helpUrl && Qt(this.helpUrl) ? n`
+        <a href=${this.helpUrl} target="_blank" rel="noopener noreferrer" class="ga-button ga-button--secondary ga-button--icon-only"
+           aria-label=${x("Help")}>
+          <span class="ga-icon">${M($e)}</span>
         </a>
       ` : n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Help")} @click=${this._handleClick}>
-        <span class="ga-icon">${j(Ze)}</span>
+      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${x("Help")}
+              @click=${this._handleClick}>
+        <span class="ga-icon">${M($e)}</span>
       </button>
     `;
 	}
 };
-N([s({ attribute: "help-url" })], Xt.prototype, "helpUrl", void 0), Xt = N([S(), o("vsn-help")], Xt);
+P([s({ attribute: "help-url" })], $t.prototype, "helpUrl", void 0), $t = P([S(), o("vsn-help")], $t);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-top-bar.ts
 var Q = class extends e {
@@ -2750,7 +2772,7 @@ var Q = class extends e {
 		super(...e), this.modules = [], this.feedback = null, this.showHelp = !1, this.showNotification = !1, this.notificationActive = !1, this.lang = "en";
 	}
 	willUpdate(e) {
-		e.has("lang") && Bt(this.lang).catch(console.error);
+		e.has("lang") && Ft(this.lang).catch(console.error);
 	}
 	focusMenuToggle() {
 		this.renderRoot.querySelector("vsn-menu-toggle")?.focus();
@@ -2852,26 +2874,28 @@ var Q = class extends e {
     `;
 	}
 };
-N([s({ attribute: !1 })], Q.prototype, "tree", void 0), N([s({ type: Array })], Q.prototype, "modules", void 0), N([s()], Q.prototype, "activeModuleId", void 0), N([s({ attribute: "landing-page-url" })], Q.prototype, "landingPageUrl", void 0), N([s({ attribute: !1 })], Q.prototype, "feedback", void 0), N([s({ attribute: !1 })], Q.prototype, "auth", void 0), N([s({
+P([s({ attribute: !1 })], Q.prototype, "tree", void 0), P([s({ type: Array })], Q.prototype, "modules", void 0), P([s()], Q.prototype, "activeModuleId", void 0), P([s({ attribute: "landing-page-url" })], Q.prototype, "landingPageUrl", void 0), P([s({ attribute: !1 })], Q.prototype, "feedback", void 0), P([s({ attribute: !1 })], Q.prototype, "auth", void 0), P([s({
 	type: Boolean,
 	attribute: "show-help"
-})], Q.prototype, "showHelp", void 0), N([s({ attribute: "help-url" })], Q.prototype, "helpUrl", void 0), N([s({
+})], Q.prototype, "showHelp", void 0), P([s({ attribute: "help-url" })], Q.prototype, "helpUrl", void 0), P([s({
 	type: Boolean,
 	attribute: "show-notification"
-})], Q.prototype, "showNotification", void 0), N([s({
+})], Q.prototype, "showNotification", void 0), P([s({
 	type: Boolean,
 	attribute: "notification-active"
-})], Q.prototype, "notificationActive", void 0), N([s()], Q.prototype, "lang", void 0), Q = N([o("vsn-top-bar")], Q);
+})], Q.prototype, "notificationActive", void 0), P([s()], Q.prototype, "lang", void 0), Q = P([o("vsn-top-bar")], Q);
 //#endregion
 //#region src/components/vsn-navigation.ts
 var $ = class extends e {
 	constructor(...e) {
-		super(...e), this.lang = "en", this.showHelp = !1, this.feedback = null, this.showNotification = !1, this.notificationActive = !1, this._currentItem = "", this._sideBarOpen = !1, this._resolvedModules = [], this._modulesLoading = !1, this._modulesLoadToken = 0, this._restoreFocusToToggle = !1, this._onShortcut = (e) => {
-			!Pe(e) || e.key.toLowerCase() !== "k" || (e.preventDefault(), this._openAndFocusSearch());
-		}, this._onDocEscape = (e) => {
-			if (e.key !== "Escape" || !this._sideBarOpen) return;
-			let t = document.activeElement;
-			t && t !== document.body || (this._closeSideBar(), this._restoreFocusToToggle = !0);
+		super(...e), this.lang = "en", this.showHelp = !1, this.feedback = null, this.showNotification = !1, this.notificationActive = !1, this.open = !1, this._currentItem = "", this._resolvedModules = [], this._modulesLoading = !1, this._modulesLoadToken = 0, this._restoreFocusToToggle = !1, this._onShortcut = (e) => {
+			e.defaultPrevented || !Fe(e) || e.key.toLowerCase() !== "k" || (e.preventDefault(), this.dispatchEvent(new CustomEvent("vsn-open", {
+				cancelable: !0,
+				bubbles: !0,
+				composed: !0
+			})) && this._openAndFocusSearch());
+		}, this._onEscape = (e) => {
+			e.defaultPrevented || this.open && j(e) && e.key === "Escape" && (e.preventDefault(), this.open = !1);
 		};
 	}
 	_resolveModules() {
@@ -2892,7 +2916,10 @@ var $ = class extends e {
 		});
 	}
 	static {
-		this.styles = [h, t`
+		this.styles = [
+			h,
+			K,
+			t`
       :host {
         display: flex;
         flex-direction: column;
@@ -2911,12 +2938,8 @@ var $ = class extends e {
         min-height: 0;
         overflow: hidden;
       }
-
-      .vsn-navigation__page-content {
-        height: 100%;
-        overflow-y: auto;
-      }
-    `];
+    `
+		];
 	}
 	willUpdate(e) {
 		e.has("tree") && this.tree && (this.tree.currentItem ? this._currentItem = this.tree.currentItem : this.tree.items.length > 0 && (this._currentItem = this._getFirstLeafId(this.tree.items[0]))), e.has("modules") && this._resolveModules();
@@ -2938,29 +2961,32 @@ var $ = class extends e {
 		};
 	}
 	_onToggleSideBar() {
-		this._sideBarOpen ? this._closeSideBar() : this._openAndFocusSearch();
+		this.open ? this._closeSideBar() : this._openAndFocusSearch();
 	}
 	_openAndFocusSearch() {
-		this._sideBarOpen = !0, this.updateComplete.then(() => this.renderRoot.querySelector("vsn-side-bar")?.focusSearch());
-	}
-	_onSideBarClose() {
-		this._closeSideBar();
+		this.open = !0, this.updateComplete.then(() => this.renderRoot.querySelector("vsn-side-bar")?.focusSearch());
 	}
 	_closeSideBar() {
-		let e = this.renderRoot.querySelector("vsn-side-bar");
-		this._restoreFocusToToggle = e?.matches(":focus-within") ?? !1, this._sideBarOpen = !1;
+		this.open = !1;
+	}
+	update(e) {
+		if (e.has("open") && e.get("open") && !this.open) {
+			let e = this.renderRoot.querySelector("vsn-side-bar");
+			this._restoreFocusToToggle = e?.matches(":focus-within") ?? !1;
+		}
+		super.update(e);
 	}
 	updated(e) {
-		e.has("_sideBarOpen") && e.get("_sideBarOpen") && !this._sideBarOpen && this._restoreFocusToToggle && this.renderRoot.querySelector("vsn-top-bar")?.focusMenuToggle();
+		e.has("open") && e.get("open") && !this.open && this._restoreFocusToToggle && this.renderRoot.querySelector("vsn-top-bar")?.focusMenuToggle();
 	}
 	connectedCallback() {
-		super.connectedCallback(), document.addEventListener("keydown", this._onShortcut), document.addEventListener("keydown", this._onDocEscape);
+		super.connectedCallback(), document.addEventListener("keydown", this._onShortcut), document.addEventListener("keydown", this._onEscape);
 	}
 	disconnectedCallback() {
-		document.removeEventListener("keydown", this._onShortcut), document.removeEventListener("keydown", this._onDocEscape), super.disconnectedCallback();
+		document.removeEventListener("keydown", this._onShortcut), document.removeEventListener("keydown", this._onEscape), super.disconnectedCallback();
 	}
 	_onTopBarClick(e) {
-		this._sideBarOpen && (e.composedPath().some((e) => e.tagName?.toUpperCase() === "VSN-MENU-TOGGLE") || this._closeSideBar());
+		this.open && (e.composedPath().some((e) => e.tagName?.toUpperCase() === "VSN-MENU-TOGGLE") || (this.open = !1));
 	}
 	render() {
 		return n`
@@ -2978,7 +3004,7 @@ var $ = class extends e {
         ?notification-active=${this.notificationActive}
         @toggle-side-bar=${this._onToggleSideBar}
         @click=${this._onTopBarClick}
-        @vsn-breadcrumb-dropdown-open=${this._onSideBarClose}
+        @vsn-breadcrumb-dropdown-open=${this._closeSideBar}
       >
         <slot name="context-selector" slot="context-selector"></slot>
       </vsn-top-bar>
@@ -2991,27 +3017,31 @@ var $ = class extends e {
           .activeModuleLabel=${this.modules?.activeModuleLabel}
           .modulesLoading=${this._modulesLoading}
           .auth=${this.auth}
-          ?open=${this._sideBarOpen}
-          @vsn-side-bar-close=${this._onSideBarClose}
+          ?open=${this.open}
+          @vsn-side-bar-close=${this._closeSideBar}
         >
           <slot name="nav-footer" slot="nav-footer"></slot>
         </vsn-side-bar>
-        <div class="vsn-navigation__page-content">
+        <div class="h-full overflow-y-auto ga-scroll">
           <slot></slot>
         </div>
       </div>
     `;
 	}
 };
-N([s()], $.prototype, "lang", void 0), N([s({ attribute: !1 })], $.prototype, "tree", void 0), N([s({ attribute: !1 })], $.prototype, "modules", void 0), N([s({ attribute: !1 })], $.prototype, "auth", void 0), N([s({ attribute: "landing-page-url" })], $.prototype, "landingPageUrl", void 0), N([s({
+P([s()], $.prototype, "lang", void 0), P([s({ attribute: !1 })], $.prototype, "tree", void 0), P([s({ attribute: !1 })], $.prototype, "modules", void 0), P([s({ attribute: !1 })], $.prototype, "auth", void 0), P([s({ attribute: "landing-page-url" })], $.prototype, "landingPageUrl", void 0), P([s({
 	type: Boolean,
 	attribute: "show-help"
-})], $.prototype, "showHelp", void 0), N([s({ attribute: "help-url" })], $.prototype, "helpUrl", void 0), N([s({ attribute: !1 })], $.prototype, "feedback", void 0), N([s({
+})], $.prototype, "showHelp", void 0), P([s({ attribute: "help-url" })], $.prototype, "helpUrl", void 0), P([s({ attribute: !1 })], $.prototype, "feedback", void 0), P([s({
 	type: Boolean,
 	attribute: "show-notification"
-})], $.prototype, "showNotification", void 0), N([s({
+})], $.prototype, "showNotification", void 0), P([s({
 	type: Boolean,
 	attribute: "notification-active"
-})], $.prototype, "notificationActive", void 0), N([l()], $.prototype, "_currentItem", void 0), N([l()], $.prototype, "_sideBarOpen", void 0), N([l()], $.prototype, "_resolvedModules", void 0), N([l()], $.prototype, "_modulesLoading", void 0), $ = N([o("vsn-navigation")], $);
+})], $.prototype, "notificationActive", void 0), P([s({
+	type: Boolean,
+	attribute: "open",
+	reflect: !0
+})], $.prototype, "open", void 0), P([l()], $.prototype, "_currentItem", void 0), P([l()], $.prototype, "_resolvedModules", void 0), P([l()], $.prototype, "_modulesLoading", void 0), $ = P([o("vsn-navigation")], $);
 //#endregion
 export { v as SearchError, $ as VSNNavigation, g as isTreeLeaf, _ as isTreeParent };