@swisspost/design-system-components 9.0.0-next.23 → 9.0.0-next.25

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-2f80afc8.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postTooltip = require('./post-tooltip-bedfc58a.js');
+require('./index-d6bf2c66.js');
+require('./package-c7d204b7.js');
 require('./attribute-observer-6d8b886b.js');
 require('./index-23e36ff7.js');
 require('./constants-238701d3.js');

package/dist/cjs/{slide-8ae17ee4.js → slide-cd1f09b3.js}

@@ -3,20 +3,20 @@
 const easing = 'ease';
 const duration = 500;
 const fill = 'forwards';
-function slideUp(el, translateSize = '100%') {
+function slideUp(el, translateSize = '-100%') {
     return el.animate([
-        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-        { transform: 'translateY(0)' }, // End position
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
     ], {
         duration: duration,
         easing,
         fill,
     });
 }
-function slideDown(el, translateSize = '100%') {
+function slideDown(el, translateSize = '-100%') {
     return el.animate([
-        { transform: 'translateY(0)' }, // Starting position (no translation)
-        { transform: `translateY(${translateSize})` }, // End position
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
     ], {
         duration: duration,
         easing,

package/dist/collection/animations/slide.js

@@ -1,20 +1,20 @@
 const easing = 'ease';
 const duration = 500;
 const fill = 'forwards';
-export function slideUp(el, translateSize = '100%') {
+export function slideUp(el, translateSize = '-100%') {
     return el.animate([
-        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-        { transform: 'translateY(0)' }, // End position
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
     ], {
         duration: duration,
         easing,
         fill,
     });
 }
-export function slideDown(el, translateSize = '100%') {
+export function slideDown(el, translateSize = '-100%') {
     return el.animate([
-        { transform: 'translateY(0)' }, // Starting position (no translation)
-        { transform: `translateY(${translateSize})` }, // End position
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
     ], {
         duration: duration,
         easing,

package/dist/collection/components/post-back-to-top/post-back-to-top.js

@@ -18,10 +18,10 @@ export class PostBackToTop {
     // Watch for changes in belowFold
     watchBelowFold(newValue) {
         if (newValue) {
-            slideUp(this.host, this.translateY);
+            slideDown(this.host, this.translateY);
         }
         else {
-            slideDown(this.host, this.translateY);
+            slideUp(this.host, this.translateY);
         }
     }
     scrollToTop() {

package/dist/collection/components/post-header/post-header.css

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:24px}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:"";position:absolute;width:100%;height:1px;background-color:#e1e0dc;bottom:-1px;z-index:1}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:18px;box-shadow:var(--post-device-elevation-300)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:12px;flex-wrap:wrap;gap:16px}.local-header.local-header-mobile-extended::after{bottom:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:16px}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:12px !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:8px !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:28px !important;line-height:34px !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:20px !important;max-width:calc(100vw - 8px - 16px)}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--global-header-reduced-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:#fff;inset-block-end:calc(100dvh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100dvh - var(--header-height));display:flex;flex-direction:column}.navigation.extended.scroll-y{overflow-y:auto}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:#fafafa;gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}
+*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:24px}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:"";position:absolute;width:100%;height:1px;background-color:#e1e0dc;bottom:-1px;z-index:1}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:18px;box-shadow:var(--post-device-elevation-300)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:12px;flex-wrap:wrap;gap:16px}.local-header.local-header-mobile-extended::after{bottom:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:16px}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:12px !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:8px !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:28px !important;line-height:34px !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:20px !important;max-width:calc(100vw - 8px - 16px)}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--global-header-reduced-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;inset-block-start:var(--header-height);overflow:hidden}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;height:calc(100dvh - var(--header-height))}.navigation.extended.scroll-y>div{overflow-y:auto;overflow-x:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:#fafafa;gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}

package/dist/collection/components/post-header/post-header.js

@@ -20,59 +20,75 @@ export class PostHeader {
     }
     firstFocusableEl;
     lastFocusableEl;
-    scrollListenerElement = null;
-    overflowElement = null;
     mobileMenu;
     mobileMenuAnimation;
-    throttledScroll = () => this.handleScrollEvent();
     throttledResize = throttle(50, () => this.handleResize());
+    scrollParentResizeObserver;
+    localHeaderResizeObserver;
+    get scrollParent() {
+        let element = this.host.parentElement;
+        while (element) {
+            const hasScrollParentAttr = element.hasAttribute('data-is-post-header-scroll-parent');
+            const overflow = getComputedStyle(element).overflowY;
+            if (hasScrollParentAttr || ['auto', 'scroll'].includes(overflow)) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return document.documentElement;
+    }
+    host;
+    frozeBody(isMobileMenuExtended) {
+        if (isMobileMenuExtended) {
+            this.scrollParent.setAttribute('data-is-post-header-scroll-parent', '');
+            this.scrollParent.style.overflow = 'hidden';
+            this.host.addEventListener('keydown', this.keyboardHandler.bind(this));
+        }
+        else {
+            this.scrollParent.style.overflow = '';
+            this.scrollParent.removeAttribute('data-is-post-header-scroll-parent');
+            this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
+        }
+    }
+    /**
+     * An event emitted when the device has changed
+     */
+    postUpdateDevice;
     componentWillRender() {
-        this.scrollListenerElement = this.getScrollParent();
-        this.overflowElement =
-            this.scrollListenerElement === document
-                ? document.documentElement
-                : this.scrollListenerElement;
-        this.scrollListenerElement.addEventListener('scroll', this.throttledScroll, { passive: true });
         window.addEventListener('resize', this.throttledResize, { passive: true });
+        window.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+            passive: true,
+        });
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+            passive: true,
+        });
         this.handleResize();
         this.handleScrollEvent();
         this.getFocusableElements();
     }
     componentDidLoad() {
-        this.updateLocalHeaderHeight();
         // Check if the mega dropdown is expanded
-        document.addEventListener('postToggleMegadropdown', (event) => {
-            this.megadropdownOpen = event.detail.isVisible;
-        });
+        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
         this.host.addEventListener('click', this.handleLinkClick.bind(this));
+        this.handleScrollParentResize();
+        this.handleLocalHeaderResize();
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         this.mobileMenuExtended = false;
-        this.overflowElement.style.overflow = '';
-        this.host.removeEventListener('keydown', e => {
-            this.keyboardHandler(e);
-        });
+        this.scrollParent.style.overflow = '';
+        this.scrollParent.removeAttribute('data-is-post-header-scroll-parent');
+        window.removeEventListener('resize', this.throttledResize);
+        window.removeEventListener('scroll', this.handleScrollEvent.bind(this));
+        this.scrollParent.removeEventListener('scroll', this.handleScrollEvent.bind(this));
+        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
+        this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
         this.host.removeEventListener('click', this.handleLinkClick.bind(this));
+        if (this.scrollParentResizeObserver)
+            this.scrollParentResizeObserver.disconnect();
+        if (this.localHeaderResizeObserver)
+            this.localHeaderResizeObserver.disconnect();
     }
-    host;
-    frozeBody(isMobileMenuExtended) {
-        this.overflowElement.style.overflow = isMobileMenuExtended ? 'hidden' : '';
-        if (isMobileMenuExtended) {
-            this.host.addEventListener('keydown', e => {
-                this.keyboardHandler(e);
-            });
-        }
-        else {
-            this.host.removeEventListener('keydown', e => {
-                this.keyboardHandler(e);
-            });
-        }
-    }
-    /**
-     * An event emitted when the device has changed
-     */
-    postUpdateDevice;
     /**
      * Toggles the mobile navigation.
      */
@@ -92,6 +108,9 @@ export class PostHeader {
         if (!this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
     }
+    megedropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
+    }
     // Get all the focusable elements in the post-header mobile menu
     getFocusableElements() {
         // Get elements in the correct order (different as the DOM order)
@@ -122,25 +141,15 @@ export class PostHeader {
             }
         }
     }
-    getScrollParent() {
-        let parent = this.host.parentElement;
-        if (parent.tagName === 'BODY') {
-            parent = document;
-        }
-        return parent;
-    }
     handleScrollEvent() {
-        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-        const st = Math.max(0, this.scrollListenerElement instanceof Document
-            ? this.scrollListenerElement.documentElement.scrollTop
-            : this.scrollListenerElement.scrollTop);
-        this.host.style.setProperty('--header-scroll-top', `${st}px`);
+        this.host.style.setProperty('--header-scroll-top', `${this.scrollParent.scrollTop}px`);
     }
     updateLocalHeaderHeight() {
-        requestAnimationFrame(() => {
-            const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
-            this.host.style.setProperty('--local-header-height', `${mhh}px`);
-        });
+        const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
+        this.host.style.setProperty('--local-header-height', `${localHeaderHeight}px`);
+    }
+    updateScrollParentHeight() {
+        this.host.style.setProperty('--header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
     }
     handleLinkClick(event) {
         const target = event.target;
@@ -177,7 +186,6 @@ export class PostHeader {
             this.toggleMobileMenu();
             this.mobileMenuAnimation.finish(); // no animation
         }
-        this.updateLocalHeaderHeight();
         // Apply only on change for doing work only when necessary
         if (newDevice !== previousDevice) {
             this.device = newDevice;
@@ -187,6 +195,19 @@ export class PostHeader {
             });
         }
     }
+    handleScrollParentResize() {
+        if (this.scrollParent) {
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight.bind(this));
+            this.scrollParentResizeObserver.observe(this.scrollParent);
+        }
+    }
+    handleLocalHeaderResize() {
+        const localHeader = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeader) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight.bind(this));
+            this.localHeaderResizeObserver.observe(localHeader);
+        }
+    }
     switchLanguageSwitchMode() {
         const variant = this.device === 'desktop' ? 'menu' : 'list';
         Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
@@ -201,10 +222,10 @@ export class PostHeader {
         if (!this.megadropdownOpen) {
             navigationClasses.push('scroll-y');
         }
-        return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
+        return (h("div", { class: navigationClasses.join(' ') }, h("div", { ref: el => (this.mobileMenu = el) }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
     }
     render() {
-        return (h(Host, { key: 'd92b8f3fbf93f1defc6eff9d7283c7452962f1d9', version: version }, h("div", { key: '2d4d19e4aab0bb294c95b4ed672aaac0d0ad23e9', class: "global-header" }, h("div", { key: '069ae5f4ad46baa0245dd97966738a1d4be8d954', class: "global-sub" }, h("div", { key: 'f48c56b8dab12bc8e9a19628d4bc9f7a99ebfd8a', class: "logo" }, h("slot", { key: '663d5f7aa39ec7ff68dd90f24472740ab49d6838', name: "post-logo" }))), h("div", { key: '6a0c11629c5d58d63b49cf99f87fa5858d05c5b0', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ecc46275f314af761ab96fc209133e5f011d25e1', name: "meta-navigation" }), h("slot", { key: '92d41365424c09e07750be9f561d08d062d25c37', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '6c4d7640261933e939a0cde1cf73d26024e4fcfc', name: "post-language-switch" }), h("div", { key: '39e2ee687469c80f36559d3e50210203e20e2854', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'f8e746e4dfef7f2427a78ac40b81f4cfd9422d95', name: "post-togglebutton" })))), h("div", { key: '90ca0666714d3e87600bd0ba160dcec289d9ed98', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '08eb843b431faceac96aaada6714bd86c26f41f5', name: "title" }), h("div", { key: '04542458a9e4aa804daf74d17471a3849e62071e', class: "local-sub" }, h("slot", { key: 'c8c2bc0a9d8433776241c1121a04feb13c34b30c', name: "local-controls" }), h("slot", { key: 'c0b60ab9499dbb9bf08a7e104bac218accd16861' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: '859829bf3a75e13fc6f2501806167936be900f1b', version: version }, h("div", { key: '06dba64e897db49bd4a8db56786af8daf24b17ed', class: "global-header" }, h("div", { key: 'ad8187bf4cef41ea869109515192349eac5bb896', class: "global-sub" }, h("div", { key: '629afbf9b084e66665b407d597df17cef57d3c8a', class: "logo" }, h("slot", { key: '33f0d3d3ed83057b0a6e235aaf3313a8bf5347ed', name: "post-logo" }))), h("div", { key: '9acf53aa0bb748678436baaf9023cba4a65fddec', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '44d42df5a0c25b9892800eeb7bba8cd445a39bef', name: "meta-navigation" }), h("slot", { key: '2d0732014f827e989ce90ea1262e7957933bfb15', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'f56457752c256e0b620f473e63b9ca6b9fe16efa', name: "post-language-switch" }), h("div", { key: 'b570047b4492e461ace9676e8ae3e63461f9c7ce', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '681840ffdee4e11d68eb16ecddcf1869a0cfd691', name: "post-togglebutton" })))), h("div", { key: 'e90406e7508603222e8ab37bf790bb8a3ecc9614', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '0115ccd0047409e5a10219ea61c6c09996711e1b', name: "title" }), h("div", { key: '2bd5d0e83650c30de7cd7628f324d726337a28b2', class: "local-sub" }, h("slot", { key: '0578b7fc28a6caa821d131b43b031036250750a8', name: "local-controls" }), h("slot", { key: 'c5ddceb8c56c76a31657633890e8562981e34249' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-language-option/post-language-option.js

@@ -33,11 +33,18 @@ export class PostLanguageOption {
         if (!this.name && this.isNameRequired()) {
             throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
         }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
     }
     /**
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
      */
     postChange;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive;
     /**
      * Selects the language option programmatically.
      */
@@ -58,7 +65,7 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: 'f987cfc18bb86866781e0668516e86f89be6241b', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: '23bf186d9cc718b2697cbc5bc54b44f6c9ead54f', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
     static get is() { return "post-language-option"; }
     static get originalStyleUrls() {
@@ -182,6 +189,21 @@ export class PostLanguageOption {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "postLanguageOptionInitiallyActive",
+                "name": "postLanguageOptionInitiallyActive",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the language option is initially active. The payload is the ISO 639 code of the language."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/post-language-switch/post-language-switch.css

@@ -1 +1 @@
-:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:16px;width:16px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}
+:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}

package/dist/collection/components/post-language-switch/post-language-switch.js

@@ -19,52 +19,65 @@ export class PostLanguageSwitch {
     }
     validateVariant() {
         checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
-    }
-    connectedCallback() {
-        this.updateChildrenVariant();
-        // Get the active language based on children's active state
-        const activeLanguageOption = this.host.querySelector('post-language-option[active]:not([active="false"])');
-        if (activeLanguageOption)
-            this.activeLang = activeLanguageOption.getAttribute('code');
-    }
-    // Update post-language-option variant to have the correct style
-    updateChildrenVariant() {
-        this.host.querySelectorAll('post-language-option').forEach(el => {
-            el.setAttribute('variant', this.variant);
-        });
-    }
-    componentWillUpdate() {
         this.updateChildrenVariant();
     }
     componentDidLoad() {
         this.validateCaption();
         this.validateDescription();
         this.validateVariant();
-        // Detects a change in the active language
-        this.host.addEventListener('postChange', (el) => {
-            this.activeLang = el.detail;
-            // Update the active state in the children post-language-option components
-            this.host.querySelectorAll('post-language-option').forEach(lang => {
-                if (lang.code && lang.code === this.activeLang) {
-                    lang.setAttribute('active', 'true');
-                }
-                else {
-                    lang.setAttribute('active', 'false');
-                }
-            });
-            // Hides the dropdown when an option has been clicked
-            if (this.variant === 'menu') {
-                const menu = this.host.shadowRoot.querySelector('post-menu');
-                menu.hide();
+        // Initially set variants and active language
+        // Handles cases where the language-switch is rendered after the language-options have been rendered
+        this.updateChildrenVariant();
+        this.updateActiveLanguage();
+    }
+    handlePostChange(event) {
+        this.activeLang = event.detail;
+        // Update the active state in the children post-language-option components
+        this.languageOptions.forEach(lang => {
+            if (lang.code && lang.code === this.activeLang) {
+                lang.setAttribute('active', '');
             }
+            else {
+                lang.removeAttribute('active');
+            }
+        });
+        // Hides the dropdown when an option has been clicked
+        if (this.variant === 'menu') {
+            const menu = this.host.shadowRoot.querySelector('post-menu');
+            menu.hide();
+        }
+    }
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event) {
+        this.activeLang = event.detail;
+    }
+    get languageOptions() {
+        return this.host.querySelectorAll('post-language-option');
+    }
+    get activeLanguageOption() {
+        return this.host.querySelector('post-language-option[active]:not([active="false"])');
+    }
+    handleSlotChange() {
+        this.updateActiveLanguage();
+    }
+    updateActiveLanguage() {
+        this.activeLang = this.activeLanguageOption.getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.languageOptions.forEach(el => {
+            el.setAttribute('variant', this.variant);
         });
     }
     menuId = `p${nanoid(11)}`;
     renderList() {
-        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", null))));
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", { onSlotchange: () => this.handleSlotChange() }))));
     }
     renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", null))));
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", { onSlotchange: () => this.handleSlotChange() }))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
@@ -161,4 +174,19 @@ export class PostLanguageSwitch {
                 "methodName": "validateVariant"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "postChange",
+                "method": "handlePostChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "postLanguageOptionInitiallyActive",
+                "method": "handleInitiallyActive",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/post-mainnavigation/post-mainnavigation.css

@@ -1 +1 @@
-post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item post-megadropdown-trigger button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media screen and (min-width: 1024px){post-mainnavigation{display:block}post-mainnavigation nav{max-width:100%;background:#fff;max-height:var(--main-navigation-height);user-select:none;transition:margin 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{z-index:4;position:absolute;inset-block-end:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:#fff;padding:16px;box-shadow:var(--post-device-elevation-500);line-height:100%;height:var(--main-navigation-height)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{background-color:ButtonFace !important}post-mainnavigation .left-scroll-button button:hover,post-mainnavigation .right-scroll-button button:hover{background-color:Highlight !important}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button.d-none,post-mainnavigation .right-scroll-button.d-none{display:none}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}}@media screen and (min-width: 1024px){post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}}@media screen and (min-width: 1024px){post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--main-navigation-height);gap:4px;font-size:16px;z-index:4}post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}
+post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item post-megadropdown-trigger button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media screen and (min-width: 1024px){post-mainnavigation{display:block;overflow-x:hidden}post-mainnavigation nav{max-width:100%;background:#fff;max-height:var(--main-navigation-height);user-select:none;transition:margin 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{z-index:4;position:absolute;inset-block-end:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:#fff;padding:16px;box-shadow:var(--post-device-elevation-500);line-height:100%;height:var(--main-navigation-height)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{background-color:ButtonFace !important}post-mainnavigation .left-scroll-button button:hover,post-mainnavigation .right-scroll-button button:hover{background-color:Highlight !important}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button.d-none,post-mainnavigation .right-scroll-button.d-none{display:none}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}}@media screen and (min-width: 1024px){post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}}@media screen and (min-width: 1024px){post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--main-navigation-height);gap:4px;font-size:16px;z-index:4}post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.23";
+const version = "9.0.0-next.25";
 
 export { version as v };

package/dist/components/post-back-to-top2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as slideUp, a as slideDown } from './slide.js';
+import { s as slideDown, a as slideUp } from './slide.js';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
@@ -27,10 +27,10 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
     // Watch for changes in belowFold
     watchBelowFold(newValue) {
         if (newValue) {
-            slideUp(this.host, this.translateY);
+            slideDown(this.host, this.translateY);
         }
         else {
-            slideDown(this.host, this.translateY);
+            slideUp(this.host, this.translateY);
         }
     }
     scrollToTop() {