@visma-swno/vsn-navigation 1.2.0-beta.3 → 1.2.0-beta.5

package/dist/assets/vsn-navigation.js

@@ -305,10 +305,10 @@ var A = 0, Ae = (e) => (ge(((e, t) => Ee(ke, e, t))), T = Oe = e.sourceLocale, D
 	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`;
+}, Pe = (e) => !e.shiftKey && !e.altKey && (Ne() ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey), j = (e) => e.shiftKey || e.altKey || e.ctrlKey || e.metaKey, M = (e) => !j(e), 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`;
 //#endregion
 //#region src/shared/icons.ts
-function j(e, t = 24, r) {
+function N(e, t = 24, r) {
 	return n`<svg
       xmlns="http://www.w3.org/2000/svg"
       width="${t}"
@@ -386,7 +386,7 @@ var tt = i`
   <path d="m7 9 5-5 5 5"/>
 `, nt = i`
   <path d="m18 15-6-6-6 6"/>
-`, M = i`
+`, P = i`
   <path d="m6 9 6 6 6-6"/>
 `, rt = i`
   <circle cx="11" cy="11" r="8"/>
@@ -417,7 +417,7 @@ var ot = i`
 `;
 //#endregion
 //#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
-function N(e, t, n, r) {
+function F(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,9 +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 {
+var I, L = class extends e {
 	static {
-		P = this;
+		I = this;
 	}
 	static {
 		this.styles = [h];
@@ -452,7 +452,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-${I._idCounter++}`;
 	}
 	willUpdate(e) {
 		let t = this.tree;
@@ -477,7 +477,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 ? N(P, 16) : N(ot, 16) : ""}
       </span>
       <div class="ga-side-navigation__item-content">
         <div class="ga-side-navigation__item-label">${this.tree?.label}</div>
@@ -511,7 +511,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 || j(e)) return;
 		e.preventDefault(), e.stopPropagation();
 		let n = new CustomEvent("vsn-menu-item-changed", {
 			bubbles: !0,
@@ -521,13 +521,13 @@ 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({
+F([s({ attribute: !1 })], L.prototype, "tree", void 0), F([s({ type: Number })], L.prototype, "level", void 0), F([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()], L.prototype, "_currentActiveId", void 0), F([l()], L.prototype, "_isActive", void 0), F([l()], L.prototype, "_isExpanded", void 0), F([l()], L.prototype, "_showTooltip", void 0), F([l()], L.prototype, "_tooltipPos", void 0), F([c(".ga-side-navigation__item-label")], L.prototype, "_labelEl", void 0), L = I = F([o("vsn-menu-item")], L);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu.ts
-var I = class extends e {
+var R = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this._currentActiveId = "", this.currentItem = "";
 	}
@@ -556,110 +556,125 @@ var I = class extends e {
 		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);
+F([s({ attribute: !1 })], R.prototype, "items", void 0), F([le({ context: de }), l()], R.prototype, "_currentActiveId", void 0), F([s()], R.prototype, "currentItem", void 0), R = F([o("vsn-menu")], R);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu-button.ts
-var L = class extends e {
+var z = 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 || M(e) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), this.click());
+		}, this._onClick = (e) => {
+			e.defaultPrevented || e.button !== 0 || j(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. */
+    /* 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));
-        cursor: pointer;
-      }
+    :host {
+      display: block;
+      cursor: pointer;
+      outline-style: none;
+    }
 
-      :host(:hover) {
-        background-color: var(--ga-color-surface-action-hover-2);
-      }
+    :host(:hover) {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
 
-      :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(: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);
+    }
 
-      .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));
-      }
+    .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));
+    }
 
-      .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;
-      }
+    .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;
+    }
 
-      .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);
-      }
+    .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);
-      }
-    `];
+    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);
+F([s()], z.prototype, "label", void 0), F([s({
+	type: Boolean,
+	attribute: "close-on-click"
+})], z.prototype, "closeOnClick", void 0), z = F([o("vsn-menu-button")], z);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-menu/vsn-menu-separator.ts
 var st = class extends e {
@@ -685,29 +700,30 @@ var st = class extends e {
 		return n`<div class="line"></div>`;
 	}
 };
-st = N([o("vsn-menu-separator")], st);
+st = F([o("vsn-menu-separator")], st);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-footer/vsn-footer.keyboard.ts
 var ct = 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 || (M(e) && (e.key === "Enter" || e.key === " ") ? (e.preventDefault(), this.host.expanded = !this.host.expanded) : M(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 (M(e) && e.key === "Escape") {
 				e.preventDefault(), this._closeAndRefocus();
 				return;
 			}
-			if (e.key === "Enter" || e.key === " ") {
+			if (M(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 (M(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 (j(e) || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			e.preventDefault();
 			let t = this.host.querySelector(".ga-side-navigation__footer-dropdown");
 			if (!t) return;
@@ -797,7 +813,7 @@ var pt = {
 }, mt = () => ({
 	profile: x("My profile"),
 	logout: x("Log out")
-}), R = class extends e {
+}), B = class extends e {
 	static {
 		this.styles = [h, ut];
 	}
@@ -853,7 +869,7 @@ var pt = {
             </div>
 
             <span class="ga-side-navigation__user-action">
-              ${this.expanded ? j(nt, 16) : j(tt, 16)}
+              ${this.expanded ? N(nt, 16) : N(tt, 16)}
             </span>
 
           </div>
@@ -867,14 +883,14 @@ var pt = {
           ${this._items.map((e) => {
 			let t = n`
               <span class="ga-side-navigation__footer-dropdown-icon">
-                ${j(pt[e.id], 16)}
+                ${N(pt[e.id], 16)}
               </span>
               <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)}
+                  ${N(et, 16)}
                 </span>
               ` : r}
             `;
@@ -922,52 +938,55 @@ var pt = {
         @error=${() => {
 			this._avatarFailed = !0;
 		}} />` : n`<span class="ga-side-navigation__user-avatar vsn-side-navigation__user-avatar--icon">
-      ${j(Qe, 24)}
+      ${N(Qe, 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({
+F([s({ attribute: !1 })], B.prototype, "user", void 0), F([s()], B.prototype, "profilePictureBaseUrl", void 0), F([s()], B.prototype, "myProfileUrl", void 0), F([s({
 	type: Boolean,
 	reflect: !0
-})], R.prototype, "expanded", void 0), N([l()], R.prototype, "_avatarFailed", void 0), R = N([S(), o("vsn-footer")], R);
+})], B.prototype, "expanded", void 0), F([l()], B.prototype, "_avatarFailed", void 0), B = F([S(), o("vsn-footer")], B);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-header/vsn-header.keyboard.ts
 var ht = 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 (M(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 (M(e) && e.key === "ArrowDown" && !this.host.expanded) {
+					if (!this.host.hasAvailableItems) return;
+					e.preventDefault(), this.host.expanded = !0;
+					return;
+				}
+				if (M(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 {
+}, gt = ".ga-side-navigation__switcher:focus{outline-offset:2px;outline:2px solid #3b82f6}", V = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this.loading = !1, this._handleKeydown = (e) => {
-			if (e.key === "Escape") {
+			if (e.defaultPrevented) return;
+			if (M(e) && e.key === "Escape") {
 				e.preventDefault(), this.dispatchEvent(new CustomEvent("close-request", {
 					bubbles: !0,
 					composed: !0
 				}));
 				return;
 			}
-			if (e.key === "Enter" || e.key === " ") {
+			if (M(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 (M(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,
@@ -975,7 +994,7 @@ var ht = class {
 				}));
 				return;
 			}
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			if (j(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;
@@ -1033,7 +1052,7 @@ 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);
+F([s({ attribute: !1 })], V.prototype, "items", void 0), F([s({ type: Boolean })], V.prototype, "loading", void 0), V = F([S(), o("vsn-switcher-menu")], V);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-search/vsn-search.css.ts
 var _t = t`
@@ -1085,7 +1104,7 @@ var _t = t`
   .ga-side-navigation__search input::placeholder {
     color: var(--ga-color-text-disable-selected);
   }
-`, B = class extends e {
+`, H = 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", {
@@ -1093,14 +1112,13 @@ 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 || M(e) && e.key === "Escape" && this.value.length > 0 && (e.preventDefault(), this._emitSearchCleared());
 		};
 	}
 	createRenderRoot() {
@@ -1125,7 +1143,7 @@ var _t = t`
 		}));
 	}
 	_handleEnter(e) {
-		e.key === "Enter" && this._emitSearch();
+		e.defaultPrevented || M(e) && e.key === "Enter" && this._emitSearch();
 	}
 	render() {
 		let e = this.value.length > 0 && this.value.length < 3;
@@ -1137,16 +1155,17 @@ var _t = t`
           aria-label=${x("Search")}
           ?disabled=${!this._canSearch}
           @click=${this._emitSearch}>
-          ${j(rt, 24)}
+          ${N(rt, 24)}
         </button>
         <input type="search"
-          .placeholder=${Ie()}
-          .value=${this.value}
-          @input=${this._handleInput}
-          @keydown=${this._handleEnter} />
+               .placeholder=${Ie()}
+               .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">${Re(3)}</div>`)}
     `;
 	}
 	_trailingSlot() {
@@ -1163,8 +1182,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}>
+        ${N(it, 16)}
       </button>
     `;
 	}
@@ -1172,10 +1191,10 @@ 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);
+F([s()], H.prototype, "shortcut", void 0), F([s()], H.prototype, "value", void 0), F([s({ type: Boolean })], H.prototype, "loading", void 0), H = F([S(), o("vsn-search")], H);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-header/vsn-header.ts
-var V = class extends e {
+var U = class extends e {
 	createRenderRoot() {
 		return this;
 	}
@@ -1203,7 +1222,7 @@ var V = class extends e {
             <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)}
+                ${this.expanded ? N(P, 16) : N(tt, 16)}
               </span>
             `)}
           </div>
@@ -1221,7 +1240,7 @@ var V = class extends e {
 
         ${u(this.search?.enabled, () => n`
           <vsn-search
-              .shortcut=${this.search?.shortcut ?? Le()}
+              .shortcut=${Le()}
               .value=${this.searchValue}
               .loading=${this.searchLoading}>
           </vsn-search>`)}
@@ -1284,10 +1303,10 @@ 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({
+F([s({ attribute: !1 })], U.prototype, "modules", void 0), F([s()], U.prototype, "activeModuleId", void 0), F([s()], U.prototype, "activeModuleLabel", void 0), F([s({ type: Boolean })], U.prototype, "modulesLoading", void 0), F([s({ type: Boolean })], U.prototype, "hasMenu", void 0), F([s({ attribute: !1 })], U.prototype, "search", void 0), F([s()], U.prototype, "searchValue", void 0), F([s({ type: Boolean })], U.prototype, "searchLoading", void 0), F([s({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "expanded", void 0), V = N([S(), o("vsn-header")], V);
+})], U.prototype, "expanded", void 0), U = F([S(), o("vsn-header")], U);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-search-results/vsn-search-results.css.ts
 var vt = t`
@@ -1362,7 +1381,7 @@ var vt = t`
 `, yt = class {
 	constructor(e) {
 		this.onResultsKeydown = (e) => {
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			if (e.defaultPrevented || j(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;
@@ -1373,7 +1392,7 @@ var vt = t`
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, H = class extends e {
+}, W = class extends e {
 	constructor(...e) {
 		super(...e), this.loadingMore = !1, this._keyboard = new yt(this);
 	}
@@ -1452,7 +1471,7 @@ 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);
+F([s({ attribute: !1 })], W.prototype, "results", void 0), F([s()], W.prototype, "errorMessage", void 0), F([s()], W.prototype, "nextCursor", void 0), F([s({ type: Boolean })], W.prototype, "loadingMore", void 0), W = F([S(), o("vsn-search-results")], W);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-template/vsn-template.css.ts
 var bt = t`
@@ -1498,7 +1517,7 @@ var bt = t`
     `;
 	}
 };
-St = N([S(), o("vsn-template")], St);
+St = F([S(), o("vsn-template")], St);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-error-state/vsn-error-state.css.ts
 var Ct = t`
@@ -1550,7 +1569,7 @@ var Ct = t`
 	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">${N(at, 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>
@@ -1559,7 +1578,7 @@ var Ct = t`
     `;
 	}
 };
-wt = N([S(), o("vsn-error-state")], wt);
+wt = F([S(), o("vsn-error-state")], wt);
 //#endregion
 //#region src/components/vsn-side-bar/vsn-search-scopes/vsn-search-scopes.css.ts
 var Tt = t`
@@ -1583,12 +1602,12 @@ var Tt = t`
       text-overflow: ellipsis;
     }
   }
-`, U, W = class extends e {
+`, Et, G = class extends e {
 	static {
-		U = this;
+		Et = 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-${++Et._counter}`;
 	}
 	createRenderRoot() {
 		return this;
@@ -1630,16 +1649,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);
+F([s({ attribute: !1 })], G.prototype, "scopes", void 0), F([s()], G.prototype, "selectedScopeId", void 0), G = Et = F([S(), o("vsn-search-scopes")], G);
 //#endregion
 //#region src/shared/lang/locale-codes.ts
-var Et = "en", Dt = [
+var Dt = "en", Ot = [
 	"da",
 	"fi",
 	"nl",
 	"no",
 	"sv"
-], Ot = /* @__PURE__ */ p({ templates: () => kt }), kt = {
+], kt = /* @__PURE__ */ p({ templates: () => At }), At = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Har du brug for hjælp? Kontakt support.",
 	s1228605ee65ddefa: b`${0} resultat`,
@@ -1669,7 +1688,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 = {
+}, jt = /* @__PURE__ */ p({ templates: () => Mt }), Mt = {
 	s09a45db408570a7a: "Oma profiili",
 	s119f9875b7d4cdfc: "Tarvitsetko apua? Ota yhteyttä tukeen.",
 	s1228605ee65ddefa: b`${0} tulos`,
@@ -1699,7 +1718,7 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Kokeile eri hakusanoja tai tarkista kirjoitusasu.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Mt = /* @__PURE__ */ p({ templates: () => Nt }), Nt = {
+}, Nt = /* @__PURE__ */ p({ templates: () => Pt }), Pt = {
 	s09a45db408570a7a: "Mijn profiel",
 	s119f9875b7d4cdfc: "Hulp nodig? Neem contact op met ondersteuning.",
 	s1228605ee65ddefa: b`${0} resultaat`,
@@ -1729,7 +1748,7 @@ var Et = "en", Dt = [
 	sfbf31f663cef6cc2: "Probeer andere zoekwoorden of controleer de spelling.",
 	s7c510419ea376840: "VSN",
 	s38385cd359b17f7a: "Loading modules"
-}, Pt = /* @__PURE__ */ p({ templates: () => Ft }), Ft = {
+}, Ft = /* @__PURE__ */ p({ templates: () => It }), It = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Trenger du hjelp? Kontakt støtte.",
 	s1228605ee65ddefa: b`${0} resultat`,
@@ -1759,7 +1778,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 = {
+}, Lt = /* @__PURE__ */ p({ templates: () => Rt }), Rt = {
 	s09a45db408570a7a: "Min profil",
 	s119f9875b7d4cdfc: "Behöver du hjälp? Kontakta support.",
 	s1228605ee65ddefa: b`${0} resultat`,
@@ -1789,17 +1808,17 @@ 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`
+}, zt = {
+	da: kt,
+	fi: jt,
+	nl: Nt,
+	no: Ft,
+	sv: Lt
+}, { getLocale: Bt, setLocale: Vt } = Ae({
+	sourceLocale: Dt,
+	targetLocales: Ot,
+	loadLocale: (e) => zt[e] ? Promise.resolve(zt[e]) : Promise.reject(/* @__PURE__ */ Error(`Unknown locale: ${e}`))
+}), Ht = t`
   @layer components {
     .vsn-switcher-anchor {
       position: relative;
@@ -1813,7 +1832,7 @@ var Et = "en", Dt = [
       z-index: 10;
     }
   }
-`, Ht = t`
+`, Ut = t`
   .vsn-spinner {
     display: inline-block;
     flex-shrink: 0;
@@ -1833,7 +1852,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);
@@ -1846,14 +1865,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 || j(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;
@@ -1865,18 +1884,18 @@ var Et = "en", Dt = [
 		}, this.host = e, e.addController(this);
 	}
 	hostConnected() {}
-}, G = class extends e {
+}, K = class extends e {
 	static {
 		this.styles = [
 			h,
-			Vt,
+			Ht,
 			ut,
 			_t,
 			vt,
 			Tt,
 			bt,
 			Ct,
-			Ht,
+			Ut,
 			t`
       :host {
         position: absolute;
@@ -1891,7 +1910,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._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
@@ -1908,13 +1927,13 @@ 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
 		})));
 	}
 	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") && Vt(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();
@@ -1925,11 +1944,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;
@@ -2015,43 +2031,47 @@ 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}
+        @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``;
@@ -2071,27 +2091,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({
+F([s({ attribute: !1 })], K.prototype, "modules", void 0), F([s()], K.prototype, "activeModuleId", void 0), F([s()], K.prototype, "activeModuleLabel", void 0), F([s({ type: Boolean })], K.prototype, "modulesLoading", void 0), F([s()], K.prototype, "lang", void 0), F([s({ attribute: !1 })], K.prototype, "auth", void 0), F([s({ type: Boolean })], K.prototype, "error", void 0), F([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);
+})], K.prototype, "open", void 0), F([s({ attribute: !1 })], K.prototype, "menu", void 0), F([l()], K.prototype, "_searchQuery", void 0), F([l()], K.prototype, "_searchResults", void 0), F([l()], K.prototype, "_searchLoading", void 0), F([l()], K.prototype, "_activeScopeId", void 0), F([l()], K.prototype, "_searchError", void 0), F([l()], K.prototype, "_searchNextCursor", void 0), F([l()], K.prototype, "_searchLoadingMore", void 0), K = F([o("vsn-side-bar")], K);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-breadcrumb-menu-item.ts
-var K, q = class extends e {
+var q, J = class extends e {
 	static {
-		K = this;
+		q = this;
 	}
 	static {
 		this.styles = h;
@@ -2118,7 +2139,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 || j(e)) return;
 			e.preventDefault(), e.stopPropagation();
 			let t = [...this.ancestorPath, this.tree];
 			this.dispatchEvent(new CustomEvent("vsn-breadcrumb-menu-leaf-select", {
@@ -2126,7 +2147,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-${q._idCounter++}`;
 	}
 	createRenderRoot() {
 		return this;
@@ -2152,7 +2173,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 ? N(P, 16) : N(ot, 16) : ""}
       </span>
       <div class="ga-side-navigation__item-content">
         <div class="ga-side-navigation__item-label">${e}</div>
@@ -2176,10 +2197,10 @@ 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);
+F([s({ attribute: !1 })], J.prototype, "tree", void 0), F([s({ type: Number })], J.prototype, "level", void 0), F([s({ type: Array })], J.prototype, "ancestorPath", void 0), F([l()], J.prototype, "_isExpanded", void 0), F([l()], J.prototype, "_showTooltip", void 0), F([l()], J.prototype, "_tooltipPos", void 0), F([c(".ga-side-navigation__item-label")], J.prototype, "_labelEl", void 0), J = q = F([o("vsn-breadcrumb-menu-item")], J);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-breadcrumb-menu.ts
-var J = class extends e {
+var qt = class extends e {
 	static {
 		this.styles = h;
 	}
@@ -2199,7 +2220,7 @@ var J = class extends e {
     `;
 	}
 };
-N([s({ attribute: !1 })], J.prototype, "treeList", void 0), J = N([o("vsn-breadcrumb-menu")], J);
+F([s({ attribute: !1 })], qt.prototype, "treeList", void 0), qt = F([o("vsn-breadcrumb-menu")], qt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-breadcrumbs.ts
 var Y = class extends e {
@@ -2522,10 +2543,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);
+F([s({ attribute: !1 })], Y.prototype, "tree", void 0), F([s({ type: Array })], Y.prototype, "modules", void 0), F([s()], Y.prototype, "activeModuleId", void 0), F([l()], Y.prototype, "_openPopoverId", void 0), F([l()], Y.prototype, "_displayMode", void 0), F([l()], Y.prototype, "_overflowCount", void 0), F([l()], Y.prototype, "_tooltip", void 0), Y = F([S(), o("vsn-breadcrumbs")], Y);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-ai-assistant.ts
-var Kt = class extends e {
+var Jt = class extends e {
 	static {
 		this.styles = h;
 	}
@@ -2542,12 +2563,12 @@ 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>
+        <span class="ga-icon">${N(Ke)}</span>
       </button>
     `;
 	}
 };
-Kt = N([S(), o("vsn-ai-assistant")], Kt);
+Jt = F([S(), o("vsn-ai-assistant")], Jt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-feedback.ts
 var X = class extends e {
@@ -2593,7 +2614,7 @@ var X = class extends e {
 	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>
+          <span class="ga-icon">${N(Ye)}</span>
         </button>
       ` : n`
       <button type="button" class="ga-button ga-button--secondary" aria-label=${x("Send feedback")} @click=${this._handleClick}>
@@ -2602,10 +2623,10 @@ var X = class extends e {
     `;
 	}
 };
-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);
+F([l()], X.prototype, "_compact", void 0), F([s({ attribute: !1 })], X.prototype, "feedback", void 0), F([s({ attribute: !1 })], X.prototype, "auth", void 0), X = F([S(), o("vsn-feedback")], X);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-home.ts
-var Z = class extends e {
+var Yt = class extends e {
 	static {
 		this.styles = h;
 	}
@@ -2626,15 +2647,15 @@ 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>
+        <span class="ga-icon">${N(Xe)}</span>
       </a>
     ` : r;
 	}
 };
-N([s({ attribute: "landing-page-url" })], Z.prototype, "landingPageUrl", void 0), Z = N([S(), o("vsn-home")], Z);
+F([s({ attribute: "landing-page-url" })], Yt.prototype, "landingPageUrl", void 0), Yt = F([S(), o("vsn-home")], Yt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-menu-toggle.ts
-var qt = class extends e {
+var Xt = class extends e {
 	constructor(...e) {
 		super(...e), this._tooltip = null, this._onMouseEnter = (e) => {
 			let t = e.currentTarget.getBoundingClientRect();
@@ -2664,7 +2685,7 @@ var qt = class extends e {
 	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>
+        <span class="ga-icon">${N(Ge)}</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;">
@@ -2674,10 +2695,10 @@ var qt = class extends e {
     `;
 	}
 };
-N([l()], qt.prototype, "_tooltip", void 0), qt = N([S(), o("vsn-menu-toggle")], qt);
+F([l()], Xt.prototype, "_tooltip", void 0), Xt = F([S(), o("vsn-menu-toggle")], Xt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-notifications.ts
-var Jt = class extends e {
+var Z = class extends e {
 	constructor(...e) {
 		super(...e), this.notificationActive = !1;
 	}
@@ -2698,19 +2719,19 @@ var Jt = class extends e {
 		let e = this.notificationActive ? Je : qe;
 		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>
+        <span class="ga-icon">${N(e)}</span>
       </button>
     `;
 	}
 };
-N([s({
+F([s({
 	type: Boolean,
 	attribute: "notification-active",
 	reflect: !0
-})], Jt.prototype, "notificationActive", void 0), Jt = N([S(), o("vsn-notifications")], Jt);
+})], Z.prototype, "notificationActive", void 0), Z = F([S(), o("vsn-notifications")], Z);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-help.ts
-function Yt(e) {
+function Zt(e) {
 	try {
 		let t = new URL(e);
 		return t.protocol === "https:" || t.protocol === "http:";
@@ -2718,7 +2739,7 @@ function Yt(e) {
 		return !1;
 	}
 }
-var Xt = class extends e {
+var Qt = class extends e {
 	static {
 		this.styles = h;
 	}
@@ -2733,18 +2754,18 @@ var Xt = class extends e {
 		}));
 	}
 	render() {
-		return this.helpUrl && Yt(this.helpUrl) ? n`
+		return this.helpUrl && Zt(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>
+          <span class="ga-icon">${N(Ze)}</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>
+        <span class="ga-icon">${N(Ze)}</span>
       </button>
     `;
 	}
 };
-N([s({ attribute: "help-url" })], Xt.prototype, "helpUrl", void 0), Xt = N([S(), o("vsn-help")], Xt);
+F([s({ attribute: "help-url" })], Qt.prototype, "helpUrl", void 0), Qt = F([S(), o("vsn-help")], Qt);
 //#endregion
 //#region src/components/vsn-top-bar/vsn-top-bar.ts
 var Q = class extends e {
@@ -2752,7 +2773,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") && Vt(this.lang).catch(console.error);
 	}
 	focusMenuToggle() {
 		this.renderRoot.querySelector("vsn-menu-toggle")?.focus();
@@ -2854,26 +2875,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({
+F([s({ attribute: !1 })], Q.prototype, "tree", void 0), F([s({ type: Array })], Q.prototype, "modules", void 0), F([s()], Q.prototype, "activeModuleId", void 0), F([s({ attribute: "landing-page-url" })], Q.prototype, "landingPageUrl", void 0), F([s({ attribute: !1 })], Q.prototype, "feedback", void 0), F([s({ attribute: !1 })], Q.prototype, "auth", void 0), F([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), F([s({ attribute: "help-url" })], Q.prototype, "helpUrl", void 0), F([s({
 	type: Boolean,
 	attribute: "show-notification"
-})], Q.prototype, "showNotification", void 0), N([s({
+})], Q.prototype, "showNotification", void 0), F([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), F([s()], Q.prototype, "lang", void 0), Q = F([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 || !Pe(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 && M(e) && e.key === "Escape" && (e.preventDefault(), this.open = !1);
 		};
 	}
 	_resolveModules() {
@@ -2940,29 +2963,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`
@@ -2980,7 +3006,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>
@@ -2993,8 +3019,8 @@ 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>
@@ -3005,15 +3031,19 @@ var $ = class extends e {
     `;
 	}
 };
-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({
+F([s()], $.prototype, "lang", void 0), F([s({ attribute: !1 })], $.prototype, "tree", void 0), F([s({ attribute: !1 })], $.prototype, "modules", void 0), F([s({ attribute: !1 })], $.prototype, "auth", void 0), F([s({ attribute: "landing-page-url" })], $.prototype, "landingPageUrl", void 0), F([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), F([s({ attribute: "help-url" })], $.prototype, "helpUrl", void 0), F([s({ attribute: !1 })], $.prototype, "feedback", void 0), F([s({
 	type: Boolean,
 	attribute: "show-notification"
-})], $.prototype, "showNotification", void 0), N([s({
+})], $.prototype, "showNotification", void 0), F([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), F([s({
+	type: Boolean,
+	attribute: "open",
+	reflect: !0
+})], $.prototype, "open", void 0), F([l()], $.prototype, "_currentItem", void 0), F([l()], $.prototype, "_resolvedModules", void 0), F([l()], $.prototype, "_modulesLoading", void 0), $ = F([o("vsn-navigation")], $);
 //#endregion
 export { v as SearchError, $ as VSNNavigation, g as isTreeLeaf, _ as isTreeParent };