@visma-swno/vsn-navigation 1.2.0-beta.7 → 1.2.0-beta.9

package/dist/assets/vsn-navigation.js

@@ -192,38 +192,38 @@ function g(e) {
 function _(e) {
 	return "items" in e;
 }
-var de = class e extends Error {
+var v = class e extends Error {
 	constructor(t) {
 		super(t), this.name = "SearchError", Object.setPrototypeOf(this, e.prototype);
 	}
-}, fe = ie("activeId"), v = "lit-localize-status", y = (e, ...t) => ({
+}, de = ie("activeId"), y = "lit-localize-status", b = (e, ...t) => ({
 	strTag: !0,
 	strings: e,
 	values: t
-}), pe = (e) => typeof e != "string" && "strTag" in e, me = (e, t, n) => {
+}), fe = (e) => typeof e != "string" && "strTag" in e, pe = (e, t, n) => {
 	let r = e[0];
 	for (let i = 1; i < e.length; i++) r += t[n ? n[i - 1] : i - 1], r += e[i];
 	return r;
-}, he = ((e) => pe(e) ? me(e.strings, e.values) : e), b = he, ge = !1;
-function _e(e) {
-	if (ge) throw Error("lit-localize can only be configured once");
-	b = e, ge = !0;
+}, me = ((e) => fe(e) ? pe(e.strings, e.values) : e), x = me, he = !1;
+function ge(e) {
+	if (he) throw Error("lit-localize can only be configured once");
+	x = e, he = !0;
 }
 //#endregion
 //#region node_modules/@lit/localize/internal/localized-controller.js
-var ve = class {
+var _e = class {
 	constructor(e) {
 		this.__litLocalizeEventHandler = (e) => {
 			e.detail.status === "ready" && this.host.requestUpdate();
 		}, this.host = e;
 	}
 	hostConnected() {
-		window.addEventListener(v, this.__litLocalizeEventHandler);
+		window.addEventListener(y, this.__litLocalizeEventHandler);
 	}
 	hostDisconnected() {
-		window.removeEventListener(v, this.__litLocalizeEventHandler);
+		window.removeEventListener(y, this.__litLocalizeEventHandler);
 	}
-}, ye = (e) => e.addController(new ve(e)), x = () => (e, t) => (e.addInitializer(ye), e), be = class {
+}, ve = (e) => e.addController(new _e(e)), S = () => (e, t) => (e.addInitializer(ve), e), ye = class {
 	constructor() {
 		this.settled = !1, this.promise = new Promise((e, t) => {
 			this._resolve = e, this._reject = t;
@@ -235,67 +235,67 @@ var ve = class {
 	reject(e) {
 		this.settled = !0, this._reject(e);
 	}
-}, S = [];
-for (let e = 0; e < 256; e++) S[e] = (e >> 4 & 15).toString(16) + (e & 15).toString(16);
-function xe(e) {
+}, C = [];
+for (let e = 0; e < 256; e++) C[e] = (e >> 4 & 15).toString(16) + (e & 15).toString(16);
+function be(e) {
 	let t = 0, n = 8997, r = 0, i = 33826, a = 0, o = 40164, s = 0, c = 52210;
 	for (let l = 0; l < e.length; l++) n ^= e.charCodeAt(l), t = n * 435, r = i * 435, a = o * 435, s = c * 435, a += n << 8, s += i << 8, r += t >>> 16, n = t & 65535, a += r >>> 16, i = r & 65535, c = s + (a >>> 16) & 65535, o = a & 65535;
-	return S[c >> 8] + S[c & 255] + S[o >> 8] + S[o & 255] + S[i >> 8] + S[i & 255] + S[n >> 8] + S[n & 255];
+	return C[c >> 8] + C[c & 255] + C[o >> 8] + C[o & 255] + C[i >> 8] + C[i & 255] + C[n >> 8] + C[n & 255];
 }
-var Se = "h", Ce = "s";
-function we(e, t) {
-	return (t ? Se : Ce) + xe(typeof e == "string" ? e : e.join(""));
+var xe = "h", Se = "s";
+function Ce(e, t) {
+	return (t ? xe : Se) + be(typeof e == "string" ? e : e.join(""));
 }
 //#endregion
 //#region node_modules/@lit/localize/internal/runtime-msg.js
-var Te = /* @__PURE__ */ new WeakMap(), Ee = /* @__PURE__ */ new Map();
-function De(e, t, n) {
+var we = /* @__PURE__ */ new WeakMap(), Te = /* @__PURE__ */ new Map();
+function Ee(e, t, n) {
 	if (e) {
-		let r = e[n?.id ?? Oe(t)];
+		let r = e[n?.id ?? De(t)];
 		if (r) {
 			if (typeof r == "string") return r;
-			if ("strTag" in r) return me(r.strings, t.values, r.values);
+			if ("strTag" in r) return pe(r.strings, t.values, r.values);
 			{
-				let e = Te.get(r);
-				return e === void 0 && (e = r.values, Te.set(r, e)), {
+				let e = we.get(r);
+				return e === void 0 && (e = r.values, we.set(r, e)), {
 					...r,
 					values: e.map((e) => t.values[e])
 				};
 			}
 		}
 	}
-	return he(t);
+	return me(t);
 }
-function Oe(e) {
-	let t = typeof e == "string" ? e : e.strings, n = Ee.get(t);
-	return n === void 0 && (n = we(t, typeof e != "string" && !("strTag" in e)), Ee.set(t, n)), n;
+function De(e) {
+	let t = typeof e == "string" ? e : e.strings, n = Te.get(t);
+	return n === void 0 && (n = Ce(t, typeof e != "string" && !("strTag" in e)), Te.set(t, n)), n;
 }
 //#endregion
 //#region node_modules/@lit/localize/init/runtime.js
-function C(e) {
-	window.dispatchEvent(new CustomEvent(v, { detail: e }));
+function w(e) {
+	window.dispatchEvent(new CustomEvent(y, { detail: e }));
 }
-var w = "", T, ke, E, D, Ae, O = new be();
+var T = "", E, Oe, D, ke, Ae, O = new ye();
 O.resolve();
-var k = 0, je = (e) => (_e(((e, t) => De(Ae, e, t))), w = ke = e.sourceLocale, E = new Set(e.targetLocales), E.add(e.sourceLocale), D = e.loadLocale, {
+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 = () => w, Ne = (e) => {
-	if (e === (T ?? w)) return O.promise;
-	if (!E || !D) throw Error("Internal error");
-	if (!E.has(e)) throw Error("Invalid locale code");
+}), 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");
 	k++;
 	let t = k;
-	return T = e, O.settled && (O = new be()), C({
+	return E = e, O.settled && (O = new ye()), w({
 		status: "loading",
 		loadingLocale: e
-	}), (e === ke ? Promise.resolve({ templates: void 0 }) : D(e)).then((n) => {
-		k === t && (w = e, T = void 0, Ae = n.templates, C({
+	}), (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
 		}), O.resolve());
 	}, (n) => {
-		k === t && (C({
+		k === t && (w({
 			status: "error",
 			errorLocale: e,
 			errorMessage: n.toString()
@@ -305,7 +305,7 @@ var k = 0, je = (e) => (_e(((e, t) => De(Ae, e, t))), w = ke = e.sourceLocale, E
 	if (typeof navigator > "u") return !1;
 	let e = navigator.userAgentData?.platform ?? navigator.platform ?? "";
 	return /mac/i.test(e);
-}, 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 = () => b("Choose a service"), Le = () => b("Search"), Re = () => Pe() ? "Cmd+K" : "CTRL+K", ze = (e) => b(y`Type at least ${e} characters to search`), Be = () => b("Menu items"), Ve = (e) => b(y`Load ${e} more`), He = () => b("VSN"), Ue = "survicate-sdk", We = "ui-components-feedback", Ge = (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 M(e, t = 24, r) {
@@ -429,9 +429,6 @@ var F, I = class extends e {
 	static {
 		F = this;
 	}
-	static {
-		this.styles = [h];
-	}
 	static {
 		this._idCounter = 0;
 	}
@@ -522,7 +519,7 @@ var F, I = class extends e {
 	}
 };
 P([s({ attribute: !1 })], I.prototype, "tree", void 0), P([s({ type: Number })], I.prototype, "level", void 0), P([ue({
-	context: fe,
+	context: de,
 	subscribe: !0
 }), 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
@@ -531,9 +528,6 @@ var L = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this._currentActiveId = "", this.currentItem = "";
 	}
-	static {
-		this.styles = [h];
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -542,21 +536,22 @@ var L = 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>`;
 	}
 };
-P([s({ attribute: !1 })], L.prototype, "items", void 0), P([le({ context: fe }), l()], L.prototype, "_currentActiveId", void 0), P([s()], L.prototype, "currentItem", void 0), L = P([o("vsn-menu")], L);
+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 R = class extends e {
@@ -760,74 +755,35 @@ var ut = class {
 	hostDisconnected() {
 		document.removeEventListener("pointerdown", this._onPointerDown, !0);
 	}
-}, ft = 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;
-    }
-  }
-`, pt = "initials";
-function mt(e, t, n, r) {
+}, ft = "initials";
+function pt(e, t, n, r) {
 	if (!t) return;
 	let i = new URLSearchParams({
-		type: pt,
+		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 ht = {
+var mt = {
 	profile: et,
 	logout: tt
-}, gt = () => ({
-	profile: b("My profile"),
-	logout: b("Log out")
+}, ht = () => ({
+	profile: x("My profile"),
+	logout: x("Log out")
 }), z = class extends e {
-	static {
-		this.styles = [h, ft];
-	}
 	createRenderRoot() {
 		return this;
 	}
 	get _items() {
 		return [{
 			id: "profile",
-			label: gt().profile,
+			label: ht().profile,
 			url: this.myProfileUrl
 		}, {
 			id: "logout",
-			label: gt().logout,
+			label: ht().logout,
 			url: "/logout"
 		}];
 	}
@@ -844,62 +800,63 @@ var ht = {
 	}
 	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">
+          <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">
-                ${M(ht[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">
+            ${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"
@@ -930,14 +887,14 @@ var ht = {
 		}));
 	}
 	renderAvatar() {
-		let e = mt(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">
+		}}/>` : n`<span class="ga-side-navigation__user-avatar vsn-side-navigation__user-avatar--icon">
       ${M(et, 24)}
     </span>`;
 	}
@@ -945,10 +902,10 @@ var ht = {
 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
-})], z.prototype, "expanded", void 0), P([l()], z.prototype, "_avatarFailed", void 0), z = P([x(), o("vsn-footer")], z);
+})], 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 _t = class {
+var gt = class {
 	constructor(e) {
 		this.onSwitcherKeydown = (e) => {
 			if (!e.defaultPrevented) {
@@ -970,7 +927,7 @@ var _t = class {
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, vt = ".ga-side-navigation__switcher:focus{outline-offset:2px;outline:2px solid #3b82f6}", B = class extends e {
+}, B = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this.loading = !1, this.maxHeight = 0, this._handleKeydown = (e) => {
 			if (e.defaultPrevented) return;
@@ -1020,22 +977,22 @@ var _t = 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`
         <div class="ga-side-navigation__switcher-dropdown vsn-switcher-dropdown--loading"
              role="status"
              aria-busy="true"
-             aria-label=${b("Loading modules")}>
+             aria-label=${x("Loading modules")}>
           <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"
            style=${`max-height: ${Math.max(0, this.maxHeight)}px`}
            aria-label=${Ie()}
@@ -1053,59 +1010,10 @@ var _t = class {
     `;
 	}
 };
-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([x(), o("vsn-switcher-menu")], B);
+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 yt = 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);
-  }
-`, V = 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", {
@@ -1125,9 +1033,6 @@ var yt = t`
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, yt];
-	}
 	focus() {
 		let e = this.querySelector("input");
 		e?.focus(), e?.select();
@@ -1153,7 +1058,7 @@ var yt = t`
         <button
           type="button"
           class="vsn-search__trigger"
-          aria-label=${b("Search")}
+          aria-label=${x("Search")}
           ?disabled=${!this._canSearch}
           @click=${this._emitSearch}>
           ${M(at, 24)}
@@ -1178,11 +1083,11 @@ var yt = t`
     `;
 	}
 	_spinner() {
-		return n`<span class="vsn-spinner" role="status" aria-label=${b("Searching")}></span>`;
+		return n`<span class="vsn-spinner" role="status" aria-label=${x("Searching")}></span>`;
 	}
 	_clearButton() {
 		return n`
-      <button class="vsn-search__clear" aria-label=${b("Clear search")}
+      <button class="vsn-search__clear" aria-label=${x("Clear search")}
               @click=${this._emitSearchCleared}>
         ${M(ot, 16)}
       </button>
@@ -1192,18 +1097,15 @@ var yt = t`
 		return n`<kbd class="ga-side-navigation__search-shortcut">${this.shortcut}</kbd>`;
 	}
 };
-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([x(), o("vsn-search")], V);
+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 H = class extends e {
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, a(vt)];
-	}
 	constructor() {
-		super(), this.modules = [], this.modulesLoading = !1, this.hasMenu = !1, this.moduleSwitcherMaxHeight = 0, this.searchValue = "", this.searchLoading = !1, this.expanded = !1, this._keyboard = new _t(this), new dt(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);
 		});
 	}
@@ -1306,79 +1208,10 @@ var H = class extends e {
 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
-})], H.prototype, "expanded", void 0), H = P([x(), o("vsn-header")], H);
+})], 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 bt = 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;
-  }
-`, xt = 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.defaultPrevented || A(e) || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
@@ -1394,24 +1227,21 @@ var bt = t`
 	hostConnected() {}
 }, U = class extends e {
 	constructor(...e) {
-		super(...e), this.loadingMore = !1, this._keyboard = new xt(this);
+		super(...e), this.loadingMore = !1, this._keyboard = new _t(this);
 	}
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, bt];
-	}
 	render() {
 		return this.errorMessage ? this._errorState(this.errorMessage) : this.results === void 0 ? n`${r}` : this.results.length === 0 ? this._emptyState() : this._resultsList(this.results);
 	}
 	_emptyState() {
 		return n`
       <div class="vsn-search-results__empty" role="status" aria-live="polite">
-        <div class="vsn-search-results__empty-title">${b("No results found")}</div>
-        <div class="vsn-search-results__empty-message">${b("We couldn't find any matches.")}</div>
-        <div class="vsn-search-results__empty-hint">${b("Try different keywords or check spelling.")}</div>
-        <div class="vsn-search-results__empty-support">${b("Need help? Contact support.")}</div>
+        <div class="vsn-search-results__empty-title">${x("No results found")}</div>
+        <div class="vsn-search-results__empty-message">${x("We couldn't find any matches.")}</div>
+        <div class="vsn-search-results__empty-hint">${x("Try different keywords or check spelling.")}</div>
+        <div class="vsn-search-results__empty-support">${x("Need help? Contact support.")}</div>
       </div>
     `;
 	}
@@ -1425,9 +1255,10 @@ var bt = 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">
-          ${b(t === 1 ? y`${t} result` : y`${t} results`)}
+          ${x(t === 1 ? b`${t} result` : b`${t} results`)}
         </div>
         ${e.map((e) => this._resultRow(e))}
         ${u(this.nextCursor, () => n`
@@ -1471,44 +1302,26 @@ var bt = t`
 		}));
 	}
 };
-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([x(), o("vsn-search-results")], U);
+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 St = 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;
-  }
-`, Ct = [
+//#region src/components/vsn-side-bar/vsn-template/vsn-template.ts
+var vt = [
 	160,
 	96,
 	144,
 	192,
 	160
-], wt = class extends e {
+], yt = class extends e {
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, St];
-	}
 	render() {
 		return n`
       <div class="ga-side-navigation__body h-full"
-        role="status"
-        aria-busy="true"
-        aria-label=${b("Loading results")}>
-        ${Ct.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>
@@ -1517,92 +1330,29 @@ var St = t`
     `;
 	}
 };
-wt = P([x(), o("vsn-template")], wt);
+yt = P([S(), o("vsn-template")], yt);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-error-state/vsn-error-state.css.ts
-var Tt = 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);
-  }
-`, Et = 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, Tt];
-	}
 	render() {
 		return n`
       <div class="vsn-error-state" role="alert" aria-live="assertive">
         <div class="vsn-error-state__icon">${M(st, 24)}</div>
-        <div class="vsn-error-state__title">${b("Loading error")}</div>
-        <div class="vsn-error-state__message">${b("We're unable to load the menu.")}</div>
-        <div class="vsn-error-state__hint">${b("Please check your internet connection and try again.")}</div>
-        <div class="vsn-error-state__support">${b("If the issue persists, reload the page or contact support.")}</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>
+        <div class="vsn-error-state__support">${x("If the issue persists, reload the page or contact support.")}</div>
       </div>
     `;
 	}
 };
-Et = P([x(), o("vsn-error-state")], Et);
+bt = P([S(), o("vsn-error-state")], bt);
 //#endregion
-//#region src/components/vsn-side-bar/vsn-search-scopes/vsn-search-scopes.css.ts
-var Dt = 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;
-    }
-  }
-`, W, G = class extends e {
+//#region src/components/vsn-side-bar/vsn-search-scopes/vsn-search-scopes.ts
+var W, G = class extends e {
 	static {
 		W = this;
 	}
@@ -1612,15 +1362,12 @@ var Dt = t`
 	createRenderRoot() {
 		return this;
 	}
-	static {
-		this.styles = [h, Dt];
-	}
 	static {
 		this._counter = 0;
 	}
 	render() {
 		return this.scopes.length <= 1 ? n`` : n`
-      <div class="ga-radio-group" role="radiogroup" aria-label=${b("Search scope")}>
+      <div class="ga-radio-group" role="radiogroup" aria-label=${x("Search scope")}>
         ${this.scopes.map((e) => this._renderScope(e))}
       </div>
     `;
@@ -1649,25 +1396,25 @@ var Dt = t`
 		}));
 	}
 };
-P([s({ attribute: !1 })], G.prototype, "scopes", void 0), P([s()], G.prototype, "selectedScopeId", void 0), G = W = P([x(), o("vsn-search-scopes")], G);
+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 Ot = "en", kt = [
+var xt = "en", St = [
 	"da",
 	"fi",
 	"nl",
 	"no",
 	"sv"
-], At = /* @__PURE__ */ p({ templates: () => jt }), jt = {
+], Ct = /* @__PURE__ */ p({ templates: () => wt }), wt = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Har du brug for hjælp? Kontakt support.",
-	s1228605ee65ddefa: y`${0} resultat`,
-	s2bb33291ef8ae3d4: y`Indtast mindst ${0} tegn for at søge`,
+	s1228605ee65ddefa: b`${0} resultat`,
+	s2bb33291ef8ae3d4: b`Indtast mindst ${0} tegn for at søge`,
 	s2be8f715fbd00dcb: "Vi fandt ingen matchende resultater.",
 	s301876182accccad: " › ",
 	s3112f1ca236c8a61: "Indlæsningsfejl",
 	s352719d86112de9a: "Hjælp",
-	s387a4a41718122cb: y`${0} resultater`,
+	s387a4a41718122cb: b`${0} resultater`,
 	s3fb7db4771812f0c: "Hvis problemet fortsætter, genindlæs siden eller kontakt support.",
 	s4b0c6b66b4efd7d8: "Vælg en tjeneste",
 	s5be3c6d61cd9182f: "Notifikationer",
@@ -1688,16 +1435,16 @@ var Ot = "en", kt = [
 	sfbf31f663cef6cc2: "Prøv andre søgeord eller tjek stavningen.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Mt = /* @__PURE__ */ p({ templates: () => Nt }), Nt = {
+}, Tt = /* @__PURE__ */ p({ templates: () => Et }), Et = {
 	s09a45db408570a7a: "Oma profiili",
 	s119f9875b7d4cdfc: "Tarvitsetko apua? Ota yhteyttä tukeen.",
-	s1228605ee65ddefa: y`${0} tulos`,
-	s2bb33291ef8ae3d4: y`Kirjoita vähintään ${0} merkkiä hakua varten`,
+	s1228605ee65ddefa: b`${0} tulos`,
+	s2bb33291ef8ae3d4: b`Kirjoita vähintään ${0} merkkiä hakua varten`,
 	s2be8f715fbd00dcb: "Emme löytäneet osumia.",
 	s301876182accccad: " › ",
 	s3112f1ca236c8a61: "Latausvirhe",
 	s352719d86112de9a: "Ohje",
-	s387a4a41718122cb: y`${0} tulosta`,
+	s387a4a41718122cb: b`${0} tulosta`,
 	s3fb7db4771812f0c: "Jos ongelma jatkuu, lataa sivu uudelleen tai ota yhteyttä tukeen.",
 	s4b0c6b66b4efd7d8: "Valitse palvelu",
 	s5be3c6d61cd9182f: "Ilmoitukset",
@@ -1718,16 +1465,16 @@ var Ot = "en", kt = [
 	sfbf31f663cef6cc2: "Kokeile eri hakusanoja tai tarkista kirjoitusasu.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Pt = /* @__PURE__ */ p({ templates: () => Ft }), Ft = {
+}, Dt = /* @__PURE__ */ p({ templates: () => Ot }), Ot = {
 	s09a45db408570a7a: "Mijn profiel",
 	s119f9875b7d4cdfc: "Hulp nodig? Neem contact op met ondersteuning.",
-	s1228605ee65ddefa: y`${0} resultaat`,
-	s2bb33291ef8ae3d4: y`Typ minimaal ${0} tekens om te zoeken`,
+	s1228605ee65ddefa: b`${0} resultaat`,
+	s2bb33291ef8ae3d4: b`Typ minimaal ${0} tekens om te zoeken`,
 	s2be8f715fbd00dcb: "We konden geen overeenkomsten vinden.",
 	s301876182accccad: " › ",
 	s3112f1ca236c8a61: "Laadingsfout",
 	s352719d86112de9a: "Hulp",
-	s387a4a41718122cb: y`${0} resultaten`,
+	s387a4a41718122cb: b`${0} resultaten`,
 	s3fb7db4771812f0c: "Als het probleem aanhoudt, laad de pagina opnieuw of neem contact op met ondersteuning.",
 	s4b0c6b66b4efd7d8: "Kies een service",
 	s5be3c6d61cd9182f: "Meldingen",
@@ -1748,16 +1495,16 @@ var Ot = "en", kt = [
 	sfbf31f663cef6cc2: "Probeer andere zoekwoorden of controleer de spelling.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, It = /* @__PURE__ */ p({ templates: () => Lt }), Lt = {
+}, kt = /* @__PURE__ */ p({ templates: () => At }), At = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Trenger du hjelp? Kontakt støtte.",
-	s1228605ee65ddefa: y`${0} resultat`,
-	s2bb33291ef8ae3d4: y`Skriv inn minst ${0} tegn for å søke`,
+	s1228605ee65ddefa: b`${0} resultat`,
+	s2bb33291ef8ae3d4: b`Skriv inn minst ${0} tegn for å søke`,
 	s2be8f715fbd00dcb: "Vi fant ingen treff.",
 	s301876182accccad: " › ",
 	s3112f1ca236c8a61: "Lastingsfeil",
 	s352719d86112de9a: "Hjelp",
-	s387a4a41718122cb: y`${0} resultater`,
+	s387a4a41718122cb: b`${0} resultater`,
 	s3fb7db4771812f0c: "Hvis problemet vedvarer, last inn siden på nytt eller kontakt støtte.",
 	s4b0c6b66b4efd7d8: "Velg en tjeneste",
 	s5be3c6d61cd9182f: "Varsler",
@@ -1778,16 +1525,16 @@ var Ot = "en", kt = [
 	sfbf31f663cef6cc2: "Prøv andre søkeord eller sjekk stavemåten.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Rt = /* @__PURE__ */ p({ templates: () => zt }), zt = {
+}, jt = /* @__PURE__ */ p({ templates: () => Mt }), Mt = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Behöver du hjälp? Kontakta support.",
-	s1228605ee65ddefa: y`${0} resultat`,
-	s2bb33291ef8ae3d4: y`Skriv minst ${0} tecken för att söka`,
+	s1228605ee65ddefa: b`${0} resultat`,
+	s2bb33291ef8ae3d4: b`Skriv minst ${0} tecken för att söka`,
 	s2be8f715fbd00dcb: "Vi hittade inga matchningar.",
 	s301876182accccad: " › ",
 	s3112f1ca236c8a61: "Laddningsfel",
 	s352719d86112de9a: "Hjälp",
-	s387a4a41718122cb: y`${0} resultat`,
+	s387a4a41718122cb: b`${0} resultat`,
 	s3fb7db4771812f0c: "Om problemet kvarstår, ladda om sidan eller kontakta support.",
 	s4b0c6b66b4efd7d8: "Välj en tjänst",
 	s5be3c6d61cd9182f: "Aviseringar",
@@ -1808,17 +1555,53 @@ var Ot = "en", kt = [
 	sfbf31f663cef6cc2: "Prova andra sökord eller kontrollera stavningen.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Bt = {
-	da: At,
-	fi: Mt,
-	nl: Pt,
-	no: It,
-	sv: Rt
-}, { getLocale: Vt, setLocale: Ht } = je({
-	sourceLocale: Ot,
-	targetLocales: kt,
-	loadLocale: (e) => Bt[e] ? Promise.resolve(Bt[e]) : Promise.reject(/* @__PURE__ */ Error(`Unknown locale: ${e}`))
-}), Ut = 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;
@@ -1832,7 +1615,200 @@ var Ot = "en", kt = [
       z-index: 10;
     }
   }
-`, Wt = t`
+`, 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-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;
+    }
+  }
+`, 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;
@@ -1852,7 +1828,7 @@ var Ot = "en", kt = [
   @keyframes vsn-spin {
     to { transform: rotate(360deg); }
   }
-`, Gt = class {
+`, Wt = class {
 	constructor(e, t, n) {
 		this._onHostClick = (e) => {
 			let t = this._host.renderRoot.querySelector(this._clickedSelector);
@@ -1865,14 +1841,14 @@ var Ot = "en", kt = [
 	hostDisconnected() {
 		this._host.removeEventListener("click", this._onHostClick);
 	}
-}, Kt = "button:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])", qt = class {
+}, Gt = "button:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])", Kt = class {
 	constructor(e) {
 		this.onKeydown = (e) => {
 			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(Kt) && n.push(e), n.push(...Array.from(e.querySelectorAll(Kt)));
+			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;
@@ -1884,18 +1860,24 @@ var Ot = "en", kt = [
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, K = 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,
+			Ht,
 			Ut,
-			ft,
-			yt,
-			bt,
-			Dt,
-			St,
-			Tt,
-			Wt,
 			t`
       :host {
         position: absolute;
@@ -1910,7 +1892,7 @@ var Ot = "en", kt = [
 		];
 	}
 	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._moduleSwitcherMaxHeight = 0, this._navFooterKeyboard = new qt(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
@@ -1927,7 +1909,7 @@ var Ot = "en", kt = [
 			}));
 		}, this._onScopeChanged = (e) => {
 			this._activeScopeId = e.detail.scopeId, this._runSearch(this._searchQuery, this._activeScopeId);
-		}, new Gt(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) => {
@@ -1938,7 +1920,7 @@ var Ot = "en", kt = [
 		this._moduleSwitcherMaxHeight = Math.max(0, e[0].contentRect.height - 134);
 	}
 	willUpdate(e) {
-		e.has("lang") && Ht(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();
@@ -1980,7 +1962,7 @@ var Ot = "en", kt = [
 			this._searchResults = t.results, this._searchNextCursor = t.nextCursor, this._searchLoading = !1, this._searchAbort = void 0;
 		} catch (e) {
 			if (this._searchAbort !== r) return;
-			e instanceof de ? (this._searchError = e.message, this._searchResults = void 0) : console.error("Search function rejected with non-SearchError:", e), this._searchLoading = !1, this._searchAbort = void 0;
+			e instanceof v ? (this._searchError = e.message, this._searchResults = void 0) : console.error("Search function rejected with non-SearchError:", e), this._searchLoading = !1, this._searchAbort = void 0;
 		}
 	}
 	async _loadMore() {
@@ -2000,7 +1982,7 @@ var Ot = "en", kt = [
 			this._searchResults = [...this._searchResults ?? [], ...n.results], this._searchNextCursor = n.nextCursor, this._searchLoadingMore = !1, this._searchAbort = void 0;
 		} catch (e) {
 			if (this._searchAbort !== t) return;
-			e instanceof de ? (this._searchError = e.message, this._searchResults = void 0, this._searchNextCursor = void 0) : console.error("Load-more function rejected with non-SearchError:", e), this._searchLoadingMore = !1, this._searchAbort = void 0;
+			e instanceof v ? (this._searchError = e.message, this._searchResults = void 0, this._searchNextCursor = void 0) : console.error("Load-more function rejected with non-SearchError:", e), this._searchLoadingMore = !1, this._searchAbort = void 0;
 		}
 	}
 	_filterTree(e) {
@@ -2110,18 +2092,15 @@ var Ot = "en", kt = [
     `;
 	}
 };
-P([s({ attribute: !1 })], K.prototype, "modules", void 0), P([s()], K.prototype, "activeModuleId", void 0), P([s()], K.prototype, "activeModuleLabel", void 0), P([s({ type: Boolean })], K.prototype, "modulesLoading", void 0), P([s()], K.prototype, "lang", void 0), P([s({ attribute: !1 })], K.prototype, "auth", void 0), P([s({ type: Boolean })], K.prototype, "error", void 0), P([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
-})], K.prototype, "open", void 0), P([s({ attribute: !1 })], K.prototype, "menu", void 0), P([l()], K.prototype, "_searchQuery", void 0), P([l()], K.prototype, "_searchResults", void 0), P([l()], K.prototype, "_searchLoading", void 0), P([l()], K.prototype, "_activeScopeId", void 0), P([l()], K.prototype, "_searchError", void 0), P([l()], K.prototype, "_searchNextCursor", void 0), P([l()], K.prototype, "_searchLoadingMore", void 0), P([l()], K.prototype, "_moduleSwitcherMaxHeight", void 0), K = P([o("vsn-side-bar")], K);
+})], 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 q, J = class extends e {
+var J, Y = class extends e {
 	static {
-		q = this;
-	}
-	static {
-		this.styles = h;
+		J = this;
 	}
 	static {
 		this._idCounter = 0;
@@ -2153,7 +2132,7 @@ var q, J = class extends e {
 				bubbles: !0,
 				composed: !0
 			}));
-		}, this._tooltipId = `vsn-menu-item-tooltip-${q._idCounter++}`;
+		}, this._tooltipId = `vsn-menu-item-tooltip-${J._idCounter++}`;
 	}
 	createRenderRoot() {
 		return this;
@@ -2203,30 +2182,30 @@ var q, J = class extends e {
 		if (this.tree && _(this.tree)) return this.tree.items.length > 0;
 	}
 };
-P([s({ attribute: !1 })], J.prototype, "tree", void 0), P([s({ type: Number })], J.prototype, "level", void 0), P([s({ type: Array })], J.prototype, "ancestorPath", void 0), P([l()], J.prototype, "_isExpanded", void 0), P([l()], J.prototype, "_showTooltip", void 0), P([l()], J.prototype, "_tooltipPos", void 0), P([c(".ga-side-navigation__item-label")], J.prototype, "_labelEl", void 0), J = q = P([o("vsn-breadcrumb-menu-item")], J);
+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 Y = 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>
     `;
 	}
 };
-P([s({ attribute: !1 })], Y.prototype, "treeList", void 0), Y = P([o("vsn-breadcrumb-menu")], Y);
+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 X = class extends e {
@@ -2248,14 +2227,20 @@ var X = 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;
@@ -2265,34 +2250,42 @@ var X = 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();
@@ -2399,10 +2392,11 @@ var X = 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)}
@@ -2428,7 +2422,10 @@ var X = 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>
@@ -2448,7 +2445,10 @@ var X = 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>
@@ -2458,7 +2458,10 @@ var X = 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"
@@ -2536,12 +2539,13 @@ var X = class extends e {
 	}
 	render() {
 		return n`
-      <nav aria-label=${b("Breadcrumb")}>
+      <nav aria-label=${x("Breadcrumb")}>
         <div class="ga-breadcrumb">
           ${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}
@@ -2549,13 +2553,10 @@ var X = class extends e {
     `;
 	}
 };
-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([x(), o("vsn-breadcrumbs")], X);
+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 Jt = class extends e {
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2568,13 +2569,14 @@ var Jt = class extends e {
 	}
 	render() {
 		return n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${b("Open AI assistant")} @click=${this._handleClick}>
+      <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>
     `;
 	}
 };
-Jt = P([x(), o("vsn-ai-assistant")], Jt);
+Jt = P([S(), o("vsn-ai-assistant")], Jt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-feedback.ts
 var Z = class extends e {
@@ -2583,9 +2585,6 @@ var Z = class extends e {
 			this._compact = this._mqMobile.matches;
 		}, this._traitSet = !1;
 	}
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2619,23 +2618,22 @@ var Z = class extends e {
 	}
 	render() {
 		return this._compact ? n`
-        <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${b("Send feedback")} @click=${this._handleClick}>
+        <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=${b("Send feedback")} @click=${this._handleClick}>
-        ${b("Feedback")}
+      <button type="button" class="ga-button ga-button--secondary" aria-label=${x("Send feedback")}
+              @click=${this._handleClick}>
+        ${x("Feedback")}
       </button>
     `;
 	}
 };
-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([x(), o("vsn-feedback")], Z);
+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 Yt = class extends e {
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2643,7 +2641,7 @@ var Yt = class extends e {
 		e.preventDefault(), this.landingPageUrl && this.dispatchEvent(new CustomEvent("vsn-navigate", {
 			detail: {
 				id: "home",
-				label: b("Home"),
+				label: x("Home"),
 				url: this.landingPageUrl
 			},
 			bubbles: !0,
@@ -2652,19 +2650,17 @@ var Yt = class extends e {
 	}
 	render() {
 		return this.landingPageUrl ? n`
-      <a href=${this.landingPageUrl} class="ga-button ga-button--ghost ga-button--icon-only" aria-label=${b("Home")} @click=${this._handleClick}>
+      <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;
 	}
 };
-P([s({ attribute: "landing-page-url" })], Yt.prototype, "landingPageUrl", void 0), Yt = P([x(), o("vsn-home")], Yt);
+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 Xt = class extends e {
-	static {
-		this.styles = [h];
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2686,7 +2682,7 @@ var Xt = class extends e {
 	}
 	render() {
 		return n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${b("Open menu")}
+      <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}
@@ -2701,16 +2697,13 @@ var Xt = class extends e {
     `;
 	}
 };
-P([c("div[role=\"tooltip\"]", !0)], Xt.prototype, "_tooltipElement", void 0), Xt = P([x(), o("vsn-menu-toggle")], Xt);
+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 Zt = class extends e {
 	constructor(...e) {
 		super(...e), this.notificationActive = !1;
 	}
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2724,7 +2717,8 @@ var Zt = class extends e {
 	render() {
 		let e = this.notificationActive ? Xe : Ye;
 		return n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${b("Notifications")} @click=${this._handleClick}>
+      <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>
     `;
@@ -2734,7 +2728,7 @@ P([s({
 	type: Boolean,
 	attribute: "notification-active",
 	reflect: !0
-})], Zt.prototype, "notificationActive", void 0), Zt = P([x(), o("vsn-notifications")], Zt);
+})], Zt.prototype, "notificationActive", void 0), Zt = P([S(), o("vsn-notifications")], Zt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-help.ts
 function Qt(e) {
@@ -2746,9 +2740,6 @@ function Qt(e) {
 	}
 }
 var $t = class extends e {
-	static {
-		this.styles = h;
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -2761,17 +2752,19 @@ var $t = class extends e {
 	}
 	render() {
 		return this.helpUrl && Qt(this.helpUrl) ? n`
-        <a href=${this.helpUrl} rel="noopener noreferrer" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${b("Help")}>
+        <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">${M($e)}</span>
         </a>
       ` : n`
-      <button type="button" class="ga-button ga-button--secondary ga-button--icon-only" aria-label=${b("Help")} @click=${this._handleClick}>
+      <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>
     `;
 	}
 };
-P([s({ attribute: "help-url" })], $t.prototype, "helpUrl", void 0), $t = P([x(), o("vsn-help")], $t);
+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 {
@@ -2779,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") && Ht(this.lang).catch(console.error);
+		e.has("lang") && Ft(this.lang).catch(console.error);
 	}
 	focusMenuToggle() {
 		this.renderRoot.querySelector("vsn-menu-toggle")?.focus();
@@ -2923,7 +2916,10 @@ var $ = class extends e {
 		});
 	}
 	static {
-		this.styles = [h, t`
+		this.styles = [
+			h,
+			K,
+			t`
       :host {
         display: flex;
         flex-direction: column;
@@ -2942,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();
@@ -3030,7 +3022,7 @@ var $ = class extends e {
         >
           <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>
@@ -3052,4 +3044,4 @@ P([s()], $.prototype, "lang", void 0), P([s({ attribute: !1 })], $.prototype, "t
 	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 { de as SearchError, $ as VSNNavigation, g as isTreeLeaf, _ as isTreeParent };
+export { v as SearchError, $ as VSNNavigation, g as isTreeLeaf, _ as isTreeParent };