@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/components/post-collapsible.js

@@ -1,4 +1,4 @@
-import { P as PostCollapsible$1, d as defineCustomElement$1 } from './post-collapsible2.js';
+import { P as PostCollapsible$1, d as defineCustomElement$1 } from './p-DphlfQse.js';
 
 const PostCollapsible = PostCollapsible$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-footer.js

@@ -1,4 +1,115 @@
-import { P as PostFooter$1, d as defineCustomElement$1 } from './post-footer2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { b as breakpoint } from './p-Cx0AiN2A.js';
+import { d as defineCustomElement$6 } from './p-DlEtlaNu.js';
+import { d as defineCustomElement$5 } from './p-CtNCtg2z.js';
+import { d as defineCustomElement$4 } from './p-DphlfQse.js';
+import { d as defineCustomElement$3 } from './p-D3LhzIrC.js';
+import { d as defineCustomElement$2 } from './p-fmA57Ivd.js';
+
+const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-post-list-flex-direction:column;--post-footer-post-list-gap:8px;--post-footer-post-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-post-list-flex-direction:row;--post-footer-post-list-gap:16px;--post-footer-post-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-post-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}post-accordion-item.d-none+post-accordion-item{--post-accordion-button-border-top-width:unset}post-accordion-item:not(.d-none)~post-accordion-item,post-accordion-item:not(post-accordion-item:not(.d-none)~*):not(:has(~post-accordion-item:not(.d-none))){--post-accordion-button-border-top-width:0}";
+
+const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
+const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends H {
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.device = breakpoint.get('device');
+        this.gridSlotDisplayed = {};
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+        };
+        this.handleGridSlotChange = (...devices) => (e) => {
+            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
+                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+            }
+        };
+        this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    componentWillLoad() {
+        this.validateLabel();
+        // initialize grid visibility by checking the content of each slot
+        GRID_SLOTS.forEach(slotName => {
+            const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
+            this.updateGridSlotDisplay(slotName, assignedElements.length > 0);
+        });
+    }
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    updateGridSlotDisplay(slotName, hasContent) {
+        if (this.gridSlotDisplayed[slotName] !== hasContent) {
+            this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
+        }
+    }
+    renderAccordion() {
+        return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { class: { 'd-none': !this.gridSlotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
+    }
+    renderColumns() {
+        return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
+    }
+    render() {
+        return (h(Host, { key: 'a8e9b31b6397a0714dbf04344ab8b14a6557de33', "data-version": version }, h("footer", { key: 'ff7b4b44e16615386c5d12e22cede352f1713771' }, h("h2", { key: '3c9e6bb2abc6c8d780d2d8add008a6429d2e56c5', class: "visually-hidden" }, this.label), h("div", { key: 'ed1081328cc99f3a35fca694bcb46a06a0722e0c', class: "footer-container" }, h("div", { key: 'd251ed5c1cd48a58ffa13fcb3783c20ca0324f62', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '470c1bb6d26ba07b5aad802c7c4a857a4b677a33', class: "footer-column" }, h("div", { key: '1f5aa5b055e5843dbcd2b54e9f3e07f854131bdf', class: "footer-socialmedia" }, h("slot", { key: 'a0a4017352ff569ccda7f0f51192bf2e6ab5bf76', name: "socialmedia" })), h("div", { key: '52adfc1753529270eb3484581dac57978af5f447', class: "footer-app" }, h("slot", { key: '790891de631670fbca5460e3b1a118c22c707180', name: "app" }))), h("div", { key: 'a28cecfec455f31af7d098bf305c2b6382c85d8c', class: "footer-businesssectors" }, h("slot", { key: '14d504b9356313a3e631a9eca247bc3137ab22d5', name: "businesssectors" })), h("div", { key: '81a7114a63ac70c5e3fdf93c72c4f92ff93f8d14', class: "footer-meta" }, h("slot", { key: '346445c8df4d4ca575dff3a78408593b3fde805d', name: "meta" })), h("div", { key: '971e837c1c1553a5223c6a547bcc818baa252d1e', class: "footer-copyright" }, h("slot", { key: '7c22cadabaa8f1845226bccdbe3caf191e39e28e', name: "copyright" }))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"]
+    }; }
+    static get style() { return postFooterCss; }
+}, [1, "post-footer", {
+        "label": [1],
+        "device": [32],
+        "gridSlotDisplayed": [32]
+    }, undefined, {
+        "label": ["validateLabel"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-footer", "post-accordion", "post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostFooter$1);
+            }
+            break;
+        case "post-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostFooter = PostFooter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-header.js

@@ -1,4 +1,276 @@
-import { P as PostHeader$1, d as defineCustomElement$1 } from './post-header2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { t as throttle, b as breakpoint } from './p-Cx0AiN2A.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { a as slideUp, s as slideDown } from './p-BuLMaH5t.js';
+import { g as getFocusableChildren } from './p-C35MCWIp.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-height);--post-logo-height:var(--post-global-header-height);--post-global-controls-top:0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
+
+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 PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H {
+    get scrollParent() {
+        const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
+        if (frozenScrollParent)
+            return frozenScrollParent;
+        let element = this.host.parentElement;
+        while (element) {
+            const overflow = getComputedStyle(element).overflowY;
+            if (['auto', 'scroll'].includes(overflow)) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return document.body;
+    }
+    lockBody(newValue, _oldValue, propName) {
+        const scrollParent = this.scrollParent;
+        const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
+        if (this.device !== 'desktop' && mobileMenuExtended) {
+            scrollParent.setAttribute('data-post-scroll-locked', '');
+            this.host.addEventListener('keydown', this.keyboardHandler);
+        }
+        else {
+            scrollParent.removeAttribute('data-post-scroll-locked');
+            this.host.removeEventListener('keydown', this.keyboardHandler);
+        }
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.device = breakpoint.get('device');
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+            this.switchLanguageSwitchMode();
+            if (this.device === 'desktop' && this.mobileMenuExtended) {
+                this.closeMobileMenu();
+            }
+        };
+        this.megadropdownStateHandler = (event) => {
+            this.megadropdownOpen = event.detail.isVisible;
+        };
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('resize', this.throttledResize, { passive: true });
+        window.addEventListener('scroll', this.handleScrollEvent, {
+            passive: true,
+        });
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
+            passive: true,
+        });
+        document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
+        this.host.addEventListener('click', this.handleLinkClick);
+        window.addEventListener('postBreakpoint:device', this.breakpointChange);
+        this.switchLanguageSwitchMode();
+        this.handleScrollParentResize();
+        this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
+    }
+    componentWillRender() {
+        this.handleScrollEvent();
+    }
+    componentDidRender() {
+        this.getFocusableElements();
+        this.handleLocalHeaderResize();
+    }
+    componentDidLoad() {
+        this.updateLocalHeaderHeight();
+    }
+    // Clean up possible side effects when post-header is disconnected
+    disconnectedCallback() {
+        const scrollParent = this.scrollParent;
+        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
+        window.removeEventListener('resize', this.throttledResize);
+        window.removeEventListener('scroll', this.handleScrollEvent);
+        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.scrollParentResizeObserver) {
+            this.scrollParentResizeObserver.disconnect();
+            this.scrollParentResizeObserver = null;
+        }
+        if (this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver.disconnect();
+            this.localHeaderResizeObserver = null;
+        }
+        this.mobileMenuExtended = false;
+    }
+    async closeMobileMenu() {
+        this.mobileMenuAnimation.finish();
+        const menuButton = this.getMenuButton();
+        if (menuButton) {
+            menuButton.toggled = false;
+        }
+        this.mobileMenuExtended = false;
+    }
+    /**
+     * Toggles the mobile navigation.
+     */
+    async toggleMobileMenu(force) {
+        if (this.device === 'desktop')
+            return;
+        this.mobileMenuAnimation = this.mobileMenuExtended
+            ? slideUp(this.mobileMenu)
+            : slideDown(this.mobileMenu);
+        // Update the state of the toggle button
+        const menuButton = this.host.querySelector('post-togglebutton');
+        menuButton.toggled = force ?? !this.mobileMenuExtended;
+        // Toggle menu visibility before it slides down and after it slides back up
+        if (this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+        if (this.mobileMenuExtended === false) {
+            Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
+                dropdown.hide(false, true);
+            });
+        }
+    }
+    // Get all the focusable elements in the post-header mobile menu
+    getFocusableElements() {
+        // Get elements in the correct order (different as the DOM order)
+        const focusableEls = [
+            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
+            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-mainnavigation > .back-button, post-megadropdown-trigger')),
+            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
+        ];
+        // Add the main toggle menu button to the list of focusable children
+        const focusableChildren = [
+            this.host.querySelector('post-togglebutton'),
+            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
+        ];
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    getMenuButton() {
+        return this.host.querySelector('post-togglebutton');
+    }
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.mobileMenuExtended) {
+            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();
+            }
+        }
+    }
+    handleScrollEvent() {
+        const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
+    }
+    updateLocalHeaderHeight() {
+        const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeaderElement) {
+            document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderElement.clientHeight}px`);
+        }
+    }
+    updateScrollParentHeight() {
+        this.host.style.setProperty('--post-header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
+    }
+    handleLinkClick(event) {
+        const target = event.target;
+        const isLinkInMainNav = target.closest('post-mainnavigation a');
+        const isLinkInMegadropdown = target.closest('post-megadropdown a');
+        if (!isLinkInMainNav && !isLinkInMegadropdown) {
+            return;
+        }
+        if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
+            this.toggleMobileMenu(false);
+        }
+        if (this.device === 'desktop' && isLinkInMegadropdown) {
+            const megadropdownLink = target.closest('post-megadropdown a');
+            if (megadropdownLink) {
+                target.closest('post-megadropdown').hide(true);
+            }
+        }
+    }
+    handleScrollParentResize() {
+        if (this.scrollParent) {
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
+            this.scrollParentResizeObserver.observe(this.scrollParent);
+        }
+    }
+    handleLocalHeaderResize() {
+        const localHeader = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeader && !this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
+            this.localHeaderResizeObserver.observe(localHeader);
+        }
+    }
+    switchLanguageSwitchMode() {
+        const variant = this.device === 'desktop' ? 'menu' : 'list';
+        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+            languageSwitch?.setAttribute('variant', variant);
+        });
+    }
+    renderNavigation() {
+        const navigationClasses = ['navigation'];
+        const mobileMenuScrollTop = this.mobileMenu?.scrollTop ?? 0;
+        if (this.mobileMenuExtended) {
+            navigationClasses.push('extended');
+        }
+        if (this.megadropdownOpen) {
+            navigationClasses.push('megadropdown-open');
+        }
+        return (h("div", { class: navigationClasses.join(' '), style: { '--post-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: '90a8c0bedc440a7242167267a62772939c3e92bc', "data-version": version }, h("div", { key: '605d0dd51867f6748cc1148d6336c3e42943a4cb', class: "global-header" }, h("div", { key: '12ea812d7aca78f86cea0494029b92d7e7e5c4e7', class: "global-sub" }, h("div", { key: 'e6e2e92bedc2b2abd84546ed7bbf8d54b4cb6f79', class: "logo" }, h("slot", { key: '52b5fa88095656878d81b5bfae5d9e2d4e154d6d', name: "post-logo" }))), h("div", { key: '428c5a10001e44fb0fc0f4806bca223697de874f', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '806129b790ec2e92a2229c4c83b390604bf7402f', name: "meta-navigation" }), h("slot", { key: 'd1b8d1967dc6847999040f7d6be49ccdb9888c73', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c9dec95d646e20493efde8648e0962782844d218', name: "post-language-switch" }), h("div", { key: 'ce6105955665c13392a38968cea359c431e002a4', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '0dadceedde6aa20e0e2255c49b8b56995a2131b2', name: "post-togglebutton" })))), h("div", { key: 'cffb43a5b2c1843f42b73288c713f633949879db', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'd36e0dda59b4a6d5fe61b3ac48fcdc1868fd0a4b', name: "title" }), h("div", { key: '998114aff9f726b3d9edf256756d399efd2e0751', class: "local-sub" }, h("slot", { key: '222017a680af7bbeca73d7414801fd3ce3a55099', name: "local-controls" }), h("slot", { key: '760849a61ffea59dc184c4ae31b254f7c53aaaa3' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "device": ["lockBody"],
+        "mobileMenuExtended": ["lockBody"]
+    }; }
+    static get style() { return postHeaderCss; }
+}, [1, "post-header", {
+        "device": [32],
+        "mobileMenuExtended": [32],
+        "megadropdownOpen": [32],
+        "toggleMobileMenu": [64]
+    }, undefined, {
+        "device": ["lockBody"],
+        "mobileMenuExtended": ["lockBody"]
+    }]);
+__decorate([
+    EventFrom('post-megadropdown')
+], PostHeader$1.prototype, "megadropdownStateHandler", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostHeader$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostHeader = PostHeader$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-icon.js

@@ -1,4 +1,4 @@
-import { P as PostIcon$1, d as defineCustomElement$1 } from './post-icon2.js';
+import { P as PostIcon$1, d as defineCustomElement$1 } from './p-fmA57Ivd.js';
 
 const PostIcon = PostIcon$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,99 @@
-import { P as PostLanguageOption$1, d as defineCustomElement$1 } from './post-language-option2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { c as checkRequiredAndType, d as checkEmptyOrOneOf, e as checkEmptyOrType, a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { S as SWITCH_VARIANTS } from './p-DjIHLduJ.js';
+
+const postLanguageOptionCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}post-language-option{display:inline-block}post-language-option 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}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-option a{color:var(--post-scheme-color-surface-default-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}";
+
+const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.postChange = createEvent(this, "postChange");
+        this.postLanguageOptionInitiallyActive = createEvent(this, "postLanguageOptionInitiallyActive");
+    }
+    validateCode() {
+        checkRequiredAndType(this, 'code', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    }
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateUrl() {
+        checkEmptyOrUrl(this, 'url');
+    }
+    componentDidLoad() {
+        this.validateCode();
+        this.validateName();
+        this.validateUrl();
+        if (!this.name && this.isNameRequired()) {
+            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
+        }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
+    }
+    /**
+     * Selects the language option programmatically.
+     */
+    async select() {
+        this.active = true;
+        this.emitChange();
+    }
+    emitChange() {
+        this.postChange.emit(this.code);
+    }
+    isNameRequired() {
+        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
+    }
+    render() {
+        const lang = this.code.toLowerCase();
+        const role = this.variant === 'menu' ? 'menuitem' : undefined;
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.emitChange();
+            }
+        };
+        return (h(Host, { key: '9e1364dd3214a5bec9d4fa7e4c794d2d3baa7796', "data-version": version }, this.url ? (h("a", { role: role, "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { role: role, "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }; }
+    static get style() { return postLanguageOptionCss; }
+}, [4, "post-language-option", {
+        "code": [1],
+        "active": [1540],
+        "variant": [1],
+        "name": [1],
+        "url": [1],
+        "select": [64]
+    }, undefined, {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-language-option"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-language-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLanguageOption$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostLanguageOption = PostLanguageOption$1;
 const defineCustomElement = defineCustomElement$1;