@swisspost/design-system-components 9.0.0-next.32 → 9.0.0-next.34

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

@@ -3,6 +3,7 @@ import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
 import { slideDown, slideUp } from "../../animations/slide";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { eventGuard } from "../../utils/event-gua";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
@@ -13,13 +14,6 @@ import { getFocusableChildren } from "../../utils/get-focusable-children";
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  */
 export class PostHeader {
-    firstFocusableEl;
-    lastFocusableEl;
-    mobileMenu;
-    mobileMenuAnimation;
-    throttledResize = throttle(50, () => this.handleResize());
-    scrollParentResizeObserver;
-    localHeaderResizeObserver;
     get scrollParent() {
         const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
         if (frozenScrollParent)
@@ -34,7 +28,6 @@ export class PostHeader {
         }
         return document.body;
     }
-    host;
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
@@ -47,11 +40,16 @@ export class PostHeader {
             this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
-    /**
-     * An event emitted when the device has changed
-     */
-    postUpdateDevice;
     constructor() {
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.megedropdownStateHandler = (event) => {
+            eventGuard(this.host, event, {
+                targetLocalName: 'post-megadropdown',
+                delegatorSelector: 'post-header',
+            }, () => {
+                this.megadropdownOpen = event.detail.isVisible;
+            });
+        };
         this.device = null;
         this.mobileMenuExtended = false;
         this.megadropdownOpen = false;
@@ -73,10 +71,12 @@ export class PostHeader {
         document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
         this.handleResize();
-        this.handleScrollEvent();
         this.handleScrollParentResize();
         this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
     }
+    componentWillRender() {
+        this.handleScrollEvent();
+    }
     componentDidRender() {
         this.getFocusableElements();
         this.handleLocalHeaderResize();
@@ -122,9 +122,6 @@ export class PostHeader {
             });
         }
     }
-    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)
@@ -157,11 +154,11 @@ export class PostHeader {
     }
     handleScrollEvent() {
         const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
-        this.host.style.setProperty('--header-scroll-top', `${scrollTop}px`);
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
     }
     updateLocalHeaderHeight() {
         const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
-        this.host.style.setProperty('--local-header-height', `${localHeaderHeight}px`);
+        document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}px`);
     }
     updateScrollParentHeight() {
         this.host.style.setProperty('--header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
@@ -236,7 +233,7 @@ export class PostHeader {
         return (h("div", { class: navigationClasses.join(' '), style: { '--header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", 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: '1cc6cb8fb53d744a3e857b39fe6d59dcc52616f6', version: version }, h("div", { key: 'f2b0993095d6173cd6e6652f68a6d86cccaca0cf', class: "global-header" }, h("div", { key: '3199a8bfe40e617b9aa41235a836b0346afe3f5f', class: "global-sub" }, h("div", { key: 'acf05b7b78ca758b75b4c999a262506dc43b1692', class: "logo" }, h("slot", { key: '21d50a2e983f3572ce33828fd69a3eff01983206', name: "post-logo" }))), h("div", { key: '7222c559dca81ae94b18a5a88825169fa05b887e', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '4948c8d13318987f9c419ac73d901e558f763d0d', name: "meta-navigation" }), h("slot", { key: '2a10e4dc73716b3fd39fd9fb534678c6203f60e3', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '5786dcda4ca017500916ea4c9da604da46a0e2f5', name: "post-language-switch" }), h("div", { key: 'a2326d26003bb8101dc0236426b26f1f11bdd9df', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'e75d428c8a5644bcd979607de1ca85ad435e096d', name: "post-togglebutton" })))), h("div", { key: 'c40d1e10ce6e13e2cae5f8395ad9281dce50975e', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'e37002ea2d9d74fdfa0773cb2ca90f7e9560f193', name: "title" }), h("div", { key: 'fe1e158e00458d1232c5b0e9ae22c63e77b25ac6', class: "local-sub" }, h("slot", { key: '4b504f9652a403cf89b0a371a803251923758155', name: "local-controls" }), h("slot", { key: 'c02b89240f8df106f138bc14312031511c5462f6' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: 'd8b43333c00a612a3a37479750874a1efaf6a855', "data-version": version }, h("div", { key: 'b270fb139cc8730a774785c5535fb3bcdd60c59c', class: "global-header" }, h("div", { key: 'b3161c4b26a1be4707fa6c7360e6779547b7ab30', class: "global-sub" }, h("div", { key: '44ecddd8f91c86d1af0075718b63e6bf034a25b7', class: "logo" }, h("slot", { key: 'de5208255d0cf59707092c984b0fec33d317d38d', name: "post-logo" }))), h("div", { key: '199dc1da25d817b488d5c3402779130c360e0f9a', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '1337f13908a826022a1bf2a8a1a2e2bfe323900b', name: "meta-navigation" }), h("slot", { key: '2b6fbbcedc8f1803e388fdbcbcd637d6a2605c87', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '2861c1a0f7639678edd0f584d8f98665fcf84fb0', name: "post-language-switch" }), h("div", { key: '06e2d9a4abe3a804f25ffa303f6f9ed5b7c01b60', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '772407e65d3d8f642c1e80fd8cb42b425eed4848', name: "post-togglebutton" })))), h("div", { key: '7b7a3da2a8cc848632c2e45badc52e23958a6faa', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '96e4d68bfe0504cc09d57a8b11dabb9139d780f6', name: "title" }), h("div", { key: '240fae6f0f9d2a192a7b94110a9c4571856de90a', class: "local-sub" }, h("slot", { key: '14fd77af7dca02157248bf95d7d253d5f14e9f1e', name: "local-controls" }), h("slot", { key: '6dfac25cb64401123638ddfc6b94bbe89ae78249' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from "../../utils/index";
+import { IS_BROWSER, checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from "../../utils/index";
 import { version } from "../../../../package";
-const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons/';
+const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
 const ANIMATION_NAMES = [
     'cylon',
     'cylon-vertical',
@@ -24,8 +24,6 @@ export class PostIcon {
         this.rotate = null;
         this.scale = null;
     }
-    isSSR = typeof window === 'undefined';
-    host;
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
             checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
@@ -56,7 +54,7 @@ export class PostIcon {
         // the first definition object which defines a domain, will be used to set the domain of the file url
         // the first definition object which defines a slug, will be used to set the slug of the file url
         const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
-        if (!this.isSSR) {
+        if (IS_BROWSER) {
             urlDefinitions.push(this.getUrlDefinition(document.head
                 .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
                 ?.getAttribute('data-post-icon-base'), 'relative'));
@@ -120,7 +118,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: 'c80aaf693f730902c4ae57ca78360eee5dedf624', "data-version": version }, h("span", { key: '7e01e1cf7e4fec380e8f054d3cc8fa5404c7a829', style: this.getStyles() })));
+        return (h(Host, { key: 'b3c3efcc03f423a248e231b4b4c5d79c93ae25a6', "data-version": version }, h("span", { key: 'd73d4df11fcccb96d5346f3f8c3e18602bb8d484', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -228,7 +226,7 @@ export class PostIcon {
                     "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
                 },
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "rotate": {
                 "type": "number",

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

@@ -12,7 +12,6 @@ export class PostLanguageOption {
         this.name = undefined;
         this.url = undefined;
     }
-    host;
     validateCode() {
         checkType(this, 'code', 'string');
     }
@@ -37,14 +36,6 @@ export class PostLanguageOption {
             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.
      */
@@ -65,7 +56,7 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '404caa6a507637810b672c5decf4e3af300733ac', "data-version": version }, 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: '3a6b9a8f63c90f431a13c1df529a2e4716ede5d8', "data-version": version }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
     static get is() { return "post-language-option"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-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 12px}@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}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}
+:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.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}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}

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

@@ -1,16 +1,19 @@
 import { Host, h } from "@stencil/core";
-import { checkEmptyOrOneOf, checkType } from "../../utils/index";
+import { checkEmptyOrOneOf, checkType, eventGuard } from "../../utils/index";
 import { version } from "../../../../package";
 import { SWITCH_VARIANTS } from "./switch-variants";
 import { nanoid } from "nanoid";
 export class PostLanguageSwitch {
     constructor() {
+        this.menuId = `p${nanoid(11)}`;
         this.caption = undefined;
         this.description = undefined;
         this.variant = 'list';
         this.activeLang = undefined;
     }
-    host;
+    get languageOptions() {
+        return Array.from(this.host.querySelectorAll('post-language-option'));
+    }
     validateCaption() {
         checkType(this, 'caption', 'string');
     }
@@ -28,24 +31,28 @@ export class PostLanguageSwitch {
         // 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();
     }
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     */
     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');
+        eventGuard(this.host, event, { targetLocalName: 'post-language-option', delegatorSelector: 'post-language-switch' }, () => {
+            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();
             }
         });
-        // 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
@@ -54,30 +61,17 @@ export class PostLanguageSwitch {
     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", { onSlotchange: () => this.handleSlotChange() }))));
+        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))));
     }
     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", { onSlotchange: () => this.handleSlotChange() }))));
+        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))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();

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

@@ -1 +1 @@
-post-linkarea{display:contents;cursor:pointer}
+:host{display:contents;cursor:pointer}

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

@@ -3,7 +3,6 @@ import { version } from "../../../../package";
 const INTERACTIVE_ELEMENTS = ['a'].join(',');
 const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
 export class PostLinkarea {
-    host;
     dispatchClick({ ctrlKey, shiftKey, altKey, metaKey }) {
         const interactiveElement = this.host.querySelector(`[data-link]${INTERACTIVE_ELEMENTS_SELECTOR}`) ??
             this.host.querySelector(INTERACTIVE_ELEMENTS_SELECTOR);
@@ -13,9 +12,10 @@ export class PostLinkarea {
         interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
     }
     render() {
-        return (h(Host, { key: 'c27bb1e548eecbef9b981ebadea8a9a30a06a89c', "data-version": version, onClick: e => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '9e5bd5c6032ed87bc2c6e9eed96dc79f19295325' })));
+        return (h(Host, { key: '56e4b032fa8976cc120bff5f1c36d55167e54e98', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '25568fab2a47d765757c00fbee4f2999c1da16d1' })));
     }
     static get is() { return "post-linkarea"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["post-linkarea.scss"]

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

@@ -11,8 +11,6 @@ export class PostList {
         this.titleHidden = false;
         this.horizontal = false;
     }
-    host;
-    titleEl;
     componentWillLoad() {
         /**
          * Get the id set on the host element or use a random id by default
@@ -28,7 +26,7 @@ export class PostList {
         }
     }
     render() {
-        return (h(Host, { key: '085a63d7b4cc85461f2c8fd0c7b9d9f48f42055a', "data-version": version }, h("div", { key: 'd13a66ba16b71eff1a86666b04ca2f41957962e1', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0270bcd71c8a3a34390b98b6374a1a2f06e0d606' })), h("div", { key: 'de04b08bf94900435c53f972c8fcd0798c8a5faf', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'f7aa9976b3283ee4da3d32d84b36e2549c29e80f', name: "post-list-item" }))));
+        return (h(Host, { key: 'b003aa61735359b6a1d95aad8d29c609d5bb3c8b', "data-version": version }, h("div", { key: '2f69a2c72dd357767735e10d16f1b7586da6d5a3', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3982783d438519673a676323339a013d3edb84db' })), h("div", { key: 'b8a91c4430774f019cc46aa19393e2a1566204a5', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '378a51785c4d52df8ae422657a16e8295b405149', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-list-item/post-list-item.js

@@ -4,12 +4,11 @@ import { version } from "../../../../package";
  * @slot default- Slot for placing the content of the list item.
  */
 export class PostListItem {
-    host;
     connectedCallback() {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: '9626999693fa26c4fb42db178e53099ea8a95c2e', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '5f2d0a626e9d09a44d4c20f3bc97a2c60ca77feb' })));
+        return (h(Host, { key: 'c826293ea2a7446bea2f5b223934b444655198a0', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: 'b997f79da2fbc87fbc6a388c118a03c008ad2c23' })));
     }
     static get is() { return "post-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,6 @@ export class PostLogo {
     constructor() {
         this.url = undefined;
     }
-    host;
     validateUrl() {
         checkEmptyOrUrl(this, 'url');
     }
@@ -24,7 +23,7 @@ export class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: '128604612a51624b537f30b0b9c91d9ea6b950be', "data-version": version }, h(LogoTag, { key: '885f057200f9da839fd38cb7070f319f6c89793e', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'bee12585bf74fe5c2ce8a644c540c86626295526', class: "description" }, h("slot", { key: 'e516075c5138cef9378d3dc7137eb6c28d02b279', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'c0056463b93f7c0e5da07db4656d9c8dc9161c32', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '1dfc33886c9b1fb6cd3b08f448a89c11a6080598', id: "Logo" }, h("rect", { key: 'dd84426568259714379a92a3f56349c6b3220a61', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '56fa6445c184a41355a968365098b75387a16f48', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'f2abb1db77a2e795f477662453d7296a28882756', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '7dee19302c0c560b29f09b1675135f10d41fc44a', "data-version": version }, h(LogoTag, { key: '1d851ca305d1bfc24666b416ad5f210b96d39811', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'cd75bd4040bc2f0d62e5cec2afc9529fa7c43c49', class: "description" }, h("slot", { key: 'caf63c4f823873181fa52cfb0cf38217b6a45823', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'd41c14973b829eb35764c9e562fe449e65f410b4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '90c52e528bf4fc8e075e6517c18a59686ffd39f6', id: "Logo" }, h("rect", { key: '50633d1110596123232f07272406ebd0a32ffce8', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '7a617412c094669a66914edf769fba9ee9448b83', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '74213b21fad18ba6a1dbb07e0b0b7dcf4a89b855', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     static get is() { return "post-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>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(--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%;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}
+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}