@swisspost/design-system-components 9.0.0-next.9 → 9.0.0

package/dist/esm/{post-togglebutton-395bf3f0.js → post-popovercontainer-b19b7606.js}

@@ -1,1005 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-fb8d6be7.js';
-import { v as version } from './package-4d81f3c2.js';
-import { s as slideUp, a as slideDown } from './slide-3422b8a3.js';
-import { c as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkEmptyOrUrl } from './index-b49c9904.js';
-import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
-import { c as checkType } from './check-type-8828dbe4.js';
-import { g as getRoot } from './get-root-7af2e0d1.js';
-
-const PostClosebutton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: 'cb5be35247053b1227c32f7949baca51ccc31081', "data-version": version }, h("button", { key: 'b68dc109cc7a9a99b85fc995447bc7c0b0ddc3bf', class: "btn btn-icon-close" }, h("post-icon", { key: '9276c885e5b48092a0a24285ec6cd4301a4fc032', "aria-hidden": "true", name: "closex" }), h("span", { key: '3e04657ab677186830d80b8dabe769d70b6b8e8e', class: "visually-hidden" }, h("slot", { key: 'c2c9e8df9f62516a1b88b1dbc3949287fbaa3991' })))));
-    }
-    get host() { return getElement(this); }
-};
-
-/* 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;--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}}.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);height:var(--global-header-height)}.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}.title-header{display:flex;align-items:center;gap:var(--post-core-dimension-4);height:var(--main-header-height);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)}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important}@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}}@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 PostHeaderStyle0 = postHeaderCss;
-
-const PostHeader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.scrollParent = null;
-        this.throttledScroll = () => this.handleScrollEvent();
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.device = null;
-        this.mobileMenuExtended = false;
-    }
-    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();
-    }
-    frozeBody(isMobileMenuExtended) {
-        document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
-    }
-    /**
-     * Toggles the mobile navigation.
-     */
-    async toggleMobileMenu() {
-        if (this.device === 'desktop')
-            return;
-        this.mobileMenuAnimation = this.mobileMenuExtended
-            ? slideUp(this.mobileMenu)
-            : slideDown(this.mobileMenu);
-        // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = !this.mobileMenuExtended;
-        // Toggle menu visibility before it slides down and after it slides back up
-        if (this.mobileMenuExtended)
-            await this.mobileMenuAnimation.finished;
-        this.mobileMenuExtended = !this.mobileMenuExtended;
-        if (!this.mobileMenuExtended)
-            await this.mobileMenuAnimation.finished;
-    }
-    handleScrollEvent() {
-        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-        const st = Math.max(0, this.scrollParent instanceof Document
-            ? this.scrollParent.documentElement.scrollTop
-            : this.scrollParent.scrollTop);
-        this.host.style.setProperty('--header-scroll-top', `${st}px`);
-    }
-    getScrollParent(node) {
-        let currentParent = node.parentElement;
-        while (currentParent) {
-            if (currentParent.nodeName === 'BODY') {
-                return document;
-            }
-            if (this.isScrollable(currentParent)) {
-                return currentParent;
-            }
-            currentParent = currentParent.parentElement;
-        }
-        return document;
-    }
-    isScrollable(node) {
-        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-            return false;
-        }
-        const style = getComputedStyle(node);
-        return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
-            const value = style.getPropertyValue(propertyName);
-            return value === 'auto' || value === 'scroll';
-        });
-    }
-    handleResize() {
-        const previousDevice = this.device;
-        let newDevice;
-        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
-        if (width >= 1024) {
-            newDevice = 'desktop';
-        }
-        else if (width >= 600) {
-            newDevice = 'tablet';
-        }
-        else {
-            newDevice = 'mobile';
-        }
-        // Close any open mobile menu
-        if (newDevice === 'desktop' && this.mobileMenuExtended) {
-            this.toggleMobileMenu();
-            this.mobileMenuAnimation.finish(); // no animation
-        }
-        // Apply only on change for doing work only when necessary
-        if (newDevice !== previousDevice) {
-            this.device = newDevice;
-            window.requestAnimationFrame(() => {
-                this.switchLanguageSwitchMode();
-            });
-        }
-    }
-    switchLanguageSwitchMode() {
-        var _a;
-        const variant = this.device === 'desktop' ? 'dropdown' : 'list';
-        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
-    }
-    render() {
-        const navigationClasses = ['navigation'];
-        if (this.mobileMenuExtended) {
-            navigationClasses.push('extended');
-        }
-        return (h(Host, { key: 'd96b46b64946ef425059463d127fa1188c99ea58', version: version }, h("div", { key: '831ebc53d0f598a99e72d46a1530c2c34c196948', class: "global-header" }, h("div", { key: '69f3b3bc47a61810eea3ae60d7b2423af1750416', class: "global-sub" }, h("div", { key: 'ad6d36c7e7f029edfdee223ab1df664a1b7002f8', class: "logo" }, h("slot", { key: '95adfc2ad9e63fde9eef3cc71b63247e140fba3d', name: "post-logo" }))), h("div", { key: '741e62693a4df8558213c85d7a837efb8b0cfa6d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '992844b617955cb77079a175fcaaf54943a6eef2', name: "meta-navigation" }), h("slot", { key: '4384ae4c04d239bf1b1947ba6d1457ae6879a5cf', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c5b33b6bfb8c00d44710ec997a80d56720aab760', name: "post-language-switch" }), h("div", { key: '25a629a419c94fc4789eb374b87cf7c159b746c6', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3f3078832237abc5a6df79b4a57fe20fae926aa3', name: "post-togglebutton" })))), h("div", { key: 'e11ca83bc108d4677e849b7386ad7bd09d8c9331', class: "title-header d-flex space-between align-center" }, h("slot", { key: '87430ad15ab09f800b714be45be00a50e5b7dc0a', name: "title" }), h("div", { key: '494a198d3ee8185a26b16fce97a85bed01d6b3f7', class: "global-sub" }, h("slot", { key: '8a54e3d1366d39c11d64c0de90f35a4330836428', name: "local-controls" }), h("slot", { key: '63f841457e0f7b7722a3f8b1ea83ff0d78d9c08e' }))), h("div", { key: '90cf667c412d90f8e466e7e7925fa4a2f8223ad8', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: 'a046286cb6cc770bfb8fb4439cdacac7c351001b', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '6e0ad5841ef53daf0c0885b75efdf12d69f4a72d', class: "navigation-footer" }, h("slot", { key: '1eaebace0d5e37794867ae2a317a104726bb873a', name: "meta-navigation" }), h("slot", { key: '79217cd6fd16d4c6ef3e8aaa656e6dc0a8842b23', name: "post-language-switch" }))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "mobileMenuExtended": ["frozeBody"]
-    }; }
-};
-PostHeader.style = PostHeaderStyle0;
-
-const postIconCss = ":host{container-name:post-icon;container-type:inline-size;display:inline-block;width:1em;height:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color}@container post-icon (max-width: 23.98px){svg{--pis-16: block}}@container post-icon (min-width: 24px) and (max-width: 31.98px){svg{--pis-24: block}}@container post-icon (min-width: 32px) and (max-width: 39.98px){svg{--pis-32: block}}@container post-icon (min-width: 40px) and (max-width: 47.98px){svg{--pis-40: block}}@container post-icon (min-width: 48px) and (max-width: 63.98px){svg{--pis-48: block}}@container post-icon (min-width: 64px){svg{--pis-64: block}}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
-const PostIconStyle0 = postIconCss;
-
-const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
-const ANIMATION_NAMES = [
-    'cylon',
-    'cylon-vertical',
-    'spin',
-    'spin-reverse',
-    'fade',
-    'throb',
-];
-const ANIMATION_KEYS = [...ANIMATION_NAMES];
-const PostIcon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.animation = null;
-        this.base = null;
-        this.flipH = false;
-        this.flipV = false;
-        this.name = undefined;
-        this.rotate = null;
-        this.scale = null;
-    }
-    validateAnimation(newValue = this.animation) {
-        if (newValue !== undefined)
-            checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
-    }
-    validateBase(newValue = this.base) {
-        checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
-    }
-    validateFlipH(newValue = this.flipH) {
-        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
-    }
-    validateFlipV(newValue = this.flipV) {
-        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
-    }
-    validateName(newValue = this.name) {
-        checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
-        checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
-    }
-    validateRotate(newValue = this.rotate) {
-        checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
-    }
-    validateScale(newValue = this.scale) {
-        checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
-    }
-    getPath() {
-        var _a, _b, _c, _d, _e, _f;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
-        const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg#i-${this.name}`;
-        const filePath = `${fileBase}${fileName}`;
-        return new URL(filePath, window.location.origin).toString();
-    }
-    getStyles() {
-        return Object.entries({
-            transform: (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-    }
-    componentDidLoad() {
-        this.validateBase();
-        this.validateName();
-        this.validateFlipH();
-        this.validateFlipV();
-        this.validateScale();
-        this.validateRotate();
-        this.validateAnimation();
-    }
-    render() {
-        return (h(Host, { key: '7864661c5ba45508fa3902c49fd0da1d6c026795', "data-version": version }, h("svg", { key: '588f70bd81afc4cc5a312388aa6225bc9c853b57', style: this.getStyles() }, h("use", { key: 'c4505cf12ddf083ad86b3b9304ffbf37ac3489d1', href: this.getPath() }))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "animation": ["validateAnimation"],
-        "base": ["validateBase"],
-        "flipH": ["validateFlipH"],
-        "flipV": ["validateFlipV"],
-        "name": ["validateName"],
-        "rotate": ["validateRotate"],
-        "scale": ["validateScale"]
-    }; }
-};
-PostIcon.style = PostIconStyle0;
-
-const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block;width:fit-content}button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}a{color:inherit;text-decoration:none}:is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding)}.post-language-option-list{border-radius:2px;width:40px;height:40px}.post-language-option-list{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-list: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-list:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-option-list: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-list:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-option-list[aria-current=true],.post-language-option-list[aria-current=page]{background-color:#050400;color:#fff}.post-language-option-dropdown{padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative}.post-language-option-dropdown[aria-current=true]::after,.post-language-option-dropdown[aria-current=page]::after{content:\"\";left:-2px;height:3px;background-color:#504f4b;width:calc(100% + 4px);display:block;position:absolute;bottom:3px}.post-language-option-dropdown[aria-current=true]:focus::after,.post-language-option-dropdown[aria-current=page]:focus::after{width:calc(100% - 5px);left:2px}";
-const PostLanguageOptionStyle0 = postLanguageOptionCss;
-
-const PostLanguageOption = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.postChange = createEvent(this, "postChange", 7);
-        this.code = undefined;
-        this.active = undefined;
-        this.variant = undefined;
-        this.name = undefined;
-        this.url = undefined;
-    }
-    validateCode(value = this.code) {
-        checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
-    }
-    validateActiveProp(value = this.active) {
-        checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
-    }
-    validateName(value = this.name) {
-        checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
-    }
-    validateUrl(value = this.url) {
-        checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
-    }
-    componentDidLoad() {
-        this.validateCode();
-        this.validateActiveProp();
-        this.validateName();
-        this.validateUrl();
-        if (!this.name && this.isNameRequired()) {
-            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
-        }
-    }
-    /**
-     * Selects the language option programmatically.
-     */
-    async select() {
-        this.active = true;
-        this.emitChange();
-    }
-    emitChange() {
-        this.postChange.emit(this.code);
-    }
-    isNameRequired() {
-        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
-    }
-    render() {
-        const lang = this.code.toLowerCase();
-        return (h(Host, { key: '9a3f49ee993b69393ea8f81b671cd5482049ff1c', "data-version": version, role: "listitem" }, this.url ? (h("a", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "code": ["validateCode"],
-        "active": ["validateActiveProp"],
-        "name": ["validateName"],
-        "url": ["validateUrl"]
-    }; }
-};
-PostLanguageOption.style = PostLanguageOptionStyle0;
-
-const SWITCH_VARIANTS = ['list', 'dropdown'];
-
-const urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-let nanoid = (size = 21) => {
-  let id = '';
-  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id
-};
-
-const postLanguageSwitchCss = ":host{display:block}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.menuId = `p${nanoid(11)}`;
-        this.caption = undefined;
-        this.description = undefined;
-        this.variant = 'list';
-        this.activeLang = undefined;
-    }
-    validateCaption(value = this.caption) {
-        checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
-    }
-    validateDescription(value = this.description) {
-        checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
-    }
-    validateVariant(value = this.variant) {
-        checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
-    }
-    connectedCallback() {
-        this.updateChildrenVariant();
-        // Get the active language based on children's active state
-        this.activeLang = Array.from(this.host.querySelectorAll('post-language-option'))
-            .find(el => el.getAttribute('active') == 'true')
-            .getAttribute('code');
-    }
-    // Update post-language-option variant to have the correct style
-    updateChildrenVariant() {
-        this.host.querySelectorAll('post-language-option').forEach(el => {
-            el.setAttribute('variant', this.variant);
-        });
-    }
-    componentShouldUpdate() {
-        this.updateChildrenVariant();
-    }
-    componentDidLoad() {
-        this.validateCaption();
-        this.validateDescription();
-        this.validateVariant();
-        // Detects a change in the active language
-        this.host.addEventListener('postChange', (el) => {
-            this.activeLang = el.detail;
-            // Update the active state in the children post-language-option components
-            this.host.querySelectorAll('post-language-option').forEach(lang => {
-                if (lang.code && lang.code === this.activeLang) {
-                    lang.setAttribute('active', 'true');
-                }
-                else {
-                    lang.setAttribute('active', 'false');
-                }
-            });
-            // Hides the dropdown when an option has been clicked
-            if (this.variant === 'dropdown') {
-                const menu = this.host.shadowRoot.querySelector('post-menu');
-                menu.toggle(menu);
-            }
-        });
-    }
-    renderList() {
-        return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
-    }
-    renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": `${this.caption}, ${this.description}` }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId }, h("div", { class: "post-language-switch-dropdown-container" }, h("slot", null)))));
-    }
-    render() {
-        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "caption": ["validateCaption"],
-        "description": ["validateDescription"],
-        "variant": ["validateVariant"]
-    }; }
-};
-PostLanguageSwitch.style = PostLanguageSwitchStyle0;
-
-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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.titleId = undefined;
-        this.titleHidden = false;
-        this.horizontal = false;
-    }
-    componentWillLoad() {
-        /**
-         * Get the id set on the host element or use a random id by default
-         */
-        this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
-    }
-    componentDidLoad() {
-        this.checkTitle();
-    }
-    checkTitle() {
-        if (!this.titleEl.textContent.trim()) {
-            throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
-        }
-    }
-    render() {
-        return (h(Host, { key: '4f982e717530514589c5528553b70463d678b676', "data-version": version }, h("div", { key: 'cc65ed208f48e7a22482af96fd069d05363f2617', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0f8bbeade50b59e53767ce2169dd57bb79644705' })), h("div", { key: '7fa5de37a169e6f76928c2088c46ee747427887e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '86b4d71b83671babb61dd12e842710d67350a09e', name: "post-list-item" }))));
-    }
-    get host() { return getElement(this); }
-};
-PostList.style = PostListStyle0;
-
-const postListItemCss = ":host{display:flex}";
-const PostListItemStyle0 = postListItemCss;
-
-const PostListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    connectedCallback() {
-        this.host.setAttribute('slot', 'post-list-item');
-    }
-    render() {
-        return (h(Host, { key: 'aa9a31c64e3e8ba5dcac1d03b54ab3c886149c1f', role: "listitem", slot: "post-list-item" }, h("slot", { key: '06353140f8917fc5373de6d56708467af2ef52b2' })));
-    }
-    get host() { return getElement(this); }
-};
-PostListItem.style = PostListItemStyle0;
-
-const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const PostLogoStyle0 = postLogoCss;
-
-const PostLogo = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.url = undefined;
-    }
-    validateUrl() {
-        checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
-    }
-    componentDidLoad() {
-        this.validateUrl();
-        this.checkDescription();
-    }
-    checkDescription() {
-        if (!this.host.textContent) {
-            console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
-        }
-    }
-    render() {
-        const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
-        const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: 'b8d47e2530eb39f7b05370b4cea0b728cb00a1fb', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '47a4d88622aab30e652a08827e221dacda36cb48', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: '4eb6ad1bc6c165197b6bcce8fe1146eb9d48fb21', class: "description" }, h("slot", { key: 'c66a4385f19711daab6f4ba87d5f78f59ad8b263', onSlotchange: () => this.checkDescription() })), h("svg", { key: '824643e64a3fb0914082f8f78a11753d66c98842', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'e4f63d237c1fe1128005f29ea604c865f6b50943', id: "Logo" }, h("rect", { key: '34fec89177fb5461318d3e8fcc725f32dd97057a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '5600de7c21a8e363fffa35710a3f41e4295b76c7', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '719be82825355704c4eac3c60fb461f6303734f7', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "url": ["validateUrl"]
-    }; }
-};
-PostLogo.style = PostLogoStyle0;
-
-const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item>button:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:var(--post-core-dimension-4);z-index:1}@media screen and (min-width: 1024px){post-mainnavigation nav{position:relative;max-width:100vw;max-height:var(--post-core-dimension-56);user-select:none}post-mainnavigation post-list{margin-inline:var(--post-core-dimension-4)}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline:var(--post-core-dimension-12);height:var(--post-core-dimension-56);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{content:\"\";-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.99px){post-mainnavigation post-list>[role=list]{transform:none !important}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;height:var(--post-core-dimension-48);padding-inline-end:var(--post-core-dimension-6);gap:var(--post-core-dimension-16);border-block:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-block-end-color:currentColor;font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button.selected{border-block-width:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::after{content:\"\";display:block;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-24);height:var(--post-core-dimension-24)}}";
-const PostMainnavigationStyle0 = postMainnavigationCss;
-
-const PostMainnavigation = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.postToggle = createEvent(this, "postToggle", 7);
-    }
-    /**
-     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
-     */
-    connectedCallback() {
-        this.header = this.host.closest('post-header');
-    }
-    /**
-     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
-     */
-    disconnectedCallback() {
-        this.header = null;
-    }
-    handleBackButtonClick() {
-        if (this.header)
-            this.header.toggleMobileMenu();
-    }
-    render() {
-        return (h(Host, { key: 'f21c438ac0bbcb08e08fd419589bf92b7d8b3a61', slot: "post-mainnavigation" }, h("div", { key: '1925f47932d7e842e8b9f059d7ade955c577fa50', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'fe18f6859a6d79c7ae701b65a31be1eab9c8b2ac', name: "back-button" })), h("nav", { key: 'ad2b0a52bc0bcf78a3c3340ba163ee6167be2c73' }, h("slot", { key: '8fc7b01cc0f3729cd2c12c4967ec87891fe0dcf5' }))));
-    }
-    get host() { return getElement(this); }
-};
-PostMainnavigation.style = PostMainnavigationStyle0;
-
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}*,::before,::after{box-sizing:border-box}post-popovercontainer{--post-global-header-height:72px;--post-main-header-height:56px;--post-header-height:calc(var(--post-global-header-height) + var(--post-main-header-height));background-color:#fafafa;border:none;border-top:1px solid #e1e0dc;width:100%;border-radius:0;box-shadow:0 8px 6px rgba(0,0,0,.16)}@media screen and (max-width: 1023.99px){post-popovercontainer{--post-global-header-height:64px;position:absolute;top:var(--post-header-height) !important;bottom:0;left:0;width:100%;height:auto}post-popovercontainer.slide-in{animation:slide-in;animation-duration:350ms;animation-fill-mode:forwards}post-popovercontainer.slide-out{animation:slide-out;animation-duration:350ms;animation-fill-mode:forwards}}.megadropdown{padding:31px 40px 40px}@media screen and (max-width: 1023.99px){.megadropdown{padding:16px 32px 24px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.99px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.99px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown h2{display:block;font-size:20px}}.megadropdown a:hover{border-block-width:0}.megadropdown a:hover::after{content:unset}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;border-bottom:1px solid #050400;padding:15px 12px 14px 0;display:block;font-weight:900}.megadropdown post-list .list-title h3 a{text-decoration:none;width:100%;font-size:inherit;display:inline-block;font-weight:inherit;height:unset;padding:0;border:0}@media screen and (max-width: 1023.99px){.megadropdown post-list .list-title h3{font-size:16px;padding:12px 12px 11px 0}}.megadropdown post-list-item{border-bottom:1px solid #050400}.megadropdown post-list-item>a{padding:13px 12px 12px 0;display:block;text-decoration:none;width:100%;border-bottom:0;height:auto;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown post-list-item>a{padding:12px 12px 11px 0}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}.megadropdown .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.99px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.99px){.megadropdown .close-button{display:none}}";
-const PostMegadropdownStyle0 = postMegadropdownCss;
-
-const PostMegadropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
-        this.isVisible = false;
-        this.animationClass = null;
-    }
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.postToggleMegadropdown.emit(this.isVisible);
-        });
-        this.popoverRef.addEventListener('animationend', () => {
-            if (this.animationClass === 'slide-out') {
-                this.hide();
-            }
-        });
-    }
-    /**
-     * Toggles the dropdown visibility based on its current state.
-     */
-    async toggle(target) {
-        this.isVisible ? this.hide() : await this.show(target);
-    }
-    /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
-     */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.animationClass = 'slide-in';
-        }
-        else {
-            console.error('show: popoverRef is null or undefined');
-        }
-    }
-    /**
-     * Hides the popover dropdown
-     */
-    hide() {
-        if (this.popoverRef) {
-            this.popoverRef.hide();
-        }
-        else {
-            console.error('hide: popoverRef is null or undefined');
-        }
-    }
-    handleBackButtonClick() {
-        this.animationClass = 'slide-out';
-    }
-    handleCloseButtonClick() {
-        this.popoverRef.hide();
-    }
-    render() {
-        return (h(Host, { key: 'cfd4e6c7bb87c50e471d304a4b4f086266e1c2fe' }, h("post-popovercontainer", { key: '31dc3a5e98a5c60a4db8d47375491a6f3957af0b', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '7001d0e108544a0244af088be0bde49f90a3dea3', class: "megadropdown" }, h("div", { key: '513b0710163e8f58677b6b50d2ba2d241cf9ff35', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5457c0b9bfff045f39f470e600b5aa31036c0807', name: "back-button" })), h("div", { key: 'c3314a4ae4f386224a2db7fe32203f72f6a1b284', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '8feeec24fe5f2522ba1a54ab0b7c682d3a152086', name: "close-button" })), h("slot", { key: '6d9426756a809ed26045c9cd56cacf0f36aa9400', name: "megadropdown-title" }), h("div", { key: 'fd3b0ac7998eec76700ccc6668d8b2e3fcc4c63a', class: "megadropdown-content" }, h("slot", { key: '23638936fdffa224de9631bfd599c0872202a30d' }))))));
-    }
-    get host() { return getElement(this); }
-};
-PostMegadropdown.style = PostMegadropdownStyle0;
-
-const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%}";
-const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
-
-const PostMegadropdownTrigger = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for mega dropdown control.
-         */
-        this.slottedButton = null;
-        this.for = undefined;
-        this.ariaExpanded = false;
-    }
-    /**
-     * Watch for changes to the `for` property to validate its type and ensure it is a string.
-     * @param forValue - The new value of the `for` property.
-     */
-    validateControlFor(forValue = this.for) {
-        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
-    }
-    get megadropdown() {
-        const ref = document.getElementById(this.for);
-        return ref && ref.localName === 'post-megadropdown'
-            ? ref
-            : null;
-    }
-    handleToggle() {
-        if (this.megadropdown) {
-            this.megadropdown.toggle(this.host);
-        }
-        else {
-            console.warn(`No post-megadropdown found with ID: ${this.for}`);
-        }
-    }
-    componentDidLoad() {
-        this.validateControlFor();
-        // Check if the mega dropdown attached to the trigger is expanded or not
-        document.addEventListener('postToggleMegadropdown', (event) => {
-            if (event.target.id === this.for) {
-                this.ariaExpanded = event.detail;
-                if (this.slottedButton) {
-                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-                }
-            }
-        });
-        this.slottedButton = this.host.querySelector('button');
-        if (this.slottedButton) {
-            this.slottedButton.setAttribute('aria-haspopup', 'menu');
-            this.slottedButton.addEventListener('click', () => {
-                this.handleToggle();
-            });
-        }
-        else {
-            console.warn('No button found within post-megadropdown-trigger');
-        }
-    }
-    render() {
-        return (h(Host, { key: '4ab919adeaa51fc12d45131fa540c76fb3ba73d9', "data-version": version, "tab-index": "-1" }, h("button", { key: 'e7dac321691cdb19a4874fd0b2097227d077af35' }, h("slot", { key: 'beffc38d2d35a67e74364c3b40b6d39896aa4de3' }))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "for": ["validateControlFor"]
-    }; }
-};
-PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;
-
-const focusableSelector = `:where(${[
-    'button',
-    'input:not([type="hidden"])',
-    '[tabindex]',
-    'select',
-    'textarea',
-    '[contenteditable]',
-    'a[href]',
-    'iframe',
-    'audio[controls]',
-    'video[controls]',
-    'area[href]',
-    'details > summary:first-of-type',
-].join(',')})`;
-const focusDisablingSelector = `:where(${[
-    '[inert]',
-    '[inert] *',
-    ':disabled',
-    'dialog:not([open]) *',
-    '[popover]:not(:popover-open) *',
-    'details:not([open]) > *:not(details > summary:first-of-type)',
-    'details:not([open]) > *:not(details > summary:first-of-type) *',
-].join(',')})`;
-const isFocusable = (element) => {
-    return (element === null || element === void 0 ? void 0 : element.matches(focusableSelector)) && !(element === null || element === void 0 ? void 0 : element.matches(focusDisablingSelector));
-};
-
-const postMenuCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}";
-const PostMenuStyle0 = postMenuCss;
-
-const PostMenu = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.toggleMenu = createEvent(this, "toggleMenu", 7);
-        this.lastFocusedElement = null;
-        this.KEYCODES = {
-            SPACE: ' ',
-            ENTER: 'Enter',
-            UP: 'ArrowUp',
-            DOWN: 'ArrowDown',
-            TAB: 'Tab',
-            HOME: 'Home',
-            END: 'End',
-            ESCAPE: 'Escape',
-        };
-        this.handleKeyDown = (e) => {
-            e.stopPropagation();
-            if (e.key === this.KEYCODES.ESCAPE) {
-                this.toggle(this.host);
-                return;
-            }
-            if (Object.values(this.KEYCODES).includes(e.key)) {
-                this.controlKeyDownHandler(e);
-            }
-        };
-        this.handleClick = (e) => {
-            const target = e.target;
-            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-                this.toggle(this.host);
-            }
-        };
-        this.placement = 'bottom';
-        this.isVisible = false;
-    }
-    connectedCallback() {
-        this.root = getRoot(this.host);
-        this.host.addEventListener('keydown', this.handleKeyDown);
-        this.host.addEventListener('click', this.handleClick);
-    }
-    disconnectedCallback() {
-        this.host.removeEventListener('keydown', this.handleKeyDown);
-        this.host.removeEventListener('click', this.handleClick);
-    }
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.toggleMenu.emit(this.isVisible);
-        });
-    }
-    /**
-     * Toggles the menu visibility based on its current state.
-     */
-    async toggle(target) {
-        this.isVisible ? await this.hide() : await this.show(target);
-    }
-    /**
-     * Displays the popover menu, focusing the first menu item.
-     *
-     * @param target - The HTML element relative to which the popover menu should be displayed.
-     */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.lastFocusedElement = this.root.activeElement; // Use root's activeElement
-            const menuItems = this.getSlottedItems();
-            if (menuItems.length > 0) {
-                menuItems[0].focus();
-            }
-        }
-        else {
-            console.error('show: popoverRef is null or undefined');
-        }
-    }
-    /**
-     * Hides the popover menu and restores focus to the previously focused element.
-     */
-    async hide() {
-        if (this.popoverRef) {
-            await this.popoverRef.hide();
-            if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        }
-        else {
-            console.error('hide: popoverRef is null or undefined');
-        }
-    }
-    controlKeyDownHandler(e) {
-        const menuItems = this.getSlottedItems();
-        if (!menuItems.length) {
-            return;
-        }
-        const currentFocusedElement = this.root.activeElement; // Use root's activeElement
-        let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
-        switch (e.key) {
-            case this.KEYCODES.UP:
-                e.preventDefault();
-                currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
-                break;
-            case this.KEYCODES.DOWN:
-                e.preventDefault();
-                currentIndex = (currentIndex + 1) % menuItems.length;
-                break;
-            case this.KEYCODES.HOME:
-                currentIndex = 0;
-                break;
-            case this.KEYCODES.END:
-                currentIndex = menuItems.length - 1;
-                break;
-            case this.KEYCODES.SPACE:
-            case this.KEYCODES.ENTER:
-                this.toggle(this.host);
-                return;
-            case this.KEYCODES.TAB:
-                this.toggle(this.host);
-                break;
-        }
-        if (menuItems[currentIndex]) {
-            menuItems[currentIndex].focus();
-        }
-    }
-    getSlottedItems() {
-        const slot = this.host.shadowRoot.querySelector('slot');
-        const slottedElements = slot ? slot.assignedElements() : [];
-        const menuItems = slottedElements
-            .filter(el => el.tagName === 'POST-MENU-ITEM')
-            .map(el => {
-            const slot = el.shadowRoot.querySelector('slot');
-            const assignedElements = slot ? slot.assignedElements() : [];
-            return assignedElements.filter(isFocusable);
-        })
-            .flat();
-        return menuItems;
-    }
-    render() {
-        return (h(Host, { key: '48e04f36dc7a3d8ed81b9570d1a4c931ace3cadd', "data-version": version }, h("post-popovercontainer", { key: '58532143bd7a8be7ea77cbd0a929fa74ee0ee890', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '967bf8aa936611ac6d533d9a8a1e176ee84b2a73', class: "popover-container", part: "popover-container" }, h("slot", { key: '4eb6b7fe34e8ea1df0d7cd8de31b57452442c3bb' })))));
-    }
-    get host() { return getElement(this); }
-};
-PostMenu.style = PostMenuStyle0;
-
-const postMenuTriggerCss = ":host{display:inline-block}";
-const PostMenuTriggerStyle0 = postMenuTriggerCss;
-
-const PostMenuTrigger = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for menu control.
-         */
-        this.slottedButton = null;
-        this.handleKeyDown = (e) => {
-            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.handleToggle();
-            }
-        };
-        this.for = undefined;
-        this.ariaExpanded = false;
-    }
-    /**
-     * Watch for changes to the `for` property to validate its type and ensure it is a string.
-     * @param forValue - The new value of the `for` property.
-     */
-    validateControlFor(forValue = this.for) {
-        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
-    }
-    get menu() {
-        const ref = this.root.getElementById(this.for);
-        return ref && ref.localName === 'post-menu' ? ref : null;
-    }
-    handleToggle() {
-        const menu = this.menu;
-        if (menu && this.slottedButton) {
-            this.ariaExpanded = !this.ariaExpanded;
-            this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-            menu.toggle(this.host);
-        }
-        else {
-            console.warn(`No post-menu found with ID: ${this.for}`);
-        }
-    }
-    componentDidLoad() {
-        this.root = getRoot(this.host);
-        this.validateControlFor();
-        this.slottedButton = this.host.querySelector('button');
-        // Check if the slottedButton is within a web component
-        if (!this.slottedButton) {
-            const webComponent = this.host.querySelector('.menu-trigger-webc');
-            if (webComponent.shadowRoot) {
-                const slottedButton = webComponent.shadowRoot.querySelector('button');
-                if (slottedButton) {
-                    this.slottedButton = slottedButton;
-                }
-            }
-        }
-        if (this.slottedButton) {
-            this.slottedButton.setAttribute('aria-haspopup', 'menu');
-            this.slottedButton.addEventListener('click', () => {
-                this.handleToggle();
-            });
-            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
-        }
-        else {
-            console.warn('No button found within post-menu-trigger');
-        }
-    }
-    render() {
-        return (h(Host, { key: '64e9e7e6448160c7b52fc732b5107e94e9776678', "data-version": version, "tab-index": "-1" }, h("slot", { key: '711d641147cec0c26c7a3917f9302f1bbbee0d73' })));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "for": ["validateControlFor"]
-    }; }
-};
-PostMenuTrigger.style = PostMenuTriggerStyle0;
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e1b64755.js';
+import { v as version } from './package-983f957d.js';
 
 /**
  * Custom positioning reference element.
@@ -2195,7 +1195,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle$1(element);
+  } = getComputedStyle(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement(element) {
@@ -2212,7 +1212,7 @@ function isTopLayer(element) {
 }
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
@@ -2236,7 +1236,7 @@ function isWebKit() {
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
-function getComputedStyle$1(element) {
+function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -2294,7 +1294,7 @@ function getOverflowAncestors(node, list, traverseIframes) {
 }
 
 function getCssDimensions(element) {
-  const css = getComputedStyle$1(element);
+  const css = getComputedStyle(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -2399,7 +1399,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle$1(currentIFrame);
+      const css = getComputedStyle(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -2479,7 +1479,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle$1(body).direction === 'rtl') {
+  if (getComputedStyle(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -2555,7 +1555,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -2568,12 +1568,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle$1(currentNode);
+    const computedStyle = getComputedStyle(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -2664,11 +1664,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle$1(element).position === 'static';
+  return getComputedStyle(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -2720,7 +1720,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle$1(element).direction === 'rtl';
+  return getComputedStyle(element).direction === 'rtl';
 }
 
 const platform = {
@@ -3039,34 +2039,40 @@ const computePosition = (reference, floating, options) => {
   }
 `,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\n * Copyright 2021 by Swiss Post, Information Technology\n */@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);width:max-content;display:flex;align-items:center;max-width:100%;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
 const PostPopovercontainerStyle0 = postPopovercontainerCss;
 
-const SIDE_MAP = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
 const PostPopovercontainer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postToggle = createEvent(this, "postToggle", 7);
         this.placement = 'top';
         this.edgeGap = 8;
+        this.animation = null;
         this.arrow = false;
+        this.safeSpace = undefined;
+    }
+    /**
+     * Updates cursor position for safe space feature when popover is open.
+     * Sets CSS custom properties for dynamic styling of safe area.
+     * @param event MouseEvent with cursor position
+     */
+    mouseTrackingHandler(event) {
+        this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
+        this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
     }
     componentDidLoad() {
         this.host.setAttribute('popover', '');
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
-        if (typeof this.clearAutoUpdate === 'function')
+        if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
+        }
     }
     /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Programmatically display the popovercontainer
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      */
     async show(target) {
         if (!this.toggleTimeoutId) {
@@ -3076,7 +2082,7 @@ const PostPopovercontainer = class {
         }
     }
     /**
-     * Programmatically hide this tooltip
+     * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
@@ -3085,8 +2091,8 @@ const PostPopovercontainer = class {
         }
     }
     /**
-     * Toggle tooltip display
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Toggle popovercontainer display
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
@@ -3097,11 +2103,11 @@ const PostPopovercontainer = class {
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
-        return this.host.matches(':where(:popover-open, .popover-open');
+        return this.host.matches(':where(:popover-open, .popover-open)');
     }
     /**
-     * Start or stop auto updates based on tooltip events.
-     * Tooltips can be closed or opened with other methods than class members,
+     * Start or stop auto updates based on popovercontainer events.
+     * Popovercontainers can be closed or opened with other methods than class members,
      * therefore listening to the toggle event is safer for cleaning up.
      * @param e ToggleEvent
      */
@@ -3110,29 +2116,54 @@ const PostPopovercontainer = class {
         const isOpen = e.newState === 'open';
         if (isOpen) {
             this.startAutoupdates();
+            if (this.safeSpace)
+                window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
         else {
             if (typeof this.clearAutoUpdate === 'function')
                 this.clearAutoUpdate();
+            if (this.safeSpace)
+                window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
         this.postToggle.emit(isOpen);
     }
     /**
      * Start listening for DOM updates, scroll events etc. that have
-     * an influence on tooltip positioning
+     * an influence on popovercontainer positioning
      */
     startAutoupdates() {
         this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
     async calculatePosition() {
+        const { x, y, middlewareData, placement } = await this.computeMainPosition();
+        const currentPlacement = placement.split('-')[0];
+        // Position popover
+        this.host.style.left = `${x}px`;
+        this.host.style.top = `${y}px`;
+        // Position arrow if enabled
+        if (this.arrow && middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
+            if (staticSide) {
+                Object.assign(this.arrowRef.style, {
+                    left: arrowX ? `${arrowX}px` : '',
+                    top: arrowY ? `${arrowY}px` : '',
+                    [staticSide]: '-7px',
+                });
+            }
+        }
+        // Handle safe space if enabled
+        if (this.safeSpace && this.eventTarget) {
+            await this.updateSafeSpaceBoundaries(currentPlacement);
+        }
+    }
+    async computeMainPosition() {
         const gap = this.edgeGap;
         const middleware = [
             flip(),
             inline(),
             shift({
                 padding: gap,
-                // Prevents shifting away from the anchor too far, while shifting as far as possible
-                // https://floating-ui.com/docs/shift#limiter
                 limiter: limitShift({
                     offset: 32,
                 }),
@@ -3144,80 +2175,105 @@ const PostPopovercontainer = class {
                     });
                 },
             }),
-            offset(this.arrow ? gap + 4 : gap), // 4px outside of element to account for focus outline + ~arrow size
+            offset(this.arrow ? gap + 4 : gap),
         ];
         if (this.arrow) {
             middleware.push(arrow({ element: this.arrowRef, padding: gap }));
         }
-        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
+        return computePosition(this.eventTarget, this.host, {
             placement: this.placement || 'top',
             strategy: 'fixed',
             middleware,
         });
-        // Tooltip
-        this.host.style.left = `${x}px`;
-        this.host.style.top = `${y}px`;
-        // Arrow
-        if (this.arrow) {
-            // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
-            const side = currentPlacement.split('-')[0];
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const staticSide = SIDE_MAP[side];
-            const offsetBorderLineJoin = 2;
-            Object.assign(this.arrowRef.style, {
-                top: arrowY ? `${arrowY}px` : '',
-                left: arrowX ? `${arrowX}px` : '',
-                [staticSide]: `${-this.arrowRef.offsetWidth / 2 - offsetBorderLineJoin}px`,
-            });
-            // Add position as a class to be able to style arrow for HCM
-            this.arrowRef.classList.remove(...Object.values(SIDE_MAP));
-            this.arrowRef.classList.add(staticSide);
-        }
-    }
-    render() {
-        return (h(Host, { key: '23e391236e263f7ae7c66c994b2847bcba269b37', "data-version": version }, this.arrow && (h("span", { key: '6c6053b2fd315a5940a2c3493182249782b2492c', class: "arrow", ref: el => {
-                this.arrowRef = el;
-            } })), h("slot", { key: 'ff998f110f42a22e886eba398285c41d94718bab' })));
     }
-    get host() { return getElement(this); }
-};
-PostPopovercontainer.style = PostPopovercontainerStyle0;
-
-const postTogglebuttonCss = ":host{cursor:pointer;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(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
-const PostTogglebuttonStyle0 = postTogglebuttonCss;
-
-const PostTogglebutton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            // perform a click when enter or spaced are pressed to mimic the button behavior
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault(); // prevents the page from scrolling when space is pressed
-                this.host.click();
+    async updateSafeSpaceBoundaries(currentPlacement) {
+        const targetRect = this.eventTarget.getBoundingClientRect();
+        const popoverRect = this.host.getBoundingClientRect();
+        const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
+        // Helper function to get positioning data based on placement
+        const getPositioningData = (placement, popoverRect, targetRect) => {
+            if (placement === 'top' || placement === 'bottom') {
+                return {
+                    popover: {
+                        y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
+                        xStart: popoverRect.left,
+                        xEnd: popoverRect.right,
+                    },
+                    trigger: {
+                        y: placement === 'top' ? targetRect.top : targetRect.bottom,
+                        xStart: targetRect.left,
+                        xEnd: targetRect.right,
+                    },
+                };
+            }
+            else {
+                // left or right
+                return {
+                    popover: {
+                        x: placement === 'left' ? popoverRect.right : popoverRect.left,
+                        yStart: popoverRect.top,
+                        yEnd: popoverRect.bottom,
+                    },
+                    trigger: {
+                        x: placement === 'left' ? targetRect.left : targetRect.right,
+                        yStart: targetRect.top,
+                        yEnd: targetRect.bottom,
+                    },
+                };
             }
         };
-        this.toggled = false;
-    }
-    validateToggled(value = this.toggled) {
-        checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
-    }
-    componentWillLoad() {
-        this.validateToggled();
-        // add event listener to not override listener that might be set on the host
-        this.host.addEventListener('click', () => this.handleClick());
-        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+        const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
+        // Clear previous values
+        PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
+            this.host.style.removeProperty(prop);
+        });
+        if (isVertical) {
+            // For top/bottom placement
+            this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
+            this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
+            this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
+            this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
+            this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
+            this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
+        }
+        else {
+            // For left/right placement
+            this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
+            this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
+            this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
+            this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
+            this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
+            this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
+        }
     }
     render() {
-        return (h(Host, { key: 'f20b7e5f7cd14c1b0addf12600df27e7e5dab841', slot: "post-togglebutton", "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '526540ce9a66fa08f0142e674811fe88e3abcfa6' })));
+        const animationClass = this.animation ? `animate-${this.animation}` : '';
+        return (h(Host, { key: '98ea26b46803e8aa98cc2cec53798d994c0ff856', "data-version": version }, h("div", { key: '230fa7df2963b36e67a4559f07010f7213240e3c', class: animationClass }, this.arrow && (h("span", { key: '58647eb14ef84ff04b04b7dec0bbb38b9bcd4b69', class: "arrow", ref: el => {
+                this.arrowRef = el;
+            } })), h("slot", { key: 'de0afc53f013ac7d4cdd06e0e2d7746a8e0971dc' }))));
     }
     get host() { return getElement(this); }
-    static get watchers() { return {
-        "toggled": ["validateToggled"]
-    }; }
 };
-PostTogglebutton.style = PostTogglebuttonStyle0;
+PostPopovercontainer.STATIC_SIDES = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+PostPopovercontainer.PROPERTIES_TO_CLEAR = [
+    '--post-safe-space-popover-x',
+    '--post-safe-space-popover-y',
+    '--post-safe-space-popover-x-start',
+    '--post-safe-space-popover-x-end',
+    '--post-safe-space-popover-y-start',
+    '--post-safe-space-popover-y-end',
+    '--post-safe-space-trigger-x',
+    '--post-safe-space-trigger-y',
+    '--post-safe-space-trigger-x-start',
+    '--post-safe-space-trigger-x-end',
+    '--post-safe-space-trigger-y-start',
+    '--post-safe-space-trigger-y-end',
+];
+PostPopovercontainer.style = PostPopovercontainerStyle0;
 
-export { PostClosebutton as P, PostHeader as a, PostIcon as b, PostLanguageOption as c, PostLanguageSwitch as d, PostList as e, PostListItem as f, PostLogo as g, PostMainnavigation as h, PostMegadropdown as i, PostMegadropdownTrigger as j, PostMenu as k, PostMenuTrigger as l, PostPopovercontainer as m, PostTogglebutton as n };
+export { PostPopovercontainer as P };