@postnord/pn-marketweb-components 3.5.2 → 3.5.3

package/umd/modules/@postnord/web-components/hydrate/index.mjs

@@ -2327,32 +2327,32 @@ const alert_info_circle = icon$l;
 const icon$k = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
 const alert_question_circle = icon$k;
 
-const icon$j = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z" clip-rule="evenodd"/></svg>';
-const angle_down = icon$j;
+const icon$j = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.293 12.707a1 1 0 0 1 0-1.414l6-6a1 1 0 1 1 1.414 1.414L7.414 11H16a1 1 0 1 1 0 2H7.414l4.293 4.293a1 1 0 0 1-1.414 1.414zM18.99 11H19a1 1 0 1 1 0 2h-.01a1 1 0 1 1 0-2" clip-rule="evenodd"/></svg>';
+const arrow_left = icon$j;
 
-const icon$i = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z" clip-rule="evenodd"/></svg>';
-const angle_left = icon$i;
+const icon$i = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H8a1 1 0 1 1 0-2h8.586l-4.293-4.293a1 1 0 0 1 1.414-1.414zM5.01 13H5a1 1 0 1 1 0-2h.01a1 1 0 1 1 0 2" clip-rule="evenodd"/></svg>';
+const arrow_right = icon$i;
 
-const icon$h = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';
-const angle_right = icon$h;
+const icon$h = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 7.5a4.5 4.5 0 1 1 9 0V16a6 6 0 0 1-12 0v-3a1 1 0 1 1 2 0v3a4 4 0 0 0 8 0V7.5a2.5 2.5 0 0 0-5 0V16a1 1 0 1 0 2 0v-6a1 1 0 1 1 2 0v6a3 3 0 1 1-6 0zM7 9a1 1 0 0 1 1 1v.1a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
+const attachment = icon$h;
 
-const icon$g = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.293 12.707a1 1 0 0 1 0-1.414l6-6a1 1 0 1 1 1.414 1.414L7.414 11H16a1 1 0 1 1 0 2H7.414l4.293 4.293a1 1 0 0 1-1.414 1.414zM18.99 11H19a1 1 0 1 1 0 2h-.01a1 1 0 1 1 0-2" clip-rule="evenodd"/></svg>';
-const arrow_left = icon$g;
+const icon$g = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 3.5a1 1 0 0 1 1 1V5h4v-.5a1 1 0 1 1 2 0V5h2a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2v-.5a1 1 0 0 1 1-1M8 7H6a1 1 0 0 0-1 1v1.5h14V8a1 1 0 0 0-1-1h-2v.5a1 1 0 1 1-2 0V7h-4v.5a1 1 0 0 1-2 0zm11 4.5H5V17a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z" clip-rule="evenodd"/></svg>';
+const calendar = icon$g;
 
-const icon$f = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H8a1 1 0 1 1 0-2h8.586l-4.293-4.293a1 1 0 0 1 1.414-1.414zM5.01 13H5a1 1 0 1 1 0-2h.01a1 1 0 1 1 0 2" clip-rule="evenodd"/></svg>';
-const arrow_right = icon$f;
+const icon$f = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16m5.207 4.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414l2.793 2.793 5.293-5.293a1 1 0 0 1 1.414 0" clip-rule="evenodd"/></svg>';
+const check_circle = icon$f;
 
-const icon$e = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 7.5a4.5 4.5 0 1 1 9 0V16a6 6 0 0 1-12 0v-3a1 1 0 1 1 2 0v3a4 4 0 0 0 8 0V7.5a2.5 2.5 0 0 0-5 0V16a1 1 0 1 0 2 0v-6a1 1 0 1 1 2 0v6a3 3 0 1 1-6 0zM7 9a1 1 0 0 1 1 1v.1a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
-const attachment = icon$e;
+const icon$e = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.207 7.793a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414l4.293 4.293 7.293-7.293a1 1 0 0 1 1.414 0" clip-rule="evenodd"/></svg>';
+const check = icon$e;
 
-const icon$d = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 3.5a1 1 0 0 1 1 1V5h4v-.5a1 1 0 1 1 2 0V5h2a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2v-.5a1 1 0 0 1 1-1M8 7H6a1 1 0 0 0-1 1v1.5h14V8a1 1 0 0 0-1-1h-2v.5a1 1 0 1 1-2 0V7h-4v.5a1 1 0 0 1-2 0zm11 4.5H5V17a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z" clip-rule="evenodd"/></svg>';
-const calendar = icon$d;
+const icon$d = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z" clip-rule="evenodd"/></svg>';
+const chevron_down = icon$d;
 
-const icon$c = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16m5.207 4.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414l2.793 2.793 5.293-5.293a1 1 0 0 1 1.414 0" clip-rule="evenodd"/></svg>';
-const check_circle = icon$c;
+const icon$c = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z" clip-rule="evenodd"/></svg>';
+const chevron_left = icon$c;
 
-const icon$b = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.207 7.793a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414l4.293 4.293 7.293-7.293a1 1 0 0 1 1.414 0" clip-rule="evenodd"/></svg>';
-const check = icon$b;
+const icon$b = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';
+const chevron_right = icon$b;
 
 const icon$a = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';
 const close_small = icon$a;
@@ -2679,7 +2679,7 @@ class PnAccordionRow {
             this.animation.cancel();
     }
     render() {
-        return (hAsync(Host, { key: '9f3142a471217bc0656c4d5641c420262a913c13' }, hAsync("details", { key: 'c742d23b97fe2d489166f18f53b3e5f0d12107d8', class: "pn-accordion-row", open: this.state, ref: (el) => (this.details = el) }, hAsync("summary", { key: 'd061093bf3bb58150d4bbb102caf9da3e9559fb8', id: this.buttonid, class: "pn-accordion-row-summary", onClick: e => this.clickHandler(e), ref: el => (this.summary = el) }, hAsync("div", { key: '921e67cc639e701df60a7bc359d3415ccdec39e3', class: "pn-accordion-row-text", "data-transparent": this.transparent }, this.label ? this.label : '', hAsync("slot", { key: 'e355acdeeb2e62e4056837b26f808d3e5663343e', name: "label" }), hAsync("pn-icon", { key: 'c10681330981f5d019db4d6f7f6cd03d3c67234b', class: "pn-accordion-row-icon", icon: angle_down }))), hAsync("div", { key: 'ddb95ef323966c0c55292dde2b5776e0700bf27a', id: this.contentid, class: "pn-accordion-row-content", ref: (el) => (this.content = el) }, hAsync("slot", { key: 'e0ded60210d472842a8aa5cd87a6374ad7120e58' })))));
+        return (hAsync(Host, { key: '0dcedaab706f95589734c04230abbdbeca16cdf1' }, hAsync("details", { key: '58bead8dce64594af81aae11a42beea75ba0db88', class: "pn-accordion-row", open: this.state, ref: (el) => (this.details = el) }, hAsync("summary", { key: '7447539647210cb5b132ce16d7019e310c8ca1f4', id: this.buttonid, class: "pn-accordion-row-summary", onClick: e => this.clickHandler(e), ref: el => (this.summary = el) }, hAsync("div", { key: '83c87346e27703cab3203920848691fc8d3d007f', class: "pn-accordion-row-text", "data-transparent": this.transparent }, this.label ? this.label : '', hAsync("slot", { key: '8904be6cbec811925b0fa935ed10c4b7bc12fb5d', name: "label" }), hAsync("pn-icon", { key: 'cf71062d11b3a20c106dec2bec2aab1dc4bf0c7f', class: "pn-accordion-row-icon", icon: chevron_down }))), hAsync("div", { key: 'ae73f9fa6e7121352979ec2dad9a4620cff58a91', id: this.contentid, class: "pn-accordion-row-content", ref: (el) => (this.content = el) }, hAsync("slot", { key: '4d7d894af656c1b7e95028832611530d04f3d439' })))));
     }
     static get style() { return PnAccordionRowStyle0; }
     static get cmpMeta() { return {
@@ -2817,6 +2817,20 @@ class PnActionMenu {
     translate(prop) {
         return translations$f[prop][this.language || en$1];
     }
+    globalEvents = (event) => {
+        const target = event.target;
+        const isWithinActionMenu = target?.closest(this.hostElement.localName);
+        if (!isWithinActionMenu)
+            this.closeEachSubMenu(true);
+    };
+    addGlobalEventListeners() {
+        const root = this.hostElement.getRootNode();
+        root.addEventListener('click', this.globalEvents);
+    }
+    removeGlobalEventListeners() {
+        const root = this.hostElement.getRootNode();
+        root.removeEventListener('click', this.globalEvents);
+    }
     /** Open/close the action menu. */
     toggleActionMenu(state) {
         this.open = state ?? !this.open;
@@ -2886,11 +2900,24 @@ class PnActionMenu {
     }
     setOffset() {
         const data = this.getRect(this.hostElement);
-        const fullWidth = data.left - getMenuWidth() + this.menuWidth;
-        const isWide = fullWidth > innerWidth;
-        const offset = isWide ? fullWidth - innerWidth + 16 : 0;
+        const sideMenuWidth = getMenuWidth();
+        // Calculate potential menu position
+        const menuLeft = data.left;
+        const menuRight = data.left + this.menuWidth;
+        // Define boundaries
+        const leftBoundary = sideMenuWidth + 16; // Left menu + buffer
+        const rightBoundary = innerWidth - 16; // Right edge - buffer
+        let offset = 0;
+        // Check if menu would overlap left menu or go off left edge
+        if (menuLeft < leftBoundary) {
+            offset = leftBoundary - menuLeft;
+        }
+        // Check if menu would go off right edge
+        else if (menuRight > rightBoundary) {
+            offset = rightBoundary - menuRight;
+        }
         if (this.menuContainer)
-            this.menuContainer.style.setProperty('--pn-action-menu-offset', `-${offset}px`);
+            this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);
     }
     getListId(option) {
         return `pn-menu-${option.value}-list`;
@@ -2901,7 +2928,7 @@ class PnActionMenu {
     getTriggerIcon() {
         if (this.button?.icon)
             return;
-        return angle_down;
+        return chevron_down;
     }
     /** Set the path of open sub menus. */
     getSubMenuPath(options, value, path = []) {
@@ -2917,8 +2944,9 @@ class PnActionMenu {
         }
         return null;
     }
-    closeEachSubMenu() {
-        this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
+    closeEachSubMenu(preventFocus = false) {
+        if (!preventFocus)
+            this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
         const interval = setInterval(() => {
             if (this.smallMenu || this.activeSubmenu.length === 0) {
                 clearInterval(interval);
@@ -2946,6 +2974,7 @@ class PnActionMenu {
             this.closeGrid();
     }
     openGrid() {
+        this.addGlobalEventListeners();
         const list = this.getRect(this.menuList);
         const { clientHeight } = this.menuContainer;
         const height = this.isClosing ? clientHeight : 0;
@@ -2954,6 +2983,7 @@ class PnActionMenu {
         this.animateGrid(true, `${height}px`, `${list.height}px`);
     }
     closeGrid() {
+        this.removeGlobalEventListeners();
         const list = this.getRect(this.menuList);
         const { clientHeight } = this.menuContainer;
         const height = this.isExpanding ? clientHeight : list.height;
@@ -3044,7 +3074,7 @@ class PnActionMenu {
         return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);
     }
     getOptionTrailing(option) {
-        const useButtonIcon = option.options?.length && angle_right;
+        const useButtonIcon = option.options?.length && chevron_right;
         const useTrailingIcon = option.trailingIcon;
         const useLinkIcon = option.target === '_blank' && open_in_new;
         /** If the user has defined a trialing icon, use it first. */
@@ -3086,7 +3116,7 @@ class PnActionMenu {
                 disabled: option.disabled,
             };
         const Tag = isLink ? 'a' : 'button';
-        return isGroup ? (hAsync("div", { class: "pn-action-menu-group-label" }, hAsync("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && hAsync("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (hAsync("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, hAsync(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && hAsync("pn-icon", { icon: isCloseButton ? angle_left : option.icon, color: "blue700" }), hAsync("div", { class: "pn-action-menu-item-text" }, hAsync("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && hAsync("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
+        return isGroup ? (hAsync("div", { class: "pn-action-menu-group-label" }, hAsync("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && hAsync("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (hAsync("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, hAsync(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && hAsync("pn-icon", { icon: isCloseButton ? chevron_left : option.icon, color: "blue700" }), hAsync("div", { class: "pn-action-menu-item-text" }, hAsync("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && hAsync("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
     }
     renderSub(option) {
         return (hAsync("menu", { id: this.getListId(option), "aria-labelledby": this.getButtonId(option), class: "pn-action-menu-sub", "data-open": this.isSubmenuActive(option.value)?.toString(), "data-current": this.isCurrentSubMenu(option.value) }, this.smallMenu && (hAsync("li", { class: "pn-action-menu-item" }, this.renderButton({
@@ -3108,7 +3138,7 @@ class PnActionMenu {
         return (hAsync("div", { id: this.menuListId, class: "pn-action-menu-container", role: "region", "aria-labelledby": this.menuButtonId, "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-upwards": this.upwards, "data-small": this.smallMenu, style: { height: '0px' }, ref: el => (this.menuContainer = el) }, hAsync("menu", { class: "pn-action-menu-list", ref: el => (this.menuList = el), "data-current": this.isMenuActive() }, this.options?.map(option => this.renderMenuItem(option)))));
     }
     render() {
-        return (hAsync(Host, { key: '5a1638b9b0f880ebd9f3ebe2571df19c6b852baf' }, hAsync("div", { key: '87bf62a943099ce0a556ade3ce3eb11eedb003b2', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, hAsync("pn-button", { key: 'a3024016a2a5962d9eefc3c4d617f946a3575c23', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
+        return (hAsync(Host, { key: '474e0e58bfa5f3105b98e3bee9d2d0b39f450dac' }, hAsync("div", { key: '262f0895ad57b5edeffa360530cda0a7144cfe33', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, hAsync("pn-button", { key: 'b77ec7bd057e59c795eea8a16db6cba68c5c527c', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
     }
     static get watchers() { return {
         "options": ["handleOptions"],
@@ -3524,7 +3554,7 @@ class PnCard {
     }
     render() {
         const TitleTag = this.getHeadingTag();
-        return (hAsync(Host, { key: '4c1a897e5b6fd69663aa076de44231cbde9b85b1' }, hAsync("article", { key: 'a93fb7255cd352eed29814f010f0111eebcf0d46', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, hAsync("div", { key: '1861f3a85267df00d8d974ed2f014fb097288d4c', class: "pn-card-image" }, hAsync("picture", { key: 'd0acfe747efd63762ddb0dd7cbe67baadb7ad4e1', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, hAsync("slot", { key: 'e8360ba8b54d5ad376b549189102eb6412fb6a3e', name: "image" }))), hAsync("div", { key: '1b613813ac38d257cd2c64cb3e7f053950b8d58a', class: "pn-card-content" }, hAsync("header", { key: '4048f0f93b62c71f3caa553ba0f217064f1f8b80', class: "pn-card-header" }, hAsync("div", { key: '071f1f13e492909e27aa4fb860c8ba3a9e88efc4', class: "pn-card-tags" }, hAsync("slot", { key: 'bb4ad165fc8443b55784fcad35d8733f89e34b55', name: "tags" })), !!this.overline && hAsync("p", { key: 'c75cfc0045739d7dfa4c2c6aef79dd57d64ccbc1', class: "pn-card-label-overline" }, this.overline), !!this.label && (hAsync(TitleTag, { key: 'e65289e4307c08f8c92e9b83b3981cd8413a63d4', id: this.getTitleId(), class: "pn-card-label" }, this.label)), hAsync("slot", { key: 'd901c192ed2e029f9b2a0a7df421d6c008f80ea6', name: "header" })), hAsync("section", { key: 'da99e7c8a01924e670a9cbee424ac899870c1a8f', class: "pn-card-section" }, !!this.text && hAsync("p", { key: 'c27938d4704111825dca3ab621133bdd99e401f0', class: "pn-card-section-paragraph" }, this.text), hAsync("slot", { key: '6dfd91ac2b404b23522812c22247d01c5da6a557' })), hAsync("nav", { key: '10252f1454848d360a727c2a85b9ab5461d73b0b', class: "pn-card-navigation" }, this.showHref() && (hAsync("a", { key: '82640b1972e9f740694a5c135857e8b3c87e7a2b', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, hAsync("pn-icon", { key: '50d3021b2f7f2722426f5299fea249b596e8f28b', color: "blue700", icon: this.getIcon() }))), hAsync("slot", { key: 'be97f6fc934ccd5f55fb577028c52757ada6c128', name: "navigation" }))))));
+        return (hAsync(Host, { key: '821cee3f202421ab0e60bbba012b8ad8dbb05793' }, hAsync("article", { key: '41ff1c612af9e2be99b446b549088e5892771fb2', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, hAsync("div", { key: '780140151f04b678c9c74bb722a9b45447f66645', class: "pn-card-image" }, hAsync("picture", { key: '94f932a7b6bf22e6f13789c1bae776cbcf99291d', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, hAsync("slot", { key: 'ccb5f90249e4f5cd73924a15fcd86ccb1ce08f87', name: "image" }))), hAsync("div", { key: '2cc59cc4c75444be12802a3bc723f59c225b4336', class: "pn-card-content" }, hAsync("header", { key: '4f5824bad2bff67c416c177138703ec6b2e9baeb', class: "pn-card-header" }, hAsync("div", { key: 'cef69f9a720f8cd69df4f5dbc34973b3ebc2750a', class: "pn-card-tags" }, hAsync("slot", { key: 'c6b93db08c9b0bcd268b6d9faaf9f4a8d9cd86c6', name: "tags" })), !!this.overline && hAsync("p", { key: 'ca27f600423daf37e77cfefec9e8ab9710998d98', class: "pn-card-label-overline" }, this.overline), !!this.label && (hAsync(TitleTag, { key: 'c6c4803f194c727c9bc3f0bf6592a4ea77e99a4a', id: this.getTitleId(), class: "pn-card-label" }, this.label)), hAsync("slot", { key: 'cb5757f5575590542047bd07282481601c5f399f', name: "header" })), hAsync("section", { key: '19c80b379dff1a6c3f734498b6b32a0a486d0183', class: "pn-card-section" }, !!this.text && hAsync("p", { key: 'b807218d4d0554ea65462caf013e0208dcfd340d', class: "pn-card-section-paragraph" }, this.text), hAsync("slot", { key: '15638a8de80d16b8779415aa2d23cdf0a56e08c9' })), hAsync("nav", { key: 'ff50a2c165936be2feff4cb0f1f821c60e6da204', class: "pn-card-navigation" }, this.showHref() && (hAsync("a", { key: '7994139742f0a623e0e9ce17a8cd3f1088f9753d', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, hAsync("pn-icon", { key: 'bfac7739393db47a446b987a631143601ca33ceb', color: "blue700", icon: this.getIcon() }))), hAsync("slot", { key: '3fab25b3c69c45c6b09536a6454f20a0735f80e2', name: "navigation" }))))));
     }
     static get watchers() { return {
         "cardId": ["watchCardId"]
@@ -3593,7 +3623,7 @@ class PnCheckbox {
         this.handleId();
     }
     render() {
-        return (hAsync(Host, { key: 'f0639bf5c45347c39ef933b7f4967be10e671e46' }, hAsync("input", { key: '560e64e32b38b40a847b3b7283255dc9e9f36f72', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), hAsync("div", { key: 'ac86d6c2bd460ce3b29fe8862b9a7b64ca23e2dd', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, hAsync("div", { key: '6df97a9582503dc04946f3e590dff276bf87d885', class: "pn-checkbox-outer" }, hAsync("svg", { key: '37d8212ac1b0088ebcbe28cd02d5cc6e59352e63', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, hAsync("polyline", { key: 'b19a548634e5fe186291a0d24c4c3f81efe8eab1', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), hAsync("polyline", { key: '040639fc42060dff6db8fab45dc713ccf81631bf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (hAsync("p", { key: '3006b0ba0826003608453423259914a3b9622168', class: "pn-checkbox-content" }, !!this.label && (hAsync("label", { key: '2de986fd9df0d639e5b398c24b4aa95e6e416c5d', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (hAsync("span", { key: '13c417fef46e456a1e036a22c9655da2fa19de24', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && hAsync("pn-icon", { key: '204b119d1bf7da4ce2fb90d1f53114b6a5ada7dd', icon: this.icon, color: "gray900" }))));
+        return (hAsync(Host, { key: 'c3bcdee583919c5f6f11f2e21cb5362f96ac1633' }, hAsync("input", { key: '10e34d60ff748c2d99c9e3740c69a17016ca3223', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), hAsync("div", { key: '15e4f62557b23b99ab344f32dcfa2103c395b9ed', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, hAsync("div", { key: '98e4eb05092b3fe4d9e30b748e89d3bd104925ff', class: "pn-checkbox-outer" }, hAsync("svg", { key: 'a39edd1e675ba5b131059f1bd8b0d7f6fea9370b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, hAsync("polyline", { key: 'a355d7729c12497f133cde364c7ff9601f9940db', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), hAsync("polyline", { key: '18c274c70036a5a3aae8b333c513d053061945cf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (hAsync("p", { key: '1499f1e5d14dc15cc5691429fd8565c1e16b4fda', class: "pn-checkbox-content" }, !!this.label && (hAsync("label", { key: '87ca925b4af005c6cbec279a3209fcd5d92a4ae8', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (hAsync("span", { key: '6808421c4151d5ad4711477d165e0d8a9bdaceae', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && hAsync("pn-icon", { key: '0f182a49401f04adf6944a82490d838bd114f38b', icon: this.icon, color: "gray900" }))));
     }
     static get watchers() { return {
         "checkboxid": ["handleId"]
@@ -3649,7 +3679,7 @@ class PnChoiceChip {
     }
     get hostElement() { return getElement(this); }
     render() {
-        return (hAsync(Host, { key: '5ff90532fb75531aa8fcb23fd4dd0ae0dfc7d33a' }, hAsync("div", { key: '500cb322689763c229ac303d1d62643a620c74ed', class: "pn-choice-chip" }, hAsync("input", { key: '88feb0c54e20951c8c6e9d761323e1806e4583bd', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), hAsync("div", { key: 'd1ed91ded7233f9229bdbde4f9c40b5c86a67fba', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, hAsync("div", { key: '29f8378c640a6553416507e2ca0454bca47c557c', class: "pn-choice-chip-icon" }, hAsync("pn-icon", { key: 'f70f7191ade89323265b312cc881141edffc4296', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && hAsync("pn-icon", { key: '87d85e74effe1b65d949b0735a50f5b4a56acf25', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), hAsync("label", { key: '772f0726fcaada44af2c10ab922bb3eb151886b7', class: "pn-choice-chip-label", htmlFor: this.choiceid }, hAsync("span", { key: '7c5bf78b2811a70308663bfb1be95420ce7ca30d' }, this.label), hAsync("slot", { key: '6fd6ee5beb63f38285b273f0a73d41e5895cc8e6' }))))));
+        return (hAsync(Host, { key: '163abbbcca43588ea04866d4826bd7b30b88324d' }, hAsync("div", { key: '2af33c1a26f70b59d22db00a943c09b43eaf3523', class: "pn-choice-chip" }, hAsync("input", { key: '23dbbfe5102e681efbf6d08c30e64fb6f8761300', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), hAsync("div", { key: 'c57f848d0458880a41f030691e9fa6bef497bf18', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, hAsync("div", { key: '2978e8c81a0f4057a70e1cb29d94768040ecfd95', class: "pn-choice-chip-icon" }, hAsync("pn-icon", { key: '62101eaa67f7351df8657b4df56e145d54ca4468', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && hAsync("pn-icon", { key: '06c50dad1d7e2b78a36d4c923878633d489b0d55', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), hAsync("label", { key: '502b02b9c9e30d56a39aa425af8b6c9bf755b8c9', class: "pn-choice-chip-label", htmlFor: this.choiceid }, hAsync("span", { key: '79f7c5b812fbd06c54af2d14f08d2e0a7ae1f520' }, this.label), hAsync("slot", { key: 'f90c14659d035a662fca81e4045e7523b60f8a46' }))))));
     }
     static get style() { return PnChoiceChipStyle0; }
     static get cmpMeta() { return {
@@ -3880,7 +3910,7 @@ class PnCounter {
             this.counterElement.style.setProperty('--pn-counter-ch', '0ch');
     }
     render() {
-        return (hAsync(Host, { key: '2fe59aa7c06e3005cd3f9c8b633bf3ee3c85833b' }, hAsync("div", { key: '206308ce9ff21a303013164a3ec4015074d494b2', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, hAsync("label", { key: '6843e23ed0c46cf33aaa6b83c9c7304775dba549', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, hAsync("span", { key: 'cbc609092923ef8806d7b5e77beb26021b490d44' }, this.label)), hAsync("div", { key: 'df51b364dc11c020d390f3bed823caf7063a9c94', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, hAsync("pn-button", { key: '52413b869322b9398eddfb81713609205594d59f', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), hAsync("input", { key: '8c9dd73dba29a17df0515758a48be4f4f8798bbf', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), hAsync("pn-button", { key: 'c10fc2e4f25708ed81dc95b8ea07c0c07803df1f', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (hAsync("p", { key: 'e01ab71ae17a042681b5c3a87766bac914c6be10', id: this.idText, class: "pn-counter-helpertext" }, hAsync("span", { key: 'd51a1a0e851e7a6afe79a3c384167324c906939a' }, this.getTextMessage()))), hAsync("p", { key: 'c89af26fd950c7166cec80b08feb1651feb54bba', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
+        return (hAsync(Host, { key: 'ae9451959e2ebc720b69af2942deaa5d94e36565' }, hAsync("div", { key: 'f631dd7d8c7acbb4a459b46da53ea3445ae96480', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, hAsync("label", { key: '2538568f65666aedc3a0f9e2f3f681b4b9647cd6', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, hAsync("span", { key: '73abf4ec6f185201f95799910a70518f61f85577' }, this.label)), hAsync("div", { key: '8e99e77f67aae105b90052ed74ba6c3a438e22ca', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, hAsync("pn-button", { key: '8d6f5c4af2a524bb43a3023c130b2a6e1814c53d', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), hAsync("input", { key: '93ab63799f90cdecdbf3694ca56dfe92a5fe9e80', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), hAsync("pn-button", { key: 'a39f90c5ace631d8973a700f72d57a2490cad342', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (hAsync("p", { key: '0ed6cc20cb56637faa7d70c6fe903a5e412fff0e', id: this.idText, class: "pn-counter-helpertext" }, hAsync("span", { key: 'def00a454a70d4ebc952cdfbfdb5b11eece74452' }, this.getTextMessage()))), hAsync("p", { key: 'eef2cf6b2f193779d616e09c32a9fc0ece4c5104', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get watchers() { return {
         "value": ["watchValue"],
@@ -4303,7 +4333,7 @@ function getCode(code) {
     };
 }
 
-const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  width: 100%;\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left: 0;\n  border-right: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
+const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left-width: 0;\n  border-right-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
 var PnDatePickerStyle0 = pnDatePickerCss;
 
 /**
@@ -4470,11 +4500,27 @@ class PnDatePicker {
             const fitDownwards = spaceDownwards > scrollHeight;
             const openTop = (this.openUp && (fitUpwards || spaceUpwards > spaceDownwards)) || (!fitDownwards && fitUpwards);
             this.openUp = openTop;
-            // Calc y-axis
+            // Calc horizontal positioning - center calendar relative to host element
             const rectCal = this.getRect(this.calendarElement);
-            const widthMinusRight = innerWidth - rectCal.right;
-            const offset = 0 > widthMinusRight ? widthMinusRight - 8 : 0;
-            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(offset)}px`);
+            const menuWidth = getMenuWidth();
+            // Calculate center position: host center minus half of calendar width
+            const hostCenterX = rectHost.x + rectHost.width / 2;
+            const calendarHalfWidth = rectCal.width / 2;
+            const idealCenterOffset = hostCenterX - calendarHalfWidth - rectCal.x;
+            // Check boundaries, accounting for menu width on the left
+            const calendarLeftEdge = rectCal.x + idealCenterOffset;
+            const calendarRightEdge = calendarLeftEdge + rectCal.width;
+            const leftBoundary = menuWidth + 16; // Menu width + buffer
+            let finalOffset = idealCenterOffset;
+            // Adjust if calendar would go beyond left edge of viewport or over the menu
+            if (calendarLeftEdge < leftBoundary) {
+                finalOffset = leftBoundary - rectCal.x;
+            }
+            // Adjust if calendar would go beyond right edge of viewport
+            else if (calendarRightEdge > innerWidth - 16) {
+                finalOffset = innerWidth - 16 - rectCal.width - rectCal.x;
+            }
+            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(finalOffset)}px`);
         });
     }
     handleMessage() {
@@ -4967,7 +5013,7 @@ class PnDatePicker {
         return (hAsync("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, hAsync("label", { class: "pn-date-picker-label", htmlFor: id }, hAsync("span", null, label)), hAsync("div", { class: "pn-date-picker-field" }, hAsync("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), onInput: e => this.inputHandler(e, to), "data-active": editing }), showButton && (hAsync("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (hAsync(Host, { key: '6122e6224b4aa8570a714522dc323088074f5185' }, hAsync("div", { key: 'd7d3c86378c680d3ddd14d9f3cb073f4bb42e2cf', class: "pn-date-picker" }, this.renderInput(), this.range && (hAsync("div", { key: '3f02b31a0e03aef31b84777d6047d1b328ff633d', class: "pn-date-picker-range-icon test" }, hAsync("pn-icon", { key: 'ad328bd870726dea04b2496d2059a67de218ceac', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), hAsync("div", { key: '71c8518c6500591a4c0d7dc72681d9bcad264641', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, hAsync("div", { key: '277f45e3372d096521889fa4bca4c1971346f0d3', class: "pn-date-picker-wrapper" }, hAsync("nav", { key: '06336288e1d9a65ba4aa796328b09003cb79271d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, hAsync("pn-button", { key: '6361907855287330a3e9c537ce02bd948baccaa4', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), hAsync("pn-button", { key: '21ae6b846df3bd12b314cb6b40f6d60dc8a0cc02', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, hAsync("span", { key: '9f555bfea7f07abb32d8e96e6d84b547b4946899', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), hAsync("span", { key: '0a434038cb6ceb7fb52e89161408da00c8f3e0e3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), hAsync("h2", { key: 'c63bfdcb83caf9fe9aec34416060d4ffe6ae6b08', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), hAsync("pn-button", { key: '502e44a09ca6194365542c1223e3e994e2fbe9d0', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, hAsync("span", { key: 'e0e9bbe7234ae0ce544fc3b89c94c798f3a60123' }, this.dateViewYear)), hAsync("pn-button", { key: 'f93f7301ab9b61cd386dcdb19df482a7b1f4a15d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), hAsync("aside", { key: '3473b9b53b3d0007828a367f05dcbb6fb3959e7e', class: "pn-date-picker-chips" }, hAsync("slot", { key: '94e47d8d7feb1caa5db4fd24d97500258e1c4f98', name: "chips" })), hAsync("nav", { key: '2245cab78f67e9ecf3932bda19075b13cfa27d61', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, hAsync("pn-button", { key: 'e8163e75c8197331f7ab77ed6a2fb94fde445131', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, hAsync("span", { key: '3a9028867b88cb831ef4cfc35039a10299c8fdeb' }, this.translate('GO_CALENDAR')))))), hAsync("p", { key: 'dd4412fdfff7ef9c1c254a09c38831908c10c010', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, hAsync("span", { key: 'd61ee102ecb131c481e220c073fe268b9228ebbb' }, this.helpertext), hAsync("slot", { key: '3d54b17455d0e7a2a72564856978eee3e3f8ef45', name: "helpertext" })), hAsync("p", { key: 'f42fd4bdff5c0ad22c3de99725bf1dbedd5788c8', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, hAsync("span", { key: '69d7fd68b1157960d095ace9a423a1a3a08702fc' }, this.error), hAsync("slot", { key: 'd2676dccff19ee3a22fe62b077f44c509500f267', name: "error" }))));
+        return (hAsync(Host, { key: '683125ae4363ce235cc3aec68a1d4003593425d1' }, hAsync("div", { key: 'cf4cf8baae7d387533013fe59722bb4401431dbd', class: "pn-date-picker" }, this.renderInput(), this.range && (hAsync("div", { key: 'fae36c22bd631fde3313c2240cd33e6f871ff405', class: "pn-date-picker-range-icon test" }, hAsync("pn-icon", { key: 'd0f18d8a7ff81248471b27975eb24242fc8b5157', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), hAsync("div", { key: '6f4f250edc36dd15d4a5a330bf5d8c5125289a09', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, hAsync("div", { key: 'a8821cca04a6301bd148c3dbfee28bf86c94e543', class: "pn-date-picker-wrapper" }, hAsync("nav", { key: '38f404ea6187d754ac44160bcda2291e0739610d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, hAsync("pn-button", { key: '923845f5df9f35ff74ffeb2ed63c903696a4399d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), hAsync("pn-button", { key: '32e6f337bc1b82adcf11b2668974c0c4b9f2c730', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, hAsync("span", { key: 'e1bcc4e89726d5c25e94d87b283b543987674f2d', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), hAsync("span", { key: 'b93becc6c92ef4693f158e08276aa21e496d10c3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), hAsync("h2", { key: '1aa3fc4c553858c947205610a4958fc153f63527', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), hAsync("pn-button", { key: '16fdeb8efb9744d9fb5db3b41eea172ad9b49c32', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, hAsync("span", { key: '491246d413dd42fe794d155720f847d9339bf81f' }, this.dateViewYear)), hAsync("pn-button", { key: '8a2acfd530f049d13972125dd6e6fc8120020b18', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), hAsync("aside", { key: '7905780579fdbea9ff9bc03c05208c6714a1b690', class: "pn-date-picker-chips" }, hAsync("slot", { key: '3aacde33dde852b97b75327c378248395bf74b03', name: "chips" })), hAsync("nav", { key: '37bf1f4447f480986bf905375149d40d42318374', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, hAsync("pn-button", { key: '0ba2954cf4f994e5befcf0546e45333b1a0030c2', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, hAsync("span", { key: 'f6af5dbb4dff963d6b07147f1573f22797abd4e4' }, this.translate('GO_CALENDAR')))))), hAsync("p", { key: '4ceaeea86eeeb3e6cafa2b09343ee1b3ff7fada8', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, hAsync("span", { key: 'b40445ded778af04b0313e84645226fe59e0bc9a' }, this.helpertext), hAsync("slot", { key: '0cf4aee251e8aaf33618c9f318451069b6bfe22f', name: "helpertext" })), hAsync("p", { key: 'dbcc74e7fdea8f7b1053226448cbc419ebaf9498', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, hAsync("span", { key: '9cc3055b8389abadd3f7d2303cc755b71cc238b3' }, this.error), hAsync("slot", { key: '4c1eef7f48dba08b33f05b836f55abcc39b5abe3', name: "error" }))));
     }
     static get watchers() { return {
         "minDate": ["watchMin"],
@@ -5093,7 +5139,7 @@ class PnFieldset {
         return alert_exclamation_circle;
     }
     render() {
-        return (hAsync(Host, { key: 'e22e77e7d49f4dd10607f1fc2cb500d3b63ee4f2' }, hAsync("fieldset", { key: 'c6cb9c43620b223e69c5814446e26678c83d0fa3', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, hAsync("legend", { key: 'ec669e86d003bd11db387c0e6e9619b792175c72', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (hAsync("p", { key: '60cf8252ec833d0db9620cab9e57a5dbd2212a5e', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), hAsync("div", { key: '38191db1e9344469e37132c4b90c6197e1ba59d9', class: "pn-fieldset-items" }, hAsync("slot", { key: '8c4048eaea924b96d9fd4d95e64d96ef6b42e058' })), hAsync("div", { key: 'f2b627b8155e94cdeb681f9405601b480a8d7a1f', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, hAsync("pn-icon", { key: 'fcd13f423dcd055821c7d0854b34b4babad17ad8', icon: this.getSymbol() }), hAsync("p", { key: 'e620363bcdca770ebc01d3190a9588f4f0a1f21e', class: "pn-fieldset-message" }, this.error)))));
+        return (hAsync(Host, { key: 'f02790151992e43958982c27b08b91a2f625dc69' }, hAsync("fieldset", { key: '72f7ce4fa8c06a0d7a5cd628578e99df4af6feaa', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, hAsync("legend", { key: 'd1e8927af562fac146d0d3d6bb8999cfed227251', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (hAsync("p", { key: '565e38f11324a2999649a1507bdca869963d40fc', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), hAsync("div", { key: '41f24d04a919cc469265a909f4038a313450e5c1', class: "pn-fieldset-items" }, hAsync("slot", { key: 'a69ed2d87fa287f72217608a394da2e28d16b012' })), hAsync("div", { key: 'a35cbee15cb692542331fe879f14ffca6bbd5954', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, hAsync("pn-icon", { key: 'f2391c0f07ccd87f676fd3105f405826fe7f60c4', icon: this.getSymbol() }), hAsync("p", { key: '44e30e61d9455c6fdf415658d760d86b6bba3af7', class: "pn-fieldset-message" }, this.error)))));
     }
     static get watchers() { return {
         "fieldsetId": ["handleId"]
@@ -5531,7 +5577,7 @@ class PnFileUpload {
         return list.join(',');
     }
     render() {
-        return (hAsync(Host, { key: 'e0e7b9b63230a961dd1c890f91ef94de3c606c82' }, hAsync("div", { key: '596aa72b9ba07f46eb6f77a49dcdb15f3bc8c58b', class: "pn-file-upload-container" }, hAsync("div", { key: 'b839bd6e9a1c3086e9aa02381609dbee7d41fea3', class: "pn-dropzone-container" }, hAsync("input", { key: '0b3fb4a525536397a2ca5e9846d6e3b7cf19d9e7', id: this.idFileUpload, class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, '.pn-dropzone-inner'), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), hAsync("div", { key: '75c8ce662c9a47234a177c511362612921e6c9dc', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, hAsync("pn-icon", { key: '7c70500c47945c71ad723b9138d94e2117649685', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), hAsync("label", { key: 'cc29b7e2122f5630c2807b2347f792b4887b63c2', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (hAsync("p", { key: '45d28882a24add96290ff6a731b8c1cd2c0042e8', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (hAsync("p", { key: 'ab1a30e5402d234d16d8d9af14d38cd76597400d', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (hAsync("span", { key: '7f32da6aa40127d1c886d38e38ff8c46ed361e30' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (hAsync("ul", { key: 'e8f72fce52bfc8e7e2d12aa8e314330990cdc490', class: "files-list" }, this.files.map((file) => (hAsync("li", { class: "files-list-item-container", key: file.uuid }, hAsync("div", { class: this.getFileItemClass(file) }, hAsync("div", { class: "file-list-item-title" }, hAsync("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (hAsync("div", { class: "filename" }, file.filename)) : (hAsync("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), hAsync("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (hAsync("div", { class: "files-list-item-text-error" }, file.errorMessage || file.error.message)) : null))))), hAsync("slot", { key: 'd727bfefbb6d0404f655578d1225b84d678932d0' }))));
+        return (hAsync(Host, { key: '30d80fef46dd4ec1a35ebed92cdd3a5799e8a274' }, hAsync("div", { key: '74424e1a3f093f5b39efff46be24b6e501c5967c', class: "pn-file-upload-container" }, hAsync("div", { key: '8575f8345855437ce1ab132931a6db83daedab63', class: "pn-dropzone-container" }, hAsync("input", { key: 'e1f64e842cc835fc3b999a40125acc06aeca9d49', id: this.idFileUpload, class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, '.pn-dropzone-inner'), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), hAsync("div", { key: '9d1a9a487c267a0b5a0d26469245490bf45113db', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, hAsync("pn-icon", { key: 'c0625796810d3187b54060841dab300d0a3f88d2', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), hAsync("label", { key: '15fa438f664fd63153153b70132f1577be6699ab', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (hAsync("p", { key: '2bdeea0f1cee2cdb77c0f5454a9a51977ceb2100', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (hAsync("p", { key: '2981fc00ff552d608db0f7ca9dee6551463c18cf', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (hAsync("span", { key: 'b9a481a9e54df2d25c104395259aac0c642db78a' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (hAsync("ul", { key: '4c2205aa04c293d9e3757ddb1606596147dd0d46', class: "files-list" }, this.files.map((file) => (hAsync("li", { class: "files-list-item-container", key: file.uuid }, hAsync("div", { class: this.getFileItemClass(file) }, hAsync("div", { class: "file-list-item-title" }, hAsync("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (hAsync("div", { class: "filename" }, file.filename)) : (hAsync("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), hAsync("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (hAsync("div", { class: "files-list-item-text-error" }, file.errorMessage || file.error.message)) : null))))), hAsync("slot", { key: 'c2838dd4eb5d553deab6c198f3f203ddf3612706' }))));
     }
     static get watchers() { return {
         "limit": ["handleLimit"],
@@ -5744,7 +5790,7 @@ class PnFooter {
         }
     }
     render() {
-        return (hAsync(Host, { key: '058cc2657df17548123ef669430f182ca5938fb3' }, hAsync("div", { key: '342b9994cd820a210c6a2340a7f380cd413dd445', class: "pn-footer-row" }, hAsync("p", { key: '32fc92b37a3a30cc713ad95f3e76089fcd5555c2' }, this.getText('questions')), this.renderLink('contact')), hAsync("div", { key: 'dbe0d3496fb83b2a437ea52a6c7785c30fbd7a2c', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), hAsync("div", { key: '41bccfb8d19a869f15622be57e7b03beccc43d90', class: "pn-footer-row" }, hAsync("p", { key: 'b9d133af8a47f8a97925200994a91a174595dea1' }, this.getText('info')), this.renderLink('domain'))));
+        return (hAsync(Host, { key: 'eb51a2359d790d67d2a655fe98b1315e57558cb9' }, hAsync("div", { key: 'e5c3ca2d99668b56a51f4cff35512c87a649fc8e', class: "pn-footer-row" }, hAsync("p", { key: 'e0e95967f2f2a58875109acf64682ab6c34df81d' }, this.getText('questions')), this.renderLink('contact')), hAsync("div", { key: 'c8c8770491f39445575f0770a2d52bb392d7095e', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), hAsync("div", { key: '944d4f4f3a3baa245da8a6ba25837314d385b4f8', class: "pn-footer-row" }, hAsync("p", { key: '3e35f3e9f882c07ba3b074a02c7752dc021d31b3' }, this.getText('info')), this.renderLink('domain'))));
     }
     static get style() { return PnFooterStyle0; }
     static get cmpMeta() { return {
@@ -5823,7 +5869,7 @@ class PnHeader {
         return this.hasBreadcrumb || !!this.goBackHref?.length;
     }
     render() {
-        return (hAsync(Host, { key: '8493b17c1f553672941e7bddf7382e3e80377c71' }, hAsync("header", { key: '2026f9c75dde59abda45a0e376c24907657fe8e7', class: "pn-header" }, hAsync("div", { key: 'dbf01bc588ed38cccb0f951fed4047c9e8192354', class: "pn-header-container" }, hAsync("div", { key: '115a52c44b0e5addf49e4807b21adeb84a531de9', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (hAsync("pn-text-link", { key: 'b2cce5ed46b6dcdb10a72bb806c5a406b6ff5e15', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left, leftIcon: true })), hAsync("slot", { key: '27a3d3c38b30cba6d51c79a2c0bd18c6afa13a4c', name: "breadcrumb" })), hAsync("div", { key: '8134ae8b844e9db548cb3db6bf995479c404fff1', class: "pn-header-content" }, this.heading && hAsync("h1", { key: '3bf46740c66ca137adbc50fe6cdde178e82bfdbc' }, this.heading), hAsync("slot", { key: '94ee53b3dee5a388ef84ae91c54a5b96c14a2661' })), hAsync("div", { key: 'd44728888d295fd84285b28102b348da90ba5d80', class: "pn-header-buttons", hidden: !this.hasButtons }, hAsync("slot", { key: '7af9da3f81bedb69639f7f723c24d93caebaba24', name: "buttons" })), hAsync("slot", { key: '6c55a22b94293e59c8fdb33906c2d4612d067cc4', name: "menu" })))));
+        return (hAsync(Host, { key: '0c5653c92c6502f2f3ee2db0595be669a5588dd7' }, hAsync("header", { key: 'fdc4a48ee31a83e86cbba171677d09d5845c6e0f', class: "pn-header" }, hAsync("div", { key: 'dca702aad4ca3c0b658bf16ecd2621094db8e893', class: "pn-header-container" }, hAsync("div", { key: '6da162eb32c0a76e9cd631559d522c82b8e682b9', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (hAsync("pn-text-link", { key: '02e7658941132a034bd058b0e3e716f32cba7f98', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left, leftIcon: true })), hAsync("slot", { key: '1f358d45875bc7e7382e34eb00d845f34c3ae33f', name: "breadcrumb" })), hAsync("div", { key: '402dcd759dc7e200899a61ac5f198105e28c8202', class: "pn-header-content" }, this.heading && hAsync("h1", { key: '6b5755ad86d300f4e070b5444a04399fa497ac6f' }, this.heading), hAsync("slot", { key: 'c51eb23c6e206762395cf40f86fe870ae8eb8afb' })), hAsync("div", { key: '5beec993b7da17304cdeb31cafb5850adb878611', class: "pn-header-buttons", hidden: !this.hasButtons }, hAsync("slot", { key: 'd38cec8bea8f49c85a1ed504f197aad06c8fee6d', name: "buttons" })), hAsync("slot", { key: '31c06cf9cfbcf4b0b76bb0356db4b736aa8a9a81', name: "menu" })))));
     }
     static get watchers() { return {
         "maxWidth": ["setMaxWidth"],
@@ -6235,10 +6281,10 @@ class PnInput {
         return !this.showPrefix() && !!this.textSuffix?.length && !this.isPassword() && this.type !== 'search';
     }
     render() {
-        return (hAsync(Host, { key: '6b2db20d9aa3c3d300814a71022a6fe314fa6d03' }, hAsync("div", { key: '419fa861a5748d0c95e9e69b9defd48f50975683', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (hAsync("label", { key: '06576cf8fe7613382cb7aa64d00ece94556a1304', htmlFor: this.inputid, class: "pn-input-label" }, this.label && hAsync("span", { key: '2c534cf97da3005b773e57ea6623240afea8186d' }, this.label), this.maxlength >= 0 && hAsync("span", { key: 'ab2626d9046b75f372a4e01a7234969017837f2f' }, `${this.value.length}/${this.maxlength}`))), hAsync("div", { key: 'e236d0a4dc4c7c719ea2f4be51cd81def68ca53b', class: "pn-input-group" }, hAsync("input", { key: '8aeb20eaa6fe21732c813bb5f9a8028cc0dcbc76', 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 (hAsync(Host, { key: '7f8348da79171fdb3f3b48733a746d6bd531adee' }, hAsync("div", { key: '4867fbb2418edcab774c6cd8c7d98c2431243ac1', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (hAsync("label", { key: 'b8978f74d228ab484d3eb4abcba54f693781f4cf', htmlFor: this.inputid, class: "pn-input-label" }, this.label && hAsync("span", { key: '1d28ce32a353c180a8cb4c2e0011362c9911a1f3' }, this.label), this.maxlength >= 0 && hAsync("span", { key: 'aa862bff99623ec29fa4252c6b2a352900726bef' }, `${this.value.length}/${this.maxlength}`))), hAsync("div", { key: '595c30428744da15ef835ced9a9d2eec8d866fda', class: "pn-input-group" }, hAsync("input", { key: '343c997a23eb23b28daad30e19e26e7685eda62e', 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: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            }, onInput: e => this.setVal(e) }), hAsync("div", { key: '409947a09fe6960778458060590c47ee204ea534', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && hAsync("pn-icon", { key: '0e914746aecea9a37c4f66304e89a82197defd7a', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && hAsync("span", { key: 'e6a7eb7f10ac9d5cf5de4f2064e3922038dfc9e0', class: "pn-input-text" }, this.textPrefix)), hAsync("div", { key: 'f97005264aca3330f9b7c4eb0489c36f7bd31842', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && hAsync("span", { key: '769efb326ce6d4058ee4d8d6c5d2f3b781c65c11', class: "pn-input-text" }, this.textSuffix), this.stateDisplay() && hAsync("pn-icon", { key: 'fe18921f222fd14d91edc799da3f50c6d1c7dff8', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (hAsync("pn-button", { key: '7e10d1c4502d9abc9fd8156652718e04cdfa9955', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.isSearch() && (hAsync("pn-button", { key: '841edb1592c21de8315a0b1c4a8a7c9815c61e01', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), hAsync("p", { key: 'fb41bb4f2559b05cae5b80d214c218429493b5ba', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && hAsync("span", { key: 'a4b226408274dc3fc6788af3932edd5b05f398f3', class: "pn-input-helper" }, this.helpertext), hAsync("span", { key: '488b39c606ca027df73153a9e6e83b4d59360814', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, hAsync("slot", { key: '3cf5c96a8ee99d1d1954a3075862119512ef589c', name: "helpertext" })), this.hasErrorMessage() && hAsync("span", { key: 'b6907bee94961eeb0f4c8c3c59d4f8cc30080754', class: "pn-input-error" }, this.error), hAsync("span", { key: '0193a2c21c1d248f762207351b7bba336368cd6c', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, hAsync("slot", { key: '9e7b771c38bbdd7b3fd75bdc0587c21dcfef2857', name: "error" }))))));
+            }, onInput: e => this.setVal(e) }), hAsync("div", { key: 'b6442450590e1a5e26322e7c2e5664dc645a2338', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && hAsync("pn-icon", { key: '9e832e7d92c500a8b999570334386567da7bdfb2', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && hAsync("span", { key: '06d7d276a732e8506524fd4e04389e6d7a779724', class: "pn-input-text" }, this.textPrefix)), hAsync("div", { key: '4fddb9d6b0112af9f194d548cfa45013d55d5345', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && hAsync("span", { key: 'a1979b08de663081b527cff264b44da4bc4eed9c', class: "pn-input-text" }, this.textSuffix), this.stateDisplay() && hAsync("pn-icon", { key: '4439c0e48081e602e632438948bd4aad7df271dd', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (hAsync("pn-button", { key: '263f37a02ef2774ced61547355fd1646b42ca465', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.isSearch() && (hAsync("pn-button", { key: 'd623852137ec384fb10144253f2e8fc48a2cc0b2', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), hAsync("p", { key: 'f88d31f6be9ca8bc1bf96eb58020dcf34c657730', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && hAsync("span", { key: '2e255d5201e9485e9f594ad9c4c68cfc123d36fa', class: "pn-input-helper" }, this.helpertext), hAsync("span", { key: 'a7e6b9cb46357227d0b1c318522b43e866383aea', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, hAsync("slot", { key: '6e614ea8cf861d78cb63ffb6d3eaa54053b45017', name: "helpertext" })), this.hasErrorMessage() && hAsync("span", { key: '545331e7c33cbbbb8f9d1952228dcf1819a48a66', class: "pn-input-error" }, this.error), hAsync("span", { key: 'e446082015c2a97a3317f0b251e52b64d114de59', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, hAsync("slot", { key: '7827f003bf9eb49991776dabd9567d603562bec2', name: "error" }))))));
     }
     static get watchers() { return {
         "textPrefix": ["handleOffset"],
@@ -6300,7 +6346,7 @@ const translations$8 = {
     },
 };
 
-const pnModalCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  --pn-modal-overflow: hidden auto;\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n  overflow: var(--pn-modal-overflow);\n  max-width: var(--pn-modal-max-width);\n  max-height: 85vh;\n  padding: clamp(1em, 5vw, 1.5em) 0;\n  border: 0.0625em solid #f3f2f2;\n  border-radius: 0.5em;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0.75em;\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  transition-property: opacity, overlay, display, transform, outline-color;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\n}\npn-modal .pn-modal::-webkit-scrollbar {\n  background-color: #ffffff;\n  width: 0.875em;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal::-webkit-scrollbar-track {\n  background-color: #ffffff;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal::-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::-webkit-scrollbar-thumb:hover {\n  background-color: #5e554a;\n}\npn-modal .pn-modal::-webkit-scrollbar-corner, pn-modal .pn-modal::-webkit-scrollbar-button {\n  display: none;\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[data-sheet] {\n  margin: 0 0 0 auto;\n  height: 100%;\n  max-height: unset;\n  border-radius: 0.5em 0 0 0.5em;\n  transform: translate(20%, 0%);\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  transition-behavior: allow-discrete;\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[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-close-button {\n  position: absolute;\n  right: 0.5em;\n  top: 0.5em;\n}\npn-modal .pn-modal-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  padding: 0 clamp(1em, 5vw, 1.5em);\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: 0 clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-buttons {\n  background-color: #ffffff;\n  border-top: 0.0625em solid #d3cecb;\n  padding: clamp(1em, 5vw, 1.5em) clamp(1em, 5vw, 1.5em) 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.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:empty {\n  display: none;\n}\n\n@media (max-width: 30em) {\n  pn-modal .pn-modal {\n    width: 100%;\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 = "/* 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  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  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\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[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  transition-behavior: allow-discrete;\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[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  height: 100%;\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}";
 var PnModalStyle0 = pnModalCss;
 
 /**
@@ -6309,8 +6355,10 @@ var PnModalStyle0 = pnModalCss;
  * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.
  *
  * @slot - The default slot, will be placed in the middle content area.
+ * @slot image - Place an image or illustration at the top of the modal.
  * @slot header - Place the title + lead text in the header.
  * @slot buttons - Place buttons inside the modal at the bottom.
+ * pn-buttons aligns automatically to the right, set the data-left attribute on the button you want to align to the left.
  */
 class PnModal {
     constructor(hostRef) {
@@ -6320,6 +6368,7 @@ class PnModal {
         this.close = createEvent(this, "close", 7);
         this.isClosing = false;
         this.isOpening = false;
+        this.removeOverflow = false;
         this.label = undefined;
         this.helpertext = undefined;
         this.language = null;
@@ -6335,6 +6384,8 @@ class PnModal {
     animationDuration = this.standardAnimationDuration;
     modalTimeout;
     modalElement;
+    modalContainer;
+    modalPicture;
     get hostElement() { return getElement(this); }
     handleOpen() {
         if (this.open)
@@ -6360,6 +6411,10 @@ class PnModal {
         const width = this.maxWidth || '45em';
         this.modalElement.style.setProperty('--pn-modal-max-width', width);
     }
+    handleOverflow() {
+        if (this.allowOverflow)
+            this.setOverflow();
+    }
     /** This event is fired when the modal is toggled. */
     modalToggle;
     /** This event is dispatched after the opening/closing animation has finished playing. */
@@ -6389,11 +6444,18 @@ class PnModal {
     translate(prop) {
         return translations$8?.[prop]?.[this.language || en$1] || prop;
     }
-    handleOverflow() {
-        if (!this.allowOverflow)
-            return;
-        const overflow = this.modalElement.scrollHeight > innerHeight * 0.85 ? 'hidden auto' : 'unset';
-        this.modalElement.style.setProperty('--pn-modal-overflow', overflow);
+    showImage() {
+        return !!this.modalPicture?.innerHTML;
+    }
+    showHeader() {
+        return !!(this.label || this.helpertext || this.hostElement.querySelector('[slot="header"]')?.textContent);
+    }
+    setOverflow() {
+        this.removeOverflow = !this.hasOverflow();
+    }
+    hasOverflow() {
+        const multiplyWith = isSmallScreen() ? 0.95 : 0.85;
+        return this.modalContainer?.scrollHeight > innerHeight * multiplyWith;
     }
     isSameModal(target) {
         return this.modalElement.isSameNode(target);
@@ -6430,7 +6492,7 @@ class PnModal {
         this.open = state ?? !this.open;
     }
     render() {
-        return (hAsync(Host, { key: '6bf631cc88584b24782904a9918091736e27c3d6' }, hAsync("dialog", { key: '543806f18626bd7f8f6983a5c3769f8bf0422544', class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, 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 && (hAsync("pn-button", { key: '60350dfcac19aa570b78e4fb82ca2a0a288de1b7', small: true, class: "pn-modal-close-button", icon: close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), hAsync("header", { key: 'ba3d857e5f0b57c9567b045843f3b3a1aee9f06d', class: "pn-modal-header" }, this.label && hAsync("h2", { key: '524b36cbeb3f1e0274fb29a3656638c4c221cec9', class: "pn-modal-label" }, this.label), this.helpertext && hAsync("p", { key: '330777c3c194177f7fc811eb45f2ee3a585894fc', class: "pn-modal-text" }, this.helpertext), hAsync("slot", { key: '62dbf64100d4e62974a18752423a781db737333f', name: "header" })), hAsync("section", { key: '57618a994095a9f24c7a142d86fa788cca531062', class: "pn-modal-content" }, hAsync("slot", { key: '14f533135af35a88d1fb03b8e57cd133d3981629' })), hAsync("nav", { key: 'd355d6c0024893a26b1e17bf187a7d0e3142b766', class: "pn-modal-buttons" }, hAsync("slot", { key: '20020f7fd89b706bfaf5825090d6a0470e91b577', name: "buttons" })))));
+        return (hAsync(Host, { key: 'd24c1b43f9eebc2d2759e4b6b15982889c559c08' }, hAsync("dialog", { key: '4111d8ae6c9eb198cb74744dce15b37ec1a4157c', 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 && (hAsync("pn-button", { key: '9411bdbf12899d1913f5094981d08e8161277408', small: true, class: "pn-modal-close-button", icon: close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), hAsync("div", { key: '917803e1f7847c4b4609fd121391fc33919ea5d3', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, hAsync("div", { key: '3241e14d8647278032ecb4274c39ab6e3615cf6b', class: "pn-modal-image", hidden: !this.showImage() }, hAsync("picture", { key: '6a830c0e51a4c1a9870dd06509a3eaa5a06ce048', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, hAsync("slot", { key: '098e962a7cc8ac57309ba74951e4a8b0c0aebf08', name: "image" }))), hAsync("header", { key: '41697c436ba9431fe4fa2ae11ca270852f7db309', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && hAsync("h2", { key: '1fcb37a181cfcb6315f2e470eef006842b1ccf53', class: "pn-modal-label" }, this.label), this.helpertext && hAsync("p", { key: '7907955b0d34a729eb142985be24a85fcf5b0c73', class: "pn-modal-text" }, this.helpertext), hAsync("slot", { key: 'c4c8d17830001c3e8df504de9006bcc3cd448549', name: "header" })), hAsync("section", { key: '266f424be0a181433d50cb08904133c9f2aaa67e', class: "pn-modal-content" }, hAsync("slot", { key: '030bb328e6fc00a14305b4134861b38a8fc8f426' })), hAsync("nav", { key: '05d67c40c30af133a7037c3ed57a72b5e5b9de2f', class: "pn-modal-buttons" }, hAsync("slot", { key: 'a12fd530166c6d08aa1a50f0393c4ca2b22b1fc0', name: "buttons" }))))));
     }
     static get watchers() { return {
         "open": ["handleOpen"],
@@ -6451,9 +6513,10 @@ class PnModal {
             "sheet": [4],
             "maxWidth": [1, "max-width"],
             "isClosing": [32],
-            "isOpening": [32]
+            "isOpening": [32],
+            "removeOverflow": [32]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[9, "resize", "handleOverflow"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["open", "open"]]
     }; }
@@ -7090,7 +7153,7 @@ class PnMultiselect {
         return (hAsync("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) => (hAsync("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, hAsync("span", { class: "pn-multiselect-chip-label" }, label), hAsync("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index }) }, hAsync("pn-icon", { icon: close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (hAsync("li", { class: "pn-multiselect-chip", "data-count": true }, hAsync("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
     }
     render() {
-        return (hAsync(Host, { key: '1cf81d38c41d906748ea6fd930ef0a3ffaa7f5d6' }, hAsync("fieldset", { key: '21265396b14535f99dba3e7fd2d093ccb2a380af', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (hAsync("legend", { key: '7b9df3db2b214ddced59dd3cbc5d6b7e474f5c1b', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, hAsync("span", { key: 'de1e49c84b9c8a90e1f2e27b1757b9d7b80269f9' }, this.label), !!this.optionsChecked()?.length && (hAsync("span", { key: '4d7a4718ff5564a8bd9824191674a536e674db00' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), hAsync("div", { key: '1133f2b71d626942cc1aedfcdb99c35c0cc19e6b', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, hAsync("div", { key: 'd48cbaecab417ef48f67be0a17255e2f17bef233', class: "pn-multiselect-input" }, !!this.icon && hAsync("pn-icon", { key: '053f2dea56dc17880890780f4cb0dbe36973ce72', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), hAsync("input", { key: '0e1ac1adee922ff2123aa8e8277288f661f40a48', 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() && (hAsync("pn-icon", { key: '0112d6d05e23edbd392b27df3bc29cb1e2909331', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), hAsync("button", { key: 'e363e1f51469f973300db4543622de3da2dc1176', 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) }, hAsync("pn-icon", { key: '4945c172b4913430a1d24e4e363b778734b19be4', class: "pn-multiselect-icon", icon: angle_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (hAsync("p", { key: '318cf667b58984da1ba7eea2655cd87079efaf13', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, hAsync("span", { key: 'eca71fe8b54c115bfef10c96408a832e1ffb3e15' }, this.error || this.helpertext))), this.search && this.renderChips(), hAsync("slot", { key: '7fb51af2932ef92ca98bddcb1831f586bba1a7dd' }), this.search && (hAsync("p", { key: '4e7a2527cd6068ff1b17e23b775bc46b858f3256', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && hAsync("span", { key: 'bc6de5cae5fc36189390c56af59f06671cbeabe0' }, this.srMessage))))));
+        return (hAsync(Host, { key: '8dcab6f8526d10167d647733ebeba91c6cc4a891' }, hAsync("fieldset", { key: 'b60a7513bb1481686d0353911fe946a8a0534416', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (hAsync("legend", { key: '51f1dc3597171f431ec55d6960f5c22a1af86ea0', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, hAsync("span", { key: '95c5a289c2489059fb076ed82fa40b57965b40fa' }, this.label), !!this.optionsChecked()?.length && (hAsync("span", { key: 'bb1a5f52c8b05612c31325e9237292ad6cdd83ac' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), hAsync("div", { key: '05bcb2bc08fe7495db84681072c83cef9aa1c00e', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, hAsync("div", { key: '7da7473b15c01f1233dc0441571495743c7e8c91', class: "pn-multiselect-input" }, !!this.icon && hAsync("pn-icon", { key: '2ac559c573d8fd0f1e6f39b94c7ba54e8f82530b', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), hAsync("input", { key: '0839cb250ceab31a45d643c89451cedb02d9e7bb', 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() && (hAsync("pn-icon", { key: 'bbe2ed7c5f861b6972ea3937c1aad7fa53269878', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), hAsync("button", { key: '4e2871a96160b3416dce289c8716665a04113b44', 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) }, hAsync("pn-icon", { key: '71c79e52bcca84ae16b225dc6c58332b95788234', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (hAsync("p", { key: 'a27a65d1fba955a5b1bab1c7b79c5e78b5c0040a', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, hAsync("span", { key: 'c00904641ae7ba9a9fb482fbf215d6a7f2643872' }, this.error || this.helpertext))), this.search && this.renderChips(), hAsync("slot", { key: '02c6ced4675438a0b29505a2c20948b1345ec1e0' }), this.search && (hAsync("p", { key: 'c8ce14a5d9d28e235de857c2264bed4f5507e389', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && hAsync("span", { key: 'a365ee9816a1e3e732649857c4cf73c0470a85bf' }, this.srMessage))))));
     }
     static get watchers() { return {
         "open": ["handleOpen"],
@@ -7268,7 +7331,7 @@ class PnOcrSearch {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'c4392bef058b06addd7357e34ce304f5804a1b44' }, hAsync("pn-search-field", { key: '2f8f4beedb4c90e97ef63437fb39e649b0ae7d33', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
+        return (hAsync(Host, { key: '917961782b3f330e4271aa6f25427c36398c252e' }, hAsync("pn-search-field", { key: 'e04856aba0427ece6d332e8375313d87212106af', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
     }
     static get style() { return PnOcrSearchStyle0; }
     static get cmpMeta() { return {
@@ -7579,7 +7642,7 @@ class PnPageNav {
     }
     /* ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */
     render() {
-        return (hAsync(Host, { key: '78363e8727ce2d9b1525572a8d909b65141c4932' }, hAsync("div", { key: '1cdb635b439f40cf77df3a77432d542f3055e952', class: "pn-page-nav-wrapper" }, hAsync("nav", { key: '13ae19bf916612a04990edade8d7325665a91060', class: "pn-page-nav" }, this.dropdownActive && (hAsync("button", { key: '802fbae4d73a7b26a34ed4e41e5b5a6efd3ba101', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, hAsync("pn-icon", { key: 'ac26e1ec6b9feeb52a898d7f80d2c4356423e93d', icon: angle_down, color: "white", small: true }), hAsync("div", { key: 'c040e7c7ac1db10687b53ad6f59f6c3ded1d8e8a', class: "pn-page-nav-divider" }))), hAsync("ul", { key: '4bf5dc223bd55b0fb81fedebfa09fbe5db42569d', class: "pn-page-nav-items" }, hAsync("slot", { key: '3b77f7bd7a09700b860df10927b3889072e3bc34' }), hAsync("li", { key: '71f85348e913043ca037efbe523f25a00bf8d211', class: "pn-pn-bg pn-pn-active", role: "presentation" }), hAsync("li", { key: '462f8b0e8e1c788143d4ffaf5011b030ff100f5f', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (hAsync("div", { key: 'c69db4a2202a5b5f9da49f72466bfa2d68eec0c8', class: this.scrollArrowClasses() }, hAsync("button", { key: 'eb809646459a703b8ea984ef6f9ec8b23ea34029', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, hAsync("pn-icon", { key: '4d797edf6525213134b3acc0e36876ade74952a8', icon: arrow_left, color: "white" })), hAsync("button", { key: '612286fcac6b7608a1162aa5b8ad3d6ff401bf87', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, hAsync("pn-icon", { key: '5a336276c0b4256fb976fc2bdc9037ec25cbc382', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (hAsync("ul", { key: '518b79ad7c1a7ff8652a5fb909f8285f94405a4a', id: this.navid, class: this.dropdownClasses() }, hAsync("slot", { key: '7d03ba12daffea62b0b0a7c0f1a1c1c006a125c4', name: "dropdown-item" })))));
+        return (hAsync(Host, { key: '2d472afc87973db1b342badc82b707f5767834e9' }, hAsync("div", { key: 'a76c352f5e14f65d8bec6fa42ed25b2b287d7280', class: "pn-page-nav-wrapper" }, hAsync("nav", { key: '20ed1bb324c0fb4800c9f8f07d0d40100721e5e9', class: "pn-page-nav" }, this.dropdownActive && (hAsync("button", { key: '7dbbafa6c70b16cbad1fe832df007aa65c077ec7', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, hAsync("pn-icon", { key: 'b2785a4afaa0f2f9ce19c890c6aebb0d2b7e0042', icon: chevron_down, color: "white", small: true }), hAsync("div", { key: '876b33ce6d6a3bd0b83d5f8d97d63d24c0530074', class: "pn-page-nav-divider" }))), hAsync("ul", { key: 'b4a29a198ac5e38baef3ed74b12e3aca14c8cc9b', class: "pn-page-nav-items" }, hAsync("slot", { key: '947c3412a48a441a0677a7815d7973ca448515c3' }), hAsync("li", { key: '90141ec24493bcda61698d15b448f9910d70e2ed', class: "pn-pn-bg pn-pn-active", role: "presentation" }), hAsync("li", { key: '02f007fe38b1512749971b0b4c006a3589517788', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (hAsync("div", { key: 'ca4ea70291ecf8d9b7d3dc59b27c72176cc96938', class: this.scrollArrowClasses() }, hAsync("button", { key: 'f6ff58345a9e44be31fbf8c22492710fb76e24a3', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, hAsync("pn-icon", { key: 'c1b090b80ab3b3aa387bc7d550ee8ffdb7c769ad', icon: arrow_left, color: "white" })), hAsync("button", { key: '2be256cd45c2355563a9ad239f3709619790f1ad', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, hAsync("pn-icon", { key: 'afb76fc849b335ef1c216273301dd4d95a0b4cee', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (hAsync("ul", { key: '941559a72118dd220f684ece2151ace9c4c3e292', id: this.navid, class: this.dropdownClasses() }, hAsync("slot", { key: '9e546d81c3f8f98ac3978646a865f406e673d0e3', name: "dropdown-item" })))));
     }
     static get watchers() { return {
         "value": ["valueHandler"],
@@ -7644,7 +7707,7 @@ class PnPageNavDropdownItem {
     }
     render() {
         const TagName = this.getTagName();
-        return (hAsync("li", { key: '118b8decf6fe97a27767bc70926ccc3b350bea31' }, hAsync(TagName, { key: '1417fbd74d2bd8119789b1ddb5f395cf5ea5571d', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, hAsync("slot", { key: '51bdce9d5a7cdc1a7481ea13c49c11f073ae7660' }), hAsync("pn-icon", { key: '63252ed87b9aaa6c2f26c4fe503e71b3d08169e9', icon: arrow_right, color: "white" })), hAsync("hr", { key: 'c7b2d942886b0aaafa859f3d564ba920ea07ca79' })));
+        return (hAsync("li", { key: 'f4bdc8d41ea761f0fcca047fe70678cb83a0d0ad' }, hAsync(TagName, { key: 'facd7296d4d26b872548c21491a901719e3bb278', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, hAsync("slot", { key: 'c70b49d7079403d41fe68d799f621b58a0f377c4' }), hAsync("pn-icon", { key: '3731f2a595d7234c78fe33458f1d2cdb3544aa20', icon: arrow_right, color: "white" })), hAsync("hr", { key: 'f5da263701f5b73566353a58268cbe59c48db725' })));
     }
     static get style() { return PnPageNavDropdownItemStyle0; }
     static get cmpMeta() { return {
@@ -7685,7 +7748,7 @@ class PnPageNavItem {
         this.itemselection.emit(this.value);
     }
     render() {
-        return (hAsync(Host, { key: 'a2dcede0a4f6789eda151fa2fcd5496588897361' }, hAsync("li", { key: '029058cffbfbf1c04d57c7605b9e887cce0abbd1' }, hAsync("a", { key: '38f2a5a9e15bc96a9efb91d85c9d67b21d27b40b', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && hAsync("pn-icon", { key: '110592957f990a4c9594820d748aa1c6458742a5', icon: this.icon, color: "white" }), hAsync("slot", { key: '9b72c3dc62e9dfc9fe7cc0415d0ea0f67ea0d47f' })))));
+        return (hAsync(Host, { key: '661feb5107ecf8dadaa62f137d8dd8ca54e83de7' }, hAsync("li", { key: '39f97a818c74ab3740592d997fc0ea9cf7ae9129' }, hAsync("a", { key: 'a5528e3389075f88328bc8f64d608830f9c882ba', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && hAsync("pn-icon", { key: 'bee33613667acc22c223ed8192a0751df8186129', icon: this.icon, color: "white" }), hAsync("slot", { key: '15d6a38762c81898f15f93f99eac390b92dc6209' })))));
     }
     static get style() { return PnPageNavItemStyle0; }
     static get cmpMeta() { return {
@@ -7898,7 +7961,7 @@ class PnPagination {
         return (hAsync("pn-button", { arialabel: label, ariacurrent: current ? 'page' : null, href: this.getUrl(page), rel: current ? null : rel, appearance: "light", small: true, icon: icon, iconOnly: true, onPnClick: ({ detail }) => this.navigate({ page, event: detail }) }));
     }
     render() {
-        return (hAsync(Host, { key: 'd1cd7756a1bf0a5e5d4d59e8a5c8c6f759cee285' }, hAsync("nav", { key: 'f7c4d02b8a1f147f849bf7c8b3093098745933c1', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (hAsync("pn-select", { key: '1297805c338445d019524d2a51e11e786529d899', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (hAsync("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), hAsync("div", { key: 'fdb8a131a50ed56deca325db959042a32f8d335b', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), hAsync("ol", { key: '6bb693d0b87cc6d95368525288dc1eaa2eef67fa', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
+        return (hAsync(Host, { key: '1f33db59423d42f0e7803588c1792eab786b8de7' }, hAsync("nav", { key: '540f96e45b8d9f57ee74fa64873c4386ec5c5886', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (hAsync("pn-select", { key: '4819db7a03b6ce337210679a72d0e33b684015e3', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (hAsync("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), hAsync("div", { key: '653ae1faeda706b1f58b10597f392f582e758e52', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), hAsync("ol", { key: 'df640b8caf32ae986dbd0523b1a782df4910026f', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
     }
     static get watchers() { return {
         "page": ["handlePage"],
@@ -7990,7 +8053,7 @@ class PnProgressBar {
         return 'green500';
     }
     render() {
-        return (hAsync(Host, { key: 'e5e7d6c7ac2b3e2cc8838a616d697281c299ef21' }, this.hasLabel() && (hAsync("p", { key: '23155051cf0606bee3bf96c4be40cf1549b6ab44', id: this.idLabel, class: "pn-progress-bar-label" }, hAsync("span", { key: '98723d9fcc0e8a43ceaf4969a70046418d9d08bf' }, this.label), this.hasIcon() && hAsync("pn-icon", { key: '402eea95c3733057d94df1b7abe92d02e7ef1dc8', icon: this.getIconSvg(), color: this.getIconColor() }))), hAsync("div", { key: '5d82dfaf2b4ca4ac5ec6aefc83b6422dc8c632fe', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, hAsync("div", { key: '7340eb78ac7cbcd5798e804dc173a1d7c0696f49', class: "pn-progress-bar-meter" }, hAsync("div", { key: 'a9d2ab1009731727f98d349b9bf04bf39433c478', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), hAsync("p", { key: '6f10b1183b320c1e1e4b03bf893a62135779a870', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, hAsync("span", { key: 'd6b8b56cf9853fa1f88aea6c6a43bf9999fa09cd' }, this.getSubtext()))));
+        return (hAsync(Host, { key: '141fef1da768dc423cf53dfa8088f1b98429236c' }, this.hasLabel() && (hAsync("p", { key: '294199499037e6ed0e816f8a68850dfede795884', id: this.idLabel, class: "pn-progress-bar-label" }, hAsync("span", { key: 'f292e951e29878d186b7f7896d7346fd41677006' }, this.label), this.hasIcon() && hAsync("pn-icon", { key: '47b8065b97a8cd0f0d3e57ea4f68b07ad09c12a5', icon: this.getIconSvg(), color: this.getIconColor() }))), hAsync("div", { key: '0dd5189948aad2e501ee10076ed212987a52e4d8', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, hAsync("div", { key: '51ceae38d589385687dd3e25c86526b4758f2792', class: "pn-progress-bar-meter" }, hAsync("div", { key: '714d0aa19a487bf625ae10bcdd68d21d54b6f48a', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), hAsync("p", { key: 'b540a56c9d7fdfae49f508472d315ce1eeda5e99', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, hAsync("span", { key: '35d515a823d117a6ab31e3cda778a2ada8093233' }, this.getSubtext()))));
     }
     static get watchers() { return {
         "progress": ["setProgress"]
@@ -8017,6 +8080,10 @@ class PnProgressBar {
 const pnProgressIndicatorCss = ".pn-progress-indicator{display:flex;padding:2.8em 1em 0}";
 var PnProgressIndicatorStyle0 = pnProgressIndicatorCss;
 
+/**
+ * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
+ * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
+ */
 class PnProgressIndicator {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -8044,7 +8111,7 @@ class PnProgressIndicator {
         });
     }
     render() {
-        return (hAsync("div", { key: '7809a31648a1c899311e83dc28db7b0b23272547', class: "pn-progress-indicator" }, hAsync("slot", { key: 'a1b9970f16de43052e473ea166829a1ad6e5e725' })));
+        return (hAsync("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, hAsync("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
     }
     static get style() { return PnProgressIndicatorStyle0; }
     static get cmpMeta() { return {
@@ -8062,6 +8129,10 @@ class PnProgressIndicator {
 const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:flex;flex:1 0 4em}pn-progress-indicator-step:first-child{flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:flex;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#f3f2f2;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-progress-indicator-step .circle{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#f3f2f2;display:flex;align-items:center;flex-direction:column;font-size:1em;font-weight:normal;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .info-container{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .info-container .pn-icon-svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container .pn-icon-svg path,.pn-progress-indicator-step .info-container .pn-icon-svg polygon{fill:#f3f2f2}.pn-progress-indicator-step .progress-line{flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#f3f2f2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005d92;transform:translateX(-100%);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .progress-line:after{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step.active .info-container{color:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg path{fill:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg polygon{fill:#000000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005d92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;animation:dash 0.2s cubic-bezier(0.55, 0, 0.1, 1) both}@keyframes dash{to{stroke-dashoffset:0}}";
 var PnProgressIndicatorStepStyle0 = pnProgressIndicatorStepCss;
 
+/**
+ * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
+ * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
+ */
 class PnProgressIndicatorStep {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -8112,7 +8183,7 @@ class PnProgressIndicatorStep {
         return className;
     }
     render() {
-        return (hAsync(Host, { key: '72cc83f88a80acff2dc2d379abddf32d1f7100a8', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, hAsync("div", { key: '39f44c9b4e625898d16278575894ed8f01261a89', class: "progress-line" }), hAsync("div", { key: '17858a1e590a364b82db40088f0017a5ddfde37e', class: "info-container" }, hAsync("slot", { key: 'bd8a6e97e2a0aa6e3a0ff0565069792dc4e5cd0e' }), this.name), hAsync("div", { key: '0122ff04b13f3d610a036bd354333e5b4ed4b898', class: "circle" }, this.done || this.checked ? (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, hAsync("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
+        return (hAsync(Host, { key: 'e5518f2d8c21c889738beb3a42e6865e7c64ac76', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, hAsync("div", { key: 'b0f5f684ca12fda2b22b51945d3b0b41ab490fa3', class: "progress-line" }), hAsync("div", { key: '8d05494d4cc77145e44270666b678cf48eb05a96', class: "info-container" }, hAsync("slot", { key: '864bea1ce3dd348be1abadcc3f8fb3757ac009b9' }), this.name), hAsync("div", { key: '7d8394e5a4919404a137fd30ce125dfda5ed3034', class: "circle" }, this.done || this.checked ? (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, hAsync("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
     }
     static get style() { return PnProgressIndicatorStepStyle0; }
     static get cmpMeta() { return {
@@ -8143,7 +8214,7 @@ const translations$4 = {
     },
 };
 
-const pnProgressStepperCss = "pn-progress-stepper .pn-progress-stepper{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-stepper[data-full] .pn-progress-stepper-value{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-stepper-label{margin-bottom:0.5em}pn-progress-stepper .pn-progress-stepper-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-stepper-value{transition-duration:0s;transition-delay:0s}}";
+const pnProgressStepperCss = "pn-progress-stepper{display:block}pn-progress-stepper .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}pn-progress-stepper .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-value{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}pn-progress-stepper .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-dot{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}";
 var PnProgressStepperStyle0 = pnProgressStepperCss;
 
 /**
@@ -8152,57 +8223,37 @@ var PnProgressStepperStyle0 = pnProgressStepperCss;
 class PnProgressStepper {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.builtInLabel = undefined;
         this.progressValue = 0;
-        this.label = undefined;
+        this.label = '';
+        this.progressStepperId = '';
+        this.language = null;
         this.totalSteps = this.maxStep;
         this.currentStep = this.minStep;
         this.stepName = undefined;
-        this.progressStepperId = '';
-        this.language = null;
+        this.dots = false;
     }
     id = `pn-progress-stepper-${uuidv4()}`;
-    idLabel = `${this.id}-label`;
-    idBar = `${this.id}-bar`;
     minStep = 1;
     maxStep = 7;
     get hostElement() { return getElement(this); }
-    validateCurrentStep(step) {
-        this.validate(step, 'currentStep');
-    }
-    validateTotalSteps(step) {
-        this.validate(step, 'totalSteps');
+    stepWatchers(a, b, c) {
+        if (c === 'currentStep')
+            this.validate(a, 'currentStep');
+        if (c === 'totalSteps')
+            this.validate(b, 'totalSteps');
+        this.calculateProgress();
     }
     watchLanguage() {
-        if (this.hasCustomLabel())
-            return;
-        this.label = translations$4.STEP[this.language || en$1];
-    }
-    watchId() {
-        if (this.progressStepperId) {
-            this.idLabel = `${this.progressStepperId}-label`;
-            this.idBar = `${this.progressStepperId}-bar`;
-        }
-        else {
-            this.idLabel = `${this.id}-label`;
-            this.idBar = `${this.id}-bar`;
-        }
+        this.builtInLabel = translations$4.STEP[this.language || en$1];
     }
     async componentWillLoad() {
         this.watchLanguage();
-        this.watchId();
         this.validate(this.currentStep, 'currentStep');
         this.validate(this.totalSteps, 'totalSteps');
-        if (this.language)
-            return;
-        await awaitTopbar(this.hostElement);
-    }
-    componentWillRender() {
         this.calculateProgress();
-    }
-    hasCustomLabel() {
-        if (this.label === undefined)
-            return false;
-        return !Object.keys(translations$4.STEP).find(step => translations$4.STEP[step] === this.label);
+        if (this.language === null)
+            await awaitTopbar(this.hostElement);
     }
     validate(step, prop) {
         const componentName = this.hostElement.localName;
@@ -8222,32 +8273,39 @@ class PnProgressStepper {
     calculateProgress() {
         try {
             this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);
-            this.hostElement.style.setProperty('--progress-value', `${this.progressValue}%`);
+            this.hostElement.style.setProperty('--pn-progress-value', `${this.progressValue}%`);
         }
         catch (error) {
             console.error(`${this.hostElement.localName}:`, error.message);
         }
     }
+    getLabel() {
+        return this.label || this.builtInLabel;
+    }
+    getId() {
+        return this.progressStepperId || this.id;
+    }
     render() {
-        return (hAsync(Host, { key: '4ba09046dab423fa79ebfdab9fbf312d9d8929cf' }, hAsync("p", { key: 'fa2f78ce5509e1dd7af40657a083356e61d393db', id: this.idLabel, class: "pn-progress-stepper-label" }, hAsync("span", { key: '963374a110ad8fc87d6d6d2b00cd1694992fffab' }, this.label, " ", this.currentStep, "/", this.totalSteps), this.stepName && hAsync("span", { key: 'f5cef98692b9baf2dc2826d1a0ebaebb64e75cf5' }, " - ", this.stepName)), hAsync("div", { key: '2259ad7c3a8d77ff6a59d32124695e9259b22ba5', class: "pn-progress-stepper", role: "progressbar", "aria-labelledby": this.idLabel, "aria-valuenow": this.progressValue, id: this.idBar, "data-full": this.currentStep === this.totalSteps }, hAsync("div", { key: 'f469df98da0b06db3a80fdcdc96555151789b014', class: "pn-progress-stepper-value" }))));
+        return (hAsync(Host, { key: '8b188af32a20e83f8e8d0460c676bda9e1560911' }, hAsync("label", { key: '9501af57bade0fd22ca865990e9c6934fb8da0d2', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, hAsync("span", { key: '7ae3e7e7fa8ea5d24fe13c895b6b86d7a0bd780a' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && hAsync("span", { key: '3e15c0c51b59bbea44e8d589ff29da8c9cb5a666' }, " - ", this.stepName)), hAsync("progress", { key: '7e379261374b13ad1b06216fe96146ac7fad73c2', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (hAsync("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (hAsync("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (hAsync("div", { "aria-hidden": "true", class: "pn-progress" }, hAsync("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
     }
     static get watchers() { return {
-        "currentStep": ["validateCurrentStep"],
-        "totalSteps": ["validateTotalSteps"],
-        "language": ["watchLanguage"],
-        "progressStepperId": ["watchId"]
+        "currentStep": ["stepWatchers"],
+        "totalSteps": ["stepWatchers"],
+        "language": ["watchLanguage"]
     }; }
     static get style() { return PnProgressStepperStyle0; }
     static get cmpMeta() { return {
         "$flags$": 0,
         "$tagName$": "pn-progress-stepper",
         "$members$": {
-            "label": [1025],
+            "label": [1],
+            "progressStepperId": [1, "progress-stepper-id"],
+            "language": [1],
             "totalSteps": [1026, "total-steps"],
             "currentStep": [1026, "current-step"],
             "stepName": [1, "step-name"],
-            "progressStepperId": [1, "progress-stepper-id"],
-            "language": [1],
+            "dots": [4],
+            "builtInLabel": [32],
             "progressValue": [32]
         },
         "$listeners$": undefined,
@@ -8290,7 +8348,7 @@ class PnRadioButton {
         this.handleId();
     }
     render() {
-        return (hAsync(Host, { key: 'ae520e0cfb3de29899ac40377cbb55061cd01b68' }, hAsync("input", { key: 'd2195982014090f751f36f46687dc9c1e049e32d', type: "radio", id: this.radioid, value: this.value, name: this.name, disabled: this.disabled, required: this.required, checked: this.checked, "aria-describedby": !!this.helpertext && this.idHelper, "aria-invalid": this.invalid?.toString() }), hAsync("div", { key: '0ebb9fa07ebb3b896e8efd3545bc7fe295c56d05', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, hAsync("div", { key: 'a76dd992f2b3f2afb54e1db31ee50638002d5b4a', class: "pn-radio-container" }, hAsync("div", { key: 'e456252ee2011d1dee97aff66f6ba4c122a5ca80', class: "pn-radio-outer" }, hAsync("div", { key: 'dd7aee8305f27590d524b63336c619d7b440a781', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (hAsync("p", { key: '664c532213f996509cf6abe4a9d557b21ba60464', class: "pn-radio-content" }, this.label && (hAsync("label", { key: '090e79852aa459100d0a382778bc30b75e61fe32', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (hAsync("span", { key: '1785f82b7d25eff5117587777db5d02584609885', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && hAsync("pn-icon", { key: '2902b6b37407a1b3dc7b60d47405de5ead710a57', color: "gray900", icon: this.icon }))));
+        return (hAsync(Host, { key: '8bb634e145b549e4cd83b716dee01ef0473d6ab0' }, hAsync("input", { key: 'b3d28e2d722957d18f9ea2f6567917627f54c1f1', type: "radio", id: this.radioid, value: this.value, name: this.name, disabled: this.disabled, required: this.required, checked: this.checked, "aria-describedby": !!this.helpertext && this.idHelper, "aria-invalid": this.invalid?.toString() }), hAsync("div", { key: '84789bb4bdb07b5c9ae2a5512e70b22236b9efba', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, hAsync("div", { key: '3a8d38272a31df6d779dbc0c04f25d7d514405c2', class: "pn-radio-container" }, hAsync("div", { key: '1c13d1d254e1fe915604acd957ba21bd6217b345', class: "pn-radio-outer" }, hAsync("div", { key: '6b576e1ae441544ad56f14d4cae0ab3f407a4200', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (hAsync("p", { key: '2f03734659b55b522e49f5daca3f9e494fa873f5', class: "pn-radio-content" }, this.label && (hAsync("label", { key: '0fd0b95621317be2f320e359118abdb9c3556100', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (hAsync("span", { key: '8a0dea7825a3e71f54b896a93331f374f1811c65', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && hAsync("pn-icon", { key: '695a8edf949944d8a86cbdaba665a048fafed99b', color: "gray900", icon: this.icon }))));
     }
     static get watchers() { return {
         "radioid": ["handleId"]
@@ -8532,7 +8590,7 @@ class PnSearchField {
         return classNames;
     }
     render() {
-        return (hAsync(Host, { key: 'e37e5e244250cfa6f2f042b2c4b78952fa7d9a79', class: this.getClassNames() }, hAsync("div", { key: 'eed981fb9d9fb396fbd18242e54efb2f7d7045aa', class: "input-container" }, hAsync("input", { key: '218ba7784220d2709d65ed94b818e14d9d49c08a', type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), hAsync("div", { key: '90487db137ea5f86500d4cebe40c101085aa6dff', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (hAsync("pn-button", { key: 'db7bd6327c382b49b3a3f1d4ae355273b64f01b3', small: true, class: "search", type: "button", appearance: "light", icon: search, iconOnly: true, noTab: this.button !== 'icon-inline', arialabel: this.translate('SEARCH'), onPnClick: e => this.emitSearch({ click: e.detail }) })), this.button !== 'icon-inline' && (hAsync("pn-button", { key: '44b876f97d6a961b12363c0e3e342399ddccad1f', small: true, class: "clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: this.value && (!this.loading || this.button !== 'none'), onPnClick: () => this.clearInput() })), this.button === 'none' || (this.button === 'icon-inline' && hAsync("pn-spinner", { key: '8f116b75dee2226c3efb89bbc4df1a1cf1e21175' })))), this.button !== 'none' && this.button !== 'icon-inline' && (hAsync("pn-button", { key: 'a952f2dce26f841f3e934d2195649ab8c584c297', label: this.buttonLabel, appearance: this.buttonLight ? 'light' : null, icon: search, iconOnly: true, arialabel: this.button === 'icon' ? this.buttonLabel : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) }))));
+        return (hAsync(Host, { key: '8326d2235579e0cb7a92c864c373bfe10ac93f98', class: this.getClassNames() }, hAsync("div", { key: '51875e4b1e11e77646b1f81f25d57472acb61c93', class: "input-container" }, hAsync("input", { key: '04fb6a318e2ba6afa3e20b9a132f0b1d84775fc9', type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), hAsync("div", { key: '0ff204aee2d455d3800d5b2fa8107b27db647587', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (hAsync("pn-button", { key: 'f820315a99ae3ec92ffd3c7e82098442722a6be0', small: true, class: "search", type: "button", appearance: "light", icon: search, iconOnly: true, noTab: this.button !== 'icon-inline', arialabel: this.translate('SEARCH'), onPnClick: e => this.emitSearch({ click: e.detail }) })), this.button !== 'icon-inline' && (hAsync("pn-button", { key: '2cb9544a3339ed88bc966b2e01430bc49238d885', small: true, class: "clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: this.value && (!this.loading || this.button !== 'none'), onPnClick: () => this.clearInput() })), this.button === 'none' || (this.button === 'icon-inline' && hAsync("pn-spinner", { key: '019aaa565d24b635a012ae8c4f6ceaebbc0b74c6' })))), this.button !== 'none' && this.button !== 'icon-inline' && (hAsync("pn-button", { key: 'e0567545bdb6982aaf9dbf989cd5cbbae72c2054', label: this.buttonLabel, appearance: this.buttonLight ? 'light' : null, icon: search, iconOnly: true, arialabel: this.button === 'icon' ? this.buttonLabel : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) }))));
     }
     static get style() { return PnSearchFieldStyle0; }
     static get cmpMeta() { return {
@@ -8587,7 +8645,7 @@ class PnSegment {
         this.segmentHover.emit(mouse);
     }
     render() {
-        return (hAsync(Host, { key: 'c04c9f14d3b5436efb16cd391eb2bbc64be74b38', onMouseEnter: (event) => this.handleHover(event) }, hAsync("input", { key: '8e755a9c00f5f058e6dcacfb14000fa6ea2916a8', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), hAsync("label", { key: 'dc13164594408f0cc3da2812fec29c280d09423b', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && hAsync("pn-icon", { key: 'cb77aa8a7b2595b6a99eb2ff5f58230c934d3bc0', icon: this.icon, color: "blue700" }), hAsync("span", { key: 'a4368885dfc0b2d78d0c76df7e7dcaf2de479697', class: "pn-segment-text" }, this.label, hAsync("slot", { key: '20e1385578b7f7e52b3a1cc637b84461aa1ef216' })))));
+        return (hAsync(Host, { key: 'aefe64a8e024e1677b3816973b9a91dc1048cb56', onMouseEnter: (event) => this.handleHover(event) }, hAsync("input", { key: '4d36074e76de1648020c31d30ad38d8a67ca3984', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), hAsync("label", { key: '1e6e54d9140bd27266d426ad4e9ecf68f505a7ee', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && hAsync("pn-icon", { key: '5733ce0a43d33337785771da3071c0c9043fbdde', icon: this.icon, color: "blue700" }), hAsync("span", { key: '07759d481e84a914e8c0525d0b21fcc85356c3db', class: "pn-segment-text" }, this.label, hAsync("slot", { key: 'de3a243b862d18555f1073165f1b8b817d86aa04' })))));
     }
     static get style() { return PnSegmentStyle0; }
     static get cmpMeta() { return {
@@ -8731,7 +8789,7 @@ class PnSegmentedControl {
     }
     /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
     render() {
-        return (hAsync(Host, { key: '58ff89aa0cbb4ee126d5b61f5061df51eef69df0' }, hAsync("div", { key: '45e92ad1f5169facf2681d831cfee5c36a6696ca', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, hAsync("slot", { key: '80561deedd796d18ca9fde389fbcfb0f8d761403' }), hAsync("div", { key: 'b4e95afa434f77eb399616732afc9d3434dc724e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), hAsync("div", { key: '6889b7c2306eac3c0028c53736ce1cd279fc113f', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), hAsync("div", { key: '5afb0f9778f422b093f3137e1a1af7cbbaef6dcc', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, hAsync("button", { key: '12a9a28a37b94a2bcd6021874add132ef5d1e9fe', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, hAsync("pn-icon", { key: '9013d57af659c0e90442c4773e9b1632cea91a94', icon: arrow_left })), hAsync("button", { key: '6eb71575e552897cb49dda3011e61b6ce8016198', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, hAsync("pn-icon", { key: '8729b2e9885ec045bb3c847347dc34c44042a824', icon: arrow_right })))));
+        return (hAsync(Host, { key: 'aea003dbcf14cb96c8c3e7820918e1363dcdfca8' }, hAsync("div", { key: '42ecbc84057db97c23a7c25b9d687134a75cfcce', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, hAsync("slot", { key: '5f32c7aca5758f22d940c8940c2b7f23742f9631' }), hAsync("div", { key: 'a9a1726d5de7a5732b154c6614e8156ad9ad458c', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), hAsync("div", { key: 'd93f75665a4a1c8d8e1e9d65ea1a6aa7adc9b2e5', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), hAsync("div", { key: '10d3355188c2e76da5cfa78a98917491002427df', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, hAsync("button", { key: 'cfea6659a62e3dba6a8b294e8cffd423f39a97f6', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, hAsync("pn-icon", { key: 'e14140c5d410a33d2f2ea826d636a350463b4437', icon: arrow_left })), hAsync("button", { key: 'c0bad9bdf701ae1cc1e31f39478cfafc87be8ec6', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, hAsync("pn-icon", { key: '3ac708d78f09c4b3ac6cc6b2ab3de79ebfbb9920', icon: arrow_right })))));
     }
     static get watchers() { return {
         "value": ["valueHandler"]
@@ -8799,7 +8857,7 @@ class PnSelect {
         return !!this.helpertext || !!this.error;
     }
     render() {
-        return (hAsync(Host, { key: '1e9048eda53ecaa901689f0164cba2a389f543df' }, hAsync("div", { key: 'e24db0f74c4d3657bb1ee6903160fcdaf2910da4', class: "pn-select", "data-error": this.hasError() }, this.label && (hAsync("label", { key: 'c4e6c6c613df6392b0a67123d46f9474ae0e305f', htmlFor: this.selectId, class: "pn-select-label" }, hAsync("span", { key: '58965840227667a57d624538702990125c5f7dca' }, this.label))), hAsync("div", { key: 'd48cef7cd8ceb7cc7fafce1da20574d933d9413f', class: "pn-select-input" }, this.icon && hAsync("pn-icon", { key: 'f4021fd781fb67e2df267606b165607369fd0371', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (hAsync("pn-icon", { key: 'e7d35d9f8191aec7c0ced7442b2419c9dc88fb44', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), hAsync("select", { key: '1b2bd070a7d12e7504bfddfb389d1cb3e9a9053f', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, hAsync("slot", { key: 'b9d68ad6844d3c0444f4a4c0f53e7f4c98ce41f7' })), hAsync("pn-icon", { key: '66bc82e862821f70b7f62559c00a9937301b3715', class: "pn-select-icon", icon: angle_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (hAsync("p", { key: '100c25db7cb319a1ae7389bc862ffbcdb6b8f6d3', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, hAsync("span", { key: '73a0373c059ee9d0ec9abd4bcbf99a48409d8112' }, this.error || this.helpertext))))));
+        return (hAsync(Host, { key: '557d5e0407e14089b58198108c6ac44f90db21ab' }, hAsync("div", { key: 'd322762f5c51b96cb35a9e023b4082812113a273', class: "pn-select", "data-error": this.hasError() }, this.label && (hAsync("label", { key: '2dcf2247ba943591055418cdf38735be3e8386f8', htmlFor: this.selectId, class: "pn-select-label" }, hAsync("span", { key: '29401388d7065dc6ade239f0307c5df9cc61629b' }, this.label))), hAsync("div", { key: '725851becae25fd36ebaeed7262b732c7a2cd05e', class: "pn-select-input" }, this.icon && hAsync("pn-icon", { key: '4c40b12865b8019bdeca9dcae62bf4767f3cdb90', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (hAsync("pn-icon", { key: '8b0d2445db71a83aafbcf7ad34a08aea692cab5c', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), hAsync("select", { key: '8d1555e92ceaffa72a7c12e1911c683a60a4fe42', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, hAsync("slot", { key: 'e0ca451783c2e2736c06b13097331058fec82118' })), hAsync("pn-icon", { key: '37d957e3319d281848cfa35b68cc5fa6cb0789cc', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (hAsync("p", { key: 'f98839737c466c368f1f5e4db3aaf77ec45ab236', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, hAsync("span", { key: '8622d967db51059efb8a96e4bc661ede16e36730' }, this.error || this.helpertext))))));
     }
     static get style() { return PnSelectStyle0; }
     static get cmpMeta() { return {
@@ -8844,7 +8902,7 @@ class PnSpinner {
         return `${this.size}em`;
     }
     render() {
-        return (hAsync(Host, { key: '70929226e52cdda66312d599b0f8d4c83e902263' }, hAsync("svg", { key: '0e4a3843737f29304996b5eb81b772b904f2d1c7', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, hAsync("circle", { key: '09d5ab69786a82fa44fc8b62aeb00b93ae4e8c0d', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), hAsync("circle", { key: 'de94ea674640b278406a32486d8dbac3ebaec156', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
+        return (hAsync(Host, { key: 'a9ecba01b5b30a660a44439c714b7ad57cf02a88' }, hAsync("svg", { key: '03fbe990bf1ae0402fcb27707e0c1712d8a84492', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, hAsync("circle", { key: 'c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), hAsync("circle", { key: '5f69d1bbbf864842f9ae54dc9a29b61603a83bff', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
     }
     static get style() { return PnSpinnerStyle0; }
     static get cmpMeta() { return {
@@ -8961,7 +9019,7 @@ class PnTab {
     }
     render() {
         const Tag = this.tag;
-        return (hAsync(Host, { key: 'ec9df780cc276853bfc6bcbb9af1f6d4f6e8d83e' }, hAsync(Tag, { key: 'aa1b089953f69110583eef6c689973bd118d2fd6', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && hAsync("pn-icon", { key: '583bf623f788662aaa3f612552b52ecfc0edae51', icon: this.icon }), hAsync("slot", { key: 'a5f216eb6ac2ee8fcb7f90daec3f69cc597f9d7e' }), hAsync("span", { key: '26c116fe67ce645c31eed9e37e5529da6fbc97ea' }, this.label))));
+        return (hAsync(Host, { key: '50c638d4e12ae9011d8efa3606499e906c9cb8c3' }, hAsync(Tag, { key: '79baf88094716a8499801d0becaeb3a5cb3698d4', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && hAsync("pn-icon", { key: '4fd00fa65a2921a5c8197085fc7c2528773b084b', icon: this.icon }), hAsync("slot", { key: '5c72c7d4813f0644a5777b0f4d2575409fcf8c36' }), hAsync("span", { key: 'b6ee7be6b34ac3dc234ec2bc07f948ba612992e4' }, this.label))));
     }
     static get style() { return PnTabStyle0; }
     static get cmpMeta() { return {
@@ -9172,7 +9230,7 @@ class PnTablist {
         return translations$2?.[prop]?.[this.language || en$1];
     }
     render() {
-        return (hAsync(Host, { key: '1de634d581308a90d175beed6e80d87f9503ba46' }, hAsync("nav", { key: 'c372ea946ce171e4a96b1298f14216c6fe95218a', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, hAsync("slot", { key: '1040c9e70f6b4a2542913e0695b775dd07c3d1b9' }), hAsync("div", { key: '94e99bc1079bc23f38a629c966af8e4de9e8689d', class: "pn-tablist-line" }, hAsync("div", { key: '713ab47c16b5bc13035f2e28f2333e9dfdc25177', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), hAsync("div", { key: 'aa6a7585dffad93a48900e6a5fa0f74a40ec18ad', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), hAsync("div", { key: 'e5e45bcd0d68a6bf11d16865f4f2f0ceead66ed5', class: "pn-tablist-scroll" }, hAsync("pn-button", { key: 'a37736842598d230cc392088f5d6ea4ebd82cc4c', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: angle_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), hAsync("pn-button", { key: 'bb5524b809761dc965b5d6c68c57fc2b3c605593', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: angle_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
+        return (hAsync(Host, { key: '6018119e45b053e16de64bae803b3baaaeafa41d' }, hAsync("nav", { key: '747235504d6129e765cb87de674b7ffeac293b20', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, hAsync("slot", { key: 'a4e2d984d78fcf9d31d740865fdeb3df588dc772' }), hAsync("div", { key: '29ee0561e19d48d4f974d3844772ca72ad6577af', class: "pn-tablist-line" }, hAsync("div", { key: 'e6a2b93e8e1c696356ddbaff76ecaa3e7bfd3924', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), hAsync("div", { key: '2d884eeeaff74af37abbb46b6e6d6475aeafee0c', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), hAsync("div", { key: '4674ccbc7aea1a08721b11b121c2a00c56af50a6', class: "pn-tablist-scroll" }, hAsync("pn-button", { key: '8da1137191ccf9f3e76aa05879b76634323553f8', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), hAsync("pn-button", { key: '99ce43b13ad34b0326f58e92354265b8bca047e1', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
     }
     static get watchers() { return {
         "value": ["setValue"],
@@ -9264,7 +9322,7 @@ class PnTextLink {
     }
     get hostElement() { return getElement(this); }
     render() {
-        return (hAsync("a", { key: 'e3eedcb07dbfb7530142b37f6fa11c2df8eabd08', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, hAsync("slot", { key: '830b2a522a8c296540c2831d0b5fae2b35933337' }), this.icon && hAsync("pn-icon", { key: '97b8e1c3037cad1d5bd3b9910762508615a9e191', icon: this.icon })));
+        return (hAsync("a", { key: '88ee2cf28a906eecb3b77f3bb4c25103368a6be1', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, hAsync("slot", { key: 'a0ceda16a5282b86356334e0f68872bdf6ddc8dd' }), this.icon && hAsync("pn-icon", { key: '85a9dc141e364134bb258bbdb5a7b76ad76b37bf', icon: this.icon })));
     }
     static get style() { return PnTextLinkStyle0; }
     static get cmpMeta() { return {
@@ -9343,7 +9401,7 @@ class PnTextarea {
         return !!(this.helpertext?.length || this.error?.length);
     }
     render() {
-        return (hAsync(Host, { key: 'c8cd0f74604646f7ac3ed6e8d4e7846b6d818b02' }, hAsync("div", { key: '48fb0a2c6c30968079633a36b5d6a85ee8a07366', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, hAsync("label", { key: 'fbe7eac959225c7ee7d2a13fc3bdc75aca42363a', class: "pn-textarea-label", htmlFor: this.textareaid }, hAsync("span", { key: '6d433af86539e7bb9b0bdd673f33f3297f79aa69' }, this.label), this.maxlength >= 1 && hAsync("span", { key: '12e7c0a22af8e92136d7c893685d80e741d0c9f1' }, `${this.value?.length || 0}/${this.maxlength}`)), hAsync("textarea", { key: 'c7dca374bf36de54afc9e2183ddb95c0c78c9f61', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (hAsync("p", { key: '9a5c29b6db59b4b881fe4b76f3cfd6dd69d79249', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, hAsync("span", { key: '25a43d7f4ba47550623e4937ae4b8bf830fda6c0' }, this.error || this.helpertext))))));
+        return (hAsync(Host, { key: 'f6402df35f4bd3995044899cdbb88c12a3b0d769' }, hAsync("div", { key: 'a29993e5382b5b6d99d301bab1fb7266439fe83b', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, hAsync("label", { key: '23c3bc4dd4f9cf3ebfbfaedaa864dfdab9b69480', class: "pn-textarea-label", htmlFor: this.textareaid }, hAsync("span", { key: '422340deb784b2c633d9da8b45a8a91e7bfaaed1' }, this.label), this.maxlength >= 1 && hAsync("span", { key: '9dcabac30990f71ba1fbebed9cd7adc6ca0ffd3d' }, `${this.value?.length || 0}/${this.maxlength}`)), hAsync("textarea", { key: '49020658e51cdf29c4da81aacfd588a016bb57b8', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (hAsync("p", { key: '68c4dd53d3b63e90fb4ea586120874c39baedcdf', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, hAsync("span", { key: 'e7dd508206ca9dfb965e47e8ab35fede65e6bf19' }, this.error || this.helpertext))))));
     }
     static get style() { return PnTextareaStyle0; }
     static get cmpMeta() { return {
@@ -9443,7 +9501,7 @@ class PnTile {
         this.pnTile.emit({ click: event });
     }
     render() {
-        return (hAsync(Host, { key: '3aad61d5d06a72a5f2a5cd1808b18c3f7d8e437b' }, hAsync("div", { key: '15c10f8f668544caa32385121caf382626aa1b8f', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, hAsync("div", { key: '9e61d1919dff7343e394ed86b1800284eb750121', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (hAsync("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && hAsync("pn-icon", { color: "blue700", icon: this.icon })), hAsync("div", { key: '59e5cdf5d9fb09045e215758692d5dc402a2a49a', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, hAsync("slot", { key: '00bc0dafa3ae0f89959d0a61d8221ce1e4bc8c2f', name: "illustration" }))), hAsync("div", { key: 'c88f8daa6ee6f309d71a3205299ab98a1157a9a9', class: "pn-tile-text" }, hAsync("h3", { key: '2cb429bf55430c1fcea8965c4cc73b511738d89d', class: "pn-tile-title" }, this.url ? (hAsync("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && hAsync("pn-icon", { key: '5ea4aae5bf9328d68da0ee75990d95c590dc6749', icon: open_in_new, small: true, color: "blue700" })), hAsync("div", { key: 'b9d56f8d2ee862215ef7ae7143d3da8073274fe5', class: "pn-tile-slot" }, !!this.text && hAsync("p", { key: '76b95108a202c183f270868959cb4a7bb5fe0c57', class: "pn-tile-paragraph" }, this.text), hAsync("slot", { key: 'fb3b513fd684adbcbd2af81360437ceec1ff9928' }))))));
+        return (hAsync(Host, { key: 'c24ec58a47482a67e27c1266accd657cf3e8c54a' }, hAsync("div", { key: '23727e1b4212192010c81fcb7af59f60fede0152', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, hAsync("div", { key: 'b4bd44255ab53ef2dfb130e02aac7809aebcc16b', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (hAsync("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && hAsync("pn-icon", { color: "blue700", icon: this.icon })), hAsync("div", { key: '3133bd22a2be6d3625dcbe879f98d6aa0c0de723', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, hAsync("slot", { key: '6a87734eb323047682be191c51d58c1f857df589', name: "illustration" }))), hAsync("div", { key: '2a96a865bc30e22c0d4133273b7bbeea81564bce', class: "pn-tile-text" }, hAsync("h3", { key: 'bb9762e899ddb2b879151031b0ad65e61521956e', class: "pn-tile-title" }, this.url ? (hAsync("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && hAsync("pn-icon", { key: '97a513fdb9c6daedbf5a8b2614a06bbc5baafb01', icon: open_in_new, small: true, color: "blue700" })), hAsync("div", { key: '9d136471d950acd8c7934da681a9a5f332f0fa95', class: "pn-tile-slot" }, !!this.text && hAsync("p", { key: 'abc6a5b7bef04f7708ff22550a8354db625ad94c', class: "pn-tile-paragraph" }, this.text), hAsync("slot", { key: '7df167c895e2b9cde15326b5f22f222e89690971' }))))));
     }
     static get style() { return PnTileStyle0; }
     static get cmpMeta() { return {
@@ -9476,7 +9534,7 @@ const translations$1 = {
     },
 };
 
-const pnToastCss = "pn-toast{position:relative;display:block;overflow:hidden}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast .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-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";
+const pnToastCss = "pn-toast{position:relative;display:block}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast .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-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";
 var PnToastStyle0 = pnToastCss;
 
 /**
@@ -9516,10 +9574,13 @@ class PnToast {
             this.animationDuration = 0;
         else
             this.animationDuration = this.duration;
-        if (this.hide)
-            this.closeToast();
-        else
-            this.openToast();
+        this.hostElement.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.hide)
+                this.closeToast();
+            else
+                this.openToast();
+        });
     }
     /** Event fired when the close button is pressed. */
     close;
@@ -9529,8 +9590,10 @@ class PnToast {
      **/
     hidden;
     async componentWillLoad() {
-        if (this.hide)
+        if (this.hide) {
             this.hostElement.style.height = '0';
+            this.hostElement.style.overflow = 'hidden';
+        }
         if (this.language === null)
             await awaitTopbar(this.hostElement);
         // Any text content at this stage means there is slotted content present.
@@ -9545,19 +9608,18 @@ class PnToast {
     }
     openToast() {
         requestAnimationFrame(() => {
-            const { scrollHeight } = this.hostElement;
+            const { clientHeight } = this.toast;
             const { height } = this.getRect(this.hostElement);
             this.hostElement.style.height = `${height}px`;
             this.isExpanding = true;
-            this.animateToast(true, `${height}px`, `${scrollHeight}px`);
+            this.animateToast(true, `${height}px`, `${clientHeight}px`);
         });
     }
     closeToast() {
-        const { scrollHeight, clientHeight } = this.hostElement;
-        const height = this.isExpanding ? clientHeight : scrollHeight;
+        const { clientHeight } = this.hostElement;
         this.hostElement.style.height = `0px`;
         this.isClosing = true;
-        this.animateToast(false, `${height}px`, `0px`);
+        this.animateToast(false, `${clientHeight}px`, `0px`);
     }
     animateToast(open, startHeight, endHeight) {
         this.cancelAnimations();
@@ -9572,10 +9634,12 @@ class PnToast {
     }
     animationFinish() {
         this.cancelAnimations();
-        if (!this.hide)
-            this.hostElement.style.height = '';
-        else
+        if (this.hide)
             this.hidden.emit(this.hide);
+        else {
+            this.hostElement.style.height = '';
+            this.hostElement.style.overflow = '';
+        }
         this.isClosing = false;
         this.isExpanding = false;
     }
@@ -9616,11 +9680,14 @@ class PnToast {
     translate(prop) {
         return translations$1?.[prop]?.[this.language || en$1] || prop;
     }
+    isMoving() {
+        return this.isClosing || this.isExpanding;
+    }
     hideToast() {
-        return this.hide && !(this.isClosing || this.isExpanding);
+        return this.hide && !this.isMoving();
     }
     render() {
-        return (hAsync(Host, { key: 'c735e200d6cf3061569c3e55caf583abed738725' }, hAsync("output", { key: '7911e4ca88367ea8130a20abda58449a1f7e3098', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && hAsync("pn-icon", { key: 'b064b710d21583eaba8d5ce1c3b162fb1c71f4e4', class: "pn-toast-icon", icon: this.getIcon() }), hAsync("div", { key: '6e24b6771be924b56e2406ac92c5639f7da4b0b6', class: "pn-toast-content" }, this.showTitle() && hAsync("h4", { key: 'eb24bcbbd70b1b77e86c2598569f443bd7d1bdfb', class: "pn-toast-heading" }, this.heading), this.text && hAsync("p", { key: '713b372860897ef9bc55f401282765bc5684b6f6', class: "pn-toast-text" }, this.text), hAsync("slot", { key: 'e567f676f28d20370407fc481c52c92bc34a06e1' })), this.showIllustration() && hAsync("pn-illustration", { key: '6b0b4f9c1f588f71eb1154b6170994f59aaaae4a', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (hAsync("button", { key: '4111381fb279dc2d5abe520188869133aa948246', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, hAsync("pn-icon", { key: '020fe8b66ce1d955dcb5420c44b0b4b5b1845ab9', icon: close }))))));
+        return (hAsync(Host, { key: 'b0f490bf139ccd8682e8d43f75ae99f6d5e4a054' }, hAsync("div", { key: '8bdd1b6525b579d06b82d762e56c0ec34c4bb822', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && hAsync("pn-icon", { key: 'fc5626dbbe0f5a5939179f02be8e1e70eec22ebd', class: "pn-toast-icon", icon: this.getIcon() }), hAsync("div", { key: 'f1aabfdd5d9e62d895cd4cfdaf31a7abb92e0749', class: "pn-toast-content" }, this.showTitle() && hAsync("h4", { key: '6267fa5e2eb67c8a0d16506db0586f9b2fa6b18a', class: "pn-toast-heading" }, this.heading), this.text && hAsync("p", { key: 'b1a2ee4468223afc9c43bb57f3aa72c38d86cb1c', class: "pn-toast-text" }, this.text), hAsync("slot", { key: '2508212f2afc63d3faa5a189dd9ddba33cff3eaa' })), this.showIllustration() && hAsync("pn-illustration", { key: 'bee93e5623aa57d1a1f765dd6ad13a8cdd1ea1d8', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (hAsync("button", { key: '0db9441d732d60bd37446c92b0df34e44f1f61e9', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, hAsync("pn-icon", { key: 'a1325ada64366284633932d4ba775e67b3ae6f59', icon: close }))))));
     }
     static get watchers() { return {
         "hide": ["handleHide"]
@@ -9699,7 +9766,7 @@ class PnToggleSwitch {
         return this.showHelpertext() ? this.idHelper : null;
     }
     render() {
-        return (hAsync(Host, { key: '9806bc50780935f442660701539941efd05d92d5' }, hAsync("div", { key: 'a2babfadbf6443da619b35f9d8cb09a7b0bd4a59', class: "pn-toggle" }, this.label && (hAsync("div", { key: '525510807f8f7e505b589c8055f277b196f813cd', class: "pn-toggle-content" }, hAsync("label", { key: 'cc58536e57de5a852762de90c5edf0ad2f92a05f', htmlFor: this.toggleid, class: "pn-toggle-label" }, hAsync("span", { key: 'a43dba51d8becebf1f508300ccb72530400535c7' }, this.label)), hAsync("p", { key: 'd86c250e53ceb45830444a13a8f2c609173542de', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && hAsync("span", { key: '02a55f8a4c9da87b33b31ecd3d30ad6a73d70714' }, this.helpertext), hAsync("slot", { key: '065675c0046d2cbdd581ef0c5ec745a5b03393eb', name: "helpertext" })))), hAsync("div", { key: '6cbc83780caacb03d778aa2b9f882858231206ca', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, hAsync("input", { key: '1a7062923c2668cb41b4c4b14f948c4074cf416e', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), hAsync("div", { key: '3a85ff013cb29f5c7bef3d088ec782a53b3924ac', class: "pn-toggle-bg" }), hAsync("div", { key: '955a78cfd16980bd437e03e51f3cde49185fe954', class: "pn-toggle-circle" }, hAsync("svg", { key: 'fc0802cf056f5413c1228584c53abae8b21a8813', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, hAsync("polyline", { key: 'e881ac5ae0b5838293ac2e5af74a0c56ddd85687', points: "4,12 9,17 20,6", "stroke-width": "3" })), hAsync("pn-spinner", { key: '78e5dd0484be70fc75315475daffed5b2e63c8bb', size: 1.125 }))))));
+        return (hAsync(Host, { key: 'ab6fe1d4472bf8a817d28c503dd4268af259c34d' }, hAsync("div", { key: 'f16a8d97ba68161a192f1b1b3b254c21f0ff804b', class: "pn-toggle" }, this.label && (hAsync("div", { key: 'c3666dc49b09637cc10b0bdc12e573d57e005268', class: "pn-toggle-content" }, hAsync("label", { key: '977c13dfd61a8b10a8dd2606a750d0716fe30adb', htmlFor: this.toggleid, class: "pn-toggle-label" }, hAsync("span", { key: '3c4399a7456fc446f8279dd7d46b06e5fe663e06' }, this.label)), hAsync("p", { key: 'e300cfac23f9f290641f8fc345611a1cebf5b173', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && hAsync("span", { key: '15f3b3bceafb9f868d16d4623cc977b58add2a6c' }, this.helpertext), hAsync("slot", { key: '6a19bcbc616bf74371d145545605bfbe6873a707', name: "helpertext" })))), hAsync("div", { key: '6b4590a7e6b32a684d11661baa9ced6b482b17d3', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, hAsync("input", { key: 'afa8576dfd3ae59631ae54049b95a268dc139e95', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), hAsync("div", { key: 'ad9ae48c3b5f2a72b5067f71b34f8410766f09c8', class: "pn-toggle-bg" }), hAsync("div", { key: '644f991914000783c81dc3f3c0a84406e117c177', class: "pn-toggle-circle" }, hAsync("svg", { key: '9d6c808e21fb87486ceec83deb990fcbc738a8f7', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, hAsync("polyline", { key: '796e5a93439baf1bbb88cf7ac50f2960a7ca819c', points: "4,12 9,17 20,6", "stroke-width": "3" })), hAsync("pn-spinner", { key: '55995adf95f2de9658a54f06dd6156fd006aed4b', size: 1.125 }))))));
     }
     static get watchers() { return {
         "toggleid": ["handleHelperId"]
@@ -9801,7 +9868,7 @@ class PnTooltip {
         }, time);
     }
     render() {
-        return (hAsync("button", { key: '7b0253721fbc44e83afc6daa41d984e9dbf16c0b', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, hAsync("pn-icon", { key: 'd6086755274289dad52757b42aa508927d0746d2', icon: this.getSymbol(), "data-simple": !!this.tooltip }), hAsync("div", { key: 'e155c88aa2ee2b33c5622741efa59bb07ba548c7', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, hAsync("div", { key: '62a3db64ee0d4e3da5d3e2f414850f3792235f1c', hidden: !!this.tooltip }, hAsync("slot", { key: 'e769400a4d5e1ceddc7fb6a953fe37eeea1b4218' })))));
+        return (hAsync("button", { key: 'a421dbdcba2a38e9adc8f7364c5ff185372f1deb', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, hAsync("pn-icon", { key: '61409db0c58289bf1b606e0dc323266c0322b64b', icon: this.getSymbol(), "data-simple": !!this.tooltip }), hAsync("div", { key: '2164d90ba6dabac1309d751772c9ae20c9c118c1', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, hAsync("div", { key: 'e30e4bdee6fe1666b5ad6154773a06fd5649dd92', hidden: !!this.tooltip }, hAsync("slot", { key: '4456ff966d227bbca13599565c9ceb0adb6c91d6' })))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -9939,7 +10006,7 @@ class PnZipcodeSearch {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'ab60b367efe4208942f13a524f10325323d1f499' }, hAsync("pn-search-field", { key: '6449ae03e55e4bb228b70245863aa0448ce87957', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
+        return (hAsync(Host, { key: 'cc6f1ccb014330d11b8b75fa09e2f39da079a7f4' }, hAsync("pn-search-field", { key: '60bbf5751e937c820afbf997a3f51ba9ac85d762', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
     }
     static get style() { return PnZipcodeSearchStyle0; }
     static get cmpMeta() { return {