@postnord/pn-marketweb-components 2.0.74 → 2.0.76

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%;
 }

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

@@ -1,6 +1,6 @@
 pn-page-nav-item {
   position: relative;
-  color: #FFFFFF;
+  color: #ffffff;
   margin-right: 0.5em;
   z-index: 2;
   white-space: nowrap;
@@ -29,7 +29,7 @@ pn-page-nav-item a {
   transition: box-shadow 0.15s;
 }
 pn-page-nav-item a:focus {
-  box-shadow: 0 0 0 0.1em #D3CECB;
+  box-shadow: 0 0 0 0.1em #d3cecb;
 }
 pn-page-nav-item a > pn-icon {
   margin-right: 0.5em;

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

@@ -2,6 +2,7 @@ pn-page-nav {
   display: block;
   position: relative;
   font-size: clamp(0.8em, 2vw, 1em);
+  z-index: 5;
 }
 
 .pn-page-nav-wrapper {
@@ -19,8 +20,8 @@ pn-page-nav {
   align-items: center;
   border-radius: 3em;
   min-height: 3em;
-  background: #0D234B;
-  border: 0.1em solid #D3CECB;
+  background: #0d234b;
+  border: 0.1em solid #d3cecb;
   position: relative;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -48,11 +49,11 @@ pn-page-nav {
 }
 .pn-page-nav-items > .pn-pn-bg.pn-pn-active {
   box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
-  background: #005D92;
+  background: #005d92;
   z-index: 1;
 }
 .pn-page-nav-items > .pn-pn-bg.pn-pn-hover {
-  background: #FFFFFF;
+  background: #ffffff;
   opacity: 0;
   border: 0.5rem solid transparent;
   z-index: 0;
@@ -86,7 +87,7 @@ pn-page-nav .pn-pn-arrows svg {
   width: 1.5em;
 }
 pn-page-nav .pn-pn-arrows svg path {
-  fill: #005D92;
+  fill: #005d92;
 }
 pn-page-nav .pn-pn-arrows > * {
   transition: transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;
@@ -104,7 +105,7 @@ pn-page-nav .pn-pn-arrows > * {
   will-change: transform;
   -webkit-tap-highlight-color: transparent;
   border-radius: 50%;
-  border: 0.2em solid #0D234B;
+  border: 0.2em solid #0d234b;
 }
 pn-page-nav .pn-pn-arrows > *.pn-pn-arrow-left {
   transform: translateX(-100%);
@@ -122,14 +123,14 @@ pn-page-nav .pn-pn-arrows > *.pn-pn-arrow-right {
     animation: arrow 0.6s ease-in-out alternate infinite;
   }
   pn-page-nav .pn-pn-arrows > * pn-icon svg path {
-    fill: #FFFFFF;
+    fill: #ffffff;
   }
   pn-page-nav .pn-pn-arrows > *.pn-pn-arrow-left {
-    background: linear-gradient(to left, transparent, #0D234B 60%);
+    background: linear-gradient(to left, transparent, #0d234b 60%);
     border-radius: 50% 0 0 50%;
   }
   pn-page-nav .pn-pn-arrows > *.pn-pn-arrow-right {
-    background: linear-gradient(to right, transparent, #0D234B 40%);
+    background: linear-gradient(to right, transparent, #0d234b 40%);
     border-radius: 0 50% 50% 0;
   }
 }
@@ -148,8 +149,8 @@ pn-page-nav .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left, pn-page-nav .pn-
 button.pn-page-nav-dropdown-button {
   font-size: 1em;
   border-radius: 3em 0 0 3em;
-  background: #0D234B;
-  color: #FFFFFF;
+  background: #0d234b;
+  color: #ffffff;
   padding: 0.5em 1em 0.5em 1.5em;
   cursor: pointer;
   display: flex;
@@ -170,10 +171,10 @@ button.pn-page-nav-dropdown-button:hover, button.pn-page-nav-dropdown-button:foc
   background: #263655;
 }
 button.pn-page-nav-dropdown-button: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;
 }
 button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active {
-  background: #005D92;
+  background: #005d92;
 }
 button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover, button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:focus {
   background: #0068a6;
@@ -181,7 +182,7 @@ button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover, button.pn-
 
 .pn-page-nav-divider {
   height: 60%;
-  background: #D3CECB;
+  background: #d3cecb;
   width: 0.1em;
   position: absolute;
   right: 0;
@@ -192,7 +193,7 @@ ul.pn-page-nav-dropdown {
   position: absolute;
   left: 0;
   top: 110%;
-  background: #0D234B;
+  background: #0d234b;
   border-radius: 0.5em;
   margin: 0;
   padding: 0;

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

@@ -33,9 +33,9 @@ button.pn-tab svg polygon {
   fill: #000;
 }
 button.pn-tab.active {
-  color: #005D92;
+  color: #005d92;
 }
 button.pn-tab.active svg path,
 button.pn-tab.active svg polygon {
-  fill: #005D92;
+  fill: #005d92;
 }

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

@@ -46,7 +46,7 @@
   width: 1.5em;
 }
 .pn-tablist .scroll-arrows svg path {
-  fill: #005D92;
+  fill: #005d92;
 }
 .pn-tablist .scroll-arrows > * {
   transition: transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;
@@ -75,7 +75,7 @@
   box-shadow: -0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);
 }
 .pn-tablist .scroll-arrows > *:active {
-  background: #F3F2F2;
+  background: #f3f2f2;
 }
 .pn-tablist .line {
   height: 0.1em;
@@ -91,14 +91,14 @@
   transition: transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97), opacity 0.2s ease-in-out;
 }
 .pn-tablist .line .active-line {
-  background-color: #005D92;
+  background-color: #005d92;
   height: 0.5em;
   bottom: -0.3em;
   z-index: 1;
   opacity: 0;
 }
 .pn-tablist .line .hovered-line {
-  background-color: #00A0D6;
+  background-color: #00a0d6;
   height: 0.1em;
   opacity: 0;
 }

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

@@ -18,7 +18,7 @@ pn-tile a.pn-tile-link {
   opacity: 0;
 }
 pn-tile .pn-tile {
-  border: 0.1rem solid #D3CECB;
+  border: 0.1rem solid #d3cecb;
   outline: none;
   background: white;
   box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
@@ -101,22 +101,22 @@ pn-tile .pn-tile > .text-cont {
   flex: 1 1 calc((32rem - 100%) * 999);
 }
 pn-tile .pn-tile h3 {
-  color: #005D92;
+  color: #005d92;
   font-size: 1.5em;
 }
 pn-tile .pn-tile .tile-slot {
-  color: #5E554A;
+  color: #5e554a;
   margin-top: 0.25em;
 }
 pn-tile a:focus + .pn-tile {
-  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-tile a:focus + .pn-tile,
 pn-tile .pn-tile:hover {
-  background: #EFFBFF;
+  background: #effbff;
 }
 pn-tile .pn-tile:hover, pn-tile a:focus + .pn-tile {
-  border: 0.1rem solid #8EDDF9;
+  border: 0.1rem solid #8eddf9;
 }
 pn-tile .pn-tile:hover.vertical .tile-circle, pn-tile .pn-tile:hover.simple .tile-circle, pn-tile a:focus + .pn-tile.vertical .tile-circle, pn-tile a:focus + .pn-tile.simple .tile-circle {
   transform: translate(-50%, -90%);
@@ -130,7 +130,7 @@ pn-tile .pn-tile .tile-circle {
   width: 40em;
   height: 40em;
   margin: 0;
-  background-color: #005D92;
+  background-color: #005d92;
   border-radius: 50%;
   z-index: 1;
   transform: translate(-50%, -100%);
@@ -141,7 +141,7 @@ pn-tile .pn-ripple {
   animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
   position: absolute;
   border-radius: 50%;
-  background: #005D92;
+  background: #005d92;
   transform: translate(-50%, -50%) scale(0);
   opacity: 0.05;
 }

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/pn-ocr-search.css

@@ -9,5 +9,5 @@ pn-ocr-search .invalid-text-container {
   padding: 0.5em 1em;
 }
 pn-ocr-search .invalid-text-container .invalid-ocr {
-  color: #A70707;
+  color: #a70707;
 }