@postnord/pn-marketweb-components 2.0.74 → 2.0.75

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

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

@@ -1,6 +1,6 @@
 pn-zipcode-search {
   display: block;
-  color: #5E554A;
+  color: #5e554a;
 }
 pn-zipcode-search .search-results {
   margin-top: 1em;
@@ -21,7 +21,7 @@ pn-zipcode-search .text-row > * + * {
   margin-left: 0.25em;
 }
 pn-zipcode-search .error-text {
-  color: #A70707;
+  color: #a70707;
   padding: 0.5em 1em;
 }
 pn-zipcode-search pn-search-field {

package/umd/modules/@postnord/web-components/components/colors.js

@@ -1,35 +1,37 @@
 const colors = {
   "black": "#000000",
-  "gray900": "#2D2013",
-  "gray700": "#5E554A",
+  "gray900": "#2d2013",
+  "gray700": "#5e554a",
   "gray400": "#969087",
-  "gray200": "#D3CECB",
-  "gray50": "#F3F2F2",
-  "gray25": "#F9F8F8",
-  "white": "#FFFFFF",
-  "blue900": "#0D234B",
-  "blue700": "#005D92",
-  "blue400": "#00A0D6",
-  "blue200": "#8EDDF9",
-  "blue50": "#E0F8FF",
-  "blue25": "#EFFBFF",
+  "gray200": "#d3cecb",
+  "gray50": "#f3f2f2",
+  "gray25": "#f9f8f8",
+  "white": "#ffffff",
+  "blue900": "#0d234b",
+  "blue700": "#005d92",
+  "blue400": "#00a0d6",
+  "blue200": "#8eddf9",
+  "blue50": "#e0f8ff",
+  "blue25": "#effbff",
   "coral900": "#500715",
-  "coral700": "#9B1C2E",
-  "coral400": "#F06365",
-  "coral200": "#FBC2C1",
-  "coral50": "#FDEFEE",
-  "orange900": "#4F1600",
-  "orange700": "#99290A",
-  "orange400": "#F89142",
-  "orange200": "#FFC8A3",
-  "orange50": "#FFF1E3",
-  "green900": "#002F24",
-  "green700": "#005E41",
-  "green400": "#5EC584",
-  "green200": "#ABE3BB",
-  "green50": "#DCF6E7",
-  "green25": "#EDFBF3",
-  "warning": "#A70707",
+  "coral700": "#9b1c2e",
+  "coral400": "#f06365",
+  "coral200": "#fbc2c1",
+  "coral50": "#fdefee",
+  "coral25": "#fef7f6",
+  "orange900": "#4f1600",
+  "orange700": "#99290a",
+  "orange400": "#f89142",
+  "orange200": "#ffc8a3",
+  "orange50": "#fff1e3",
+  "orange25": "#fff8f1",
+  "green900": "#002f24",
+  "green700": "#005e41",
+  "green400": "#5ec584",
+  "green200": "#abe3bb",
+  "green50": "#dcf6e7",
+  "green25": "#edfbf3",
+  "warning": "#a70707",
   "electric-default": "#a505cc",
   "electric-haze": "#fdf4ff",
   "electric-faded": "#f3d8f8",

package/umd/modules/@postnord/web-components/components/pn-accordion-row.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const pnAccordionRowCss = "pn-accordion-row{position:relative;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row+pn-accordion-row{border-top:0.1rem solid #D3CECB;margin-top:0.4rem}pn-accordion-row[data-flipping]{-webkit-transform:translateY(calc(-1px * var(--dy)));transform:translateY(calc(-1px * var(--dy)));-webkit-transition:none;transition:none}pn-accordion-row .accordion-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:0;width:100%;font-weight:400;padding:1em;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);border-radius:0.8rem;overflow:hidden;position:relative;background:#FFFFFF;border:none;outline:none;cursor:pointer;font-size:1em;}pn-accordion-row .accordion-title:hover{background:#E0F8FF}pn-accordion-row .accordion-title:focus{-webkit-box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005D92}pn-accordion-row .accordion-title>svg{margin-left:auto;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s}pn-accordion-row .accordion-title>svg path{fill:#005D92}pn-accordion-row .accordion-title .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;position:absolute;border-radius:50%;background:#005D92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.05;pointer-events:none}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-accordion-row .accordion-content{z-index:2;top:0;left:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-accordion-row .accordion-content .content{position:absolute;left:0;right:0;width:100%;top:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;pointer-events:none;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;padding:1em}pn-accordion-row[data-state=open] .accordion-content .content{position:relative;pointer-events:unset;opacity:1;-webkit-transition-delay:0.2s;transition-delay:0.2s}pn-accordion-row[data-state=open] .accordion-title svg{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-delay:0s;transition-delay:0s}";
+const pnAccordionRowCss = "pn-accordion-row{position:relative;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row+pn-accordion-row{border-top:0.1rem solid #D3CECB;margin-top:0.4rem}pn-accordion-row[data-flipping]{-webkit-transform:translateY(calc(-1px * var(--dy)));transform:translateY(calc(-1px * var(--dy)));-webkit-transition:none;transition:none}pn-accordion-row .accordion-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:0;width:100%;font-weight:400;padding:1em;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);border-radius:0.8rem;overflow:hidden;position:relative;background:#ffffff;border:none;outline:none;cursor:pointer;font-size:1em;}pn-accordion-row .accordion-title:hover{background:#e0f8ff}pn-accordion-row .accordion-title:focus{-webkit-box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005d92}pn-accordion-row .accordion-title>svg{margin-left:auto;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s}pn-accordion-row .accordion-title>svg path{fill:#005D92}pn-accordion-row .accordion-title .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;position:absolute;border-radius:50%;background:#005d92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.05;pointer-events:none}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-accordion-row .accordion-content{z-index:2;top:0;left:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-accordion-row .accordion-content .content{position:absolute;left:0;right:0;width:100%;top:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;pointer-events:none;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;padding:1em}pn-accordion-row[data-state=open] .accordion-content .content{position:relative;pointer-events:unset;opacity:1;-webkit-transition-delay:0.2s;transition-delay:0.2s}pn-accordion-row[data-state=open] .accordion-title svg{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-delay:0s;transition-delay:0s}";
 
 const PnaccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-button2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './pn-icon2.js';
 import { d as defineCustomElement$1 } from './pn-spinner2.js';
 
-const pnButtonCss = "pn-button{display:inline-block}pn-button button,pn-button a{color:#fff;cursor:pointer;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;background:transparent;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:color 0.3s;transition:color 0.3s;-webkit-tap-highlight-color:transparent;}pn-button button pn-icon,pn-button a pn-icon{-ms-flex-negative:0;flex-shrink:0;margin:0 0 0 0.5em}pn-button button pn-icon svg path,pn-button a pn-icon svg path{fill:#fff;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-button button .pn-button-content,pn-button a .pn-button-content{z-index:2;-webkit-transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, transform 0.2s;transition:opacity 0.1s, transform 0.2s, -webkit-transform 0.2s;-webkit-transition-delay:0.2s;transition-delay:0.2s;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}pn-button button .pn-button-bg,pn-button a .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;border-radius:3em;border:0.1rem solid transparent;background:#005D92;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s;overflow:hidden}pn-button button .pn-button-bg::after,pn-button a .pn-button-bg::after{content:\"\";position:absolute;will-change:transform;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);width:100%;height:100%;background:#0D234B;border-radius:inherit;left:0;-webkit-transform:translateX(-103%);transform:translateX(-103%);opacity:0.5}pn-button button.pn-button-light,pn-button a.pn-button-light{color:#005D92}pn-button button.pn-button-light pn-icon svg path,pn-button a.pn-button-light pn-icon svg path{fill:#005D92}pn-button button.pn-button-light pn-spinner .circle,pn-button a.pn-button-light pn-spinner .circle{stroke:#005D92}pn-button button.pn-button-light pn-spinner .dot,pn-button a.pn-button-light pn-spinner .dot{fill:#005D92}pn-button button.pn-button-light .pn-button-bg,pn-button a.pn-button-light .pn-button-bg{border:0.1rem solid #005D92;background:#fff}pn-button button.pn-button-light .pn-button-bg:after,pn-button a.pn-button-light .pn-button-bg:after{background:#E0F8FF;opacity:1}pn-button button.pn-button-light .pn-button-bg .pn-ripple,pn-button a.pn-button-light .pn-button-bg .pn-ripple{background:#005D92}pn-button button.pn-button-warning,pn-button a.pn-button-warning{color:#A70707}pn-button button.pn-button-warning pn-icon svg path,pn-button a.pn-button-warning pn-icon svg path{fill:#A70707}pn-button button.pn-button-warning pn-spinner .circle,pn-button a.pn-button-warning pn-spinner .circle{stroke:#A70707}pn-button button.pn-button-warning pn-spinner .dot,pn-button a.pn-button-warning pn-spinner .dot{fill:#A70707}pn-button button.pn-button-warning .pn-button-bg,pn-button a.pn-button-warning .pn-button-bg{border:0.1rem solid #A70707;background:#FDEFEE}pn-button button.pn-button-warning .pn-button-bg:after,pn-button a.pn-button-warning .pn-button-bg:after{background:#A70707;opacity:1}pn-button button.pn-button-variation-borderless .pn-button-bg,pn-button a.pn-button-variation-borderless .pn-button-bg{border:0.1rem solid transparent;background:transparent}pn-button button.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after,pn-button a.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined .pn-button-bg,pn-button a.pn-button-variation-outlined .pn-button-bg{background:transparent}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg{border-color:#FFFFFF}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined.pn-button-light .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-light .pn-button-bg::after{background:#00A0D6;opacity:0.1}pn-button button.pn-button-left-icon .pn-button-content,pn-button a.pn-button-left-icon .pn-button-content{-ms-flex-direction:row-reverse;flex-direction:row-reverse}pn-button button.pn-button-left-icon .pn-button-content pn-icon,pn-button a.pn-button-left-icon .pn-button-content pn-icon{margin:0 0.5em 0 0}pn-button button.icon-only,pn-button a.icon-only{width:3em;min-width:0}pn-button button.icon-only pn-icon,pn-button a.icon-only pn-icon{margin:0}pn-button button.icon-only.pn-button-small,pn-button a.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-button button.pn-button-small,pn-button a.pn-button-small{font-size:1.4rem;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}pn-button button.pn-button-small pn-icon svg,pn-button a.pn-button-small pn-icon svg{height:1.28em;width:1.28em}a:focus>pn-button button .pn-button-bg,pn-button button:focus .pn-button-bg,pn-button a:focus .pn-button-bg{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}a:focus>pn-button button .pn-button-bg:after,pn-button button:hover .pn-button-bg:after,pn-button button:focus .pn-button-bg:after,pn-button a:hover .pn-button-bg:after,pn-button a:focus .pn-button-bg:after{-webkit-transform:translateX(0);transform:translateX(0)}a:focus>pn-button button.pn-button-warning,pn-button button.pn-button-warning:hover,pn-button a.pn-button-warning:hover,pn-button button.pn-button-warning:focus,pn-button a.pn-button-warning:focus{color:#fff}a:focus>pn-button button.pn-button-warning pn-icon svg path,pn-button button.pn-button-warning:hover pn-icon svg path,pn-button a.pn-button-warning:hover pn-icon svg path,pn-button button.pn-button-warning:focus pn-icon svg path,pn-button a.pn-button-warning:focus pn-icon svg path{fill:#fff}a:focus>pn-button button.pn-button-warning pn-spinner .circle,pn-button button.pn-button-warning:hover pn-spinner .circle,pn-button a.pn-button-warning:hover pn-spinner .circle,pn-button button.pn-button-warning:focus pn-spinner .circle,pn-button a.pn-button-warning:focus pn-spinner .circle{stroke:#fff}a:focus>pn-button button.pn-button-warning pn-spinner .dot,pn-button button.pn-button-warning:hover pn-spinner .dot,pn-button a.pn-button-warning:hover pn-spinner .dot,pn-button button.pn-button-warning:focus pn-spinner .dot,pn-button a.pn-button-warning:focus pn-spinner .dot{fill:#fff}a:focus>pn-button button.pn-button-warning .pn-button-bg,pn-button button.pn-button-warning:focus .pn-button-bg,pn-button a.pn-button-warning:focus .pn-button-bg{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707}pn-button .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background:#fff;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-button pn-spinner{position:absolute;-webkit-transform:scale(0);transform:scale(0)}pn-button[data-loading] pn-spinner{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s}pn-button[data-loading] .pn-button-content{opacity:0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translateY(100%);transform:translateY(100%)}pn-button[data-loading] .pn-button-bg{width:3em}pn-button[data-loading] button.pn-button-small .pn-button-bg,pn-button[data-loading] a.pn-button-small .pn-button-bg{width:2.286em}pn-button button .button-tooltip,pn-button a .button-tooltip{position:absolute;top:calc(100% + 0.35em);left:50%;background:#0a406e;color:#FFFFFF;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;-webkit-box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:5;max-width:min(95vw, 40em);-webkit-transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1);transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transform:translateX(-50%);transform:translateX(-50%);width:-webkit-max-content;width:-moz-max-content;width:max-content;opacity:0;pointer-events:none}pn-button button[data-tooltip-open] .button-tooltip,pn-button a[data-tooltip-open] .button-tooltip{opacity:1;-webkit-transition-delay:5s;transition-delay:5s}pn-button button.button-tooltip-upwards .button-tooltip,pn-button a.button-tooltip-upwards .button-tooltip{top:auto;bottom:calc(100% + 0.35em)}pn-button button.pn-button-warning .button-tooltip,pn-button a.pn-button-warning .button-tooltip{background:#A70707;color:#FFFFFF}pn-button a{text-decoration:none}pn-button a:hover{color:#FFFFFF}pn-button a:hover.pn-button-light{color:#005D92}";
+const pnButtonCss = "pn-button{display:inline-block}pn-button button,pn-button a{color:#fff;cursor:pointer;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;background:transparent;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:color 0.3s;transition:color 0.3s;-webkit-tap-highlight-color:transparent;}pn-button button pn-icon,pn-button a pn-icon{-ms-flex-negative:0;flex-shrink:0;margin:0 0 0 0.5em}pn-button button pn-icon svg path,pn-button a pn-icon svg path{fill:#fff;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-button button .pn-button-content,pn-button a .pn-button-content{z-index:2;-webkit-transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, transform 0.2s;transition:opacity 0.1s, transform 0.2s, -webkit-transform 0.2s;-webkit-transition-delay:0.2s;transition-delay:0.2s;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}pn-button button .pn-button-bg,pn-button a .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;border-radius:3em;border:0.1rem solid transparent;background:#005d92;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s;overflow:hidden}pn-button button .pn-button-bg::after,pn-button a .pn-button-bg::after{content:\"\";position:absolute;will-change:transform;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);width:100%;height:100%;background:#0d234b;border-radius:inherit;left:0;-webkit-transform:translateX(-103%);transform:translateX(-103%);opacity:0.5}pn-button button.pn-button-light,pn-button a.pn-button-light{color:#005d92}pn-button button.pn-button-light pn-icon svg path,pn-button a.pn-button-light pn-icon svg path{fill:#005d92}pn-button button.pn-button-light pn-spinner .circle,pn-button a.pn-button-light pn-spinner .circle{stroke:#005d92}pn-button button.pn-button-light pn-spinner .dot,pn-button a.pn-button-light pn-spinner .dot{fill:#005d92}pn-button button.pn-button-light .pn-button-bg,pn-button a.pn-button-light .pn-button-bg{border:0.1rem solid #005d92;background:#fff}pn-button button.pn-button-light .pn-button-bg:after,pn-button a.pn-button-light .pn-button-bg:after{background:#e0f8ff;opacity:1}pn-button button.pn-button-light .pn-button-bg .pn-ripple,pn-button a.pn-button-light .pn-button-bg .pn-ripple{background:#005d92}pn-button button.pn-button-warning,pn-button a.pn-button-warning{color:#a70707}pn-button button.pn-button-warning pn-icon svg path,pn-button a.pn-button-warning pn-icon svg path{fill:#a70707}pn-button button.pn-button-warning pn-spinner .circle,pn-button a.pn-button-warning pn-spinner .circle{stroke:#a70707}pn-button button.pn-button-warning pn-spinner .dot,pn-button a.pn-button-warning pn-spinner .dot{fill:#a70707}pn-button button.pn-button-warning .pn-button-bg,pn-button a.pn-button-warning .pn-button-bg{border:0.1rem solid #a70707;background:#fdefee}pn-button button.pn-button-warning .pn-button-bg:after,pn-button a.pn-button-warning .pn-button-bg:after{background:#a70707;opacity:1}pn-button button.pn-button-variation-borderless .pn-button-bg,pn-button a.pn-button-variation-borderless .pn-button-bg{border:0.1rem solid transparent;background:transparent}pn-button button.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after,pn-button a.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined .pn-button-bg,pn-button a.pn-button-variation-outlined .pn-button-bg{background:transparent}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg{border-color:#ffffff}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined.pn-button-light .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-light .pn-button-bg::after{background:#00a0d6;opacity:0.1}pn-button button.pn-button-left-icon .pn-button-content,pn-button a.pn-button-left-icon .pn-button-content{-ms-flex-direction:row-reverse;flex-direction:row-reverse}pn-button button.pn-button-left-icon .pn-button-content pn-icon,pn-button a.pn-button-left-icon .pn-button-content pn-icon{margin:0 0.5em 0 0}pn-button button.icon-only,pn-button a.icon-only{width:3em;min-width:0}pn-button button.icon-only pn-icon,pn-button a.icon-only pn-icon{margin:0}pn-button button.icon-only.pn-button-small,pn-button a.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-button button.pn-button-small,pn-button a.pn-button-small{font-size:1.4rem;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}pn-button button.pn-button-small pn-icon svg,pn-button a.pn-button-small pn-icon svg{height:1.28em;width:1.28em}a:focus>pn-button button .pn-button-bg,pn-button button:focus .pn-button-bg,pn-button a:focus .pn-button-bg{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}a:focus>pn-button button .pn-button-bg:after,pn-button button:hover .pn-button-bg:after,pn-button button:focus .pn-button-bg:after,pn-button a:hover .pn-button-bg:after,pn-button a:focus .pn-button-bg:after{-webkit-transform:translateX(0);transform:translateX(0)}a:focus>pn-button button.pn-button-warning,pn-button button.pn-button-warning:hover,pn-button a.pn-button-warning:hover,pn-button button.pn-button-warning:focus,pn-button a.pn-button-warning:focus{color:#fff}a:focus>pn-button button.pn-button-warning pn-icon svg path,pn-button button.pn-button-warning:hover pn-icon svg path,pn-button a.pn-button-warning:hover pn-icon svg path,pn-button button.pn-button-warning:focus pn-icon svg path,pn-button a.pn-button-warning:focus pn-icon svg path{fill:#fff}a:focus>pn-button button.pn-button-warning pn-spinner .circle,pn-button button.pn-button-warning:hover pn-spinner .circle,pn-button a.pn-button-warning:hover pn-spinner .circle,pn-button button.pn-button-warning:focus pn-spinner .circle,pn-button a.pn-button-warning:focus pn-spinner .circle{stroke:#fff}a:focus>pn-button button.pn-button-warning pn-spinner .dot,pn-button button.pn-button-warning:hover pn-spinner .dot,pn-button a.pn-button-warning:hover pn-spinner .dot,pn-button button.pn-button-warning:focus pn-spinner .dot,pn-button a.pn-button-warning:focus pn-spinner .dot{fill:#fff}a:focus>pn-button button.pn-button-warning .pn-button-bg,pn-button button.pn-button-warning:focus .pn-button-bg,pn-button a.pn-button-warning:focus .pn-button-bg{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-button .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background:#fff;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-button pn-spinner{position:absolute;-webkit-transform:scale(0);transform:scale(0)}pn-button[data-loading] pn-spinner{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s}pn-button[data-loading] .pn-button-content{opacity:0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translateY(100%);transform:translateY(100%)}pn-button[data-loading] .pn-button-bg{width:3em}pn-button[data-loading] button.pn-button-small .pn-button-bg,pn-button[data-loading] a.pn-button-small .pn-button-bg{width:2.286em}pn-button button .button-tooltip,pn-button a .button-tooltip{position:absolute;top:calc(100% + 0.35em);left:50%;background:#0a406e;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;-webkit-box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:5;max-width:min(95vw, 40em);-webkit-transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1);transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transform:translateX(-50%);transform:translateX(-50%);width:-webkit-max-content;width:-moz-max-content;width:max-content;opacity:0;pointer-events:none}pn-button button[data-tooltip-open] .button-tooltip,pn-button a[data-tooltip-open] .button-tooltip{opacity:1;-webkit-transition-delay:5s;transition-delay:5s}pn-button button.button-tooltip-upwards .button-tooltip,pn-button a.button-tooltip-upwards .button-tooltip{top:auto;bottom:calc(100% + 0.35em)}pn-button button.pn-button-warning .button-tooltip,pn-button a.pn-button-warning .button-tooltip{background:#a70707;color:#ffffff}pn-button a{text-decoration:none}pn-button a:hover{color:#ffffff}pn-button a:hover.pn-button-light{color:#005d92}";
 
 const PnButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -67,8 +67,8 @@ const PnButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const openEvents = ['mouseover', 'focus'];
     const closeEvents = ['mouseleave', 'blur'];
     const eventListeners = [...openEvents, ...closeEvents];
-    eventListeners.forEach((e) => {
-      tooltipAnchor.addEventListener(e, (event) => {
+    eventListeners.forEach(e => {
+      tooltipAnchor.addEventListener(e, event => {
         // Should open?
         if (openEvents.includes(event.type)) {
           this.tooltipOpen = true;
@@ -94,7 +94,6 @@ const PnButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.tooltipDx = '0';
       this.tooltipUpwards = y + height > window.innerHeight;
       this.tooltipEl.style.transform = '';
-      console.log(this.tooltipUpwards);
       if (x < 0)
         this.tooltipDx = `${x * -1 + extraMargin}`;
       if (right > window.innerWidth)
@@ -169,7 +168,7 @@ const PnButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const TagName = this.getTagName();
-    return (h(Host, { class: "pn-button" }, h(TagName, Object.assign({ class: this.getClassNames(), "data-loading": this.loading, onClick: (e) => this.ripple(e, this.hostElement), "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "data-tooltip-open": this.tooltipOpen, "aria-controls": this.ariaControls, "aria-pressed": this.ariaPressed }, this.getAttributes()), h("div", { class: "pn-button-bg" }), h("div", { class: "pn-button-content" }, !this.iconOnly && h("slot", null), this.icon && h("pn-icon", { symbol: this.icon })), h("pn-spinner", { light: true }), this.iconOnly && (h("div", { class: "button-tooltip" }, h("slot", null))))));
+    return (h(Host, { class: "pn-button" }, h(TagName, Object.assign({ class: this.getClassNames(), "data-loading": this.loading, onClick: e => this.ripple(e, this.hostElement), "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "data-tooltip-open": this.tooltipOpen, "aria-controls": this.ariaControls, "aria-pressed": this.ariaPressed }, this.getAttributes()), h("div", { class: "pn-button-bg" }), h("div", { class: "pn-button-content" }, !this.iconOnly && h("slot", null), this.icon && h("pn-icon", { symbol: this.icon })), h("pn-spinner", { light: true }), this.iconOnly && (h("div", { class: "button-tooltip" }, h("slot", null))))));
   }
   get hostElement() { return this; }
   static get watchers() { return {

package/umd/modules/@postnord/web-components/components/pn-calendar2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as createDateOrNull, a as computeMonths, g as getMonthNamesByLanguage, b as getDayNamesByLanguage } from './helpers.js';
 import { d as defineCustomElement$1 } from './pn-icon2.js';
 
-const pnCalendarCss = "pn-calendar .pn-calendar-wrapper{position:relative}pn-calendar .pn-calendar-container{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;background-color:white;z-index:9999}pn-calendar .pn-calendar-container .pn-calendar-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:1.6rem}pn-calendar .pn-calendar-container .pn-calendar-nav>div{cursor:pointer}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous,pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next{width:3rem;display:-ms-flexbox;display:flex}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous{text-align:left;-ms-flex-pack:start;justify-content:flex-start}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next{text-align:right;-ms-flex-pack:end;justify-content:flex-end}pn-calendar .pn-calendar-container .pn-calendar-nav .pn-calendar-month{padding:1em;border:0.1rem solid #5E554A;border-radius:0.8rem;font-size:1.2rem;color:#5E554A;font-weight:500;text-align:center}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-size:1.2rem;color:#969087;line-height:2.4rem;text-align:center;font-weight:300}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row>div{width:2.4rem}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row .pn-calendar-month{width:6rem}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-day-names{padding:0.4rem 0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months{color:#5E554A;padding:0.8rem 0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days:last-child,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months:last-child{padding-bottom:0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month{border-bottom:0.4rem inset transparent;cursor:pointer}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day{cursor:default;color:#D3CECB}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day:hover{border-bottom-color:transparent}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.today{outline:0.1rem solid #D3CECB}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:hover{border-bottom-color:#00A0D6}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.selected{border-bottom-color:#005D92}";
+const pnCalendarCss = "pn-calendar .pn-calendar-wrapper{position:relative}pn-calendar .pn-calendar-container{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;background-color:white;z-index:9999}pn-calendar .pn-calendar-container .pn-calendar-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:1.6rem}pn-calendar .pn-calendar-container .pn-calendar-nav>div{cursor:pointer}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous,pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next{width:3rem;display:-ms-flexbox;display:flex}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous{text-align:left;-ms-flex-pack:start;justify-content:flex-start}pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next{text-align:right;-ms-flex-pack:end;justify-content:flex-end}pn-calendar .pn-calendar-container .pn-calendar-nav .pn-calendar-month{padding:1em;border:0.1rem solid #5e554a;border-radius:0.8rem;font-size:1.2rem;color:#5e554a;font-weight:500;text-align:center}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-size:1.2rem;color:#969087;line-height:2.4rem;text-align:center;font-weight:300}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row>div{width:2.4rem}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row .pn-calendar-month{width:6rem}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-day-names{padding:0.4rem 0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months{color:#5e554a;padding:0.8rem 0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days:last-child,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months:last-child{padding-bottom:0}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month{border-bottom:0.4rem inset transparent;cursor:pointer}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day{cursor:default;color:#d3cecb}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day:hover{border-bottom-color:transparent}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.today,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.today{outline:0.1rem solid #d3cecb}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:hover,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:hover{border-bottom-color:#00a0d6}pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.selected,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:active,pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.selected{border-bottom-color:#005d92}";
 
 const PnCalendar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {