@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

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

@@ -12,8 +12,8 @@ const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
  * @slot copyright - Slot for the copyright text.
  */
 export class PostFooter {
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    validateTextFooter() {
+        checkRequiredAndType(this, 'textFooter', 'string');
     }
     constructor() {
         this.device = breakpoint.get('device');
@@ -21,18 +21,13 @@ export class PostFooter {
         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();
+        this.validateTextFooter();
         // initialize grid visibility by checking the content of each slot
         GRID_SLOTS.forEach(slotName => {
             const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
@@ -42,6 +37,13 @@ export class PostFooter {
     disconnectedCallback() {
         window.removeEventListener('postBreakpoint:device', this.breakpointChange);
     }
+    handleGridSlotChange(...devices) {
+        return (e) => {
+            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
+                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+            }
+        };
+    }
     updateGridSlotDisplay(slotName, hasContent) {
         if (this.gridSlotDisplayed[slotName] !== hasContent) {
             this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
@@ -51,10 +53,10 @@ export class PostFooter {
         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 }))));
+        return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '5fc11a9cde5e0180c20c27e53fb177ecc9a49d78', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: 'a844ab0ee3ef02c5266a6b259f6869ecb68f26cd' }, h("h2", { key: '543414f0394b276d5c8c22f2839f3afcd1d10575', class: "visually-hidden" }, this.label), h("div", { key: '6d6f38e761a134a39b5b5ed863c6832a5fc1f9a8', class: "footer-container" }, h("div", { key: '2c13938bb4bc9def54eb579207f1f5742b937aac', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'cf097034f1987afa77d9646c51d8b8a1ae697e5b', class: "footer-column" }, h("div", { key: '4f47baa37bd3efe1f1fd3a0e5725106618eebe03', class: "footer-socialmedia" }, h("slot", { key: 'eccb942dcc1c20cf335cda88b18979fe4d80b431', name: "socialmedia" })), h("div", { key: 'b6aaff5655c50ef59679cd94dc15a53127e08ddc', class: "footer-app" }, h("slot", { key: 'd74e9e912a67747efd5413171d10ae7558e75da5', name: "app" }))), h("div", { key: '71ba540f7ce2ac65359eadc6b03a9b809c3deb82', class: "footer-businesssectors" }, h("slot", { key: 'bc5947b45a37132765526952127c03058fa33b90', name: "businesssectors" })), h("div", { key: '287b6ed9ed686a743d57709e8be4a85d1b7c3837', class: "footer-meta" }, h("slot", { key: 'ce5d85389422fe1b0fc231a32f96f60ac7d20459', name: "meta" })), h("div", { key: '2da10dc4c5923a697977a5eb6227c567df156de3', class: "footer-copyright" }, h("slot", { key: 'f6fb5282c228d33213c90141b51accff50ae233e', name: "copyright" }))))));
+        return (h(Host, { key: 'e7a0cce19d579c46f60417cfa817ece8c2245ca7', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '492f1c264ecd72d18adca6e4ca8bc806a00c1643' }, h("h2", { key: '7e08d975715e3e303e61eccead938b09845adc96', class: "visually-hidden" }, this.textFooter), h("div", { key: '77e9434cd41864e2cfb845925ec3354d82db1ced', class: "footer-container" }, h("div", { key: '2260e6da042d4fb489eacd0c7660fcd988b057c4', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'cf6e31f98324dfb4cfed0dcb47fcfa031d235125', class: "footer-column" }, h("div", { key: 'c4d1f3d153e1a28ae3a4e8b3752892515d9f1e11', class: "footer-socialmedia" }, h("slot", { key: '7577106b20b768a97a1bb778493419242dab2c4a', name: "socialmedia" })), h("div", { key: 'd91dbf22ee099b5604d1fb093fe9109889f1f7a0', class: "footer-app" }, h("slot", { key: '0818814f5d2e286b6b1b6d917a3aeb08350a5ac2', name: "app" }))), h("div", { key: '928110b46617a18411987d1596135b0a5cc9a908', class: "footer-businesssectors" }, h("slot", { key: 'e0ca79bdfcf044641e0181435928951c8f91b719', name: "businesssectors" })), h("div", { key: '67fa6022ce1a0a85d8184c80ffc6d6d9a442a7ff', class: "footer-meta" }, h("slot", { key: 'dd45f04ba9dab63396ea62517dc993b495c406f0', name: "meta" })), h("div", { key: 'de0a6d29504b6456bb75dc265dbb9ad68f1d305e', class: "footer-copyright" }, h("slot", { key: 'ef8a1baffbf26fa05e53370d6bb4df78030c9963', name: "copyright" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -70,9 +72,8 @@ export class PostFooter {
     }
     static get properties() {
         return {
-            "label": {
+            "textFooter": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -83,11 +84,12 @@ export class PostFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The label to add to the footer (visually hidden)."
+                    "text": "The textFooter to add to the footer (visually hidden)."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "text-footer"
             }
         };
     }
@@ -100,8 +102,8 @@ export class PostFooter {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "label",
-                "methodName": "validateLabel"
+                "propName": "textFooter",
+                "methodName": "validateTextFooter"
             }];
     }
 }

package/dist/collection/components/post-header/post-header.css

@@ -1 +1 @@
-:host{--post-global-header-top: calc(var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height));--post-header-top: calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height: calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top: clamp( /* 0 when header is static, large negative when header shrinks to enable offset */ 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap: 0.25rem;--post-global-header-padding-inline-start: 0.25rem;--post-global-header-padding-inline-end: 0.5rem;--post-local-header-padding-inline-start: 0.75rem;--post-local-header-padding-inline-end: 0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap: 0.75rem 0.25rem;--post-global-header-padding-inline-start: 0.25rem;--post-global-header-padding-inline-end: 0.25rem;--post-local-header-padding-inline-start: 0.75rem;--post-local-header-padding-inline-end: 0.25rem;--post-local-header-padding-block: 0rem;--post-burger-menu-padding-inline: 2.5rem;--post-burger-menu-body-gap: 2rem;--post-burger-menu-footer-gap: 1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline: 1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap: 0.75rem 0.25rem;--post-global-header-padding-inline-start: 0rem;--post-global-header-padding-inline-end: 0.5rem;--post-local-header-padding-inline-start: 0.5rem;--post-local-header-padding-inline-end: 0.5rem;--post-local-header-padding-block: 0rem;--post-burger-menu-padding-inline: 1rem;--post-burger-menu-body-gap: 1.5rem;--post-burger-menu-footer-gap: 1rem}}:host([data-expanded]){--post-header-top: 0;--post-global-header-top: 0;--post-global-controls-top: 0;--post-logo-height: var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.global-header,.local-header,.burger-menu{box-shadow:var(--post-device-elevation-300)}.global-header,.sliding-controls,.local-header,.navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap)}:host{container-type:inline-size;display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0;height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header:has(~.local-header:not(.no-title.no-navigation)),.global-header:has(~.burger-menu.extended){box-shadow:none}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:1.25rem}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .target-group{margin-inline-end:auto}.global-header.no-target-group .target-group{display:none}.local-header{position:relative;flex-wrap:wrap;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}.local-header:not(.no-title,.no-navigation){padding-block-start:1.125rem}.local-header.no-title.no-navigation{display:none}.local-header:has(.navigation.megadropdown-open),.local-header:has(~.burger-menu.extended){box-shadow:none}.local-header:has(.navigation.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .navigation{flex:1 0 100%;height:var(--post-main-navigation-height);margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));max-width:100cqw}.local-header.no-navigation .navigation{display:none}.local-header .navigation-controls{flex:0 0 auto}.local-header.no-navigation-controls .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-navigation-controls .navigation-controls{display:none}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu:not(.extended){transform:translateY(-100%)}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .navigation-controls{height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-navigation-controls .navigation-controls{display:none}
+:host{--post-global-header-top: calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top: calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height: calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top: clamp( /* 0 when header is static, large negative when header shrinks to enable offset */ 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap: 0.25rem;--post-global-header-padding-inline-start: 0.25rem;--post-global-header-padding-inline-end: 0.5rem;--post-local-header-padding-inline-start: 0.75rem;--post-local-header-padding-inline-end: 0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap: 0.75rem 0.25rem;--post-global-header-padding-inline-start: 0.25rem;--post-global-header-padding-inline-end: 0.25rem;--post-local-header-padding-inline-start: 0.75rem;--post-local-header-padding-inline-end: 0.25rem;--post-local-header-padding-block: 0rem;--post-burger-menu-padding-inline: 2.5rem;--post-burger-menu-body-gap: 2rem;--post-burger-menu-footer-gap: 1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline: 1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap: 0.75rem 0.25rem;--post-global-header-padding-inline-start: 0rem;--post-global-header-padding-inline-end: 0.5rem;--post-local-header-padding-inline-start: 0.5rem;--post-local-header-padding-inline-end: 0.5rem;--post-local-header-padding-block: 0rem;--post-burger-menu-padding-inline: 1rem;--post-burger-menu-body-gap: 1.5rem;--post-burger-menu-footer-gap: 1rem}}:host(:not([full-width])),:host([full-width=false]){--post-header-content-max-width: 1440px}:host([data-expanded]),:host([data-menu-extended]){--post-header-top: 0;--post-global-header-top: -0.001px;--post-global-controls-top: 0;--post-logo-height: var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.global-header,.local-header,.burger-menu{box-shadow:var(--post-device-elevation-300)}.section,.navigation,.sliding-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap);flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{container-type:inline-size;display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020}:host post-togglebutton{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host post-togglebutton:hover{text-decoration:none}:host post-togglebutton:disabled{border-style:var(--post-core-border-style-dash)}:host post-togglebutton{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}:host post-togglebutton:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host post-togglebutton:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host post-togglebutton:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host post-togglebutton:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host post-togglebutton:is(a){color:LinkText;border:unset}:host post-togglebutton:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}:host post-togglebutton:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}:host post-togglebutton:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}:host post-togglebutton:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}:host post-togglebutton:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}:host post-togglebutton:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}@media screen and (min-width: 0)and (max-width: 599.98px){:host post-togglebutton{padding:.625rem}:host post-togglebutton>:not(post-icon){display:none}:host post-togglebutton>post-icon{font-size:1.5rem}}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header:has(~.local-header:not(.no-title.no-navigation)),.global-header:has(~.burger-menu.extended){box-shadow:none}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(1.25rem - var(--post-header-gap))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}.global-header.no-audience .audience{display:none}.local-header{position:relative;background-color:#fff}.local-header .section{min-height:var(--post-local-header-expanded-min-height);padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}.local-header:not(.no-title,.no-navigation) .section{padding-block-start:1.125rem}.local-header.no-title.no-navigation{display:none}.local-header:has(.navigation.megadropdown-open),.local-header:has(~.burger-menu.extended){box-shadow:none}.local-header:has(.navigation.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .navigation{flex:1 0 100%;height:var(--post-main-navigation-height);margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));max-width:100cqw}.local-header.no-navigation .navigation{display:none}.local-header .local-nav{flex:0 0 auto}.local-header.no-local-nav .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-local-nav .local-nav{display:none}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.megadropdown-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-local-nav .local-nav{display:none}

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

@@ -12,21 +12,20 @@ import { h, Host } from "@stencil/core";
 import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
-import { slideDown, slideUp } from "../../animations/slide";
-import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { fade } from "../../animations/index";
+import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
 import { EventFrom } from "../../utils/event-from";
+import { checkRequiredAndType } from "../../utils/index";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
- * @slot global-controls - Holds search button in the global header.
- * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
- * @slot post-togglebutton - Holds the burger menu toggler.
- * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot global-nav-primary - Holds search button in the global header.
+ * @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
+ * @slot language-menu - Should be used with the `<post-language-switch>` component.
  * @slot title - Holds the application title.
- * @slot local-controls - Custom controls or content, right aligned in the local header.
- * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
- * @slot target-group - Holds the list of buttons to choose the target group.
- * @slot global-login - Holds the user menu or login button in the global header.
- * @slot navigation-controls - Custom controls, right aligned with the main navigation.
+ * @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
+ * @slot audience - Holds the list of buttons to choose the audience.
+ * @slot post-login - Holds the user menu or login button in the global header.
+ * @slot local-nav - Holds controls specific to the current application.
  */
 export class PostHeader {
     get hasBurgerMenu() {
@@ -46,6 +45,12 @@ export class PostHeader {
         }
         return document.body;
     }
+    validateFullWidth() {
+        checkRequiredAndType(this, 'fullWidth', 'boolean');
+    }
+    validateTextMenu() {
+        checkRequiredAndType(this, 'textMenu', 'string');
+    }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
@@ -60,13 +65,21 @@ export class PostHeader {
     }
     constructor() {
         this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.animationOptions = {
+            duration: 350,
+            easing: 'headerEase',
+        };
         this.device = breakpoint.get('device');
         this.hasNavigation = false;
-        this.hasNavigationControls = false;
-        this.hasTargetGroup = false;
+        this.hasLocalNav = false;
+        this.hasAudience = false;
         this.hasTitle = false;
         this.burgerMenuExtended = false;
         this.megadropdownOpen = false;
+        /**
+         * Makes the header content span the full width on screens larger than 1440px.
+         */
+        this.fullWidth = false;
         this.breakpointChange = (e) => {
             this.device = e.detail;
             this.switchLanguageSwitchMode();
@@ -80,15 +93,14 @@ export class PostHeader {
                 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);
+        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
         this.checkSlottedContent = this.checkSlottedContent.bind(this);
+        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
     }
     connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
@@ -99,7 +111,6 @@ export class PostHeader {
             passive: true,
         });
         document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.addEventListener('click', this.handleLinkClick);
         window.addEventListener('postBreakpoint:device', this.breakpointChange);
         this.handleScrollParentResize();
         this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
@@ -110,11 +121,14 @@ export class PostHeader {
         this.switchLanguageSwitchMode();
     }
     componentDidRender() {
+        this.validateTextMenu();
+        this.validateFullWidth();
         this.getFocusableElements();
         this.handleLocalHeaderResize();
     }
     componentDidLoad() {
         this.updateLocalHeaderHeight();
+        this.host.shadowRoot.addEventListener('click', this.handleLinkClick);
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
@@ -126,7 +140,9 @@ export class PostHeader {
             scrollParent.removeEventListener('scroll', this.handleScrollEvent);
         document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.removeEventListener('keydown', this.keyboardHandler);
-        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.host.shadowRoot) {
+            this.host.shadowRoot.removeEventListener('click', this.handleLinkClick);
+        }
         if (this.scrollParentResizeObserver) {
             this.scrollParentResizeObserver.disconnect();
             this.scrollParentResizeObserver = null;
@@ -142,11 +158,9 @@ export class PostHeader {
         this.burgerMenuExtended = false;
     }
     async closeBurgerMenu() {
-        this.burgerMenuAnimation.finish();
-        const menuButton = this.getMenuButton();
-        if (menuButton) {
-            menuButton.toggled = false;
-        }
+        this.burgerMenuAnimation?.finish();
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = false;
         this.burgerMenuExtended = false;
     }
     /**
@@ -156,18 +170,18 @@ export class PostHeader {
         if (this.device === 'desktop')
             return;
         this.burgerMenuAnimation = this.burgerMenuExtended
-            ? slideUp(this.burgerMenu)
-            : slideDown(this.burgerMenu);
+            ? fade(this.burgerMenu, 'out', this.animationOptions)
+            : fade(this.burgerMenu, 'in', this.animationOptions);
         // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        if (menuButton)
-            menuButton.toggled = force ?? !this.burgerMenuExtended;
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = force ?? !this.burgerMenuExtended;
         if (this.burgerMenuExtended) {
             // Wait for the close animation to finish before hiding megadropdowns
             await this.burgerMenuAnimation.finished;
             this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
             if (this.burgerMenuExtended === false) {
                 this.closeAllMegadropdowns();
+                this.burgerMenu.scrollTop = 0;
             }
         }
         else {
@@ -178,37 +192,31 @@ export class PostHeader {
             }
         }
     }
+    megadropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
+    }
     // Get all the focusable elements in the post-header burger 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');
+        if (!this.burgerMenu)
+            return;
+        const focusableElements = [this.burgerMenuButton];
+        focusableElements.push(...getDeepFocusableChildren(this.localHeader, el => !el.matches('post-megadropdown')), ...getDeepFocusableChildren(this.burgerMenu, el => !el.matches('post-megadropdown')));
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
     }
     keyboardHandler(e) {
-        if (e.key === 'Tab' && this.burgerMenuExtended) {
-            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();
-            }
+        if (e.key !== 'Tab' || !this.burgerMenuExtended)
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && activeElement === this.firstFocusableEl) {
+            // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+            e.preventDefault();
+            this.lastFocusableEl.focus();
+        }
+        else if (!e.shiftKey && activeElement === this.lastFocusableEl) {
+            // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+            e.preventDefault();
+            this.firstFocusableEl.focus();
         }
     }
     closeAllMegadropdowns() {
@@ -268,21 +276,28 @@ export class PostHeader {
         }
     }
     checkSlottedContent() {
-        this.hasNavigation = !!this.host.querySelector('[slot="post-mainnavigation"]');
-        this.hasNavigationControls = !!this.host.querySelector('[slot="navigation-controls"]');
-        this.hasTargetGroup = !!this.host.querySelector('[slot="target-group"]');
+        this.hasNavigation = !!this.host.querySelector('[slot="main-nav"]');
+        this.hasLocalNav = !!this.host.querySelector('[slot="local-nav"]');
+        this.hasAudience = !!this.host.querySelector('[slot="audience"]');
         this.hasTitle = !!this.host.querySelector('[slot="title"]');
     }
     switchLanguageSwitchMode() {
         const variant = this.hasBurgerMenu ? 'list' : 'menu';
-        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+        Array.from(this.host.querySelectorAll('post-language-menu')).forEach(languageSwitch => {
             languageSwitch?.setAttribute('variant', variant);
         });
     }
-    onFocusChange() {
-        const fixedElements = this.device === 'desktop' ? '.logo, .navigation' : '.global-header, .burger-menu';
-        const isHeaderExpanded = this.host.matches(':focus-within') &&
-            !this.host.shadowRoot.querySelector(`:where(${fixedElements}):focus-within`);
+    onFocusChange(e) {
+        const alwaysVisibleElements = this.device === 'desktop'
+            ? '.navigation' // logo isn’t included since it would be too small to focus on effectively.
+            : '.global-header, .burger-menu';
+        const isHeaderExpanded = 
+        // ensure the expanded state stays accurate during focus changes,
+        // e.g., when the focused element is removed from the DOM
+        // during a window resize
+        e.target === document.activeElement &&
+            this.host.matches(':focus-within') &&
+            !this.host.shadowRoot.querySelector(`:where(${alwaysVisibleElements}):focus-within`);
         if (isHeaderExpanded) {
             this.host.setAttribute('data-expanded', '');
         }
@@ -291,29 +306,31 @@ export class PostHeader {
         }
     }
     renderNavigation() {
+        const localNav = !this.hasTitle && (h("div", { class: "local-nav" }, h("slot", { name: "local-nav" })));
         if (this.device === 'desktop') {
-            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, h("slot", { name: "post-mainnavigation" }), h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" }))));
+            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, h("slot", { name: "main-nav" }), localNav));
         }
         return (h("div", { class: {
                 'burger-menu': true,
                 'extended': this.burgerMenuExtended,
-                'no-navigation-controls': !this.hasNavigationControls,
-            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" })), h("div", { class: "burger-menu-body" }, h("slot", { name: "target-group" }), h("slot", { name: "post-mainnavigation" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))));
+                'no-local-nav': !this.hasLocalNav,
+                'megadropdown-open': this.megadropdownOpen,
+            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, localNav, h("div", { class: "burger-menu-body" }, h("slot", { name: "audience" }), h("slot", { name: "main-nav" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "global-nav-secondary" }), h("slot", { name: "language-menu" }))));
     }
     render() {
-        return (h(Host, { key: 'c9b1c1a946800f728a7a90a91dff3abf23b5100f', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu }, h("div", { key: '21d2b9bd39946df7e42d3d5c763d40cd1dabee69', class: {
+        return (h(Host, { key: '3f5431ebd9b726f8a73ee4a0b8b406d11bab5cf2', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: 'ea55944e7f5f0750e3cb229a94b2aef7738c397a' }, h("div", { key: 'f70653f47812b951519cc001a42d4827f327cffd', class: {
                 'global-header': true,
-                'no-target-group': !this.hasTargetGroup,
-            } }, h("div", { key: '50cf30a8febea656eb3349e6c06dc5b609b13a6d', class: "logo" }, h("slot", { key: 'df1ecaca7b39316ef4d4bb56e33c3214b2648e68', name: "post-logo" })), h("div", { key: '9c4319dce10d9e98291a6cbdb0effb854a8b6dac', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'ce916d4bdb65c641e58725f70b7689704847593c', class: "target-group" }, h("slot", { key: '810e4164ae17b8571011799307f3688cf64b5c30', name: "target-group" }))), h("slot", { key: 'abe6f2e08e87295e88e4cf33db0e72021d622aaf', name: "global-controls" }), !this.hasBurgerMenu && [
-            h("slot", { key: '4ef5603837d0f26c25dd50bf17bb0011dc927de0', name: "meta-navigation" }),
-            h("slot", { key: 'b1bc83f1bd5004af89e444a9bdf487225ac882d7', name: "post-language-switch" }),
-        ], h("slot", { key: '11dfd54337cf457bc25ec680c8d4e11a6712dc63', name: "global-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: '67658d80ce90f4446ea8d1078937101a299536b8', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '2fdba487922c63db152ec08e3382640c9cdf1c12', name: "post-togglebutton" }))))), h("div", { key: '1516e38c9628d8cfb75d6f9bd55912071da5e94e', class: {
+                'no-audience': !this.hasAudience,
+            } }, h("div", { key: '60d43f32a71169d6d4314b9cc4d8a9e11ec7834e', class: "section" }, h("div", { key: 'ce0f3a9fff1225456f823189093fe960d3f49033', class: "logo" }, h("slot", { key: 'd96003c9bafbe7914b84a9f7b80ab8ed4bd71ddb', name: "post-logo" })), h("div", { key: 'c85e70b4a9adbdd4d95c4ff8a53248b9b707ff2b', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'd297bba4782a50df1942d96a4eea6c9aeb76965d', class: "audience" }, h("slot", { key: '8a923e9a27d811c204d212843b611885b1a2b257', name: "audience" }))), h("slot", { key: '44a6294e62add92191e5ee8f6b0606a2e367a3d5', name: "global-nav-primary" }), !this.hasBurgerMenu && [
+            h("slot", { key: '843b9a656a289b51aea5db4634323999286ccb64', name: "global-nav-secondary" }),
+            h("slot", { key: '55268cf25f98a76c377ad48c2578f2f8b3a5b025', name: "language-menu" }),
+        ], h("slot", { key: '7885e754087572e48a0a62cccbbae3ea70a56bd3', name: "post-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: '7713dede3877c4bd97cae59d78ea0a38daa15a8e', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '611df14f6646ae994ad090a482c20f09c3e1a39a', name: "post-togglebutton" }))), this.hasNavigation && this.device !== 'desktop' && (h("post-togglebutton", { key: 'e932a70cfd057cec4670867581e380d313cc23d1', ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'c418e4ca4698ebefc5c7410cf6037620db0314f9' }, this.textMenu), h("post-icon", { key: '438bfc7ee2f0d853fa92385c8e0f159608d76313', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: 'd6b48e5078b8e96d3fc8fef27a50544b3ed58355', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '0909b5778d908f48521abd7635bfd6eb320fc16a', ref: el => (this.localHeader = el), class: {
                 'local-header': true,
                 'no-title': !this.hasTitle,
-                'no-target-group': !this.hasTargetGroup,
+                'no-audience': !this.hasAudience,
                 'no-navigation': this.device !== 'desktop' || !this.hasNavigation,
-                'no-navigation-controls': !this.hasNavigationControls,
-            } }, h("slot", { key: '839b34249ece8af5cc53231271e739a6a664a977', name: "title" }), this.hasTitle && h("slot", { key: 'aa281968b58ecad425beb1b4ffbd1273cc167ea4', name: "local-controls" }), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+                'no-local-nav': !this.hasLocalNav,
+            } }, h("div", { key: 'b5d0280efefc560a89f3a1cbeeeaec1b90a82359', class: "section" }, h("slot", { key: 'b0f25a30d6970cde7b1b9e3c1de1ffb667e4cb97', name: "title" }), this.hasTitle && h("slot", { key: '9140fb3550e1f71824add9f90b43cf622223a4a1', name: "local-nav" }), this.device === 'desktop' && this.renderNavigation())), this.device !== 'desktop' && this.renderNavigation())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -327,12 +344,55 @@ export class PostHeader {
             "$": ["post-header.css"]
         };
     }
+    static get properties() {
+        return {
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the header content span the full width on screens larger than 1440px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "textMenu": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the burger menu button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-menu"
+            }
+        };
+    }
     static get states() {
         return {
             "device": {},
             "hasNavigation": {},
-            "hasNavigationControls": {},
-            "hasTargetGroup": {},
+            "hasLocalNav": {},
+            "hasAudience": {},
             "hasTitle": {},
             "burgerMenuExtended": {},
             "megadropdownOpen": {}
@@ -352,10 +412,6 @@ export class PostHeader {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLPostTogglebuttonElement": {
-                            "location": "global",
-                            "id": "global::HTMLPostTogglebuttonElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -370,6 +426,12 @@ export class PostHeader {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "fullWidth",
+                "methodName": "validateFullWidth"
+            }, {
+                "propName": "textMenu",
+                "methodName": "validateTextMenu"
+            }, {
                 "propName": "device",
                 "methodName": "lockBody"
             }, {
@@ -395,4 +457,4 @@ export class PostHeader {
 }
 __decorate([
     EventFrom('post-megadropdown')
-], PostHeader.prototype, "megadropdownStateHandler", void 0);
+], PostHeader.prototype, "megadropdownStateHandler", null);