@postnord/pn-marketweb-components 4.3.6 → 4.3.8

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-icon/pn-icon.js

@@ -15,18 +15,16 @@ export class PnIcon {
     hostElement;
     /**
      * The SVG content of the icon you want to use.
-     *
-     * Flags cannot be colored.
-     *
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|PostNord Icons (Storybook)}
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|PostNord Flags (Storybook)}
+     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|Icons (Storybook)}
+     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|Flags (Storybook)}
      **/
     icon = '';
     /** Make the icon small (16 instead of 24px). */
     small = false;
     /**
-     * Color the icon with one of the follwing colors from our library.
-     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|PostNord Colors (Storybook)}
+     * Color the icon with one of the following colors from our library.
+     * Has no effects if you use flags from our library.
+     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|Colors (Storybook)}
      **/
     color = 'gray900';
     handleColor() {
@@ -37,7 +35,7 @@ export class PnIcon {
         this.handleColor();
     }
     render() {
-        return h(Host, { key: 'f63d0b1e54fe91f9fcf33811f6694e604e09929d', role: "presentation", class: "pn-icon", innerHTML: this.icon });
+        return (h(Host, { key: 'f4d252ce71c0e0c83d352447bdd0c195de49196f' }, h("span", { key: 'adc6e3dd5d4d45ed9a154f07bd3e3fce8dbf6981', role: "presentation", class: "pn-icon", "data-small": this.small, innerHTML: this.icon })));
     }
     static get is() { return "pn-icon"; }
     static get originalStyleUrls() {
@@ -65,12 +63,12 @@ export class PnIcon {
                 "docs": {
                     "tags": [{
                             "name": "see",
-                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs PostNord Icons (Storybook)}"
+                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs Icons (Storybook)}"
                         }, {
                             "name": "see",
-                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs PostNord Flags (Storybook)}"
+                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs Flags (Storybook)}"
                         }],
-                    "text": "The SVG content of the icon you want to use.\n\nFlags cannot be colored."
+                    "text": "The SVG content of the icon you want to use."
                 },
                 "getter": false,
                 "setter": false,
@@ -94,7 +92,7 @@ export class PnIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "small",
                 "defaultValue": "false"
             },
@@ -118,9 +116,9 @@ export class PnIcon {
                 "docs": {
                     "tags": [{
                             "name": "see",
-                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs PostNord Colors (Storybook)}"
+                            "text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs Colors (Storybook)}"
                         }],
-                    "text": "Color the icon with one of the follwing colors from our library."
+                    "text": "Color the icon with one of the following colors from our library.\nHas no effects if you use flags from our library."
                 },
                 "getter": false,
                 "setter": false,

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-illustration/pn-illustration.css

@@ -1,10 +1,14 @@
 pn-illustration {
   display: inline-block;
 }
-pn-illustration[data-fill] {
+
+pn-illustration .pn-illustration {
+  display: inline-block;
+}
+pn-illustration .pn-illustration[data-fill] {
   display: block;
 }
-pn-illustration > svg {
+pn-illustration .pn-illustration > svg {
   width: var(--pn-width);
   height: var(--pn-height);
   display: block;

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-illustration/pn-illustration.js

@@ -3,6 +3,12 @@
  * By PostNord.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * The `pn-illustration` is a wrapper for an SVG string.
+ * The component will look at the viewBox property of the SVG to determine the default width and height,
+ * but you can also set these manually with the `width` and `height` props.
+ * Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
+ */
 export class PnIllustration {
     hostElement;
     /** The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height */
@@ -45,7 +51,7 @@ export class PnIllustration {
         this.hostElement.style.setProperty('--pn-height', this.height);
     }
     render() {
-        return h(Host, { key: '3f2e44ec10a5a2fc9fd9a69f94963ab4e79fb877', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
+        return (h(Host, { key: '30a6824eaa6972efee63b5f893defb80bac7821c' }, h("span", { key: 'd27b45f1789b6c93d34ab0b1c673bda9fff60c0b', role: "presentation", class: "pn-illustration", "data-fill": this.fill, innerHTML: this.illustration })));
     }
     static get is() { return "pn-illustration"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.css

@@ -184,13 +184,16 @@ pn-modal .pn-modal-picture > *[slot=image] {
 }
 pn-modal .pn-modal-buttons {
   background-color: #ffffff;
-  border-top: 0.0625em solid #d3cecb;
   padding: clamp(1em, 5vw, 1.5em);
   display: flex;
   justify-content: flex-end;
   gap: 0.5em;
   border-radius: 0 0 1.5em 1.5em;
 }
+pn-modal .pn-modal-buttons[data-divider] {
+  border-top: 0.0625em solid #d3cecb;
+  margin-top: auto;
+}
 pn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) {
   display: flex;
   justify-content: flex-end;

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.js

@@ -36,7 +36,9 @@ export class PnModal {
     helpertext;
     /** Set the language. @since v7.14.0 */
     language = null;
-    /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */
+    /** Set a custom HTML id. @since v7.24.0 */
+    pnId = null;
+    /** Use this prop if you want to control the visibility of the modal programmatically. @category Features */
     open = false;
     /**
      * Prevent users from closing the modal by clicking on the backdrop or the `ESC` key.
@@ -45,19 +47,20 @@ export class PnModal {
      */
     persistent = false;
     /**
-     * Hide the close button. If you disable this, make sure you build your own cancel button.
+     * Hide the close button. If you enable this, make sure you build your own cancel button.
      * @since v7.14.0
      * @category Features
      */
     hideClose = false;
     /**
-     * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.
-     * Do not use if you have a lot of conditional rendering inside the modal.
+     * Allow overflow *when* it is possible.
+     * Do not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts.
      * @since v7.14.0
+     * @category Features
      */
     allowOverflow = false;
     /**
-     * Use the `sheet` visual. Aligns the modal to the right.
+     * Use the `sheet` visual. Aligns the modal to the right instead of the center.
      * @since v7.14.0
      * @category Visual
      */
@@ -85,7 +88,9 @@ export class PnModal {
             this.animationDuration = this.standardAnimationDuration;
         this.modalTimeout = setTimeout(() => {
             this.isClosing = false;
+            /** @todo remove in v8.0.0 */
             this.modalVisiblity.emit({ visible: this.open });
+            this.modalVisibility.emit({ visible: this.open });
         }, this.animationDuration);
     }
     handleMaxWidth() {
@@ -98,7 +103,13 @@ export class PnModal {
     }
     /** This event is fired when the modal is toggled. {@since v7.14.0} */
     modalToggle;
-    /** This event is dispatched after the opening/closing animation has finished playing. {@since v7.14.0} */
+    /** This event is dispatched after the opening/closing animation has finished playing. {@since v7.22.0} */
+    modalVisibility;
+    /**
+     * This event is dispatched after the opening/closing animation has finished playing.
+     * @since v7.14.0
+     * @deprecated v7.22.0. Use `modalVisibility` instead due to typo.
+     */
     modalVisiblity;
     /**
      * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.
@@ -173,7 +184,7 @@ export class PnModal {
         this.open = state ?? !this.open;
     }
     render() {
-        return (h(Host, { key: 'd965a05833b311fed1f1f7ba245c9401ab77b765' }, h("dialog", { key: 'd60d253a75dd3f82b684fce659a9a917d6181c62', class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, "data-image": this.showImage(), "data-allow-overflow": this.removeOverflow, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (h("pn-button", { key: '4d25a2e559a8aca6286a9fc7a94f82285bd8ad4e', small: true, class: "pn-modal-close-button", icon: closeIcon, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), h("div", { key: '3953eef2505ccda4786177c01ae9af92874d65a1', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, h("div", { key: 'de0730ef36d305f2ff2652510838df85bdbdee5e', class: "pn-modal-image", hidden: !this.showImage() }, h("picture", { key: 'c26ae160c243b630d7a1ba71a8d4cac523096cfd', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, h("slot", { key: '4d2425b17367b4ccd2215e54cfedbee6731a9daf', name: "image" }))), h("header", { key: '815bef72c5b9a2982b7dd62059314ef120221ee0', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && h("h2", { key: '41ae0e9a7d8adca27764bf6be026d0bc59df9b90', class: "pn-modal-label" }, this.label), this.helpertext && h("p", { key: '4fac7c6daf49eaff4a56b7c217f49e7f0507299f', class: "pn-modal-text" }, this.helpertext), h("slot", { key: '8ce017defaa66a4bfec5ef38398b3104ed0ff7f9', name: "header" })), h("section", { key: '3ad1dc180db0ad42a4fa99dc6c9a17fc153af362', class: "pn-modal-content" }, h("slot", { key: 'bddef9aa3cd8b78be3facd5ebd3e88d72b9eb219' })), h("nav", { key: 'edc771b8ca813ed6c9b20f688847c9c22072f0a1', class: "pn-modal-buttons" }, h("slot", { key: '75dcf50e07c985f95836251881b8c214bc1b58c6', name: "buttons" }))))));
+        return (h(Host, { key: '5b50fca359ed20cebcbdead766d08c2439463b4c' }, h("dialog", { key: '43eb7bb4f09c6ce9a665f7478f25b1ae4a253562', id: this.pnId, class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, "data-image": this.showImage(), "data-allow-overflow": this.removeOverflow, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (h("pn-button", { key: '0bdc665fe32c8531edb073166fe8940d12360661', small: true, class: "pn-modal-close-button", icon: closeIcon, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), h("div", { key: 'ce9529f76b572f6681e1b75528bcab67e3246dbd', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, h("div", { key: 'a2addec74c8af3fc9084a0d6faba9053a255bf86', class: "pn-modal-image", hidden: !this.showImage() }, h("picture", { key: '4341ae13d01268cc0f9df74bf417522116bed2d9', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, h("slot", { key: '99a643af231cdcd76ad2dafbcdbaf4fbabac5390', name: "image" }))), h("header", { key: '849eea60adcfb7c3bbba8687dc49edf752004617', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && h("h2", { key: 'e57185ebd04cd622ceca5acb81c6606747afa6f9', class: "pn-modal-label" }, this.label), this.helpertext && h("p", { key: '2e0290387a2b96f3eb70db67dd7ac349c5c4fe9e', class: "pn-modal-text" }, this.helpertext), h("slot", { key: 'e05316839bfc8883a2e8f4c5079054e9edcd3859', name: "header" })), h("section", { key: 'd59b818c18159c106df1f6c3b2b3f747f1b6af29', class: "pn-modal-content" }, h("slot", { key: 'c740eb0b7909c9fa5878caecb66887f5bb9b2b73' })), h("nav", { key: '22971631737901988e27f4f01c311d2d76839c6a', class: "pn-modal-buttons", "data-divider": this.sheet }, h("slot", { key: '3c0e8e66db96d8abc8f718270d94e09b2ad90320', name: "buttons" }))))));
     }
     static get is() { return "pn-modal"; }
     static get originalStyleUrls() {
@@ -262,6 +273,29 @@ export class PnModal {
                 "attribute": "language",
                 "defaultValue": "null"
             },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.24.0"
+                        }],
+                    "text": "Set a custom HTML id."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id",
+                "defaultValue": "null"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -277,7 +311,7 @@ export class PnModal {
                             "name": "category",
                             "text": "Features"
                         }],
-                    "text": "Bind to this property if you want to control the visibility of the modal from your own data."
+                    "text": "Use this prop if you want to control the visibility of the modal programmatically."
                 },
                 "getter": false,
                 "setter": false,
@@ -329,7 +363,7 @@ export class PnModal {
                             "name": "category",
                             "text": "Features"
                         }],
-                    "text": "Hide the close button. If you disable this, make sure you build your own cancel button."
+                    "text": "Hide the close button. If you enable this, make sure you build your own cancel button."
                 },
                 "getter": false,
                 "setter": false,
@@ -351,8 +385,11 @@ export class PnModal {
                     "tags": [{
                             "name": "since",
                             "text": "v7.14.0"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
                         }],
-                    "text": "Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\nDo not use if you have a lot of conditional rendering inside the modal."
+                    "text": "Allow overflow *when* it is possible.\nDo not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts."
                 },
                 "getter": false,
                 "setter": false,
@@ -378,7 +415,7 @@ export class PnModal {
                             "name": "category",
                             "text": "Visual"
                         }],
-                    "text": "Use the `sheet` visual. Aligns the modal to the right."
+                    "text": "Use the `sheet` visual. Aligns the modal to the right instead of the center."
                 },
                 "getter": false,
                 "setter": false,
@@ -437,6 +474,21 @@ export class PnModal {
                     "resolved": "{ open: boolean; }",
                     "references": {}
                 }
+            }, {
+                "method": "modalVisibility",
+                "name": "modalVisibility",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is dispatched after the opening/closing animation has finished playing. {@since v7.22.0}"
+                },
+                "complexType": {
+                    "original": "{ visible: boolean }",
+                    "resolved": "{ visible: boolean; }",
+                    "references": {}
+                }
             }, {
                 "method": "modalVisiblity",
                 "name": "modalVisiblity",
@@ -444,8 +496,14 @@ export class PnModal {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "This event is dispatched after the opening/closing animation has finished playing. {@since v7.14.0}"
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.14.0"
+                        }, {
+                            "name": "deprecated",
+                            "text": "v7.22.0. Use `modalVisibility` instead due to typo."
+                        }],
+                    "text": "This event is dispatched after the opening/closing animation has finished playing."
                 },
                 "complexType": {
                     "original": "{ visible: boolean }",

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-bar/pn-progress-bar.js

@@ -67,7 +67,7 @@ export class PnProgressBar {
         return 'green500';
     }
     render() {
-        return (h(Host, { key: '141fef1da768dc423cf53dfa8088f1b98429236c' }, this.hasLabel() && (h("p", { key: '294199499037e6ed0e816f8a68850dfede795884', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: 'f292e951e29878d186b7f7896d7346fd41677006' }, this.label), this.hasIcon() && h("pn-icon", { key: '47b8065b97a8cd0f0d3e57ea4f68b07ad09c12a5', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '0dd5189948aad2e501ee10076ed212987a52e4d8', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '51ceae38d589385687dd3e25c86526b4758f2792', class: "pn-progress-bar-meter" }, h("div", { key: '714d0aa19a487bf625ae10bcdd68d21d54b6f48a', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'b540a56c9d7fdfae49f508472d315ce1eeda5e99', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '35d515a823d117a6ab31e3cda778a2ada8093233' }, this.getSubtext()))));
+        return (h(Host, { key: '09b5b426ac2b3b5ac6da052516f02a37e86a5ae6' }, this.hasLabel() && (h("p", { key: 'f63e4d6fcf21e46e809866fa9f25e92975665c60', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: '731610df6161f9d7724f85e1fc849983dd2c9e30' }, this.label), this.hasIcon() && h("pn-icon", { key: 'a9a823e21c9a6192ecd476fa7f993e2dc508f292', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: 'b38c51cbc3bf30d73cc169053a97fd62acd95972', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '91f89839bf307d1b32f3735690ae6894b845fcc2', class: "pn-progress-bar-meter" }, h("div", { key: '01dd3151497db0d7a4bfaa401fb132e015708ca6', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'fe4122adfd2d4e1ea043f161bc217b59f3164cf0', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '7094b7dd7cf15e29cec6f710927a3b62151d8709' }, this.getSubtext()))));
     }
     static get is() { return "pn-progress-bar"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.js

@@ -59,7 +59,7 @@ export class PnProgressIndicatorStep {
         return className;
     }
     render() {
-        return (h(Host, { key: 'e5518f2d8c21c889738beb3a42e6865e7c64ac76', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: 'b0f5f684ca12fda2b22b51945d3b0b41ab490fa3', class: "progress-line" }), h("div", { key: '8d05494d4cc77145e44270666b678cf48eb05a96', class: "info-container" }, h("slot", { key: '864bea1ce3dd348be1abadcc3f8fb3757ac009b9' }), this.name), h("div", { key: '7d8394e5a4919404a137fd30ce125dfda5ed3034', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
+        return (h(Host, { key: '8e3e6d57379a0e7fbc4fa481ed58f320b0a7e270', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: 'f07ace31e400c93a84043d4402bff452b2f3a5ea', class: "progress-line" }), h("div", { key: '1b7b7fcdbcf11091b66a29f936cb144cb8d7b948', class: "info-container" }, h("slot", { key: '9e075b50e5c16f7313d0442c889cd7ccbc2cbac9' }), this.name), h("div", { key: '8240501b137f38915d3a42139e340593a1975977', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
     }
     static get is() { return "pn-progress-indicator-step"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator.js

@@ -31,7 +31,7 @@ export class PnProgressIndicator {
         });
     }
     render() {
-        return (h("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, h("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
+        return (h("div", { key: '55eb279175a09345ebcb087ac6b0f819d5032a1e', class: "pn-progress-indicator" }, h("slot", { key: '70f0273b605df274663752dadde8585411a74bd7' })));
     }
     static get is() { return "pn-progress-indicator"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.js

@@ -89,7 +89,7 @@ export class PnProgressStepper {
         return this.progressStepperId || this.id;
     }
     render() {
-        return (h(Host, { key: 'a93457e5c8ec35858e7f15e45578feb67ec37f4e' }, h("label", { key: '86a36ba455f7433f072a9b38b8af09c9fda45fc4', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: 'eeb9163062bd19b03c394fe6c936440f040dd246' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf' }, " - ", this.stepName)), h("progress", { key: '81658eb2942d0b1712bbbb4e22904d0b4c3a5229', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
+        return (h(Host, { key: 'eae49d6f5d3085e714bff2e668694523185c6fb6' }, h("label", { key: 'd5ec64934b8e8eab33b771d20aa34cdfb595f600', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: 'a30465882d45cdc3ee6513c79a9b9a0cacb68a88' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'fb4f2eb25ccd60c648c7a2d077dfce35b6888f52' }, " - ", this.stepName)), h("progress", { key: '6822b750b6d86644f5a77115d449c050b7be418d', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
     }
     static get is() { return "pn-progress-stepper"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-spinner/pn-spinner.js

@@ -19,7 +19,7 @@ export class PnSpinner {
         return `${this.size}em`;
     }
     render() {
-        return (h(Host, { key: 'a9ecba01b5b30a660a44439c714b7ad57cf02a88' }, h("svg", { key: '03fbe990bf1ae0402fcb27707e0c1712d8a84492', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: '5f69d1bbbf864842f9ae54dc9a29b61603a83bff', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
+        return (h(Host, { key: 'a143e0f8959099811a49a4772809bea95ac7b3c5' }, h("svg", { key: '14d49833b52a340b3b3d1a3c1dfdfb8e9c176858', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'b66d19a748cf83364f508956c9c3e1a487de96fc', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'e576947e99cd98ead97e4a49327fcce9e5811af3', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
     }
     static get is() { return "pn-spinner"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-toast/pn-toast.js

@@ -140,7 +140,7 @@ export class PnToast extends Mixin(animateHeightFactory) {
         return this.hide && !this.isMoving();
     }
     render() {
-        return (h(Host, { key: '5c3fee615535723fb1f866ad2e5bc955289abe6e' }, h("div", { key: '4de5c242cce6bd2e77c355030c53e1161495f2aa', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: '69348635c02e8108503dbf588e65d522405fd08f', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'a4a2bbd367ff30405a305e4c56da05575e2765bd', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '0e847dd42ed4d0e1c518b69519f27f23d491e11c', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: 'c423eb0872592844f4d583839b438442f65c1ab9', class: "pn-toast-text" }, this.text), h("slot", { key: '4e743ba3362107a4b5f585e12b2ad2879ffef5bf' })), this.showIllustration() && h("pn-illustration", { key: '1330548a89218ee19a73ff83f94df180a7b2cc98', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '321c57a9103fa0b4abedd2429420f94faa9fd5fc', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: '3d68d08f2cca035840acd466accbe0d66da65153', icon: close }))))));
+        return (h(Host, { key: '8fc8af6de122bae90d2909840a3d2c412cc3181d' }, h("div", { key: 'ad45d0c295ea660c6e03f1b98e91294519003886', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: '7e856fb052f535e72b15044347eb2a20dc141297', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'b8549738d389bb4b3269192c9a6fa606e6500e25', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: 'ef243b8a4d842c8583308bd8cd75a3c640ba811a', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: '7d4a03a243567f881ddaa826959c36cebd84ad00', class: "pn-toast-text" }, this.text), h("slot", { key: '1cf28e44d6f37c053b33634529ee0a2d1d7dc58d' })), this.showIllustration() && h("pn-illustration", { key: 'f219657a26c48361d1f31cccf947a13f749f6e7b', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '1bebf8881b20963d9a611cdcf8e293fb6f035cc7', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: '14b4fee29de5810bd9d04476500e6d806fe3a2eb', icon: close }))))));
     }
     static get is() { return "pn-toast"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-tooltip/pn-tooltip.js

@@ -76,7 +76,7 @@ export class PnTooltip {
         }, time);
     }
     render() {
-        return (h("button", { key: '1898e87fa0848bb546807416112feb7ee9f8c5a5', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, h("pn-icon", { key: 'd4a28061a6c69ffa41cb69c4fd39961b4927949c', icon: this.getSymbol(), "data-simple": !!this.tooltip }), h("div", { key: 'cc7ae46d8c228136a29356083734104bfbb2a30d', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, h("div", { key: '9ccae396edf92999920b99bf97d0818541a44bf1', hidden: !!this.tooltip }, h("slot", { key: '61b67be4486d95208e09630d58a3dc3b344c5354' })))));
+        return (h("button", { key: 'b05404e6f5f07fd347bc701860e5653a9dbce3e8', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, h("pn-icon", { key: 'f2842073c6434c74b4edc312fde550f71fb46657', icon: this.getSymbol(), "data-simple": !!this.tooltip }), h("div", { key: 'cd9a95132eb2bcacc999fbb2d3e31d5cdee64fed', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, h("div", { key: 'd10296fa39d348a197405296d62c5b11c4ccbd92', hidden: !!this.tooltip }, h("slot", { key: 'a12512c517fd7aca30f5dadf6cd8b6fbd1f5da56' })))));
     }
     static get is() { return "pn-tooltip"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-wizard/pn-wizard.css

@@ -169,26 +169,26 @@ pn-wizard .pn-wizard-arrow {
 }
 pn-wizard .pn-wizard-arrow[data-arrow=bottom] {
   top: 100%;
-  bottom: -1em;
+  bottom: -0.9375em;
   left: var(--pn-arrow-offset);
   border-top-color: #ffffff;
 }
 pn-wizard .pn-wizard-arrow[data-arrow=top] {
-  top: -1em;
+  top: -0.9375em;
   left: var(--pn-arrow-offset);
   border-bottom-color: #ffffff;
 }
 pn-wizard .pn-wizard-arrow[data-arrow=right] {
-  right: -1em;
+  right: -0.9375em;
   left: 100%;
   top: var(--pn-arrow-offset);
   border-left-color: #ffffff;
 }
 pn-wizard .pn-wizard-arrow[data-arrow=left] {
-  left: -1em;
+  left: -0.9375em;
   top: var(--pn-arrow-offset);
   border-right-color: #ffffff;
 }
 pn-wizard .pn-wizard-arrow[data-arrow=none] {
-  display: none;
+  border-color: transparent;
 }