@genesislcap/foundation-header 14.278.3 → 14.280.0

package/dist/custom-elements.json

@@ -287,7 +287,7 @@
         {
           "kind": "variable",
           "name": "navTemplate",
-          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\" role=\"navigation\" aria-label=\"Main menu\">\n    ${app.registerElementsTarget<HeaderTargetId>('header-start')}\n    <div class=\"nav-leftside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-start')}\n      ${when(\n        (x) => !x.hideSideBar,\n        html<Navigation>`\n          <${buttonTag}\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n            aria-label=\"Toggle side menu\"\n            aria-controls=\"side-nav\"\n            aria-expanded=${(x) => x.sideNavOpen}\n            appearance=\"stealth\"\n            @focusin=${(x) => x.closeNav()}\n          >\n            <${iconTag}\n              name=\"bars\"\n              part=\"nav-visibility-icon\"\n              class=\"nav-visibility-icon\"\n            >\n            </${iconTag}>\n          </${buttonTag}>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img\n          src=${(x) => x.logoSrc}\n          class=\"logo\"\n          part=\"logo\"\n          data-test-id=\"logo\"\n          alt=\"${(x) => x.logoAltText}\"\n        />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate('header') : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\n      <slot name=\"routes-end\" data-test-id=\"route-end-buttons\"></slot>\n      ${when(\n        (x) => x.showLuminanceToggleButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"luminance-toggle-button\"\n            part=\"luminance-button\"\n            aria-label=\"Luminance toggle\"\n          >\n            <${iconTag}\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showMiscToggleButton,\n        html<Navigation>`\n          <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\" aria-label=\"Misc icon\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\">\n            </${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showConnectionIndicator,\n        html<Navigation>`\n          <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n            <${connectionIndicatorTag} show-label=\"false\">\n            </${connectionIndicatorTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <${selectTag}\n            class=\"language-selector\"\n            position=\"below\"\n            data-test-id=\"language-selector\"\n            part=\"language-selector\"\n            @change=\"${(x, c) => x.changeLanguage(c.event as CustomEvent)}\"\n            aria-label=\"Language selector\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <${optionTag}\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </${optionTag}>\n              `,\n            )}\n          </${selectTag}>\n        `,\n      )}\n\n      <${buttonTag} appearance=\"neutral-grey\" data-test-id=\"user-button\" class=\"nav-button\" aria-label=\"User button\">\n        <${iconTag} name=\"user-circle\"></${iconTag}>\n        ${(x) => x.userName}\n      </${buttonTag}>\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
+          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\" role=\"navigation\" aria-label=\"Main menu\">\n    ${app.registerElementsTarget<HeaderTargetId>('header-start')}\n    <div class=\"nav-leftside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-start')}\n      ${when(\n        (x) => !x.hideSideBar,\n        html<Navigation>`\n          <${buttonTag}\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n            aria-label=\"Toggle side menu\"\n            aria-controls=\"side-nav\"\n            aria-expanded=${(x) => x.sideNavOpen}\n            appearance=\"stealth\"\n            @focusin=${(x) => x.closeNav()}\n          >\n            <${iconTag}\n              name=\"bars\"\n              part=\"nav-visibility-icon\"\n              class=\"nav-visibility-icon\"\n            >\n            </${iconTag}>\n          </${buttonTag}>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img\n          src=${(x) => x.logoSrc}\n          class=\"logo\"\n          part=\"logo\"\n          data-test-id=\"logo\"\n          alt=\"${(x) => x.logoAltText}\"\n        />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate('header') : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\n      <slot name=\"routes-end\" data-test-id=\"route-end-buttons\"></slot>\n      ${when(\n        (x) => x.showLuminanceToggleButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"luminance-toggle-button\"\n            part=\"luminance-button\"\n            aria-label=\"Luminance toggle\"\n          >\n            <${iconTag}\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showMiscToggleButton,\n        html<Navigation>`\n          <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\" aria-label=\"Misc icon\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\">\n            </${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showConnectionIndicator,\n        html<Navigation>`\n          <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n            <${connectionIndicatorTag} show-label=\"false\">\n            </${connectionIndicatorTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <${selectTag}\n            class=\"language-selector\"\n            position=\"below\"\n            data-test-id=\"language-selector\"\n            part=\"language-selector\"\n            @change=\"${(x, c) => x.changeLanguage(c.event as CustomEvent)}\"\n            aria-label=\"Language selector\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <${optionTag}\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </${optionTag}>\n              `,\n            )}\n          </${selectTag}>\n        `,\n      )}\n      ${() => accountMenuTemplate}\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
           "description": "Template for Navigation class",
           "return": {
             "type": {
@@ -446,6 +446,15 @@
               },
               "description": "Boolean attribute which controls whether to include the sideNav component\nControl via`hide-side-bar`"
             },
+            {
+              "kind": "field",
+              "name": "logoutButtonPosition",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`"
+            },
             {
               "kind": "field",
               "name": "routeButtons",
@@ -463,6 +472,24 @@
               },
               "description": "If present the defined @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems will be rendered in the header 'routes' slot"
             },
+            {
+              "kind": "field",
+              "name": "showAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`"
+            },
+            {
+              "kind": "field",
+              "name": "shouldShowAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Computed property that determines if the account menu should be shown",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "selectTemplate",
@@ -635,6 +662,24 @@
               },
               "description": "Boolean attribute which controls whether to include the sideNav component\nControl via`hide-side-bar`",
               "fieldName": "hideSideBar"
+            },
+            {
+              "name": "logout-button-position",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "fieldName": "logoutButtonPosition"
+            },
+            {
+              "name": "show-account-menu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "fieldName": "showAccountMenu"
             }
           ],
           "mixins": [
@@ -857,6 +902,19 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "logoutButtonPosition",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "routeButtons",
@@ -882,6 +940,32 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldShowAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Computed property that determines if the account menu should be shown",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "selectTemplate",
@@ -1088,6 +1172,32 @@
                 "name": "Navigation",
                 "module": "src/main/main.ts"
               }
+            },
+            {
+              "name": "logout-button-position",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "fieldName": "logoutButtonPosition",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-account-menu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "fieldName": "showAccountMenu",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
             }
           ],
           "events": [
@@ -1248,6 +1358,32 @@
                 "name": "Navigation",
                 "module": "src/main/main.ts"
               }
+            },
+            {
+              "name": "logout-button-position",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "fieldName": "logoutButtonPosition",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-account-menu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "fieldName": "showAccountMenu",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
             }
           ],
           "members": [
@@ -1444,6 +1580,19 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "logoutButtonPosition",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "routeButtons",
@@ -1469,6 +1618,32 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldShowAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Computed property that determines if the account menu should be shown",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "selectTemplate",
@@ -1822,6 +1997,19 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "logoutButtonPosition",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "routeButtons",
@@ -1847,6 +2035,32 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldShowAccountMenu",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Computed property that determines if the account menu should be shown",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "logout",
@@ -2041,6 +2255,32 @@
                 "name": "Navigation",
                 "module": "src/main/main.ts"
               }
+            },
+            {
+              "name": "logout-button-position",
+              "type": {
+                "text": "'side-nav' | 'account-menu' | 'none'"
+              },
+              "default": "'side-nav'",
+              "description": "String attribute which controls the position of the logout button in the header\nControl via `logout-button-position`",
+              "fieldName": "logoutButtonPosition",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-account-menu",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the account menu on the navigation bar\nControl via `show-account-menu`",
+              "fieldName": "showAccountMenu",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
             }
           ],
           "events": [
@@ -2299,6 +2539,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/templates/rapid.template.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/tags/index.ts",
@@ -2320,12 +2566,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/templates/rapid.template.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/utils/index.ts",

package/dist/dts/main/main.d.ts

@@ -3,8 +3,8 @@ import { I18next } from '@genesislcap/foundation-i18n';
 import { LoginRouting } from '@genesislcap/foundation-login';
 import { FoundationRouteNavItem } from '@genesislcap/foundation-ui';
 import { User } from '@genesislcap/foundation-user';
-import { Container } from '@genesislcap/web-core';
 import type { ViewTemplate } from '@genesislcap/web-core';
+import { Container } from '@genesislcap/web-core';
 import { HeaderConfig } from '../config/config';
 /**
  * Events dispatched by the navigation control buttons
@@ -73,17 +73,11 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly scrollWidth: number;
     readonly shadowRoot: ShadowRoot;
     slot: string;
-    readonly tagName: string; /**
-     * @internal
-     * Flag to indicate if the component is ready
-     */
+    readonly tagName: string;
     attachShadow(init: ShadowRootInit): ShadowRoot;
     closest<K_3 extends keyof HTMLElementTagNameMap>(selector: K_3): HTMLElementTagNameMap[K_3];
     closest<K_4 extends keyof SVGElementTagNameMap>(selector: K_4): SVGElementTagNameMap[K_4];
     closest<E extends Element = Element>(selectors: string): E;
-    /**
-     * Called when the component is connected to the DOM
-     */
     getAttribute(qualifiedName: string): string;
     getAttributeNS(namespace: string, localName: string): string;
     getAttributeNames(): string[];
@@ -120,7 +114,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     scrollTo(options?: ScrollToOptions): void;
     scrollTo(x: number, y: number): void;
     setAttribute(qualifiedName: string, value: string): void;
-    setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string, qualifiedName: string, value: string): void; /**
+     * @internal
+     */
     setAttributeNode(attr: Attr): Attr;
     setAttributeNodeNS(attr: Attr): Attr;
     setPointerCapture(pointerId: number): void;
@@ -135,9 +131,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly nodeName: string;
     readonly nodeType: number;
     nodeValue: string;
-    readonly parentElement: HTMLElement; /**
-     * Object which defines the language options to be displayed in the language selector
-     */
+    readonly parentElement: HTMLElement;
     readonly parentNode: ParentNode;
     readonly previousSibling: ChildNode;
     textContent: string;
@@ -148,7 +142,11 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
     insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
-    isDefaultNamespace(namespace: string): boolean;
+    isDefaultNamespace(namespace: string): boolean; /**
+     * Boolean attribute which controls whether to include the sideNav component
+     * Control via`hide-side-bar`
+     *
+     */
     isEqualNode(otherNode: Node): boolean;
     isSameNode(otherNode: Node): boolean;
     lookupNamespaceURI(prefix: string): string;
@@ -228,41 +226,18 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly children: HTMLCollection;
     readonly firstElementChild: Element;
     readonly lastElementChild: Element;
-    append(...nodes: (string | Node)[]): void;
+    append(...nodes: (string | Node)[]): void; /**
+     * Logs the user out of their session
+     *
+     * @public
+     */
     prepend(...nodes: (string | Node)[]): void;
     querySelector<K_7 extends keyof HTMLElementTagNameMap>(selectors: K_7): HTMLElementTagNameMap[K_7];
     querySelector<K_8 extends keyof SVGElementTagNameMap>(selectors: K_8): SVGElementTagNameMap[K_8];
     querySelector<E_1 extends Element = Element>(selectors: string): E_1;
-    querySelectorAll<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): NodeListOf<HTMLElementTagNameMap[K_9]>; /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
-    querySelectorAll<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): NodeListOf<SVGElementTagNameMap[K_10]>; /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
-    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>; /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
+    querySelectorAll<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): NodeListOf<HTMLElementTagNameMap[K_9]>;
+    querySelectorAll<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): NodeListOf<SVGElementTagNameMap[K_10]>;
+    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
     replaceChildren(...nodes: (string | Node)[]): void;
     readonly assignedSlot: HTMLSlotElement;
     oncopy: (this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any;
@@ -285,6 +260,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     oncanplay: (this: GlobalEventHandlers, ev: Event) => any;
     oncanplaythrough: (this: GlobalEventHandlers, ev: Event) => any;
     onchange: (this: GlobalEventHandlers, ev: Event) => any;
+    /**
+     * Emits the event corresponding to the miscellaneous icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
     onclick: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onclose: (this: GlobalEventHandlers, ev: Event) => any;
     oncontextmenu: (this: GlobalEventHandlers, ev: MouseEvent) => any;
@@ -300,13 +285,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ondurationchange: (this: GlobalEventHandlers, ev: Event) => any;
     onemptied: (this: GlobalEventHandlers, ev: Event) => any;
     onended: (this: GlobalEventHandlers, ev: Event) => any;
-    /**
-     * ZeroHeader is a zero version of the header micro-frontend.
-     *
-     * @deprecated - Use RapidHeader instead.
-     *
-     * @internal
-     */
     onerror: OnErrorEventHandlerNonNull;
     onfocus: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onformdata: (this: GlobalEventHandlers, ev: FormDataEvent) => any;
@@ -402,6 +380,8 @@ declare const Navigation_base: abstract new (...args: any[]) => {
  * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
  * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
  * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
+ * @param show-account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.
+ * @param logout-button-position - String attribute which controls the position of the logout button in the header.
  *
  * @param userName - String which defines the username to be displayed in the navigation bar.
  * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
@@ -518,6 +498,15 @@ export declare class Navigation extends Navigation_base {
      *
      */
     hideSideBar: boolean;
+    /**
+     * String attribute which controls the position of the logout button in the header
+     * Control via `logout-button-position`
+     *
+     * @remarks
+     *
+     * If this attribute is not set then the logout button is shown in the side nav
+     */
+    logoutButtonPosition: 'side-nav' | 'account-menu' | 'none';
     /**
      * If present the defined route buttons will be rendered in the header 'routes' slot
      *
@@ -538,6 +527,21 @@ export declare class Navigation extends Navigation_base {
      * If present the defined {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} will be rendered in the header 'routes' slot
      */
     routeNavItems: FoundationRouteNavItem[];
+    /**
+     * Boolean attribute which controls whether to show the account menu on the navigation bar
+     * Control via `show-account-menu`
+     *
+     * @remarks
+     * If this attribute is not set then the account menu is not shown
+     */
+    showAccountMenu: boolean;
+    /**
+     * Computed property that determines if the account menu should be shown
+     * @remarks
+     * It will be shown if the attribute is explicitly set to true
+     * or the logout button position is set to 'account-menu'
+     */
+    get shouldShowAccountMenu(): boolean;
     /**
      * Load remote components
      *

package/dist/dts/main/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}

package/dist/dts/main/main.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDAqMgD,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDAsPgD,CAAC"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAY1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAIzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAyHF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BAkHvB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,yCAI/B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,+BAAc,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAa1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAIzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AA8HF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA8GvB,CAAC;AAiDF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,yCAI/B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,+BAAc,CAAC"}

package/dist/esm/main/main.js

@@ -6,13 +6,13 @@ import { I18next } from '@genesislcap/foundation-i18n';
 import { LoginConfig, LoginRouting } from '@genesislcap/foundation-login';
 import { FoundationRouteNav } from '@genesislcap/foundation-ui';
 import { User } from '@genesislcap/foundation-user';
-import { GenesisElement, customElement, observable, attr, Container } from '@genesislcap/web-core';
+import { attr, Container, customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import logo from '../assets/logo.svg';
 import { HeaderConfig } from '../config/config';
 import { rapidTemplate } from '../templates/rapid.template';
 import { logger } from '../utils';
 import { MainStyles as styles } from './main.styles';
-import { dynamicTemplate as template, LoadingTemplate, mainTemplate } from './main.template';
+import { LoadingTemplate, mainTemplate, dynamicTemplate as template } from './main.template';
 /**
  * Navigation micro-frontend includes navigation bar and flyout menu
  *
@@ -33,6 +33,8 @@ import { dynamicTemplate as template, LoadingTemplate, mainTemplate } from './ma
  * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
  * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
  * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
+ * @param show-account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.
+ * @param logout-button-position - String attribute which controls the position of the logout button in the header.
  *
  * @param userName - String which defines the username to be displayed in the navigation bar.
  * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
@@ -102,6 +104,23 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
             availableLanguages: Object.keys((_a = this.i18next.config.resources) !== null && _a !== void 0 ? _a : {}),
             selectedLanguage: this.i18next.config.lng,
         };
+        /**
+         * String attribute which controls the position of the logout button in the header
+         * Control via `logout-button-position`
+         *
+         * @remarks
+         *
+         * If this attribute is not set then the logout button is shown in the side nav
+         */
+        this.logoutButtonPosition = 'side-nav';
+        /**
+         * Boolean attribute which controls whether to show the account menu on the navigation bar
+         * Control via `show-account-menu`
+         *
+         * @remarks
+         * If this attribute is not set then the account menu is not shown
+         */
+        this.showAccountMenu = false;
     }
     /**
      * Called when the component is connected to the DOM
@@ -143,6 +162,15 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
             }));
         }
     }
+    /**
+     * Computed property that determines if the account menu should be shown
+     * @remarks
+     * It will be shown if the attribute is explicitly set to true
+     * or the logout button position is set to 'account-menu'
+     */
+    get shouldShowAccountMenu() {
+        return this.showAccountMenu || this.logoutButtonPosition === 'account-menu';
+    }
     /**
      * Load remote components
      *
@@ -358,12 +386,18 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean', attribute: 'hide-side-bar' })
 ], Navigation.prototype, "hideSideBar", void 0);
+__decorate([
+    attr({ attribute: 'logout-button-position' })
+], Navigation.prototype, "logoutButtonPosition", void 0);
 __decorate([
     observable
 ], Navigation.prototype, "routeButtons", void 0);
 __decorate([
     observable
 ], Navigation.prototype, "routeNavItems", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'show-account-menu' })
+], Navigation.prototype, "showAccountMenu", void 0);
 Navigation = __decorate([
     customElement({
         name: 'foundation-header',

package/dist/esm/main/main.styles.js

@@ -1,6 +1,6 @@
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { css } from '@genesislcap/web-core';
-import { optionTag, iconTag, flyoutTag } from '../tags';
+import { flyoutTag, iconTag, optionTag } from '../tags';
 /**
  * Base styles for the foundation-header
  *
@@ -205,4 +205,53 @@ export const MainStyles = css `
     display: flex;
     flex-direction: column;
   }
+
+  .account-menu {
+    opacity: 0%;
+    visibility: hidden;
+    margin: 0;
+    background-color: var(--neutral-layer-2);
+    border-color: var(--neutral-fill-hover);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-1);
+    transition:
+      opacity 0.1s ease,
+      visibility 0.1s ease,
+      transform 0.1s ease;
+    transform: translateY(calc(var(--design-unit) * -5px));
+    padding: 0;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1;
+    min-width: 130px;
+  }
+
+  .account-menu-wrapper:hover .account-menu {
+    opacity: 100%;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  .account-menu-wrapper {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    line-height: 0;
+    font-size: 0;
+  }
+
+  .account-button {
+    position: relative;
+    z-index: 2;
+  }
+
+  .account-menu-button {
+    height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) - 8) * 1px);
+    width: 100%;
+    background-color: var(--neutral-layer-2);
+  }
+
+  .account-menu-button:hover {
+    background-color: var(--neutral-fill-hover);
+  }
 `.withBehaviors(getApp().registerStylesTarget('header'));

package/dist/esm/main/main.template.js

@@ -1,6 +1,6 @@
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { html, repeat, when } from '@genesislcap/web-core';
-import { buttonTag, flyoutTag, iconTag, connectionIndicatorTag, optionTag, selectTag, providerTag, getTagHelper, } from '../tags';
+import { buttonTag, connectionIndicatorTag, flyoutTag, getTagHelper, iconTag, optionTag, providerTag, selectTag, } from '../tags';
 const app = getApp();
 /**
  * Top level template for Navigation class
@@ -114,16 +114,18 @@ const sideNavTemplate = html `
       </div>
     </slot>
 
-    <${buttonTag}
-      slot="footer"
-      class="logout-container"
-      data-test-id="logout-button"
-      @click=${(x) => x.logout()}
-      aria-label="Sign out"
-    >
-      <${iconTag} name="sign-out-alt"></${iconTag}>
-      Sign out
-    </${buttonTag}>
+    ${when((x) => x.logoutButtonPosition === 'side-nav', html `
+        <${buttonTag}
+          slot="footer"
+          class="logout-container"
+          data-test-id="logout-button"
+          @click=${(x) => x.logout()}
+          aria-label="Sign out"
+        >
+          <${iconTag} name="sign-out-alt"></${iconTag}>
+          Sign out
+        </${buttonTag}>
+      `)}
   </${flyoutTag}>
 `;
 /**
@@ -227,14 +229,47 @@ export const navTemplate = html `
               `)}
           </${selectTag}>
         `)}
-
+      ${() => accountMenuTemplate}
+    </div>
+    ${app.registerElementsTarget(['header', 'header-end'])}
+  </div>
+`;
+const accountMenuTemplate = html `
+  ${when((x) => x.shouldShowAccountMenu, html `
+      <div class="account-menu-wrapper" part="account-menu-wrapper">
+        <${buttonTag}
+          appearance="neutral-grey"
+          data-test-id="user-button"
+          class="nav-button account-button"
+          aria-label="User button"
+          part="account-button"
+        >
+          <${iconTag} name="user-circle"></${iconTag}>
+          ${(x) => x.userName}
+        </${buttonTag}>
+        <nav class="account-menu" part="account-menu">
+          ${when((x) => x.logoutButtonPosition === 'account-menu', html `
+              <${buttonTag}
+                appearance="neutral-grey"
+                data-test-id="account-menu-logout-button"
+                class="account-menu-button"
+                @click=${(x) => x.logout()}
+                aria-label="Sign out"
+                part="account-menu-logout-button"
+              >
+                <${iconTag} name="sign-out-alt"></${iconTag}>
+                Sign out
+              </${buttonTag}>`)}
+          <slot name="account-menu"></slot>
+        </nav>
+      </div>
+    `)}
+  ${when((x) => !x.shouldShowAccountMenu, html `
       <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button" aria-label="User button">
         <${iconTag} name="user-circle"></${iconTag}>
         ${(x) => x.userName}
       </${buttonTag}>
-    </div>
-    ${app.registerElementsTarget(['header', 'header-end'])}
-  </div>
+    `)}
 `;
 /**
  * Get the template by prefix

package/dist/foundation-header.api.json

@@ -563,7 +563,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@genesislcap/foundation-header!Navigation:class",
-          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param logo - alt-text -Descriptive logo text.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @fires\n *\n * logout-clicked - Dispatched when the user clicks logout button.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param logo - alt-text -Descriptive logo text.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param show - account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.\n *\n * @param logout - button-position - String attribute which controls the position of the logout button in the header.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @fires\n *\n * logout-clicked - Dispatched when the user clicks logout button.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -982,6 +982,36 @@
               "isAbstract": false,
               "name": "logout"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#logoutButtonPosition:member",
+              "docComment": "/**\n * String attribute which controls the position of the logout button in the header Control via `logout-button-position`\n *\n * @remarks\n *\n * If this attribute is not set then the logout button is shown in the side nav\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "logoutButtonPosition: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "'side-nav' | 'account-menu' | 'none'"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "logoutButtonPosition",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#navigateTo:member(1)",
@@ -1145,6 +1175,66 @@
               "isAbstract": false,
               "name": "selectTemplate"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#shouldShowAccountMenu:member",
+              "docComment": "/**\n * Computed property that determines if the account menu should be shown\n *\n * @remarks\n *\n * It will be shown if the attribute is explicitly set to true or the logout button position is set to 'account-menu'\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "get shouldShowAccountMenu(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "shouldShowAccountMenu",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#showAccountMenu:member",
+              "docComment": "/**\n * Boolean attribute which controls whether to show the account menu on the navigation bar Control via `show-account-menu`\n *\n * @remarks\n *\n * If this attribute is not set then the account menu is not shown\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "showAccountMenu: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "showAccountMenu",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#showConnectionIndicator:member",

package/dist/foundation-header.d.ts

@@ -215,6 +215,8 @@ export declare type NavEventDetailMap = {
  * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
  * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
  * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
+ * @param show-account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.
+ * @param logout-button-position - String attribute which controls the position of the logout button in the header.
  *
  * @param userName - String which defines the username to be displayed in the navigation bar.
  * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
@@ -331,6 +333,15 @@ export declare class Navigation extends Navigation_base {
      *
      */
     hideSideBar: boolean;
+    /**
+     * String attribute which controls the position of the logout button in the header
+     * Control via `logout-button-position`
+     *
+     * @remarks
+     *
+     * If this attribute is not set then the logout button is shown in the side nav
+     */
+    logoutButtonPosition: 'side-nav' | 'account-menu' | 'none';
     /**
      * If present the defined route buttons will be rendered in the header 'routes' slot
      *
@@ -351,6 +362,21 @@ export declare class Navigation extends Navigation_base {
      * If present the defined {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} will be rendered in the header 'routes' slot
      */
     routeNavItems: FoundationRouteNavItem[];
+    /**
+     * Boolean attribute which controls whether to show the account menu on the navigation bar
+     * Control via `show-account-menu`
+     *
+     * @remarks
+     * If this attribute is not set then the account menu is not shown
+     */
+    showAccountMenu: boolean;
+    /**
+     * Computed property that determines if the account menu should be shown
+     * @remarks
+     * It will be shown if the attribute is explicitly set to true
+     * or the logout button position is set to 'account-menu'
+     */
+    get shouldShowAccountMenu(): boolean;
     /**
      * Load remote components
      *
@@ -515,17 +541,11 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly scrollWidth: number;
     readonly shadowRoot: ShadowRoot;
     slot: string;
-    readonly tagName: string; /**
-    * @internal
-    * Flag to indicate if the component is ready
-    */
+    readonly tagName: string;
     attachShadow(init: ShadowRootInit): ShadowRoot;
     closest<K_3 extends keyof HTMLElementTagNameMap>(selector: K_3): HTMLElementTagNameMap[K_3];
     closest<K_4 extends keyof SVGElementTagNameMap>(selector: K_4): SVGElementTagNameMap[K_4];
     closest<E extends Element = Element>(selectors: string): E;
-    /**
-     * Called when the component is connected to the DOM
-     */
     getAttribute(qualifiedName: string): string;
     getAttributeNS(namespace: string, localName: string): string;
     getAttributeNames(): string[];
@@ -562,7 +582,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     scrollTo(options?: ScrollToOptions): void;
     scrollTo(x: number, y: number): void;
     setAttribute(qualifiedName: string, value: string): void;
-    setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string, qualifiedName: string, value: string): void; /**
+    * @internal
+    */
     setAttributeNode(attr: Attr): Attr;
     setAttributeNodeNS(attr: Attr): Attr;
     setPointerCapture(pointerId: number): void;
@@ -577,9 +599,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly nodeName: string;
     readonly nodeType: number;
     nodeValue: string;
-    readonly parentElement: HTMLElement; /**
-    * Object which defines the language options to be displayed in the language selector
-    */
+    readonly parentElement: HTMLElement;
     readonly parentNode: ParentNode;
     readonly previousSibling: ChildNode;
     textContent: string;
@@ -590,7 +610,11 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
     insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
-    isDefaultNamespace(namespace: string): boolean;
+    isDefaultNamespace(namespace: string): boolean; /**
+    * Boolean attribute which controls whether to include the sideNav component
+    * Control via`hide-side-bar`
+    *
+    */
     isEqualNode(otherNode: Node): boolean;
     isSameNode(otherNode: Node): boolean;
     lookupNamespaceURI(prefix: string): string;
@@ -670,41 +694,18 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly children: HTMLCollection;
     readonly firstElementChild: Element;
     readonly lastElementChild: Element;
-    append(...nodes: (string | Node)[]): void;
+    append(...nodes: (string | Node)[]): void; /**
+    * Logs the user out of their session
+    *
+    * @public
+    */
     prepend(...nodes: (string | Node)[]): void;
     querySelector<K_7 extends keyof HTMLElementTagNameMap>(selectors: K_7): HTMLElementTagNameMap[K_7];
     querySelector<K_8 extends keyof SVGElementTagNameMap>(selectors: K_8): SVGElementTagNameMap[K_8];
     querySelector<E_1 extends Element = Element>(selectors: string): E_1;
-    querySelectorAll<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): NodeListOf<HTMLElementTagNameMap[K_9]>; /**
-    * Emits the event corresponding to the luminance icon being clicked
-    *
-    * @remarks
-    *
-    * Activated when the user clicks on the moon icon on the navigation
-    * bar right hand side
-    *
-    * @internal
-    */
-    querySelectorAll<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): NodeListOf<SVGElementTagNameMap[K_10]>; /**
-    * Emits the event corresponding to the luminance icon being clicked
-    *
-    * @remarks
-    *
-    * Activated when the user clicks on the moon icon on the navigation
-    * bar right hand side
-    *
-    * @internal
-    */
-    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>; /**
-    * Emits the event corresponding to the luminance icon being clicked
-    *
-    * @remarks
-    *
-    * Activated when the user clicks on the moon icon on the navigation
-    * bar right hand side
-    *
-    * @internal
-    */
+    querySelectorAll<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): NodeListOf<HTMLElementTagNameMap[K_9]>;
+    querySelectorAll<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): NodeListOf<SVGElementTagNameMap[K_10]>;
+    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
     replaceChildren(...nodes: (string | Node)[]): void;
     readonly assignedSlot: HTMLSlotElement;
     oncopy: (this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any;
@@ -727,6 +728,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     oncanplay: (this: GlobalEventHandlers, ev: Event) => any;
     oncanplaythrough: (this: GlobalEventHandlers, ev: Event) => any;
     onchange: (this: GlobalEventHandlers, ev: Event) => any;
+    /**
+     * Emits the event corresponding to the miscellaneous icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
     onclick: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onclose: (this: GlobalEventHandlers, ev: Event) => any;
     oncontextmenu: (this: GlobalEventHandlers, ev: MouseEvent) => any;
@@ -742,13 +753,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ondurationchange: (this: GlobalEventHandlers, ev: Event) => any;
     onemptied: (this: GlobalEventHandlers, ev: Event) => any;
     onended: (this: GlobalEventHandlers, ev: Event) => any;
-    /**
-     * ZeroHeader is a zero version of the header micro-frontend.
-     *
-     * @deprecated - Use RapidHeader instead.
-     *
-     * @internal
-     */
     onerror: OnErrorEventHandlerNonNull;
     onfocus: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onformdata: (this: GlobalEventHandlers, ev: FormDataEvent) => any;

package/docs/api/foundation-header.navigation.logoutbuttonposition.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [logoutButtonPosition](./foundation-header.navigation.logoutbuttonposition.md)
+
+## Navigation.logoutButtonPosition property
+
+String attribute which controls the position of the logout button in the header Control via `logout-button-position`
+
+**Signature:**
+
+```typescript
+logoutButtonPosition: 'side-nav' | 'account-menu' | 'none';
+```
+
+## Remarks
+
+If this attribute is not set then the logout button is shown in the side nav
+

package/docs/api/foundation-header.navigation.md

@@ -30,8 +30,11 @@ export declare class Navigation extends Navigation_base
 |  [loginRouting](./foundation-header.navigation.loginrouting.md) |  | LoginRouting |  |
 |  [logoAltText](./foundation-header.navigation.logoalttext.md) |  | string | Optional attribute which controls the alt text of the logo Control via <code>logo-alt-text</code> |
 |  [logoSrc](./foundation-header.navigation.logosrc.md) |  | any | Optional attribute which controls the icon to show on the navigation bar and flyout Control via <code>logo-src</code> |
+|  [logoutButtonPosition](./foundation-header.navigation.logoutbuttonposition.md) |  | 'side-nav' \| 'account-menu' \| 'none' | String attribute which controls the position of the logout button in the header Control via <code>logout-button-position</code> |
 |  [routeButtons](./foundation-header.navigation.routebuttons.md) |  | Array&lt;{ index: number; path: string; title: string; icon: string; variant: string; }&gt; | If present the defined route buttons will be rendered in the header 'routes' slot |
 |  [routeNavItems](./foundation-header.navigation.routenavitems.md) |  | FoundationRouteNavItem\[\] | If present the defined  will be rendered in the header 'routes' slot |
+|  [shouldShowAccountMenu](./foundation-header.navigation.shouldshowaccountmenu.md) | <code>readonly</code> | boolean | Computed property that determines if the account menu should be shown |
+|  [showAccountMenu](./foundation-header.navigation.showaccountmenu.md) |  | boolean | Boolean attribute which controls whether to show the account menu on the navigation bar Control via <code>show-account-menu</code> |
 |  [showConnectionIndicator](./foundation-header.navigation.showconnectionindicator.md) |  | boolean | Boolean attribute which controls whether to show the connection indicator on the navigation bar Control via <code>show-connection-indicator</code> |
 |  [showLanguageSelector](./foundation-header.navigation.showlanguageselector.md) |  | boolean | Boolean attribute which controls whether to show the language selector on the navigation bar Control via <code>show-language-selector</code> |
 |  [showLuminanceToggleButton](./foundation-header.navigation.showluminancetogglebutton.md) |  | boolean | Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar Control via<code>show-luminance-toggle-button</code> |

package/docs/api/foundation-header.navigation.shouldshowaccountmenu.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [shouldShowAccountMenu](./foundation-header.navigation.shouldshowaccountmenu.md)
+
+## Navigation.shouldShowAccountMenu property
+
+Computed property that determines if the account menu should be shown
+
+**Signature:**
+
+```typescript
+get shouldShowAccountMenu(): boolean;
+```
+
+## Remarks
+
+It will be shown if the attribute is explicitly set to true or the logout button position is set to 'account-menu'
+

package/docs/api/foundation-header.navigation.showaccountmenu.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [showAccountMenu](./foundation-header.navigation.showaccountmenu.md)
+
+## Navigation.showAccountMenu property
+
+Boolean attribute which controls whether to show the account menu on the navigation bar Control via `show-account-menu`
+
+**Signature:**
+
+```typescript
+showAccountMenu: boolean;
+```
+
+## Remarks
+
+If this attribute is not set then the account menu is not shown
+

package/docs/api-report.md

@@ -114,6 +114,7 @@ export class Navigation extends Navigation_base {
     logoAltText: string;
     logoSrc: any;
     logout(): Promise<void>;
+    logoutButtonPosition: 'side-nav' | 'account-menu' | 'none';
     // @internal
     luminanceIconEvent(): void;
     // @internal
@@ -135,6 +136,8 @@ export class Navigation extends Navigation_base {
     routeButtonsChanged(): void;
     routeNavItems: FoundationRouteNavItem[];
     selectTemplate(): ViewTemplate<Navigation>;
+    get shouldShowAccountMenu(): boolean;
+    showAccountMenu: boolean;
     showConnectionIndicator: boolean;
     showLanguageSelector: boolean;
     showLuminanceToggleButton: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.278.3",
+  "version": "14.280.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-header.d.ts",
@@ -77,29 +77,29 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.278.3",
-    "@genesislcap/genx": "14.278.3",
-    "@genesislcap/rollup-builder": "14.278.3",
-    "@genesislcap/ts-builder": "14.278.3",
-    "@genesislcap/uvu-playwright-builder": "14.278.3",
-    "@genesislcap/vite-builder": "14.278.3",
-    "@genesislcap/webpack-builder": "14.278.3",
+    "@genesislcap/foundation-testing": "14.280.0",
+    "@genesislcap/genx": "14.280.0",
+    "@genesislcap/rollup-builder": "14.280.0",
+    "@genesislcap/ts-builder": "14.280.0",
+    "@genesislcap/uvu-playwright-builder": "14.280.0",
+    "@genesislcap/vite-builder": "14.280.0",
+    "@genesislcap/webpack-builder": "14.280.0",
     "rimraf": "^5.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-auth": "14.278.3",
-    "@genesislcap/foundation-comms": "14.278.3",
-    "@genesislcap/foundation-events": "14.278.3",
-    "@genesislcap/foundation-i18n": "14.278.3",
-    "@genesislcap/foundation-logger": "14.278.3",
-    "@genesislcap/foundation-login": "14.278.3",
-    "@genesislcap/foundation-shell": "14.278.3",
-    "@genesislcap/foundation-ui": "14.278.3",
-    "@genesislcap/foundation-user": "14.278.3",
-    "@genesislcap/foundation-utils": "14.278.3",
-    "@genesislcap/foundation-zero": "14.278.3",
-    "@genesislcap/rapid-design-system": "14.278.3",
-    "@genesislcap/web-core": "14.278.3",
+    "@genesislcap/foundation-auth": "14.280.0",
+    "@genesislcap/foundation-comms": "14.280.0",
+    "@genesislcap/foundation-events": "14.280.0",
+    "@genesislcap/foundation-i18n": "14.280.0",
+    "@genesislcap/foundation-logger": "14.280.0",
+    "@genesislcap/foundation-login": "14.280.0",
+    "@genesislcap/foundation-shell": "14.280.0",
+    "@genesislcap/foundation-ui": "14.280.0",
+    "@genesislcap/foundation-user": "14.280.0",
+    "@genesislcap/foundation-utils": "14.280.0",
+    "@genesislcap/foundation-zero": "14.280.0",
+    "@genesislcap/rapid-design-system": "14.280.0",
+    "@genesislcap/web-core": "14.280.0",
     "tslib": "^2.3.1"
   },
   "repository": {
@@ -111,5 +111,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "4260edc21556ef0d65f67142ca75774c05384054"
+  "gitHead": "7e89766c4e599c7eea739cd24de3be1e65357472"
 }