@swisspost/internet-header 1.17.0 → 10.1.0

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

@@ -0,0 +1,150 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const postMainnavigationCss = () => `:host{display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:var(--post-header-content-max-width)}@media screen and (min-width: 1024px){:host{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-margin-start:calc(-1*var(--post-local-header-padding-inline-start));margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));-webkit-margin-end:calc(-1*var(--post-local-header-padding-inline-end));margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end));overflow:hidden}}nav{-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (min-width: 1024px){nav{scroll-behavior:smooth;max-width:100vw;overflow:hidden;height:var(--post-main-navigation-height)}}.scroll-control{z-index:1;cursor:pointer;padding:1rem;background:#fff;-webkit-box-shadow:var(--post-device-elevation-500);box-shadow:var(--post-device-elevation-500);line-height:1}.scroll-control.scroll-left{-webkit-margin-end:-3rem;margin-inline-end:-3rem}.scroll-control.scroll-right{-webkit-margin-start:-3rem;margin-inline-start:-3rem}.scroll-control.d-none{display:none}.scroll-control post-icon{font-size:1rem}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.scrollRight = this.scrollRight.bind(this);
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.checkScrollability = this.checkScrollability.bind(this);
+        this.resizeObserver = new ResizeObserver(this.checkScrollability);
+        this.mutationObserver = new MutationObserver(this.checkScrollability);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            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);
+    }
+    get navigationItems() {
+        return Array.from(this.host.querySelectorAll('a:not(post-megadropdown *), post-megadropdown-trigger'));
+    }
+    /**
+     * 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 = this.host.shadowRoot
+            .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 = this.host.shadowRoot
+            .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 (index.h(index.Host, { key: '057f526f5b0e931fcb8642e6fa034f441df43020', version: _package.version, class: this.canScroll ? 'scrollable' : '' }, index.h("div", { key: 'c8ce70f6cbeec58c77709c1736b013ffe09ead6f', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '8281914d3380920a5562b468e87c87ca196a4830', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '7720c24a70339ea1c984dedf2faba0de8a6cfc86', ref: el => (this.navbar = el), "aria-label": this.textMain }, index.h("slot", { key: '3812be77ea739aac2be90cf8e7ac9a7e32bf5fce' })), index.h("div", { key: 'eda43d3b2e1d8f916275773d9ef93d364e9c1948', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: '914d94f91fe1764cf64e73fc22e4f7c5a0e08c2a', "aria-hidden": "true", name: "chevronright" }))));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostMainnavigation.prototype, "textMain", void 0);
+PostMainnavigation.style = postMainnavigationCss();
+
+exports.post_mainnavigation = PostMainnavigation;

package/dist/cjs/post-megadropdown-trigger.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+var eventFrom = require('./event-from-CwMw19f8.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const postMegadropdownTriggerCss = () => `button{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;overflow:hidden;-webkit-transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:-ms-flexbox;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}button:not(:disabled):hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}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}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){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){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){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){-webkit-box-shadow:var(--post-device-elevation-100);box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}button{--post-nav-item-border-width:1px;width:100%;-ms-flex-pack:start;justify-content:start;position:relative;padding:.75rem .75rem calc(.75rem - var(--post-nav-item-border-width)) .5rem;gap:1rem;border-radius:0;line-height:1.5;outline-color:currentColor !important;border-bottom:var(--post-nav-item-border-width) solid currentColor;height:100%}button:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);border-bottom-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){-webkit-box-shadow:none;box-shadow:none}button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline:none !important}button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:has(:focus-visible),.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline:none !important}button:is(:focus-visible,:focus-within,.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:focus-within,.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:focus-within,.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}}button>post-icon:where(:last-child){-webkit-margin-start:auto;margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:calc(.5rem + 1.5px) .75rem calc(.5rem + 1.5px - var(--post-nav-item-border-width)) .5rem;gap:.5rem;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:1rem .75rem;gap:.5rem;border-bottom:0}}:host{position:relative;display:inline-block}button post-icon{-webkit-transition:-webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span[aria-hidden]:where(span:empty+*){visibility:visible}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}button[aria-expanded=true]{background-color:#f0efed;color:#050400;z-index:2}button[aria-expanded=true]:hover{-webkit-box-shadow:inset 0 -0.7px 0 0 #f0efed;box-shadow:inset 0 -0.7px 0 0 #f0efed}button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}@supports not selector(:has(:focus-visible)){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}}@media screen and (max-width: 1023.98px){button post-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-transform:rotate(-90deg) !important;transform:rotate(-90deg) !important}}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostMegadropdownTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isMegadropdownExpanded = false;
+        this.slottedContent = null;
+        /**
+         * Sets the trigger state to be active or inactive.
+         */
+        this.active = false;
+    }
+    componentWillRender() {
+        this.handleSlottedContentChanges();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver)
+            this.mutationObserver.disconnect();
+    }
+    onMegadropdownToggled(event) {
+        if (event.target.id === this.for) {
+            const wasMegadropdownExpanded = this.isMegadropdownExpanded;
+            this.isMegadropdownExpanded = event.detail.isVisible;
+            const haveBeenClosed = wasMegadropdownExpanded && !this.isMegadropdownExpanded;
+            if (!haveBeenClosed || !event.detail.focusParent)
+                return;
+            // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+            setTimeout(() => {
+                this.interactiveButton.focus();
+            }, 100);
+        }
+    }
+    get megadropdown() {
+        const ref = document.getElementById(this.for);
+        if (ref?.localName !== 'post-megadropdown') {
+            console.warn(`No post-megadropdown found with ID: ${this.for}`);
+            return null;
+        }
+        return ref;
+    }
+    handleSlottedContentChanges() {
+        this.cloneSlottedButton();
+        this.mutationObserver = new MutationObserver(this.cloneSlottedButton.bind(this));
+        this.mutationObserver.observe(this.host, { childList: true, subtree: true });
+    }
+    cloneSlottedButton() {
+        this.slottedContent = this.host.innerHTML;
+    }
+    onClick() {
+        this.megadropdown?.toggle();
+    }
+    onKeyDown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const megadropdown = this.megadropdown;
+        if (!megadropdown)
+            return;
+        event.preventDefault();
+        this.megadropdown.toggle();
+    }
+    render() {
+        return (index.h(index.Host, { key: '96f2859be8fab445dab5c62619537777db0bfa44', "data-version": _package.version }, index.h("button", { key: '0ff54f82520a40978cac57af2adeb23beff3545d', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, index.h("span", { key: '327b760b66b35e0b4442bc950b202e73842b131e' }, index.h("span", { key: '265a6fb86a3bf12357ac58cc1887a32738b40710', innerHTML: this.slottedContent }), index.h("span", { key: '0ddcb317aed396d305b00d6e61a10b98f40ed78b', "aria-hidden": "true" }, index.h("slot", { key: '458df53ef32b64de8c4e6cb78263423ad59fa18b' }))), index.h("post-icon", { key: '2da566858b7ffa965da9cac2436dfd38a818eb47', name: "chevrondown" }))));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostMegadropdownTrigger.prototype, "for", void 0);
+__decorate([
+    eventFrom.EventFrom('post-megadropdown', { ignoreNestedComponents: false })
+], PostMegadropdownTrigger.prototype, "onMegadropdownToggled", null);
+PostMegadropdownTrigger.style = postMegadropdownTriggerCss();
+
+exports.post_megadropdown_trigger = PostMegadropdownTrigger;

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

@@ -0,0 +1,352 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var fadeSlide = require('./fade-slide-dPhQa-I1.js');
+var breakpoints = require('./breakpoints-CI0Xuh1L.js');
+var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
+var _package = require('./package-MGiZpKVI.js');
+var utils = require('./utils-s05L2ulk.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+require('./index-CggFmZ8n.js');
+require('./get-root-B1FnQ50K.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+/**
+ * Used by PostMegadropdown (burger menu)
+ */
+const defaultOptions = {
+    translate: 100,
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+};
+function animateSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, { duration, easing: utils.resolveEasing(easing), fill });
+}
+function slide(el, direction, options = {}) {
+    const mergedOptions = {
+        ...defaultOptions,
+        ...options,
+    };
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { transform: `translateX(${translate}%)` },
+        { transform: 'translateX(0)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateSlide(el, keyframes, options);
+}
+
+const postMegadropdownCss = () => `*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{max-height:calc(100vh - var(--post-header-height) - 3rem);background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{-webkit-animation:slide-down 350ms forwards;animation:slide-down 350ms forwards}.megadropdown.slide-out{-webkit-animation:slide-up 350ms forwards;animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);-ms-scroll-chaining:none;overscroll-behavior:contain}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{-webkit-border-after:1px solid CanvasText;border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{padding:3rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);-webkit-padding-before:1.5rem;padding-block-start:1.5rem}}@media screen and (max-width: 1023.98px){.section .megadropdown-content{-webkit-padding-after:1.5rem;padding-block-end:1.5rem}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;overflow:hidden;-webkit-transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);-ms-flex-order:-1;order:-1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-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}.back-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){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-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){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{-webkit-margin-after:2rem;margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{-webkit-margin-after:1.5rem;margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostMegadropdown = class {
+    get megadropdownTrigger() {
+        const hostId = this.host.getAttribute('id');
+        return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"]`) : null;
+    }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postToggleMegadropdown = index.createEvent(this, "postToggleMegadropdown");
+        this.currentAnimation = null;
+        this.isAnimating = false;
+        this.fsAnimationOptions = {
+            translate: -10,
+            duration: 350,
+            easing: 'headerEase',
+        };
+        this.device = breakpoints.breakpoint.get('device');
+        /**
+         * Holds the current visibility state of the dropdown.
+         * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+         * and updates automatically when the dropdown is toggled.
+         */
+        this.isVisible = false;
+        this.trigger = false;
+        /** Holds the current animation class. */
+        this.animationClass = null;
+        this.handleClickOutside = async (event) => {
+            if (this.device !== 'desktop')
+                return;
+            const target = event.target;
+            if (this.host.contains(target)) {
+                return;
+            }
+            // Ignore clicks on the trigger or its contents to prevent running hide() twice
+            if (this.megadropdownTrigger.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;
+                    }
+                }
+            }
+            await this.hide(false);
+        };
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleTabOutside = this.handleTabOutside.bind(this);
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+    connectedCallback() {
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+    }
+    componentDidRender() {
+        this.getFocusableElements();
+    }
+    componentDidLoad() {
+        this.checkInitialAriaCurrent();
+        this.setupObserver();
+        this.handleAriaCurrentChange([]);
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+        if (PostMegadropdown.activeDropdown === this)
+            PostMegadropdown.activeDropdown = null;
+        this.removeListeners();
+        if (this.defaultSlotObserver) {
+            this.defaultSlotObserver.disconnect();
+        }
+    }
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    async toggle() {
+        if (this.isAnimating) {
+            // If this is already animating towards a future state -> reverse intent
+            return this.isVisible ? this.show() : this.hide();
+        }
+        return this.isVisible ? this.hide() : this.show();
+    }
+    /**
+     * Displays the dropdown.
+     */
+    async show() {
+        if (this.device !== 'desktop') {
+            const trigger = this.megadropdownTrigger;
+            if (trigger)
+                this.megadropdownTitle = trigger.innerHTML;
+        }
+        let switching = false;
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
+            // We're switching from another megadropdown => do not run the entry animation
+            switching = true;
+        }
+        this.cancelAnimation();
+        // Set the megadropdown visible and mark it as the active dropdown
+        this.isVisible = true;
+        PostMegadropdown.activeDropdown = this;
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: true });
+        if (switching) {
+            // When switching between megadropdowns, skip entry animation
+            this.focusFirst();
+            this.addListeners();
+        }
+        else {
+            try {
+                await this.animate('in');
+                this.focusFirst();
+                // After the megadropdown has finished entry animation
+                this.addListeners();
+            }
+            catch {
+                // Open animation was cancelled - reset state
+                this.removeListeners();
+                this.isVisible = false;
+                if (PostMegadropdown.activeDropdown === this)
+                    PostMegadropdown.activeDropdown = null;
+                this.postToggleMegadropdown.emit({ isVisible: false, focusParent: true });
+            }
+        }
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide(focusParent = true, forceClose = false) {
+        if (forceClose) {
+            this.forceClose();
+            return;
+        }
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        try {
+            await this.animate('out');
+            // After the closing animation finishes set the megadropdown as non visible
+            this.isVisible = false;
+            this.removeListeners();
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+        }
+        catch {
+            // Closing animation was cancelled - reset state
+            PostMegadropdown.activeDropdown = this;
+            this.addListeners();
+            this.isVisible = true;
+            this.postToggleMegadropdown.emit({ isVisible: true, focusParent: false });
+        }
+    }
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    async focusFirst() {
+        this.firstFocusableEl?.focus();
+    }
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.removeListeners();
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: false });
+        this.isVisible = false;
+        if (PostMegadropdown.activeDropdown === this)
+            PostMegadropdown.activeDropdown = null;
+    }
+    // Run the respective animation
+    createAnimation(direction) {
+        if (this.device === 'desktop') {
+            return fadeSlide.fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
+        }
+        return slide(this.animatedContainer, direction, {
+            translate: 100,
+            duration: 350,
+            easing: direction === 'in' ? 'ease-in' : 'ease-out',
+        });
+    }
+    async animate(direction) {
+        this.cancelAnimation();
+        this.currentAnimation = this.createAnimation(direction);
+        // Flag isAnimating used to avoid toggle() de-sync
+        this.isAnimating = true;
+        await this.currentAnimation.finished;
+        this.isAnimating = false;
+        this.currentAnimation = null;
+    }
+    cancelAnimation() {
+        this.currentAnimation?.cancel();
+        this.currentAnimation = null;
+    }
+    breakpointChange(e) {
+        this.device = e.detail;
+        this.cancelAnimation();
+    }
+    addListeners() {
+        this.host.addEventListener('keydown', this.keyboardHandler);
+        document.addEventListener('keyup', this.handleTabOutside);
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeListeners() {
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        document.removeEventListener('keyup', this.handleTabOutside);
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableElements = [
+            ...getFocusableChildren.getFocusableChildren(this.host),
+            ...getFocusableChildren.getFocusableChildren(this.host.shadowRoot),
+        ];
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements.at(-1);
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key !== 'Tab' || this.device === 'desktop')
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && 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 && 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.isVisible && !this.host.contains(e.target)) {
+                this.hide(false);
+            }
+        }
+    }
+    /**
+     * Sets up a MutationObserver on the host to watch for changes
+     * in `aria-current` attributes.
+     */
+    setupObserver() {
+        const config = {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-current'],
+        };
+        this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
+        this.defaultSlotObserver.observe(this.host, config);
+    }
+    /**
+     * Adds or removes the 'active' class on the megadropdown trigger button
+     * based on the active state.
+     *
+     * @param isActive - Whether the trigger should appear active
+     */
+    setTriggerActive(isActive) {
+        const trigger = this.megadropdownTrigger;
+        if (trigger)
+            trigger.setAttribute('active', isActive.toString());
+    }
+    /**
+     * Updates the megadropdown trigger state when the megadropdown content changes.
+     * Checks if any element inside the megadropdown has `aria-current="page"`
+     * and sets the trigger as active accordingly.
+     */
+    handleAriaCurrentChange(mutations) {
+        if (mutations.length === 0)
+            return;
+        const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
+        this.setTriggerActive(hasCurrentPage);
+    }
+    /**
+     * Checks on initialization if any element inside the megadropdown
+     * has `aria-current="page"` and sets the trigger as active if so.
+     */
+    checkInitialAriaCurrent() {
+        const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
+        if (hasCurrentPage)
+            this.setTriggerActive(true);
+    }
+    render() {
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (index.h(index.Host, { key: '8c6cd70082c2cdd9c208ad1ef138a21463919547', version: _package.version }, index.h("div", { key: 'ff9466a7e28e894f56c9ab22d3999f68366a4aee', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, index.h("div", { key: '13a7b44deceb6a83842d324b012f34adc6606de6', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (index.h("p", { key: '78cfcb708ad60f12203bc34b58915665b4b5b3ef', class: "megadropdown-title" }, this.megadropdownTitle)), index.h("div", { key: 'e78eb79d9806d23fa75184f1ad9f2f7eef318297', class: "megadropdown-content" }, index.h("slot", { key: 'e7008833f9700059a189665a19371f52b7ab9ed6' })), this.device === 'desktop' ? (index.h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (index.h("button", { onClick: () => this.hide(true), class: "back-button" }, index.h("post-icon", { name: "arrowleft" }), this.textBack))))));
+    }
+    get host() { return index.getElement(this); }
+};
+/** Tracks the currently active dropdown instance. */
+PostMegadropdown.activeDropdown = null;
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostMegadropdown.prototype, "textClose", void 0);
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostMegadropdown.prototype, "textBack", void 0);
+PostMegadropdown.style = postMegadropdownCss();
+
+exports.post_megadropdown = PostMegadropdown;

package/dist/cjs/post-menu-item.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+
+const postMenuItemCss = () => `post-menu-item 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;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.5rem .75rem .5rem 1rem;gap:.75rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1rem;height:1rem;margin-block:.25rem}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:.75rem;gap:1rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.5rem;height:1.5rem;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:.8125rem}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}`;
+
+const PostMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    connectedCallback() {
+        this.host.dataset.version = _package.version;
+    }
+    get host() { return index.getElement(this); }
+};
+PostMenuItem.style = postMenuItemCss();
+
+exports.post_menu_item = PostMenuItem;