@genesislcap/foundation-header 14.139.2 → 14.141.0

package/dist/custom-elements.json

@@ -33,55 +33,220 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/components.ts",
+      "path": "src/config/config.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "loadZeroDesignSystem"
-        },
+          "kind": "variable",
+          "name": "defaultHeaderConfig",
+          "type": {
+            "text": "HeaderConfig"
+          },
+          "default": "{\n  name: 'foundation-header',\n  templateOptions: defaultTemplateOptions,\n}",
+          "description": "Default HeaderConfig DI implementation.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultHeaderConfig",
+          "declaration": {
+            "name": "defaultHeaderConfig",
+            "module": "src/config/config.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/config/configure.ts",
+      "declarations": [
         {
           "kind": "function",
-          "name": "loadRemotes",
-          "description": "Load the wp5 module federation remote versions, or fallback to code split bundled versions.\nYou would really be targeting the client's design system, components etc here. For now just targeting zero."
+          "name": "configure",
+          "parameters": [
+            {
+              "name": "config",
+              "type": {
+                "text": "Partial<HeaderConfig>"
+              },
+              "description": "A partial HeaderConfig."
+            }
+          ],
+          "description": "A function that allows configuring the header micro-frontend with name and templateOptions.",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "loadZeroDesignSystem",
+          "name": "configure",
+          "declaration": {
+            "name": "configure",
+            "module": "src/config/configure.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/config/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./config"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
           "declaration": {
-            "name": "loadZeroDesignSystem",
-            "module": "src/components/components.ts"
+            "name": "*",
+            "package": "./configure"
           }
         },
         {
           "kind": "js",
-          "name": "loadRemotes",
+          "name": "*",
           "declaration": {
-            "name": "loadRemotes",
-            "module": "src/components/components.ts"
+            "name": "*",
+            "package": "./targetId"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/index.ts",
+      "path": "src/config/targetId.ts",
       "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/config/templates.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultTemplateOptions",
+          "type": {
+            "text": "TemplateOptions"
+          },
+          "default": "{\n  icon: 'zero-icon',\n  button: 'zero-button',\n  connectionIndicator: 'zero-connection-indicator',\n  select: 'zero-select',\n  option: 'zero-option',\n  flyout: 'zero-flyout',\n}",
+          "description": "defaultTemplateOptions.",
+          "privacy": "public"
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "defaultTemplateOptions",
           "declaration": {
-            "name": "*",
-            "package": "./components"
+            "name": "defaultTemplateOptions",
+            "module": "src/config/templates.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/config/index.ts",
+      "path": "src/components/zero-components.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerCommonZeroComponents",
+          "description": "registerCommonZeroComponents.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerCommonZeroComponents",
+          "declaration": {
+            "name": "registerCommonZeroComponents",
+            "module": "src/components/zero-components.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/colors.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getWebRGBA",
+          "parameters": [
+            {
+              "name": "rgb",
+              "type": {
+                "text": "ColorRGBA64"
+              }
+            },
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "defaultBackgroundHover"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultBackgroundItem"
+        },
+        {
+          "kind": "variable",
+          "name": "backgroundNavOption"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getWebRGBA",
+          "declaration": {
+            "name": "getWebRGBA",
+            "module": "src/styles/colors.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultBackgroundHover",
+          "declaration": {
+            "name": "defaultBackgroundHover",
+            "module": "src/styles/colors.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultBackgroundItem",
+          "declaration": {
+            "name": "defaultBackgroundItem",
+            "module": "src/styles/colors.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "backgroundNavOption",
+          "declaration": {
+            "name": "backgroundNavOption",
+            "module": "src/styles/colors.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -89,16 +254,85 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./targetId"
+            "package": "./colors"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./styles"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/config/targetId.ts",
-      "declarations": [],
-      "exports": []
+      "path": "src/styles/styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mixinScreen",
+          "parameters": [
+            {
+              "name": "display",
+              "default": "'block'",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "TODO: Bring all the style and typography mixins into the design system package"
+        },
+        {
+          "kind": "function",
+          "name": "genesisLogo",
+          "parameters": [
+            {
+              "name": "slot",
+              "default": "'start'"
+            }
+          ],
+          "description": "TODO"
+        },
+        {
+          "kind": "function",
+          "name": "settingsIcon",
+          "parameters": [
+            {
+              "name": "slot",
+              "default": "'start'"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mixinScreen",
+          "declaration": {
+            "name": "mixinScreen",
+            "module": "src/styles/styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "genesisLogo",
+          "declaration": {
+            "name": "genesisLogo",
+            "module": "src/styles/styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "settingsIcon",
+          "declaration": {
+            "name": "settingsIcon",
+            "module": "src/styles/styles.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -115,10 +349,10 @@
         },
         {
           "kind": "js",
-          "name": "NavTemplate",
+          "name": "*",
           "declaration": {
-            "name": "NavTemplate",
-            "module": "./main.template"
+            "name": "*",
+            "package": "./main.template"
           }
         },
         {
@@ -165,7 +399,7 @@
         {
           "kind": "variable",
           "name": "NavTemplate",
-          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\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          <div\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n          >\n            <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n          </div>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\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          >\n            <zero-icon\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></zero-icon>\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\">\n            <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></zero-icon>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showNotificationsButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"notifications-button\"\n            part=\"notifications-button\"\n          >\n            <zero-icon\n              variant=\"regular\"\n              @click=${(x) => x.notificationIconEvent()}\n              name=\"bell\"\n              part=\"notifications-icon\"\n            ></zero-icon>\n            <slot name=\"notifications-icon-end\"></slot>\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            <zero-connection-indicator show-label=\"false\"></zero-connection-indicator>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <zero-select\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          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <zero-option\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </zero-option>\n              `,\n            )}\n          </zero-select>\n        `,\n      )}\n\n      <zero-button appearance=\"neutral-grey\" data-test-id=\"user-button\">\n        <zero-icon name=\"user-circle\"></zero-icon>\n        ${(x) => x.userName}\n      </zero-button>\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\">\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          <div\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n          >\n            <${iconTag} name=\"bars\" part=\"nav-visibility-icon\" class=\"nav-visibility-icon\"></${iconTag}>\n          </div>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\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          >\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\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></${iconTag}>\n          </div>\n        `,\n      )}\n      <!-- ${when(\n        (x) => x.showNotificationsButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"notifications-button\"\n            part=\"notifications-button\"\n          >\n            <${iconTag}\n              variant=\"regular\"\n              @click=${(x) => x.notificationIconEvent()}\n              name=\"bell\"\n              part=\"notifications-icon\"\n            ></${iconTag}>\n            <slot name=\"notifications-icon-end\"></slot>\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\"></${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          >\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\">\n        <${iconTag} name=\"user-circle\"></${iconTag}>\n        ${(x) => x.userName}\n      </${buttonTag}>\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
           "description": "Template for Navigation class",
           "return": {
             "type": {
@@ -216,6 +450,13 @@
                 "text": "I18next"
               }
             },
+            {
+              "kind": "field",
+              "name": "headerConfig",
+              "type": {
+                "text": "HeaderConfig"
+              }
+            },
             {
               "kind": "field",
               "name": "ready",
@@ -476,103 +717,461 @@
             "name": "FASTElement",
             "package": "@microsoft/fast-element"
           },
-          "tagName": "foundation-header",
           "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Navigation",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/main/main.ts"
-          }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "foundation-header",
-          "declaration": {
+          "kind": "class",
+          "description": "ZeroHeader is a zero version of the header micro-frontend.",
+          "name": "ZeroHeader",
+          "superclass": {
             "name": "Navigation",
             "module": "src/main/main.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/colors.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getWebRGBA",
-          "parameters": [
+          },
+          "tagName": "zero-header",
+          "customElement": true,
+          "attributes": [
             {
-              "name": "rgb",
+              "name": "logo-src",
               "type": {
-                "text": "ColorRGBA64"
+                "text": "any"
+              },
+              "default": "logo",
+              "description": "Optional attribute which controls the icon to show on the navigation bar and flyout\nControl via `logo-src`",
+              "resolveInitializer": {
+                "module": "/src/assets/logo.svg"
+              },
+              "fieldName": "logoSrc",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
               }
             },
             {
-              "name": "alpha",
-              "default": "1.0",
+              "name": "show-luminance-toggle-button",
               "type": {
-                "text": "number"
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar\nControl via`show-luminance-toggle-button`",
+              "fieldName": "showLuminanceToggleButton",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-misc-toggle-button",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to show the miscellaneous (menu) icon on the navigation bar\nControl via `show-luminance-toggle-button`",
+              "fieldName": "showMiscToggleButton",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-notification-button",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`",
+              "deprecated": "- Add/Remove PBC Notify via `genx` instead.",
+              "fieldName": "showNotificationsButton",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-connection-indicator",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`",
+              "fieldName": "showConnectionIndicator",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "show-language-selector",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the language selector on the navigation bar\nControl via `show-language-selector`",
+              "fieldName": "showLanguageSelector",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "name": "hide-side-bar",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to include the sideNav component\nControl via`hide-side-bar`",
+              "fieldName": "hideSideBar",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "auth",
+              "type": {
+                "text": "Auth"
+              },
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "credentialManager",
+              "type": {
+                "text": "CredentialManager"
+              },
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "i18next",
+              "type": {
+                "text": "I18next"
+              },
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headerConfig",
+              "type": {
+                "text": "HeaderConfig"
+              },
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ready",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "userName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "description": "Username of the logged in user",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sideNavOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "logoSrc",
+              "type": {
+                "text": "any"
+              },
+              "default": "logo",
+              "description": "Optional attribute which controls the icon to show on the navigation bar and flyout\nControl via `logo-src`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showLuminanceToggleButton",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar\nControl via`show-luminance-toggle-button`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showMiscToggleButton",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to show the miscellaneous (menu) icon on the navigation bar\nControl via `show-luminance-toggle-button`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showNotificationsButton",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`",
+              "deprecated": "- Add/Remove PBC Notify via `genx` instead.",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showConnectionIndicator",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showLanguageSelector",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the language selector on the navigation bar\nControl via `show-language-selector`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "languageOptions",
+              "type": {
+                "text": "LanguageOptions"
+              },
+              "default": "{\n    availableLanguages: Object.keys(this.i18next.config.resources ?? {}),\n    selectedLanguage: this.i18next.config.lng,\n  }",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hideSideBar",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Boolean attribute which controls whether to include the sideNav component\nControl via`hide-side-bar`",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "routeButtons",
+              "type": {
+                "text": "Array<{\n    index: number;\n    path: string;\n    title: string;\n    icon: string;\n    variant: string;\n  }>"
+              },
+              "description": "If present the defined route buttons will be rendered in the header 'routes' slot",
+              "deprecated": "- Use `routeNavItems` instead.",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "routeNavItems",
+              "type": {
+                "text": "FoundationRouteNavItem[]"
+              },
+              "description": "If present the defined @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems will be rendered in the header 'routes' slot",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "selectTemplate",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "logout",
+              "privacy": "public",
+              "description": "Logs the user out of their session",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "navigateTo",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "path",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "string represeting the new route to move to"
+                }
+              ],
+              "description": "Changes the route of the current page",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "changeLanguage",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "Changes the language of the application",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toLocalisedText",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "To localised text",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Dispatched when the user clicks on the luminance toggle icon in the navigation bar.",
+              "name": "luminance-icon-clicked",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "description": "Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.",
+              "name": "misc-icon-clicked",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "description": "Dispatched when the user clicks on the notification icon in the navigation bar.",
+              "name": "notification-icon-clicked",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
+            {
+              "description": "Dispatched when the user changes the language in the language selector.",
+              "name": "language-changed",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
               }
             }
           ]
-        },
-        {
-          "kind": "variable",
-          "name": "defaultBackgroundHover"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultBackgroundItem"
-        },
-        {
-          "kind": "variable",
-          "name": "backgroundNavOption"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "getWebRGBA",
-          "declaration": {
-            "name": "getWebRGBA",
-            "module": "src/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultBackgroundHover",
+          "name": "Navigation",
           "declaration": {
-            "name": "defaultBackgroundHover",
-            "module": "src/styles/colors.ts"
+            "name": "Navigation",
+            "module": "src/main/main.ts"
           }
         },
         {
           "kind": "js",
-          "name": "defaultBackgroundItem",
+          "name": "ZeroHeader",
           "declaration": {
-            "name": "defaultBackgroundItem",
-            "module": "src/styles/colors.ts"
+            "name": "ZeroHeader",
+            "module": "src/main/main.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "backgroundNavOption",
+          "kind": "custom-element-definition",
+          "name": "zero-header",
           "declaration": {
-            "name": "backgroundNavOption",
-            "module": "src/styles/colors.ts"
+            "name": "ZeroHeader",
+            "module": "src/main/main.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/styles/index.ts",
+      "path": "src/tags/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -580,85 +1179,16 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./colors"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./styles"
+            "package": "./tags"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/styles/styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "mixinScreen",
-          "parameters": [
-            {
-              "name": "display",
-              "default": "'block'",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "TODO: Bring all the style and typography mixins into the design system package"
-        },
-        {
-          "kind": "function",
-          "name": "genesisLogo",
-          "parameters": [
-            {
-              "name": "slot",
-              "default": "'start'"
-            }
-          ],
-          "description": "TODO"
-        },
-        {
-          "kind": "function",
-          "name": "settingsIcon",
-          "parameters": [
-            {
-              "name": "slot",
-              "default": "'start'"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "mixinScreen",
-          "declaration": {
-            "name": "mixinScreen",
-            "module": "src/styles/styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "genesisLogo",
-          "declaration": {
-            "name": "genesisLogo",
-            "module": "src/styles/styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "settingsIcon",
-          "declaration": {
-            "name": "settingsIcon",
-            "module": "src/styles/styles.ts"
-          }
-        }
-      ]
+      "path": "src/tags/tags.ts",
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",