@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
+var index = require('./index-CfUQZtlH.js');
 var open_in_new = require('./open_in_new-B-zmn5xr.js');
 var index$1 = require('./index.cjs.js');
 
@@ -146,7 +146,7 @@ const translations = {
     },
 };
 
-const pnFooterCss = "pn-footer{color:#5e554a;padding-bottom:2em;display:block}pn-footer .pn-footer-row{padding:0.2em 0;font-size:0.9em;text-align:center}pn-footer .pn-footer-row p{margin:0 0.2em 0 0;display:inline-block}pn-footer pn-text-link{margin-right:0.5em}pn-footer pn-text-link:last-child{margin-right:0}";
+const pnFooterCss = () => `${index.transformTag("pn-footer")}{color:#5e554a;padding-bottom:2em;display:block}${index.transformTag("pn-footer")} .pn-footer-row{padding:0.2em 0;font-size:0.9em;text-align:center}${index.transformTag("pn-footer")} .pn-footer-row p{margin:0 0.2em 0 0;display:inline-block}${index.transformTag("pn-footer")} ${index.transformTag("pn-text-link")}{margin-right:0.5em}${index.transformTag("pn-footer")} ${index.transformTag("pn-text-link")}:last-child{margin-right:0}`;
 
 const PnFooter = class {
     constructor(hostRef) {
@@ -178,10 +178,9 @@ const PnFooter = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'fe2809c0965931f8c0e827cde6e415cf01647b59' }, index.h("div", { key: '50aaf97c180a81c6a373ea4dcff6e69a07c02701', class: "pn-footer-row" }, index.h("p", { key: 'af7b0418191aca29d870e56f8f3ed8f6888dad5f' }, this.getText('questions')), this.renderLink('contact')), index.h("div", { key: '46d8426977ec05cec03e71813849980325c813c3', class: "pn-footer-row" }, this.market !== index$1.NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), index.h("div", { key: '33faf842fdb88c02ac31f2761392dc793bea9a44', class: "pn-footer-row" }, index.h("p", { key: 'c6dcc1d7958ea94a371253284022ddb8cfdf6470' }, this.getText('info')), this.renderLink('domain'))));
+        return (index.h(index.Host, { key: '5ba1e53dd0dc631bf8bbe878a622ec577224a9f3' }, index.h("div", { key: '530b0e803506fed3cae180d1289535538f64e1bb', class: "pn-footer-row" }, index.h("p", { key: '47e19b88eb7c6860f0921fdacc79686aff3d2b61' }, this.getText('questions')), this.renderLink('contact')), index.h("div", { key: '2986a92cb2183d53c871030db72ef34aa08e847b', class: "pn-footer-row" }, this.market !== index$1.NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), index.h("div", { key: '550a23c5b872b6dc9c69b4e231ce7634d5f12994', class: "pn-footer-row" }, index.h("p", { key: '52871c90b92a2a64fc247ac83fdc62215e54a574' }, this.getText('info')), this.renderLink('domain'))));
     }
 };
-PnFooter.style = pnFooterCss;
+PnFooter.style = pnFooterCss();
 
 exports.pn_footer = PnFooter;
-//# sourceMappingURL=pn-footer.entry.cjs.js.map

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

@@ -4,11 +4,11 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
+var index = require('./index-CfUQZtlH.js');
 var index$1 = require('./index.cjs.js');
 var arrow_left = require('./arrow_left-Crkz484c.js');
 
-const pnHeaderCss = "pn-header{display:block}pn-header h1{color:#2d2013;margin:0}pn-header p{color:#5e554a;margin:0}pn-header .pn-header-breadcrumbs{width:100%}pn-header .pn-header-container{position:relative;width:100%;max-width:var(--max-width);margin:0 auto;padding:clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em);display:flex;flex-wrap:wrap;align-items:center;gap:1.5em}pn-header .pn-header-container>pn-text-link{display:block}pn-header .pn-header-content{flex:1 1 auto;display:flex;flex-direction:column;gap:1em}pn-header .pn-header [slot=buttons]{display:flex;flex-direction:column;gap:1em}";
+const pnHeaderCss = () => `${index.transformTag("pn-header")}{display:block}${index.transformTag("pn-header")} h1{color:#2d2013;margin:0}${index.transformTag("pn-header")} p{color:#5e554a;margin:0}${index.transformTag("pn-header")} .pn-header-breadcrumbs{width:100%}${index.transformTag("pn-header")} .pn-header-container{position:relative;width:100%;max-width:var(--max-width);margin:0 auto;padding:clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em);display:flex;flex-wrap:wrap;align-items:center;gap:1.5em}${index.transformTag("pn-header")} .pn-header-container>${index.transformTag("pn-text-link")}{display:block}${index.transformTag("pn-header")} .pn-header-content{flex:1 1 auto;display:flex;flex-direction:column;gap:1em}${index.transformTag("pn-header")} .pn-header [slot=buttons]{display:flex;flex-direction:column;gap:1em}`;
 
 const translations = {
     sv: 'Tillbaka',
@@ -67,13 +67,14 @@ const PnHeader = class {
         return this.goBackText || translations[this.language || index$1.en];
     }
     render() {
-        return (index.h(index.Host, { key: '4ab31c34a28867a03ffb2dcc45bb7a29519e63ab' }, index.h("header", { key: 'ebb14dabe3e3e9ee97b9e798c2e2c9b3524df4ad', class: "pn-header" }, index.h("div", { key: 'a3231b114bb081ea58a0b2dba79555b0e8ba00a4', class: "pn-header-container" }, index.h("div", { key: '3867bd8f5a8d15afdd1ba11ed5b1ab3e7208e052', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (index.h("pn-text-link", { key: 'baceed637e654109cfea59b4f41d5736f9d1fb68', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left.arrow_left, leftIcon: true })), index.h("slot", { key: '1669aaaaf47b0733fe8675bccd9a4690602c0796', name: "breadcrumb" })), index.h("div", { key: 'e4c1003567130ad41f9d671b5b132d23714c6092', class: "pn-header-content" }, this.heading && index.h("h1", { key: 'b5ae2f4914e5461757814c21cb61be94b865d87b' }, this.heading), index.h("slot", { key: '008a40922dedaa60bd29310a4616ca5fa8869560' })), index.h("div", { key: 'dfbdfe55b2902c49d217406691730432a19acf59', class: "pn-header-buttons", hidden: !this.hasButtons }, index.h("slot", { key: '2aac6194d1cb0d338aac7d387a1d5a8acca92a27', name: "buttons" })), index.h("slot", { key: '992426ed4dc9fd0e202487d79f5f94d562266123', name: "menu" })))));
+        return (index.h(index.Host, { key: 'f19310a092999791304499d72c1b8e566949c0d3' }, index.h("header", { key: 'c6b50a1d93bf18f2050b37a9bdf69d3706b8aea4', class: "pn-header" }, index.h("div", { key: '7bfa1bd37978daf85d266b7306a71705bdc8cac5', class: "pn-header-container" }, index.h("div", { key: '09ed187b0f201d435c99b3c6e0f245ca48857d47', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (index.h("pn-text-link", { key: 'ba657cb77da06d42009738c64d815a23d8dae527', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left.arrow_left, leftIcon: true })), index.h("slot", { key: '278bf254489dbd76f53e047cd16c247bcfd696eb', name: "breadcrumb" })), index.h("div", { key: 'e9b2e873fb9ed01fabbd669aa7cace973a55cbfa', class: "pn-header-content" }, this.heading && index.h("h1", { key: 'baec009bf6807009ea53d184be9a8c15ea0253a0' }, this.heading), index.h("slot", { key: '7a777967b19a19077486d88d775b4a1c4f9d3134' })), index.h("div", { key: '46fa0cc4120b341e4a03c60bb865e077c6231986', class: "pn-header-buttons", hidden: !this.hasButtons }, index.h("slot", { key: '8932d6bbb5e1647be6b666d1879b163575dfd760', name: "buttons" })), index.h("slot", { key: 'afc6e39f45ef72ba762772f84a66cc24fdbcf368', name: "menu" })))));
     }
     static get watchers() { return {
-        "maxWidth": ["setMaxWidth"]
+        "maxWidth": [{
+                "setMaxWidth": 0
+            }]
     }; }
 };
-PnHeader.style = pnHeaderCss;
+PnHeader.style = pnHeaderCss();
 
 exports.pn_header = PnHeader;
-//# sourceMappingURL=pn-header.entry.cjs.js.map

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

@@ -4,10 +4,10 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
+var index = require('./index-CfUQZtlH.js');
 var colors = require('./colors-Dzlq0FRO.js');
 
-const pnIconCss = "pn-icon{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}pn-icon[small] svg{height:1em;width:1em}pn-icon svg{display:block;height:1.5em;width:1.5em}pn-icon .pn-icon-svg>circle,pn-icon .pn-icon-svg>path{fill:var(--pn-icon-color);transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-icon .pn-icon-svg>circle,pn-icon .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}";
+const pnIconCss = () => `${index.transformTag("pn-icon")}{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}${index.transformTag("pn-icon")}[small] svg{height:1em;width:1em}${index.transformTag("pn-icon")} svg{display:block;height:1.5em;width:1.5em}${index.transformTag("pn-icon")} .pn-icon-svg>circle,${index.transformTag("pn-icon")} .pn-icon-svg>path{fill:var(--pn-icon-color);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-icon")} .pn-icon-svg>circle,${index.transformTag("pn-icon")} .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}`;
 
 const PnIcon = class {
     constructor(hostRef) {
@@ -41,12 +41,14 @@ const PnIcon = class {
         return index.h(index.Host, { key: 'f63d0b1e54fe91f9fcf33811f6694e604e09929d', role: "presentation", class: "pn-icon", innerHTML: this.icon });
     }
     static get watchers() { return {
-        "color": ["handleColor"]
+        "color": [{
+                "handleColor": 0
+            }]
     }; }
 };
-PnIcon.style = pnIconCss;
+PnIcon.style = pnIconCss();
 
-const pnTagCss = "pn-tag{display:inline-block}pn-tag .pn-tag{display:inline-flex;flex-direction:row;gap:0.5em;justify-content:center;align-items:center;border-radius:0.5em;padding:0.5em 1em}pn-tag .pn-tag[data-icon]{padding-left:0.75em}pn-tag .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}pn-tag .pn-tag[data-dark]{background-color:#8eddf9}pn-tag .pn-tag pn-icon .pn-icon-svg path{fill:#0d234b}pn-tag .pn-tag-label{line-height:1.5em;font-weight:400}pn-tag .pn-tag{}pn-tag .pn-tag[data-xsmall]{padding:0 0.5em}pn-tag .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}pn-tag .pn-tag{}pn-tag .pn-tag[data-small]{padding:0.125em 0.5em}pn-tag .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}pn-tag .pn-tag[data-small][data-icon]{padding-left:0.5em}pn-tag .pn-tag{}pn-tag .pn-tag[data-large]{padding:0.75em 1.25em}pn-tag .pn-tag{}pn-tag .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}pn-tag .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}pn-tag .pn-tag[data-appearance=discrete] pn-icon .pn-icon-svg path{fill:#2d2013}pn-tag .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}pn-tag .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}pn-tag .pn-tag[data-appearance=positive] pn-icon .pn-icon-svg path{fill:#002f24}pn-tag .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}pn-tag .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}pn-tag .pn-tag[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#99290a}pn-tag .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}pn-tag .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}pn-tag .pn-tag[data-appearance=error] pn-icon .pn-icon-svg path{fill:#a70707}pn-tag .pn-tag{}";
+const pnTagCss = () => `${index.transformTag("pn-tag")}{display:inline-block}${index.transformTag("pn-tag")} .pn-tag{display:inline-flex;flex-direction:row;gap:0.5em;justify-content:center;align-items:center;border-radius:0.5em;padding:0.5em 1em}${index.transformTag("pn-tag")} .pn-tag[data-icon]{padding-left:0.75em}${index.transformTag("pn-tag")} .pn-tag{background-color:rgba(142, 221, 249, 0.3);color:#0d234b}${index.transformTag("pn-tag")} .pn-tag[data-dark]{background-color:#8eddf9}${index.transformTag("pn-tag")} .pn-tag ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#0d234b}${index.transformTag("pn-tag")} .pn-tag-label{line-height:1.5em;font-weight:400}${index.transformTag("pn-tag")} .pn-tag{}${index.transformTag("pn-tag")} .pn-tag[data-xsmall]{padding:0 0.5em}${index.transformTag("pn-tag")} .pn-tag[data-xsmall] .pn-tag-label{font-size:0.875em;line-height:1.715em}${index.transformTag("pn-tag")} .pn-tag{}${index.transformTag("pn-tag")} .pn-tag[data-small]{padding:0.125em 0.5em}${index.transformTag("pn-tag")} .pn-tag[data-small] .pn-tag-label{font-size:0.875em;line-height:1.715em}${index.transformTag("pn-tag")} .pn-tag[data-small][data-icon]{padding-left:0.5em}${index.transformTag("pn-tag")} .pn-tag{}${index.transformTag("pn-tag")} .pn-tag[data-large]{padding:0.75em 1.25em}${index.transformTag("pn-tag")} .pn-tag{}${index.transformTag("pn-tag")} .pn-tag[data-appearance=discrete]{background-color:rgba(211, 206, 203, 0.3);color:#2d2013}${index.transformTag("pn-tag")} .pn-tag[data-appearance=discrete][data-dark]{background-color:#d3cecb}${index.transformTag("pn-tag")} .pn-tag[data-appearance=discrete] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#2d2013}${index.transformTag("pn-tag")} .pn-tag[data-appearance=positive]{background-color:rgba(171, 227, 187, 0.3);color:#002f24}${index.transformTag("pn-tag")} .pn-tag[data-appearance=positive][data-dark]{background-color:#abe3bb}${index.transformTag("pn-tag")} .pn-tag[data-appearance=positive] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#002f24}${index.transformTag("pn-tag")} .pn-tag[data-appearance=warning]{background-color:rgba(255, 200, 163, 0.3);color:#99290a}${index.transformTag("pn-tag")} .pn-tag[data-appearance=warning][data-dark]{background-color:#ffc8a3}${index.transformTag("pn-tag")} .pn-tag[data-appearance=warning] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#99290a}${index.transformTag("pn-tag")} .pn-tag[data-appearance=error]{background-color:rgba(251, 194, 193, 0.3);color:#a70707}${index.transformTag("pn-tag")} .pn-tag[data-appearance=error][data-dark]{background-color:#fbc2c1}${index.transformTag("pn-tag")} .pn-tag[data-appearance=error] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#a70707}${index.transformTag("pn-tag")} .pn-tag{}`;
 
 const PnTag = class {
     constructor(hostRef) {
@@ -90,8 +92,7 @@ const PnTag = class {
         return (index.h(index.Host, { key: '25baf496ed00dccf72f5eb7cb8f8623814c67452' }, index.h("div", { key: 'beee7ac3dc693e1c8cb5653e2fce3af01566c4e9', class: "pn-tag", "data-appearance": this.appearance, "data-icon": !!this.icon, "data-dark": this.dark, "data-small": this.small, "data-xsmall": this.xsmall, "data-large": this.large }, this.showIcon() && index.h("pn-icon", { key: '64f9df4e0906c8897045a08edce51f8015a1be56', icon: this.icon }), index.h("span", { key: 'a43a26db7b5e7b28eb49f8ac76eab9ebd8b7ee25', class: "pn-tag-label" }, this.label))));
     }
 };
-PnTag.style = pnTagCss;
+PnTag.style = pnTagCss();
 
 exports.pn_icon = PnIcon;
 exports.pn_tag = PnTag;
-//# sourceMappingURL=pn-icon.pn-tag.entry.cjs.js.map

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

@@ -4,9 +4,9 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
+var index = require('./index-CfUQZtlH.js');
 
-const pnIllustrationCss = "pn-illustration{display:inline-block}pn-illustration[data-fill]{display:block}pn-illustration>svg{width:var(--pn-width);height:var(--pn-height);display:block}";
+const pnIllustrationCss = () => `${index.transformTag("pn-illustration")}{display:inline-block}${index.transformTag("pn-illustration")}[data-fill]{display:block}${index.transformTag("pn-illustration")}>svg{width:var(--pn-width);height:var(--pn-height);display:block}`;
 
 const PnIllustration = class {
     constructor(hostRef) {
@@ -56,10 +56,11 @@ const PnIllustration = class {
         return index.h(index.Host, { key: '3f2e44ec10a5a2fc9fd9a69f94963ab4e79fb877', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
     }
     static get watchers() { return {
-        "fill": ["handleFill"]
+        "fill": [{
+                "handleFill": 0
+            }]
     }; }
 };
-PnIllustration.style = pnIllustrationCss;
+PnIllustration.style = pnIllustrationCss();
 
 exports.pn_illustration = PnIllustration;
-//# sourceMappingURL=pn-illustration.entry.cjs.js.map

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

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
+var index = require('./index-CfUQZtlH.js');
 var index$1 = require('./index.cjs.js');
 var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
 var check = require('./check-CQU2BD5S.js');
@@ -40,7 +40,7 @@ const translations = {
     },
 };
 
-const pnInputCss = "pn-input{display:inline-flex;flex-direction:column}pn-input .pn-input-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;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-input .pn-input-label{transition-duration:0s;transition-delay:0s}}pn-input .pn-input-label>span{font-size:0.875em}pn-input .pn-input-group{position:relative}pn-input .pn-input-element{--pn-input-offset-left:0em;--pn-input-offset-right:0em;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}pn-input .pn-input-element:-webkit-autofill,pn-input .pn-input-element:-webkit-autofill:hover,pn-input .pn-input-element:-webkit-autofill:focus,pn-input .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-input .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-input .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-input .pn-input-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){pn-input .pn-input-element{transition-duration:0s;transition-delay:0s}}pn-input .pn-input-element::placeholder{color:#5e554a;font-weight:normal}pn-input .pn-input-element:hover{border-color:#005d92}pn-input .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-input .pn-input-element{width:100%;padding-left:calc(var(--pn-input-offset-left) + 0.75em);padding-right:calc(var(--pn-input-offset-right) + 0.75em)}pn-input .pn-input-element:read-only{border-color:#ffffff}pn-input .pn-input-element:disabled~.pn-input-eyecandy>pn-icon>.pn-icon-svg>path{fill:#969087}pn-input .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none}pn-input .pn-input-element::-webkit-textfield-decoration-container,pn-input .pn-input-element::-webkit-search-cancel-button,pn-input .pn-input-element::-webkit-inner-spin-button,pn-input .pn-input-element::-webkit-outer-spin-button,pn-input .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-input .pn-input-element[type=number]{appearance:textfield}pn-input .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}pn-input .pn-input-eyecandy[data-prefix]{left:0.75em}pn-input .pn-input-eyecandy[data-suffix]{right:0.75em}pn-input .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}pn-input .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-input .pn-input-message[hidden],pn-input .pn-input-message>span[hidden]{display:none}pn-input .pn-input[data-error]>.pn-input-label{color:#a70707}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-input .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}pn-input .pn-input[data-valid]>.pn-input-label{color:#005e41}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}";
+const pnInputCss = () => `${index.transformTag("pn-input")}{display:inline-flex;flex-direction:column}${index.transformTag("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${index.transformTag("pn-input")} .pn-input-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-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-input")} .pn-input-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-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-input")} .pn-input-label>span{font-size:0.875em}${index.transformTag("pn-input")} .pn-input-group{position:relative}${index.transformTag("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));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-input")} .pn-input-element:-webkit-autofill,${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill:hover,${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill:focus,${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-input")} .pn-input-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-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${index.transformTag("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-input")} .pn-input-element:hover{border-color:#005d92}${index.transformTag("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${index.transformTag("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${index.transformTag("pn-icon")}>.pn-icon-svg>path{fill:#969087}${index.transformTag("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${index.transformTag("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${index.transformTag("pn-input")} .pn-input-element::-webkit-search-cancel-button,${index.transformTag("pn-input")} .pn-input-element::-webkit-inner-spin-button,${index.transformTag("pn-input")} .pn-input-element::-webkit-outer-spin-button,${index.transformTag("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${index.transformTag("pn-input")} .pn-input-element[type=number]{appearance:textfield}${index.transformTag("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${index.transformTag("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${index.transformTag("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${index.transformTag("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${index.transformTag("pn-input")} .pn-input-message{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-input")} .pn-input-message[hidden],${index.transformTag("pn-input")} .pn-input-message>span[hidden]{display:none}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`;
 
 const PnInput = class {
     constructor(hostRef) {
@@ -76,6 +76,8 @@ const PnInput = class {
      * Not needed if you have the pntopbar on the page.
      **/
     language = null;
+    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
+    compact = false;
     /**
      * Select an icon to display before the input field value.
      * `icon` takes precedence over the `text-prefix` prop.
@@ -174,17 +176,29 @@ const PnInput = class {
      **/
     error;
     handleOffset() {
-        requestAnimationFrame(() => requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
             const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
             const right = this.suffix?.clientWidth ? this.suffix.clientWidth + 8 : 0;
             this.offsetLeft = left;
             this.offsetRight = right;
-        }));
+        });
     }
     handleMessage() {
         this.checkSlottedHelper();
         this.checkSlottedError();
     }
+    connectedCallback() {
+        this.mo = new MutationObserver(() => {
+            index.forceUpdate(this.hostElement);
+            this.handleOffset();
+            this.handleMessage();
+        });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
     async componentWillLoad() {
         this.handleMessage();
         if (this.inputid !== this.id)
@@ -194,16 +208,6 @@ const PnInput = class {
     }
     componentDidLoad() {
         this.handleOffset();
-        if (this.mo)
-            this.mo.disconnect();
-        this.mo = new MutationObserver(() => {
-            this.handleOffset();
-            this.handleMessage();
-        });
-        this.mo.observe(this.hostElement, {
-            subtree: true,
-            childList: true,
-        });
     }
     setVal(event) {
         const target = event.composedPath?.()[0];
@@ -288,20 +292,40 @@ const PnInput = class {
             return false;
         return this.type === 'search' && !!this.value?.length;
     }
+    validLabel() {
+        return this.label?.length > 0 || this.maxlength >= 1;
+    }
+    useLabel() {
+        return this.validLabel() && !this.compact;
+    }
+    /** Compact label must be positioned after the input element in order to work. */
+    useCompactLabel() {
+        return this.validLabel() && this.compact;
+    }
+    renderLabel() {
+        return (index.h("label", { htmlFor: this.inputid, class: "pn-input-label", "data-compact": this.compact }, this.label && index.h("span", null, this.label), this.maxlength >= 0 && index.h("span", null, `${this.value.length}/${this.maxlength}`)));
+    }
     render() {
-        return (index.h(index.Host, { key: 'f6553d466069c8e7558eb98dfd6deba21905d888' }, index.h("div", { key: 'e4eb511c59f571eccf70570cff7b44145ee64a70', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (index.h("label", { key: 'fc2a2516335378e1b6dabdb39b5da538c4cca995', htmlFor: this.inputid, class: "pn-input-label" }, this.label && index.h("span", { key: '63571398139a931d8a5dd59698f7ec26e0bc6ba9' }, this.label), this.maxlength >= 0 && index.h("span", { key: 'eb08d059863c41a86ff77102f837565d9eafe3ce' }, `${this.value.length}/${this.maxlength}`))), index.h("div", { key: '56ab6a577a2712b5430749515b22e776ec9b56a8', class: "pn-input-group" }, index.h("input", { key: 'ace87466651b4ef525d739f9499b4fa8b10a36e1', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), style: {
+        return (index.h(index.Host, { key: '3250630450288d09811b7c78bca5091ba93ec7ab' }, index.h("div", { key: 'db673ba19f300966eaf5c38136fe7d6143aa661d', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            }, onInput: e => this.setVal(e) }), index.h("div", { key: '334cb0b553144a1271e1a2e094ef3d19776f308d', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && index.h("pn-icon", { key: 'ac827d5f752445b4a5d0e94ae44646513deeb84f', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && index.h("span", { key: 'd0d4e2ad948ca3c9155e7b405ea2f4cd4f064f71', class: "pn-input-text" }, this.textPrefix)), index.h("div", { key: 'e972870933dfb2d8cf294facf51dceb7c64d8bf6', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && index.h("span", { key: 'd37da7ccf870f54455731417ac6afbe573589e8a', class: "pn-input-text" }, this.textSuffix), this.displayState() && index.h("pn-icon", { key: '5432e13d6a53b1e8d143498d0c068b035b89da21', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (index.h("pn-button", { key: '7a04e3189a7ed5d3b29e93d0ac1031c22ffb14e0', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (index.h("pn-button", { key: 'b9941892bb3cf8d64b810be56d3525b4fe7aa394', icon: close.close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), index.h("p", { key: '466cf477bb1a8fd5f69c24cf9769a53b77a84167', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && index.h("span", { key: '760f744cdc4cd0f35399b3e5e5dfb563a6e326a2', class: "pn-input-helper" }, this.helpertext), index.h("span", { key: '853ecf5094683f8ea69acd81ffa454c2ad7da383', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, index.h("slot", { key: '634e73d6d3b93a1d5f0429de708fd3901968ec31', name: "helpertext" })), this.hasErrorMessage() && index.h("span", { key: 'f150a81d23c50bf2b705f7082d31bf748aaf91e7', class: "pn-input-error" }, this.error), index.h("span", { key: '2cd93c90d13a0ef9f153d051f3ee99ff9e25d025', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, index.h("slot", { key: 'c1d461b5a82d635c57af689f29bf485e82117303', name: "error" }))))));
+            } }, this.useLabel() && this.renderLabel(), index.h("div", { key: 'b216b7f951be237aed6e46f1ccbcfd29b2a3cad1', class: "pn-input-group" }, index.h("input", { key: '4ee129c35c6a74a359df9d611b236132d7afac38', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), index.h("div", { key: '753a9abeaf5bfa5ffb3be10042a76aa7863bce9c', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && index.h("pn-icon", { key: 'acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && index.h("span", { key: '70d2eb7e94e790d665a57557595c2bce4855b827', class: "pn-input-text" }, this.textPrefix)), index.h("div", { key: '1dcae3fb8489d2dc6aa7325baea693591acef31c', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && index.h("span", { key: '05044f3fbea582d507de30a0ff751abaf1da3206', class: "pn-input-text" }, this.textSuffix), this.displayState() && index.h("pn-icon", { key: '727650c9e6c9b9da2ef43e933fab95b6adc8a6bb', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (index.h("pn-button", { key: '4e28eddff11c9aea670a6764aeb0316bccba1c1c', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (index.h("pn-button", { key: '2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2', icon: close.close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), index.h("p", { key: 'b8b1039a61a23efd24ebd71285b15cce7bfc5ec0', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && index.h("span", { key: '4433df6b700cc40ce2ae698d2474f57163b398a1', class: "pn-input-helper" }, this.helpertext), index.h("span", { key: '41c8fb1cbbc17b7c349922cac2ff42244a017e0c', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, index.h("slot", { key: '5628bbc8db75161d18ad3e75c259bf3eb5fc9052', name: "helpertext" })), this.hasErrorMessage() && index.h("span", { key: 'e41145d7fab9f3ae35dd428971c79673d0531301', class: "pn-input-error" }, this.error), index.h("span", { key: 'ae85a9420fcb449cc874eadc7a066dd772f097a9', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, index.h("slot", { key: 'bdd31ab2f706cac6e243562d035361a381ecfa43', name: "error" }))))));
     }
     static get watchers() { return {
-        "textPrefix": ["handleOffset"],
-        "textSuffix": ["handleOffset"],
-        "helpertext": ["handleMessage"],
-        "error": ["handleMessage"]
+        "textPrefix": [{
+                "handleOffset": 0
+            }],
+        "textSuffix": [{
+                "handleOffset": 0
+            }],
+        "helpertext": [{
+                "handleMessage": 0
+            }],
+        "error": [{
+                "handleMessage": 0
+            }]
     }; }
 };
-PnInput.style = pnInputCss;
+PnInput.style = pnInputCss();
 
 exports.pn_input = PnInput;
-//# sourceMappingURL=pn-input.entry.cjs.js.map

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

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
+var index = require('./index-CfUQZtlH.js');
 var index$1 = require('./index.cjs.js');
 var close = require('./close-Bn5ieKko.js');
 
@@ -18,7 +18,7 @@ const translations = {
     },
 };
 
-const pnModalCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n  padding: 0;\n  max-width: var(--pn-modal-max-width);\n  overflow: hidden;\n  border: 0;\n  border-radius: 1.5em;\n  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: #ffffff;\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\n}\npn-modal .pn-modal {\n  transition-property: opacity, overlay, display, transform, outline-color, border-radius;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal {\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal[data-allow-overflow] {\n  overflow: unset;\n}\npn-modal .pn-modal[data-allow-overflow] .pn-modal-container {\n  overflow: unset;\n}\npn-modal .pn-modal[data-allow-overflow] .pn-modal-picture {\n  border-top-right-radius: 1.5em;\n}\npn-modal .pn-modal[data-image] {\n  padding-top: 0;\n}\npn-modal .pn-modal[data-sheet] {\n  margin: 0 0 0 auto;\n  height: 100%;\n  max-height: unset;\n  border-radius: 1.5em 0 0 1.5em;\n  transform: translate(20%, 0%);\n}\npn-modal .pn-modal[data-sheet] .pn-modal-container {\n  max-height: unset;\n}\npn-modal .pn-modal[open] {\n  display: flex;\n  opacity: 1;\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open] {\n    display: flex;\n    opacity: 0;\n    transform: translate(0%, 20%);\n  }\n}\npn-modal .pn-modal[open][data-sheet] {\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open][data-sheet] {\n    transform: translate(20%, 0%);\n  }\n}\npn-modal .pn-modal::backdrop {\n  background-color: rgba(0, 0, 0, 0);\n  transition-property: opacity, background-color, overlay, display;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal::backdrop {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal::backdrop {\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal[open]::backdrop {\n  background-color: rgba(0, 0, 0, 0.55);\n}\n@starting-style {\n  pn-modal .pn-modal[open]::backdrop {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\npn-modal .pn-modal-container {\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  overflow: hidden auto;\n}\npn-modal .pn-modal-container::-webkit-scrollbar {\n  background-color: #ffffff;\n  width: 0.875em;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-track {\n  background-color: #ffffff;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-thumb {\n  cursor: pointer;\n  background-color: #969087;\n  border-radius: 1em;\n  border: 0.25em solid #ffffff;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-thumb:hover {\n  background-color: #5e554a;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-corner, pn-modal .pn-modal-container::-webkit-scrollbar-button {\n  display: none;\n}\npn-modal .pn-modal-close-button {\n  position: absolute;\n  z-index: 10;\n  right: 0.75em;\n  top: 0.75em;\n}\npn-modal .pn-modal-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  padding: clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-header[hidden] {\n  display: none;\n}\npn-modal .pn-modal-header:not([hidden]) + .pn-modal-content:not([hidden]) {\n  padding-top: 0;\n}\npn-modal .pn-modal-label {\n  line-height: 1.5;\n  padding-right: 1.5em;\n  margin: 0;\n}\npn-modal .pn-modal-text {\n  margin: 0;\n}\npn-modal .pn-modal-content {\n  padding: clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-image {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\npn-modal .pn-modal-image[hidden] {\n  display: none;\n}\npn-modal .pn-modal-picture {\n  margin: 0;\n  padding: 0;\n  display: block;\n  overflow: hidden;\n  border-radius: 1.5em 0 0 0;\n}\npn-modal .pn-modal-picture > *[slot=image] {\n  display: block;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n}\npn-modal .pn-modal-buttons {\n  background-color: #ffffff;\n  border-top: 0.0625em solid #d3cecb;\n  padding: clamp(1em, 5vw, 1.5em);\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n  border-radius: 0 0 1.5em 1.5em;\n}\npn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) > [data-left] {\n  margin-right: auto;\n}\npn-modal .pn-modal-buttons > [data-left] {\n  margin-right: auto;\n}\npn-modal .pn-modal-buttons:empty {\n  display: none;\n}\n\n@media (max-width: 55em) {\n  pn-modal .pn-modal {\n    max-height: 95vh;\n    margin-bottom: 0;\n    bottom: 0;\n    transform: translate(0%, 20%);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}";
+const pnModalCss = () => `${index.transformTag("pn-modal")} .pn-modal{--pn-modal-max-width:45em;z-index:10000;position:fixed;top:0;inset-block-start:0;inset-block-end:0;margin:auto;padding:0;max-width:var(--pn-modal-max-width);overflow:hidden;border:0;border-radius:1.5em;box-shadow:0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);background-color:#ffffff;display:none;opacity:0;transform:translate(0%, 20%);outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-modal")} .pn-modal:focus-visible{outline-color:#ffffff}${index.transformTag("pn-modal")} .pn-modal{transition-property:opacity, overlay, display, transform, outline-color, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-modal")} .pn-modal{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-modal")} .pn-modal{transition-behavior:allow-discrete}${index.transformTag("pn-modal")} .pn-modal[data-allow-overflow]{overflow:unset}${index.transformTag("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-container{overflow:unset}${index.transformTag("pn-modal")} .pn-modal[data-allow-overflow] .pn-modal-picture{border-top-right-radius:1.5em}${index.transformTag("pn-modal")} .pn-modal[data-image]{padding-top:0}${index.transformTag("pn-modal")} .pn-modal[data-sheet]{margin:0 0 0 auto;height:100%;max-height:unset;border-radius:1.5em 0 0 1.5em;transform:translate(20%, 0%)}${index.transformTag("pn-modal")} .pn-modal[data-sheet] .pn-modal-container{max-height:unset}${index.transformTag("pn-modal")} .pn-modal[open]{display:flex;opacity:1;transform:translate(0%, 0%)}@starting-style{${index.transformTag("pn-modal")} .pn-modal[open]{display:flex;opacity:0;transform:translate(0%, 20%)}}${index.transformTag("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(0%, 0%)}@starting-style{${index.transformTag("pn-modal")} .pn-modal[open][data-sheet]{transform:translate(20%, 0%)}}${index.transformTag("pn-modal")} .pn-modal::backdrop{background-color:rgba(0, 0, 0, 0);transition-property:opacity, background-color, overlay, display;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-modal")} .pn-modal::backdrop{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-modal")} .pn-modal::backdrop{transition-behavior:allow-discrete}${index.transformTag("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0.55)}@starting-style{${index.transformTag("pn-modal")} .pn-modal[open]::backdrop{background-color:rgba(0, 0, 0, 0)}}${index.transformTag("pn-modal")} .pn-modal-container{max-height:85vh;display:flex;flex-direction:column;align-items:stretch;overflow:hidden auto}${index.transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-corner,${index.transformTag("pn-modal")} .pn-modal-container::-webkit-scrollbar-button{display:none}${index.transformTag("pn-modal")} .pn-modal-close-button{position:absolute;z-index:10;right:0.75em;top:0.75em}${index.transformTag("pn-modal")} .pn-modal-header{display:flex;flex-direction:column;gap:0.5em;padding:clamp(1em, 5vw, 1.5em)}${index.transformTag("pn-modal")} .pn-modal-header[hidden]{display:none}${index.transformTag("pn-modal")} .pn-modal-header:not([hidden])+.pn-modal-content:not([hidden]){padding-top:0}${index.transformTag("pn-modal")} .pn-modal-label{line-height:1.5;padding-right:1.5em;margin:0}${index.transformTag("pn-modal")} .pn-modal-text{margin:0}${index.transformTag("pn-modal")} .pn-modal-content{padding:clamp(1em, 5vw, 1.5em)}${index.transformTag("pn-modal")} .pn-modal-image{position:relative;display:flex;flex-direction:column}${index.transformTag("pn-modal")} .pn-modal-image[hidden]{display:none}${index.transformTag("pn-modal")} .pn-modal-picture{margin:0;padding:0;display:block;overflow:hidden;border-radius:1.5em 0 0 0}${index.transformTag("pn-modal")} .pn-modal-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${index.transformTag("pn-modal")} .pn-modal-buttons{background-color:#ffffff;border-top:0.0625em solid #d3cecb;padding:clamp(1em, 5vw, 1.5em);display:flex;justify-content:flex-end;gap:0.5em;border-radius:0 0 1.5em 1.5em}${index.transformTag("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${index.transformTag("pn-button")}){display:flex;justify-content:flex-end;gap:0.5em}${index.transformTag("pn-modal")} .pn-modal-buttons>[slot=buttons]:not(${index.transformTag("pn-button")})>[data-left]{margin-right:auto}${index.transformTag("pn-modal")} .pn-modal-buttons>[data-left]{margin-right:auto}${index.transformTag("pn-modal")} .pn-modal-buttons:empty{display:none}@media (max-width: 55em){${index.transformTag("pn-modal")} .pn-modal{max-height:95vh;margin-bottom:0;bottom:0;transform:translate(0%, 20%);border-bottom-left-radius:0;border-bottom-right-radius:0}}`;
 
 const PnModal = class {
     constructor(hostRef) {
@@ -185,11 +185,14 @@ const PnModal = class {
         return (index.h(index.Host, { key: 'd965a05833b311fed1f1f7ba245c9401ab77b765' }, index.h("dialog", { key: 'd60d253a75dd3f82b684fce659a9a917d6181c62', class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, "data-image": this.showImage(), "data-allow-overflow": this.removeOverflow, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (index.h("pn-button", { key: '4d25a2e559a8aca6286a9fc7a94f82285bd8ad4e', small: true, class: "pn-modal-close-button", icon: close.close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), index.h("div", { key: '3953eef2505ccda4786177c01ae9af92874d65a1', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, index.h("div", { key: 'de0730ef36d305f2ff2652510838df85bdbdee5e', class: "pn-modal-image", hidden: !this.showImage() }, index.h("picture", { key: 'c26ae160c243b630d7a1ba71a8d4cac523096cfd', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, index.h("slot", { key: '4d2425b17367b4ccd2215e54cfedbee6731a9daf', name: "image" }))), index.h("header", { key: '815bef72c5b9a2982b7dd62059314ef120221ee0', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && index.h("h2", { key: '41ae0e9a7d8adca27764bf6be026d0bc59df9b90', class: "pn-modal-label" }, this.label), this.helpertext && index.h("p", { key: '4fac7c6daf49eaff4a56b7c217f49e7f0507299f', class: "pn-modal-text" }, this.helpertext), index.h("slot", { key: '8ce017defaa66a4bfec5ef38398b3104ed0ff7f9', name: "header" })), index.h("section", { key: '3ad1dc180db0ad42a4fa99dc6c9a17fc153af362', class: "pn-modal-content" }, index.h("slot", { key: 'bddef9aa3cd8b78be3facd5ebd3e88d72b9eb219' })), index.h("nav", { key: 'edc771b8ca813ed6c9b20f688847c9c22072f0a1', class: "pn-modal-buttons" }, index.h("slot", { key: '75dcf50e07c985f95836251881b8c214bc1b58c6', name: "buttons" }))))));
     }
     static get watchers() { return {
-        "open": ["handleOpen"],
-        "maxWidth": ["handleMaxWidth"]
+        "open": [{
+                "handleOpen": 0
+            }],
+        "maxWidth": [{
+                "handleMaxWidth": 0
+            }]
     }; }
 };
-PnModal.style = pnModalCss;
+PnModal.style = pnModalCss();
 
 exports.pn_modal = PnModal;
-//# sourceMappingURL=pn-modal.entry.cjs.js.map

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

@@ -4,8 +4,8 @@
  */
 'use strict';
 
-var index = require('./index-ChnvH99O.js');
-var index$1 = require('./index-Bbyn8a0b.js');
+var index = require('./index-CfUQZtlH.js');
+var index$1 = require('./index-CNdVg5VI.js');
 var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
 var chevron_down = require('./chevron_down-BLU6_yOG.js');
 var close = require('./close-Bn5ieKko.js');
@@ -112,7 +112,7 @@ const translations = {
     },
 };
 
-const pnMultiselectCss = "pn-multiselect{display:inline-block}pn-multiselect .pn-multiselect{border:0;margin:0;padding:0}pn-multiselect .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:3em}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-multiselect .pn-multiselect-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;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-label>span{font-size:0.875em}pn-multiselect .pn-multiselect-label{width:100%}pn-multiselect .pn-multiselect-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}pn-multiselect .pn-multiselect-group{position:relative;padding:0;margin:0}pn-multiselect .pn-multiselect-input{position:relative}pn-multiselect .pn-multiselect-input>pn-icon{pointer-events:none;position:absolute;top:0.75em;right:3.5em}pn-multiselect .pn-multiselect-input>pn-icon[data-custom]{left:0.75em;right:unset}pn-multiselect .pn-multiselect-button{cursor:pointer;position:absolute;right:0.75em;top:50%;transform:translateY(-50%);padding:0;margin:0;border:0;width:2em;height:2em;font-size:1em;border-radius:50%;background-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-multiselect .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}pn-multiselect .pn-multiselect-button:hover{background-color:#effbff}pn-multiselect .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}pn-multiselect .pn-multiselect-button[aria-expanded=true]>pn-icon>svg>path{transform:rotate(180deg);transition-delay:0s}pn-multiselect .pn-multiselect-element{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}pn-multiselect .pn-multiselect-element:-webkit-autofill,pn-multiselect .pn-multiselect-element:-webkit-autofill:hover,pn-multiselect .pn-multiselect-element:-webkit-autofill:focus,pn-multiselect .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-multiselect .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-multiselect .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-multiselect .pn-multiselect-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){pn-multiselect .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}pn-multiselect .pn-multiselect-element:hover{border-color:#005d92}pn-multiselect .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-multiselect .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;padding-right:3.5em;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis}pn-multiselect .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}pn-multiselect .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}pn-multiselect .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}pn-multiselect .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}pn-multiselect .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}pn-multiselect .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}pn-multiselect .pn-multiselect-element:focus-visible{transition-delay:0s}pn-multiselect .pn-multiselect-element::-webkit-search-cancel-button,pn-multiselect .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-multiselect .pn-multiselect-options{scroll-behavior:smooth;position:absolute;z-index:10;top:calc(100% + 0.5em);left:0;right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;list-style:none;margin:0;padding:0;width:var(--pn-select-options-width);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left}pn-multiselect .pn-multiselect-options[data-open]{visibility:visible}pn-multiselect .pn-multiselect-options[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left;box-shadow:0 -0.0625em 0.125em rgba(0, 0, 0, 0.2)}pn-multiselect .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}pn-multiselect .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-corner,pn-multiselect .pn-multiselect-options::-webkit-scrollbar-button{display:none}pn-multiselect .pn-multiselect-options>pn-input{padding:0.5em}pn-multiselect .pn-multiselect-optgroup{list-style:none;padding:0}pn-multiselect .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}pn-multiselect .pn-multiselect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.5em;padding:0;margin:0.5em 0 0 0;color:#5e554a;font-weight:400}pn-multiselect .pn-multiselect-chips:empty{display:none}pn-multiselect .pn-multiselect-chip{margin:0;display:inline-flex;align-items:center;gap:0.25em;background-color:#ffffff;border-radius:0.5em;padding:0.125em 0.25em 0.125em 0.5em;line-height:1.5em;border:0.0625em solid #5e554a;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}pn-multiselect .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}pn-multiselect .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}pn-multiselect .pn-multiselect-chip-button{cursor:pointer;font-size:1em;padding:0.25em;height:1.5em;width:1.5em;border:0;background-color:unset;border-radius:50%;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-chip-button:hover{background-color:#8eddf9}pn-multiselect .pn-multiselect-chip-button:focus{outline:0}pn-multiselect .pn-multiselect-no-results{margin:0;padding:0.75em}pn-multiselect .pn-multiselect-description{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-multiselect .pn-multiselect-description[role=alert]{color:#a70707}pn-multiselect .pn-multiselect-option{position:relative;margin:0;padding:0}pn-multiselect .pn-multiselect-option .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-multiselect .pn-multiselect-option-input{cursor:pointer;position:absolute;opacity:0;left:0;top:0;height:100%;width:100%;margin:0;-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-option-input:disabled{pointer-events:none}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#a70707;background-color:#fdefee;border-color:#a70707}pn-multiselect .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}pn-multiselect .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#005d92;background-color:#e0f8ff;border-color:#005d92}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}pn-multiselect .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}pn-multiselect .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}pn-multiselect .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}pn-multiselect .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}pn-multiselect .pn-multiselect-option-content{position:relative;overflow:hidden;z-index:-1;display:flex;align-items:center;padding:0.75em 1em;gap:0.5em;background-color:#ffffff;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}pn-multiselect .pn-multiselect-option-label{color:#2d2013;font-weight:400}pn-multiselect .pn-multiselect-option-helper{color:#5e554a;margin:0}pn-multiselect .pn-multiselect-option-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}";
+const pnMultiselectCss = () => `${index.transformTag("pn-multiselect")}{display:inline-block}${index.transformTag("pn-multiselect")} .pn-multiselect{position:relative;border:0;margin:0;padding:0}${index.transformTag("pn-multiselect")} .pn-multiselect[data-icon]{--pn-input-offset-left:2em}${index.transformTag("pn-multiselect")} .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:2.75em}${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label{color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label[data-compact]{color:#2d2013}${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill,${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover,${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus,${index.transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-multiselect")} .pn-multiselect-label{width:100%;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-multiselect")} .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-multiselect")} .pn-multiselect-label>span{font-size:0.875em}${index.transformTag("pn-multiselect")} .pn-multiselect-label[data-compact]{justify-content:start}${index.transformTag("pn-multiselect")} .pn-multiselect-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${index.transformTag("pn-multiselect")} .pn-multiselect-group{position:relative;padding:0;margin:0}${index.transformTag("pn-multiselect")} .pn-multiselect-input{position:relative}${index.transformTag("pn-multiselect")} .pn-multiselect-input>${index.transformTag("pn-icon")}{pointer-events:none;position:absolute;top:0.75em;right:3.5em}${index.transformTag("pn-multiselect")} .pn-multiselect-input>${index.transformTag("pn-icon")}[data-custom]{left:0.75em;right:unset}${index.transformTag("pn-multiselect")} .pn-multiselect-button{cursor:pointer;position:absolute;right:0.75em;top:50%;transform:translateY(-50%);padding:0;margin:0;border:0;width:2em;height:2em;font-size:1em;border-radius:50%;background-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-multiselect")} .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-multiselect")} .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-button>${index.transformTag("pn-icon")}>svg>path{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-multiselect")} .pn-multiselect-button>${index.transformTag("pn-icon")}>svg>path{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-button>${index.transformTag("pn-icon")}>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}${index.transformTag("pn-multiselect")} .pn-multiselect-button:hover{background-color:#effbff}${index.transformTag("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}${index.transformTag("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]>${index.transformTag("pn-icon")}>svg>path{transform:rotate(180deg);transition-delay:0s}${index.transformTag("pn-multiselect")} .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3.5em 0.75em 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-multiselect")} .pn-multiselect-element:-webkit-autofill,${index.transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:hover,${index.transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:focus,${index.transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-multiselect")} .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-multiselect")} .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-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-multiselect")} .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]:focus+.pn-multiselect-label,${index.transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]:not(:placeholder-shown)+.pn-multiselect-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-multiselect")} .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-multiselect")} .pn-multiselect-element:hover{border-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${index.transformTag("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}${index.transformTag("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}${index.transformTag("pn-multiselect")} .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-multiselect")} .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}${index.transformTag("pn-multiselect")} .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}${index.transformTag("pn-multiselect")} .pn-multiselect-element:focus-visible{transition-delay:0s}${index.transformTag("pn-multiselect")} .pn-multiselect-element::-webkit-search-cancel-button,${index.transformTag("pn-multiselect")} .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${index.transformTag("pn-multiselect")} .pn-multiselect-options{scroll-behavior:smooth;position:absolute;z-index:10;top:calc(100% + 0.5em);left:0;right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;list-style:none;margin:0;padding:0;width:var(--pn-select-options-width);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left}${index.transformTag("pn-multiselect")} .pn-multiselect-options[data-open]{visibility:visible}${index.transformTag("pn-multiselect")} .pn-multiselect-options[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left;box-shadow:0 -0.0625em 0.125em rgba(0, 0, 0, 0.2)}${index.transformTag("pn-multiselect")} .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}${index.transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-corner,${index.transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-button{display:none}${index.transformTag("pn-multiselect")} .pn-multiselect-options>${index.transformTag("pn-input")}{padding:0.5em}${index.transformTag("pn-multiselect")} .pn-multiselect-optgroup{list-style:none;padding:0}${index.transformTag("pn-multiselect")} .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}${index.transformTag("pn-multiselect")} .pn-multiselect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.5em;padding:0;margin:0.5em 0 0 0;color:#5e554a;font-weight:400}${index.transformTag("pn-multiselect")} .pn-multiselect-chips:empty{display:none}${index.transformTag("pn-multiselect")} .pn-multiselect-chip{margin:0;display:inline-flex;align-items:center;gap:0.25em;background-color:#ffffff;border-radius:0.5em;padding:0.125em 0.25em 0.125em 0.5em;line-height:1.5em;border:0.0625em solid #5e554a;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-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-multiselect")} .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}${index.transformTag("pn-multiselect")} .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}${index.transformTag("pn-multiselect")} .pn-multiselect-chip-button{cursor:pointer;font-size:1em;padding:0.25em;height:1.5em;width:1.5em;border:0;background-color:unset;border-radius:50%;transition-property: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-multiselect")} .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}${index.transformTag("pn-multiselect")} .pn-multiselect-chip-button:hover{background-color:#8eddf9}${index.transformTag("pn-multiselect")} .pn-multiselect-chip-button:focus{outline:0}${index.transformTag("pn-multiselect")} .pn-multiselect-no-results{margin:0;padding:0.75em}${index.transformTag("pn-multiselect")} .pn-multiselect-description{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-multiselect")} .pn-multiselect-description[role=alert]{color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect-option{position:relative;margin:0;padding:0}${index.transformTag("pn-multiselect")} .pn-multiselect-option .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input{cursor:pointer;position:absolute;opacity:0;left:0;top:0;height:100%;width:100%;margin:0;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled{pointer-events:none}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#a70707;background-color:#fdefee;border-color:#a70707}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#005d92;background-color:#e0f8ff;border-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}${index.transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}${index.transformTag("pn-multiselect")} .pn-multiselect-option-content{position:relative;overflow:hidden;z-index:-1;display:flex;align-items:center;padding:0.75em 1em;gap:0.5em;background-color:#ffffff;transition-property: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-multiselect")} .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}${index.transformTag("pn-multiselect")} .pn-multiselect-option-helper{color:#5e554a;margin:0}${index.transformTag("pn-multiselect")} .pn-multiselect-option-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-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-multiselect")} .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}${index.transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${index.transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}`;
 
 const PnMultiselect = class extends index.Mixin(index$1.animateHeightFactory) {
     constructor(hostRef) {
@@ -160,6 +160,8 @@ const PnMultiselect = class extends index.Mixin(index$1.animateHeightFactory) {
     selectName;
     /** Display an icon to the left of the select input */
     icon;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
+    compact = false;
     /** Manually set the language, not needed if you have the pnTopbar available */
     language = null;
     /**
@@ -367,7 +369,8 @@ const PnMultiselect = class extends index.Mixin(index$1.animateHeightFactory) {
     optionsCheckedLabels() {
         return this.optionsChecked()
             ?.map(({ label }) => label)
-            ?.join(', ');
+            ?.join(', ')
+            ?.trim();
     }
     optionsSearch() {
         const list = this.options?.reduce((sum, item) => {
@@ -653,17 +656,32 @@ const PnMultiselect = class extends index.Mixin(index$1.animateHeightFactory) {
     renderChips() {
         return (index.h("ul", { id: this.idChips, class: "pn-multiselect-chips", "aria-label": this.translate('SELECTED_OPTIONS'), ref: el => (this.elChips = el) }, this.optionsCheckedPreview()?.map(({ label, value }, index$1) => (index.h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index$1 + 1, key: `${label}-${value}` }, index.h("span", { class: "pn-multiselect-chip-label" }, label), index.h("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index$1 }) }, index.h("pn-icon", { icon: close.close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (index.h("li", { class: "pn-multiselect-chip", "data-count": true }, index.h("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
     }
+    renderLabel(compactLabel = false) {
+        if (!this.label)
+            return null;
+        const Tag = compactLabel ? 'div' : 'legend';
+        const id = compactLabel ? null : this.idLegend;
+        const attrs = compactLabel ? { inert: true } : { onClick: () => this.handleLabel() };
+        return (index.h(Tag, { id: id, class: { 'pn-multiselect-label': true, 'pn-multiselect-sr-only': this.compact && !compactLabel }, "data-compact": this.compact, ...attrs }, index.h("span", null, this.label), !!this.optionsChecked()?.length && (index.h("span", null, this.optionsCheckedTotal(), "/", this.optionsTotal()))));
+    }
     render() {
-        return (index.h(index.Host, { key: '9b25af2f368c47c8820ae000ed1389215cd952a2' }, index.h("fieldset", { key: '3aa70d5b8d62ee84616afe853c2ea746c991fc67', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (index.h("legend", { key: '2e1bd83a8c6cb64bc9da287c70abcffccb334cbb', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, index.h("span", { key: '1d3073c63643320b9b9fde625832d89e41edaa35' }, this.label), !!this.optionsChecked()?.length && (index.h("span", { key: '316c9d892808df273840dcac243971e5fb5d2b62' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), index.h("div", { key: 'f79e79c0406ca659a6380902a6c8296df89bde97', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, index.h("div", { key: '73bc49a104f3846a41fa65f4e6e2623dba0806c2', class: "pn-multiselect-input" }, !!this.icon && index.h("pn-icon", { key: 'a68a06de67861057dd6d853ab53b7a34d76ca7ee', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), index.h("input", { key: '5df7e2ededf6e196ae47053ce650628391bc282d', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.hasError() && (index.h("pn-icon", { key: '5204a96efe2e88fee5d762a89b0623b1f8a163ce', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle.alert_exclamation_circle, color: "warning" })), index.h("button", { key: '78a487b3afc8c91e588d7922f3a2b490e9173d2f', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, index.h("pn-icon", { key: '061e6c886b21d559c439d2e689cfc02b328d87c9', class: "pn-multiselect-icon", icon: chevron_down.chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (index.h("p", { key: 'a1c3cdabb02dfc2403dbe55cc4ce2fb38f71578c', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, index.h("span", { key: '3f9428b50a5d440866462e52181e13aa3b894e6a' }, this.error || this.helpertext))), this.search && this.renderChips(), index.h("slot", { key: '74dc717f4f662fbc53b0e73f0690a10a13feeb22' }), this.search && (index.h("p", { key: '85126ac7f1b59b4f2fd988bff08b5b2bcb561cbb', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && index.h("span", { key: '45615fbfb30b133134d06c6fbee20a75a1dd61bd' }, this.srMessage))))));
+        return (index.h(index.Host, { key: '55af777ec6dd7165b4d16bdad6ec784fe81b8f20' }, index.h("fieldset", { key: '41a5e9a45b3460a96676d606c458a062efe6ab80', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), index.h("div", { key: 'fb6874e8d17a70ec0e1e21bf3474575b01c3e669', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, index.h("div", { key: 'ab6aa995337f5a80e2026d98fe69399571249c24', class: "pn-multiselect-input" }, !!this.icon && index.h("pn-icon", { key: '0d9495e8864e266a6ababc752781b6e9c75595c3', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), index.h("input", { key: '6b5adbc27ab64b9cdb7f53a99d2f4cd9a2185e47', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (index.h("pn-icon", { key: '36e6f1e307758cdec5f9eda59413b8a0c28af78c', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle.alert_exclamation_circle, color: "warning" })), index.h("button", { key: '6197b7545b8646fecbd5a12e540e3011303f660c', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, index.h("pn-icon", { key: 'f9ddba2705b7782606897f6374f5963833bde76e', class: "pn-multiselect-icon", icon: chevron_down.chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (index.h("p", { key: 'd9fb544f999b9d779362f13090e9653bbd22fd4e', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, index.h("span", { key: 'ed1426909307379ba22c06a6870ad867f5a7cdad' }, this.error || this.helpertext))), this.search && this.renderChips(), index.h("slot", { key: 'd0bc44a9160fa4151e6f74c05fa3102189710454' }), this.search && (index.h("p", { key: '0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && index.h("span", { key: '610fc47f9a032c6e8931745e6b6d0b418eadd5ee' }, this.srMessage))))));
     }
     static get watchers() { return {
-        "open": ["handleOpen"],
-        "search": ["handleSearch"],
-        "searchQuery": ["handleSearchQuery"],
-        "selectId": ["handleSelectId"]
+        "open": [{
+                "handleOpen": 0
+            }],
+        "search": [{
+                "handleSearch": 0
+            }],
+        "searchQuery": [{
+                "handleSearchQuery": 0
+            }],
+        "selectId": [{
+                "handleSelectId": 0
+            }]
     }; }
 };
-PnMultiselect.style = pnMultiselectCss;
+PnMultiselect.style = pnMultiselectCss();
 
 exports.pn_multiselect = PnMultiselect;
-//# sourceMappingURL=pn-multiselect.entry.cjs.js.map