@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

package/loaders/post-header.js

@@ -1,165 +1,54 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { s as slideUp, a as slideDown } from './slide.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { t as throttle } from './p-f7b9f90a.js';
+import { v as version } from './p-2083ae2c.js';
+import { s as slideUp, a as slideDown } from './p-4af6dbed.js';
+import { g as getFocusableChildren } from './p-3aba7629.js';
 
-/* eslint-disable no-undefined,no-param-reassign,no-shadow */
-
-/**
- * Throttle execution of a function. Especially useful for rate limiting
- * execution of handlers on events like resize and scroll.
- *
- * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
- *                                            are most useful.
- * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
- *                                            as-is, to `callback` when the throttled-function is executed.
- * @param {object} [options] -              An object to configure options.
- * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
- *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
- *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
- *                                            `delay` milliseconds, the internal counter is reset).
- * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
- *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
- *                                            callback will never executed if both noLeading = true and noTrailing = true.
- * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
- *                                            false (at end), schedule `callback` to execute after `delay` ms.
- *
- * @returns {Function} A new, throttled, function.
- */
-function throttle (delay, callback, options) {
-  var _ref = options || {},
-    _ref$noTrailing = _ref.noTrailing,
-    noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
-    _ref$noLeading = _ref.noLeading,
-    noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
-    _ref$debounceMode = _ref.debounceMode,
-    debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
-  /*
-   * After wrapper has stopped being called, this timeout ensures that
-   * `callback` is executed at the proper times in `throttle` and `end`
-   * debounce modes.
-   */
-  var timeoutID;
-  var cancelled = false;
-
-  // Keep track of the last time `callback` was executed.
-  var lastExec = 0;
-
-  // Function to clear existing timeout
-  function clearExistingTimeout() {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-  }
-
-  // Function to cancel next exec
-  function cancel(options) {
-    var _ref2 = options || {},
-      _ref2$upcomingOnly = _ref2.upcomingOnly,
-      upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
-    clearExistingTimeout();
-    cancelled = !upcomingOnly;
-  }
-
-  /*
-   * The `wrapper` function encapsulates all of the throttling / debouncing
-   * functionality and when executed will limit the rate at which `callback`
-   * is executed.
-   */
-  function wrapper() {
-    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
-      arguments_[_key] = arguments[_key];
-    }
-    var self = this;
-    var elapsed = Date.now() - lastExec;
-    if (cancelled) {
-      return;
-    }
-
-    // Execute `callback` and update the `lastExec` timestamp.
-    function exec() {
-      lastExec = Date.now();
-      callback.apply(self, arguments_);
-    }
-
-    /*
-     * If `debounceMode` is true (at begin) this is used to clear the flag
-     * to allow future `callback` executions.
-     */
-    function clear() {
-      timeoutID = undefined;
-    }
-    if (!noLeading && debounceMode && !timeoutID) {
-      /*
-       * Since `wrapper` is being called for the first time and
-       * `debounceMode` is true (at begin), execute `callback`
-       * and noLeading != true.
-       */
-      exec();
-    }
-    clearExistingTimeout();
-    if (debounceMode === undefined && elapsed > delay) {
-      if (noLeading) {
-        /*
-         * In throttle mode with noLeading, if `delay` time has
-         * been exceeded, update `lastExec` and schedule `callback`
-         * to execute after `delay` ms.
-         */
-        lastExec = Date.now();
-        if (!noTrailing) {
-          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
-        }
-      } else {
-        /*
-         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
-         * `callback`.
-         */
-        exec();
-      }
-    } else if (noTrailing !== true) {
-      /*
-       * In trailing throttle mode, since `delay` time has not been
-       * exceeded, schedule `callback` to execute `delay` ms after most
-       * recent execution.
-       *
-       * If `debounceMode` is true (at begin), schedule `clear` to execute
-       * after `delay` ms.
-       *
-       * If `debounceMode` is false (at end), schedule `callback` to
-       * execute after `delay` ms.
-       */
-      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
-    }
-  }
-  wrapper.cancel = cancel;
-
-  // Return the wrapper function.
-  return wrapper;
-}
-
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{--global-header-height:72px;--global-header-minimal-height:24px;--main-header-height:56px;--main-header-min-height:56px;--header-height:calc(var(--global-header-height) + var(--main-header-height))}@media screen and (min-width: 1024px){:host{display:block;position:sticky;inset-inline:0;inset-block-start:calc(-1*(var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.99px){:host{--global-header-height:64px;--main-header-height:48px;--main-header-min-height:48px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--global-header-height);z-index:1}@media screen and (max-width: 1023.99px){.global-header{inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{padding-inline-end:var(--post-core-dimension-12);top:calc((var(--global-header-height) - var(--global-header-minimal-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.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-minimal-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;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.title-header{display:flex;align-items:center;gap:var(--post-core-dimension-8);min-height:var(--main-header-min-height);justify-content:space-between;background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.title-header{padding:var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12)}}@media screen and (max-width: 1023.99px){.title-header{position:sticky;z-index:1;inset-block-start:var(--global-header-height);padding-inline:var(--post-core-dimension-8) var(--post-core-dimension-16);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.title-header.title-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important;flex-shrink:10}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.99px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.navigation{position:sticky;z-index:1;inset-block-start:var(--global-header-minimal-height)}}@media screen and (max-width: 1023.99px){.navigation{position:fixed;inset-inline:0;inset-block-end:calc(100vh - var(--header-height));box-shadow:var(--post-core-elevation-3);min-height:var(--post-core-dimension-10);max-height:calc(100vh - var(--header-height));overflow:auto}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}";
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1090;--global-header-height:72px;--global-header-minimal-height:24px;--local-header-height:112px;--local-header-min-height:56px;--header-height:calc(var(--global-header-height) + var(--local-header-height));z-index:1020;position:relative}@media screen and (min-width: 1024px){:host{--global-header-reduced-height:24px;--main-navigation-height:56px}}@media screen and (max-width: 1023.98px){:host{--global-header-height:64px;--local-header-height:48px;--local-header-min-height:48px;--main-navigation-height:0px}}:host(:not(:has([slot=title]))){--local-header-height:var(--main-navigation-height)}: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;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);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:var(--post-core-dimension-12);inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.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:var(--post-core-dimension-8);min-height:var(--local-header-min-height);background:var(--post-core-color-brand-white);transition:box-shadow .2s ease-in-out}@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:var(--post-core-dimension-18);box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.local-header.local-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}.local-header:not(.title-header-mobile-extended){box-shadow:var(--post-core-elevation-3)}}.local-sub{margin-inline-end:var(--post-core-dimension-16)}::slotted(.list-inline){margin:-8px 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:var(--post-core-dimension-12) !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:var(--post-core-dimension-8) !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@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-minimal-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:var(--post-core-color-brand-white)}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:var(--post-core-color-brand-white);inset-block-end:calc(100vh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:var(--post-core-dimension-16)}}";
 const PostHeaderStyle0 = postHeaderCss;
 
-const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
+const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.scrollParent = null;
-        this.throttledScroll = () => this.handleScrollEvent();
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.device = null;
-        this.mobileMenuExtended = false;
-    }
+        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
+    }
+    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();
     }
+    get host() { return this; }
+    device = null;
+    mobileMenuExtended = false;
     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.
      */
@@ -179,6 +68,36 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         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
@@ -200,7 +119,7 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         return document;
     }
     isScrollable(node) {
-        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+        if (!(node instanceof H || node instanceof SVGElement)) {
             return false;
         }
         const style = getComputedStyle(node);
@@ -210,10 +129,9 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         });
     }
     handleResize() {
-        var _a;
         const previousDevice = this.device;
         let newDevice;
-        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
+        const width = window?.innerWidth;
         if (width >= 1024) {
             newDevice = 'desktop';
         }
@@ -228,29 +146,31 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             this.toggleMobileMenu();
             this.mobileMenuAnimation.finish(); // no animation
         }
-        const mhh = (_a = this.host.shadowRoot.querySelector('.title-header')) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight;
         this.host.style.setProperty('--main-header-height', `${mhh}px`);
         // 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() {
-        var _a;
         const variant = this.device === 'desktop' ? 'menu' : 'list';
-        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
+        this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
     }
-    render() {
+    renderNavigation() {
         const navigationClasses = ['navigation'];
         if (this.mobileMenuExtended) {
             navigationClasses.push('extended');
         }
-        return (h(Host, { key: '008e84568ce41249365d93169b2f94cd988601d0', version: version }, h("div", { key: 'f6415c30b3bfacd01a65166c7f0a3afc37676cc8', class: "global-header" }, h("div", { key: 'dc1465a3a68ce8c66c7da644d992c37d8d09ccc4', class: "global-sub" }, h("div", { key: '490b4afe502465bc20ccc41149533929987f2fab', class: "logo" }, h("slot", { key: '28ee1cdb2804f6315fffa2c319a1e2fa1e54ad08', name: "post-logo" }))), h("div", { key: '777d715f4718bb6738665f3d65c9ee4729a977de', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'c1ddbfdecc96fe3a6efb930d8475ee880059d372', name: "meta-navigation" }), h("slot", { key: 'df1ccf5c36ea4a05812c3983961389c42c42ddb9', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'ace2dda9a3f3d898934c7d47c84e2475fb555e5d', name: "post-language-switch" }), h("div", { key: '3e8d94d9534d5daaa2f8e6ca5cc0833e78a49224', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '58e3637f103411f5e577dba931caf884f46a6e47', name: "post-togglebutton" })))), h("div", { key: 'f90ff065ed795fc780c90768e5c0ab5a431bec8d', class: 'title-header ' + (this.mobileMenuExtended ? 'title-header-mobile-extended' : '') }, h("slot", { key: 'a1aaaf02da073b9e7de82e84c93745afa6a8c4e9', name: "title" }), h("div", { key: '84ae2f8b846536130967362de160e054049c8489', class: "global-sub" }, h("slot", { key: '8a845cd7f87b3a2c2fba7ffc1ace31e87f6329d9', name: "local-controls" }), h("slot", { key: 'f3822b883fc88436a84d3ca7f840946af992417e' }))), h("div", { key: '8e0390c6c2b9a71488eea73c9207d0c336c9b75d', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: '5fc2db060eb962c313fc4c9ab67032e990ff54c6', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '7b9147dcf5de01865785d417c8d1966efb891ace', class: "navigation-footer" }, h("slot", { key: '6e163a7dad7b0b0fc02493cd15152179d4242980', name: "meta-navigation" }), h("slot", { key: 'e8fd19eeed8a99d69ccd8635e36cd0256ed4424b', name: "post-language-switch" }))))));
+        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: 'efbf8028f2abf376f497081996dba759f5885630', version: version }, h("div", { key: 'ecaaea274045453ce869f36e8a1155626b1818ba', class: "global-header" }, h("div", { key: '2fda0d65321ad1cbbc47b731f095e0d9b6694d99', class: "global-sub" }, h("div", { key: '24864d5f18c9d923717cc2e996395cff3bd6ce8b', class: "logo" }, h("slot", { key: 'ba82d7f62bb845732fe6066bcdc7eef15913c9e6', name: "post-logo" }))), h("div", { key: 'a0ddea4e564fca1e286998c73fea75eb8c228428', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '0d7aa11452eb69fe28914ff7787c6dc206fd4009', name: "meta-navigation" }), h("slot", { key: 'e92b7b9db6e16e8fcecb1ca74efa63942dd542c5', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c68984037a71d5ac54828f6cf2367c3b07e428fc', name: "post-language-switch" }), h("div", { key: '70fb5040dc2f000c2afa286bb673ae9cf88521cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '509fb81812262cd9efdb3a562e48f72b0d29e376', name: "post-togglebutton" })))), h("div", { key: '393d1040bad2f85caced5b4a8ff02e30fa5fd5f1', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '786cc114aae985a0612d3cb044684290e3026462', name: "title" }), h("div", { key: 'd4f68653a09bbf0b222873ed5d23fec6ba9d8f6f', class: "local-sub" }, h("slot", { key: '0ad7dda5490964e9a8eae5e0bf66a117882f7a06', name: "local-controls" }), h("slot", { key: 'bddc01c7696f456c38c200b330767a0f1b353d88' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
-    get host() { return this; }
     static get watchers() { return {
         "mobileMenuExtended": ["frozeBody"]
     }; }

package/loaders/post-icon.js

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

package/loaders/post-language-option.js

@@ -1,31 +1,48 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkEmptyOrType } from './index2.js';
-import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { c as checkEmptyOrType } from './p-56ad4838.js';
+import { v as version } from './p-2083ae2c.js';
+import { c as checkType } from './p-8562c7dc.js';
 
 const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}post-language-option a{color:inherit;text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding);border-radius:2px}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){width:40px;height:40px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}post-language-option:where([variant=list]) :is(a,button)[aria-current=true],post-language-option:where([variant=list]) :is(a,button)[aria-current=page]{background-color:#050400;color:#fff}post-language-option:where([variant=list]) :is(a,button)[aria-current=true]:hover,post-language-option:where([variant=list]) :is(a,button)[aria-current=page]:hover{background-color:#504f4b}post-language-option:where([variant=menu]){width:100%}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative;left:-1px;width:calc(100% + 2px)}post-language-option:where([variant=menu]) :is(a,button)[aria-current=true]::after,post-language-option:where([variant=menu]) :is(a,button)[aria-current=page]::after{content:\"\";left:0;height:3px;background-color:#050400;width:100%;display:block;position:absolute;bottom:3px}post-language-option:where([variant=menu]) :is(a,button)[aria-current=true]:hover::after,post-language-option:where([variant=menu]) :is(a,button)[aria-current=page]:hover::after{background-color:#504f4b}post-language-option:where([variant=menu]) :is(a,button):hover{color:#504f4b}";
 const PostLanguageOptionStyle0 = postLanguageOptionCss;
 
-const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends HTMLElement {
+const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends H {
     constructor() {
         super();
         this.__registerHost();
         this.postChange = createEvent(this, "postChange", 7);
-        this.code = undefined;
-        this.active = undefined;
-        this.variant = undefined;
-        this.name = undefined;
-        this.url = undefined;
     }
+    get host() { return this; }
+    /**
+     *  The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
+     */
+    code;
     validateCode(value = this.code) {
         checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
     }
+    /**
+     * If set to `true`, the language option is considered the current language for the page.
+     */
+    active;
     validateActiveProp(value = this.active) {
         checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
     }
+    /**
+     * The variant of the post-language-switch parent (dynamically set by the parent)
+     */
+    variant;
+    /**
+     * The full name of the language. For example, "Deutsch".
+     */
+    name;
     validateName(value = this.name) {
         checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
     }
+    /**
+     * The URL used for the href attribute of the internal anchor.
+     * This field is optional; if not provided, a button will be used internally instead of an anchor.
+     */
+    url;
     validateUrl(value = this.url) {
         checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
     }
@@ -38,6 +55,10 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
             throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
         }
     }
+    /**
+     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
+     */
+    postChange;
     /**
      * Selects the language option programmatically.
      */
@@ -58,9 +79,8 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '6a7c4af5ab0a953cc2c70621efc6fff905638900', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: 'eff35e907ca174aa239604d8e3c937309d306cd1', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "code": ["validateCode"],
         "active": ["validateActiveProp"],

package/loaders/post-language-switch.js

@@ -1,38 +1,50 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as checkEmptyOrOneOf } from './index2.js';
-import { v as version } from './package.js';
-import { n as nanoid } from './index.browser.js';
-import { d as defineCustomElement$5 } from './post-icon2.js';
-import { d as defineCustomElement$4 } from './post-menu2.js';
-import { d as defineCustomElement$3 } from './post-menu-trigger2.js';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
-import { c as checkType } from './check-type.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { b as checkEmptyOrOneOf } from './p-56ad4838.js';
+import { v as version } from './p-2083ae2c.js';
+import { n as nanoid } from './p-5959f2bd.js';
+import { d as defineCustomElement$5 } from './p-f7177e26.js';
+import { d as defineCustomElement$4 } from './p-91882483.js';
+import { d as defineCustomElement$3 } from './p-8b053fd5.js';
+import { d as defineCustomElement$2 } from './p-60cf53cc.js';
+import { c as checkType } from './p-8562c7dc.js';
 
 const SWITCH_VARIANTS = ['list', 'menu'];
 
-const postLanguageSwitchCss = ":host{display:block}@media screen and (max-width: 1023.99px){:host{display:flex !important;gap:.5rem}}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger: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){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger: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){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-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)}.post-language-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}";
+const postLanguageSwitchCss = ":host{display:block}@media screen and (max-width: 1023.98px){:host{display:flex !important;gap:.5rem}}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger: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){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger: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){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-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)}.post-language-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}";
 const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
 
-const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends HTMLElement {
+const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.menuId = `p${nanoid(11)}`;
-        this.caption = undefined;
-        this.description = undefined;
-        this.variant = 'list';
-        this.activeLang = undefined;
     }
+    get host() { return this; }
+    /**
+     * A title for the list of language options
+     */
+    caption;
     validateCaption(value = this.caption) {
         checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
     }
+    /**
+     * A descriptive text for the list of language options
+     */
+    description;
     validateDescription(value = this.description) {
         checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
     }
+    /**
+     * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+     */
+    variant = 'list';
     validateVariant(value = this.variant) {
         checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
     }
+    /**
+     * The active language of the language switch
+     */
+    activeLang;
     connectedCallback() {
         this.updateChildrenVariant();
         // Get the active language based on children's active state
@@ -72,6 +84,7 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
             }
         });
     }
+    menuId = `p${nanoid(11)}`;
     renderList() {
         return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
     }
@@ -81,7 +94,6 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
     }
-    get host() { return this; }
     static get watchers() { return {
         "caption": ["validateCaption"],
         "description": ["validateDescription"],

package/loaders/post-linkarea.d.ts

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

package/loaders/post-linkarea.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+
+const postLinkareaCss = ":host{display:contents;cursor:pointer}";
+const PostLinkareaStyle0 = postLinkareaCss;
+
+const PostLinkarea$1 = /*@__PURE__*/ proxyCustomElement(class PostLinkarea extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get hostElement() { return this; }
+    handleClick = () => {
+        const customSlottedLink = this.hostElement.querySelector('a[data-link]');
+        const linkElement = customSlottedLink
+            ? customSlottedLink
+            : this.hostElement.querySelector('a');
+        if (linkElement.href) {
+            window.location.href = linkElement.href;
+        }
+        else {
+            console.error('<post-linkarea> : Your element must contain a child with a `href` property.');
+        }
+    };
+    render() {
+        return (h(Host, { key: 'fd83dca8dca965d14f5a844454e79d7fb449639d', "data-version": version, onClick: this.handleClick, tabindex: "0" }, h("slot", { key: '278537c9aabe710d118cdd6075ab506a8a4dcfe2' })));
+    }
+    static get style() { return PostLinkareaStyle0; }
+}, [4, "post-linkarea"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-linkarea"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-linkarea":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLinkarea$1);
+            }
+            break;
+    } });
+}
+
+const PostLinkarea = PostLinkarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLinkarea, defineCustomElement };

package/loaders/post-list-item.js

@@ -1,21 +1,21 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
 
 const postListItemCss = ":host{display:flex}";
 const PostListItemStyle0 = postListItemCss;
 
-const PostListItem$1 = /*@__PURE__*/ proxyCustomElement(class PostListItem extends HTMLElement {
+const PostListItem$1 = /*@__PURE__*/ proxyCustomElement(class PostListItem extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
     }
+    get host() { return this; }
     connectedCallback() {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: 'f7b26e05f1fa8bab9909dcee305dbf74960671eb', role: "listitem", slot: "post-list-item" }, h("slot", { key: '3d75b0acf3f4a89c64c447e8d182bbc9a4f930a0' })));
+        return (h(Host, { key: '8e209e77859bd05d62cae41aec9dec6fb2e820cb', role: "listitem", slot: "post-list-item" }, h("slot", { key: 'ce79a335e80401465b74208957e22983d6df4ce0' })));
     }
-    get host() { return this; }
     static get style() { return PostListItemStyle0; }
 }, [1, "post-list-item"]);
 function defineCustomElement$1() {

package/loaders/post-list.js

@@ -1,18 +1,29 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { n as nanoid } from './index.browser.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { n as nanoid } from './p-5959f2bd.js';
 
 const postListCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
 const PostListStyle0 = postListCss;
 
-const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLElement {
+const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.titleId = undefined;
-        this.titleHidden = false;
-        this.horizontal = false;
     }
+    get host() { return this; }
+    /**
+     * The unique title of the list that is also referenced in the labelledby
+     */
+    titleId;
+    /**
+     * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+     */
+    titleHidden = false;
+    /**
+     * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+     */
+    horizontal = false;
+    titleEl;
     componentWillLoad() {
         /**
          * Get the id set on the host element or use a random id by default
@@ -28,9 +39,8 @@ const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: '70594af566e1fe34ce0b9ebe1a8cbbc868dab973', "data-version": version }, h("div", { key: '27b6c4af3d51a0d83f968ec751b6bcf46feb7d05', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'a913bd018199bb031e3d96d487bd528831453387' })), h("div", { key: 'e1a3ddecc643a78f57b91cc9ccb0de6b02302a47', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'bd7c6df300d28fe0b9f1dd3135eb42da00e731b9', name: "post-list-item" }))));
+        return (h(Host, { key: 'bdd973098d8b2a74635d489dca8f0f6825e31c51', "data-version": version }, h("div", { key: '9dcd6ca7069658c3e7f0d14fc130d18ebe522acb', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'ad51f345b2c120796d02dbc3d6815a58addc7fb4' })), h("div", { key: '47fddd7b977c85c195757f461c0ec009270cdb8b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '176662b40ca47b6aeeded26256bc84bdee6483a6', name: "post-list-item" }))));
     }
-    get host() { return this; }
     static get style() { return PostListStyle0; }
 }, [4, "post-list", {
         "titleHidden": [4, "title-hidden"],