@postnord/pn-marketweb-components 2.0.73 → 2.0.75

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/controller/pn-segmented-control.js

@@ -11,12 +11,29 @@ export class PnSegmentedControl {
   }
   changeHandler({ target }) {
     this.value = target.value;
-    this.currentSelection = target.closest('pn-segment');
+    this.selectSegment(target.closest('pn-segment'));
   }
   handleResize() {
     this.rerender();
   }
-  selectionHandler() {
+  valueHandler() {
+    this.selectSegment(false);
+  }
+  selectSegment(el) {
+    if (el) {
+      this.currentSelection = el;
+      this.rerender();
+      return;
+    }
+    this.segments.forEach(segmentEl => {
+      if (this.value === segmentEl.value) {
+        this.currentSelection = segmentEl;
+        segmentEl.setAttribute('selected', 'true');
+      }
+      else {
+        segmentEl.removeAttribute('selected');
+      }
+    });
     this.rerender();
   }
   componentDidLoad() {
@@ -33,6 +50,7 @@ export class PnSegmentedControl {
     this.hoverBg = this.hostElement.querySelector('.pn-sc-hover');
     this.hostElement.addEventListener('mouseover', ({ target }) => this.calcHighlight(target, this.hoverBg));
     this.setActiveSegment();
+    this.rerender();
   }
   setActiveSegment() {
     this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
@@ -52,15 +70,17 @@ export class PnSegmentedControl {
   }
   /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
   calcHighlight(el, bgEl) {
-    if (!(el === null || el === void 0 ? void 0 : el.closest('pn-segment')))
-      return;
-    const elRect = el.closest('pn-segment').getBoundingClientRect();
-    const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
-    const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
-    const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
-    bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
-    bgEl.style.setProperty('width', `${segmentWidth}px`);
-    bgEl.style.setProperty('height', `${segmentHeight}px`);
+    requestAnimationFrame(() => {
+      if (!(el === null || el === void 0 ? void 0 : el.closest('pn-segment')))
+        return;
+      const elRect = el.closest('pn-segment').getBoundingClientRect();
+      const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
+      const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
+      const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
+      bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
+      bgEl.style.setProperty('width', `${segmentWidth}px`);
+      bgEl.style.setProperty('height', `${segmentHeight}px`);
+    });
   }
   /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
   /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
@@ -166,8 +186,8 @@ export class PnSegmentedControl {
   }; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
-      "propName": "currentSelection",
-      "methodName": "selectionHandler"
+      "propName": "value",
+      "methodName": "valueHandler"
     }]; }
   static get listeners() { return [{
       "name": "change",

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.css

@@ -1,6 +1,6 @@
 pn-segment {
   position: relative;
-  color: #005D92;
+  color: #005d92;
   margin-right: 0.5em;
   z-index: 2;
   white-space: nowrap;

package/umd/modules/@postnord/web-components/collection/components/input/pn-select/pn-select.css

@@ -21,10 +21,10 @@ pn-select.select-label > label {
   left: 0;
   transform: translateY(-100%);
   font-size: 0.875em;
-  color: #5E554A;
+  color: #5e554a;
 }
 pn-select.select-error {
-  color: #A70707;
+  color: #a70707;
 }
 pn-select.select-error.select-error-message {
   padding-bottom: 1.9em;
@@ -33,16 +33,16 @@ pn-select.select-error.select-error-message .select-content {
   margin-bottom: 1.9em;
 }
 pn-select.select-error > label {
-  color: #A70707;
+  color: #a70707;
 }
 pn-select.select-error .current-selection > pn-option {
-  color: #A70707;
+  color: #a70707;
 }
 pn-select.select-error .current-selection > svg.arrow {
-  fill: #A70707;
+  fill: #a70707;
 }
 pn-select.select-error > small {
-  color: #A70707;
+  color: #a70707;
   font-size: 0.75em;
   font-size: max(.6em, 1.2rem);
   position: absolute;
@@ -56,7 +56,7 @@ pn-select.select-error > small > pn-icon {
 pn-select.select-error .select-bg-top,
 pn-select.select-error .select-bg-bottom,
 pn-select.select-error .select-bg {
-  border-color: #A70707;
+  border-color: #a70707;
 }
 pn-select > span {
   min-height: 1.5em;
@@ -69,19 +69,19 @@ pn-select > span {
 pn-select:hover .select-bg,
 pn-select:hover .select-bg-top,
 pn-select:hover .select-bg-bottom {
-  border-color: #00A0D6;
+  border-color: #00a0d6;
 }
 pn-select:focus .select-bg-top, pn-select:focus-within .select-bg-top, pn-select:not(.search):active .select-bg-top {
-  border-color: #005D92;
-  box-shadow: -0.1rem -0.1rem 0 0 #005D92, 0.1rem -0.1rem 0 0 #005D92;
+  border-color: #005d92;
+  box-shadow: -0.1rem -0.1rem 0 0 #005d92, 0.1rem -0.1rem 0 0 #005d92;
 }
 pn-select:focus .select-bg, pn-select:focus-within .select-bg, pn-select:not(.search):active .select-bg {
-  border-color: #005D92;
-  box-shadow: -0.1rem 0 0 0 #005D92, -0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92;
+  border-color: #005d92;
+  box-shadow: -0.1rem 0 0 0 #005d92, -0.1rem 0 0 0 #005d92, 0.1rem 0 0 0 #005d92, 0.1rem 0 0 0 #005d92;
 }
 pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-select:not(.search):active .select-bg-bottom {
-  border-color: #005D92;
-  box-shadow: 0.1rem 0.1rem 0 0 #005D92, -0.1rem 0.1rem 0 0 #005D92;
+  border-color: #005d92;
+  box-shadow: 0.1rem 0.1rem 0 0 #005d92, -0.1rem 0.1rem 0 0 #005d92;
 }
 
 .current-selection {
@@ -97,7 +97,7 @@ pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-
 }
 .current-selection pn-option {
   pointer-events: none;
-  color: #005D92;
+  color: #005d92;
   font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
@@ -110,7 +110,7 @@ pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-
 }
 .current-selection > svg.arrow {
   transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;
-  fill: #005D92;
+  fill: #005d92;
   flex-shrink: 0;
   margin-left: 0.5em;
 }
@@ -150,14 +150,14 @@ div.select-options > * {
   width: 100%;
 }
 div.select-options > hr {
-  border: 0.1rem solid #005D92;
+  border: 0.1rem solid #005d92;
   border-bottom: 0;
   margin: 0.6em 0 0;
   opacity: 0;
   transition: opacity 0.4s;
 }
 div.select-options input[type=text] {
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   width: 100%;
   padding: 0.5em;
   border-radius: 0.8rem;
@@ -165,11 +165,11 @@ div.select-options input[type=text] {
   transition: box-shadow 0.1s ease-in-out, border 0.1s;
 }
 div.select-options input[type=text]:hover {
-  border: 0.1rem solid #00A0D6;
+  border: 0.1rem solid #00a0d6;
 }
 div.select-options input[type=text]:focus {
-  box-shadow: 0 0 0 0.1rem #005D92;
-  border: 0.1rem solid #005D92;
+  box-shadow: 0 0 0 0.1rem #005d92;
+  border: 0.1rem solid #005d92;
 }
 div.select-options .select-search,
 div.select-options pn-option {

package/umd/modules/@postnord/web-components/collection/components/input/pn-toggle-switch/pn-toggle-switch.css

@@ -72,13 +72,13 @@ pn-toggle-switch .pn-toggle-switch + .pn-toggle .bg {
   background: #969087;
 }
 pn-toggle-switch .pn-toggle-switch:focus + .pn-toggle .bg, pn-toggle-switch .pn-toggle-switch:active + .pn-toggle .bg {
-  box-shadow: 0 0 0 0.3rem white, 0 0 0 0.6rem #005D92;
+  box-shadow: 0 0 0 0.3rem white, 0 0 0 0.6rem #005d92;
 }
 pn-toggle-switch .pn-toggle-switch:hover + .pn-toggle .bg {
-  background: #5E554A;
+  background: #5e554a;
 }
 pn-toggle-switch .pn-toggle-switch:hover:checked + .pn-toggle .bg {
-  background: #0D234B;
+  background: #0d234b;
   opacity: 1;
 }
 pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle {
@@ -92,7 +92,7 @@ pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle pn-spinner {
   transition-delay: 0.3s;
 }
 pn-toggle-switch .pn-toggle-switch:checked + .pn-toggle .bg {
-  background: #005D92;
+  background: #005d92;
 }
 pn-toggle-switch .pn-toggle-switch:checked + .pn-toggle > .circle {
   transform: translateX(100%);
@@ -109,5 +109,5 @@ pn-toggle-switch .pn-toggle-switch:disabled:hover + .pn-toggle .bg {
   background: #969087;
 }
 pn-toggle-switch .pn-toggle-switch:disabled:hover:checked + .pn-toggle .bg {
-  background: #005D92;
+  background: #005d92;
 }

package/umd/modules/@postnord/web-components/collection/components/layout/pn-header/header.stories.js

@@ -0,0 +1,110 @@
+import readme from "./readme.md";
+
+export default {
+  title: 'layout/Header',
+  parameters: {
+    notes: readme
+  },
+  args: {
+    color: 'blue',
+    heading: 'Example heading',
+  },
+ argTypes: {
+  color: {
+    control: 'select',
+    options: ['blue', 'coral', 'orange', 'gray', 'green']
+  },
+  maxWidth: {
+    name: 'max-width',
+    control: 'text'
+  }
+ } 
+};
+
+
+const BottomNavTemplate = (args) => (
+  `<pn-header color="${args.color}" heading="${args.heading}" max-width="${args.maxWidth}">
+      Impedit, consequatur est delectus et totam sit nesciunt reiciendis suscipit recusandae ut aspernatur cupiditate. Voluptates, ad culpa.
+        
+      <pn-page-nav slot="bottom-menu" value="one" dropdown="more">
+        <pn-page-nav-item value="one" icon="home">One</pn-page-nav-item>
+        <pn-page-nav-item value="two" icon="box-pin">Two</pn-page-nav-item>
+        <pn-page-nav-item value="three" icon="bolt">Three</pn-page-nav-item>
+        <pn-page-nav-item value="three" icon="box">Four</pn-page-nav-item>
+
+        <pn-page-nav-dropdown-item slot="dropdown-item">Five</pn-page-nav-dropdown-item>
+        <pn-page-nav-dropdown-item slot="dropdown-item">Six</pn-page-nav-dropdown-item>
+        <pn-page-nav-dropdown-item slot="dropdown-item">Seven</pn-page-nav-dropdown-item>
+      </pn-page-nav>
+
+      <svg slot="illustration" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 152"><g clip-path="url(#a)"><path d="M209.401 64.084h-50.189V30.481h56.232V58.06c0 3.338-2.71 6.025-6.043 6.025Z" fill="#005D92"/><path d="M148.698 64.084h11.544v-34.96h-15.42v31.079a3.878 3.878 0 0 0 3.876 3.881Z" fill="#0D234B"/><path d="M215.065 36.724h-55.473a3.808 3.808 0 0 1-3.794-3.8c0-2.09 1.707-3.8 3.794-3.8h55.473a3.808 3.808 0 0 1 3.794 3.8c0 2.09-1.707 3.8-3.794 3.8Z" fill="#005D92"/><path d="M145.174 36.724h6.125a3.809 3.809 0 0 0 3.794-3.8c0-2.09-1.708-3.8-3.794-3.8h-6.125a3.808 3.808 0 0 0-3.794 3.8c0 2.09 1.707 3.8 3.794 3.8ZM215.444 37.457l-55.175 5.972v-6.705h55.175v.733Z" fill="#0D234B"/><path d="M168.345 59.551h4.634a3.39 3.39 0 0 0 3.387-3.393 3.39 3.39 0 0 0-3.387-3.392h-4.634a3.392 3.392 0 0 0-3.388 3.392c.027 1.873 1.545 3.393 3.388 3.393ZM181.868 59.578a3.39 3.39 0 0 1-3.387-3.392 3.39 3.39 0 0 1 3.387-3.393 3.39 3.39 0 0 1 3.388 3.393 3.39 3.39 0 0 1-3.388 3.392Z" fill="#00A0D6"/><path d="M203.9 63.731V28.554s-1.328-4.343 1.084-4.397c2.412-.054 1.165 3.637-.433 4.397-.895.434-5.854-.515-5.664-2.687.189-2.171 4.01-.244 5.013 2.687M215.363 44.514H154.47" stroke="#0D234B" stroke-width="2.5" stroke-miterlimit="10"/><path d="m268.832 52.304 33.983-19.38v76.435l-31.327 1.384-2.656-58.439Z" fill="#FBC2C1"/><path d="m271.488 110.743 45.175-18.729a24.278 24.278 0 0 0 12.954-12.73l11.599-26.491" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M271.487 50.812v43.102l-33.848 11.998-16.395-27.225 50.243-27.875Z" fill="#FBC2C1"/><path d="M222.897 134.466h-63.469V66.337h69.783v61.804c0 3.475-2.846 6.325-6.314 6.325Z" fill="#00A0D6"/><path d="M141.921 134.466h19.268V64.084h-25.745v63.895c0 3.582 2.9 6.487 6.477 6.487Z" fill="#005D92"/><path d="M228.561 76.76h-68.509c-3.496 0-6.315-2.85-6.315-6.324a6.326 6.326 0 0 1 6.315-6.325h68.509c3.495 0 6.314 2.85 6.314 6.325.027 3.501-2.819 6.324-6.314 6.324Z" fill="#00A0D6"/><path d="M136.042 76.76h10.243c3.496 0 6.315-2.85 6.315-6.324a6.326 6.326 0 0 0-6.315-6.325h-10.243c-3.496 0-6.315 2.85-6.315 6.325-.027 3.501 2.819 6.324 6.315 6.324ZM229.211 78.036l-68.021 8.55V76.76h68.021v1.276Z" fill="#005D92"/><path d="M176.746 123.256h13.495a6.31 6.31 0 0 0 6.315-6.325 6.309 6.309 0 0 0-6.315-6.324h-13.495a6.309 6.309 0 0 0-6.315 6.324c-.027 3.502 2.819 6.325 6.315 6.325Z" fill="#8EDDF9"/><path d="m170.431 131.154 12.466-7.057a11.367 11.367 0 0 0 4.228-4.18l3.523-6.08a.704.704 0 0 0 .081-.57c-.136-.434-.596-.624-.976-.434l-8.536 4.044c-2.006.95-4.417.19-5.556-1.737-.487-.869-.189-1.981.678-2.47l10.65-5.89a8.51 8.51 0 0 1 3.415-1.059l12.791-1.194a2.43 2.43 0 0 0 .948-.298l12.873-7.058.948 2.063 9.187 16.937-11.056 3.61-4.526 8.958a16.41 16.41 0 0 1-5.691 6.405l-6.26 4.18a4.192 4.192 0 0 1-5.474-.733l-.678-.787-3.631 2.036a3.928 3.928 0 0 1-5.095-1.113l-.759-1.058-1.192.651a3.896 3.896 0 0 1-5.122-1.221l-1.166-1.683-2.926 1.493c-1.599.814-3.578.217-4.418-1.385-.894-1.493-.298-3.474 1.274-4.37Z" fill="#9B1C2E"/><path d="m230.783 90.413 32.277-8.143M176.502 135.606l8.889-4.669 6.287-5.89M184.036 137.859l9.051-5.673 4.58-4.533M193.71 138.13l6.884-4.506 4.227-4.071" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M221.135 118.18s-5.447-9.962-4.092-20.982l12.846 18.132-8.754 2.85Z" fill="#500715"/><path d="M271.487 65.441v45.302l-38.075 13.463c-13.062-15.227-16.396-27.225-16.396-27.225l54.471-31.54Z" fill="#FBC2C1"/><path opacity=".4" d="M263.249 93.616a5.587 5.587 0 0 1-5.582-5.592 5.587 5.587 0 0 1 5.582-5.591 5.587 5.587 0 0 1 5.583 5.591 5.587 5.587 0 0 1-5.583 5.592Z" fill="#FDEFEE"/><path d="M257.829 58.384a5.575 5.575 0 0 0 5.23 3.61 5.58 5.58 0 0 0 5.583-5.591 5.674 5.674 0 0 0-1.139-3.393l-9.674 5.374Z" fill="#FDEFEE"/><path opacity=".4" d="M251.731 76.977a5.746 5.746 0 0 0 .217-1.547 5.579 5.579 0 0 0-5.582-5.591 5.58 5.58 0 0 0-5.583 5.591c0 2.633 1.843 4.859 4.282 5.456l6.666-3.909ZM243.276 99.451a5.587 5.587 0 0 1-5.583-5.591c0-3.088 2.5-5.591 5.583-5.591a5.587 5.587 0 0 1 5.582 5.591 5.587 5.587 0 0 1-5.582 5.591ZM263.222 113.647v-.38a5.58 5.58 0 0 0-5.583-5.591 5.58 5.58 0 0 0-5.583 5.591c0 1.466.57 2.796 1.491 3.8l9.675-3.42ZM236.962 118.669a5.587 5.587 0 0 1-5.582-5.592 5.586 5.586 0 0 1 5.582-5.591 5.587 5.587 0 0 1 5.583 5.591 5.587 5.587 0 0 1-5.583 5.592Z" fill="#FDEFEE"/><path d="m229.211 90.114 42.276-24.673" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M60.785 123.229V77.547" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M44.498 126.974h32.574a3.762 3.762 0 0 0 3.767-3.773c0-2.09-1.68-3.773-3.767-3.773H44.498a3.762 3.762 0 0 0-3.767 3.773c0 2.09 1.68 3.773 3.767 3.773Z" fill="#F06365"/><path d="M51.002 152.027H70.92a1.54 1.54 0 0 0 1.518-1.248l4.715-23.913H44.416l5.095 23.913a1.511 1.511 0 0 0 1.49 1.248Z" fill="#F06365"/><path d="M60.704 91.634c-12.333 0-22.33-10.013-22.33-22.365 0-12.353 9.997-22.366 22.33-22.366 12.333 0 22.33 10.013 22.33 22.366 0 12.352-9.998 22.365-22.33 22.365Z" fill="#005E41"/><path d="M40.216 78.198c-.108-.244-.19-.488-.298-.732 2.764.488 6.396.57 10.108.651 6.206.163 12.602.326 16.288 2.226 3.36 1.737 5.257 4.831 6.314 7.79-.19.135-.38.244-.596.353-1.003-2.878-2.792-5.89-6.044-7.546-3.55-1.846-9.891-2.009-15.989-2.172-3.55-.054-7.019-.135-9.783-.57ZM69.593 69.621c-3.117 1.955-7.128 2.09-9.946 1.9-3.469-.271-7.127-1.221-10-2.66-4.363-2.171-8.428-2.551-11.22-1.085.028-.272.028-.516.055-.787 2.98-1.358 7.073-.923 11.463 1.248 5.61 2.796 14.363 3.854 19.295.787 2.683-1.683 4.065-4.37 4.065-8.034 0-2.47-.948-4.479-2.818-5.999-4.905-3.99-15.284-4.044-23.577-3.284.352-.271.705-.543 1.057-.787.434-.027.867-.054 1.328-.109 10.515-.678 17.805.543 21.653 3.638 2.032 1.655 3.09 3.854 3.09 6.54-.082 3.937-1.546 6.84-4.445 8.632Z" fill="#002F24"/><path d="M77.153 126.866H44.416l31.382 6.948 1.355-6.948Z" fill="#9B1C2E"/></g><defs><clipPath id="a"><path fill="#fff" transform="matrix(-1 0 0 1 271 0)" d="M0 0h271v152H0z"/></clipPath></defs></svg>
+    </pn-header>
+  `
+);
+
+export const BottomNav = BottomNavTemplate.bind({});
+BottomNav.args = {
+  color: 'orange'
+}
+/* ---------------------------------------TOP NAV--------------------------------------- */
+
+const TopNavTemplate = (args) => (
+  `<pn-header color="${args.color}" heading="${args.heading}" max-width="${args.maxWidth}">
+      <pn-page-nav slot="top-menu" value="one" dropdown="more">
+        <pn-page-nav-item value="one" icon="home">One</pn-page-nav-item>
+        <pn-page-nav-item value="two" icon="box-pin">Two</pn-page-nav-item>
+        <pn-page-nav-item value="three" icon="bolt">Three</pn-page-nav-item>
+        <pn-page-nav-item value="three" icon="box">Four</pn-page-nav-item>
+
+        <pn-page-nav-dropdown-item slot="dropdown-item">Five</pn-page-nav-dropdown-item>
+        <pn-page-nav-dropdown-item slot="dropdown-item">Six</pn-page-nav-dropdown-item>
+        <pn-page-nav-dropdown-item slot="dropdown-item">Seven</pn-page-nav-dropdown-item>
+      </pn-page-nav>
+
+      Impedit, consequatur est delectus et totam sit nesciunt reiciendis suscipit recusandae ut aspernatur cupiditate. Voluptates, ad culpa.
+
+      <svg slot="illustration" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 152"><g clip-path="url(#a)"><path d="M209.401 64.084h-50.189V30.481h56.232V58.06c0 3.338-2.71 6.025-6.043 6.025Z" fill="#005D92"/><path d="M148.698 64.084h11.544v-34.96h-15.42v31.079a3.878 3.878 0 0 0 3.876 3.881Z" fill="#0D234B"/><path d="M215.065 36.724h-55.473a3.808 3.808 0 0 1-3.794-3.8c0-2.09 1.707-3.8 3.794-3.8h55.473a3.808 3.808 0 0 1 3.794 3.8c0 2.09-1.707 3.8-3.794 3.8Z" fill="#005D92"/><path d="M145.174 36.724h6.125a3.809 3.809 0 0 0 3.794-3.8c0-2.09-1.708-3.8-3.794-3.8h-6.125a3.808 3.808 0 0 0-3.794 3.8c0 2.09 1.707 3.8 3.794 3.8ZM215.444 37.457l-55.175 5.972v-6.705h55.175v.733Z" fill="#0D234B"/><path d="M168.345 59.551h4.634a3.39 3.39 0 0 0 3.387-3.393 3.39 3.39 0 0 0-3.387-3.392h-4.634a3.392 3.392 0 0 0-3.388 3.392c.027 1.873 1.545 3.393 3.388 3.393ZM181.868 59.578a3.39 3.39 0 0 1-3.387-3.392 3.39 3.39 0 0 1 3.387-3.393 3.39 3.39 0 0 1 3.388 3.393 3.39 3.39 0 0 1-3.388 3.392Z" fill="#00A0D6"/><path d="M203.9 63.731V28.554s-1.328-4.343 1.084-4.397c2.412-.054 1.165 3.637-.433 4.397-.895.434-5.854-.515-5.664-2.687.189-2.171 4.01-.244 5.013 2.687M215.363 44.514H154.47" stroke="#0D234B" stroke-width="2.5" stroke-miterlimit="10"/><path d="m268.832 52.304 33.983-19.38v76.435l-31.327 1.384-2.656-58.439Z" fill="#FBC2C1"/><path d="m271.488 110.743 45.175-18.729a24.278 24.278 0 0 0 12.954-12.73l11.599-26.491" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M271.487 50.812v43.102l-33.848 11.998-16.395-27.225 50.243-27.875Z" fill="#FBC2C1"/><path d="M222.897 134.466h-63.469V66.337h69.783v61.804c0 3.475-2.846 6.325-6.314 6.325Z" fill="#00A0D6"/><path d="M141.921 134.466h19.268V64.084h-25.745v63.895c0 3.582 2.9 6.487 6.477 6.487Z" fill="#005D92"/><path d="M228.561 76.76h-68.509c-3.496 0-6.315-2.85-6.315-6.324a6.326 6.326 0 0 1 6.315-6.325h68.509c3.495 0 6.314 2.85 6.314 6.325.027 3.501-2.819 6.324-6.314 6.324Z" fill="#00A0D6"/><path d="M136.042 76.76h10.243c3.496 0 6.315-2.85 6.315-6.324a6.326 6.326 0 0 0-6.315-6.325h-10.243c-3.496 0-6.315 2.85-6.315 6.325-.027 3.501 2.819 6.324 6.315 6.324ZM229.211 78.036l-68.021 8.55V76.76h68.021v1.276Z" fill="#005D92"/><path d="M176.746 123.256h13.495a6.31 6.31 0 0 0 6.315-6.325 6.309 6.309 0 0 0-6.315-6.324h-13.495a6.309 6.309 0 0 0-6.315 6.324c-.027 3.502 2.819 6.325 6.315 6.325Z" fill="#8EDDF9"/><path d="m170.431 131.154 12.466-7.057a11.367 11.367 0 0 0 4.228-4.18l3.523-6.08a.704.704 0 0 0 .081-.57c-.136-.434-.596-.624-.976-.434l-8.536 4.044c-2.006.95-4.417.19-5.556-1.737-.487-.869-.189-1.981.678-2.47l10.65-5.89a8.51 8.51 0 0 1 3.415-1.059l12.791-1.194a2.43 2.43 0 0 0 .948-.298l12.873-7.058.948 2.063 9.187 16.937-11.056 3.61-4.526 8.958a16.41 16.41 0 0 1-5.691 6.405l-6.26 4.18a4.192 4.192 0 0 1-5.474-.733l-.678-.787-3.631 2.036a3.928 3.928 0 0 1-5.095-1.113l-.759-1.058-1.192.651a3.896 3.896 0 0 1-5.122-1.221l-1.166-1.683-2.926 1.493c-1.599.814-3.578.217-4.418-1.385-.894-1.493-.298-3.474 1.274-4.37Z" fill="#9B1C2E"/><path d="m230.783 90.413 32.277-8.143M176.502 135.606l8.889-4.669 6.287-5.89M184.036 137.859l9.051-5.673 4.58-4.533M193.71 138.13l6.884-4.506 4.227-4.071" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M221.135 118.18s-5.447-9.962-4.092-20.982l12.846 18.132-8.754 2.85Z" fill="#500715"/><path d="M271.487 65.441v45.302l-38.075 13.463c-13.062-15.227-16.396-27.225-16.396-27.225l54.471-31.54Z" fill="#FBC2C1"/><path opacity=".4" d="M263.249 93.616a5.587 5.587 0 0 1-5.582-5.592 5.587 5.587 0 0 1 5.582-5.591 5.587 5.587 0 0 1 5.583 5.591 5.587 5.587 0 0 1-5.583 5.592Z" fill="#FDEFEE"/><path d="M257.829 58.384a5.575 5.575 0 0 0 5.23 3.61 5.58 5.58 0 0 0 5.583-5.591 5.674 5.674 0 0 0-1.139-3.393l-9.674 5.374Z" fill="#FDEFEE"/><path opacity=".4" d="M251.731 76.977a5.746 5.746 0 0 0 .217-1.547 5.579 5.579 0 0 0-5.582-5.591 5.58 5.58 0 0 0-5.583 5.591c0 2.633 1.843 4.859 4.282 5.456l6.666-3.909ZM243.276 99.451a5.587 5.587 0 0 1-5.583-5.591c0-3.088 2.5-5.591 5.583-5.591a5.587 5.587 0 0 1 5.582 5.591 5.587 5.587 0 0 1-5.582 5.591ZM263.222 113.647v-.38a5.58 5.58 0 0 0-5.583-5.591 5.58 5.58 0 0 0-5.583 5.591c0 1.466.57 2.796 1.491 3.8l9.675-3.42ZM236.962 118.669a5.587 5.587 0 0 1-5.582-5.592 5.586 5.586 0 0 1 5.582-5.591 5.587 5.587 0 0 1 5.583 5.591 5.587 5.587 0 0 1-5.583 5.592Z" fill="#FDEFEE"/><path d="m229.211 90.114 42.276-24.673" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M60.785 123.229V77.547" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M44.498 126.974h32.574a3.762 3.762 0 0 0 3.767-3.773c0-2.09-1.68-3.773-3.767-3.773H44.498a3.762 3.762 0 0 0-3.767 3.773c0 2.09 1.68 3.773 3.767 3.773Z" fill="#F06365"/><path d="M51.002 152.027H70.92a1.54 1.54 0 0 0 1.518-1.248l4.715-23.913H44.416l5.095 23.913a1.511 1.511 0 0 0 1.49 1.248Z" fill="#F06365"/><path d="M60.704 91.634c-12.333 0-22.33-10.013-22.33-22.365 0-12.353 9.997-22.366 22.33-22.366 12.333 0 22.33 10.013 22.33 22.366 0 12.352-9.998 22.365-22.33 22.365Z" fill="#005E41"/><path d="M40.216 78.198c-.108-.244-.19-.488-.298-.732 2.764.488 6.396.57 10.108.651 6.206.163 12.602.326 16.288 2.226 3.36 1.737 5.257 4.831 6.314 7.79-.19.135-.38.244-.596.353-1.003-2.878-2.792-5.89-6.044-7.546-3.55-1.846-9.891-2.009-15.989-2.172-3.55-.054-7.019-.135-9.783-.57ZM69.593 69.621c-3.117 1.955-7.128 2.09-9.946 1.9-3.469-.271-7.127-1.221-10-2.66-4.363-2.171-8.428-2.551-11.22-1.085.028-.272.028-.516.055-.787 2.98-1.358 7.073-.923 11.463 1.248 5.61 2.796 14.363 3.854 19.295.787 2.683-1.683 4.065-4.37 4.065-8.034 0-2.47-.948-4.479-2.818-5.999-4.905-3.99-15.284-4.044-23.577-3.284.352-.271.705-.543 1.057-.787.434-.027.867-.054 1.328-.109 10.515-.678 17.805.543 21.653 3.638 2.032 1.655 3.09 3.854 3.09 6.54-.082 3.937-1.546 6.84-4.445 8.632Z" fill="#002F24"/><path d="M77.153 126.866H44.416l31.382 6.948 1.355-6.948Z" fill="#9B1C2E"/></g><defs><clipPath id="a"><path fill="#fff" transform="matrix(-1 0 0 1 271 0)" d="M0 0h271v152H0z"/></clipPath></defs></svg>
+    </pn-header>
+  `
+);
+
+export const TopNav = TopNavTemplate.bind({});
+TopNav.args = {
+  color: 'coral'
+}
+
+/* ---------------------------------------/TOP NAV--------------------------------------- */
+
+
+/* ---------------------------------------SMALL--------------------------------------- */
+const NoIllustrationTemplate = (args) => {
+  return `
+    <pn-header color="${args.color}" heading="${args.heading}" max-width="${args.maxWidth}">
+      Impedit, consequatur est delectus et totam sit nesciunt reiciendis suscipit recusandae ut aspernatur cupiditate. Voluptates, ad culpa.
+    </pn-header>
+  `
+};
+
+export const NoIllustration = NoIllustrationTemplate.bind({});
+NoIllustration.args = {
+  color: 'green'
+}
+/* ---------------------------------------/SMALL--------------------------------------- */
+
+/* ---------------------------------------BUTTONS--------------------------------------- */
+const ButtonTemplate = (args) => (
+  `<pn-header color="${args.color}" heading="${args.heading}" max-width="${args.maxWidth}">
+      Impedit, consequatur est delectus et totam sit nesciunt reiciendis suscipit recusandae ut aspernatur cupiditate. Voluptates, ad culpa.
+        
+      <div slot="buttons">
+        <pn-button appearance="light" icon="route">Action 1</pn-button>
+        <pn-button icon="scanner">Action 2</pn-button>
+      </div>
+
+      <svg slot="illustration" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 152"><g clip-path="url(#a)"><path d="M209.401 64.084h-50.189V30.481h56.232V58.06c0 3.338-2.71 6.025-6.043 6.025Z" fill="#005D92"/><path d="M148.698 64.084h11.544v-34.96h-15.42v31.079a3.878 3.878 0 0 0 3.876 3.881Z" fill="#0D234B"/><path d="M215.065 36.724h-55.473a3.808 3.808 0 0 1-3.794-3.8c0-2.09 1.707-3.8 3.794-3.8h55.473a3.808 3.808 0 0 1 3.794 3.8c0 2.09-1.707 3.8-3.794 3.8Z" fill="#005D92"/><path d="M145.174 36.724h6.125a3.809 3.809 0 0 0 3.794-3.8c0-2.09-1.708-3.8-3.794-3.8h-6.125a3.808 3.808 0 0 0-3.794 3.8c0 2.09 1.707 3.8 3.794 3.8ZM215.444 37.457l-55.175 5.972v-6.705h55.175v.733Z" fill="#0D234B"/><path d="M168.345 59.551h4.634a3.39 3.39 0 0 0 3.387-3.393 3.39 3.39 0 0 0-3.387-3.392h-4.634a3.392 3.392 0 0 0-3.388 3.392c.027 1.873 1.545 3.393 3.388 3.393ZM181.868 59.578a3.39 3.39 0 0 1-3.387-3.392 3.39 3.39 0 0 1 3.387-3.393 3.39 3.39 0 0 1 3.388 3.393 3.39 3.39 0 0 1-3.388 3.392Z" fill="#00A0D6"/><path d="M203.9 63.731V28.554s-1.328-4.343 1.084-4.397c2.412-.054 1.165 3.637-.433 4.397-.895.434-5.854-.515-5.664-2.687.189-2.171 4.01-.244 5.013 2.687M215.363 44.514H154.47" stroke="#0D234B" stroke-width="2.5" stroke-miterlimit="10"/><path d="m268.832 52.304 33.983-19.38v76.435l-31.327 1.384-2.656-58.439Z" fill="#FBC2C1"/><path d="m271.488 110.743 45.175-18.729a24.278 24.278 0 0 0 12.954-12.73l11.599-26.491" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M271.487 50.812v43.102l-33.848 11.998-16.395-27.225 50.243-27.875Z" fill="#FBC2C1"/><path d="M222.897 134.466h-63.469V66.337h69.783v61.804c0 3.475-2.846 6.325-6.314 6.325Z" fill="#00A0D6"/><path d="M141.921 134.466h19.268V64.084h-25.745v63.895c0 3.582 2.9 6.487 6.477 6.487Z" fill="#005D92"/><path d="M228.561 76.76h-68.509c-3.496 0-6.315-2.85-6.315-6.324a6.326 6.326 0 0 1 6.315-6.325h68.509c3.495 0 6.314 2.85 6.314 6.325.027 3.501-2.819 6.324-6.314 6.324Z" fill="#00A0D6"/><path d="M136.042 76.76h10.243c3.496 0 6.315-2.85 6.315-6.324a6.326 6.326 0 0 0-6.315-6.325h-10.243c-3.496 0-6.315 2.85-6.315 6.325-.027 3.501 2.819 6.324 6.315 6.324ZM229.211 78.036l-68.021 8.55V76.76h68.021v1.276Z" fill="#005D92"/><path d="M176.746 123.256h13.495a6.31 6.31 0 0 0 6.315-6.325 6.309 6.309 0 0 0-6.315-6.324h-13.495a6.309 6.309 0 0 0-6.315 6.324c-.027 3.502 2.819 6.325 6.315 6.325Z" fill="#8EDDF9"/><path d="m170.431 131.154 12.466-7.057a11.367 11.367 0 0 0 4.228-4.18l3.523-6.08a.704.704 0 0 0 .081-.57c-.136-.434-.596-.624-.976-.434l-8.536 4.044c-2.006.95-4.417.19-5.556-1.737-.487-.869-.189-1.981.678-2.47l10.65-5.89a8.51 8.51 0 0 1 3.415-1.059l12.791-1.194a2.43 2.43 0 0 0 .948-.298l12.873-7.058.948 2.063 9.187 16.937-11.056 3.61-4.526 8.958a16.41 16.41 0 0 1-5.691 6.405l-6.26 4.18a4.192 4.192 0 0 1-5.474-.733l-.678-.787-3.631 2.036a3.928 3.928 0 0 1-5.095-1.113l-.759-1.058-1.192.651a3.896 3.896 0 0 1-5.122-1.221l-1.166-1.683-2.926 1.493c-1.599.814-3.578.217-4.418-1.385-.894-1.493-.298-3.474 1.274-4.37Z" fill="#9B1C2E"/><path d="m230.783 90.413 32.277-8.143M176.502 135.606l8.889-4.669 6.287-5.89M184.036 137.859l9.051-5.673 4.58-4.533M193.71 138.13l6.884-4.506 4.227-4.071" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M221.135 118.18s-5.447-9.962-4.092-20.982l12.846 18.132-8.754 2.85Z" fill="#500715"/><path d="M271.487 65.441v45.302l-38.075 13.463c-13.062-15.227-16.396-27.225-16.396-27.225l54.471-31.54Z" fill="#FBC2C1"/><path opacity=".4" d="M263.249 93.616a5.587 5.587 0 0 1-5.582-5.592 5.587 5.587 0 0 1 5.582-5.591 5.587 5.587 0 0 1 5.583 5.591 5.587 5.587 0 0 1-5.583 5.592Z" fill="#FDEFEE"/><path d="M257.829 58.384a5.575 5.575 0 0 0 5.23 3.61 5.58 5.58 0 0 0 5.583-5.591 5.674 5.674 0 0 0-1.139-3.393l-9.674 5.374Z" fill="#FDEFEE"/><path opacity=".4" d="M251.731 76.977a5.746 5.746 0 0 0 .217-1.547 5.579 5.579 0 0 0-5.582-5.591 5.58 5.58 0 0 0-5.583 5.591c0 2.633 1.843 4.859 4.282 5.456l6.666-3.909ZM243.276 99.451a5.587 5.587 0 0 1-5.583-5.591c0-3.088 2.5-5.591 5.583-5.591a5.587 5.587 0 0 1 5.582 5.591 5.587 5.587 0 0 1-5.582 5.591ZM263.222 113.647v-.38a5.58 5.58 0 0 0-5.583-5.591 5.58 5.58 0 0 0-5.583 5.591c0 1.466.57 2.796 1.491 3.8l9.675-3.42ZM236.962 118.669a5.587 5.587 0 0 1-5.582-5.592 5.586 5.586 0 0 1 5.582-5.591 5.587 5.587 0 0 1 5.583 5.591 5.587 5.587 0 0 1-5.583 5.592Z" fill="#FDEFEE"/><path d="m229.211 90.114 42.276-24.673" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M60.785 123.229V77.547" stroke="#500715" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M44.498 126.974h32.574a3.762 3.762 0 0 0 3.767-3.773c0-2.09-1.68-3.773-3.767-3.773H44.498a3.762 3.762 0 0 0-3.767 3.773c0 2.09 1.68 3.773 3.767 3.773Z" fill="#F06365"/><path d="M51.002 152.027H70.92a1.54 1.54 0 0 0 1.518-1.248l4.715-23.913H44.416l5.095 23.913a1.511 1.511 0 0 0 1.49 1.248Z" fill="#F06365"/><path d="M60.704 91.634c-12.333 0-22.33-10.013-22.33-22.365 0-12.353 9.997-22.366 22.33-22.366 12.333 0 22.33 10.013 22.33 22.366 0 12.352-9.998 22.365-22.33 22.365Z" fill="#005E41"/><path d="M40.216 78.198c-.108-.244-.19-.488-.298-.732 2.764.488 6.396.57 10.108.651 6.206.163 12.602.326 16.288 2.226 3.36 1.737 5.257 4.831 6.314 7.79-.19.135-.38.244-.596.353-1.003-2.878-2.792-5.89-6.044-7.546-3.55-1.846-9.891-2.009-15.989-2.172-3.55-.054-7.019-.135-9.783-.57ZM69.593 69.621c-3.117 1.955-7.128 2.09-9.946 1.9-3.469-.271-7.127-1.221-10-2.66-4.363-2.171-8.428-2.551-11.22-1.085.028-.272.028-.516.055-.787 2.98-1.358 7.073-.923 11.463 1.248 5.61 2.796 14.363 3.854 19.295.787 2.683-1.683 4.065-4.37 4.065-8.034 0-2.47-.948-4.479-2.818-5.999-4.905-3.99-15.284-4.044-23.577-3.284.352-.271.705-.543 1.057-.787.434-.027.867-.054 1.328-.109 10.515-.678 17.805.543 21.653 3.638 2.032 1.655 3.09 3.854 3.09 6.54-.082 3.937-1.546 6.84-4.445 8.632Z" fill="#002F24"/><path d="M77.153 126.866H44.416l31.382 6.948 1.355-6.948Z" fill="#9B1C2E"/></g><defs><clipPath id="a"><path fill="#fff" transform="matrix(-1 0 0 1 271 0)" d="M0 0h271v152H0z"/></clipPath></defs></svg>
+    </pn-header>
+  `
+);
+
+export const NoNav = ButtonTemplate.bind({});
+/* ---------------------------------------/BUTTONS--------------------------------------- */

package/umd/modules/@postnord/web-components/collection/components/layout/pn-header/pn-header.css

@@ -0,0 +1,94 @@
+pn-header {
+  border-radius: 0.5em;
+  background-color: #effbff;
+  background-color: var(--bg);
+  display: block;
+  transition: background-color 0.2s ease-in-out;
+}
+pn-header > .page-nav {
+  padding: clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em) 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+pn-header > .page-nav > pn-page-nav {
+  min-width: 0;
+}
+
+.pn-header-content-wrapper {
+  position: relative;
+}
+
+pn-header .pn-header-content {
+  max-width: var(--max-width);
+  margin: auto;
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap-reverse;
+  padding-right: 0;
+  position: relative;
+  text-align: left;
+  align-items: space-between;
+  background-color: var(--bg);
+  z-index: 1;
+}
+pn-header .pn-header-content > * {
+  min-width: 0;
+}
+
+pn-header .pn-header-left {
+  flex: 1 1 60%;
+  padding: 1em;
+  padding: clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+}
+pn-header .pn-header-left h1 {
+  font-size: clamp(1.85em, 5vw, 2em);
+}
+pn-header .pn-header-left p {
+  font-size: 1.25em;
+  max-width: 60ch;
+  line-height: 1.4;
+}
+
+pn-header [slot=buttons] {
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap-reverse;
+  justify-content: center;
+  max-width: 30em;
+}
+pn-header [slot=buttons] > * {
+  flex: 1 1 auto;
+}
+
+.pn-header-content-wrapper.pn-header-illustration .pn-header-right {
+  background-color: #e0f8ff;
+  background-color: var(--pill-color);
+  border-radius: 20em 1em 1em 20em;
+}
+.pn-header-content-wrapper.pn-header-illustration::after {
+  content: "";
+  background-color: var(--pill-color);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  border-radius: 0 0 0.5em 0;
+}
+.pn-header-content-wrapper.pn-header-illustration .pn-header-right {
+  flex: 1 1 12em;
+  margin-left: 2em;
+  padding-left: 2em;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  transition: background-color 0.2s ease-in-out;
+}
+.pn-header-content-wrapper.pn-header-illustration .pn-header-right [slot=illustration] {
+  max-height: clamp(6em, 35vw, 25em);
+  height: min-content;
+}

package/umd/modules/@postnord/web-components/collection/components/layout/pn-header/pn-header.js

@@ -0,0 +1,118 @@
+import { Component, h, Host, Element, Prop, Watch } from '@stencil/core';
+import colors from '../../../assets/colors';
+export class PnHeader {
+  constructor() {
+    /** Available colors: blue, coral, orange, gray and green */
+    this.color = 'blue';
+    this.maxWidth = null;
+  }
+  colorHandler() {
+    this.setColor();
+  }
+  componentWillLoad() {
+    this.setColor();
+    this.checkSlots();
+  }
+  setColor() {
+    const alternatives = ['blue', 'coral', 'gray', 'orange', 'green'];
+    this.color = alternatives.includes(this.color) ? this.color : 'blue';
+    this.hostElement.style.setProperty('--bg', colors[`${this.color}25`]);
+    this.hostElement.style.setProperty('--pill-color', colors[`${this.color}50`]);
+    if (this.maxWidth)
+      this.hostElement.style.setProperty('--max-width', `${this.maxWidth}`);
+  }
+  checkSlots() {
+    const slottedIllustration = this.hostElement.querySelector('[slot="illustration"]');
+    const topNav = this.hostElement.querySelector('[slot="top-menu"]');
+    this.topNav = !!topNav;
+    this.pill = !!slottedIllustration;
+  }
+  wrapperClasses() {
+    let classes = 'pn-header-content-wrapper ';
+    if (this.pill)
+      classes += 'pn-header-illustration ';
+    return classes;
+  }
+  render() {
+    return (h(Host, null,
+      this.topNav && (h("div", { class: "page-nav" },
+        h("slot", { name: "top-menu" }))),
+      h("div", { class: this.wrapperClasses() },
+        h("div", { class: "pn-header-content" },
+          h("div", { class: "pn-header-left" },
+            h("h1", null, this.heading),
+            h("p", null,
+              h("slot", null)),
+            h("slot", { name: "buttons" }),
+            h("slot", { name: "bottom-menu" })),
+          h("div", { class: "pn-header-right" },
+            h("slot", { name: "illustration" }))))));
+  }
+  static get is() { return "pn-header"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-header.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "heading text"
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Available colors: blue, coral, orange, gray and green"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'blue'"
+    },
+    "maxWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "color",
+      "methodName": "colorHandler"
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-footer/pn-footer.css

@@ -1,5 +1,5 @@
 pn-footer {
-  color: #5E554A;
+  color: #5e554a;
   padding-bottom: 2em;
   display: block;
 }
@@ -14,7 +14,7 @@ pn-footer .pn-footer-row a {
   display: inline-block;
 }
 pn-footer a {
-  color: #005D92;
+  color: #005d92;
 }
 pn-footer pn-icon {
   margin-left: 0.2em;
@@ -22,7 +22,7 @@ pn-footer pn-icon {
 pn-footer #ot-sdk-btn {
   -webkit-box-direction: normal;
   box-sizing: border-box;
-  color: #005D92;
+  color: #005d92;
   display: inline-block;
   font-size: 0.9em;
   margin-right: 0.2em;

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/dropdown-item/pn-page-nav-dropdown-item.css

@@ -12,7 +12,7 @@ pn-page-nav-dropdown-item li {
   font-size: inherit;
 }
 pn-page-nav-dropdown-item li > * {
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: inherit;
   border: none;
   padding: 1em;
@@ -30,7 +30,7 @@ pn-page-nav-dropdown-item li > * > pn-icon {
   margin-left: 1em;
 }
 pn-page-nav-dropdown-item li > *.pn-page-nav-dropdown-item-active {
-  background: #005D92;
+  background: #005d92;
 }
 pn-page-nav-dropdown-item li > *.pn-page-nav-dropdown-item-active:hover, pn-page-nav-dropdown-item li > *.pn-page-nav-dropdown-item-active:focus {
   background: #0068a6;
@@ -39,7 +39,7 @@ pn-page-nav-dropdown-item li > *:hover, pn-page-nav-dropdown-item li > *:focus {
   background: #263d64;
 }
 pn-page-nav-dropdown-item li > *:focus {
-  box-shadow: inset 0 0 0 0.1em #005D92, inset 0 0 0 0.2em #D3CECB;
+  box-shadow: inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb;
 }
 pn-page-nav-dropdown-item li > a {
   text-decoration: none;
@@ -51,7 +51,7 @@ pn-page-nav-dropdown-item li > hr {
   bottom: 0;
   padding: 0;
   margin: 0 auto;
-  border-top: 0.1em solid #D3CECB;
+  border-top: 0.1em solid #d3cecb;
   opacity: 0.6;
   width: 85%;
 }