@postnord/pn-marketweb-components 4.3.6 → 4.3.8

package/umd/modules/@postnord/web-components/cjs/pn-table.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 
 const pnTableCss = () => `${index.transformTag("pn-table")}{display:block;margin-bottom:1em}${index.transformTag("pn-table")} .pn-table-container table{width:100%}${index.transformTag("pn-table")} .pn-table-container table .column-wrapper{display:flex;gap:0.5em;width:100%;align-items:center}${index.transformTag("pn-table")} .pn-table-container table,${index.transformTag("pn-table")} .pn-table-container table th,${index.transformTag("pn-table")} .pn-table-container table td{padding:0;margin:0;border:0;outline:0;border-collapse:collapse;max-width:100%}${index.transformTag("pn-table")} .pn-table-container table th,${index.transformTag("pn-table")} .pn-table-container table td{text-align:left;line-height:2;vertical-align:middle;padding:1em 1.15em}${index.transformTag("pn-table")} .pn-table-container table th:first-child,${index.transformTag("pn-table")} .pn-table-container table td:first-child{border-radius:0.5em 0 0 0.5em}${index.transformTag("pn-table")} .pn-table-container table th:last-child,${index.transformTag("pn-table")} .pn-table-container table td:last-child{border-radius:0 0.5em 0.5em 0}${index.transformTag("pn-table")} .pn-table-container table th ${index.transformTag("pn-icon")},${index.transformTag("pn-table")} .pn-table-container table td ${index.transformTag("pn-icon")}{vertical-align:middle}${index.transformTag("pn-table")} .pn-table-container table thead tr th,${index.transformTag("pn-table")} .pn-table-container table thead tr td{color:#005d92;font-weight:500}${index.transformTag("pn-table")} .pn-table-container table tbody tr th,${index.transformTag("pn-table")} .pn-table-container table tbody tr td{color:#2d2013;font-weight:400}${index.transformTag("pn-table")}.bordered .pn-table-container table{border-collapse:separate;border-spacing:0}${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr:last-child th,${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr:last-child td{border-bottom-width:0.0625em}${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr:first-child th,${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr:first-child td{border-top:0.0625em solid #005d92}${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr th,${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr td{border-bottom:0.0625em solid #005d92}${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr th:first-child,${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr td:first-child{border-left:0.0625em solid #005d92;border-radius:0.5em 0 0}${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr th:last-child,${index.transformTag("pn-table")}.bordered .pn-table-container table thead tr td:last-child{border-radius:0 0.5em 0 0;border-right:0.0625em solid #005d92}${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr th,${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr td{border-bottom:0.0625em solid #d3cecb}${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr th:first-child,${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr td:first-child{border-left:0.0625em solid #005d92;border-radius:0}${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr th:last-child,${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr td:last-child{border-right:0.0625em solid #005d92;border-radius:0}${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr:last-of-type th,${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr:last-of-type td{border-bottom:0.0625em solid #005d92}${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr:last-of-type th:last-child,${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr:last-of-type td:last-child{border-radius:0 0 0.5em 0}${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr:last-of-type th:first-child,${index.transformTag("pn-table")}.bordered .pn-table-container table tbody tr:last-of-type td:first-child{border-radius:0 0 0 0.5em}${index.transformTag("pn-table")}.bordered.striped .pn-table-container table tbody tr th,${index.transformTag("pn-table")}.bordered.striped .pn-table-container table tbody tr td{border-bottom-width:0}${index.transformTag("pn-table")}.bordered.striped .pn-table-container table tbody tr:last-child th,${index.transformTag("pn-table")}.bordered.striped .pn-table-container table tbody tr:last-child td{border-bottom-width:0.0625em}${index.transformTag("pn-table")}.striped .pn-table-container table tbody tr:nth-child(odd) th,${index.transformTag("pn-table")}.striped .pn-table-container table tbody tr:nth-child(odd) td{background-color:#effbff}${index.transformTag("pn-table")}.color-gray .pn-table-container table tbody tr:nth-child(odd) th,${index.transformTag("pn-table")}.color-gray .pn-table-container table tbody tr:nth-child(odd) td{background-color:#f9f8f8}`;
 

package/umd/modules/@postnord/web-components/cjs/pn-tablist.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var chevron_right = require('./chevron_right-CApgqZb0.js');
 var index$1 = require('./index.cjs.js');
 
@@ -30,7 +30,7 @@ const pnTablistCss = () => `${index.transformTag("pn-tablist")}{width:100%;min-w
 const PnTablist = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.tabchange = index.createEvent(this, "tabchange");
+        this.tabchange = index.createEvent(this, "tabchange", 7);
     }
     mo;
     isMenu = false;
@@ -62,7 +62,8 @@ const PnTablist = class {
      **/
     tabchange;
     setValue() {
-        const tabs = Array.from(this.hostElement.querySelectorAll(`${index.transformTag("pn-tab")}`));
+        const tabName = index.transformTag('pn-tab');
+        const tabs = Array.from(this.hostElement.querySelectorAll(tabName));
         tabs.forEach(tab => {
             tab.activeTab = this.value;
         });
@@ -166,7 +167,7 @@ const PnTablist = class {
         return translations?.[prop]?.[this.language || index$1.en];
     }
     render() {
-        return (index.h(index.Host, { key: '41730f7c2c9bf8dcd0094e3485daaef03d32077d' }, index.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) }, index.h("slot", { key: '9a29c7b0b2be65f13f0c54782f95381b44184928' }), index.h("div", { key: '5c7d7811e65c236592cbc86ccb36a1f4b9c2d83f', class: "pn-tablist-line" }, index.h("div", { key: 'fa070fd0ad1bd2baaaaedcd83d3a184f9acd8775', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), index.h("div", { key: 'f1d81e3ba4363412d5f35cae105766fbb77ba31e', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), index.h("div", { key: '14d644cb2ae344966b8056422ce52966fb06058b', class: "pn-tablist-scroll" }, index.h("pn-button", { key: 'f8c8f0f36459b6415208679196ed15fb9cd482d2', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right.chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), index.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.chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
+        return (index.h(index.Host, { key: '7dca608244acd89c6506d10db8bd774055623f77' }, index.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) }, index.h("slot", { key: '3a5a6f587b750c035f1b61b1184bf7d9fd843cd2' }), index.h("div", { key: 'a21c49db6f1f38066d7b54d11faeb441cfbd52b1', class: "pn-tablist-line" }, index.h("div", { key: '35f4d30ba1e7de4737dd65d38febd6cf0dc0ab41', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), index.h("div", { key: 'ab05a4b61abac290894cd93e89bd9de80c710189', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), index.h("div", { key: '1845500af4535f9a7d4006fc781f52c7a31776d9', class: "pn-tablist-scroll" }, index.h("pn-button", { key: 'c7421e16d531fe9559b46a3e0fa8bdcb4bf5a142', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right.chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), index.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.chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
     }
     static get watchers() { return {
         "value": [{

package/umd/modules/@postnord/web-components/cjs/pn-text-link.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 
 const pnTextLinkCss = () => `${index.transformTag("pn-text-link")}{display:inline}${index.transformTag("pn-text-link")} .pn-text-link{border-radius:0.25em;color:#005d92;font-weight:500;text-decoration:underline;font-size:1em;transition-property:color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-text-link")} .pn-text-link{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-text-link")} .pn-text-link{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-text-link")} .pn-text-link:focus-visible{outline-color:#005d92}${index.transformTag("pn-text-link")} .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}${index.transformTag("pn-text-link")} .pn-text-link[data-icon]{display:inline-flex;gap:0.25em;align-items:center;text-decoration-color:transparent;padding:0.1em;border-radius:0.5em}${index.transformTag("pn-text-link")} .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}${index.transformTag("pn-text-link")} .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}${index.transformTag("pn-text-link")} .pn-text-link[data-icon]:hover .pn-icon-svg path,${index.transformTag("pn-text-link")} .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}${index.transformTag("pn-text-link")} .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}${index.transformTag("pn-text-link")} .pn-text-link[data-light]{color:#ffffff}${index.transformTag("pn-text-link")} .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}${index.transformTag("pn-text-link")} .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}${index.transformTag("pn-text-link")} .pn-text-link[data-light][data-icon] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#ffffff}`;
 
@@ -38,7 +38,7 @@ const PnTextLink = class {
     /** Set a unique html ID of the a element. @category Link attributes */
     linkid;
     render() {
-        return (index.h("a", { key: '9b582d89de39e3465ec6a1675f60f46d39b3c558', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, index.h("slot", { key: '106155241d1f15bdaf19a74c8dc440372849a6f4' }), this.icon && index.h("pn-icon", { key: 'd6d197a8632a13b6a1e385504b6727cfb9c418fd', icon: this.icon })));
+        return (index.h("a", { key: '0641c9d91a5652eba8498546f1c2e64b3bf5c7f4', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, index.h("slot", { key: 'dd448ea86844b810197fb2735025b9213984918f' }), this.icon && index.h("pn-icon", { key: '4350858f2f87b0c35e472078ea30eb252a894651', icon: this.icon })));
     }
 };
 PnTextLink.style = pnTextLinkCss();

package/umd/modules/@postnord/web-components/cjs/pn-textarea.cjs.entry.js

@@ -4,10 +4,10 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var index$1 = require('./index.cjs.js');
 
-const pnTextareaCss = () => `${index.transformTag("pn-textarea")}{display:inline-flex;flex-direction:column}${index.transformTag("pn-textarea")} .pn-textarea{position:relative}${index.transformTag("pn-textarea")} .pn-textarea-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-textarea")} .pn-textarea-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-textarea")} .pn-textarea-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${index.transformTag("pn-textarea")} .pn-textarea-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-textarea")} .pn-textarea-label>span{font-size:0.875em}${index.transformTag("pn-textarea")} .pn-textarea-label[data-compact]>span{background-color:#ffffff;color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-textarea")} .pn-textarea-text>${index.transformTag("pn-icon")}{margin-right:0.25em}${index.transformTag("pn-textarea")} .pn-textarea-element{width:100%;resize:none;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill,${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:hover,${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:focus,${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-textarea")} .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-textarea")} .pn-textarea-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-textarea")} .pn-textarea-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]:focus+.pn-textarea-label,${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]:not(:placeholder-shown)+.pn-textarea-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-textarea")} .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-textarea")} .pn-textarea-element:hover{border-color:#005d92}${index.transformTag("pn-textarea")} .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-corner,${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-button{display:none}${index.transformTag("pn-textarea")} .pn-textarea-element:read-only{border-color:#ffffff}${index.transformTag("pn-textarea")} .pn-textarea-element:disabled+.pn-textarea-label>span{background-color:#f3f2f2}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill,${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:hover,${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:focus,${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill,${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:hover,${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:focus,${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}`;
+const pnTextareaCss = () => `${index.transformTag("pn-textarea")}{display:inline-flex;flex-direction:column}${index.transformTag("pn-textarea")} .pn-textarea{position:relative}${index.transformTag("pn-textarea")} .pn-textarea-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-textarea")} .pn-textarea-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-textarea")} .pn-textarea-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${index.transformTag("pn-textarea")} .pn-textarea-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-textarea")} .pn-textarea-label>span{font-size:0.875em}${index.transformTag("pn-textarea")} .pn-textarea-label[data-compact]>span{background-color:#ffffff;color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left}${index.transformTag("pn-textarea")} .pn-textarea-text[role=alert]{color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea-text[hidden]{display:none}${index.transformTag("pn-textarea")} .pn-textarea-element{width:100%;resize:none;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill,${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:hover,${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:focus,${index.transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-textarea")} .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-textarea")} .pn-textarea-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-textarea")} .pn-textarea-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]:focus+.pn-textarea-label,${index.transformTag("pn-textarea")} .pn-textarea-element[data-compact]:not(:placeholder-shown)+.pn-textarea-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-textarea")} .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-textarea")} .pn-textarea-element:hover{border-color:#005d92}${index.transformTag("pn-textarea")} .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-corner,${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-button{display:none}${index.transformTag("pn-textarea")} .pn-textarea-element:read-only{border-color:#ffffff}${index.transformTag("pn-textarea")} .pn-textarea-element:disabled+.pn-textarea-label>span{background-color:#f3f2f2}${index.transformTag("pn-textarea")} .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill,${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:hover,${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:focus,${index.transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill,${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:hover,${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:focus,${index.transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-textarea")} .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}`;
 
 const PnTextarea = class {
     constructor(hostRef) {
@@ -15,74 +15,128 @@ const PnTextarea = class {
     }
     id = `pn-textarea-${index$1.uuidv4()}`;
     idHelper = `${this.id}-text`;
+    idError = `${this.id}-error`;
     get hostElement() { return index.getElement(this); }
     /** The label describing the textarea. */
     label;
-    /** The textarea content, do not provide slotted content. */
-    value = '';
     /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
     helpertext;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact = false;
-    /** A unique ID connecting the element to the label. @category HTML Textarea */
-    textareaid = this.id;
-    /** HTML name. @category HTML Textarea */
+    /** The textarea content, do not provide slotted content. @category Native attributes */
+    value = '';
+    /** HTML name. @category Native attributes */
     name;
-    /** Set the associated form. @category HTML Textarea*/
+    /** Placeholder for the textarea. @category Native attributes */
+    placeholder;
+    /** Set the associated form. @category Native attributes */
     form;
-    /** Set the row count for the textarea. @category HTML Textarea */
+    /** Set the row count for the textarea. @category Native attributes */
     rows = 2;
-    /** Set the col count for the textarea. @category HTML Textarea */
+    /** Set the col count for the textarea. @category Native attributes */
     cols = 20;
-    /** Set the wrap control. @category HTML Textarea */
+    /** Set the wrap control. @category Native attributes */
     wrap = 'soft';
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */
+    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
     maxlength;
-    /** Allow the browser to autocomplete the textarea. @category HTML Textarea */
+    /** Allow the browser to autocomplete the textarea. @category Native attributes */
     autocomplete = 'off';
-    /** Allow the browser to spellcheck the textarea. @category HTML Textarea */
+    /** Allow the browser to spellcheck the textarea. @category Native attributes */
     spellcheck = false;
-    /** Placeholder for the textarea. @category HTML Textarea */
-    placeholder;
-    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */
+    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category Native attributes */
     resize = false;
-    /** Make the textarea required. @category HTML Textarea */
+    /** Make the textarea required. @category Native attributes */
     required = false;
-    /** Set the textarea as `valid`, will make the Label and focus rings green. @category State */
+    /** Disable the textarea. @category Native attributes */
+    disabled = false;
+    /** Make the textarea readonly. @category Native attributes */
+    readonly = false;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact = false;
+    /** Set the textarea as `valid`, will make the Label and focus rings green. @category Features */
     valid = false;
-    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */
+    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category Features */
     invalid = false;
-    /** Same as `invalid`, but will display the string as an error message under the textarea. @category State */
+    /** Same as `invalid`, but will display the string as an error message under the textarea. @category Features */
     error;
-    /** Disable the textarea. @category State */
-    disabled = false;
-    /** Make the textarea readonly. @category State */
-    readonly = false;
+    /** Set a custom ID for the textarea. @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 textarea. @deprecated Use `pn-id` instead. @category HTML attributes */
+    textareaid;
     handleId() {
-        if (this.textareaid !== this.id)
-            this.idHelper = `${this.getId()}-helper`;
+        this.idHelper = `${this.getId()}-helpertext`;
+        this.idError = `${this.getId()}-error`;
     }
     setVal(event) {
         const value = event.target.value;
         this.value = value;
     }
+    hasHelperText() {
+        return this.helpertext?.length > 0 || this.checkSlottedHelper();
+    }
+    /** If any `error` text is present, either via prop/slot. */
+    hasErrorMessage() {
+        return this.error?.length > 0 || this.checkSlottedError();
+    }
+    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
     hasError() {
-        return this.invalid || !!this.error;
+        return this.hasErrorMessage() || this.invalid || this.checkSlottedError();
+    }
+    checkSlottedHelper() {
+        return !!this.hostElement.querySelector('[slot=helpertext]');
+    }
+    checkSlottedError() {
+        return !!this.hostElement.querySelector('[slot=error]');
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
     }
-    hasMessage() {
-        return !!(this.helpertext?.length || this.error?.length);
+    hideError() {
+        return !this.hasErrorMessage();
     }
     getId() {
-        return this.textareaid || this.id;
+        return this.pnId || this.textareaid || this.id;
+    }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
+    getAriaDescribedby() {
+        const list = [];
+        if (this.hasErrorMessage())
+            list.push(this.idError);
+        else if (this.hasHelperText())
+            list.push(this.idHelper);
+        return list.length ? list.join(' ') : null;
     }
     renderLabel() {
         return (index.h("label", { class: "pn-textarea-label", htmlFor: this.getId(), "data-compact": this.compact }, index.h("span", null, this.label), this.maxlength >= 1 && index.h("span", null, `${this.value?.length || 0}/${this.maxlength}`)));
     }
     render() {
-        return (index.h(index.Host, { key: '890e6c29daa489bdf44588c91457e71172e40dae' }, index.h("div", { key: 'c35d279a237c2411faebd0823d3a03f8212c54d0', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), index.h("textarea", { key: 'f2358babec0d5eb02e1d3ba5c21c33998e9582b3', class: "pn-textarea-element", id: this.getId(), name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, maxlength: this.maxlength, value: this.value, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), this.hasMessage() && (index.h("p", { key: 'ccdaed7f958b1ef07da159973690ddd86be791f3', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, index.h("span", { key: '62d9b78ed5370629548e67001689b3d14d40deaa' }, this.error || this.helpertext))))));
+        return (index.h(index.Host, { key: '30ea927b4d57c041164f7ccfd052121d3723591b' }, index.h("div", { key: '2c927468a5159cd2544af2bd351df2b45a5abf55', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), index.h("textarea", { key: '2f933bd8e3477c3f7010d676f4fde0f49e2ebc9e', class: "pn-textarea-element", id: this.getId(), value: this.value, name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), index.h("p", { key: '368de1a346ca5161b8e6da6170453cd68605e92c', id: this.idHelper, class: "pn-textarea-text", hidden: this.hideHelpertext() }, index.h("span", { key: '055d5ea03484c61e64bb674bad2a8bc5bffb253e' }, this.helpertext), index.h("slot", { key: '3782f2b397e46f3dd8e0d4253b1071b1d98ffb65', name: "helpertext" })), index.h("p", { key: '7a092d28df13950e4fba9e4df46c8e6176a70ae3', id: this.idError, class: "pn-textarea-text", role: "alert", hidden: this.hideError() }, index.h("span", { key: '49ef6664c21f2a4281dd8f8919cfa0d66d7554fb' }, this.error), index.h("slot", { key: '51819bfeff00a85706a4c60de35926e65e3cd22d', name: "error" })))));
     }
     static get watchers() { return {
         "textareaid": [{
+                "handleId": 0
+            }],
+        "pnId": [{
                 "handleId": 1
             }]
     }; }

package/umd/modules/@postnord/web-components/cjs/pn-tile.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var open_in_new = require('./open_in_new-B-zmn5xr.js');
 var index$1 = require('./index.cjs.js');
 
@@ -13,7 +13,7 @@ const pnTileCss = () => `${index.transformTag("pn-tile")}{position:relative;disp
 const PnTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pnTile = index.createEvent(this, "pnTile");
+        this.pnTile = index.createEvent(this, "pnTile", 7);
     }
     mo;
     tile;
@@ -72,7 +72,7 @@ const PnTile = class {
         this.pnTile.emit({ click: event });
     }
     render() {
-        return (index.h(index.Host, { key: 'eb3815f93d4355e80969c381cadd22789b1a5b05' }, index.h("div", { key: 'a8dad16643d664975ee27f3fc3e0249730662efb', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, index.h("div", { key: '474e4c248a0ddfab550be16dcff172fc01f84e0a', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (index.h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && index.h("pn-icon", { color: "blue700", icon: this.icon })), index.h("div", { key: '2d5962def32bc5d7a3432cd5062d0a164f167454', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, index.h("slot", { key: 'ceb86fe161d9256249fdc65c83199a0231899e9b', name: "illustration" }))), index.h("div", { key: '74ad199309a7ae8f6c576bc2c97c958f364dc868', class: "pn-tile-text" }, index.h("h3", { key: 'eb6e12a3496d11c3ecb79bf122cbfd604b8081ef', class: "pn-tile-title" }, this.url ? (index.h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && index.h("pn-icon", { key: '13c2495d9a94dc9d3f530543e47549683b985c59', icon: open_in_new.open_in_new, small: true, color: "blue700" })), index.h("div", { key: '4ce12374c5bbdf54809d8b1d2f99cb6efbc01266', class: "pn-tile-slot" }, !!this.text && index.h("p", { key: '2cdbc99beff7480c18f561b2f16f72953367b43f', class: "pn-tile-paragraph" }, this.text), index.h("slot", { key: 'f786d7b65a270acb9be13ce0cfb1d2e3bfe34b8a' }))))));
+        return (index.h(index.Host, { key: 'a29b0f244288bdff245e275a9ab3d11bec87a476' }, index.h("div", { key: 'beed67096e5bd7448416b5c0422596f2e4d61be9', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, index.h("div", { key: '458a7df237ec2fc27c33c3f3306d880f5ba6ab11', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (index.h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && index.h("pn-icon", { color: "blue700", icon: this.icon })), index.h("div", { key: 'bd70e9eb9e29cd48d29170e05f279019005d564a', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, index.h("slot", { key: 'c22dee0ca1663e47fbbc2625af6060ebc1fec4d5', name: "illustration" }))), index.h("div", { key: '0dbb257acaf45f22a16f4bd4616d1a862c281ee9', class: "pn-tile-text" }, index.h("h3", { key: 'c2459327b7ac973e8f7f4c372c6457d70db4bfde', class: "pn-tile-title" }, this.url ? (index.h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && index.h("pn-icon", { key: '661061f5e03c7b658967e1c9e306857b730203b0', icon: open_in_new.open_in_new, small: true, color: "blue700" })), index.h("div", { key: '8c51850bc85b2223dcd67c81d8f15a78ec9ef3cc', class: "pn-tile-slot" }, !!this.text && index.h("p", { key: '9759d3fd1a5a5219dc22a31ab874eab2475e14d8', class: "pn-tile-paragraph" }, this.text), index.h("slot", { key: 'b3e0e1442bfb5cc003e696be617c879919facbbc' }))))));
     }
 };
 PnTile.style = pnTileCss();

package/umd/modules/@postnord/web-components/cjs/pn-toast.cjs.entry.js

@@ -4,8 +4,8 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
-var index$1 = require('./index-CNdVg5VI.js');
+var index = require('./index-DWu-2oJc.js');
+var index$1 = require('./index-vOySuOUW.js');
 var index$2 = require('./index.cjs.js');
 var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
 var alert_info_circle = require('./alert_info_circle-BaN88M1m.js');
@@ -31,8 +31,8 @@ const PnToast = class extends index.Mixin(index$1.animateHeightFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "close");
-        this.hidden = index.createEvent(this, "hidden");
+        this.close = index.createEvent(this, "close", 7);
+        this.hidden = index.createEvent(this, "hidden", 7);
     }
     toast;
     button;
@@ -156,7 +156,7 @@ const PnToast = class extends index.Mixin(index$1.animateHeightFactory) {
         return this.hide && !this.isMoving();
     }
     render() {
-        return (index.h(index.Host, { key: '5c3fee615535723fb1f866ad2e5bc955289abe6e' }, index.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() && index.h("pn-icon", { key: '69348635c02e8108503dbf588e65d522405fd08f', class: "pn-toast-icon", icon: this.getIcon() }), index.h("div", { key: 'a4a2bbd367ff30405a305e4c56da05575e2765bd', class: "pn-toast-content" }, this.showTitle() && index.h("h4", { key: '0e847dd42ed4d0e1c518b69519f27f23d491e11c', class: "pn-toast-heading" }, this.heading), this.text && index.h("p", { key: 'c423eb0872592844f4d583839b438442f65c1ab9', class: "pn-toast-text" }, this.text), index.h("slot", { key: '4e743ba3362107a4b5f585e12b2ad2879ffef5bf' })), this.showIllustration() && index.h("pn-illustration", { key: '1330548a89218ee19a73ff83f94df180a7b2cc98', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (index.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) }, index.h("pn-icon", { key: '3d68d08f2cca035840acd466accbe0d66da65153', icon: close.close }))))));
+        return (index.h(index.Host, { key: '8fc8af6de122bae90d2909840a3d2c412cc3181d' }, index.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() && index.h("pn-icon", { key: '7e856fb052f535e72b15044347eb2a20dc141297', class: "pn-toast-icon", icon: this.getIcon() }), index.h("div", { key: 'b8549738d389bb4b3269192c9a6fa606e6500e25', class: "pn-toast-content" }, this.showTitle() && index.h("h4", { key: 'ef243b8a4d842c8583308bd8cd75a3c640ba811a', class: "pn-toast-heading" }, this.heading), this.text && index.h("p", { key: '7d4a03a243567f881ddaa826959c36cebd84ad00', class: "pn-toast-text" }, this.text), index.h("slot", { key: '1cf28e44d6f37c053b33634529ee0a2d1d7dc58d' })), this.showIllustration() && index.h("pn-illustration", { key: 'f219657a26c48361d1f31cccf947a13f749f6e7b', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (index.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) }, index.h("pn-icon", { key: '14b4fee29de5810bd9d04476500e6d806fe3a2eb', icon: close.close }))))));
     }
     static get watchers() { return {
         "hide": [{

package/umd/modules/@postnord/web-components/cjs/pn-toggle-switch.cjs.entry.js

@@ -4,10 +4,10 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var index$1 = require('./index.cjs.js');
 
-const pnToggleSwitchCss = () => `${index.transformTag("pn-toggle-switch")}{display:inline-block;position:relative}${index.transformTag("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${index.transformTag("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${index.transformTag("pn-toggle-switch")} .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${index.transformTag("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] ${index.transformTag("pn-spinner")}{opacity:1}${index.transformTag("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{transform:translateX(0%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${index.transformTag("pn-spinner")} .pn-spinner-circle{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${index.transformTag("pn-spinner")} .pn-spinner-dot{fill:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`;
+const pnToggleSwitchCss = () => `${index.transformTag("pn-toggle-switch")}{display:inline-block;position:relative}${index.transformTag("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${index.transformTag("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${index.transformTag("pn-toggle-switch")} .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${index.transformTag("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] ${index.transformTag("pn-spinner")}{opacity:1;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%}${index.transformTag("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transform:translateX(0%);transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${index.transformTag("pn-spinner")} .pn-spinner-circle{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${index.transformTag("pn-spinner")} .pn-spinner-dot{fill:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`;
 
 const PnToggleSwitch = class {
     constructor(hostRef) {
@@ -20,28 +20,52 @@ const PnToggleSwitch = class {
     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;
@@ -55,12 +79,24 @@ const PnToggleSwitch = class {
     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 (index.h(index.Host, { key: 'b88bbc2385be79dd584ecee5e53dc89832de49c3' }, index.h("div", { key: '4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d', class: "pn-toggle" }, this.label && (index.h("div", { key: '944a36f2018335a283092c909af2f37846850eb8', class: "pn-toggle-content" }, index.h("label", { key: '2536eaf65117b1c70d1ec31f17faa41f2a6fced4', htmlFor: this.toggleid, class: "pn-toggle-label" }, index.h("span", { key: 'eae8a38d31f6bc05faa9d56c08517f9302be9a3e' }, this.label)), index.h("p", { key: '6173ba384459c406eb98fe4318e080b6cd36031a', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && index.h("span", { key: 'd4a52d7786e7a63ca3f201c3ad7cb8793e377c12' }, this.helpertext), index.h("slot", { key: '06406382d523b70b8acb094a82794652a4481528', name: "helpertext" })))), index.h("div", { key: '4676dd88652c903f94d3f887e97841e00bbe09e2', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, index.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() }), index.h("div", { key: '93caefd228460120aae22ba48e6c93d6df676fcf', class: "pn-toggle-bg" }), index.h("div", { key: '03299104835602d126960ad67ab51f94d27cf3c5', class: "pn-toggle-circle" }, index.h("svg", { key: '5f61f589797b3ca97a66cd42deab3065543679d2', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'd974e5cc198d19cf17e42e0b35097f87d11404a0', points: "4,12 9,17 20,6", "stroke-width": "3" })), index.h("pn-spinner", { key: '6f5c5fb05e0c9fd95b16d45833f50167af22e358', size: 1.125 }))))));
+        return (index.h(index.Host, { key: 'e6a6de7ded1a69b16843133338ba8a1ae1294b19' }, index.h("div", { key: '142125dd53902df30a93a5e5257650a7841a1644', class: "pn-toggle" }, index.h("div", { key: 'd4e35ed179dc5f1423cdf59cf0481ecbcb33021f', class: "pn-toggle-content" }, this.label && (index.h("label", { key: 'f38bdb380fb05349909e386dd6e22d841c0caf56', htmlFor: this.getId(), class: "pn-toggle-label" }, index.h("span", { key: '94a35b2682a039613dd0814a25ba30f954018dc6' }, this.label))), index.h("p", { key: 'c621112acea7f18b7943d9d07c0af52dd7455329', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && index.h("span", { key: '1959f88dbe079595e3cd6bbb48098e2777ab642e' }, this.helpertext), index.h("slot", { key: 'e493dcb3022bd31c4ecfb349756d3d83bf51bf9a', name: "helpertext" }))), index.h("div", { key: '1f13bb2bcb798b5221d06e55640848034ad2b260', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, index.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() }), index.h("div", { key: '51c67cb5c61e3d3b93bd49013594109772b7d796', class: "pn-toggle-bg" }), index.h("div", { key: '1932ea8d92b8ab57a47fdd3ced9795be78cc1620', class: "pn-toggle-circle" }, index.h("svg", { key: '67e5adc0818d3fe76de4dffa45bc8c1d5c9fba45', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'f1722e0d19629ea38eac2faa6d2ccaf007e78463', points: "4,12 9,17 20,6", "stroke-width": "3" })), index.h("pn-spinner", { key: '60ab6b2fea45ddbc8793b06f18032df94c858a9d', size: this.getSpinnerSize() }))))));
     }
     static get watchers() { return {
-        "toggleid": [{
+        "pnId": [{
                 "handleHelperId": 0
+            }],
+        "toggleid": [{
+                "handleHelperId": 1
             }]
     }; }
 };

package/umd/modules/@postnord/web-components/cjs/pn-tooltip.cjs.entry.js

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-CfUQZtlH.js');
+var index = require('./index-DWu-2oJc.js');
 var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
 
 const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
@@ -81,7 +81,7 @@ const PnTooltip = class {
         }, time);
     }
     render() {
-        return (index.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) }, index.h("pn-icon", { key: 'd4a28061a6c69ffa41cb69c4fd39961b4927949c', icon: this.getSymbol(), "data-simple": !!this.tooltip }), index.h("div", { key: 'cc7ae46d8c228136a29356083734104bfbb2a30d', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, index.h("div", { key: '9ccae396edf92999920b99bf97d0818541a44bf1', hidden: !!this.tooltip }, index.h("slot", { key: '61b67be4486d95208e09630d58a3dc3b344c5354' })))));
+        return (index.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) }, index.h("pn-icon", { key: 'f2842073c6434c74b4edc312fde550f71fb46657', icon: this.getSymbol(), "data-simple": !!this.tooltip }), index.h("div", { key: 'cd9a95132eb2bcacc999fbb2d3e31d5cdee64fed', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, index.h("div", { key: 'd10296fa39d348a197405296d62c5b11c4ccbd92', hidden: !!this.tooltip }, index.h("slot", { key: 'a12512c517fd7aca30f5dadf6cd8b6fbd1f5da56' })))));
     }
     static get watchers() { return {
         "open": [{