@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -21,28 +21,52 @@ export class PnToggleSwitch {
     label;
     /** Provide a helpertext for the toggle switch. */
     helpertext;
-    /** Precheck the toggle. */
-    checked = false;
-    /** Set a unique HTML id. */
-    toggleid = this.id;
-    /** HTML toggle name. @category HTML */
-    name = null;
-    /** HTML toggle value. @category HTML */
+    /** HTML toggle value. @category Native attributes  */
     value = null;
-    /** Make the toggle smaller. @category Visual */
+    /** HTML toggle name. @category Native attributes  */
+    name = null;
+    /** Precheck the toggle. @category Native attributes  */
+    checked = false;
+    /** Set the switch as required. @since v7.25.0 @category Native attributes */
+    required = false;
+    /** Disable the toggle. @category Native attributes */
+    disabled = false;
+    /** Make the toggle smaller. @category Features */
     small = false;
-    /** Make the toggle larger. @category Visual */
+    /** Make the toggle larger. @category Features */
     large = false;
-    /** Disable the toggle. @category State */
-    disabled = false;
-    /** Set the loading state. @category State */
+    /** Set the loading state. @category Features */
     loading = false;
+    /** Set a custom ID for the switch. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Set a custom ID for the switch. @deprecated Use `pn-id` instead. @category HTML attributes */
+    toggleid;
     handleHelperId() {
-        if (this.id !== this.toggleid)
-            this.idHelper = `${this.toggleid}-helper`;
+        this.idHelper = `${this.getId()}-helper`;
     }
-    componentWillLoad() {
-        this.handleHelperId();
+    getId() {
+        return this.pnId || this.toggleid || this.id;
+    }
+    getSpinnerSize() {
+        if (this.small)
+            return 1;
+        if (this.large)
+            return 1.25;
+        return 1.125;
     }
     hasHelpertextProp() {
         return !!this.helpertext;
@@ -56,8 +80,17 @@ export class PnToggleSwitch {
     describedBy() {
         return this.showHelpertext() ? this.idHelper : null;
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     render() {
-        return (h(Host, { key: 'b88bbc2385be79dd584ecee5e53dc89832de49c3' }, h("div", { key: '4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d', class: "pn-toggle" }, this.label && (h("div", { key: '944a36f2018335a283092c909af2f37846850eb8', class: "pn-toggle-content" }, h("label", { key: '2536eaf65117b1c70d1ec31f17faa41f2a6fced4', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: 'eae8a38d31f6bc05faa9d56c08517f9302be9a3e' }, this.label)), h("p", { key: '6173ba384459c406eb98fe4318e080b6cd36031a', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: 'd4a52d7786e7a63ca3f201c3ad7cb8793e377c12' }, this.helpertext), h("slot", { key: '06406382d523b70b8acb094a82794652a4481528', name: "helpertext" })))), h("div", { key: '4676dd88652c903f94d3f887e97841e00bbe09e2', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'd2656b2f8ff8e74bd4d4c2f1c4791e984ec3e50b', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: '93caefd228460120aae22ba48e6c93d6df676fcf', class: "pn-toggle-bg" }), h("div", { key: '03299104835602d126960ad67ab51f94d27cf3c5', class: "pn-toggle-circle" }, h("svg", { key: '5f61f589797b3ca97a66cd42deab3065543679d2', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'd974e5cc198d19cf17e42e0b35097f87d11404a0', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '6f5c5fb05e0c9fd95b16d45833f50167af22e358', size: 1.125 }))))));
+        return (h(Host, { key: 'e6a6de7ded1a69b16843133338ba8a1ae1294b19' }, h("div", { key: '142125dd53902df30a93a5e5257650a7841a1644', class: "pn-toggle" }, h("div", { key: 'd4e35ed179dc5f1423cdf59cf0481ecbcb33021f', class: "pn-toggle-content" }, this.label && (h("label", { key: 'f38bdb380fb05349909e386dd6e22d841c0caf56', htmlFor: this.getId(), class: "pn-toggle-label" }, h("span", { key: '94a35b2682a039613dd0814a25ba30f954018dc6' }, this.label))), h("p", { key: 'c621112acea7f18b7943d9d07c0af52dd7455329', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: '1959f88dbe079595e3cd6bbb48098e2777ab642e' }, this.helpertext), h("slot", { key: 'e493dcb3022bd31c4ecfb349756d3d83bf51bf9a', name: "helpertext" }))), h("div", { key: '1f13bb2bcb798b5221d06e55640848034ad2b260', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'ebf1c43df4b75f8df0769d2d458c04fbf17385f6', id: this.getId(), class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedBy() }), h("div", { key: '51c67cb5c61e3d3b93bd49013594109772b7d796', class: "pn-toggle-bg" }), h("div", { key: '1932ea8d92b8ab57a47fdd3ced9795be78cc1620', class: "pn-toggle-circle" }, h("svg", { key: '67e5adc0818d3fe76de4dffa45bc8c1d5c9fba45', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'f1722e0d19629ea38eac2faa6d2ccaf007e78463', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '60ab6b2fea45ddbc8793b06f18032df94c858a9d', size: this.getSpinnerSize() }))))));
     }
     static get is() { return "pn-toggle-switch"; }
     static get originalStyleUrls() {
@@ -80,8 +113,8 @@ export class PnToggleSwitch {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "A label for the toggle switch."
@@ -110,27 +143,30 @@ export class PnToggleSwitch {
                 "reflect": false,
                 "attribute": "helpertext"
             },
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
+            "value": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Precheck the toggle."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "HTML toggle value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "value",
+                "defaultValue": "null"
             },
-            "toggleid": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -139,64 +175,70 @@ export class PnToggleSwitch {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a unique HTML id."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "HTML toggle name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "toggleid",
-                "defaultValue": "this.id"
+                "attribute": "name",
+                "defaultValue": "null"
             },
-            "name": {
-                "type": "string",
-                "mutable": false,
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML"
+                            "text": "Native attributes"
                         }],
-                    "text": "HTML toggle name."
+                    "text": "Precheck the toggle."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name",
-                "defaultValue": "null"
+                "attribute": "checked",
+                "defaultValue": "false"
             },
-            "value": {
-                "type": "string",
+            "required": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "HTML"
+                            "text": "Native attributes"
                         }],
-                    "text": "HTML toggle value."
+                    "text": "Set the switch as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "null"
+                "attribute": "required",
+                "defaultValue": "false"
             },
-            "small": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -209,17 +251,17 @@ export class PnToggleSwitch {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Visual"
+                            "text": "Native attributes"
                         }],
-                    "text": "Make the toggle smaller."
+                    "text": "Disable the toggle."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "small",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "large": {
+            "small": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -232,17 +274,17 @@ export class PnToggleSwitch {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Visual"
+                            "text": "Features"
                         }],
-                    "text": "Make the toggle larger."
+                    "text": "Make the toggle smaller."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "large",
+                "attribute": "small",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "large": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -255,14 +297,14 @@ export class PnToggleSwitch {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Disable the toggle."
+                    "text": "Make the toggle larger."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "large",
                 "defaultValue": "false"
             },
             "loading": {
@@ -278,7 +320,7 @@ export class PnToggleSwitch {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
                     "text": "Set the loading state."
                 },
@@ -287,14 +329,120 @@ export class PnToggleSwitch {
                 "reflect": false,
                 "attribute": "loading",
                 "defaultValue": "false"
+            },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the switch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id"
+            },
+            "pnAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-label"
+            },
+            "pnAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-labelledby"
+            },
+            "toggleid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the switch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggleid"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
-                "propName": "toggleid",
+                "propName": "pnId",
                 "methodName": "handleHelperId"
+            }, {
+                "propName": "toggleid",
+                "methodName": "handleHelperId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
 }

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

@@ -69,7 +69,7 @@ export class PnHeader {
         return this.goBackText || translations[this.language || en];
     }
     render() {
-        return (h(Host, { key: 'f19310a092999791304499d72c1b8e566949c0d3' }, h("header", { key: 'c6b50a1d93bf18f2050b37a9bdf69d3706b8aea4', class: "pn-header" }, h("div", { key: '7bfa1bd37978daf85d266b7306a71705bdc8cac5', class: "pn-header-container" }, h("div", { key: '09ed187b0f201d435c99b3c6e0f245ca48857d47', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'ba657cb77da06d42009738c64d815a23d8dae527', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '278bf254489dbd76f53e047cd16c247bcfd696eb', name: "breadcrumb" })), h("div", { key: 'e9b2e873fb9ed01fabbd669aa7cace973a55cbfa', class: "pn-header-content" }, this.heading && h("h1", { key: 'baec009bf6807009ea53d184be9a8c15ea0253a0' }, this.heading), h("slot", { key: '7a777967b19a19077486d88d775b4a1c4f9d3134' })), h("div", { key: '46fa0cc4120b341e4a03c60bb865e077c6231986', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '8932d6bbb5e1647be6b666d1879b163575dfd760', name: "buttons" })), h("slot", { key: 'afc6e39f45ef72ba762772f84a66cc24fdbcf368', name: "menu" })))));
+        return (h(Host, { key: 'cffcb3a6763d13783bad5d6b75f5402cfd92798b' }, h("header", { key: '7b6d663687fe12546ed88aaea3b97efd82afac69', class: "pn-header" }, h("div", { key: 'aec8dbf448077f14036f0cd4885add8bb650d647', class: "pn-header-container" }, h("div", { key: 'bff188666b4aa2f5df35476eddf17ac4ba5ba182', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: '0f2ad8624741de50b2ed1c13cf7cfcae9ad6c223', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: 'ece3524aafbff34f28e0d9cc6eafc587e1daeba5', name: "breadcrumb" })), h("div", { key: '1356eb7d669666b327575a00abdf86bbf9a9e38a', class: "pn-header-content" }, this.heading && h("h1", { key: 'c3e1419dbf20e789c98ea32bb73a3e5e1021f75a' }, this.heading), h("slot", { key: '94491e7af78f2ee44bc45b3a261f2bcc8af81377' })), h("div", { key: 'e2db0dcd84f2fbeb58ab793cd4220861c2320433', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '1745323caaf67eb3f316f4ff56451ffefb6d9b7e', name: "buttons" })), h("slot", { key: '17d56ba2c125c766c05ae84eb82839391447dd74', name: "menu" })))));
     }
     static get is() { return "pn-header"; }
     static get originalStyleUrls() {

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

@@ -103,7 +103,7 @@ pn-card .pn-card-link:hover {
   color: #0d234b;
   text-decoration-color: #0d234b;
 }
-pn-card .pn-card-link:hover > pn-icon > .pn-icon-svg > path {
+pn-card .pn-card-link:hover > pn-icon .pn-icon-svg > path {
   fill: #0d234b;
 }
 pn-card .pn-card-link:focus {
@@ -111,7 +111,7 @@ pn-card .pn-card-link:focus {
   color: #0d234b;
   text-decoration-color: #0d234b;
 }
-pn-card .pn-card-link:focus > pn-icon > .pn-icon-svg > path {
+pn-card .pn-card-link:focus > pn-icon .pn-icon-svg > path {
   fill: #0d234b;
 }
 pn-card .pn-card-link:before {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-card/pn-card.js

@@ -101,7 +101,7 @@ export class PnCard {
     }
     render() {
         const TitleTag = this.getHeadingTag();
-        return (h(Host, { key: '66bfbab30790857e909606b687989d845eef9c42' }, h("article", { key: 'eb3d30790de5f65da87dc40731b81fb9120c88db', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '626daade06dd8b45c47e58cd5fbcef0322e3398f', class: "pn-card-image" }, h("picture", { key: '5f0539bf93afe3a8070c4e31bcabcd6e09f6cd5b', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'ead1ab12ad886e48daf022a26afc0deb29998d9e', name: "image" }))), h("div", { key: '79b1e1dcf658daf770ef2038770ad36d827d61fb', class: "pn-card-content" }, h("header", { key: '9b122547f47bace150f3dd17ccbe0ffe17a499b7', class: "pn-card-header" }, h("div", { key: 'eff03ae597d4d47ec6ef78634b9f1e3b3c65d420', class: "pn-card-tags" }, h("slot", { key: 'bce8ed2e135c2f7575923678477c278c82b26664', name: "tags" })), !!this.overline && h("p", { key: '4c5012ffa0d5e4054be3dc99fea4fd3d2d2e4383', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'a1a2a9ce01834943f3909a95dd4ac9c12c62fcc5', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '7e231155db5155d5d4a5a272f845c6822235bb54', name: "header" })), h("section", { key: '118b273cd31a00de1fd16ee297bb206a33e7f977', class: "pn-card-section" }, !!this.text && h("p", { key: '66addec056571f3b511718cc8a4a60f64c3ac62b', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'f9ec7149a4e48f59143b81470677be0b24791c8e' })), h("nav", { key: 'bb0ea19f4db135fd1b32496e167b67358df6ada8', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '182c9afcbb00b56c16b53ad15f12449e5feaf11a', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '50ed52dbc3fd815c9d7b37542ad566a607e43da3', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '6204a8a4944a85d522b4522352f67e73bc52792a', name: "navigation" }))))));
+        return (h(Host, { key: '8126385831d763637aed6ebe4fa61fd0bdb42764' }, h("article", { key: '93c75dc2d9e71844e36a9cdd6914f42eae34f7b0', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '140936bb72867a5ef4351363dfda52698b9d9df0', class: "pn-card-image" }, h("picture", { key: '60de2f3f53b4d7f1e1cbe37b1ff47686c9e48b72', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: '47cffafc0d642f6cf0c682cd96f9fd11609f924e', name: "image" }))), h("div", { key: '6768342177fe3884d9bd20b0ca516cf026b69751', class: "pn-card-content" }, h("header", { key: '91e023c92c33bf74c39200387edc7a3d3c2f2d42', class: "pn-card-header" }, h("div", { key: '9d7771c4275569012021a07f9165ba4a8ce8c297', class: "pn-card-tags" }, h("slot", { key: 'c45641bd02093f8001dee361b6b8577a383f72ba', name: "tags" })), !!this.overline && h("p", { key: 'b152b16d2488e82556e9f56f90daf0edfe8ae33f', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: '3bc086490090afc05ad44c0e1736009b82fbe814', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '1188ca2c3260dd509811cfb5aa5356488f211e1a', name: "header" })), h("section", { key: 'ba0b7362ddd721041466ac979ba198170b016fb1', class: "pn-card-section" }, !!this.text && h("p", { key: '76aa9e90ac18ff66ec15a436ec8eec9e22c67748', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'bd0f035ce418425c1ac1871ec1cb98f850cd97e1' })), h("nav", { key: '1a538e55ed6c9c07f3f8c5dd823f80ed3a149ed6', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: 'a18605058f0dc733ceeeab9fa6a44fb524c93630', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '066242008cd49a69d64db93da7a87bbdcdd1beda', color: "blue700", icon: this.getIcon() }))), h("slot", { key: 'bbe0271663622b8adf542232daa573a467b34f16', name: "navigation" }))))));
     }
     static get is() { return "pn-card"; }
     static get originalStyleUrls() {

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

@@ -43,7 +43,7 @@ export class PnFooter {
         }
     }
     render() {
-        return (h(Host, { key: '5ba1e53dd0dc631bf8bbe878a622ec577224a9f3' }, h("div", { key: '530b0e803506fed3cae180d1289535538f64e1bb', class: "pn-footer-row" }, h("p", { key: '47e19b88eb7c6860f0921fdacc79686aff3d2b61' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: '2986a92cb2183d53c871030db72ef34aa08e847b', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: '550a23c5b872b6dc9c69b4e231ce7634d5f12994', class: "pn-footer-row" }, h("p", { key: '52871c90b92a2a64fc247ac83fdc62215e54a574' }, this.getText('info')), this.renderLink('domain'))));
+        return (h(Host, { key: '3084a31d6969b90b764dd8628d8d101039fdccab' }, h("div", { key: '1cee8fccb6ea8ad756c25c1b852baecfcb370b43', class: "pn-footer-row" }, h("p", { key: '52e46e93ec83d58a793a2516e2cc073723269ad0' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: '3a2f09d53818ffcb8fe7a4fb2e2b8829a5ddea04', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: 'ab1ef6ce8fd6471c5411ff68c286cb0e9061ccc1', class: "pn-footer-row" }, h("p", { key: '4ebc800c5db13c04262d94dc9db10ed43fcd9c3f' }, this.getText('info')), this.renderLink('domain'))));
     }
     static get is() { return "pn-footer"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class PnPageNavDropdownItem {
     }
     render() {
         const TagName = this.getTagName();
-        return (h("li", { key: 'a4ca23ac5a53d78c87f2c955c3da18372a7d572d' }, h(TagName, { key: '20639a9f58133cf65d8719943d9d11630166b8d4', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '5440c1e919238f6aaa55ca9df2dec18ebbce2f83' }), h("pn-icon", { key: 'ff16474c7bc9fc6664c64c5b4567e88a88bd29fb', icon: arrow_right, color: "white" })), h("hr", { key: '5201ae642f54f3ad7b157762dedfddb08d865486' })));
+        return (h("li", { key: '93c6bd31a88c76797cee2bc915c31e6ecfa5aace' }, h(TagName, { key: '2818d4f3a1572f863f9b9a8609d572f5994f6e75', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: 'e04f130737445747a2b93bf9d7372bf22889fcff' }), h("pn-icon", { key: '934d46f6bd482171d974efec7c4494f8b1b1faff', icon: arrow_right, color: "white" })), h("hr", { key: 'c5c9c4a24affe5b10d56e8a6ca5d6bee434aa571' })));
     }
     static get is() { return "pn-page-nav-dropdown-item"; }
     static get originalStyleUrls() {

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

@@ -23,7 +23,7 @@ export class PnPageNavItem {
         this.itemselection.emit(this.value);
     }
     render() {
-        return (h(Host, { key: '43346d6ed6211b3e6c4ee7c6dfd261112028445f' }, h("li", { key: '8a191825d21ae79f3c8bf69381151b8d258a7c64' }, h("a", { key: '3dab24d14cb027916343ae3b1f86ded224907ab6', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && h("pn-icon", { key: 'fa382f49cb1602908dd53af48044826f934679cd', icon: this.icon, color: "white" }), h("slot", { key: '576b22e87a530ac0a8a19eaf8a094937ab227b67' })))));
+        return (h(Host, { key: 'b4249e533daa9f96259d5379fdfcd90d87f3cc11' }, h("li", { key: '86b933f5d6b4bc827826c679a6ddf04efca08ee9' }, h("a", { key: '217797b771a53db8bbf53272eaafe816fc668ebc', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && h("pn-icon", { key: '8de359aa34e50caa65a66db5620590f24d409dae', icon: this.icon, color: "white" }), h("slot", { key: '5610d030d68f2e7f3f8eac68c02a01c3f9624f5e' })))));
     }
     static get is() { return "pn-page-nav-item"; }
     static get originalStyleUrls() {

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

@@ -294,7 +294,7 @@ export class PnPageNav {
     }
     /* ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */
     render() {
-        return (h(Host, { key: 'f76a115ccea11e238d2aee5288b06675abc80b8a' }, h("div", { key: '453102a432daf9b567be4f5dc415bab34b48bc84', class: "pn-page-nav-wrapper" }, h("nav", { key: '9207ade4b4d6cea4c22622c91988eef2b3c812bc', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: '3365178312cfe2b9d48fccbc794d2a8a857ed6f0', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '460172b12b334e96920d185dcbc868acafc0cdcc', icon: chevron_down, color: "white", small: true }), h("div", { key: 'f16219e3070e00ebd1ab143b8803a94c44e242bc', class: "pn-page-nav-divider" }))), h("ul", { key: '560ef88c95269f29b1f76ee65e3a2541fc2482ce', class: "pn-page-nav-items" }, h("slot", { key: '7b1cfc89976421963cc19f958f21e29bfc796621' }), h("li", { key: '7df00d0a42fc3f48f82afdb0bbbf943229604293', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: '68fd6cc6f9dfcb834c62105f81ff2e21b332be94', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: 'ba26546a6fa3f750a5314dd80f80e1487b4962ec', class: this.scrollArrowClasses() }, h("button", { key: '57b43598cb3288b068c3583c822be35418b28e91', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'b812b5b471ba0982be6cb3bcacc84bb2f52fa0e3', icon: arrow_left, color: "white" })), h("button", { key: '70d5bffed71999aaf154f88590378496d79e7f55', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'a2d4319bab3a80b092321873ff66e4b421f14743', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: '1e2a73e7b4d523f3feba0dc18ccc14871b551862', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '20f647483c10a84de4bf2f40126b83b65b61b99f', name: "dropdown-item" })))));
+        return (h(Host, { key: '2bca6384910b5b314ddbb6f4f646fa95ee084c09' }, h("div", { key: '2322adc21546db4fcf950f0136516ef3a059b409', class: "pn-page-nav-wrapper" }, h("nav", { key: '62ce2c8c14c2748b8e5f4fd91263c19b70db1559', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: 'a7839cdd22ca1fbb7f2a1dcb56ebf8d9d7dda05d', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '1a91a0a67c34295456c3bdb943740b257d942a53', icon: chevron_down, color: "white", small: true }), h("div", { key: '1197635d3c157fae6b5fd90b52a8a61af8de4b8e', class: "pn-page-nav-divider" }))), h("ul", { key: '3a19fcbe877e2dc81c76d378fffe1536ac1af54f', class: "pn-page-nav-items" }, h("slot", { key: 'aff622272002a021fc4606cb9d43aa9d86e06ba3' }), h("li", { key: 'eb6d08cc390d742576a633629ee930b979ee9fdf', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: '86be3cba39c47f3bc7f3c87afedfef66afcd6fb2', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: '875412be070486024d5886f5f4099747b0d51b8a', class: this.scrollArrowClasses() }, h("button", { key: '358199bf37ce3473f002ae20e6dfab31a1ae0ac5', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'c40ceef73645e7bf9cec3935e892faf8c369a158', icon: arrow_left, color: "white" })), h("button", { key: '8ac847b47005a0d61f72de5122601c38ff268655', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'dc21c3242fe32126adca3ebc38c8a8eeed705aca', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: '7666ab6c68d3b9fe0bd39ac4bd1cec2e240e6871', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '64c6a3b285fb8058eb8085f2557e001c6711db4c', name: "dropdown-item" })))));
     }
     static get is() { return "pn-page-nav"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-pagination/pn-pagination.js

@@ -188,7 +188,7 @@ export class PnPagination {
         return (h("pn-button", { arialabel: label, ariacurrent: current ? 'page' : null, href: this.getUrl(page), rel: current ? null : rel, appearance: "light", small: true, icon: icon, iconOnly: true, onPnClick: ({ detail }) => this.navigate({ page, event: detail }) }));
     }
     render() {
-        return (h(Host, { key: '4b78edcca36adfd17035e9bed30ae5af6918d6e8' }, h("nav", { key: '600dd0a880e03b9b5e98de4ee2d55134a0a90b8e', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '8cca49bb36c9b10fa05e7637acec36e28b25fb8e', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'd3fc1f233ab4d62c868a8a0a2076d7666d5dd53a', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: '17be56bca6cd83e7f7dc3174e2e92d91a05930dd', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
+        return (h(Host, { key: 'a975a04388ce0495aef863236d3fd2f936380fed' }, h("nav", { key: '920aeb21c535b7f09bc54924865d3b5be2a65652', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '880de99ef3a2a1400ff08f420c8c81017846e1fa', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'd11a69a8d7f5efcaae031214f2abf417d8922207', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: '2a5777aecd5210105ea26ed8c8cb9d99d1f1efc8', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
     }
     static get is() { return "pn-pagination"; }
     static get originalStyleUrls() {

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { h, Host, forceUpdate, } from "@stencil/core";
+import { h, Host, forceUpdate, transformTag, } from "@stencil/core";
 import { chevron_left, chevron_right } from "pn-design-assets/pn-assets/icons.js";
 import translations from "./translations";
 import { awaitTopbar, en } from "../../../globals/helpers";
@@ -46,7 +46,8 @@ export class PnTablist {
      **/
     tabchange;
     setValue() {
-        const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));
+        const tabName = transformTag('pn-tab');
+        const tabs = Array.from(this.hostElement.querySelectorAll(tabName));
         tabs.forEach(tab => {
             tab.activeTab = this.value;
         });
@@ -150,7 +151,7 @@ export class PnTablist {
         return translations?.[prop]?.[this.language || en];
     }
     render() {
-        return (h(Host, { key: '41730f7c2c9bf8dcd0094e3485daaef03d32077d' }, h("nav", { key: '671968d8fc09799313c5cc84182c0f574c4c32c2', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: '9a29c7b0b2be65f13f0c54782f95381b44184928' }), h("div", { key: '5c7d7811e65c236592cbc86ccb36a1f4b9c2d83f', class: "pn-tablist-line" }, h("div", { key: 'fa070fd0ad1bd2baaaaedcd83d3a184f9acd8775', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: 'f1d81e3ba4363412d5f35cae105766fbb77ba31e', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '14d644cb2ae344966b8056422ce52966fb06058b', class: "pn-tablist-scroll" }, h("pn-button", { key: 'f8c8f0f36459b6415208679196ed15fb9cd482d2', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: '588b9a9619087bd05a9d359b139240d054431848', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
+        return (h(Host, { key: '7dca608244acd89c6506d10db8bd774055623f77' }, h("nav", { key: '263e6774e93dd98d82282d9f591b4f2053c0421c', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: '3a5a6f587b750c035f1b61b1184bf7d9fd843cd2' }), h("div", { key: 'a21c49db6f1f38066d7b54d11faeb441cfbd52b1', class: "pn-tablist-line" }, h("div", { key: '35f4d30ba1e7de4737dd65d38febd6cf0dc0ab41', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: 'ab05a4b61abac290894cd93e89bd9de80c710189', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '1845500af4535f9a7d4006fc781f52c7a31776d9', class: "pn-tablist-scroll" }, h("pn-button", { key: 'c7421e16d531fe9559b46a3e0fa8bdcb4bf5a142', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: 'a79c5096ee1f9ca79755b54db6bc0b05d3c8ac5a', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
     }
     static get is() { return "pn-tablist"; }
     static get originalStyleUrls() {

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

@@ -74,8 +74,8 @@ pn-tab .pn-tab[aria-selected=true], pn-tab .pn-tab[aria-current=page] {
 pn-tab .pn-tab[aria-selected=true]:focus, pn-tab .pn-tab[aria-current=page]:focus {
   color: #0d234b;
 }
-pn-tab .pn-tab[aria-selected=true]:focus pn-icon > .pn-icon-svg path,
-pn-tab .pn-tab[aria-selected=true]:focus pn-icon > .pn-icon-svg polygon, pn-tab .pn-tab[aria-current=page]:focus pn-icon > .pn-icon-svg path,
-pn-tab .pn-tab[aria-current=page]:focus pn-icon > .pn-icon-svg polygon {
+pn-tab .pn-tab[aria-selected=true]:focus pn-icon .pn-icon-svg path,
+pn-tab .pn-tab[aria-selected=true]:focus pn-icon .pn-icon-svg polygon, pn-tab .pn-tab[aria-current=page]:focus pn-icon .pn-icon-svg path,
+pn-tab .pn-tab[aria-current=page]:focus pn-icon .pn-icon-svg polygon {
   fill: #0d234b;
 }