@visma-swno/vsn-navigation 1.4.0-beta.8 → 1.4.0

package/dist/assets/vsn-navigation.d.ts

@@ -147,6 +147,8 @@ export declare class VSNNavigation extends LitElement {
     helpUrl?: string;
     /** Configuration for the feedback component */
     feedback: FeedbackConfig | null;
+    /** Keep the module switcher permanently open (non-closable). Default false. */
+    moduleSwitcherAlwaysOpen: boolean;
     /** Show notification icon in the top bar */
     showNotification: boolean;
     /** Notification icon shows active state */
@@ -177,7 +179,8 @@ export declare class VSNNavigation extends LitElement {
     updated(changed: Map<string, unknown>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** CTRL+O (Cmd+O on Mac) opens the side-bar and focuses the search field (if enabled). */
+    /** Toggles the side-bar: opens and focuses search when closed, closes when open.
+     * Shortcut: Cmd+O on Mac (Ctrl+O also accepted as a Safari fallback); Ctrl+O on all other platforms. */
     private _onShortcut;
     private _onEscape;
     private _onTopBarClick;
@@ -206,6 +209,8 @@ export declare type VsnNavigation = {
     auth?: VsnAuth;
     /** Configuration for the feedback component */
     feedback?: FeedbackConfig | null;
+    /** Keep the module switcher permanently open (non-closable). Default false. */
+    moduleSwitcherAlwaysOpen?: boolean;
 };
 
 export declare class VSNSkipToMain extends LitElement {

package/dist/assets/vsn-navigation.js

@@ -129,7 +129,7 @@ var w = 0, we = (e) => (se(((e, t) => _e(Ce, e, t))), x = xe = e.sourceLocale, S
 	if (typeof navigator > "u") return !1;
 	let e = navigator.userAgentData?.platform ?? navigator.platform ?? "";
 	return /mac/i.test(e);
-}, Oe = (e) => !e.shiftKey && !e.altKey && (De() ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey), T = (e) => e.shiftKey || e.altKey || e.ctrlKey || e.metaKey, E = (e) => !T(e), ke = () => v("Choose a service"), Ae = () => v("Search"), je = () => De() ? "Cmd+O" : "CTRL+O", Me = (e) => v(_`Type at least ${e} characters to search`), Ne = () => v("Menu items"), Pe = () => v("Load more"), Fe = () => v("Services"), Ie = () => v("Services"), D = "menu", Le = "survicate-sdk", Re = "ui-components-feedback", ze = (e) => `https://survey.survicate.com/workspaces/${e}/web_surveys.js`;
+}, Oe = (e) => !e.shiftKey && !e.altKey && (De() ? e.ctrlKey !== e.metaKey : e.ctrlKey && !e.metaKey), T = (e) => e.shiftKey || e.altKey || e.ctrlKey || e.metaKey, E = (e) => !T(e), ke = () => v("Choose a service"), Ae = () => v("Search"), je = () => De() ? "Cmd+O / Ctrl+O" : "Ctrl+O", Me = (e) => v(_`Type at least ${e} characters to search`), Ne = () => v("Menu items"), Pe = () => v("Load more"), Fe = () => v("Services"), Ie = () => v("Services"), D = "menu", Le = "survicate-sdk", Re = "ui-components-feedback", ze = (e) => `https://survey.survicate.com/workspaces/${e}/web_surveys.js`;
 //#endregion
 //#region src/shared/icons.ts
 function O(e, t = 24, r) {
@@ -1156,7 +1156,7 @@ var B = class extends e {
 		return this;
 	}
 	constructor() {
-		super(), this.modules = [], this.modulesLoading = !1, this.hasMenu = !1, this.moduleSwitcherMaxHeight = 0, this.searchValue = "", this.searchLoading = !1, this.expanded = !1, this._keyboard = new St(this), new _t(this, [".ga-side-navigation__switcher-dropdown", ".ga-side-navigation__switcher"], () => {
+		super(), this.modules = [], this.modulesLoading = !1, this.moduleSwitcherAlwaysOpen = !1, this.moduleSwitcherMaxHeight = 0, this.searchValue = "", this.searchLoading = !1, this.expanded = !1, this._keyboard = new St(this), new _t(this, [".ga-side-navigation__switcher-dropdown", ".ga-side-navigation__switcher"], () => {
 			this.canClose && (this.expanded = !1);
 		}), new I(this, () => this.canClose && this.expanded, ".vsn-switcher-anchor");
 	}
@@ -1170,7 +1170,7 @@ var B = class extends e {
       <div class="ga-side-navigation__header">
         <div class="vsn-switcher-anchor"
              @keydown=${this._keyboard.onSwitcherKeydown}>
-          ${this.canClose ? n`
+          ${this.canToggle ? n`
             <button type="button"
                     class="ga-side-navigation__switcher ${this.expanded ? "ga-side-navigation__switcher--active" : ""}"
                     aria-label=${v(_`Service menu, ${e.title}`)}
@@ -1183,9 +1183,9 @@ var B = class extends e {
             </span>
             </button>
           ` : n`
-            <div class="ga-side-navigation__switcher ga-side-navigation__switcher--active"
-                 aria-expanded="true"
-                 aria-haspopup="menu"
+            <div class="ga-side-navigation__switcher ${this._isOpen ? "ga-side-navigation__switcher--active" : ""}"
+                 aria-expanded="${this._isOpen}"
+                 aria-haspopup="${this._isOpen ? "menu" : "false"}"
                  title="">
               <span class="ga-side-navigation__switcher-title">${e.title}</span>
               <span class="ga-side-navigation__switcher-action">
@@ -1194,10 +1194,10 @@ var B = class extends e {
             </div>
           `}
 
-          ${f(this.expanded, () => n`
+          ${f(this._isOpen, () => n`
             <vsn-switcher-menu
-              .items=${e.kind === "loading" ? [] : e.available}
-              .loading=${e.kind === "loading"}
+              .items=${e.kind === "module-loading" ? [] : e.available}
+              .loading=${e.kind === "module-loading"}
               .maxHeight=${this.moduleSwitcherMaxHeight}
               @item-select=${this._onItemSelect}>
             </vsn-switcher-menu>`)}
@@ -1214,38 +1214,33 @@ var B = class extends e {
 	}
 	get _state() {
 		if (this.modulesLoading) return {
-			kind: "loading",
+			kind: "module-loading",
 			title: this.activeModuleLabel || Fe()
 		};
 		let e = this.modules.find((e) => e.id === this.activeModuleId);
 		return e ? {
-			kind: "active",
+			kind: "module-selected",
 			title: e.label,
 			available: this.modules.filter((t) => t.id !== e.id)
-		} : this.activeModuleId && this.activeModuleLabel ? {
-			kind: "active",
-			title: this.activeModuleLabel,
-			available: this.modules
 		} : {
-			kind: "no-active",
-			title: Fe(),
+			kind: "module-unmatched",
+			title: this.activeModuleId && this.activeModuleLabel ? this.activeModuleLabel : Fe(),
 			available: this.modules
 		};
 	}
 	get canClose() {
-		return this.hasMenu ? !0 : this._state.kind !== "no-active";
+		return !this.moduleSwitcherAlwaysOpen;
 	}
 	get hasAvailableItems() {
 		let e = this._state;
-		return e.kind !== "loading" && e.available.length > 0;
+		return e.kind !== "module-loading" && e.available.length > 0;
+	}
+	get _isOpen() {
+		return this.moduleSwitcherAlwaysOpen || this.expanded;
 	}
 	get canToggle() {
 		return this.canClose && (this.hasAvailableItems || this.modulesLoading || this.expanded);
 	}
-	willUpdate() {
-		let e = this._state;
-		e.kind !== "loading" && (this.hasMenu || e.kind !== "no-active" || e.available.length === 0 || (this.expanded = !0));
-	}
 	reset() {
 		this.expanded = !1;
 	}
@@ -1269,7 +1264,7 @@ var B = class extends e {
 		}), !0);
 	}
 };
-j([s({ attribute: !1 })], B.prototype, "modules", void 0), j([s()], B.prototype, "activeModuleId", void 0), j([s()], B.prototype, "activeModuleLabel", void 0), j([s({ type: Boolean })], B.prototype, "modulesLoading", void 0), j([s({ type: Boolean })], B.prototype, "hasMenu", void 0), j([s({ attribute: !1 })], B.prototype, "moduleSwitcherMaxHeight", void 0), j([s({ attribute: !1 })], B.prototype, "search", void 0), j([s()], B.prototype, "searchValue", void 0), j([s({ type: Boolean })], B.prototype, "searchLoading", void 0), j([s({
+j([s({ attribute: !1 })], B.prototype, "modules", void 0), j([s()], B.prototype, "activeModuleId", void 0), j([s()], B.prototype, "activeModuleLabel", void 0), j([s({ type: Boolean })], B.prototype, "modulesLoading", void 0), j([s({ type: Boolean })], B.prototype, "moduleSwitcherAlwaysOpen", void 0), j([s({ attribute: !1 })], B.prototype, "moduleSwitcherMaxHeight", void 0), j([s({ attribute: !1 })], B.prototype, "search", void 0), j([s()], B.prototype, "searchValue", void 0), j([s({ type: Boolean })], B.prototype, "searchLoading", void 0), j([s({
 	type: Boolean,
 	reflect: !0
 })], B.prototype, "expanded", void 0), B = j([y(), o("vsn-header")], B);
@@ -1519,6 +1514,7 @@ var kt = "en", At = [
 	s352719d86112de9a: "Hjælp",
 	s387a4a41718122cb: _`${0} resultater`,
 	s3fb7db4771812f0c: "Hvis problemet fortsætter, genindlæs siden eller kontakt support.",
+	s442010a1a0adb81d: "Vis skjulte brødkrummer",
 	s457d59d649765619: "Gå til hovedindhold",
 	s4b0c6b66b4efd7d8: "Vælg en tjeneste",
 	s58a1dace5a9acc5b: _`Tjenestemenu, ${0}`,
@@ -1556,6 +1552,7 @@ var kt = "en", At = [
 	s352719d86112de9a: "Ohje",
 	s387a4a41718122cb: _`${0} tulosta`,
 	s3fb7db4771812f0c: "Jos ongelma jatkuu, lataa sivu uudelleen tai ota yhteyttä tukeen.",
+	s442010a1a0adb81d: "Näytä piilotetut murupolun kohteet",
 	s457d59d649765619: "Siirry pääsisältöön",
 	s4b0c6b66b4efd7d8: "Valitse palvelu",
 	s58a1dace5a9acc5b: _`Palveluvalikko, ${0}`,
@@ -1593,6 +1590,7 @@ var kt = "en", At = [
 	s352719d86112de9a: "Hulp",
 	s387a4a41718122cb: _`${0} resultaten`,
 	s3fb7db4771812f0c: "Als het probleem aanhoudt, laad de pagina opnieuw of neem contact op met ondersteuning.",
+	s442010a1a0adb81d: "Toon verborgen broodkruimels",
 	s457d59d649765619: "Ga naar hoofdinhoud",
 	s4b0c6b66b4efd7d8: "Kies een service",
 	s58a1dace5a9acc5b: _`Servicemenu, ${0}`,
@@ -1630,6 +1628,7 @@ var kt = "en", At = [
 	s352719d86112de9a: "Hjelp",
 	s387a4a41718122cb: _`${0} resultater`,
 	s3fb7db4771812f0c: "Hvis problemet vedvarer, last inn siden på nytt eller kontakt støtte.",
+	s442010a1a0adb81d: "Vis skjulte brødsmuleelementer",
 	s457d59d649765619: "Hopp til hovedinnhold",
 	s4b0c6b66b4efd7d8: "Velg en tjeneste",
 	s58a1dace5a9acc5b: _`Tjenestemeny, ${0}`,
@@ -1667,6 +1666,7 @@ var kt = "en", At = [
 	s352719d86112de9a: "Hjälp",
 	s387a4a41718122cb: _`${0} resultat`,
 	s3fb7db4771812f0c: "Om problemet kvarstår, ladda om sidan eller kontakta support.",
+	s442010a1a0adb81d: "Visa dolda brödsmulor",
 	s457d59d649765619: "Hoppa till huvudinnehåll",
 	s4b0c6b66b4efd7d8: "Välj en tjänst",
 	s58a1dace5a9acc5b: _`Tjänstemeny, ${0}`,
@@ -2076,7 +2076,7 @@ var kt = "en", At = [
 		};
 	}
 	constructor() {
-		super(), this.modules = [], this.modulesLoading = !1, this.lang = "en", this.error = !1, this.open = !1, this._searchQuery = "", this._searchLoading = !1, this._activeScopeId = D, this._searchLoadingMore = !1, this._moduleSwitcherMaxHeight = 0, this._hasPageTitle = !1, this._navFooterKeyboard = new $t(this), this._customWidthPerLanguage = { fi: "30em" }, this._onNavigate = (e) => {
+		super(), this.modules = [], this.modulesLoading = !1, this.moduleSwitcherAlwaysOpen = !1, this.lang = "en", this.error = !1, this.open = !1, this._searchQuery = "", this._searchLoading = !1, this._activeScopeId = D, this._searchLoadingMore = !1, this._moduleSwitcherMaxHeight = 0, this._hasPageTitle = !1, this._navFooterKeyboard = new $t(this), this._customWidthPerLanguage = { fi: "30em" }, this._onNavigate = (e) => {
 			this._searchQuery = "", this._searchResults = void 0, this.dispatchEvent(new CustomEvent("vsn-side-bar-close", {
 				bubbles: !0,
 				composed: !0
@@ -2262,7 +2262,7 @@ var kt = "en", At = [
         .activeModuleId=${this.activeModuleId}
         .activeModuleLabel=${this.activeModuleLabel}
         .modulesLoading=${this.modulesLoading}
-        .hasMenu=${(this.menu?.items.length ?? 0) > 0}
+        .moduleSwitcherAlwaysOpen=${this.moduleSwitcherAlwaysOpen}
         .search=${e}
         .searchValue=${this._searchQuery}
         .searchLoading=${this._searchLoading}
@@ -2304,7 +2304,7 @@ var kt = "en", At = [
     `;
 	}
 };
-j([s({ attribute: !1 })], K.prototype, "modules", void 0), j([s()], K.prototype, "activeModuleId", void 0), j([s()], K.prototype, "activeModuleLabel", void 0), j([s({ type: Boolean })], K.prototype, "modulesLoading", void 0), j([s()], K.prototype, "lang", void 0), j([s({ attribute: !1 })], K.prototype, "auth", void 0), j([s({ type: Boolean })], K.prototype, "error", void 0), j([s({
+j([s({ attribute: !1 })], K.prototype, "modules", void 0), j([s()], K.prototype, "activeModuleId", void 0), j([s()], K.prototype, "activeModuleLabel", void 0), j([s({ type: Boolean })], K.prototype, "modulesLoading", void 0), j([s({ type: Boolean })], K.prototype, "moduleSwitcherAlwaysOpen", void 0), j([s()], K.prototype, "lang", void 0), j([s({ attribute: !1 })], K.prototype, "auth", void 0), j([s({ type: Boolean })], K.prototype, "error", void 0), j([s({
 	type: Boolean,
 	reflect: !0
 })], K.prototype, "open", void 0), j([s({ attribute: !1 })], K.prototype, "menu", void 0), j([l()], K.prototype, "_searchQuery", void 0), j([l()], K.prototype, "_searchResults", void 0), j([l()], K.prototype, "_searchLoading", void 0), j([l()], K.prototype, "_activeScopeId", void 0), j([l()], K.prototype, "_searchError", void 0), j([l()], K.prototype, "_searchNextCursor", void 0), j([l()], K.prototype, "_searchLoadingMore", void 0), j([l()], K.prototype, "_moduleSwitcherMaxHeight", void 0), j([l()], K.prototype, "_hasPageTitle", void 0), K = j([o("vsn-side-bar")], K);
@@ -2531,6 +2531,11 @@ var J = class extends e {
         padding-inline: calc(0.25rem * var(--ga-base-scaling-factor, 1));
       }
 
+      a.ga-breadcrumb-item__trigger {
+        color: inherit;
+        text-decoration: none;
+      }
+
        /* Focus indicator for keyboard navigation inside breadcrumb dropdowns */
       .ga-breadcrumb-item__menu .ga-side-navigation__item:focus-visible {
         outline: var(--_focus-ring-offset) solid var(--ga-color-border-focus);
@@ -2566,7 +2571,7 @@ var J = class extends e {
 		if (this._displayMode !== "overflow") return;
 		let e = this.shadowRoot?.querySelector(".ga-breadcrumb");
 		if (!e) return;
-		let t = Math.max(0, this._breadcrumbPath.length - 1);
+		let t = this.tree?.pageTitle ? this._breadcrumbPath.length : Math.max(0, this._breadcrumbPath.length - 1);
 		for (; e.scrollWidth > e.clientWidth + 1 && this._overflowCount < t;) this._overflowCount++, await this.updateComplete;
 	}
 	async _tryExpandOverflow() {
@@ -2603,12 +2608,12 @@ var J = class extends e {
 	_popoverItemTriggerId(e) {
 		return `vsn-bc-item-${e}-trigger`;
 	}
-	_onLeafAsAncestorClick(e) {
-		this.dispatchEvent(new CustomEvent("vsn-menu-item-changed", {
-			detail: e,
+	_onLeafAsAncestorClick(e, t) {
+		e.button !== 0 || T(e) || (e.preventDefault(), this.dispatchEvent(new CustomEvent("vsn-menu-item-changed", {
+			detail: t,
 			bubbles: !0,
 			composed: !0
-		}));
+		})));
 	}
 	_handlePopoverBeforeToggle(e, t) {
 		if (t.newState !== "open") return;
@@ -2717,14 +2722,17 @@ var J = class extends e {
 		}));
 	}
 	_renderLeafAsAncestor(e) {
+		let t = k(e) ? n`<a class="ga-breadcrumb-item__trigger" href=${e.url} @click=${(t) => this._onLeafAsAncestorClick(t, e)}>
+          <span class="ga-breadcrumb-item__label">${e.label ?? ""}</span>
+        </a>` : n`<span class="ga-breadcrumb-item__trigger">
+          <span class="ga-breadcrumb-item__label">${e.label ?? ""}</span>
+        </span>`;
 		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} @click="${() => this._onLeafAsAncestorClick(e)}">
-        <span class="ga-breadcrumb-item__trigger">
-          <span class="ga-breadcrumb-item__label">${e.label ?? ""}</span>
-        </span>
+           @mouseleave=${this._onBreadcrumbMouseLeave}>
+        ${t}
         <span class="ga-breadcrumb-item__separator" aria-hidden="true">/</span>
       </div>`;
 	}
@@ -2788,44 +2796,46 @@ var J = class extends e {
 		let e = this._breadcrumbPath, t = this.tree?.pageTitle;
 		return n`${this._renderModules()}${e.map((n, r) => r === e.length - 1 ? this._renderLastItem(n, r, t) : this._renderBreadcrumbItem(n, r))}`;
 	}
+	_renderOverflowDropdown(e) {
+		return n`
+      <div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
+        <button
+          id="vsn-bc-overflow-trigger"
+          class="ga-breadcrumb-item__trigger"
+          type="button"
+          aria-label=${v("Show hidden breadcrumb items")}
+          aria-expanded=${this._openPopoverId === "vsn-bc-overflow-popover"}
+          aria-haspopup="menu"
+          popovertarget="vsn-bc-overflow-popover"
+        >
+          <span class="ga-breadcrumb-item__label" aria-hidden="true">...</span>
+        </button>
+        <div
+          id="vsn-bc-overflow-popover"
+          class="ga-breadcrumb-item__menu"
+          popover="auto"
+          @beforetoggle=${(e) => this._handlePopoverBeforeToggle("vsn-bc-overflow-trigger", e)}
+          @toggle=${(e) => this._handlePopoverToggle("vsn-bc-overflow-popover", e)}
+          @vsn-breadcrumb-menu-close=${() => this._handleMenuClose("vsn-bc-overflow-trigger", "vsn-bc-overflow-popover")}
+        >
+          <vsn-breadcrumb-menu
+            .treeList=${e}
+            @vsn-breadcrumb-menu-leaf-select=${(e) => this._handleLeafSelect(e, "vsn-bc-overflow-popover")}
+          ></vsn-breadcrumb-menu>
+        </div>
+        <span class="ga-breadcrumb-item__separator" aria-hidden="true">/</span>
+      </div>`;
+	}
 	_renderOverflowBreadcrumbs() {
 		let e = this._breadcrumbPath, t = this.tree?.pageTitle;
 		if (e.length === 0) return n`${this._renderModules()}`;
 		let r = e[e.length - 1];
-		if (e.length === 1) return n`${this._renderModules()}${this._renderLastItem(r, 0, t)}`;
-		let i = [e[0]], a = e.slice(this._overflowCount, e.length - 1);
+		if (e.length === 1) return t && this._overflowCount >= e.length ? n`${this._renderOverflowDropdown([r])}${this._renderPageTitle(t)}` : n`${this._renderModules()}${this._renderLastItem(r, 0, t)}`;
+		let i = [e[0]], a = e.slice(this._overflowCount, e.length - 1), o = !!t && this._overflowCount >= e.length;
 		return n`
-      ${this._overflowCount === 0 ? this._renderModules() : ""}
-      ${this._overflowCount > 0 ? n`
-        <div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
-          <button
-            id="vsn-bc-overflow-trigger"
-            class="ga-breadcrumb-item__trigger"
-            type="button"
-            aria-expanded=${this._openPopoverId === "vsn-bc-overflow-popover"}
-            aria-haspopup="menu"
-            popovertarget="vsn-bc-overflow-popover"
-          >
-            <span class="ga-breadcrumb-item__label">...</span>
-          </button>
-          <div
-            id="vsn-bc-overflow-popover"
-            class="ga-breadcrumb-item__menu"
-            popover="auto"
-            @beforetoggle=${(e) => this._handlePopoverBeforeToggle("vsn-bc-overflow-trigger", e)}
-            @toggle=${(e) => this._handlePopoverToggle("vsn-bc-overflow-popover", e)}
-            @vsn-breadcrumb-menu-close=${() => this._handleMenuClose("vsn-bc-overflow-trigger", "vsn-bc-overflow-popover")}
-          >
-            <vsn-breadcrumb-menu
-              .treeList=${i}
-              @vsn-breadcrumb-menu-leaf-select=${(e) => this._handleLeafSelect(e, "vsn-bc-overflow-popover")}
-            ></vsn-breadcrumb-menu>
-          </div>
-          <span class="ga-breadcrumb-item__separator" aria-hidden="true">/</span>
-        </div>
-      ` : ""}
+      ${this._overflowCount === 0 ? this._renderModules() : this._renderOverflowDropdown(i)}
       ${a.map((e, t) => this._renderBreadcrumbItem(e, this._overflowCount + t))}
-      ${this._renderLastItem(r, e.length - 1, t)}`;
+      ${o ? this._renderPageTitle(t) : this._renderLastItem(r, e.length - 1, t)}`;
 	}
 	_renderMobileBreadcrumbs() {
 		let e = this._breadcrumbPath;
@@ -3342,7 +3352,7 @@ j([s()], Q.prototype, "href", void 0), Q = j([y(), o("vsn-skip-to-main")], Q);
 //#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.open = !1, this._resolvedModules = [], this._modulesLoading = !1, this._modulesLoadToken = 0, this._restoreFocusToToggle = !1, this._onTopBarMenuItemChanged = (e) => {
+		super(...e), this.lang = "en", this.showHelp = !1, this.feedback = null, this.moduleSwitcherAlwaysOpen = !1, this.showNotification = !1, this.notificationActive = !1, this.open = !1, this._resolvedModules = [], this._modulesLoading = !1, this._modulesLoadToken = 0, this._restoreFocusToToggle = !1, this._onTopBarMenuItemChanged = (e) => {
 			e.stopPropagation(), this.dispatchEvent(new CustomEvent("vsn-menu-item-changed", {
 				bubbles: !0,
 				composed: !0,
@@ -3360,11 +3370,15 @@ var $ = class extends e {
 				detail: t
 			}));
 		}, this._onShortcut = (e) => {
-			e.defaultPrevented || !Oe(e) || e.key.toLowerCase() !== "o" || (e.preventDefault(), this.dispatchEvent(new CustomEvent("vsn-open", {
-				cancelable: !0,
-				bubbles: !0,
-				composed: !0
-			})) && this._openAndFocusSearch());
+			if (!e.defaultPrevented && !e.repeat && !(!Oe(e) || e.key.toLowerCase() !== "o")) if (e.preventDefault(), this.open) this._closeSideBar();
+			else {
+				if (!this.dispatchEvent(new CustomEvent("vsn-open", {
+					cancelable: !0,
+					bubbles: !0,
+					composed: !0
+				}))) return;
+				this._openAndFocusSearch();
+			}
 		}, this._onEscape = (e) => {
 			e.defaultPrevented || this.open && E(e) && e.key === "Escape" && (e.preventDefault(), this.open = !1);
 		};
@@ -3491,6 +3505,7 @@ var $ = class extends e {
           .activeModuleId=${this.modules?.activeModuleId}
           .activeModuleLabel=${this.modules?.activeModuleLabel}
           .modulesLoading=${this._modulesLoading}
+          .moduleSwitcherAlwaysOpen=${this.moduleSwitcherAlwaysOpen}
           .auth=${this.auth}
           ?open=${this.open}
           @vsn-side-bar-close=${this._closeSideBar}
@@ -3509,6 +3524,9 @@ j([s()], $.prototype, "lang", void 0), j([s({ attribute: !1 })], $.prototype, "t
 	type: Boolean,
 	attribute: "show-help"
 })], $.prototype, "showHelp", void 0), j([s({ attribute: "help-url" })], $.prototype, "helpUrl", void 0), j([s({ attribute: !1 })], $.prototype, "feedback", void 0), j([s({
+	type: Boolean,
+	attribute: "module-switcher-always-open"
+})], $.prototype, "moduleSwitcherAlwaysOpen", void 0), j([s({
 	type: Boolean,
 	attribute: "show-notification"
 })], $.prototype, "showNotification", void 0), j([s({