@postnord/pn-marketweb-components 4.2.4 → 4.3.0

package/collection/components/navigation/pn-mainnav/pn-mainnav-level.css

@@ -27,6 +27,23 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 
+pn-mainnav-level {
+  --mainnav-level-bg: #ffffff;
+  --mainnav-level-link-color: #005d92;
+  --mainnav-level-2-border-top-left-radius-desktop:
+      var(--siteheader-mainnav-level-2-border-top-left-radius-desktop, 1rem);
+  --mainnav-level-2-border-top-right-radius-desktop:
+      var(--siteheader-mainnav-level-2-border-top-right-radius-desktop, 1rem);
+  --mainnav-level-2-border-bottom-right-radius-desktop:
+      var(--siteheader-mainnav-level-2-border-bottom-right-radius-desktop, 1rem);
+  --mainnav-level-2-border-bottom-left-radius-desktop:
+      var(--siteheader-mainnav-level-2-border-bottom-left-radius-desktop, 1rem);
+  --mainnav-level-2-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);
+  --mainnav-level-header-button-color: #005d92;
+  --mainnav-level-header-link-font-size: 2.4rem;
+  --mainnav-level-header-icon-size: 2.4rem;
+}
+
 pn-mainnav-level {
   display: block;
 }
@@ -34,6 +51,7 @@ pn-mainnav-level:not(.hydrated) {
   max-height: 5.6rem;
   overflow: hidden;
 }
+
 pn-mainnav-level[data-level="1"] {
   width: 100%;
   right: 0;
@@ -50,6 +68,7 @@ pn-mainnav-level[data-level="1"] {
     display: none;
   }
 }
+
 pn-mainnav-level[data-level="2"] {
   position: absolute;
   top: 0;
@@ -57,7 +76,7 @@ pn-mainnav-level[data-level="2"] {
   left: 0;
   width: 100vw;
   padding: 0;
-  background-color: #ffffff;
+  background-color: var(--mainnav-level-bg);
   z-index: 1;
   transform: translateX(100vw);
   transition: transform 0.2s 0s;
@@ -67,18 +86,18 @@ pn-mainnav-level[data-level="2"] {
 }
 @media screen and (min-width: 64em) {
   pn-mainnav-level[data-level="2"] {
-    left: 0;
     top: calc(100% + 1rem);
     bottom: auto;
-    border-radius: 1.6rem;
     width: auto;
-    padding: 1.6rem 1.6rem 0 1.6rem;
-    -webkit-box-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);
-    -moz-box-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);
-    box-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);
     height: auto;
-    z-index: 3;
+    padding: 1.6rem 1.6rem 0 1.6rem;
+    border-top-left-radius: var(--mainnav-level-2-border-top-left-radius-desktop);
+    border-top-right-radius: var(--mainnav-level-2-border-top-right-radius-desktop);
+    border-bottom-right-radius: var(--mainnav-level-2-border-bottom-right-radius-desktop);
+    border-bottom-left-radius: var(--mainnav-level-2-border-bottom-left-radius-desktop);
     display: none;
+    z-index: 3;
+    box-shadow: var(--mainnav-level-2-shadow);
   }
   pn-mainnav-level[data-level="2"][data-menuitem-rightaligned=true] {
     right: 0;
@@ -107,7 +126,7 @@ pn-mainnav-level[data-level="2"][aria-hidden=false] {
     display: grid;
     grid-template-columns: minmax(12em, 20em) 1fr;
     grid-template-rows: auto auto;
-    gap: 0px 1.6rem;
+    gap: 0 1.6rem;
     grid-template-areas: "top top" "left right";
   }
 }
@@ -124,9 +143,10 @@ pn-mainnav-level[data-level="2"][aria-hidden=false] {
   }
 }
 pn-mainnav-level[data-level="2"] a {
-  color: #005d92;
+  color: var(--mainnav-level-link-color);
   text-decoration: none;
 }
+
 pn-mainnav-level [slot=top] {
   display: flex;
 }
@@ -157,11 +177,11 @@ pn-mainnav-level [slot=top] {
 .mainnav-level-header > button {
   display: block;
   position: relative;
+  width: 100%;
+  padding: 2.4rem 0 2.4rem 6.2rem;
   border: none;
   background-color: transparent;
-  color: #005d92;
-  padding: 2.4rem 0 2.4rem 6.2rem;
-  width: 100%;
+  color: var(--mainnav-level-header-button-color);
   text-align: left;
 }
 @media screen and (min-width: 64em) {
@@ -173,12 +193,12 @@ pn-mainnav-level [slot=top] {
 .mainnav-level-header > button > pn-icon {
   speak: none;
   position: absolute;
-  height: 2.4rem;
-  width: 2.4rem;
-  left: 3rem;
   top: 50%;
+  left: 3rem;
+  width: var(--mainnav-level-header-icon-size);
+  height: var(--mainnav-level-header-icon-size);
   transform: translateY(-50%);
 }
 [data-level="2"] .mainnav-level-header > pn-mainnav-link > a {
-  font-size: 2.4rem;
+  font-size: var(--mainnav-level-header-link-font-size);
 }

package/collection/components/navigation/pn-mainnav/pn-mainnav-level.js

@@ -68,10 +68,10 @@ export class PnMainnavLevel {
         state.currentLevel = this.level;
     }
     render() {
-        return (h(Host, { key: '371552512ee381b8054f7fd0a81a5982b1d526ba', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
+        return (h(Host, { key: 'ac243e3360d377e5d6324117225f2f8a769c43f5', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                 state.openLevel = '';
                 state.currentLevel = 1;
-            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: 'b660beb4b8fecf272fd8ef59218f75a62b2dca67', name: "top" }), h("slot", { key: '9f23fba0672bf74e90f091091742c67ddd83bc16' }), h("slot", { key: 'b84d4f6abe2e8718220f231cb2ae4778758022a1', name: "additional" }), h("slot", { key: '47c442eeb3f55300630fb493a3f63ce2e9cceb31', name: "footer" })));
+            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '824623c0a89c4c15a23e866f90adf24584dee75e', name: "top" }), h("slot", { key: '9da0b6a172b8bcf943f31d72080c0a635284bbb9' }), h("slot", { key: '6bded6f5615ad6bbb6f721add8c558974f2fde3e', name: "additional" }), h("slot", { key: '02a3446012d0d132a805a207972c7034a3d8a4cf', name: "footer" })));
     }
     static get is() { return "pn-mainnav-level"; }
     static get originalStyleUrls() {

package/collection/components/navigation/pn-mainnav/pn-mainnav-link.css

@@ -27,18 +27,28 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 
+pn-mainnav-link {
+  --mainnav-link-active-desktop-color: var(--siteheader-mainnav-link-active-desktop-color, #005d92);
+  --mainnav-link-level1-indicator-color: var(--siteheader-mainnav-link-level1-indicator-color, #00a0d6);
+  --mainnav-link-level1-indicator-active-color: var(--siteheader-mainnav-link-level1-indicator-active-color, #8eddf9);
+  --mainnav-link-level1-first-border-top: 0.1rem solid #f3f2f2;
+  --mainnav-link-level1-border-bottom: var(--siteheader-mainnav-link-level1-border-bottom, 0.1rem solid #f3f2f2);
+  --mainnav-link-level2-border-bottom: var(--siteheader-mainnav-link-level2-border-bottom, 0.1rem solid #f3f2f2);
+}
+
 pn-mainnav-link {
   display: block;
 }
+
 pn-mainnav-link button,
 pn-mainnav-link a {
-  font-weight: normal;
   position: relative;
-  border: 0 none;
   display: flex;
   align-items: center;
+  border: 0 none;
   background-color: transparent;
   color: #005d92;
+  font-weight: normal;
 }
 pn-mainnav-link button:hover, pn-mainnav-link button:focus,
 pn-mainnav-link a:hover,
@@ -57,114 +67,135 @@ pn-mainnav-link a:active {
 
 @media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link {
+    position: relative;
     height: 100%;
     padding-left: 0;
-    position: relative;
     scroll-snap-align: center;
   }
 }
+
 [data-level="1"] pn-mainnav-link:first-child {
-  border-top: 0.1rem solid #f3f2f2;
+  border-top: var(--mainnav-link-level1-first-border-top);
 }
 @media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link:first-child {
     border: 0;
   }
 }
+
 [data-level="1"] pn-mainnav-link > button,
 [data-level="1"] pn-mainnav-link > a {
-  font-size: 2rem;
   width: 100%;
-  border-bottom: 0.1rem solid #f3f2f2;
   height: auto;
   padding: 1.9rem 0 1.9rem 3rem;
+  border-bottom: var(--mainnav-link-level1-border-bottom);
+  font-size: 2rem;
 }
 @media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link > button,
   [data-level="1"] pn-mainnav-link > a {
-    height: 100%;
-    border: 0;
-    font-size: 1.6rem;
-    font-weight: normal;
     position: relative;
-    outline: 0;
+    height: 100%;
     overflow: hidden;
     padding: 1.6rem 1.6rem;
+    border: 0;
+    outline: 0;
     white-space: nowrap;
+    font-size: 1.6rem;
+    font-weight: normal;
   }
+}
+
+@media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link > button::before,
   [data-level="1"] pn-mainnav-link > a::before {
     content: "";
-    background-color: #00a0d6;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 0.5em;
+    background-color: var(--mainnav-link-level1-indicator-color);
     border-radius: 0.5em 0.5em 0 0;
     transform: translateY(100%);
     transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
   }
-  [data-level="1"] pn-mainnav-link > button:hover::before, [data-level="1"] pn-mainnav-link > button:focus::before,
+}
+
+@media screen and (min-width: 64em) {
+  [data-level="1"] pn-mainnav-link > button:hover::before,
+  [data-level="1"] pn-mainnav-link > button:focus::before,
   [data-level="1"] pn-mainnav-link > a:hover::before,
   [data-level="1"] pn-mainnav-link > a:focus::before {
     transform: translateY(0);
   }
+}
+
+@media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link > button:active,
   [data-level="1"] pn-mainnav-link > a:active {
+    color: var(--mainnav-link-active-desktop-color);
     outline: 0;
     box-shadow: none;
-    color: #005d92;
   }
+}
+
+@media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link > button:active::before,
   [data-level="1"] pn-mainnav-link > a:active::before {
-    background-color: #8eddf9;
+    background-color: var(--mainnav-link-level1-indicator-active-color);
     transform: translateY(0);
   }
 }
+
 @media screen and (min-width: 64em) {
-  [data-level="1"] pn-mainnav-link > button:hover, [data-level="1"] pn-mainnav-link > button:focus,
+  [data-level="1"] pn-mainnav-link > button:hover,
+  [data-level="1"] pn-mainnav-link > button:focus,
   [data-level="1"] pn-mainnav-link > a:hover,
   [data-level="1"] pn-mainnav-link > a:focus {
     text-decoration: none;
   }
 }
+
 @media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link > button[aria-expanded=true]::before,
   [data-level="1"] pn-mainnav-link > a[aria-expanded=true]::before {
     content: "";
-    background-color: #00a0d6;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 0.5em;
+    background-color: var(--mainnav-link-level1-indicator-color);
     border-radius: 0.5em 0.5em 0 0;
     transform: translateY(0);
     transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
   }
 }
+
 [data-level="1"] pn-mainnav-link [aria-expanded=true] .first-level_icon {
   transform: rotateX(180deg);
 }
+
 [data-level="1"] pn-mainnav-link pn-icon.first-level_icon {
-  transition: 0.25s linear transform;
+  display: none;
   width: 1.92rem;
   height: 1.92rem;
-  display: none;
+  transition: 0.25s linear transform;
 }
 @media screen and (min-width: 64em) {
   [data-level="1"] pn-mainnav-link pn-icon.first-level_icon {
     display: block;
   }
 }
+
 [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow {
   display: block;
   position: absolute;
-  height: 2.4rem;
-  width: 2.4rem;
-  right: 2.4rem;
   top: 50%;
+  right: 2.4rem;
+  width: 2.4rem;
+  height: 2.4rem;
   transform: translateY(-50%);
 }
 @media screen and (min-width: 64em) {
@@ -172,11 +203,12 @@ pn-mainnav-link a:active {
     display: none;
   }
 }
+
 [data-level="1"] pn-mainnav-link pn-icon svg {
-  pointer-events: none;
-  speak: none;
   width: 100%;
   height: 100%;
+  pointer-events: none;
+  speak: none;
 }
 
 @media screen and (min-width: 64em) {
@@ -184,6 +216,7 @@ pn-mainnav-link a:active {
     min-width: unset;
   }
 }
+
 [data-level="2"] pn-mainnav-link {
   position: static;
   display: inline-block;
@@ -192,42 +225,49 @@ pn-mainnav-link a:active {
 }
 @media screen and (min-width: 64em) {
   [data-level="2"] pn-mainnav-link {
-    padding-left: 0;
     margin-bottom: 1.6rem;
+    padding-left: 0;
   }
 }
+
 [data-level="2"] pn-mainnav-link > a {
-  font-size: 1.6rem;
-  border-bottom: 0.1rem solid #f3f2f2;
   padding: 2.2rem 0 2.2rem 3rem;
+  border-bottom: var(--mainnav-link-level2-border-bottom);
   white-space: normal;
+  font-size: 1.6rem;
 }
 @media screen and (min-width: 64em) {
   [data-level="2"] pn-mainnav-link > a {
     min-width: 16em;
+    padding: 1.4rem 1.6rem;
     border: 0;
     border-radius: 1rem;
-    padding: 1.4rem 1.6rem;
   }
 }
+
 [data-level="2"] pn-mainnav-link > a:hover {
   background-color: #ffffff;
   color: #005d92;
 }
-[data-level="2"] pn-mainnav-link > a:hover, [data-level="2"] pn-mainnav-link > a:focus {
+
+[data-level="2"] pn-mainnav-link > a:hover,
+[data-level="2"] pn-mainnav-link > a:focus {
   box-shadow: none;
 }
 @media screen and (min-width: 64em) {
-  [data-level="2"] pn-mainnav-link > a:hover, [data-level="2"] pn-mainnav-link > a:focus {
+  [data-level="2"] pn-mainnav-link > a:hover,
+  [data-level="2"] pn-mainnav-link > a:focus {
     background-color: #f3f2f2;
     color: #005d92;
     text-decoration: underline;
     outline: 0;
   }
 }
-[data-level="2"] pn-mainnav-link > a:hover::before, [data-level="2"] pn-mainnav-link > a:focus::before {
+[data-level="2"] pn-mainnav-link > a:hover::before,
+[data-level="2"] pn-mainnav-link > a:focus::before {
   content: none;
 }
+
 [data-level="2"] pn-mainnav-link > a:active {
   box-shadow: none;
 }
@@ -241,10 +281,18 @@ pn-mainnav-link a:active {
 [data-level="2"] pn-mainnav-link > a:active::before {
   content: none;
 }
+
 [data-level="2"] pn-mainnav-link pn-icon {
   display: inline-block;
-  margin-left: 0.2em;
-  min-width: 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
+  min-width: 1.5rem;
+  margin-left: 0.2em;
+}
+
+[data-level="2"] pn-mainnav-link pn-icon svg {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  speak: none;
 }

package/collection/components/navigation/pn-mainnav/pn-mainnav-link.js

@@ -23,7 +23,7 @@ export class PnMainnavLink {
         state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;
     }
     render() {
-        return (h(Host, { key: '772b57cf379f452f2cf1a949033351b3cd25e764', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: '714f55ebab5091398c8ebbb800d1daa7cb7fdc12' })));
+        return (h(Host, { key: '3c93d6d6fa93518b592e3a91f7a19b8875d8a786', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: '365a480af84435a0d0ae0c9c95cf5461410f539f' })));
     }
     static get is() { return "pn-mainnav-link"; }
     static get originalStyleUrls() {

package/collection/components/navigation/pn-mainnav/pn-mainnav-list.css

@@ -27,6 +27,12 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 
+pn-mainnav-list {
+  --mainnav-list-secondary-border-right: 0.1rem solid #d3cecb;
+  --mainnav-list-heading-font-size: 1.8rem;
+  --mainnav-list-heading-color:var(--siteheader-mainnav-list-heading-color, #000000);
+}
+
 pn-mainnav-list {
   display: block;
   overflow: visible;
@@ -35,15 +41,17 @@ pn-mainnav-list {
   padding: 0;
   grid-area: right;
 }
+
 @media screen and (min-width: 64em) {
   pn-mainnav-list + pn-mainnav-list {
     grid-area: left;
-    border-right: 0.1rem solid #d3cecb;
+    border-right: var(--mainnav-list-secondary-border-right);
     margin-bottom: 1.6rem;
     margin-right: -0.7rem;
     padding-right: 0.7rem;
   }
 }
+
 [data-level="1"] > pn-mainnav-list {
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
@@ -57,6 +65,7 @@ pn-mainnav-list {
     padding: 0;
   }
 }
+
 @media screen and (min-width: 64em) {
   [data-level="2"] > pn-mainnav-list[data-navlist-showcolumns=true] {
     column-count: 2;
@@ -69,8 +78,9 @@ pn-mainnav-list {
   display: none;
   font-weight: bold;
   column-span: all;
-  font-size: 1.8rem;
+  font-size: var(--mainnav-list-heading-font-size);
   padding: 1.4rem 1.4rem 1.4rem 4.8rem;
+  color: var(--mainnav-list-heading-color);
 }
 @media screen and (min-width: 64em) {
   .mainnav-list-heading {

package/collection/components/navigation/pn-mainnav/pn-mainnav-list.js

@@ -9,7 +9,7 @@ export class PnMainnavList {
         this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;
     }
     render() {
-        return (h(Host, { key: '86966c572a7cbd574263cbc2c86cd9453f86347a', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: '5abcc1048dbf7edc1eda42e56d17fd988d9cc16a' })));
+        return (h(Host, { key: '3f433037d2fc867c74a1f5759fadb2f4fffd2c57', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: '52fd5e61c361e7660f43780fbdf8050835cc7c16' })));
     }
     static get is() { return "pn-mainnav-list"; }
     static get originalStyleUrls() {

package/collection/components/navigation/pn-mainnav/pn-mainnav.css

@@ -27,6 +27,16 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 
+pn-mainnav {
+  --mainnav-nav-background-color: #ffffff;
+  --mainnav-toggle-background-color: #005d92;
+  --mainnav-toggle-text-color: #ffffff;
+  --mainnav-toggle-border-radius: 2.4rem;
+  --mainnav-toggle-padding: 0.6rem 1.6rem;
+  --mainnav-toggle-font-size: 1.6rem;
+  --mainnav-top-position: var(--siteheader-mainnav-top-position-mobile,3em);
+}
+
 pn-mainnav {
   display: flex;
   flex-flow: row-reverse;
@@ -44,43 +54,41 @@ pn-mainnav {
     flex-flow: column;
   }
 }
+
 @media screen and (min-width: 64em) {
   pn-mainnav [slot=footer] {
     display: none;
   }
 }
+
 pn-mainnav > nav {
-  height: auto;
-  width: 100vw;
-  background-color: #ffffff;
-  z-index: 2;
-  transform: translateX(100vw);
-  transition: transform 0.2s 0s;
-  transition-property: transform, visibility;
   display: flex;
   flex-flow: column;
-  visibility: hidden;
   position: fixed;
-  top: 3em;
+  top: var(--mainnav-top-position);
   bottom: 0;
   left: 0;
+  width: 100vw;
+  height: auto;
+  background-color: var(--mainnav-nav-background-color);
+  z-index: 2;
+  visibility: hidden;
+  transform: translateX(100vw);
+  transition: transform 0.2s 0s;
+  transition-property: transform, visibility;
 }
 @media screen and (min-width: 48em) {
   pn-mainnav > nav {
     top: 6.5em;
   }
 }
-pn-mainnav > nav[data-menu-open=true] {
-  visibility: visible;
-  transform: translateX(0);
-}
 @media screen and (min-width: 64em) {
   pn-mainnav > nav {
     flex-flow: row-reverse;
-    top: 0;
     position: static;
-    height: auto;
+    top: 0;
     width: 100%;
+    height: auto;
     justify-content: space-between;
     visibility: visible;
     transform: translateX(0);
@@ -106,24 +114,29 @@ pn-mainnav > nav button {
 .mainnav-toggle > button {
   display: flex;
   align-items: center;
-  background-color: #005d92;
-  color: #ffffff;
-  border-radius: 2.4rem;
+  background-color: var(--mainnav-toggle-background-color);
+  color: var(--mainnav-toggle-text-color);
   border: none;
-  padding: 0.6rem 1.6rem;
+  border-radius: var(--mainnav-toggle-border-radius);
+  padding: var(--mainnav-toggle-padding);
   cursor: pointer;
-  font-size: 1.6rem;
+  font-size: var(--mainnav-toggle-font-size);
 }
 .mainnav-toggle > button:focus {
   outline: 0;
 }
 .mainnav-toggle > button pn-icon {
-  margin-left: 0.8rem;
   display: block;
+  margin-left: 0.8rem;
 }
 .mainnav-toggle > button svg {
   display: block;
   margin: -0.2rem -0.5rem -0.2rem 0;
-  height: 1.9rem;
   width: 1.9rem;
+  height: 1.9rem;
+}
+
+pn-mainnav > nav[data-menu-open=true] {
+  visibility: visible;
+  transform: translateX(0);
 }

package/collection/components/navigation/pn-mainnav/pn-mainnav.js

@@ -51,7 +51,7 @@ export class PnMainnav {
         state.openLevel = event.detail;
     }
     render() {
-        return (h(Host, { key: '6514e2ec63194c0ec5b0ecd048abefd2d172d411' }, h("div", { key: 'b23ea254b54e7012a1a266c8f8079660c19ca0fb', class: "mainnav-toggle" }, h("button", { key: '560f2c92bb4d60e26ff8098774ba35c323a28a87', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: '4b36d30045d98fa12d5e1d0df6875c8f41a51e73', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: '09d11719992e893a0d746a0b001ff8c06427186a', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: '422b9d89ae5b8a3b56047a6c98a380336f346f1e' }))));
+        return (h(Host, { key: '1b30fcc03e3f10d965469b31cdb62617cdc16c8b' }, h("div", { key: 'df334e4a7a9c9a34a2dddebab2d5b5f9d815e8c0', class: "mainnav-toggle" }, h("button", { key: '094bcd9687a0dfe49de1cf442ec18d766e97b998', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: '92d31dd8f0842406ac92ca0930b4862e64805ae2', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: 'c583056ed35ca91dc776e2a4f7d568a353c0f27d', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: 'e66850f10c8b2d2963d93b4fc9bfead91be77777' }))));
     }
     static get is() { return "pn-mainnav"; }
     static get originalStyleUrls() {