@swisspost/design-system-components 9.0.1 → 10.0.0-next.38

package/dist/esm/post-togglebutton-87967c5b.js

@@ -0,0 +1,4478 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-f4d19816.js';
+import { v as version } from './package-33ac2576.js';
+import { a as slideUp, s as slideDown } from './slide-cd2850ee.js';
+import { e as eventGuard } from './event-guard-538ee077.js';
+import { I as IS_BROWSER, b as breakpoint } from './breakpoints-7812702e.js';
+import { c as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkEmptyOrUrl } from './index-8f8fe5b0.js';
+import { c as checkNonEmpty } from './check-non-empty-258a56b3.js';
+import { c as checkType } from './check-type-37d5d307.js';
+import { n as nanoid } from './index.browser-ff103197.js';
+import { g as getRoot } from './get-root-1b1af46f.js';
+
+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) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
+}
+
+const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const PostClosebuttonStyle0 = postClosebuttonCss;
+
+const PostClosebutton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
+    }
+    get host() { return getElement(this); }
+};
+PostClosebutton.style = PostClosebuttonStyle0;
+
+/* 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{z-index:1020;position:relative;--post-global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-height);--post-logo-height:var(--post-global-header-height);--post-global-controls-top:0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:1;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
+const PostHeaderStyle0 = postHeaderCss;
+
+const PostHeader = class {
+    get scrollParent() {
+        const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
+        if (frozenScrollParent)
+            return frozenScrollParent;
+        let element = this.host.parentElement;
+        while (element) {
+            const overflow = getComputedStyle(element).overflowY;
+            if (['auto', 'scroll'].includes(overflow)) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return document.body;
+    }
+    lockBody(newValue, _oldValue, propName) {
+        const scrollParent = this.scrollParent;
+        const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
+        if (this.device !== 'desktop' && mobileMenuExtended) {
+            scrollParent.setAttribute('data-post-scroll-locked', '');
+            this.host.addEventListener('keydown', this.keyboardHandler);
+        }
+        else {
+            scrollParent.removeAttribute('data-post-scroll-locked');
+            this.host.removeEventListener('keydown', this.keyboardHandler);
+        }
+    }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.megedropdownStateHandler = (event) => {
+            eventGuard(this.host, event, {
+                targetLocalName: 'post-megadropdown',
+                delegatorSelector: 'post-header',
+            }, () => {
+                this.megadropdownOpen = event.detail.isVisible;
+            });
+        };
+        this.device = null;
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('resize', this.throttledResize, { passive: true });
+        window.addEventListener('scroll', this.handleScrollEvent, {
+            passive: true,
+        });
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
+            passive: true,
+        });
+        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.addEventListener('click', this.handleLinkClick);
+        this.handleResize();
+        this.handleScrollParentResize();
+        this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
+    }
+    componentWillRender() {
+        this.handleScrollEvent();
+    }
+    componentDidRender() {
+        this.getFocusableElements();
+        this.handleLocalHeaderResize();
+    }
+    // Clean up possible side effects when post-header is disconnected
+    disconnectedCallback() {
+        const scrollParent = this.scrollParent;
+        window.removeEventListener('resize', this.throttledResize);
+        window.removeEventListener('scroll', this.handleScrollEvent);
+        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.scrollParentResizeObserver) {
+            this.scrollParentResizeObserver.disconnect();
+            this.scrollParentResizeObserver = null;
+        }
+        if (this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver.disconnect();
+            this.localHeaderResizeObserver = null;
+        }
+        this.mobileMenuExtended = false;
+    }
+    /**
+     * Toggles the mobile navigation.
+     */
+    async toggleMobileMenu(force) {
+        if (this.device === 'desktop')
+            return;
+        this.mobileMenuAnimation = this.mobileMenuExtended
+            ? slideUp(this.mobileMenu)
+            : slideDown(this.mobileMenu);
+        // Update the state of the toggle button
+        const menuButton = this.host.querySelector('post-togglebutton');
+        menuButton.toggled = force ?? !this.mobileMenuExtended;
+        // Toggle menu visibility before it slides down and after it slides back up
+        if (this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+        if (this.mobileMenuExtended === false) {
+            Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
+                dropdown.hide(false, true);
+            });
+        }
+    }
+    // Get all the focusable elements in the post-header mobile menu
+    getFocusableElements() {
+        // Get elements in the correct order (different as the DOM order)
+        const focusableEls = [
+            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
+            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-mainnavigation > .back-button, post-megadropdown-trigger')),
+            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
+        ];
+        // Add the main toggle menu button to the list of focusable children
+        const focusableChildren = [
+            this.host.querySelector('post-togglebutton'),
+            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
+        ];
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.mobileMenuExtended) {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    handleScrollEvent() {
+        const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
+    }
+    updateLocalHeaderHeight() {
+        const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
+        document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}px`);
+    }
+    updateScrollParentHeight() {
+        this.host.style.setProperty('--post-header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
+    }
+    handleLinkClick(event) {
+        const target = event.target;
+        const isLinkInMainNav = target.closest('post-mainnavigation a');
+        const isLinkInMegadropdown = target.closest('post-megadropdown a');
+        if (!isLinkInMainNav && !isLinkInMegadropdown) {
+            return;
+        }
+        if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
+            this.toggleMobileMenu(false);
+        }
+        if (this.device === 'desktop' && isLinkInMegadropdown) {
+            const megadropdownLink = target.closest('post-megadropdown a');
+            if (megadropdownLink) {
+                target.closest('post-megadropdown').hide(true);
+            }
+        }
+    }
+    handleResize() {
+        const previousDevice = this.device;
+        let newDevice;
+        const width = window?.innerWidth;
+        if (width >= 1024) {
+            newDevice = 'desktop';
+        }
+        else if (width >= 600) {
+            newDevice = 'tablet';
+        }
+        else {
+            newDevice = 'mobile';
+        }
+        // Apply only on change for doing work only when necessary
+        if (newDevice !== previousDevice) {
+            this.device = newDevice;
+            this.postUpdateDevice.emit(this.device);
+            window.requestAnimationFrame(() => {
+                this.switchLanguageSwitchMode();
+            });
+        }
+    }
+    handleScrollParentResize() {
+        if (this.scrollParent) {
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
+            this.scrollParentResizeObserver.observe(this.scrollParent);
+        }
+    }
+    handleLocalHeaderResize() {
+        const localHeader = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeader && !this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
+            this.localHeaderResizeObserver.observe(localHeader);
+        }
+    }
+    switchLanguageSwitchMode() {
+        const variant = this.device === 'desktop' ? 'menu' : 'list';
+        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+            languageSwitch?.setAttribute('variant', variant);
+        });
+    }
+    renderNavigation() {
+        const navigationClasses = ['navigation'];
+        const mobileMenuScrollTop = this.mobileMenu?.scrollTop ?? 0;
+        if (this.mobileMenuExtended) {
+            navigationClasses.push('extended');
+        }
+        if (this.megadropdownOpen) {
+            navigationClasses.push('megadropdown-open');
+        }
+        return (h("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
+    }
+    render() {
+        return (h(Host, { key: '9705dc224bcf389c8836efbaf40d6d6617b2052f', "data-version": version }, h("div", { key: '41a1b10ff4193b0a31eecc673935aabb70c1d1b4', class: "global-header" }, h("div", { key: '7e3692fca4130755c009447fcc20585386f1c65d', class: "global-sub" }, h("div", { key: '5b4d7fb16fcbeee3f07a1a160751b5c23e9f9edb', class: "logo" }, h("slot", { key: '67048479266ba86f2a1b739751be7bfe97ce4544', name: "post-logo" }))), h("div", { key: '83642103fae714a7c9ac1962e1433fd72899cf87', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ff672718574b3690d9ac8c2f54cb50e2b7052533', name: "meta-navigation" }), h("slot", { key: '782d10f094831da10cd9e9695944eee9c8003a05', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '5c5a277e3a627f5a731e1342c6604b6e064f3b52', name: "post-language-switch" }), h("div", { key: 'b07c9f1994fd99b170192ed4f4092afb92a1dd3e', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '1bbb5a704cf1841e4845ff9921cd6662ee2d7387', name: "post-togglebutton" })))), h("div", { key: 'da8ecfd78835ab7431408558ee938d5054349955', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '23c35a54fdf177a9b58054154e09f406f27fe049', name: "title" }), h("div", { key: 'de4dfdec5bd43a22587aa8e93842c4e16c73f82b', class: "local-sub" }, h("slot", { key: '35b09a33f3c87e382afb809f0c2b8153dd909097', name: "local-controls" }), h("slot", { key: 'bdfa7a68815e8d259cd346ef890904b652a5a7f2' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "device": ["lockBody"],
+        "mobileMenuExtended": ["lockBody"]
+    }; }
+};
+PostHeader.style = PostHeaderStyle0;
+
+const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}: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@${version}/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(this, 'animation', ANIMATION_KEYS);
+    }
+    validateBase() {
+        checkEmptyOrType(this, 'base', 'string');
+    }
+    validateFlipH() {
+        checkEmptyOrType(this, 'flipH', 'boolean');
+    }
+    validateFlipV() {
+        checkEmptyOrType(this, 'flipV', 'boolean');
+    }
+    validateName() {
+        checkNonEmpty(this, 'name');
+        checkType(this, 'name', 'string');
+    }
+    validateRotate() {
+        checkEmptyOrType(this, 'rotate', 'number');
+    }
+    validateScale() {
+        checkEmptyOrType(this, 'scale', 'number');
+    }
+    // Construct the icon url from different possible sources
+    getUrl() {
+        let url;
+        const file = `${this.name}.svg`;
+        // the first definition object which defines a domain, will be used to set the domain of the file url
+        // the first definition object which defines a slug, will be used to set the slug of the file url
+        const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
+        if (IS_BROWSER) {
+            urlDefinitions.push(this.getUrlDefinition(document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
+                ?.getAttribute('data-post-icon-base'), 'relative'));
+            urlDefinitions.push(this.getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'));
+        }
+        // in case no definition defines a domain, a relative url is used to load the icon
+        const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin;
+        // in case no definition defines a slug either, the cdn url is used as a fallback
+        const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
+        if (origin && slug) {
+            url = `${origin}${slug}${file}`;
+        }
+        else if (!origin && slug) {
+            url = `${slug}${file}`;
+        }
+        else {
+            url = `${CDN_URL}${file}`;
+        }
+        return url;
+    }
+    getUrlDefinition(url, allow) {
+        return {
+            url: this.getUrlObject(url),
+            definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
+            definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
+        };
+    }
+    getUrlObject(url) {
+        if (url) {
+            url = url?.endsWith('/') ? url : `${url}/`;
+            return new URL(url, 'https://url.base');
+        }
+        else {
+            return null;
+        }
+    }
+    definesDomain(url) {
+        return url ? /^https?:\/\//.test(url) : false;
+    }
+    definesSlug(url) {
+        return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
+    }
+    getStyles() {
+        const url = this.getUrl();
+        return Object.entries({
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
+            '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: 'b3c3efcc03f423a248e231b4b4c5d79c93ae25a6', "data-version": version }, h("span", { key: 'd73d4df11fcccb96d5346f3f8c3e18602bb8d484', style: this.getStyles() })));
+    }
+    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 = "@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)}}post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option a{color:var(--post-scheme-color-surface-default-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:2px;text-transform:uppercase}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}";
+const PostLanguageOptionStyle0 = postLanguageOptionCss;
+
+const PostLanguageOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postChange = createEvent(this, "postChange", 7);
+        this.postLanguageOptionInitiallyActive = createEvent(this, "postLanguageOptionInitiallyActive", 7);
+        this.code = undefined;
+        this.active = undefined;
+        this.variant = undefined;
+        this.name = undefined;
+        this.url = undefined;
+    }
+    validateCode() {
+        checkType(this, 'code', 'string');
+    }
+    validateActiveProp() {
+        checkEmptyOrType(this, 'active', 'boolean');
+    }
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateUrl() {
+        checkEmptyOrType(this, 'url', 'string');
+    }
+    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.');
+        }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
+    }
+    /**
+     * 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();
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.emitChange();
+            }
+        };
+        return (h(Host, { key: '3a6b9a8f63c90f431a13c1df529a2e4716ede5d8', "data-version": version }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "code": ["validateCode"],
+        "active": ["validateActiveProp"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }; }
+};
+PostLanguageOption.style = PostLanguageOptionStyle0;
+
+const SWITCH_VARIANTS = ['list', 'menu'];
+
+const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.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:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}";
+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;
+    }
+    get languageOptions() {
+        return Array.from(this.host.querySelectorAll('post-language-option'));
+    }
+    validateCaption() {
+        checkType(this, 'caption', 'string');
+    }
+    validateDescription() {
+        checkType(this, 'description', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Initially set variants and active language
+        // Handles cases where the language-switch is rendered after the language-options have been rendered
+        this.updateChildrenVariant();
+    }
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     */
+    handlePostChange(event) {
+        eventGuard(this.host, event, { targetLocalName: 'post-language-option', delegatorSelector: 'post-language-switch' }, () => {
+            this.activeLang = event.detail;
+            // Update the active state in the children post-language-option components
+            this.languageOptions.forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', '');
+                }
+                else {
+                    lang.removeAttribute('active');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'menu') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.hide();
+            }
+        });
+    }
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event) {
+        this.activeLang = event.detail;
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.languageOptions.forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    renderList() {
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, 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.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, 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 = "@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)}}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 || nanoid(6)}`;
+    }
+    componentDidLoad() {
+        this.checkTitle();
+    }
+    checkTitle() {
+        if (!this.titleEl.textContent.trim()) {
+            console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b003aa61735359b6a1d95aad8d29c609d5bb3c8b', "data-version": version }, h("div", { key: '2f69a2c72dd357767735e10d16f1b7586da6d5a3', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3982783d438519673a676323339a013d3edb84db' })), h("div", { key: 'b8a91c4430774f019cc46aa19393e2a1566204a5', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '378a51785c4d52df8ae422657a16e8295b405149', 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: 'c826293ea2a7446bea2f5b223934b444655198a0', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: 'b997f79da2fbc87fbc6a388c118a03c008ad2c23' })));
+    }
+    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}.logo-link{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}.logo-link: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){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link: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){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}";
+const PostLogoStyle0 = postLogoCss;
+
+const PostLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.url = undefined;
+    }
+    validateUrl() {
+        checkEmptyOrUrl(this, 'url');
+    }
+    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: '7dee19302c0c560b29f09b1675135f10d41fc44a', "data-version": version }, h(LogoTag, { key: '1d851ca305d1bfc24666b416ad5f210b96d39811', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'cd75bd4040bc2f0d62e5cec2afc9529fa7c43c49', class: "description" }, h("slot", { key: 'caf63c4f823873181fa52cfb0cf38217b6a45823', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'd41c14973b829eb35764c9e562fe449e65f410b4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '90c52e528bf4fc8e075e6517c18a59686ffd39f6', id: "Logo" }, h("rect", { key: '50633d1110596123232f07272406ebd0a32ffce8', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '7a617412c094669a66914edf769fba9ee9448b83', 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: '74213b21fad18ba6a1dbb07e0b0b7dcf4a89b855', 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:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a: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 post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";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:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height);gap:4px;font-size:16px;z-index:4}post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}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]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{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)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}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]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}";
+const PostMainnavigationStyle0 = postMainnavigationCss;
+
+const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
+const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
+const PostMainnavigation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.scrollRight = this.scrollRight.bind(this);
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.handleMutations = this.handleMutations.bind(this);
+        this.checkScrollability = this.checkScrollability.bind(this);
+        this.resizeObserver = new ResizeObserver(this.checkScrollability);
+        this.mutationObserver = new MutationObserver(this.handleMutations);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.fixLayoutShift();
+            this.checkScrollability();
+        });
+        // Observe the navbar for size changes
+        this.resizeObserver.observe(this.navbar);
+        // Observe the navabar for mutation changes
+        this.mutationObserver.observe(this.navbar, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        // Ensure the scroll buttons are correctly displayed or hidden whenever the navbar is scrolled
+        this.navbar.addEventListener('scrollend', this.checkScrollability);
+    }
+    /**
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+        this.navbar.removeEventListener('scrollend', this.checkScrollability);
+    }
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    async handleMutations(mutations) {
+        const addedNodes = mutations.flatMap((mutation) => {
+            return Array.from(mutation.addedNodes);
+        });
+        // Wait for all elements to be hydrated
+        await Promise.all(addedNodes.map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
+        this.fixLayoutShift();
+        this.checkScrollability();
+    }
+    get navigationItems() {
+        return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
+    }
+    /**
+     * Hack to fix the layout shift due to bold text on active elements
+     */
+    fixLayoutShift() {
+        this.navigationItems
+            .filter(item => !item.matches(':has(.nav-el-active)'))
+            .forEach(item => {
+            item.innerHTML = `
+          <span class="nav-el-active">${item.innerHTML}</span>
+          <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
+        `;
+        });
+    }
+    handleBackButtonClick() {
+        const header = this.navbar.closest('post-header');
+        if (header)
+            header.toggleMobileMenu();
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.navbar;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = Math.floor(scrollLeft) > 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = Math.ceil(clientWidth + scrollLeft) < scrollWidth; // Scrolling right is possible if not at the end
+        }
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(e, direction) {
+        if (!this.canScroll || e.button !== 0)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.temporarilyDisableNavbar();
+        // Set up the correct scroll function
+        const scroll = direction === 'right' ? this.scrollRight : this.scrollLeft;
+        scroll();
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            scroll();
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    scrollRight() {
+        const scrollRightLeftEdge = document
+            .querySelector('.scroll-right')
+            .getBoundingClientRect().left;
+        for (const navigationItem of this.navigationItems) {
+            const { right, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = right - 0.25 * width < scrollRightLeftEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: right - scrollRightLeftEdge });
+                return;
+            }
+        }
+    }
+    scrollLeft() {
+        const scrollLeftRightEdge = document
+            .querySelector('.scroll-left')
+            .getBoundingClientRect().right;
+        for (const navigationItem of this.navigationItems.reverse()) {
+            const { left, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = left + 0.25 * width > scrollLeftRightEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: left - scrollLeftRightEdge });
+                return;
+            }
+        }
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    temporarilyDisableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.setAttribute('inert', '');
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.removeAttribute('inert');
+        }, NAVBAR_DISABLE_DURATION);
+    }
+    render() {
+        return (h(Host, { key: '6cd850555585d87eb25e3f6892b8010f5e4d23d6', slot: "post-mainnavigation", version: version }, h("div", { key: '3411008120d072920f4de0b71c9dc014748f1390', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '2e3747380cb546bd6da77e5ffba2403586205a55', name: "back-button" })), h("div", { key: 'e9eedd836b3f679ba2861109db2d0811c1142677', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '628511a2c1812a08828e1aa2b51f26ad01a5a2cf', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '1b660d65e1984e8701a98a369046f391fd177338', ref: el => (this.navbar = el) }, h("slot", { key: '0eb35366ac0bd58509afd6a12f68c2b09396a497' })), h("div", { key: '11145ad6602e2df78d3c3f4643cc6e4e960775aa', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '26e795cd00221dbfb1a7632453d0d48993584b0b', "aria-hidden": "true", name: "chevronright" }))));
+    }
+};
+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%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:4;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.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.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.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;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
+const PostMegadropdownStyle0 = postMegadropdownCss;
+
+const PostMegadropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
+        this.handleClickOutside = (event) => {
+            if (this.device !== 'desktop')
+                return;
+            const target = event.target;
+            if (this.host.contains(target)) {
+                return;
+            }
+            if (target instanceof HTMLElement) {
+                const trigger = target.closest('post-megadropdown-trigger');
+                if (trigger) {
+                    const targetDropdownId = trigger.getAttribute('for');
+                    if (targetDropdownId !== this.host.id) {
+                        return;
+                    }
+                }
+            }
+            this.hide(false);
+        };
+        this.device = breakpoint.get('name');
+        this.isVisible = false;
+        this.animationClass = null;
+    }
+    breakpointChange(e) {
+        this.device = e.detail;
+        if (this.device === 'desktop' && this.isVisible) {
+            this.animationClass = null;
+        }
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
+    }
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    /**
+     * Displays the dropdown.
+     */
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-in';
+        }
+        this.isVisible = true;
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
+        if (this.firstFocusableEl &&
+            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
+            this.firstFocusableEl.focus();
+        }
+        this.addListeners();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide(focusParent = true, forceClose = false) {
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        if (forceClose) {
+            this.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-out';
+        }
+    }
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    async focusFirst() {
+        this.firstFocusableEl?.focus();
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
+        this.removeListeners();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            PostMegadropdown.activeDropdown = null;
+            this.removeListeners();
+        }
+    }
+    addListeners() {
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeListeners() {
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    handleTabOutside(e) {
+        if (e.key === 'Tab' && this.device === 'desktop') {
+            if (!this.host.contains(e.target)) {
+                this.hide(false);
+            }
+        }
+    }
+    render() {
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '7426a12ebaeac0ce3b8402c3da4d5393daca059b', version: version }, h("div", { key: 'd47b60c334577f5662f19912f12ce941b4b52d94', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '2798f217b2b3e43c3c63072884bbbbe7d99ed62f', class: "megadropdown" }, h("slot", { key: 'b61f82bbc7f87f65d9b6957e7a4e5d6790b6dd00', name: "megadropdown-title" }), h("div", { key: 'f4996a819511cb59185faeedbdcec4be6e6f8a24', class: "megadropdown-content" }, h("slot", { key: '54f695c3b3d30a6a1aae7f7dc6f65f4d4d27de68' })), h("div", { key: 'b1334295c7d758e20c85b6c6c8cefc31dcf09e20', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'c4db69fa3207ce4cb47b725e37b1993820a2a64c', name: "back-button" })), h("div", { key: '68b22a3222382586fc749dec63e36edae84360c1', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '8023b75c931a95dbd9552c1a713790e77e40f526', name: "close-button" }))))));
+    }
+    get host() { return getElement(this); }
+};
+/** Tracks the currently active dropdown instance. */
+PostMegadropdown.activeDropdown = null;
+PostMegadropdown.style = PostMegadropdownStyle0;
+
+const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
+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;
+        /**
+         * Tracks whether this trigger's dropdown was expanded before a state change.
+         * Used to determine if this trigger should handle focus when its dropdown closes.
+         */
+        this.wasExpanded = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleToggle();
+                if (this.megadropdown && !this.ariaExpanded) {
+                    setTimeout(() => this.megadropdown.focusFirst(), 100);
+                }
+            }
+        };
+        this.handleToggleMegadropdown = (event) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
+                if (event.target.id === this.for) {
+                    this.ariaExpanded = event.detail.isVisible;
+                    // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+                    if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
+                        setTimeout(() => {
+                            this.slottedButton?.focus();
+                        }, 100);
+                    }
+                    this.wasExpanded = this.ariaExpanded;
+                    if (this.slottedButton) {
+                        this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                    }
+                }
+            });
+        };
+        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() {
+        checkType(this, 'for', 'string');
+    }
+    get megadropdown() {
+        const ref = document.getElementById(this.for);
+        return ref && ref.localName === 'post-megadropdown'
+            ? ref
+            : null;
+    }
+    handleToggle() {
+        if (this.megadropdown) {
+            this.megadropdown.toggle();
+        }
+        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', this.handleToggleMegadropdown);
+        this.slottedButton = this.host.querySelector('button');
+        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-megadropdown-trigger');
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+    }
+    render() {
+        return (h(Host, { key: '86b85efede8d9b19f3f0560f500f33f5e172177f', "data-version": version, "tab-index": "-1" }, h("button", { key: '0f810e4c38bc4abf23ac60ab27b36d408e7ced0d' }, h("slot", { key: '2a522ac7e15ef8ac077b73cdebf629b89ea173c6' }))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
+};
+PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;
+
+const postMenuCss = "@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)}}:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}";
+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.handlePostToggle = (event) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
+                this.isVisible = event.detail;
+                this.toggleMenu.emit(this.isVisible);
+                requestAnimationFrame(() => {
+                    if (this.isVisible) {
+                        this.lastFocusedElement = this.root?.activeElement;
+                        const menuItems = this.getSlottedItems();
+                        if (menuItems.length > 0) {
+                            menuItems[0].focus();
+                        }
+                    }
+                    else if (this.lastFocusedElement) {
+                        this.lastFocusedElement.focus();
+                    }
+                });
+            });
+        };
+        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);
+        this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
+    }
+    componentDidLoad() {
+        if (this.popoverRef) {
+            this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
+        }
+    }
+    /**
+     * Toggles the menu visibility based on its current state.
+     */
+    async toggle(target) {
+        if (this.popoverRef) {
+            await this.popoverRef.toggle(target);
+        }
+        else {
+            console.error('toggle: popoverRef is null or undefined');
+        }
+    }
+    /**
+     * 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);
+        }
+        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();
+        }
+        else {
+            console.error('hide: popoverRef is null or undefined');
+        }
+    }
+    controlKeyDownHandler(e) {
+        const menuItems = this.getSlottedItems();
+        if (!menuItems.length) {
+            return;
+        }
+        let currentIndex = menuItems.findIndex(el => {
+            // Check if the item is currently focused within its rendered scope (document or shadow root)
+            return el === getRoot(el).activeElement;
+        });
+        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:
+                e.preventDefault();
+                currentIndex = menuItems.length - 1;
+                break;
+            case this.KEYCODES.SPACE:
+                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() : [];
+        return (slottedElements
+            // If the element is a slot, get the assigned elements
+            .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
+            // For each menu item, get any focusable children (e.g., buttons, links)
+            .flatMap(el => Array.from(getFocusableChildren(el))));
+    }
+    render() {
+        return (h(Host, { key: 'dd3bbcbf568e529588bcf5c90b8c2d4d07d454fb', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '17a24933ef087cc8699b00f7165fff33756da9a8', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9ff3d687146c88cf153ea745abcaf7a3267be620', class: "popover-container", part: "popover-container" }, h("slot", { key: 'aff50800748410f6e2583690620c12e47b4c7a22' })))));
+    }
+    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() {
+        checkType(this, 'for', 'string');
+    }
+    get menu() {
+        const ref = this.root.getElementById(this.for);
+        return ref && ref.localName === 'post-menu' ? ref : null;
+    }
+    handleToggle() {
+        if (this.menu) {
+            this.menu.toggle(this.host);
+        }
+        else {
+            console.warn(`No post-menu found with ID: ${this.for}`);
+        }
+    }
+    connectedCallback() {
+        this.root = getRoot(this.host);
+    }
+    componentDidLoad() {
+        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');
+            // Listen to the `toggleMenu` event emitted by the `post-menu` component
+            if (this.menu && this.slottedButton) {
+                this.menu.addEventListener('toggleMenu', (event) => {
+                    this.ariaExpanded = event.detail;
+                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                });
+            }
+            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: '1b9589febc2976d17eed3363d91b4321473b7b5e', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'bec55f97274084ab4721dc085dc9e1c3a216c0a3' })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
+};
+PostMenuTrigger.style = PostMenuTriggerStyle0;
+
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'flip',
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+
+      // One or more sides is overflowing.
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+        if (nextPlacement) {
+          var _overflowsData$;
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
+          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+        }
+
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
+              }
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some(side => overflow[side] >= 0);
+}
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              altBoundary: true
+            });
+            const offsets = getSideOffsets(overflow, rects.floating);
+            return {
+              data: {
+                escapedOffsets: offsets,
+                escaped: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    }
+  };
+};
+
+function getBoundingRect(rects) {
+  const minX = min(...rects.map(rect => rect.left));
+  const minY = min(...rects.map(rect => rect.top));
+  const maxX = max(...rects.map(rect => rect.right));
+  const maxY = max(...rects.map(rect => rect.bottom));
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function getRectsByLine(rects) {
+  const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
+  const groups = [];
+  let prevRect = null;
+  for (let i = 0; i < sortedRects.length; i++) {
+    const rect = sortedRects[i];
+    if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
+      groups.push([rect]);
+    } else {
+      groups[groups.length - 1].push(rect);
+    }
+    prevRect = rect;
+  }
+  return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
+}
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+const inline$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'inline',
+    options,
+    async fn(state) {
+      const {
+        placement,
+        elements,
+        rects,
+        platform,
+        strategy
+      } = state;
+      // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
+      // ClientRect's bounds, despite the event listener being triggered. A
+      // padding of 2 seems to handle this issue.
+      const {
+        padding = 2,
+        x,
+        y
+      } = evaluate(options, state);
+      const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
+      const clientRects = getRectsByLine(nativeClientRects);
+      const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
+      const paddingObject = getPaddingObject(padding);
+      function getBoundingClientRect() {
+        // There are two rects and they are disjoined.
+        if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
+          // Find the first rect in which the point is fully inside.
+          return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
+        }
+
+        // There are 2 or more connected rects.
+        if (clientRects.length >= 2) {
+          if (getSideAxis(placement) === 'y') {
+            const firstRect = clientRects[0];
+            const lastRect = clientRects[clientRects.length - 1];
+            const isTop = getSide(placement) === 'top';
+            const top = firstRect.top;
+            const bottom = lastRect.bottom;
+            const left = isTop ? firstRect.left : lastRect.left;
+            const right = isTop ? firstRect.right : lastRect.right;
+            const width = right - left;
+            const height = bottom - top;
+            return {
+              top,
+              bottom,
+              left,
+              right,
+              width,
+              height,
+              x: left,
+              y: top
+            };
+          }
+          const isLeftSide = getSide(placement) === 'left';
+          const maxRight = max(...clientRects.map(rect => rect.right));
+          const minLeft = min(...clientRects.map(rect => rect.left));
+          const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
+          const top = measureRects[0].top;
+          const bottom = measureRects[measureRects.length - 1].bottom;
+          const left = minLeft;
+          const right = maxRight;
+          const width = right - left;
+          const height = bottom - top;
+          return {
+            top,
+            bottom,
+            left,
+            right,
+            width,
+            height,
+            x: left,
+            y: top
+          };
+        }
+        return fallback;
+      }
+      const resetRects = await platform.getElementRects({
+        reference: {
+          getBoundingClientRect
+        },
+        floating: elements.floating,
+        strategy
+      });
+      if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
+        return {
+          reset: {
+            rects: resetRects
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'shift',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
+      }
+      const limitedCoords = limiter.fn({
+        ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
+        }
+      };
+    }
+  };
+};
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+const limitShift$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    options,
+    fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        middlewareData
+      } = state;
+      const {
+        offset = 0,
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const crossAxis = getSideAxis(placement);
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      const rawOffset = evaluate(offset, state);
+      const computedOffset = typeof rawOffset === 'number' ? {
+        mainAxis: rawOffset,
+        crossAxis: 0
+      } : {
+        mainAxis: 0,
+        crossAxis: 0,
+        ...rawOffset
+      };
+      if (checkMainAxis) {
+        const len = mainAxis === 'y' ? 'height' : 'width';
+        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
+        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
+        if (mainAxisCoord < limitMin) {
+          mainAxisCoord = limitMin;
+        } else if (mainAxisCoord > limitMax) {
+          mainAxisCoord = limitMax;
+        }
+      }
+      if (checkCrossAxis) {
+        var _middlewareData$offse, _middlewareData$offse2;
+        const len = mainAxis === 'y' ? 'width' : 'height';
+        const isOriginSide = ['top', 'left'].includes(getSide(placement));
+        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
+        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+        if (crossAxisCoord < limitMin) {
+          crossAxisCoord = limitMin;
+        } else if (crossAxisCoord > limitMax) {
+          crossAxisCoord = limitMax;
+        }
+      }
+      return {
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      };
+    }
+  };
+};
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isTopLayer(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(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;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(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;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+
+function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
+  if (ignoreScrollbarX === void 0) {
+    ignoreScrollbarX = false;
+  }
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
+  // RTL <body> scrollbar.
+  getWindowScrollBarX(documentElement, htmlRect));
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === 'fixed';
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  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') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(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 currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+  }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+autoPlacement;
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = size$1;
+
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+hide;
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = arrow$1;
+
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+const inline = inline$1;
+
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+const limitShift = limitShift$1;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+// src/events.ts
+var ToggleEvent = class extends Event {
+  oldState;
+  newState;
+  constructor(type, { oldState = "", newState = "", ...init } = {}) {
+    super(type, init);
+    this.oldState = String(oldState || "");
+    this.newState = String(newState || "");
+  }
+};
+var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
+function queuePopoverToggleEventTask(element, oldState, newState) {
+  popoverToggleTaskQueue.set(
+    element,
+    setTimeout(() => {
+      if (!popoverToggleTaskQueue.has(element)) return;
+      element.dispatchEvent(
+        new ToggleEvent("toggle", {
+          cancelable: false,
+          oldState,
+          newState
+        })
+      );
+    }, 0)
+  );
+}
+
+// src/popover-helpers.ts
+var ShadowRoot$1 = globalThis.ShadowRoot || function() {
+};
+var HTMLDialogElement = globalThis.HTMLDialogElement || function() {
+};
+var topLayerElements = /* @__PURE__ */ new WeakMap();
+var autoPopoverList = /* @__PURE__ */ new WeakMap();
+var visibilityState = /* @__PURE__ */ new WeakMap();
+function getPopoverVisibilityState(popover) {
+  return visibilityState.get(popover) || "hidden";
+}
+var popoverInvoker = /* @__PURE__ */ new WeakMap();
+function popoverTargetAttributeActivationBehavior(element) {
+  const popover = element.popoverTargetElement;
+  if (!(popover instanceof HTMLElement)) {
+    return;
+  }
+  const visibility = getPopoverVisibilityState(popover);
+  if (element.popoverTargetAction === "show" && visibility === "showing") {
+    return;
+  }
+  if (element.popoverTargetAction === "hide" && visibility === "hidden") return;
+  if (visibility === "showing") {
+    hidePopover(popover, true, true);
+  } else if (checkPopoverValidity(popover, false)) {
+    popoverInvoker.set(popover, element);
+    showPopover(popover);
+  }
+}
+function checkPopoverValidity(element, expectedToBeShowing) {
+  if (element.popover !== "auto" && element.popover !== "manual") {
+    return false;
+  }
+  if (!element.isConnected) return false;
+  if (expectedToBeShowing && getPopoverVisibilityState(element) !== "showing") {
+    return false;
+  }
+  if (!expectedToBeShowing && getPopoverVisibilityState(element) !== "hidden") {
+    return false;
+  }
+  if (element instanceof HTMLDialogElement && element.hasAttribute("open")) {
+    return false;
+  }
+  if (document.fullscreenElement === element) return false;
+  return true;
+}
+function getStackPosition(popover) {
+  if (!popover) return 0;
+  return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(
+    popover
+  ) + 1;
+}
+function topMostClickedPopover(target) {
+  const clickedPopover = nearestInclusiveOpenPopover(target);
+  const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
+  if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
+    return clickedPopover;
+  }
+  return invokerPopover;
+}
+function topMostAutoPopover(document2) {
+  const documentPopovers = autoPopoverList.get(document2);
+  for (const popover of documentPopovers || []) {
+    if (!popover.isConnected) {
+      documentPopovers.delete(popover);
+    } else {
+      return popover;
+    }
+  }
+  return null;
+}
+function getRootNode(node) {
+  if (typeof node.getRootNode === "function") {
+    return node.getRootNode();
+  }
+  if (node.parentNode) return getRootNode(node.parentNode);
+  return node;
+}
+function nearestInclusiveOpenPopover(node) {
+  while (node) {
+    if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
+      return node;
+    }
+    node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode(node);
+    if (node instanceof ShadowRoot$1) node = node.host;
+    if (node instanceof Document) return;
+  }
+}
+function nearestInclusiveTargetPopoverForInvoker(node) {
+  while (node) {
+    const nodePopover = node.popoverTargetElement;
+    if (nodePopover instanceof HTMLElement) return nodePopover;
+    node = node.parentElement || getRootNode(node);
+    if (node instanceof ShadowRoot$1) node = node.host;
+    if (node instanceof Document) return;
+  }
+}
+function topMostPopoverAncestor(newPopover) {
+  const popoverPositions = /* @__PURE__ */ new Map();
+  let i = 0;
+  for (const popover of autoPopoverList.get(newPopover.ownerDocument) || []) {
+    popoverPositions.set(popover, i);
+    i += 1;
+  }
+  popoverPositions.set(newPopover, i);
+  i += 1;
+  let topMostPopoverAncestor2 = null;
+  function checkAncestor(candidate) {
+    const candidateAncestor = nearestInclusiveOpenPopover(candidate);
+    if (candidateAncestor === null) return null;
+    const candidatePosition = popoverPositions.get(candidateAncestor);
+    if (topMostPopoverAncestor2 === null || popoverPositions.get(topMostPopoverAncestor2) < candidatePosition) {
+      topMostPopoverAncestor2 = candidateAncestor;
+    }
+  }
+  checkAncestor(newPopover.parentElement || getRootNode(newPopover));
+  return topMostPopoverAncestor2;
+}
+function isFocusable(focusTarget) {
+  if (focusTarget.hidden || focusTarget instanceof ShadowRoot$1) return false;
+  if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
+    if (focusTarget.disabled) return false;
+  }
+  if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") {
+    return false;
+  }
+  if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") {
+    return false;
+  }
+  return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
+}
+function focusDelegate(focusTarget) {
+  if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) {
+    return null;
+  }
+  let whereToLook = focusTarget;
+  if (whereToLook.shadowRoot) {
+    whereToLook = whereToLook.shadowRoot;
+  }
+  let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
+  if (autoFocusDelegate) {
+    return autoFocusDelegate;
+  } else {
+    const slots = whereToLook.querySelectorAll("slot");
+    for (const slot of slots) {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      for (const el of assignedElements) {
+        if (el.hasAttribute("autofocus")) {
+          return el;
+        } else {
+          autoFocusDelegate = el.querySelector("[autofocus]");
+          if (autoFocusDelegate) {
+            return autoFocusDelegate;
+          }
+        }
+      }
+    }
+  }
+  const walker = focusTarget.ownerDocument.createTreeWalker(
+    whereToLook,
+    NodeFilter.SHOW_ELEMENT
+  );
+  let descendant = walker.currentNode;
+  while (descendant) {
+    if (isFocusable(descendant)) {
+      return descendant;
+    }
+    descendant = walker.nextNode();
+  }
+}
+function popoverFocusingSteps(subject) {
+  focusDelegate(subject)?.focus();
+}
+var previouslyFocusedElements = /* @__PURE__ */ new WeakMap();
+function showPopover(element) {
+  if (!checkPopoverValidity(element, false)) {
+    return;
+  }
+  const document2 = element.ownerDocument;
+  if (!element.dispatchEvent(
+    new ToggleEvent("beforetoggle", {
+      cancelable: true,
+      oldState: "closed",
+      newState: "open"
+    })
+  )) {
+    return;
+  }
+  if (!checkPopoverValidity(element, false)) {
+    return;
+  }
+  let shouldRestoreFocus = false;
+  if (element.popover === "auto") {
+    const originalType = element.getAttribute("popover");
+    const ancestor = topMostPopoverAncestor(element) || document2;
+    hideAllPopoversUntil(ancestor, false, true);
+    if (originalType !== element.getAttribute("popover") || !checkPopoverValidity(element, false)) {
+      return;
+    }
+  }
+  if (!topMostAutoPopover(document2)) {
+    shouldRestoreFocus = true;
+  }
+  previouslyFocusedElements.delete(element);
+  const originallyFocusedElement = document2.activeElement;
+  element.classList.add(":popover-open");
+  visibilityState.set(element, "showing");
+  if (!topLayerElements.has(document2)) {
+    topLayerElements.set(document2, /* @__PURE__ */ new Set());
+  }
+  topLayerElements.get(document2).add(element);
+  popoverFocusingSteps(element);
+  if (element.popover === "auto") {
+    if (!autoPopoverList.has(document2)) {
+      autoPopoverList.set(document2, /* @__PURE__ */ new Set());
+    }
+    autoPopoverList.get(document2).add(element);
+    setInvokerAriaExpanded(popoverInvoker.get(element), true);
+  }
+  if (shouldRestoreFocus && originallyFocusedElement && element.popover === "auto") {
+    previouslyFocusedElements.set(element, originallyFocusedElement);
+  }
+  queuePopoverToggleEventTask(element, "closed", "open");
+}
+function hidePopover(element, focusPreviousElement = false, fireEvents = false) {
+  if (!checkPopoverValidity(element, true)) {
+    return;
+  }
+  const document2 = element.ownerDocument;
+  if (element.popover === "auto") {
+    hideAllPopoversUntil(element, focusPreviousElement, fireEvents);
+    if (!checkPopoverValidity(element, true)) {
+      return;
+    }
+  }
+  setInvokerAriaExpanded(popoverInvoker.get(element), false);
+  popoverInvoker.delete(element);
+  if (fireEvents) {
+    element.dispatchEvent(
+      new ToggleEvent("beforetoggle", {
+        oldState: "open",
+        newState: "closed"
+      })
+    );
+    if (!checkPopoverValidity(element, true)) {
+      return;
+    }
+  }
+  topLayerElements.get(document2)?.delete(element);
+  autoPopoverList.get(document2)?.delete(element);
+  element.classList.remove(":popover-open");
+  visibilityState.set(element, "hidden");
+  if (fireEvents) {
+    queuePopoverToggleEventTask(element, "open", "closed");
+  }
+  const previouslyFocusedElement = previouslyFocusedElements.get(element);
+  if (previouslyFocusedElement) {
+    previouslyFocusedElements.delete(element);
+    if (focusPreviousElement) {
+      previouslyFocusedElement.focus();
+    }
+  }
+}
+function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
+  let popover = topMostAutoPopover(document2);
+  while (popover) {
+    hidePopover(popover, focusPreviousElement, fireEvents);
+    popover = topMostAutoPopover(document2);
+  }
+}
+function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
+  const document2 = endpoint.ownerDocument || endpoint;
+  if (endpoint instanceof Document) {
+    return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
+  }
+  let lastToHide = null;
+  let foundEndpoint = false;
+  for (const popover of autoPopoverList.get(document2) || []) {
+    if (popover === endpoint) {
+      foundEndpoint = true;
+    } else if (foundEndpoint) {
+      lastToHide = popover;
+      break;
+    }
+  }
+  if (!foundEndpoint) {
+    return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
+  }
+  while (lastToHide && getPopoverVisibilityState(lastToHide) === "showing" && autoPopoverList.get(document2)?.size) {
+    hidePopover(lastToHide, focusPreviousElement, fireEvents);
+  }
+}
+var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
+function lightDismissOpenPopovers(event) {
+  if (!event.isTrusted) return;
+  const target = event.composedPath()[0];
+  if (!target) return;
+  const document2 = target.ownerDocument;
+  const topMostPopover = topMostAutoPopover(document2);
+  if (!topMostPopover) return;
+  const ancestor = topMostClickedPopover(target);
+  if (ancestor && event.type === "pointerdown") {
+    popoverPointerDownTargets.set(document2, ancestor);
+  } else if (event.type === "pointerup") {
+    const sameTarget = popoverPointerDownTargets.get(document2) === ancestor;
+    popoverPointerDownTargets.delete(document2);
+    if (sameTarget) {
+      hideAllPopoversUntil(ancestor || document2, false, true);
+    }
+  }
+}
+var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
+function setInvokerAriaExpanded(el, force = false) {
+  if (!el) return;
+  if (!initialAriaExpandedValue.has(el)) {
+    initialAriaExpandedValue.set(el, el.getAttribute("aria-expanded"));
+  }
+  const popover = el.popoverTargetElement;
+  if (popover instanceof HTMLElement && popover.popover === "auto") {
+    el.setAttribute("aria-expanded", String(force));
+  } else {
+    const initialValue = initialAriaExpandedValue.get(el);
+    if (!initialValue) {
+      el.removeAttribute("aria-expanded");
+    } else {
+      el.setAttribute("aria-expanded", initialValue);
+    }
+  }
+}
+
+// src/popover.ts
+var ShadowRoot2 = globalThis.ShadowRoot || function() {
+};
+function isSupported() {
+  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
+}
+function patchSelectorFn(object, name, mapper) {
+  const original = object[name];
+  Object.defineProperty(object, name, {
+    value(selector) {
+      return original.call(this, mapper(selector));
+    }
+  });
+}
+var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
+function hasLayerSupport() {
+  return typeof globalThis.CSSLayerBlockRule === "function";
+}
+function getStyles() {
+  const useLayer = hasLayerSupport();
+  return `
+${useLayer ? "@layer popover-polyfill {" : ""}
+  :where([popover]) {
+    position: fixed;
+    z-index: 2147483647;
+    inset: 0;
+    padding: 0.25em;
+    width: fit-content;
+    height: fit-content;
+    border-width: initial;
+    border-color: initial;
+    border-image: initial;
+    border-style: solid;
+    background-color: canvas;
+    color: canvastext;
+    overflow: auto;
+    margin: auto;
+  }
+
+  :where([popover]:not(.\\:popover-open)) {
+    display: none;
+  }
+
+  :where(dialog[popover].\\:popover-open) {
+    display: block;
+  }
+
+  :where(dialog[popover][open]) {
+    display: revert;
+  }
+
+  :where([anchor].\\:popover-open) {
+    inset: auto;
+  }
+
+  :where([anchor]:popover-open) {
+    inset: auto;
+  }
+
+  @supports not (background-color: canvas) {
+    :where([popover]) {
+      background-color: white;
+      color: black;
+    }
+  }
+
+  @supports (width: -moz-fit-content) {
+    :where([popover]) {
+      width: -moz-fit-content;
+      height: -moz-fit-content;
+    }
+  }
+
+  @supports not (inset: 0) {
+    :where([popover]) {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+${useLayer ? "}" : ""}
+`;
+}
+var popoverStyleSheet = null;
+function injectStyles(root) {
+  const styles = getStyles();
+  if (popoverStyleSheet === null) {
+    try {
+      popoverStyleSheet = new CSSStyleSheet();
+      popoverStyleSheet.replaceSync(styles);
+    } catch {
+      popoverStyleSheet = false;
+    }
+  }
+  if (popoverStyleSheet === false) {
+    const sheet = document.createElement("style");
+    sheet.textContent = styles;
+    if (root instanceof Document) {
+      root.head.prepend(sheet);
+    } else {
+      root.prepend(sheet);
+    }
+  } else {
+    root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
+  }
+}
+function apply() {
+  if (typeof window === "undefined") return;
+  window.ToggleEvent = window.ToggleEvent || ToggleEvent;
+  function rewriteSelector(selector) {
+    if (selector?.includes(":popover-open")) {
+      selector = selector.replace(
+        nonEscapedPopoverSelector,
+        "$1.\\:popover-open"
+      );
+    }
+    return selector;
+  }
+  patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "matches", rewriteSelector);
+  patchSelectorFn(Element.prototype, "closest", rewriteSelector);
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    "querySelectorAll",
+    rewriteSelector
+  );
+  Object.defineProperties(HTMLElement.prototype, {
+    popover: {
+      enumerable: true,
+      configurable: true,
+      get() {
+        if (!this.hasAttribute("popover")) return null;
+        const value = (this.getAttribute("popover") || "").toLowerCase();
+        if (value === "" || value == "auto") return "auto";
+        return "manual";
+      },
+      set(value) {
+        if (value === null) {
+          this.removeAttribute("popover");
+        } else {
+          this.setAttribute("popover", value);
+        }
+      }
+    },
+    showPopover: {
+      enumerable: true,
+      configurable: true,
+      value() {
+        showPopover(this);
+      }
+    },
+    hidePopover: {
+      enumerable: true,
+      configurable: true,
+      value() {
+        hidePopover(this, true, true);
+      }
+    },
+    togglePopover: {
+      enumerable: true,
+      configurable: true,
+      value(force) {
+        if (visibilityState.get(this) === "showing" && force === void 0 || force === false) {
+          hidePopover(this, true, true);
+        } else if (force === void 0 || force === true) {
+          showPopover(this);
+        }
+      }
+    }
+  });
+  const originalAttachShadow = Element.prototype.attachShadow;
+  if (originalAttachShadow) {
+    Object.defineProperties(Element.prototype, {
+      attachShadow: {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value(options) {
+          const shadowRoot = originalAttachShadow.call(this, options);
+          injectStyles(shadowRoot);
+          return shadowRoot;
+        }
+      }
+    });
+  }
+  const originalAttachInternals = HTMLElement.prototype.attachInternals;
+  if (originalAttachInternals) {
+    Object.defineProperties(HTMLElement.prototype, {
+      attachInternals: {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value() {
+          const internals = originalAttachInternals.call(this);
+          if (internals.shadowRoot) {
+            injectStyles(internals.shadowRoot);
+          }
+          return internals;
+        }
+      }
+    });
+  }
+  const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
+  function applyPopoverInvokerElementMixin(ElementClass) {
+    Object.defineProperties(ElementClass.prototype, {
+      popoverTargetElement: {
+        enumerable: true,
+        configurable: true,
+        set(targetElement) {
+          if (targetElement === null) {
+            this.removeAttribute("popovertarget");
+            popoverTargetAssociatedElements.delete(this);
+          } else if (!(targetElement instanceof Element)) {
+            throw new TypeError(
+              `popoverTargetElement must be an element or null`
+            );
+          } else {
+            this.setAttribute("popovertarget", "");
+            popoverTargetAssociatedElements.set(this, targetElement);
+          }
+        },
+        get() {
+          if (this.localName !== "button" && this.localName !== "input") {
+            return null;
+          }
+          if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") {
+            return null;
+          }
+          if (this.disabled) {
+            return null;
+          }
+          if (this.form && this.type === "submit") {
+            return null;
+          }
+          const targetElement = popoverTargetAssociatedElements.get(this);
+          if (targetElement && targetElement.isConnected) {
+            return targetElement;
+          } else if (targetElement && !targetElement.isConnected) {
+            popoverTargetAssociatedElements.delete(this);
+            return null;
+          }
+          const root = getRootNode(this);
+          const idref = this.getAttribute("popovertarget");
+          if ((root instanceof Document || root instanceof ShadowRoot2) && idref) {
+            return root.getElementById(idref) || null;
+          }
+          return null;
+        }
+      },
+      popoverTargetAction: {
+        enumerable: true,
+        configurable: true,
+        get() {
+          const value = (this.getAttribute("popovertargetaction") || "").toLowerCase();
+          if (value === "show" || value === "hide") return value;
+          return "toggle";
+        },
+        set(value) {
+          this.setAttribute("popovertargetaction", value);
+        }
+      }
+    });
+  }
+  applyPopoverInvokerElementMixin(HTMLButtonElement);
+  applyPopoverInvokerElementMixin(HTMLInputElement);
+  const handleInvokerActivation = (event) => {
+    const composedPath = event.composedPath();
+    const target = composedPath[0];
+    if (!(target instanceof Element) || target?.shadowRoot) {
+      return;
+    }
+    const root = getRootNode(target);
+    if (!(root instanceof ShadowRoot2 || root instanceof Document)) {
+      return;
+    }
+    const invoker = composedPath.find(
+      (el) => el.matches?.("[popovertargetaction],[popovertarget]")
+    );
+    if (invoker) {
+      popoverTargetAttributeActivationBehavior(invoker);
+      event.preventDefault();
+      return;
+    }
+  };
+  const onKeydown = (event) => {
+    const key = event.key;
+    const target = event.target;
+    if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) {
+      hideAllPopoversUntil(target.ownerDocument, true, true);
+    }
+  };
+  const addEventListeners = (root) => {
+    root.addEventListener("click", handleInvokerActivation);
+    root.addEventListener("keydown", onKeydown);
+    root.addEventListener("pointerdown", lightDismissOpenPopovers);
+    root.addEventListener("pointerup", lightDismissOpenPopovers);
+  };
+  addEventListeners(document);
+  injectStyles(document);
+}
+
+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)}}@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:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-palette-fg);background-color:var(--post-current-palette-bg);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):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}: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 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.manualClose = 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`);
+    }
+    connectedCallback() {
+        if (IS_BROWSER && !isSupported()) {
+            apply();
+        }
+    }
+    componentDidLoad() {
+        this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
+    }
+    disconnectedCallback() {
+        if (typeof this.clearAutoUpdate === 'function') {
+            this.clearAutoUpdate();
+        }
+    }
+    /**
+     * 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) {
+            this.eventTarget = target;
+            this.calculatePosition();
+            this.host.showPopover();
+        }
+    }
+    /**
+     * Programmatically hide the popovercontainer
+     */
+    async hide() {
+        if (!this.toggleTimeoutId) {
+            this.eventTarget = null;
+            this.host.hidePopover();
+        }
+    }
+    /**
+     * 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) {
+        // Prevent instant double toggle
+        if (!this.toggleTimeoutId) {
+            this.eventTarget = target;
+            this.calculatePosition();
+            this.host.togglePopover(force);
+            this.toggleTimeoutId = null;
+        }
+        return this.host.matches(':where(:popover-open, .popover-open)');
+    }
+    /**
+     * 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
+     */
+    handleToggle(e) {
+        this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
+        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 popovercontainer positioning
+     */
+    startAutoupdates() {
+        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
+    }
+    /**
+     * Retrieves the dynamic height of the header
+     */
+    getHeaderHeight() {
+        const header = document.querySelector('post-header');
+        return header ? parseFloat(getComputedStyle(header).height) : 0;
+    }
+    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({
+                padding: this.getHeaderHeight(),
+            }),
+            inline(),
+            shift({
+                padding: gap,
+                limiter: limitShift({
+                    offset: 32,
+                }),
+            }),
+            size({
+                apply({ availableWidth, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth - gap * 2}px`,
+                    });
+                },
+            }),
+            offset(this.arrow ? gap + 4 : gap),
+        ];
+        if (this.arrow) {
+            middleware.push(arrow({ element: this.arrowRef, padding: gap }));
+        }
+        return computePosition(this.eventTarget, this.host, {
+            placement: this.placement || 'top',
+            strategy: 'fixed',
+            middleware,
+        });
+    }
+    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,
+                    },
+                };
+            }
+        };
+        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() {
+        const animationClass = this.animation ? `animate-${this.animation}` : '';
+        return (h(Host, { key: '980c2d7531ef77f71ea51b069dc20bbf40cd0ac4', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9fa08070a5e7f864aade0dc1afc2917e54693109', class: animationClass }, this.arrow && (h("span", { key: '4700f55c721387f2d918214309e87c9057e4831f', class: "arrow", ref: el => {
+                this.arrowRef = el;
+            } })), h("slot", { key: 'ec5304bc77d4f3eb91c79fb2a37d096b4d43b888' }))));
+    }
+    get host() { return getElement(this); }
+};
+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;
+
+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();
+            }
+        };
+        this.toggled = false;
+    }
+    validateToggled() {
+        checkType(this, 'toggled', '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));
+    }
+    render() {
+        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "toggled": ["validateToggled"]
+    }; }
+};
+PostTogglebutton.style = PostTogglebuttonStyle0;
+
+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 };