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

package/dist/post-components/post-components.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-ff95dcd3.js";export{s as setNonce}from"./p-ff95dcd3.js";import{g as l}from"./p-e1255160.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-e3d794b1",[[1,"post-breadcrumb",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateUrl"]}]]],["p-449caeba",[[1,"post-footer",{label:[1],isMobile:[32]}]]],["p-8891c692",[[1,"post-back-to-top",{label:[1],belowFold:[32]},null,{belowFold:["watchBelowFold"],label:["validateLabel"]}]]],["p-a1cbef0b",[[1,"post-banner",{dismissible:[4],dismissLabel:[1,"dismiss-label"],icon:[1],type:[1],bannerId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["validateDismissible"],dismissLabel:["validateDismissLabel"],icon:["validateIcon"],type:["validateType"]}]]],["p-32caa5d5",[[65,"post-card-control",{label:[1],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1025],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],type:["validateControlType"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-513e4b41",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-5556960c",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]}]]],["p-590c8681",[[1,"post-tag",{variant:[1],size:[1],icon:[1],classes:[32]},null,{variant:["variantChanged"],size:["sizeChanged"]}]]],["p-68e0803e",[[1,"post-tooltip",{placement:[1],arrow:[4],delayed:[4],show:[64],hide:[64],toggle:[64]},null,{delayed:["validateDelayed"]}]]],["p-442957b7",[[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-fcb60a95",[[1,"post-avatar",{firstname:[1],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"]}]]],["p-3994c72c",[[4,"post-linkarea"]]],["p-6be78a63",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-f175148d",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-da18066a",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-b5f43c76",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[0,"post-collapsible-trigger",{for:[1],update:[64]},null,{for:["setAriaAttributes"]}]]],["p-e2da4e76",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},null,{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[4,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32],translationAmount:[32]},[[9,"mouseup","stopScrolling"]],{translationAmount:["onTranslateAmountChanges"]}],[1,"post-header",{device:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{mobileMenuExtended:["frozeBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],active:["validateActiveProp"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]},null,{toggled:["validateToggled"]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]}],[4,"post-menu-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{manualClose:[4,"manual-close"],placement:[1],edgeGap:[2,"edge-gap"],arrow:[4],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[1],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-d9e7aec4",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}]]],["p-f5a940f4",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));
+import{p as e,b as a}from"./p-5c758f41.js";export{s as setNonce}from"./p-5c758f41.js";import{g as l}from"./p-e1255160.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-9fc68ef1",[[1,"post-breadcrumb",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateUrl"]}]]],["p-94bceea9",[[1,"post-footer",{label:[1],isMobile:[32]}]]],["p-792c167c",[[1,"post-back-to-top",{label:[1],belowFold:[32]},null,{belowFold:["watchBelowFold"],label:["validateLabel"]}]]],["p-8bdf6637",[[1,"post-banner",{dismissible:[4],dismissLabel:[1,"dismiss-label"],icon:[1],type:[1],bannerId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["validateDismissible"],dismissLabel:["validateDismissLabel"],icon:["validateIcon"],type:["validateType"]}]]],["p-9a4dd70a",[[65,"post-card-control",{label:[1],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1025],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],type:["validateControlType"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-ee0c1389",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-3b7cfd1b",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]}]]],["p-5c813ccf",[[1,"post-tag",{variant:[1],size:[1],icon:[1],classes:[32]},null,{variant:["variantChanged"],size:["sizeChanged"]}]]],["p-ef47cf27",[[1,"post-tooltip",{placement:[1],arrow:[4],delayed:[4],show:[64],hide:[64],toggle:[64]},null,{delayed:["validateDelayed"]}]]],["p-fbe39ef0",[[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-62e18265",[[1,"post-avatar",{firstname:[1],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"]}]]],["p-41f255ec",[[4,"post-linkarea"]]],["p-af6ace51",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-c75bad27",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-a9fc29db",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-3d1f93a6",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[0,"post-collapsible-trigger",{for:[1],update:[64]},null,{for:["setAriaAttributes"]}]]],["p-fd03e4f7",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[4,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32],translationAmount:[32]},[[9,"mouseup","stopScrolling"]],{translationAmount:["onTranslateAmountChanges"]}],[1,"post-header",{device:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{mobileMenuExtended:["frozeBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],active:["validateActiveProp"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]},null,{toggled:["validateToggled"]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]}],[4,"post-menu-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{manualClose:[4,"manual-close"],placement:[1],edgeGap:[2,"edge-gap"],arrow:[4],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[1],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-f9a01f1e",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}]]],["p-b46777b6",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));

package/dist/types/components/post-header/post-header.d.ts

@@ -12,15 +12,12 @@ export type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
 export declare class PostHeader {
     private firstFocusableEl;
     private lastFocusableEl;
-    private scrollListenerElement;
-    private overflowElement;
     private mobileMenu;
     private mobileMenuAnimation;
-    private readonly throttledScroll;
     private readonly throttledResize;
-    componentWillRender(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
+    private scrollParentResizeObserver;
+    private localHeaderResizeObserver;
+    get scrollParent(): HTMLElement;
     host: HTMLPostHeaderElement;
     device: DEVICE_SIZE;
     mobileMenuExtended: boolean;
@@ -30,17 +27,23 @@ export declare class PostHeader {
      * An event emitted when the device has changed
      */
     postUpdateDevice: EventEmitter<DEVICE_SIZE>;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     /**
      * Toggles the mobile navigation.
      */
     toggleMobileMenu(): Promise<void>;
+    private megedropdownStateHandler;
     private getFocusableElements;
     private keyboardHandler;
-    private getScrollParent;
     private handleScrollEvent;
     private updateLocalHeaderHeight;
+    private updateScrollParentHeight;
     private handleLinkClick;
     private handleResize;
+    private handleScrollParentResize;
+    private handleLocalHeaderResize;
     private switchLanguageSwitchMode;
     private renderNavigation;
     render(): any;

package/dist/types/components/post-language-option/post-language-option.d.ts

@@ -35,6 +35,10 @@ export declare class PostLanguageOption {
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
      */
     postChange: EventEmitter<string>;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive: EventEmitter<string>;
     /**
      * Selects the language option programmatically.
      */

package/dist/types/components/post-language-switch/post-language-switch.d.ts

@@ -20,10 +20,18 @@ export declare class PostLanguageSwitch {
      * The active language of the language switch
      */
     activeLang: string;
-    connectedCallback(): void;
-    private updateChildrenVariant;
-    componentWillUpdate(): void;
     componentDidLoad(): void;
+    handlePostChange(event: CustomEvent<string>): void;
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event: CustomEvent<string>): void;
+    private get languageOptions();
+    private get activeLanguageOption();
+    private handleSlotChange;
+    private updateActiveLanguage;
+    private updateChildrenVariant;
     private menuId;
     private renderList;
     private renderDropdown;

package/dist/types/components.d.ts

@@ -679,6 +679,7 @@ declare global {
     };
     interface HTMLPostLanguageOptionElementEventMap {
         "postChange": string;
+        "postLanguageOptionInitiallyActive": string;
     }
     interface HTMLPostLanguageOptionElement extends Components.PostLanguageOption, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostLanguageOptionElementEventMap>(type: K, listener: (this: HTMLPostLanguageOptionElement, ev: PostLanguageOptionCustomEvent<HTMLPostLanguageOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1121,6 +1122,10 @@ declare namespace LocalJSX {
           * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
          */
         "onPostChange"?: (event: PostLanguageOptionCustomEvent<string>) => void;
+        /**
+          * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+         */
+        "onPostLanguageOptionInitiallyActive"?: (event: PostLanguageOptionCustomEvent<string>) => void;
         /**
           * The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
          */

package/loaders/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/loaders/post-back-to-top.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$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     // 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/loaders/post-header.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { s as slideUp, a as slideDown } from './slide.js';
+import { a as slideUp, s as slideDown } from './slide.js';
 import { g as getFocusableChildren } from './get-focusable-children.js';
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
@@ -137,7 +137,7 @@ function throttle (delay, callback, options) {
   return wrapper;
 }
 
-const postHeaderCss = "*,::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}}";
+const postHeaderCss = "*,::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}}";
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
@@ -152,59 +152,75 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
     }
     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;
+    }
+    get host() { return this; }
+    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();
     }
-    get host() { return this; }
-    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.
      */
@@ -224,6 +240,9 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         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)
@@ -254,25 +273,15 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             }
         }
     }
-    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;
@@ -309,7 +318,6 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             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;
@@ -319,6 +327,19 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             });
         }
     }
+    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 => {
@@ -333,10 +354,10 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         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 watchers() { return {
         "mobileMenuExtended": ["frozeBody"]

package/loaders/post-language-option.js

@@ -11,6 +11,7 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         super();
         this.__registerHost();
         this.postChange = createEvent(this, "postChange", 7);
+        this.postLanguageOptionInitiallyActive = createEvent(this, "postLanguageOptionInitiallyActive", 7);
         this.code = undefined;
         this.active = undefined;
         this.variant = undefined;
@@ -38,11 +39,18 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         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.
      */
@@ -63,7 +71,7 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
                 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 watchers() { return {
         "code": ["validateCode"],

package/loaders/post-language-switch.js

@@ -10,7 +10,7 @@ import { c as checkType } from './check-type.js';
 
 const SWITCH_VARIANTS = ['list', 'menu'];
 
-const postLanguageSwitchCss = ":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}";
+const postLanguageSwitchCss = ":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}";
 const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
 
 const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends HTMLElement {
@@ -32,52 +32,65 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
     }
     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();
@@ -93,7 +106,7 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         "description": [1],
         "variant": [1],
         "activeLang": [32]
-    }, undefined, {
+    }, [[0, "postChange", "handlePostChange"], [0, "postLanguageOptionInitiallyActive", "handleInitiallyActive"]], {
         "caption": ["validateCaption"],
         "description": ["validateDescription"],
         "variant": ["validateVariant"]

package/loaders/post-mainnavigation.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 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 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}";
+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 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}";
 const PostMainnavigationStyle0 = postMainnavigationCss;
 
 const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button