@genesislcap/foundation-header 14.143.1 → 14.143.2

package/dist/dts/components/components.d.ts

@@ -0,0 +1,9 @@
+export declare const loadZeroDesignSystem: () => Promise<any>;
+/**
+ * Load the wp5 module federation remote versions, or fallback to code split bundled versions.
+ * You would really be targeting the client's design system, components etc here. For now just targeting zero.
+ */
+export declare const loadRemotes: () => Promise<{
+    ZeroDesignSystem: any;
+}>;
+//# sourceMappingURL=components.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/components/components.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,oBAAoB,oBAWhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW;;EAKvB,CAAC"}

package/dist/dts/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/dts/config/index.d.ts

@@ -1,4 +1,2 @@
-export * from './config';
-export * from './configure';
 export * from './targetId';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

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

@@ -1,4 +1,4 @@
 export * from './main.styles';
-export * from './main.template';
+export { NavTemplate } from './main.template';
 export * from './main';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,cAAc,QAAQ,CAAC"}

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

@@ -1,7 +1,6 @@
 import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
 import { I18next } from '@genesislcap/foundation-i18n';
 import type { FoundationRouteNavItem } from '@genesislcap/foundation-ui';
-import { HeaderConfig } from '../config';
 /**
  * Events dispatched by the navigation control buttons
  * @public
@@ -50,7 +49,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly classList: DOMTokenList;
     className: string;
     readonly clientHeight: number;
-    readonly clientLeft: number;
+    readonly clientLeft: number; /**
+     * Username of the logged in user
+     */
     readonly clientTop: number;
     readonly clientWidth: number;
     id: string;
@@ -108,11 +109,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
     scrollTo(options?: ScrollToOptions): void;
     scrollTo(x: number, y: number): void;
-    /**
-     * If present the defined route buttons will be rendered in the header 'routes' slot
-     *
-     * @deprecated - Use `routeNavItems` instead.
-     */
     setAttribute(qualifiedName: string, value: string): void;
     setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
     setAttributeNode(attr: Attr): Attr;
@@ -173,16 +169,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaChecked: string;
     ariaColCount: string;
     ariaColIndex: string;
-    ariaColIndexText: string; /**
-     * 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
-     */
+    ariaColIndexText: string;
     ariaColSpan: string;
     ariaCurrent: string;
     ariaDisabled: string;
@@ -215,7 +202,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaValueMin: string;
     ariaValueNow: string;
     ariaValueText: string;
-    role: string;
+    role: string; /**
+     * Emits the event corresponding to the notification icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the bell icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
     animate(keyframes: PropertyIndexedKeyframes | Keyframe[], options?: number | KeyframeAnimationOptions): Animation;
     getAnimations(options?: GetAnimationsOptions): Animation[];
     after(...nodes: (string | Node)[]): void;
@@ -386,7 +382,6 @@ export declare class Navigation extends Navigation_base {
     auth: Auth;
     credentialManager: CredentialManager;
     i18next: I18next;
-    headerConfig: HeaderConfig;
     ready: boolean;
     /**
      * Username of the logged in user
@@ -479,6 +474,16 @@ 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[];
+    /**
+     * Load remote components
+     *
+     * @remarks
+     *
+     * With regards to module federation
+     *
+     * @internal
+     */
+    loadRemotes(): Promise<void>;
     selectTemplate(): import("@microsoft/fast-element").ViewTemplate<Navigation, any>;
     /**
      * Logs the user out of their session
@@ -568,39 +573,5 @@ export declare class Navigation extends Navigation_base {
      */
     toLocalisedText(text: string): string;
 }
-/**
- * ZeroHeader is a zero version of the header micro-frontend.
- *
- * @remarks
- * A zero version that pre-registers zero components and uses the zero design system. ZeroHeader and its components won't bloat the core bundle as
- * these are only loaded on-demand when in use.
- *
- * @example
- * ```ts
- * import { ZeroHeader } from '@genesislcap/foundation-header';
- * ...
- * ZeroHeader
- * ```
- *
- * @example Load the micro frontend on-demand
- * ```ts
-
- *   const { ZeroHeader } = await import('@genesislcap/foundation-header');
- *   return ZeroHeader;
- * },
- * ```
- *
- * @public
- */
-export declare class ZeroHeader extends Navigation {
-    /**
-     * @internal
-     */
-    connectedCallback(): Promise<void>;
-    /**
-     * @internal
-     */
-    loadRemotes(): Promise<void>;
-}
 export {};
 //# sourceMappingURL=main.d.ts.map

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":"AAAA,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAgB,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAuB,MAAM,4BAA4B,CAAC;AAS9F;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wBAAwB,EAAE,IAAI,CAAC;IAC/B,mBAAmB,EAAE,IAAI,CAAC;IAC1B,2BAA2B,EAAE,IAAI,CAAC;IAClC,kBAAkB,EAAE,IAAI,CAAC;CAC1B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;CAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAkDA;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmPH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3SL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAKa,UAAW,SAAQ,eAAmC;IAC3D,IAAI,EAAG,IAAI,CAAC;IACC,iBAAiB,EAAG,iBAAiB,CAAC;IAChD,OAAO,EAAG,OAAO,CAAC;IAEf,KAAK,EAAE,OAAO,CAAS;IAEnC;;OAEG;IACgB,QAAQ,EAAE,MAAM,CAAC;IAExB,WAAW,UAAS;IAEnB,iBAAiB;IAU9B;;;;;;;OAOG;IAC8B,OAAO,EAAE,GAAG,CAAQ;IAErD;;;;;;;OAOG;IAEH,yBAAyB,EAAE,OAAO,CAAC;IAEnC;;;;;;;OAOG;IAC8D,oBAAoB,EAAE,OAAO,CAAC;IAE/F;;;;;;;;;OASG;IAEH,uBAAuB,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,8BAA8B;IAI9B;;;;OAIG;IAEH,uBAAuB,EAAE,OAAO,CAAQ;IAExC;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,CAAS;IAE1B,eAAe,EAAE,eAAe,CAG1C;IAEF;;;;OAIG;IAEH,WAAW,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACS,YAAY,EAAE,KAAK,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IAEH;;OAEG;IACH,mBAAmB;IAiBnB;;OAEG;IACS,aAAa,EAAE,sBAAsB,EAAE,CAAC;IAEpD;;;;;;;;OAQG;IACG,WAAW;IAKjB,cAAc;IAId;;;;;;;;;OASG;IACU,MAAM;IAgBnB;;;;;;;;;;OAUG;IACI,UAAU,CAAC,IAAI,EAAE,MAAM;IAS9B;;;;;;;;;OASG;IACH,mBAAmB;IAInB;;;;;;;;;OASG;IACH,kBAAkB;IAIlB;;;;;;;;;OASG;IACH,aAAa;IAIb;;;;;;;;;OASG;IACH,qBAAqB;IAIrB;;;;;;;;OAQG;IACH,cAAc,CAAC,CAAC,EAAE,WAAW;IAK7B;;;;;;;;OAQG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAKtC"}

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,iDAiLgD,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAYA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA6PgD,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,yBAAyB,CAAC;AAU5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AA6EzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA+GvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AA0EzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA+GvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}

package/dist/esm/components/components.js

@@ -0,0 +1,42 @@
+import { __awaiter } from "tslib";
+/**
+ * These DS / Component imports will be replaced with an import from the local alpha design system.
+ * We're just fixing something on our side to allow you to extend zero.
+ */
+import { allComponents, provideFASTDesignSystem } from '@microsoft/fast-components';
+import { logger } from '../utils';
+provideFASTDesignSystem().register(allComponents);
+var ResourceType;
+(function (ResourceType) {
+    ResourceType["local"] = "local";
+    ResourceType["remote"] = "remote";
+})(ResourceType || (ResourceType = {}));
+function loadZeroFallback() {
+    return import(
+    /* webpackMode: "lazy" */
+    '@genesislcap/foundation-zero');
+}
+export const loadZeroDesignSystem = () => __awaiter(void 0, void 0, void 0, function* () {
+    let type = ResourceType.remote;
+    try {
+        // @ts-ignore
+        return yield import('foundationZero/ZeroDesignSystem');
+    }
+    catch (e) {
+        type = ResourceType.local;
+        return yield loadZeroFallback();
+    }
+    finally {
+        logger.debug(`Using '${type}' version of foundationZero/DesignSystem`);
+    }
+});
+/**
+ * Load the wp5 module federation remote versions, or fallback to code split bundled versions.
+ * You would really be targeting the client's design system, components etc here. For now just targeting zero.
+ */
+export const loadRemotes = () => __awaiter(void 0, void 0, void 0, function* () {
+    const { registerZeroDesignSystem } = yield loadZeroDesignSystem();
+    return {
+        ZeroDesignSystem: registerZeroDesignSystem(),
+    };
+});

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/config/index.js

@@ -1,3 +1 @@
-export * from './config';
-export * from './configure';
 export * from './targetId';

package/dist/esm/main/index.js

@@ -1,3 +1,3 @@
 export * from './main.styles';
-export * from './main.template';
+export { NavTemplate } from './main.template';
 export * from './main';

package/dist/esm/main/main.js

@@ -5,7 +5,7 @@ import { I18next } from '@genesislcap/foundation-i18n';
 import { FASTElement, customElement, observable, attr } from '@microsoft/fast-element';
 import { Route } from '@microsoft/fast-router';
 import logo from '../assets/logo.svg';
-import { HeaderConfig } from '../config';
+import * as Components from '../components';
 import { logger } from '../utils';
 import { MainStyles as styles } from './main.styles';
 import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './main.template';
@@ -42,7 +42,7 @@ import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './ma
  * @fires language-changed - Dispatched when the user changes the language in the language selector.
  *
  */
-export class Navigation extends EventEmitter(FASTElement) {
+let Navigation = class Navigation extends EventEmitter(FASTElement) {
     constructor() {
         var _a;
         super(...arguments);
@@ -85,10 +85,10 @@ export class Navigation extends EventEmitter(FASTElement) {
         return __awaiter(this, void 0, void 0, function* () {
             _super.connectedCallback.call(this);
             logger.debug(`foundation-header is now connected to the DOM`);
+            yield this.loadRemotes();
             this.userName = this.auth.loggedUserResult
                 ? this.auth.loggedUserResult.username
                 : 'Genesis User';
-            this.ready = true;
         });
     }
     /**
@@ -116,6 +116,21 @@ export class Navigation extends EventEmitter(FASTElement) {
             }));
         }
     }
+    /**
+     * Load remote components
+     *
+     * @remarks
+     *
+     * With regards to module federation
+     *
+     * @internal
+     */
+    loadRemotes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const remoteComponents = yield Components.loadRemotes();
+            this.ready = true;
+        });
+    }
     selectTemplate() {
         return this.ready ? MainTemplate : LoadingTemplate;
     }
@@ -246,7 +261,7 @@ export class Navigation extends EventEmitter(FASTElement) {
             ? this.i18next.t(text, { lng: this.i18next.language })
             : text;
     }
-}
+};
 __decorate([
     Auth
 ], Navigation.prototype, "auth", void 0);
@@ -256,9 +271,6 @@ __decorate([
 __decorate([
     I18next
 ], Navigation.prototype, "i18next", void 0);
-__decorate([
-    HeaderConfig
-], Navigation.prototype, "headerConfig", void 0);
 __decorate([
     observable
 ], Navigation.prototype, "ready", void 0);
@@ -298,58 +310,11 @@ __decorate([
 __decorate([
     observable
 ], Navigation.prototype, "routeNavItems", void 0);
-/**
- * ZeroHeader is a zero version of the header micro-frontend.
- *
- * @remarks
- * A zero version that pre-registers zero components and uses the zero design system. ZeroHeader and its components won't bloat the core bundle as
- * these are only loaded on-demand when in use.
- *
- * @example
- * ```ts
- * import { ZeroHeader } from '@genesislcap/foundation-header';
- * ...
- * ZeroHeader
- * ```
- *
- * @example Load the micro frontend on-demand
- * ```ts
-
- *   const { ZeroHeader } = await import('@genesislcap/foundation-header');
- *   return ZeroHeader;
- * },
- * ```
- *
- * @public
- */
-let ZeroHeader = class ZeroHeader extends Navigation {
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        const _super = Object.create(null, {
-            connectedCallback: { get: () => super.connectedCallback }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            _super.connectedCallback.call(this);
-            yield this.loadRemotes();
-        });
-    }
-    /**
-     * @internal
-     */
-    loadRemotes() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { registerCommonZeroComponents } = yield import('../components/zero-components');
-            yield registerCommonZeroComponents();
-        });
-    }
-};
-ZeroHeader = __decorate([
+Navigation = __decorate([
     customElement({
-        name: 'zero-header',
+        name: 'foundation-header',
         template,
         styles,
     })
-], ZeroHeader);
-export { ZeroHeader };
+], Navigation);
+export { Navigation };

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

@@ -1,6 +1,7 @@
 import { getApp } from '@genesislcap/foundation-shell/app';
+import { neutralLayer2 } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
-import { optionTag, iconTag, flyoutTag } from '../tags';
+import { backgroundNavOption, ColorHEX, defaultBackgroundHover, defaultBackgroundItem, PrimaryRapidColorHEX, } from '../styles/colors';
 /**
  * Base styles for the foundation-header
  *
@@ -14,14 +15,16 @@ export const MainStyles = css `
     flex-direction: row;
 
     --primary-gradient-angle: -113.5deg;
+    --design-unit: 2.5;
   }
 
+  zero-design-system-provider,
   .dynamic-template {
     width: 100%;
   }
 
   .nav-listbox {
-    background: var(--neutral-layer-2);
+    background: ${neutralLayer2};
     display: flex;
     flex: 1;
     flex-direction: row;
@@ -30,61 +33,94 @@ export const MainStyles = css `
     box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);
   }
 
-  .nav-button {
-    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-    margin: 0;
+  fast-listbox {
+    border-color: var(--rapid-ag-background-color);
   }
 
   .nav-leftside {
-    background: var(--neutral-layer-2);
+    background: ${neutralLayer2};
     flex: 1;
-    display: flex;
     flex-direction: row;
     align-items: center;
-    margin-left: calc(var(--design-unit) * 4px);
-    gap: calc(var(--design-unit) * 2px);
+    margin-left: calc(var(--design-unit) * 6px);
+    display: flex;
   }
 
   .nav-leftside:focus-within {
     box-shadow: none;
   }
 
-  ::slotted(${optionTag}),
-  .nav-listbox .nav-leftside ${optionTag} {
+  ::slotted(fast-option),
+  .nav-listbox fast-option {
     margin: 0 calc(var(--design-unit) * 2px);
-    padding: 0 calc(var(--design-unit) * 2px);
-    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px + 2px);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    border: calc(var(--stroke-width) * 1px) solid
-      color-mix(in srgb, var(--neutral-foreground-rest), transparent 90%);
+    padding: 0 calc(var(--design-unit) * 6px);
+
+    --focus-stroke-width: 0;
+  }
+
+  ::slotted(fast-option.selected),
+  .nav-listbox fast-option.selected {
+    background: ${backgroundNavOption};
+    color: ${ColorHEX.white};
   }
 
-  ::slotted(${optionTag}.selected),
-  .nav-leftside ${optionTag}.selected {
-    background: color-mix(in srgb, var(--accent-fill-rest), transparent 95%);
-    color: var(--neutral-foreground-rest);
+  ::slotted(fast-option:not(.selected)),
+  .nav-listbox fast-option:not(.selected) {
+    background-color: ${defaultBackgroundItem};
+    color: #c9c9c9;
   }
 
-  ::slotted(${optionTag}:not(.selected)),
-  .nav-leftside ${optionTag}:not(.selected) {
-    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 90%);
-    color: var(--neutral-foreground-rest);
+  ::slotted(fast-option:not(.selected):hover),
+  .nav-listbox fast-option:not(.selected):hover {
+    background-color: ${defaultBackgroundHover};
+    color: ${ColorHEX.white};
   }
 
-  ::slotted(${optionTag}:not(.selected):hover),
-  .nav-leftside ${optionTag}:not(.selected):hover {
-    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
-    color: var(--neutral-foreground-rest);
+  .top-layout zero-icon {
+    position: absolute;
+    right: calc(var(--design-unit) * 6px);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 25px;
+    opacity: 80%;
+    cursor: pointer;
   }
 
-  .logout-container ${iconTag} {
+  .logout-container zero-icon {
     padding: 0 calc(var(--design-unit) * 3px);
   }
 
-  .nav-visibility-icon {
+  .nav-listbox .bars-container {
+    margin-right: calc(var(--design-unit) * 3px);
+  }
+
+  .user-container zero-icon {
+    font-size: 20px;
+    margin-right: calc(var(--design-unit) * 2px);
+    color: #879ba6;
+  }
+
+  .group-container zero-icon {
+    padding-right: 10px;
+    color: #879ba6;
+  }
+
+  .nav-listbox .bars-container zero-icon {
     cursor: pointer;
-    font-size: var(--type-ramp-plus-6-font-size);
-    color: var(--neutral-fill-strong-rest);
+    font-size: calc(var(--design-unit) * 8px);
+    background:
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        top/100% 1px,
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        bottom/100% 1px;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -93,11 +129,12 @@ export const MainStyles = css `
   .logo-container {
     display: flex;
     align-items: center;
+    margin-right: calc(var(--design-unit) * 3px);
   }
 
   .logo {
-    height: calc(var(--design-unit) * 5px);
-    width: calc(var(--design-unit) * 6px);
+    height: calc(var(--design-unit) * 8px);
+    width: calc(var(--design-unit) * 10px);
   }
 
   .nav-rightside {
@@ -106,28 +143,83 @@ export const MainStyles = css `
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
-    margin-right: calc(var(--design-unit) * 4px);
-    gap: calc(var(--design-unit) * 2px);
+    margin-right: calc(var(--design-unit) * 6px);
+    color: #c9c9c9;
+  }
+
+  .user-container {
+    background-color: ${defaultBackgroundItem};
+    padding: calc(var(--design-unit) * 1px);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    cursor: pointer;
   }
 
   .icon-container {
-    font-size: var(--type-ramp-plus-6-font-size);
+    font-size: 20px;
     padding: calc(var(--design-unit) * 3px);
-    color: var(--neutral-fill-strong-rest);
+    margin-right: calc(var(--design-unit) * 4px);
+    color: #879ba6;
     cursor: pointer;
-    position: relative;
+  }
+
+  .connection-indicator-container {
+    margin-right: calc(var(--design-unit) * 4px);
   }
 
   .open-nav {
     width: 300px;
   }
 
+  .top-layout {
+    background:
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        top/100% 1px,
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        bottom/100% 1px;
+    background-origin: border-box;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 15%;
+    max-height: 120px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+
+  .top-layout img {
+    width: 50px;
+    margin-left: calc(var(--design-unit) * 6px);
+  }
+
+  .top-layout zero-icon:hover {
+    opacity: 100%;
+  }
+
+  .group-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
   ::slotted(zero-tree-view) {
     --type-ramp-base-font-size: 12px;
   }
 
   ::slotted(div) {
-    color: var(--accent-fill-rest);
+    color: ${PrimaryRapidColorHEX.blue};
     font-size: var(--type-ramp-minus-1-font-size);
     margin-bottom: calc(var(--design-unit) * 4px);
     padding-left: calc(var(--design-unit) * 4px);
@@ -146,8 +238,7 @@ export const MainStyles = css `
   .logout-container {
     align-items: center;
     background-color: var(--neutral-fill-rest);
-    border: calc(var(--stroke-width) * 1px) solid
-      color-mix(in srgb, var(--neutral-foreground-rest), transparent 90%);
+    border: calc(var(--stroke-width) * 1px) solid ${defaultBackgroundItem};
     cursor: pointer;
     display: flex;
     flex-direction: row;
@@ -171,18 +262,4 @@ export const MainStyles = css `
   .language-selector:focus-within {
     border-color: #333;
   }
-
-  ${flyoutTag}::part(flyout), 
-  ${flyoutTag}::part(footer) {
-    padding: 0;
-  }
-
-  ${flyoutTag}::part(header),
-  ${flyoutTag}::part(content) {
-    padding: calc(var(--design-unit) * 2px);
-  }
-
-  .notifications-button {
-    padding-right: calc((var(--design-unit) - 1) * 2px);
-  }
 `.withBehaviors(getApp().registerStylesTarget('header'));