@genesislcap/foundation-header 14.357.0 → 14.358.0

package/dist/custom-elements.json

@@ -25,6 +25,48 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/rapid-components.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerCommonRapidComponents",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerCommonRapidComponents",
+          "declaration": {
+            "name": "registerCommonRapidComponents",
+            "module": "src/components/rapid-components.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/zero-components.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerCommonZeroComponents",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerCommonZeroComponents",
+          "declaration": {
+            "name": "registerCommonZeroComponents",
+            "module": "src/components/zero-components.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/config/config.ts",
@@ -180,48 +222,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/rapid-components.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "registerCommonRapidComponents",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerCommonRapidComponents",
-          "declaration": {
-            "name": "registerCommonRapidComponents",
-            "module": "src/components/rapid-components.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/zero-components.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "registerCommonZeroComponents",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerCommonZeroComponents",
-          "declaration": {
-            "name": "registerCommonZeroComponents",
-            "module": "src/components/zero-components.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/main/index.ts",
@@ -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      <slot name=\"routes-end\" data-test-id=\"route-end-buttons\"></slot>\n      ${when(\n        (x) => x.showEnvironmentIndicator,\n        html<Navigation>`\n          <${environmentIndicatorTag} class=\"environment-indicator\"></${environmentIndicatorTag}>\n        `,\n      )}\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            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`",
+          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div\n    class=\"nav-listbox\"\n    data-test-id=\"nav-bar\"\n    part=\"root\"\n    role=\"navigation\"\n    aria-label=\"Main menu\"\n  >\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      <slot name=\"routes-end\" data-test-id=\"route-end-buttons\"></slot>\n      ${when(\n        (x) => x.showEnvironmentIndicator,\n        html<Navigation>`\n          <${environmentIndicatorTag} class=\"environment-indicator\"></${environmentIndicatorTag}>\n        `,\n      )}\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            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": {
@@ -3199,12 +3199,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/templates/rapid.template.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/styles/colors.ts",
@@ -3366,6 +3360,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/templates/rapid.template.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/index.ts",

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,iDA2WgD,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA6YgD,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":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAc1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAOzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAsLF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BAoHvB,CAAC;AAiDF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAAI,WAAM,2BAIzC,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;AAc1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAOzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAwLF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA0HvB,CAAC;AAiDF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAAI,WAAM,2BAIzC,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.styles.js

@@ -34,7 +34,7 @@ export const MainStyles = css `
   }
 
   .nav-listbox {
-    background: var(--neutral-layer-2);
+    background: var(--foundation-header-background-color, var(--neutral-layer-1));
     display: flex;
     flex: 1;
     flex-direction: row;
@@ -46,10 +46,14 @@ export const MainStyles = css `
   .nav-button {
     height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
     margin: 0;
+    background: var(--foundation-header-rest-item-background, var(--neutral-fill-rest));
+
+    &:hover {
+      color: var(--accent-foreground-hover);
+    }
   }
 
   .nav-leftside {
-    background: var(--neutral-layer-2);
     flex: 1;
     display: flex;
     flex-direction: row;
@@ -188,7 +192,7 @@ export const MainStyles = css `
 
   ${flyoutTag}::part(header),
   ${flyoutTag}::part(content) {
-    padding: calc(var(--design-unit) * 2px);
+    padding: calc(var(--design-unit) * 3px);
   }
 
   .notifications-button {
@@ -198,6 +202,7 @@ export const MainStyles = css `
   .side-nav-buttons-container {
     display: flex;
     flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
   }
 
   .account-menu {
@@ -254,8 +259,8 @@ export const MainStyles = css `
     top: 100%;
     left: 0;
     min-width: 175px;
-    background: var(--neutral-layer-2);
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-1);
+    background: var(--foundation-header-background-color, var(--neutral-layer-2));
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
     z-index: 1000;
     opacity: 0%;
     visibility: hidden;
@@ -332,6 +337,30 @@ export const MainStyles = css `
 
   .side-nav-buttons-container .nav-button-wrapper {
     width: 100%;
+    display: flex;
+
+    rapid-button {
+      background: transparent;
+      border-radius: 0;
+      height: calc(
+        (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+      );
+    }
+
+    rapid-button::part(control) {
+      justify-content: flex-start;
+    }
+
+    rapid-button.route-selected {
+      background-color: var(--neutral-fill-stealth-rest);
+      border-left: 3px solid
+        var(--foundation-header-selected-item-background, var(--accent-fill-rest));
+      color: var(--accent-foreground-rest);
+
+      &:hover {
+        color: var(--accent-foreground-rest);
+      }
+    }
   }
 
   .side-nav-buttons-container .nav-button-wrapper .nav-button {
@@ -350,7 +379,12 @@ export const MainStyles = css `
 
   .route-selected,
   .nav-submenu-wrapper .nav-button.sub-selected {
-    background-color: var(--highlight-selected-menu, var(--accent-fill-rest));
+    background-color: var(--foundation-header-selected-item-background, var(--accent-fill-rest));
+    color: var(--foreground-on-accent-rest);
+
+    &:hover {
+      color: var(--foreground-on-accent-rest);
+    }
   }
 
   .dropdown-indicator {

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

@@ -67,6 +67,7 @@ const routeNavItemsTemplate = (navId) => html `
             <div class="nav-button-wrapper">
               <${buttonTag}
                 appearance="neutral-grey"
+                part="${(x) => `${x.navId}-item-rest`} ${(x, c) => navigationClassMatcher(`${x.navId}-item-active`, x.routePath, c.parent.pathName)}"
                 class="nav-button ${(x, c) => navigationClassMatcher('route-selected', x.routePath, c.parent.pathName)} ${(x, c) => classNames(['has-active-child', c.parent.hasActiveChild(x)])}"
                 slot="routes"
                 @click=${(x, c) => c.parent.handleNavButtonClick(x)}
@@ -138,6 +139,7 @@ const sideNavTemplate = html `
     data-test-id="side-nav"
     role="navigation"
     aria-label="Side navigation"
+    part="flyout-root"
   >
     <img
       slot="title"
@@ -184,7 +186,13 @@ const sideNavTemplate = html `
  */
 export const navTemplate = html `
   ${when((x) => !x.hideSideBar, sideNavTemplate)}
-  <div class="nav-listbox" data-test-id="nav-bar" role="navigation" aria-label="Main menu">
+  <div
+    class="nav-listbox"
+    data-test-id="nav-bar"
+    part="root"
+    role="navigation"
+    aria-label="Main menu"
+  >
     ${app.registerElementsTarget('header-start')}
     <div class="nav-leftside">
       ${app.registerElementsTarget('nav-start')}

package/dist/esm/templates/rapid.template.js

@@ -182,7 +182,7 @@ const sideNavTemplate = html `
  */
 export const rapidTemplate = html `
 ${when((x) => !x.hideSideBar, sideNavTemplate)}
-<div class="nav-listbox" data-test-id="nav-bar" role="navigation" aria-label="Main menu">
+<div class="nav-listbox" part="root" data-test-id="nav-bar" role="navigation" aria-label="Main menu">
   ${app.registerElementsTarget('header-start')}
   <div class="nav-leftside">
     ${app.registerElementsTarget('nav-start')}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.357.0",
+  "version": "14.358.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-header.d.ts",
@@ -77,28 +77,28 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.357.0",
-    "@genesislcap/genx": "14.357.0",
-    "@genesislcap/rollup-builder": "14.357.0",
-    "@genesislcap/ts-builder": "14.357.0",
-    "@genesislcap/uvu-playwright-builder": "14.357.0",
-    "@genesislcap/vite-builder": "14.357.0",
-    "@genesislcap/webpack-builder": "14.357.0"
+    "@genesislcap/foundation-testing": "14.358.0",
+    "@genesislcap/genx": "14.358.0",
+    "@genesislcap/rollup-builder": "14.358.0",
+    "@genesislcap/ts-builder": "14.358.0",
+    "@genesislcap/uvu-playwright-builder": "14.358.0",
+    "@genesislcap/vite-builder": "14.358.0",
+    "@genesislcap/webpack-builder": "14.358.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-auth": "14.357.0",
-    "@genesislcap/foundation-comms": "14.357.0",
-    "@genesislcap/foundation-events": "14.357.0",
-    "@genesislcap/foundation-i18n": "14.357.0",
-    "@genesislcap/foundation-logger": "14.357.0",
-    "@genesislcap/foundation-login": "14.357.0",
-    "@genesislcap/foundation-shell": "14.357.0",
-    "@genesislcap/foundation-ui": "14.357.0",
-    "@genesislcap/foundation-user": "14.357.0",
-    "@genesislcap/foundation-utils": "14.357.0",
-    "@genesislcap/foundation-zero": "14.357.0",
-    "@genesislcap/rapid-design-system": "14.357.0",
-    "@genesislcap/web-core": "14.357.0"
+    "@genesislcap/foundation-auth": "14.358.0",
+    "@genesislcap/foundation-comms": "14.358.0",
+    "@genesislcap/foundation-events": "14.358.0",
+    "@genesislcap/foundation-i18n": "14.358.0",
+    "@genesislcap/foundation-logger": "14.358.0",
+    "@genesislcap/foundation-login": "14.358.0",
+    "@genesislcap/foundation-shell": "14.358.0",
+    "@genesislcap/foundation-ui": "14.358.0",
+    "@genesislcap/foundation-user": "14.358.0",
+    "@genesislcap/foundation-utils": "14.358.0",
+    "@genesislcap/foundation-zero": "14.358.0",
+    "@genesislcap/rapid-design-system": "14.358.0",
+    "@genesislcap/web-core": "14.358.0"
   },
   "repository": {
     "type": "git",
@@ -109,5 +109,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "5335c46d078e396fc60085ba28420fcf5a7af8b9"
+  "gitHead": "7aee2c72c154451a9da8c25bcaaa25f2e44ba9ef"
 }