@swisspost/design-system-components 10.0.0-next.47 → 10.0.0-next.48

package/dist/components/react/post-closebutton.js

@@ -0,0 +1,50 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { d as defineCustomElement$2 } from './p-Da5wbVP8.js';
+
+const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const PostClosebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostClosebutton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    componentDidLoad() {
+        this.checkHiddenLabel();
+    }
+    checkHiddenLabel(slot = this.host.shadowRoot.querySelector('.visually-hidden slot')) {
+        if (slot.assignedNodes().length === 0) {
+            console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a8db3ecbefea609234c4c8c29dbf085637592c2c', "data-version": version }, h("button", { key: '58cef7f32f6ec89d46a1ea57b5497089a96aebf3', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '023a67437b69bb9966d08b027cc5f10d68baac40', "aria-hidden": "true", name: "closex" }), h("span", { key: 'b1a21810b6179ddd8d66b426a3149966c1972f59', class: "visually-hidden" }, h("slot", { key: '2a2417bedbcb57c75993722d3267342c7df7381d', onSlotchange: () => this.checkHiddenLabel() })))));
+    }
+    get host() { return this; }
+    static get style() { return postClosebuttonCss; }
+}, [1, "post-closebutton"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-closebutton", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-closebutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostClosebutton$1);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostClosebutton = PostClosebutton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostClosebutton, defineCustomElement };

package/dist/components/react/post-collapsible-trigger.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostCollapsibleTrigger extends Components.PostCollapsibleTrigger, HTMLElement {}
+export const PostCollapsibleTrigger: {
+    prototype: PostCollapsibleTrigger;
+    new (): PostCollapsibleTrigger;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-collapsible-trigger.js

@@ -0,0 +1,6 @@
+import { P as PostCollapsibleTrigger$1, d as defineCustomElement$1 } from './p-Tg0GNTZM.js';
+
+const PostCollapsibleTrigger = PostCollapsibleTrigger$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostCollapsibleTrigger, defineCustomElement };

package/dist/components/react/post-collapsible.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostCollapsible extends Components.PostCollapsible, HTMLElement {}
+export const PostCollapsible: {
+    prototype: PostCollapsible;
+    new (): PostCollapsible;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-collapsible.js

@@ -0,0 +1,6 @@
+import { P as PostCollapsible$1, d as defineCustomElement$1 } from './p-q8Fvf8A0.js';
+
+const PostCollapsible = PostCollapsible$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostCollapsible, defineCustomElement };

package/dist/components/react/post-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostFooter extends Components.PostFooter, HTMLElement {}
+export const PostFooter: {
+    prototype: PostFooter;
+    new (): PostFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-footer.js

@@ -0,0 +1,117 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { b as breakpoint } from './p-CJ80BZ06.js';
+import { d as defineCustomElement$6 } from './p-Dq9F2i7n.js';
+import { d as defineCustomElement$5 } from './p-CiYSngKM.js';
+import { d as defineCustomElement$4 } from './p-q8Fvf8A0.js';
+import { d as defineCustomElement$3 } from './p-Tg0GNTZM.js';
+import { d as defineCustomElement$2 } from './p-Da5wbVP8.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: 'a3e6828ef746ddffe046e357608a8de4a7e65aef', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: 'fc1ca33cdb64bff7afcfac3aab217b9d5b6bda32' }, h("h2", { key: 'b78636fa1ce5d94311b42afaac23a77a1617873f', class: "visually-hidden" }, this.label), h("div", { key: '1562367473f54eecaa82ed3b39b17bb99fb206fa', class: "footer-container" }, h("div", { key: 'e5ef28a7fbc14ae04fc24781f90cd75e8648a61e', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'a1648b7d59cb4b0342cb847783888a2c9aeb7973', class: "footer-column" }, h("div", { key: '000eb64db6bcb7403297809b004a57eece8c76ed', class: "footer-socialmedia" }, h("slot", { key: '0effe00b425975fe88aeb796efccc09ae05f7dde', name: "socialmedia" })), h("div", { key: 'a469169fcd3a5c58d9c651d7a3fe09bb709e1f91', class: "footer-app" }, h("slot", { key: '32c7fa2fbaf8498fdf10425c28a487bca6708c07', name: "app" }))), h("div", { key: 'da56f002b12eedcd4e0b69cb113eb0fe5a8c20a7', class: "footer-businesssectors" }, h("slot", { key: 'b83cf880c13c3fa5b4fc45ab88f174570ce60e04', name: "businesssectors" })), h("div", { key: '6ae55420c729a42730d610c1dd24cc5e9c87fdbb', class: "footer-meta" }, h("slot", { key: '85991571ab8525f2d86d100f5eba0ff937030d90', name: "meta" })), h("div", { key: 'a66a5ba0858e7c2064706f071c989ddf3095f3f3', class: "footer-copyright" }, h("slot", { key: 'b42f156e0fc9027e846691bd8c7ff04b93091e7e', 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;
+
+export { PostFooter, defineCustomElement };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostHeader extends Components.PostHeader, HTMLElement {}
+export const PostHeader: {
+    prototype: PostHeader;
+    new (): PostHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,333 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { t as throttle, b as breakpoint } from './p-CJ80BZ06.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { g as getFocusableChildren } from './p-C35MCWIp.js';
+import { E as EventFrom } from './p-kraHE1r3.js';
+
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+function slideUp(el, translateSize = '-100%') {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+}
+function slideDown(el, translateSize = '-100%') {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+}
+
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top),  calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){: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-expanded-height);--post-logo-height:var(--post-global-header-expanded-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-expanded-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:8px;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)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-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;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-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;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;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-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-sub{margin-inline-end:16px}@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{padding-block:16px 24px;padding-inline:40px}::slotted(post-mainnavigation),.navigation-footer,.navigation-target-group{display:none;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer,.navigation.extended .navigation-target-group{display:flex}::slotted(post-mainnavigation){padding-block:24px}.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}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@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 hasMobileMenu() {
+        return this.device !== 'desktop' && this.hasNavigation;
+    }
+    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.hasNavigation = false;
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+            this.switchLanguageSwitchMode();
+            if (this.device === 'desktop' && this.mobileMenuExtended) {
+                this.closeMobileMenu();
+            }
+            if (this.device !== 'desktop') {
+                Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
+                    dropdown.hide(false, true);
+                });
+                this.megadropdownOpen = false;
+            }
+        };
+        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.checkNavigationExistence();
+        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;
+    }
+    checkNavigationExistence() {
+        this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
+    }
+    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;
+        if (this.mobileMenuExtended) {
+            // Wait for the close animation to finish before hiding megadropdowns
+            await this.mobileMenuAnimation.finished;
+            this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+            if (this.mobileMenuExtended === false) {
+                this.closeAllMegadropdowns();
+            }
+        }
+        else {
+            this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+            // If opening, close any open megadropdowns immediately
+            if (this.megadropdownOpen) {
+                this.closeAllMegadropdowns();
+            }
+        }
+    }
+    // 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-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();
+            }
+        }
+    }
+    closeAllMegadropdowns() {
+        Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
+            dropdown.hide(false, true);
+        });
+        this.megadropdownOpen = false;
+    }
+    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-expanded-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.hasMobileMenu ? 'list' : 'menu';
+        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("div", { class: "navigation-target-group" }, (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { name: "target-group" }))), h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
+    }
+    render() {
+        const localHeaderClasses = ['local-header'];
+        if (this.mobileMenuExtended)
+            localHeaderClasses.push('local-header-mobile-extended');
+        if (!this.hasNavigation)
+            localHeaderClasses.push('no-navigation');
+        return (h(Host, { key: 'ec2be7f6699d0b6be65c7ec05ccfaf11fe38551f', "data-version": version, "data-color-scheme": "light" }, h("div", { key: 'defa2d956e848f0270e1c36404bb0e32e6112ab2', class: "global-header" }, h("div", { key: 'b1db492439d45566140d8698310d68707d44f178', class: "global-sub" }, h("div", { key: 'a238bbbe5999e4ff858b9f7223eb3a82ae517dc3', class: "logo" }, h("slot", { key: '7b6a922842eaf01fdddad88079c5c4e27d9caf9d', name: "post-logo" }))), h("div", { key: '70b7e4f0a0e7dcd8458238f85d5cadfad5c8030d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '9abe132d957d37848205cd5b045ed9d8e9040da4', name: "target-group" })), h("div", { key: '6666cb7b19cd3654020291cff4b3f7821f190416', class: "global-sub" }, !this.hasMobileMenu && (h("slot", { key: '446f14ba4b014b35b60dbf643ab1baace4cd1cd7', name: "meta-navigation" })), h("slot", { key: '6cdb4006e56ccdeb076cbe486a437ca56e4b259a', name: "global-controls" }), !this.hasMobileMenu && h("slot", { key: '6be456ce09dee5653c36e2320fa89345139232a4', name: "post-language-switch" }), this.hasNavigation && (h("div", { key: '28f87889a93aae2e78978cbd02e18dca58a486ef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '157b154a30cdaf4c17434c2a6c7a796ad945780c', name: "post-togglebutton" }))))), h("div", { key: 'ddf249e9b055659325cc9717f03ccd9345556e15', class: localHeaderClasses.join(' ') }, h("slot", { key: '858312b4c4ef74c76588f9cd0b49acfda39f6daf', name: "title" }), h("div", { key: '73db57db8df18d9106cb124cf95b0c2551ceda23', class: "local-sub" }, h("slot", { key: 'e36a9e8572878fe11ae326503b0cbcc4d03ddd3e', name: "local-controls" }), h("slot", { key: '354e22a83276f8fa8c79127c8cdcfbf0f12dbf91' })), 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],
+        "hasNavigation": [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;
+
+export { PostHeader, defineCustomElement };

package/dist/components/react/post-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostIcon extends Components.PostIcon, HTMLElement {}
+export const PostIcon: {
+    prototype: PostIcon;
+    new (): PostIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PostIcon$1, d as defineCustomElement$1 } from './p-Da5wbVP8.js';
+
+const PostIcon = PostIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostIcon, defineCustomElement };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostLanguageOption extends Components.PostLanguageOption, HTMLElement {}
+export const PostLanguageOption: {
+    prototype: PostLanguageOption;
+    new (): PostLanguageOption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;