@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

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

@@ -2,52 +2,25 @@ import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
-
-function debounce(callback, timeout = 200) {
-    let id;
-    return (...args) => {
-        if (id)
-            clearTimeout(id);
-        id = setTimeout(callback, timeout, ...args);
-    };
-}
-
-function getRoot(element) {
-    const root = element.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
-        return root;
-    }
-    throw new Error('Attempting to access root node before the element is attached to the document or shadow tree.');
-}
+import { d as debounce } from './debounce.js';
+import { g as getRoot } from './get-root.js';
 
 const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.observer = new MutationObserver(() => this.setTrigger());
-        this.debouncedUpdate = debounce(() => {
-            var _a;
-            if (!this.trigger)
-                return;
-            // add the provided id to the aria-controls list
-            const ariaControls = this.trigger.getAttribute('aria-controls');
-            if (!(ariaControls === null || ariaControls === void 0 ? void 0 : ariaControls.includes(this.for))) {
-                const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-                this.trigger.setAttribute('aria-controls', newAriaControls);
-            }
-            // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-            const isCollapsed = (_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.collapsed;
-            const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-            this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
-        });
         this.for = undefined;
     }
+    trigger;
+    observer = new MutationObserver(() => this.setTrigger());
+    root;
+    get host() { return this; }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     setAriaAttributes() {
-        checkNonEmpty(this.for, 'The post-collapsible-trigger "for" prop is required.');
-        checkType(this.for, 'string', 'The post-collapsible-trigger "for" prop should be a id.');
+        checkNonEmpty(this, 'for');
+        checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
         void this.update();
     }
     /**
@@ -89,12 +62,25 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     async update() {
         this.debouncedUpdate();
     }
+    debouncedUpdate = debounce(() => {
+        if (!this.trigger)
+            return;
+        // add the provided id to the aria-controls list
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        if (!ariaControls?.includes(this.for)) {
+            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+            this.trigger.setAttribute('aria-controls', newAriaControls);
+        }
+        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
+        const isCollapsed = this.collapsible?.collapsed;
+        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
+        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+    });
     /**
      * Toggle the post-collapsible controlled by the trigger
      */
     async toggleCollapsible() {
-        var _a;
-        await ((_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.toggle());
+        await this.collapsible?.toggle();
     }
     /**
      * Retrieve the post-collapsible controlled by the trigger
@@ -117,7 +103,6 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.trigger.addEventListener('click', () => this.toggleCollapsible());
         this.setAriaAttributes();
     }
-    get host() { return this; }
     static get watchers() { return {
         "for": ["setAriaAttributes"]
     }; }

package/dist/components/post-collapsible2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { b as checkEmptyOrType } from './index2.js';
+import { e as checkEmptyOrType } from './index2.js';
 
 function isMotionReduced() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -14,17 +14,17 @@ const animationOptions = {
     easing: collapseEasing,
     fill: 'forwards',
 };
-const collapse = (el) => {
+function collapse(el) {
     const expandedKeyframe = { height: window.getComputedStyle(el).height };
     return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
-};
-const expand = (el) => {
+}
+function expand(el) {
     const expandedKeyframe = { height: `${el.scrollHeight}px`, offset: 1 };
-    const finalKeyframe = { height: 'auto' };
+    const finalKeyframe = { height: 'auto', overflow: 'visible' };
     return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
-};
+}
 
-const postCollapsibleCss = ":host{display:block;overflow:hidden}";
+const postCollapsibleCss = ":host{display:block;position:relative;overflow:hidden}";
 const PostCollapsibleStyle0 = postCollapsibleCss;
 
 const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends HTMLElement {
@@ -33,14 +33,21 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.__registerHost();
         this.__attachShadow();
         this.postToggle = createEvent(this, "postToggle", 7);
-        this.isLoaded = false;
-        this.isOpen = true;
         this.collapsed = false;
     }
+    isLoaded = false;
+    isOpen = true;
+    get host() { return this; }
     collapsedChange() {
-        checkEmptyOrType(this.collapsed, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+        checkEmptyOrType(this, 'collapsed', 'boolean');
         void this.toggle(!this.collapsed);
     }
+    /**
+     * An event emitted when the collapse element is shown or hidden, before the transition.
+     *
+     * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
+     */
+    postToggle;
     componentDidLoad() {
         this.collapsedChange();
         this.isLoaded = true;
@@ -62,20 +69,21 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         if (!this.isLoaded || isMotionReduced())
             animation.finish();
         await animation.finished;
-        animation.commitStyles();
+        const isHostRendered = this.host.offsetParent;
+        if (isHostRendered)
+            animation.commitStyles();
         return open;
     }
     /**
      * Update all post-collapsible-trigger elements referring to the collapsible
      */
     updateTriggers() {
-        const triggers = document.querySelectorAll(`post-collapsible-trigger[for=${this.host.id}]`);
+        const triggers = document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`);
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: '47ab19bf719a505dce35955d6250462acea47eee', "data-version": version }, h("slot", { key: 'd7fe5746afe1c343e9ec4c02878d8dead9360c26' })));
+        return (h(Host, { key: 'a43e25138933a758759b4adcca249757db75cc4b', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '2936f71a6fb3ddedda372e8da4a19dbceecaefa6' })));
     }
-    get host() { return this; }
     static get watchers() { return {
         "collapsed": ["collapsedChange"]
     }; }

package/dist/components/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/post-footer.js

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

package/dist/components/post-footer2.js

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as defineCustomElement$4 } from './post-accordion-item2.js';
+import { d as defineCustomElement$3 } from './post-collapsible2.js';
+import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
+
+class Breakpoint {
+    breakpointMap;
+    current = {
+        key: '',
+        name: '',
+    };
+    constructor() {
+        if (!this.breakpointMap) {
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
+                .reverse();
+            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
+        }
+    }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
+    updateHandler(emitEvents = true) {
+        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
+        if (this.current.key !== calculated.key) {
+            this.current.key = calculated.key;
+            if (emitEvents)
+                this.dispatchEvent('key');
+        }
+        if (this.current.name !== calculated.name) {
+            this.current.name = calculated.name;
+            if (emitEvents)
+                this.dispatchEvent('name');
+        }
+    }
+    dispatchEvent(type) {
+        window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+    }
+    get(type) {
+        this.updateHandler(false);
+        return this.current[type];
+    }
+}
+const breakpoint = new Breakpoint();
+
+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)}";
+const PostFooterStyle0 = postFooterCss;
+
+const PostFooter = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.label = undefined;
+        this.isMobile = breakpoint.get('name') === 'mobile';
+    }
+    get host() { return this; }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    breakpointChange(e) {
+        this.isMobile = e.detail === 'mobile';
+    }
+    renderAccordion() {
+        return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
+    }
+    renderGrid() {
+        return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
+    }
+    render() {
+        return (h(Host, { key: '14370a1cfd730a0b0353c88c95f265aefb57c480', "data-version": version }, h("footer", { key: '7208e9d465eb0b469887e7cfae66674db2092dbd' }, h("h2", { key: 'b392c866326374ae27704baaba0dd28c3001ee62', class: "visually-hidden" }, this.label), h("div", { key: '13411ad6e0b55ee17cf9bf77b155aa1c2810f057', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '4815ae94cd43eca92482ad3c93f107243b26890e', class: "footer-column" }, h("div", { key: 'edc787dc5fc96169c323f15254b6088024a6f19d', class: "footer-socialmedia" }, h("slot", { key: '0971e342ac6f3913c408a535ce0746080e3f57af', name: "socialmedia" })), h("div", { key: 'da583c9ed819181bf2732277f4e6ee22df2e3022', class: "footer-app" }, h("slot", { key: 'b6dab5cfa1f4dc9c049f24d3e08416ef5a27e0aa', name: "app" }))), h("div", { key: '53a5c04129d24dfb64eedd46e95b5c78142a3fd7', class: "footer-businesssectors" }, h("slot", { key: '470f4294778b8978bf6eb168e2b47ff29ef43d07', name: "businesssectors" })), h("div", { key: '45d734ded794352b951f2891bbdba081e05a99d5', class: "footer-meta" }, h("slot", { key: '4d0da53c2eb79e111f0f05278a0972f046eebfa9', name: "meta" })), h("div", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', class: "footer-copyright" }, h("slot", { key: '9cdcec805152413693dced0f0d55ac1b1121c70e', name: "copyright" }))))));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    static get style() { return PostFooterStyle0; }
+}, [1, "post-footer", {
+        "label": [1],
+        "isMobile": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-footer", "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);
+            }
+            break;
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostFooter as P, defineCustomElement as d };

package/dist/components/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/post-header.js

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

package/dist/components/post-header2.js

@@ -0,0 +1,217 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as throttle } from './index3.js';
+import { v as version } from './package.js';
+import { s as slideUp, a as slideDown } from './slide.js';
+import { g as getFocusableChildren } from './get-focusable-children.js';
+
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative}: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(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:24px}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left: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(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out;border-block-end:1px solid #e1e0dc}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:18px;box-shadow:var(--post-device-elevation-300)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:12px;flex-wrap:wrap;gap:16px}.local-header.local-header-mobile-extended{border-bottom:1px solid #e1e0dc}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:16px}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:12px !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:8px !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:28px !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:20px !important;max-width:calc(100vw - 8px - 16px)}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--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:fixed;z-index:1;inset-inline:0;background:#fff;inset-block-end:calc(100dvh - var(--header-height))}::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{height:calc(100dvh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:#fafafa;gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
+const PostHeaderStyle0 = postHeaderCss;
+
+const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
+        this.device = null;
+        this.mobileMenuExtended = false;
+    }
+    firstFocusableEl;
+    lastFocusableEl;
+    scrollParent = null;
+    mobileMenu;
+    mobileMenuAnimation;
+    throttledScroll = () => this.handleScrollEvent();
+    throttledResize = throttle(50, () => this.handleResize());
+    componentWillRender() {
+        this.scrollParent = this.getScrollParent(this.host);
+        this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+        window.addEventListener('resize', this.throttledResize, { passive: true });
+        this.handleResize();
+        this.handleScrollEvent();
+        this.getFocusableElements();
+    }
+    componentDidLoad() {
+        this.updateLocalHeaderHeight();
+    }
+    // Clean up possible side effects when post-header is disconnected
+    disconnectedCallback() {
+        this.mobileMenuExtended = false;
+        document.body.style.overflow = '';
+        this.host.removeEventListener('keydown', e => {
+            this.keyboardHandler(e);
+        });
+    }
+    get host() { return this; }
+    frozeBody(isMobileMenuExtended) {
+        document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
+        if (isMobileMenuExtended) {
+            this.host.addEventListener('keydown', e => {
+                this.keyboardHandler(e);
+            });
+        }
+        else {
+            this.host.removeEventListener('keydown', e => {
+                this.keyboardHandler(e);
+            });
+        }
+    }
+    /**
+     * An event emitted when the device has changed
+     */
+    postUpdateDevice;
+    /**
+     * Toggles the mobile navigation.
+     */
+    async toggleMobileMenu() {
+        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 = !this.mobileMenuExtended;
+        // Toggle menu visibility before it slides down and after it slides back up
+        if (this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+        this.mobileMenuExtended = !this.mobileMenuExtended;
+        if (!this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+    }
+    // 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];
+    }
+    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() {
+        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+        const st = Math.max(0, this.scrollParent instanceof Document
+            ? this.scrollParent.documentElement.scrollTop
+            : this.scrollParent.scrollTop);
+        this.host.style.setProperty('--header-scroll-top', `${st}px`);
+    }
+    getScrollParent(node) {
+        let currentParent = node.parentElement;
+        while (currentParent) {
+            if (currentParent.nodeName === 'BODY') {
+                return document;
+            }
+            if (this.isScrollable(currentParent)) {
+                return currentParent;
+            }
+            currentParent = currentParent.parentElement;
+        }
+        return document;
+    }
+    isScrollable(node) {
+        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+            return false;
+        }
+        const style = getComputedStyle(node);
+        return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
+            const value = style.getPropertyValue(propertyName);
+            return value === 'auto' || value === 'scroll';
+        });
+    }
+    updateLocalHeaderHeight() {
+        requestAnimationFrame(() => {
+            const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
+            this.host.style.setProperty('--local-header-height', `${mhh}px`);
+        });
+    }
+    handleResize() {
+        const previousDevice = this.device;
+        let newDevice;
+        const width = window?.innerWidth;
+        if (width >= 1024) {
+            newDevice = 'desktop';
+        }
+        else if (width >= 600) {
+            newDevice = 'tablet';
+        }
+        else {
+            newDevice = 'mobile';
+        }
+        // Close any open mobile menu
+        if (newDevice === 'desktop' && this.mobileMenuExtended) {
+            this.toggleMobileMenu();
+            this.mobileMenuAnimation.finish(); // no animation
+        }
+        this.updateLocalHeaderHeight();
+        // Apply only on change for doing work only when necessary
+        if (newDevice !== previousDevice) {
+            this.device = newDevice;
+            this.postUpdateDevice.emit(this.device);
+            window.requestAnimationFrame(() => {
+                this.switchLanguageSwitchMode();
+            });
+        }
+    }
+    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'];
+        if (this.mobileMenuExtended) {
+            navigationClasses.push('extended');
+        }
+        return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, 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: '45452d2c2f6ac9a067ce71330ea898a797040cca', version: version }, h("div", { key: 'c50478141de45d0a718b18c0edc416eb9c832fde', class: "global-header" }, h("div", { key: 'a2ddc2de9a94fb3b16928fe9c1ac3b3ae61ff9bf', class: "global-sub" }, h("div", { key: '30083683ff7683202118471473f2a0ed98a1c920', class: "logo" }, h("slot", { key: '028bd4a8f03a228378b09a80dce8654d52c30e5c', name: "post-logo" }))), h("div", { key: '853bcf2e6c8a95d88f62795cef8d8e58c8996811', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '40e3027a4e4358b7a614558ed7e1f59fa65ed312', name: "meta-navigation" }), h("slot", { key: '31c141cc45aa12441557d9b817630328df3d3778', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'afe4b2c3123a89c1a4390578c22e89dfff7be655', name: "post-language-switch" }), h("div", { key: 'aea74d0c7f25288afa18b5aeb3e557216d695ec3', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '1efed8b7c823ef49b89120ed2e23f151c64b9c0e', name: "post-togglebutton" })))), h("div", { key: 'e09df2136d01c0516d0166f505055615cf1d70d3', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '491f9bbcb2743519f544b24ae6f00405be85e589', name: "title" }), h("div", { key: 'e85c0a76597832a6966e989111b4508579fb9c4d', class: "local-sub" }, h("slot", { key: 'f2d504ea6a3d7592a15551e6be8cb0c1ba220fbc', name: "local-controls" }), h("slot", { key: 'e0dd0f9c12e0c6bf5d5d66cb29139af59f7c0b4d' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+    }
+    static get watchers() { return {
+        "mobileMenuExtended": ["frozeBody"]
+    }; }
+    static get style() { return PostHeaderStyle0; }
+}, [1, "post-header", {
+        "device": [32],
+        "mobileMenuExtended": [32],
+        "toggleMobileMenu": [64]
+    }, undefined, {
+        "mobileMenuExtended": ["frozeBody"]
+    }]);
+function defineCustomElement() {
+    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);
+            }
+            break;
+    } });
+}
+
+export { PostHeader as P, defineCustomElement as d };