@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.35

package/loaders/post-mainnavigation.js

@@ -2,253 +2,165 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postMainnavigationCss = "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>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;outline-offset:-2px !important}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 (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;overflow-x:hidden}post-mainnavigation nav{max-width:100%;background:#fff;max-height:var(--post-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(--post-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(--post-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%;inset-inline-start: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}";
+const postMainnavigationCss = "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>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;outline-offset:-2px !important}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 (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}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(--post-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%;inset-inline-start: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 .scroll-control{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}";
 const PostMainnavigationStyle0 = postMainnavigationCss;
 
 const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
 const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
-const NAVIGATION_LIST_SELECTOR = 'post-list > [role="list"]:not(post-megadropdown *)';
-const NAVIGATION_ITEM_SELECTOR = 'post-list-item :is(a, button):not(post-megadropdown *)';
 const PostMainnavigation$1 = /*@__PURE__*/ proxyCustomElement(class PostMainnavigation extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.canScrollLeft = false;
         this.canScrollRight = false;
-        this.translationAmount = 0;
+        this.scrollRight = this.scrollRight.bind(this);
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.handleMutations = this.handleMutations.bind(this);
+        this.checkScrollability = this.checkScrollability.bind(this);
+        this.resizeObserver = new ResizeObserver(this.checkScrollability);
+        this.mutationObserver = new MutationObserver(this.handleMutations);
     }
-    header;
-    navbar;
-    rightScrollButton;
-    leftScrollButton;
-    scrollRepeatInterval;
-    navbarDisableTimer;
-    resizeObserver;
-    mutationObserver = new MutationObserver(async (mutations) => {
-        // Wait for all elements to be hydrated
-        await Promise.all(mutations
-            .flatMap((mutation) => Array.from(mutation.addedNodes))
-            .map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
-        // Recalculate scrollability after DOM changes
-        this.checkScrollability();
-    });
-    get host() { return this; }
-    /**
-     * Update navbar translation when 'translateAmount' changes and recalculate scrollability
-     */
-    onTranslateAmountChanges(value) {
-        this.navbar.style.marginInlineStart = `-${value}px`;
-        this.checkScrollability();
+    componentDidLoad() {
+        setTimeout(() => {
+            this.fixLayoutShift();
+            this.checkScrollability();
+        });
+        // Observe the navbar for size changes
+        this.resizeObserver.observe(this.navbar);
+        // Observe the navabar for mutation changes
+        this.mutationObserver.observe(this.navbar, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        // Ensure the scroll buttons are correctly displayed or hidden whenever the navbar is scrolled
+        this.navbar.addEventListener('scrollend', this.checkScrollability);
     }
     /**
-     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
-     * This ensures that we can interact with the header for mobile menu toggling.
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
      */
-    connectedCallback() {
-        this.header = this.host.closest('post-header');
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+        this.navbar.removeEventListener('scrollend', this.checkScrollability);
     }
     /**
-     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     * Stops the repeated scrolling when the mouse button is released.
      */
-    disconnectedCallback() {
-        this.header = null;
-        this.mutationObserver.disconnect();
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
     }
-    componentDidLoad() {
-        setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
-        this.resizeObserver = new ResizeObserver(() => {
-            this.checkScrollability();
+    async handleMutations(mutations) {
+        const addedNodes = mutations.flatMap((mutation) => {
+            return Array.from(mutation.addedNodes);
         });
-        // Observe the navbar and the navigation list for size changes
-        if (this.navbar) {
-            this.resizeObserver.observe(this.navbar);
-            const navList = this.navigationList;
-            if (navList) {
-                this.resizeObserver.observe(navList);
-            }
-        }
-        this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        // Wait for all elements to be hydrated
+        await Promise.all(addedNodes.map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
         this.fixLayoutShift();
-        // Handle focus changes and adjust scroll as needed
-        this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
+        this.checkScrollability();
     }
-    // Hack that duplicates navigation elements to fix the layout shift on active elements
+    get navigationItems() {
+        return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
+    }
+    /**
+     * Hack to fix the layout shift due to bold text on active elements
+     */
     fixLayoutShift() {
-        // Select first level of main navigation elements, both the links and the megadropdown trigger buttons
-        const children = this.host.querySelectorAll('nav > post-list > div > post-list-item > a, nav > post-list > div > post-list-item > post-megadropdown-trigger > button');
-        // Update HTML so that the content is duplicated
-        children.forEach(child => (child.innerHTML = `<span class="nav-el-active">${child.innerHTML}</span><span class="nav-el-inactive"aria-hidden="true">${child.innerHTML}</span>`));
+        this.navigationItems
+            .filter(item => !item.matches(':has(.nav-el-active)'))
+            .forEach(item => {
+            item.innerHTML = `
+          <span class="nav-el-active">${item.innerHTML}</span>
+          <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
+        `;
+        });
     }
     handleBackButtonClick() {
-        if (this.header)
-            this.header.toggleMobileMenu();
+        const header = this.navbar.closest('post-header');
+        if (header)
+            header.toggleMobileMenu();
     }
     /**
-     * Moves focus on the navbar and adjusts scrolling to bring focused element into view.
+     * Returns whether scrolling is enabled in either the left or right direction.
      */
-    adjustTranslation(e) {
-        const focusedElement = e.target;
-        if (!this.canScroll || !focusedElement.matches(NAVIGATION_ITEM_SELECTOR))
-            return;
-        // We need to move the element into the view before it is focused to avoid browser default behavior
-        e.preventDefault();
-        this.withoutTransition(() => {
-            // Try scrolling in both directions, only the necessary translation will actually occur
-            this.translateRightTo(focusedElement);
-            this.translateLeftTo(focusedElement);
-            focusedElement.focus();
-        });
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
     }
     /**
      * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
      */
     checkScrollability() {
-        const { scrollWidth, clientWidth } = this.navbar;
-        const couldScroll = this.canScroll;
+        const { scrollLeft, scrollWidth, clientWidth } = this.navbar;
         if (scrollWidth === clientWidth) {
             // If scroll width equals client width, scrolling is disabled in both directions
             this.canScrollLeft = this.canScrollRight = false;
         }
         else {
-            this.canScrollLeft = this.translationAmount > 0; // Scrolling left is possible if not at the start
-            this.canScrollRight = clientWidth + this.translationAmount < scrollWidth; // Scrolling right is possible if not at the end
+            this.canScrollLeft = Math.floor(scrollLeft) > 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = Math.ceil(clientWidth + scrollLeft) < scrollWidth; // Scrolling right is possible if not at the end
         }
-        if (couldScroll && !this.canScroll) {
-            this.withoutTransition(() => (this.translationAmount = 0));
-        }
-    }
-    /**
-     * Returns whether scrolling is enabled in either the left or right direction.
-     */
-    get canScroll() {
-        return this.canScrollLeft || this.canScrollRight;
     }
     /**
      * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
      */
-    handleScrollButtonClick(direction) {
-        if (!this.canScroll)
+    handleScrollButtonClick(e, direction) {
+        if (!this.canScroll || e.button !== 0)
             return;
         // Disable interaction with the navbar during scrolling
-        this.disableNavbar();
-        // Perform the initial scroll action
-        this.scroll(direction);
+        this.temporarilyDisableNavbar();
+        // Set up the correct scroll function
+        const scroll = direction === 'right' ? this.scrollRight : this.scrollLeft;
+        scroll();
         // Repeat the scrolling action while the button is held down
         this.scrollRepeatInterval = setInterval(() => {
-            this.scroll(direction);
+            scroll();
         }, SCROLL_REPEAT_INTERVAL);
     }
-    /**
-     * Stops the repeated scrolling when the mouse button is released.
-     */
-    stopScrolling() {
-        if (this.scrollRepeatInterval)
-            clearInterval(this.scrollRepeatInterval);
-    }
-    scroll(direction) {
-        const navigationItems = Array.from(this.navigationItems);
-        if (direction === 'left')
-            navigationItems.reverse();
-        for (const item of navigationItems) {
-            const couldScroll = direction === 'left' ? this.translateLeftTo(item, true) : this.translateRightTo(item, true);
-            if (couldScroll)
-                break;
+    scrollRight() {
+        const scrollRightLeftEdge = document
+            .querySelector('.scroll-right')
+            .getBoundingClientRect().left;
+        for (const navigationItem of this.navigationItems) {
+            const { right, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = right - 0.25 * width < scrollRightLeftEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: right - scrollRightLeftEdge });
+                return;
+            }
         }
     }
-    translateRightTo(navigationItem, skipSmallTranslation = false) {
-        const listItem = navigationItem.closest('post-list-item');
-        // Calculate the right edge position of the list item relative to the left of the screen
-        const rightEdgePosition = listItem.offsetLeft + listItem.offsetWidth;
-        // Calculate the last visible position on the screen, right before the right scroll button
-        const lastVisiblePosition = this.host.clientWidth - this.rightScrollButton.clientWidth;
-        // If the item is already fully visible, no translation is needed
-        if (rightEdgePosition < lastVisiblePosition)
-            return false;
-        const translationIncrease = rightEdgePosition - lastVisiblePosition + 1; // + 1 because offset values are rounded
-        // If the required scroll distance is too small (less than half the width of the item), avoid unnecessary scroll
-        if (skipSmallTranslation && translationIncrease < listItem.clientWidth / 2)
-            return false;
-        // Calculate the maximum translation amount to prevent scrolling past the end of the content
-        const maximumTranslation = this.navbar.scrollWidth - this.host.clientWidth;
-        // Adjust the translation amount, ensuring it doesn't exceed the maximum scrollable area
-        const { marginRight } = getComputedStyle(this.navigationList);
-        this.translationAmount =
-            Math.min(this.translationAmount + translationIncrease, maximumTranslation) +
-                parseInt(marginRight);
-        return true;
-    }
-    translateLeftTo(navigationItem, skipSmallTranslation = false) {
-        const listItem = navigationItem.closest('post-list-item');
-        // Get the left edge position of the list item relative to the left of the screen
-        const leftEdgePosition = listItem.offsetLeft;
-        // Calculate the first visible position on the screen to the left, right after the left scroll button
-        const firstVisiblePosition = this.leftScrollButton.clientWidth;
-        // If the item is already fully visible, no translation is needed
-        if (leftEdgePosition > firstVisiblePosition)
-            return false;
-        const translationDecrease = firstVisiblePosition - leftEdgePosition + 1; // + 1 because offset values are rounded
-        // If the required scroll distance is too small (less than half the width of the item), don't perform the scroll
-        if (skipSmallTranslation && translationDecrease < listItem.clientWidth / 2)
-            return false;
-        // Calculate the minimum allowed translation amount (no negative scrolling allowed)
-        const minimumTranslation = 0;
-        // Adjust the translation amount, ensuring it doesn't go below the minimum scrollable area
-        const { marginLeft } = getComputedStyle(this.navigationList);
-        this.translationAmount = Math.max(this.translationAmount - translationDecrease - parseInt(marginLeft), minimumTranslation);
-        return true;
-    }
-    /**
-     * Returns the navigation list container element
-     */
-    get navigationList() {
-        return this.navbar.querySelector(NAVIGATION_LIST_SELECTOR);
-    }
-    /**
-     * Returns the navigation items
-     */
-    get navigationItems() {
-        return this.navbar.querySelectorAll(NAVIGATION_ITEM_SELECTOR);
+    scrollLeft() {
+        const scrollLeftRightEdge = document
+            .querySelector('.scroll-left')
+            .getBoundingClientRect().right;
+        for (const navigationItem of this.navigationItems.reverse()) {
+            const { left, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = left + 0.25 * width > scrollLeftRightEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: left - scrollLeftRightEdge });
+                return;
+            }
+        }
     }
     /**
      * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
      * Re-enables interactions after a brief delay to avoid blocking the user entirely.
      */
-    disableNavbar() {
+    temporarilyDisableNavbar() {
         if (this.navbarDisableTimer)
             clearTimeout(this.navbarDisableTimer);
-        this.navbar.style.pointerEvents = 'none';
+        this.navbar.setAttribute('inert', '');
         this.navbarDisableTimer = setTimeout(() => {
-            this.navbar.style.pointerEvents = 'initial';
+            this.navbar.removeAttribute('inert');
         }, NAVBAR_DISABLE_DURATION);
     }
-    /**
-     * Allows to translate the navbar without a transition
-     */
-    withoutTransition(callback) {
-        const transition = this.navbar.style.transition;
-        this.navbar.style.transition = 'none';
-        callback();
-        setTimeout(() => {
-            this.navbar.style.transition = transition;
-        });
-    }
     render() {
-        return (h(Host, { key: 'e91995f96b3b795fe2ed5c79ee89257b5c8aec2a', slot: "post-mainnavigation", version: version }, h("div", { key: '165c6efcf5e05984708de9e0abdaed130036816e', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'a894f4788fc85d2fb0d6480831af711871c3b9f4', name: "back-button" })), h("nav", { key: '11d276069f40676b0c3e2fb5e8426b5803bcdad2', ref: el => (this.navbar = el) }, h("slot", { key: '6070e3f75ccfa7dfaf22554802e6c43dd025830c' })), h("div", { key: '06aefb232bfa1d7cd053e33bf7150fe418e4239a', class: `left-scroll-button${this.canScrollLeft ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'f16d493af4ca62cd64a06a27ff8f805039cc806f', type: "button", tabindex: "-1", ref: el => (this.leftScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('left') }, h("post-icon", { key: '8a4d2fa0b90a571445b02fa4b157ca4a5ac5eb9b', "aria-hidden": "true", name: "chevronleft" }))), h("div", { key: '2e540a2b9c6e1c1a68be89f8ed8a3a4840083b02', class: `right-scroll-button${this.canScrollRight ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: '1aafbe38dd159eedb4b8dcb72dd19a61348b603a', type: "button", tabindex: "-1", ref: el => (this.rightScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('right') }, h("post-icon", { key: '72eccd291ba4a15bf64bf76f87398dddf7586bae', "aria-hidden": "true", name: "chevronright" })))));
+        return (h(Host, { key: '6cd850555585d87eb25e3f6892b8010f5e4d23d6', slot: "post-mainnavigation", version: version }, h("div", { key: '3411008120d072920f4de0b71c9dc014748f1390', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '2e3747380cb546bd6da77e5ffba2403586205a55', name: "back-button" })), h("div", { key: 'e9eedd836b3f679ba2861109db2d0811c1142677', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '628511a2c1812a08828e1aa2b51f26ad01a5a2cf', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '1b660d65e1984e8701a98a369046f391fd177338', ref: el => (this.navbar = el) }, h("slot", { key: '0eb35366ac0bd58509afd6a12f68c2b09396a497' })), h("div", { key: '11145ad6602e2df78d3c3f4643cc6e4e960775aa', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '26e795cd00221dbfb1a7632453d0d48993584b0b', "aria-hidden": "true", name: "chevronright" }))));
     }
-    static get watchers() { return {
-        "translationAmount": ["onTranslateAmountChanges"]
-    }; }
     static get style() { return PostMainnavigationStyle0; }
 }, [4, "post-mainnavigation", {
         "canScrollLeft": [32],
-        "canScrollRight": [32],
-        "translationAmount": [32]
-    }, [[9, "mouseup", "stopScrolling"]], {
-        "translationAmount": ["onTranslateAmountChanges"]
-    }]);
+        "canScrollRight": [32]
+    }, [[9, "mouseup", "stopScrolling"], [9, "mouseleave", "stopScrolling"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/loaders/post-megadropdown-trigger.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
+import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 
 const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
@@ -10,20 +11,45 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for mega dropdown control.
+         */
+        this.slottedButton = null;
+        /**
+         * Tracks whether this trigger's dropdown was expanded before a state change.
+         * Used to determine if this trigger should handle focus when its dropdown closes.
+         */
+        this.wasExpanded = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleToggle();
+                if (this.megadropdown && !this.ariaExpanded) {
+                    setTimeout(() => this.megadropdown.focusFirst(), 100);
+                }
+            }
+        };
+        this.handleToggleMegadropdown = (event) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
+                if (event.target.id === this.for) {
+                    this.ariaExpanded = event.detail.isVisible;
+                    // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+                    if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
+                        setTimeout(() => {
+                            this.slottedButton?.focus();
+                        }, 100);
+                    }
+                    this.wasExpanded = this.ariaExpanded;
+                    if (this.slottedButton) {
+                        this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                    }
+                }
+            });
+        };
         this.for = undefined;
         this.ariaExpanded = false;
     }
-    get host() { return this; }
-    /**
-     * Reference to the slotted button within the trigger, if present.
-     * Used to manage click and key events for mega dropdown control.
-     */
-    slottedButton = null;
-    /**
-     * Tracks whether this trigger's dropdown was expanded before a state change.
-     * Used to determine if this trigger should handle focus when its dropdown closes.
-     */
-    wasExpanded = false;
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
@@ -45,32 +71,6 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
         }
     }
-    handleKeyDown = (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.handleToggle();
-            if (this.megadropdown && !this.ariaExpanded) {
-                setTimeout(() => this.megadropdown.focusFirst(), 100);
-            }
-        }
-    };
-    handleToggleMegadropdown = (event) => {
-        eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
-            if (event.target.id === this.for) {
-                this.ariaExpanded = event.detail.isVisible;
-                // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
-                if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
-                    setTimeout(() => {
-                        this.slottedButton?.focus();
-                    }, 100);
-                }
-                this.wasExpanded = this.ariaExpanded;
-                if (this.slottedButton) {
-                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-                }
-            }
-        });
-    };
     componentDidLoad() {
         this.validateControlFor();
         // Check if the mega dropdown attached to the trigger is expanded or not
@@ -93,6 +93,7 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
     render() {
         return (h(Host, { key: '86b85efede8d9b19f3f0560f500f33f5e172177f', "data-version": version, "tab-index": "-1" }, h("button", { key: '0f810e4c38bc4abf23ac60ab27b36d408e7ced0d' }, h("slot", { key: '2a522ac7e15ef8ac077b73cdebf629b89ea173c6' }))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }

package/loaders/post-megadropdown.js

@@ -11,28 +11,34 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         super();
         this.__registerHost();
         this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
+        this.handleClickOutside = (event) => {
+            if (this.device !== 'desktop')
+                return;
+            const target = event.target;
+            if (this.host.contains(target)) {
+                return;
+            }
+            if (target instanceof HTMLElement) {
+                const trigger = target.closest('post-megadropdown-trigger');
+                if (trigger) {
+                    const targetDropdownId = trigger.getAttribute('for');
+                    if (targetDropdownId !== this.host.id) {
+                        return;
+                    }
+                }
+            }
+            this.hide(false);
+        };
         this.device = breakpoint.get('name');
         this.isVisible = false;
         this.animationClass = null;
     }
-    firstFocusableEl;
-    lastFocusableEl;
-    get host() { return this; }
-    /** Tracks the currently active dropdown instance. */
-    static activeDropdown = null;
     breakpointChange(e) {
         this.device = e.detail;
         if (this.device === 'desktop' && this.isVisible) {
             this.animationClass = null;
         }
     }
-    /**
-     * Emits when the dropdown is shown or hidden.
-     * The event payload is an object.
-     * `isVisible` is true when the dropdown gets opened and false when it gets closed
-     * `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
-     **/
-    postToggleMegadropdown;
     disconnectedCallback() {
         this.removeListeners();
         window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
@@ -112,24 +118,6 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
             this.removeListeners();
         }
     }
-    handleClickOutside = (event) => {
-        if (this.device !== 'desktop')
-            return;
-        const target = event.target;
-        if (this.host.contains(target)) {
-            return;
-        }
-        if (target instanceof HTMLElement) {
-            const trigger = target.closest('post-megadropdown-trigger');
-            if (trigger) {
-                const targetDropdownId = trigger.getAttribute('for');
-                if (targetDropdownId !== this.host.id) {
-                    return;
-                }
-            }
-        }
-        this.hide(false);
-    };
     addListeners() {
         this.host.addEventListener('keydown', e => this.keyboardHandler(e));
         document.addEventListener('keyup', e => this.handleTabOutside(e));
@@ -172,6 +160,7 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         const containerStyle = this.isVisible ? {} : { display: 'none' };
         return (h(Host, { key: '7426a12ebaeac0ce3b8402c3da4d5393daca059b', version: version }, h("div", { key: 'd47b60c334577f5662f19912f12ce941b4b52d94', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '2798f217b2b3e43c3c63072884bbbbe7d99ed62f', class: "megadropdown" }, h("slot", { key: 'b61f82bbc7f87f65d9b6957e7a4e5d6790b6dd00', name: "megadropdown-title" }), h("div", { key: 'f4996a819511cb59185faeedbdcec4be6e6f8a24', class: "megadropdown-content" }, h("slot", { key: '54f695c3b3d30a6a1aae7f7dc6f65f4d4d27de68' })), h("div", { key: 'b1334295c7d758e20c85b6c6c8cefc31dcf09e20', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'c4db69fa3207ce4cb47b725e37b1993820a2a64c', name: "back-button" })), h("div", { key: '68b22a3222382586fc749dec63e36edae84360c1', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '8023b75c931a95dbd9552c1a713790e77e40f526', name: "close-button" }))))));
     }
+    get host() { return this; }
     static get style() { return PostMegadropdownStyle0; }
 }, [4, "post-megadropdown", {
         "device": [32],
@@ -182,6 +171,8 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         "hide": [64],
         "focusFirst": [64]
     }]);
+/** Tracks the currently active dropdown instance. */
+PostMegadropdown$1.activeDropdown = null;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;