@swisspost/design-system-components 10.0.0-next.40 → 10.0.0-next.42

package/dist/components/post-mainnavigation2.js

@@ -1,183 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
-
-const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}@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}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){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}}@media screen and (min-width: 1024px){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}}@media screen and (min-width: 1024px){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}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}";
-const PostMainnavigationStyle0 = postMainnavigationCss;
-
-const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
-const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
-const PostMainnavigation = /*@__PURE__*/ proxyCustomElement(class PostMainnavigation extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.canScrollLeft = false;
-        this.canScrollRight = false;
-        this.scrollRight = this.scrollRight.bind(this);
-        this.scrollLeft = this.scrollLeft.bind(this);
-        this.handleMutations = this.handleMutations.bind(this);
-        this.checkScrollability = this.checkScrollability.bind(this);
-        this.resizeObserver = new ResizeObserver(this.checkScrollability);
-        this.mutationObserver = new MutationObserver(this.handleMutations);
-    }
-    componentDidLoad() {
-        setTimeout(() => {
-            this.fixLayoutShift();
-            this.checkScrollability();
-        });
-        // Observe the navbar for size changes
-        this.resizeObserver.observe(this.navbar);
-        // Observe the navabar for mutation changes
-        this.mutationObserver.observe(this.navbar, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
-        // Ensure the scroll buttons are correctly displayed or hidden whenever the navbar is scrolled
-        this.navbar.addEventListener('scrollend', this.checkScrollability);
-    }
-    /**
-     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
-     */
-    disconnectedCallback() {
-        this.mutationObserver.disconnect();
-        this.resizeObserver.disconnect();
-        this.navbar.removeEventListener('scrollend', this.checkScrollability);
-    }
-    /**
-     * Stops the repeated scrolling when the mouse button is released.
-     */
-    stopScrolling() {
-        if (this.scrollRepeatInterval)
-            clearInterval(this.scrollRepeatInterval);
-    }
-    async handleMutations(mutations) {
-        const addedNodes = mutations.flatMap((mutation) => {
-            return Array.from(mutation.addedNodes);
-        });
-        // Wait for all elements to be hydrated
-        await Promise.all(addedNodes.map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
-        this.fixLayoutShift();
-        this.checkScrollability();
-    }
-    get navigationItems() {
-        return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
-    }
-    /**
-     * Hack to fix the layout shift due to bold text on active elements
-     */
-    fixLayoutShift() {
-        this.navigationItems
-            .filter(item => !item.matches(':has(.nav-el-active)'))
-            .forEach(item => {
-            item.innerHTML = `
-          <span class="nav-el-active">${item.innerHTML}</span>
-          <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
-        `;
-        });
-    }
-    handleBackButtonClick() {
-        const header = this.navbar.closest('post-header');
-        if (header)
-            header.toggleMobileMenu();
-    }
-    /**
-     * Returns whether scrolling is enabled in either the left or right direction.
-     */
-    get canScroll() {
-        return this.canScrollLeft || this.canScrollRight;
-    }
-    /**
-     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
-     */
-    checkScrollability() {
-        const { scrollLeft, scrollWidth, clientWidth } = this.navbar;
-        if (scrollWidth === clientWidth) {
-            // If scroll width equals client width, scrolling is disabled in both directions
-            this.canScrollLeft = this.canScrollRight = false;
-        }
-        else {
-            this.canScrollLeft = Math.floor(scrollLeft) > 0; // Scrolling left is possible if not at the start
-            this.canScrollRight = Math.ceil(clientWidth + scrollLeft) < scrollWidth; // Scrolling right is possible if not at the end
-        }
-    }
-    /**
-     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
-     */
-    handleScrollButtonClick(e, direction) {
-        if (!this.canScroll || e.button !== 0)
-            return;
-        // Disable interaction with the navbar during scrolling
-        this.temporarilyDisableNavbar();
-        // Set up the correct scroll function
-        const scroll = direction === 'right' ? this.scrollRight : this.scrollLeft;
-        scroll();
-        // Repeat the scrolling action while the button is held down
-        this.scrollRepeatInterval = setInterval(() => {
-            scroll();
-        }, SCROLL_REPEAT_INTERVAL);
-    }
-    scrollRight() {
-        const scrollRightLeftEdge = document
-            .querySelector('.scroll-right')
-            .getBoundingClientRect().left;
-        for (const navigationItem of this.navigationItems) {
-            const { right, width } = navigationItem.getBoundingClientRect();
-            // Scroll to the first navigation item that is less than 75% visible
-            const isThreeQuartersVisible = right - 0.25 * width < scrollRightLeftEdge;
-            if (!isThreeQuartersVisible) {
-                this.navbar.scrollBy({ left: right - scrollRightLeftEdge });
-                return;
-            }
-        }
-    }
-    scrollLeft() {
-        const scrollLeftRightEdge = document
-            .querySelector('.scroll-left')
-            .getBoundingClientRect().right;
-        for (const navigationItem of this.navigationItems.reverse()) {
-            const { left, width } = navigationItem.getBoundingClientRect();
-            // Scroll to the first navigation item that is less than 75% visible
-            const isThreeQuartersVisible = left + 0.25 * width > scrollLeftRightEdge;
-            if (!isThreeQuartersVisible) {
-                this.navbar.scrollBy({ left: left - scrollLeftRightEdge });
-                return;
-            }
-        }
-    }
-    /**
-     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
-     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
-     */
-    temporarilyDisableNavbar() {
-        if (this.navbarDisableTimer)
-            clearTimeout(this.navbarDisableTimer);
-        this.navbar.setAttribute('inert', '');
-        this.navbarDisableTimer = setTimeout(() => {
-            this.navbar.removeAttribute('inert');
-        }, NAVBAR_DISABLE_DURATION);
-    }
-    render() {
-        return (h(Host, { key: '0aaf98ec2144bec91f4eec42ab367a419e406681', slot: "post-mainnavigation", version: version }, h("div", { key: 'b09cff2d01eb4bbc75824368433c7d730cbb2230', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '0270f7b3fcd2702d44159d0325604c02b582a89e', name: "back-button" })), h("div", { key: '70f46db7348b1e8b34ec57a055763637fbde68e6', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '4326ec1115371476986e594556127f2710543b4f', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: 'e20213b2b307f29ea2ff6d39a766144bae5dff3b', ref: el => (this.navbar = el) }, h("slot", { key: '17c5b51c7a29ead6635f72df25bb5457d4b86ecf' })), h("div", { key: '9b8a2033a772315167c0c28b5ba769a4c5a957e8', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: 'f941e874a0b28b784f248e0e6ec8eeb5feb61ef7', "aria-hidden": "true", name: "chevronright" }))));
-    }
-    static get style() { return PostMainnavigationStyle0; }
-}, [4, "post-mainnavigation", {
-        "canScrollLeft": [32],
-        "canScrollRight": [32]
-    }, [[9, "mouseup", "stopScrolling"], [9, "mouseleave", "stopScrolling"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-mainnavigation", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-mainnavigation":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostMainnavigation);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostMainnavigation as P, defineCustomElement as d };

package/dist/components/post-megadropdown-trigger2.js

@@ -1,121 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-
-const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}@media screen and (max-width: 1023.98px){post-megadropdown-trigger{z-index:4}}";
-const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
-
-const PostMegadropdownTrigger = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for mega dropdown control.
-         */
-        this.slottedButton = null;
-        /**
-         * Tracks whether this trigger's dropdown was expanded before a state change.
-         * Used to determine if this trigger should handle focus when its dropdown closes.
-         */
-        this.wasExpanded = false;
-        this.handleKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.handleToggle();
-                if (this.megadropdown && !this.ariaExpanded) {
-                    setTimeout(() => this.megadropdown.focusFirst(), 100);
-                }
-            }
-        };
-        this.handleToggleMegadropdown = (event) => {
-            eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
-                if (event.target.id === this.for) {
-                    this.ariaExpanded = event.detail.isVisible;
-                    // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
-                    if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
-                        setTimeout(() => {
-                            this.slottedButton?.focus();
-                        }, 100);
-                    }
-                    this.wasExpanded = this.ariaExpanded;
-                    if (this.slottedButton) {
-                        this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-                    }
-                }
-            });
-        };
-        this.for = undefined;
-        this.ariaExpanded = false;
-    }
-    /**
-     * Watch for changes to the `for` property to validate its type and ensure it is a string.
-     * @param forValue - The new value of the `for` property.
-     */
-    validateControlFor() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
-    get megadropdown() {
-        const ref = document.getElementById(this.for);
-        return ref && ref.localName === 'post-megadropdown'
-            ? ref
-            : null;
-    }
-    handleToggle() {
-        if (this.megadropdown) {
-            this.megadropdown.toggle();
-        }
-        else {
-            console.warn(`No post-megadropdown found with ID: ${this.for}`);
-        }
-    }
-    componentDidLoad() {
-        this.validateControlFor();
-        // Check if the mega dropdown attached to the trigger is expanded or not
-        document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
-        this.slottedButton = this.host.querySelector('button');
-        if (this.slottedButton) {
-            this.slottedButton.setAttribute('aria-haspopup', 'menu');
-            this.slottedButton.addEventListener('click', () => {
-                this.handleToggle();
-            });
-            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
-        }
-        else {
-            console.warn('No button found within post-megadropdown-trigger');
-        }
-    }
-    disconnectedCallback() {
-        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
-    }
-    render() {
-        return (h(Host, { key: '54824c6e5d6d8f6bd44caf3e5b5e578d62f5e1e2', "data-version": version, "tab-index": "-1" }, h("button", { key: '54bb8740ba2f04d6d7f128436210b489e2d56bd8' }, h("slot", { key: 'fb58922d62496196ed50543b664b98c1ba2c4d4b' }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "for": ["validateControlFor"]
-    }; }
-    static get style() { return PostMegadropdownTriggerStyle0; }
-}, [4, "post-megadropdown-trigger", {
-        "for": [1],
-        "ariaExpanded": [32]
-    }, undefined, {
-        "for": ["validateControlFor"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-megadropdown-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-megadropdown-trigger":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostMegadropdownTrigger);
-            }
-            break;
-    } });
-}
-
-export { PostMegadropdownTrigger as P, defineCustomElement as d };

package/dist/components/post-megadropdown2.js

@@ -1,190 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getFocusableChildren } from './get-focusable-children.js';
-import { v as version } from './package.js';
-import { b as breakpoint } from './breakpoints.js';
-
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
-const PostMegadropdownStyle0 = postMegadropdownCss;
-
-const PostMegadropdown = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
-        this.handleClickOutside = (event) => {
-            if (this.device !== 'desktop')
-                return;
-            const target = event.target;
-            if (this.host.contains(target)) {
-                return;
-            }
-            if (target instanceof HTMLElement) {
-                const trigger = target.closest('post-megadropdown-trigger');
-                if (trigger) {
-                    const targetDropdownId = trigger.getAttribute('for');
-                    if (targetDropdownId !== this.host.id) {
-                        return;
-                    }
-                }
-            }
-            this.hide(false);
-        };
-        this.device = breakpoint.get('name');
-        this.isVisible = false;
-        this.animationClass = null;
-    }
-    breakpointChange(e) {
-        this.device = e.detail;
-        if (this.device === 'desktop' && this.isVisible) {
-            this.animationClass = null;
-        }
-    }
-    disconnectedCallback() {
-        this.removeListeners();
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
-        if (PostMegadropdown.activeDropdown === this) {
-            PostMegadropdown.activeDropdown = null;
-        }
-    }
-    componentWillRender() {
-        this.getFocusableElements();
-    }
-    /**
-     * Toggles the dropdown visibility based on its current state.
-     */
-    async toggle() {
-        if (this.isVisible) {
-            this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    /**
-     * Displays the dropdown.
-     */
-    async show() {
-        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
-            // Close the previously active dropdown without animation
-            PostMegadropdown.activeDropdown.forceClose();
-        }
-        else {
-            this.animationClass = 'slide-in';
-        }
-        this.isVisible = true;
-        PostMegadropdown.activeDropdown = this;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
-        if (this.firstFocusableEl &&
-            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
-            this.firstFocusableEl.focus();
-        }
-        this.addListeners();
-    }
-    /**
-     * Hides the dropdown with an animation.
-     */
-    async hide(focusParent = true, forceClose = false) {
-        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
-        if (forceClose) {
-            this.forceClose();
-        }
-        else {
-            this.animationClass = 'slide-out';
-        }
-    }
-    /**
-     * Sets focus to the first focusable element within the component.
-     */
-    async focusFirst() {
-        this.firstFocusableEl?.focus();
-    }
-    connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
-    }
-    /**
-     * Forces the dropdown to close without animation.
-     */
-    forceClose() {
-        this.isVisible = false;
-        this.animationClass = null;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
-        this.removeListeners();
-    }
-    handleAnimationEnd() {
-        if (this.animationClass === 'slide-out') {
-            this.isVisible = false;
-            this.animationClass = null;
-            PostMegadropdown.activeDropdown = null;
-            this.removeListeners();
-        }
-    }
-    addListeners() {
-        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
-        document.addEventListener('keyup', e => this.handleTabOutside(e));
-        document.addEventListener('mousedown', this.handleClickOutside);
-    }
-    removeListeners() {
-        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
-        document.removeEventListener('keyup', e => this.handleTabOutside(e));
-        document.removeEventListener('mousedown', this.handleClickOutside);
-    }
-    getFocusableElements() {
-        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
-        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
-    }
-    // Loop through the focusable children
-    keyboardHandler(e) {
-        if (e.key === 'Tab' && this.device !== 'desktop') {
-            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
-                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
-                e.preventDefault();
-                this.lastFocusableEl.focus();
-            }
-            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
-                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
-                e.preventDefault();
-                this.firstFocusableEl.focus();
-            }
-        }
-    }
-    handleTabOutside(e) {
-        if (e.key === 'Tab' && this.device === 'desktop') {
-            if (!this.host.contains(e.target)) {
-                this.hide(false);
-            }
-        }
-    }
-    render() {
-        const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'e860446551f08b3a7088c0bc76a18e6ed41d9222', version: version }, h("div", { key: 'e751ca57df7333a18a53f960d3ef51f76cea1cad', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '75c3196c0b1ba5e1cb2ec18e6252704085c19760', class: "megadropdown" }, h("slot", { key: 'ab81352d1f4114cba1b34aeec5cc3b96074ac20f', name: "megadropdown-title" }), h("div", { key: '05fb088c749a53cd52265b703b7abc54e1be17f0', class: "megadropdown-content" }, h("slot", { key: 'a44dae9c90010501979f1ffc952bf4cc8432b788' })), h("div", { key: 'd7f8ca6f372ca4474852ec36008c8a25802b0d76', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'c2b815a8b4dff84457f22a1b2b6efdd53d14a102', name: "back-button" })), h("div", { key: '36416cd916c6424ee61c7d25f5eff9dff6b9d163', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: 'a3e3ff53229c9986167f25cf6c7cd78bccbeb635', name: "close-button" }))))));
-    }
-    get host() { return this; }
-    static get style() { return PostMegadropdownStyle0; }
-}, [4, "post-megadropdown", {
-        "device": [32],
-        "isVisible": [32],
-        "animationClass": [32],
-        "toggle": [64],
-        "show": [64],
-        "hide": [64],
-        "focusFirst": [64]
-    }]);
-/** Tracks the currently active dropdown instance. */
-PostMegadropdown.activeDropdown = null;
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-megadropdown"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-megadropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostMegadropdown);
-            }
-            break;
-    } });
-}
-
-export { PostMegadropdown as P, defineCustomElement as d };

package/dist/components/post-menu-item2.js

@@ -1,27 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-
-const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-    }
-    render() {
-        return (h(Host, { key: '200aeaf57f54b400f38bfa1dcf5d723b1db67c00', role: "menuitem", "data-version": version }, h("slot", { key: '6491d510a4e3a6f86b76bc657d379fc96cc764b7' })));
-    }
-}, [4, "post-menu-item"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-menu-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-menu-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostMenuItem);
-            }
-            break;
-    } });
-}
-
-export { PostMenuItem as P, defineCustomElement as d };