@swisspost/design-system-components 10.4.0 → 10.5.0

package/hydrate/index.mjs

@@ -5887,182 +5887,24 @@ function Url() {
     });
 }
 
-/* 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;
-}
-
-/* eslint-disable no-undefined */
-
-/**
- * Debounce execution of a function. Debouncing, unlike throttling,
- * guarantees that a function is only executed a single time, either at the
- * very beginning of a series of calls, or at the very end.
- *
- * @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 debounced-function is executed.
- * @param {object} [options] -           An object to configure options.
- * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
- *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
- *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
- *
- * @returns {Function} A new, debounced function.
- */
-function debounce$1 (delay, callback, options) {
-  var _ref = {},
-    _ref$atBegin = _ref.atBegin,
-    atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
-  return throttle(delay, callback, {
-    debounceMode: atBegin !== false
-  });
-}
-
 class Breakpoint {
     constructor() {
         this.breakpoints = [
-            { key: 'xl', device: 'desktop', minWidth: 1280 },
-            { key: 'lg', device: 'desktop', minWidth: 1024 },
-            { key: 'md', device: 'tablet', minWidth: 780 },
-            { key: 'sm', device: 'tablet', minWidth: 600 },
-            { key: 'xs', device: 'mobile', minWidth: 0 },
+            { key: 'xl', device: 'desktop', minWidth: 1280, mediaQuery: '(min-width: 1280px)' },
+            { key: 'lg', device: 'desktop', minWidth: 1024, mediaQuery: '(min-width: 1024px)' },
+            { key: 'md', device: 'tablet', minWidth: 780, mediaQuery: '(min-width: 780px)' },
+            { key: 'sm', device: 'tablet', minWidth: 600, mediaQuery: '(min-width: 600px)' },
+            { key: 'xs', device: 'mobile', minWidth: 0, mediaQuery: '(min-width: 0px)' },
         ];
         this.resizeObserver = globalThis.ResizeObserver
             ? new ResizeObserver(() => this.updateCurrentBreakpoint())
             : null;
-        this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
+        this.updateCurrentBreakpoint = (options = { emitEvents: true }) => {
             const previousBreakpoint = this.currentBreakpoint;
             const newBreakpoint = this.breakpoints.find(breakpoint => {
-                return breakpoint.minWidth <= innerWidth;
+                return globalThis.matchMedia
+                    ? globalThis.matchMedia(breakpoint.mediaQuery).matches
+                    : breakpoint.minWidth <= document.documentElement.clientWidth;
             });
             if (!newBreakpoint)
                 return;
@@ -6070,9 +5912,10 @@ class Breakpoint {
             if (!options.emitEvents)
                 return;
             Object.keys(this.currentBreakpoint)
+                .filter(key => key !== 'mediaQuery')
                 .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
                 .forEach((key) => this.dispatchEvent(key));
-        });
+        };
         if (this.resizeObserver) {
             this.updateCurrentBreakpoint({ emitEvents: false });
             this.resizeObserver.observe(document.body);
@@ -6088,37 +5931,6 @@ class Breakpoint {
 }
 const breakpoint = new Breakpoint();
 
-/**
- * Invoke the `componentOnReady` method if it is available, simulate it otherwise
- * @see https://stenciljs.com/docs/api#componentonready
- */
-function componentOnReady(el) {
-    if (typeof el.componentOnReady === 'function') {
-        return el.componentOnReady();
-    }
-    else {
-        return new Promise(resolve => customOnReady(() => {
-            resolve(el);
-        }));
-    }
-}
-function customOnReady(callback) {
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(callback);
-    }
-    return setTimeout(callback);
-}
-
-function debounce(callback, timeout = 200) {
-    let id;
-    return (...args) => {
-        if (id) {
-            clearTimeout(id);
-        }
-        id = setTimeout(callback, timeout, ...args);
-    };
-}
-
 /**
  * Validates if an event should be processed based on target and nesting criteria
  * @param event - The event to validate
@@ -6210,32 +6022,106 @@ function EventFrom(tag, option) {
 }
 /**
  * Traverses up the DOM (including crossing shadow DOM boundaries) to find the closest ancestor
- * that matches the specified tag name.
- * @param element - The starting element
- * @param tagName - The tag name to match (e.g., 'post-accordion')
+ * matching the given predicate.
+ * @param start - The starting element
+ * @param predicate - A type guard used to test each ancestor
  * @returns The closest matching ancestor or null if none found
  */
-function findClosestParentWithTag(element, tagName) {
-    let current = element;
+function findClosestAcrossShadow(start, predicate) {
+    let current = start;
     while (current) {
-        if (current.localName === tagName) {
+        if (predicate(current)) {
             return current;
         }
-        // Check regular parent first
         if (current.parentElement) {
             current = current.parentElement;
         }
-        // If no parentElement, check if we're in a shadow root
-        else if (current.parentNode instanceof ShadowRoot) {
-            current = current.parentNode.host;
-        }
-        // No more parents to check
         else {
-            current = null;
+            // Duck-typed ShadowRoot check (nodeType 11 + host) instead of `instanceof ShadowRoot`,
+            // since some test environments (e.g. JSDOM) only partially implement it.
+            const parent = current.parentNode;
+            if (parent !== null && parent.nodeType === 11 && 'host' in parent) {
+                current = parent.host;
+            }
+            else {
+                current = null;
+            }
         }
     }
     return null;
 }
+function findClosestParentWithTag(element, tagName) {
+    return findClosestAcrossShadow(element, (el) => el.localName === tagName);
+}
+
+const CLOSABLE_TARGETS = [
+    {
+        predicate: el => el.localName === 'post-banner',
+        close: el => void el.dismiss(),
+    },
+    {
+        predicate: el => el.localName === 'post-popover',
+        close: el => void el.hide(),
+    },
+    {
+        predicate: el => el.localName === 'post-popovercontainer',
+        close: el => void el.hide(),
+    },
+    {
+        predicate: el => el.localName === 'post-collapsible',
+        close: el => void el.toggle(false),
+    },
+    {
+        predicate: el => el.localName === 'post-accordion-item',
+        close: el => void el.toggle(false),
+    },
+    {
+        predicate: el => el.localName === 'dialog',
+        close: el => el.close(),
+    },
+    {
+        predicate: el => el.hasAttribute('popover'),
+        close: el => el.togglePopover(false),
+    },
+];
+function findClosableTarget(start) {
+    const el = findClosestAcrossShadow(start, (el) => CLOSABLE_TARGETS.some(t => t.predicate(el)));
+    if (!el)
+        return null;
+    const match = CLOSABLE_TARGETS.find(t => t.predicate(el));
+    return { element: el, close: () => match.close(el) };
+}
+
+/**
+ * Invoke the `componentOnReady` method if it is available, simulate it otherwise
+ * @see https://stenciljs.com/docs/api#componentonready
+ */
+function componentOnReady(el) {
+    if (typeof el.componentOnReady === 'function') {
+        return el.componentOnReady();
+    }
+    else {
+        return new Promise(resolve => customOnReady(() => {
+            resolve(el);
+        }));
+    }
+}
+function customOnReady(callback) {
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(callback);
+    }
+    return setTimeout(callback);
+}
+
+function debounce$1(callback, timeout = 200) {
+    let id;
+    return (...args) => {
+        if (id) {
+            clearTimeout(id);
+        }
+        id = setTimeout(callback, timeout, ...args);
+    };
+}
 
 /**
  * getRootNode() can only be used after the element has been attached to the document!
@@ -6417,7 +6303,7 @@ function repeat(callback, { delayMs = 300, intervalMs = 100 } = {}) {
     };
 }
 
-const version$1 = "10.4.0";
+const version$1 = "10.5.0";
 
 const postAccordionCss = () => `:host{display:block;border-block-start:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}`;
 
@@ -6638,44 +6524,31 @@ class PostAutocomplete {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postFilteringEvent = createEvent(this, "postFilteringEvent");
-        this.debouncedHandleInput = debounce((event) => {
+        this.debouncedHandleInput = debounce$1((event) => {
             void this.handleInput(event);
         }, 250);
         /** Number of characters to type before filtering methods are called */
         this.filterThreshold = 0;
         /** Show or hide the clear button */
         this.clearable = false;
-        this.inputValue = '';
-        this.handleFocus = () => {
-            if (this.filterThreshold !== 0)
-                return;
-            if (this.inputElement && this.inputElement.value.trim() !== '')
-                return;
-            this.postFilteringEvent.emit('');
+        /** Whether the listbox is currently expanded */
+        this.expanded = false;
+        /** The value of the last run query */
+        this.lastQuery = '';
+        /** The value of the selected listbox option */
+        this.selectedValue = null;
+        this.handleClick = async () => {
+            await this.runQuery('', true);
         };
-        this.handleOnBlur = () => {
-            this.inputElement.value = this.inputValue;
-            this.listBoxElement.filter('');
+        this.handleBlur = () => {
+            this.restoreSelectedValue();
             this.hideListBox();
         };
         this.handleInput = async (event) => {
             if (!this.listBoxElement)
                 return;
             const value = event.target.value.trim();
-            const query = value.length >= this.filterThreshold ? value : '';
-            // Allow for consuming parent to handle filtering (e.g. for async data) and prevent default filtering behavior
-            const { defaultPrevented } = this.postFilteringEvent.emit(query && query.length >= this.filterThreshold ? query : '');
-            if (defaultPrevented)
-                return;
-            await this.listBoxElement.filter(query);
-            if (query) {
-                this.showListBox();
-                this.announceCount();
-            }
-            else {
-                this.inputValue = '';
-                this.clearAnnouncement();
-            }
+            await this.runQuery(value.length >= this.filterThreshold ? value : '');
         };
         this.handleKeyDown = (event) => {
             const { key, altKey } = event;
@@ -6717,8 +6590,7 @@ class PostAutocomplete {
         };
         this.handleOptionSelected = (e) => {
             const value = e.detail;
-            this.inputElement.value = value;
-            this.inputValue = value;
+            this.updateSelectedValue(value);
             this.hideListBox();
         };
         this.handleOptionActive = (e) => {
@@ -6730,23 +6602,9 @@ class PostAutocomplete {
                 this.inputElement.removeAttribute('aria-activedescendant');
             }
         };
-        this.hideListBox = () => {
-            this.clearAnnouncement();
-            this.listBoxElement.hide();
-            this.inputElement.ariaExpanded = 'false';
-            this.host.removeAttribute('open');
-            this.inputElement.removeAttribute('aria-activedescendant');
-        };
-        this.showListBox = async () => {
-            await this.listBoxElement.show();
-            this.inputElement.ariaExpanded = 'true';
-            this.host.setAttribute('open', '');
-            this.announceCount();
-        };
-        this.clearInput = () => {
+        this.handleClear = () => {
             if (this.inputElement) {
-                this.inputElement.value = '';
-                this.inputValue = '';
+                this.updateSelectedValue(null);
                 this.listBoxElement.clearSelection();
                 this.hideListBox();
             }
@@ -6793,18 +6651,16 @@ class PostAutocomplete {
         if (this.inputElement) {
             this.inputElement.addEventListener('input', this.debouncedHandleInput);
             this.inputElement.addEventListener('keydown', this.handleKeyDown);
-            this.inputElement.addEventListener('blur', this.handleOnBlur);
-            this.inputElement.addEventListener('click', this.showListBox);
-            this.inputElement.addEventListener('focus', this.handleFocus);
+            this.inputElement.addEventListener('blur', this.handleBlur);
+            this.inputElement.addEventListener('click', this.handleClick);
         }
     }
     detachInputListeners() {
         if (this.inputElement) {
             this.inputElement.removeEventListener('input', this.debouncedHandleInput);
             this.inputElement.removeEventListener('keydown', this.handleKeyDown);
-            this.inputElement.removeEventListener('blur', this.handleOnBlur);
-            this.inputElement.removeEventListener('click', this.showListBox);
-            this.inputElement.removeEventListener('focus', this.handleFocus);
+            this.inputElement.removeEventListener('blur', this.handleBlur);
+            this.inputElement.removeEventListener('click', this.handleClick);
         }
     }
     attachListboxListeners() {
@@ -6829,8 +6685,53 @@ class PostAutocomplete {
         const count = this.listBoxElement.querySelectorAll('post-listbox-option:not([hidden])').length;
         this.outputElement.textContent = this.textAvailableSuggestions.replace('{count}', String(count));
     }
+    async showListBox() {
+        await this.listBoxElement.show();
+        this.expanded = true;
+        this.inputElement.ariaExpanded = 'true';
+        this.host.setAttribute('open', '');
+        this.announceCount();
+    }
+    async hideListBox() {
+        this.clearAnnouncement();
+        this.expanded = false;
+        this.host.removeAttribute('open');
+        this.inputElement.ariaExpanded = 'false';
+        this.inputElement.removeAttribute('aria-activedescendant');
+        await this.listBoxElement.hide();
+    }
+    updateSelectedValue(value) {
+        this.selectedValue = value;
+        this.inputElement.value = this.selectedValue ?? '';
+    }
+    /** Restores the input to the value of the selected option. */
+    restoreSelectedValue() {
+        this.inputElement.value = this.selectedValue ?? '';
+    }
+    /** Runs a query, filtering the listbox options and reflecting the outcome. */
+    async runQuery(query, alwaysExpand = false) {
+        // Prevent running the same query twice.
+        if (this.lastQuery !== (this.lastQuery = query)) {
+            await this.filterListBox(query);
+        }
+        // Always update the count if the listbox is expanded.
+        if (this.expanded) {
+            this.announceCount();
+        }
+        // Automatically show the listbox if the query is non-empty.
+        else if (alwaysExpand || query) {
+            await this.showListBox();
+        }
+    }
+    /** Filters the listbox options based on the query, delegating to the consuming parent when possible. */
+    async filterListBox(query) {
+        // Allow for consuming parent to handle filtering (e.g. for async data) and prevent default filtering behavior.
+        if (this.postFilteringEvent.emit(query).defaultPrevented)
+            return;
+        await this.listBoxElement?.filter(query);
+    }
     render() {
-        return (hAsync(Host, { key: 'ef5b821b235c6e6a19e9da612a7c3fbc33408e44', "data-version": version$1 }, hAsync("slot", { key: 'a7855fd0e992be6c4fd737e9b7f29c77c1ec8e7f' }), this.clearable && this.inputValue && (hAsync("button", { key: '16a690d24deb1ac1cd50c85cea857ad3e5736fac', type: "button", class: "autocomplete-clear", onClick: this.clearInput }, hAsync("post-icon", { key: 'f254bd331fb15ca6cb5a32ac2a5f5a25cb8e81ea', "aria-hidden": "true", name: "closex" }))), hAsync("post-icon", { key: '87faa8280bb58683262ec40dbec383478c5999f5', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), hAsync("output", { key: '9f8ad0d40d1e12f611f4f2e9e14058dbcca3892e', class: "visually-hidden", ref: el => (this.outputElement = el) })));
+        return (hAsync(Host, { key: '8b386930fe5484cd73395224b5f0c5daea867b33', "data-version": version$1 }, hAsync("slot", { key: '9aa5a34de2cf18c3d6342069fc2b4ce52baac0d3' }), this.clearable && this.selectedValue !== null && (hAsync("button", { key: '90b459fffc29066667ca4656b6871275d061d3fd', type: "button", class: "autocomplete-clear", onClick: this.handleClear }, hAsync("post-icon", { key: '419de2b608f1638b14aed086f8e2c6064ae634bc', "aria-hidden": "true", name: "closex" }))), hAsync("post-icon", { key: '56b7dd986023a0e46d902020b923ae525c88bef1', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), hAsync("output", { key: '6ef02d0baf03c7f562ba6d5c95918e4a7ae1214f', class: "visually-hidden", ref: el => (this.outputElement = el) })));
     }
     get host() { return getElement(this); }
     static get style() { return postAutocompleteCss(); }
@@ -6842,7 +6743,7 @@ class PostAutocomplete {
             "clearable": [516],
             "listbox": [513],
             "textAvailableSuggestions": [513, "text-available-suggestions"],
-            "inputValue": [32]
+            "selectedValue": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7117,12 +7018,23 @@ class PostBackToTop {
         return window.scrollY > window.innerHeight;
     }
     /*Watch for changes in belowFold to show/hide the back to top button*/
-    watchBelowFold(newValue) {
-        if (newValue) {
-            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
+    async watchBelowFold(newValue) {
+        this.currentAnimation?.cancel();
+        // host needs to be visible before we can animate, in or out
+        // hidden state gets recalculated after the animation, based on belowFold
+        this.host.hidden = false;
+        this.currentAnimation = fadeSlide(this.host, newValue ? 'in' : 'out', {
+            translate: this.translateY,
+            fill: 'forwards',
+        });
+        try {
+            await this.currentAnimation.finished;
+            // only hide once the fade-out finished and we're still not below fold
+            if (!this.belowFold)
+                this.host.hidden = true;
         }
-        else {
-            fadeSlide(this.host, 'out', { translate: this.translateY, fill: 'forwards' });
+        catch {
+            // animation got canceled, nothing to do
         }
     }
     scrollToTop() {
@@ -7164,16 +7076,17 @@ class PostBackToTop {
     // Set the initial state
     componentWillLoad() {
         this.belowFold = this.isBelowFold();
+        this.host.hidden = !this.belowFold;
     }
     componentDidLoad() {
-        window.addEventListener('scroll', this.handleScroll, false);
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
         this.animateButton();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (hAsync(Host, { key: '3d976e4e1a8ac4b72041369d5667c55d915d7118', "data-version": version$1 }, hAsync("button", { key: '7ceb4953248ca934a905ec63444934e9e6c09e43', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, hAsync("post-icon", { key: '89a2bc9a8278fb45d3fb915ec096ee94b3841edd', "aria-hidden": "true", name: "arrowup" }), hAsync("span", { key: 'fc2517fba7599f37c3054b638afd6b9b2ba7e32a', class: "visually-hidden" }, this.textBackToTop))));
+        return (hAsync(Host, { key: '149a8afee36c12130b3e503c4da5cffdaa3f86b5', "data-version": version$1 }, hAsync("button", { key: '4e291c5cfaa55bb6a68f436af570d83377436a3a', class: "back-to-top", onClick: this.scrollToTop }, hAsync("post-icon", { key: 'c25e8d12cf6f751b368010ad2d82534fa95adf86', "aria-hidden": "true", name: "arrowup" }), hAsync("span", { key: 'e16d1247a5ab7e39629e4bec7307ee562c589f7e', class: "visually-hidden" }, this.textBackToTop))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -7296,14 +7209,11 @@ class PostBanner {
         this.postDismissed.emit();
         this.host.remove();
     }
-    onCloseButtonClick() {
-        void this.dismiss();
-    }
     checkContent() {
         this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
     }
     render() {
-        return (hAsync(Host, { key: 'afa4834733c7e9d985d2102a3e421f09f94b44ba', "data-version": version$1, role: "alert", "data-color-scheme": "light" }, hAsync("slot", { key: '39dfccec7bf829ff354bac467a9b399e003ce473', name: "close-button" }), hAsync("div", { key: 'e6dfc60165185da4384c4143153ee34db1299088', class: "post-banner-content" }, hAsync("slot", { key: '9fc1e8e81cf396eb1ae1e5dfff7f04ccc6443986', name: "heading" }), hAsync("slot", { key: 'e7d21db6f7feb1507c612319c3d56595b797a3c4' }), this.hasActions && (hAsync("div", { key: 'd4229d09accb5cfb2a096c44ca523a132da4755d', class: "actions" }, hAsync("slot", { key: 'b01633122bd45df2f95b7ee5e4694a83aceb68bd', name: "actions" }))))));
+        return (hAsync(Host, { key: '890eea914f07f31f64c9e1b01fca94e824a019bc', "data-version": version$1, role: "alert", "data-color-scheme": "light" }, hAsync("slot", { key: 'd4ac9c3714979cde7bba7554fbe1886d2cf75701', name: "close-button" }), hAsync("div", { key: 'a097570719b709a3b67aa7152701edbf1174ace0', class: "post-banner-content" }, hAsync("slot", { key: 'df12b0e63ac4cf4152c196eaad071774be4d7b88', name: "heading" }), hAsync("slot", { key: 'a5e376800525119dc47815b9977936fa3966e087' }), this.hasActions && (hAsync("div", { key: '6a0cc7f82873bcfde5109ed9e6bfe8255e30b19c', class: "actions" }, hAsync("slot", { key: '11b1d289705cb9d1d96b20b4fcea2b923bfd184a', name: "actions" }))))));
     }
     get host() { return getElement(this); }
     static get style() { return postBannerCss(); }
@@ -7315,7 +7225,7 @@ class PostBanner {
             "hasActions": [32],
             "dismiss": [64]
         },
-        "$listeners$": [[0, "click", "onCloseButtonClick"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["type", "type"]]
     }; }
@@ -7323,13 +7233,10 @@ class PostBanner {
 __decorate$w([
     OneOf(BANNER_TYPES)
 ], PostBanner.prototype, "type", void 0);
-__decorate$w([
-    EventFrom('post-closebutton', { allowDescendants: true })
-], PostBanner.prototype, "onCloseButtonClick", null);
 
 const VARIANTS = ['listitem', 'menuitem'];
 
-const postBreadcrumbItemCss = () => `a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:var(--post-current-fg)}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{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}a: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){a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a: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){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}a.btn:not(.btn-link){border-color:ButtonBorder !important}a.btn.btn-tertiary.px-0{border:0 !important}a.btn.btn-tertiary.px-0:not(:hover){text-decoration:underline}}:host(:not([variant=menuitem])){display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}:host(:not([variant=menuitem])) :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}:host(:not([variant=menuitem])) :is(button,a):not(:disabled):hover{text-decoration:none}:host(:not([variant=menuitem])) :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}:host(:not([variant=menuitem])) :is(button,a){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(:not([variant=menuitem])) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:not([variant=menuitem])) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host(:not([variant=menuitem])) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:not([variant=menuitem])) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:not([variant=menuitem])) :is(button,a){border-width:1px !important;transition:none}:host(:not([variant=menuitem])) :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}:host(:not([variant=menuitem])) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host(:not([variant=menuitem]))::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:is(a,span){white-space:var(--post-breadcrumb-item-wrap, normal) !important;overflow-wrap:anywhere;hyphens:auto;line-break:strict}:host([selected]:not([selected=false])){display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}:host([selected]:not([selected=false])) :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}:host([selected]:not([selected=false])) :is(button,a):not(:disabled):hover{text-decoration:none}:host([selected]:not([selected=false])) :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}:host([selected]:not([selected=false])) :is(button,a){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([selected]:not([selected=false])) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([selected]:not([selected=false])) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host([selected]:not([selected=false])) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([selected]:not([selected=false])) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([selected]:not([selected=false])) :is(button,a){border-width:1px !important;transition:none}:host([selected]:not([selected=false])) :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}:host([selected]:not([selected=false])) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host([selected]:not([selected=false]))::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:host([selected]:not([selected=false])) :is(a,span){color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}`;
+const postBreadcrumbItemCss = () => `a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:var(--post-current-fg)}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{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}a: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){a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a: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){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}a.btn:not(.btn-link){border-color:ButtonBorder !important}a.btn.btn-tertiary.px-0{border:0 !important}a.btn.btn-tertiary.px-0:not(:hover){text-decoration:underline}}:host([variant=menuitem]) :is(a,span){white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-break:strict}:host([variant=listitem]){display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}:host([variant=listitem]) :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}:host([variant=listitem]) :is(button,a):not(:disabled):hover{text-decoration:none}:host([variant=listitem]) :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}:host([variant=listitem]) :is(button,a){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([variant=listitem]) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([variant=listitem]) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host([variant=listitem]) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([variant=listitem]) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([variant=listitem]) :is(button,a){border-width:1px !important;transition:none}:host([variant=listitem]) :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}:host([variant=listitem]) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host([variant=listitem])::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:host([variant=listitem]):host([selected]:not([selected=false])) :is(a,span){color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}:host([variant=listitem]):host([standalone]:not([standalone=false])) :is(a,span){white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-break:strict}`;
 
 var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -7342,60 +7249,229 @@ var __decorate$v = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * @slot default - The content displayed inside the breadcrumb item.
+ * @slot default - The content displayed inside the breadcrumb item.
+ */
+class PostBreadcrumbItem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Controls how the item is rendered, either as a standard list item or within an overflow menu.
+         */
+        this.variant = 'listitem';
+        /**
+         * Indicates that the item represents the current page, applying appropriate styling.
+         */
+        this.selected = false;
+        /**
+         * Indicates that this is the only visible item, applying appropriate styling.
+         */
+        this.standalone = false;
+    }
+    render() {
+        const href = this.url instanceof URL ? this.url.href : this.url;
+        const content = href ? (hAsync("a", { href: href, "aria-current": this.selected ? 'page' : undefined, "aria-label": this.label, "aria-description": this.description }, hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)));
+        return this.variant === 'listitem' || this.selected ? (hAsync(Host, { "data-version": version$1, role: "listitem", slot: this.selected ? 'selected' : undefined }, content)) : (hAsync(Host, { "data-version": version$1, slot: "menu" }, hAsync("post-menu-item", null, content)));
+    }
+    get host() { return getElement(this); }
+    static get style() { return postBreadcrumbItemCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "post-breadcrumb-item",
+        "$members$": {
+            "url": [513],
+            "label": [513],
+            "description": [513],
+            "variant": [513],
+            "selected": [516],
+            "standalone": [516]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["url", "url"], ["label", "label"], ["description", "description"], ["variant", "variant"], ["selected", "selected"], ["standalone", "standalone"]]
+    }; }
+}
+__decorate$v([
+    Url()
+], PostBreadcrumbItem.prototype, "url", void 0);
+__decorate$v([
+    Type('string')
+], PostBreadcrumbItem.prototype, "label", void 0);
+__decorate$v([
+    Type('string')
+], PostBreadcrumbItem.prototype, "description", void 0);
+__decorate$v([
+    OneOf(VARIANTS)
+], PostBreadcrumbItem.prototype, "variant", void 0);
+__decorate$v([
+    Required(),
+    Type('boolean')
+], PostBreadcrumbItem.prototype, "selected", void 0);
+__decorate$v([
+    Required(),
+    Type('boolean')
+], PostBreadcrumbItem.prototype, "standalone", void 0);
+
+/* 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;
+}
+
+/* eslint-disable no-undefined */
+
+/**
+ * Debounce execution of a function. Debouncing, unlike throttling,
+ * guarantees that a function is only executed a single time, either at the
+ * very beginning of a series of calls, or at the very end.
+ *
+ * @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 debounced-function is executed.
+ * @param {object} [options] -           An object to configure options.
+ * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
+ *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
+ *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
+ *
+ * @returns {Function} A new, debounced function.
  */
-class PostBreadcrumbItem {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * Controls how the item is rendered, either as a standard list item or within an overflow menu.
-         */
-        this.variant = 'listitem';
-        /**
-         * Indicates that the item represents the current page, applying appropriate styling.
-         */
-        this.selected = false;
-    }
-    render() {
-        const href = this.url instanceof URL ? this.url.href : this.url;
-        const content = href ? (hAsync("a", { href: href, "aria-current": this.selected ? 'page' : undefined, "aria-label": this.label, "aria-description": this.description }, hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)));
-        return this.variant === 'listitem' || this.selected ? (hAsync(Host, { "data-version": version$1, role: "listitem", slot: this.selected ? 'selected' : undefined }, content)) : (hAsync(Host, { "data-version": version$1 }, hAsync("post-menu-item", null, content)));
-    }
-    get host() { return getElement(this); }
-    static get style() { return postBreadcrumbItemCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 265,
-        "$tagName$": "post-breadcrumb-item",
-        "$members$": {
-            "url": [513],
-            "label": [513],
-            "description": [513],
-            "variant": [513],
-            "selected": [516]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["url", "url"], ["label", "label"], ["description", "description"], ["variant", "variant"], ["selected", "selected"]]
-    }; }
+function debounce (delay, callback, options) {
+  var _ref = {},
+    _ref$atBegin = _ref.atBegin,
+    atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
+  return throttle(delay, callback, {
+    debounceMode: atBegin !== false
+  });
 }
-__decorate$v([
-    Url()
-], PostBreadcrumbItem.prototype, "url", void 0);
-__decorate$v([
-    Type('string')
-], PostBreadcrumbItem.prototype, "label", void 0);
-__decorate$v([
-    Type('string')
-], PostBreadcrumbItem.prototype, "description", void 0);
-__decorate$v([
-    OneOf(VARIANTS)
-], PostBreadcrumbItem.prototype, "variant", void 0);
-__decorate$v([
-    Required(),
-    Type('boolean')
-], PostBreadcrumbItem.prototype, "selected", void 0);
 
-const postBreadcrumbsCss = () => `:host{display:block;position:relative}nav{max-width:100%}nav.invisible{--post-breadcrumb-item-wrap:nowrap;visibility:hidden;overflow:hidden;position:absolute;inset:0;padding-inline:1px}[role=list]{display:flex;align-items:flex-start;gap:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item :is(button,a):not(:disabled):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.breadcrumb-item :is(button,a){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}.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a){border-width:1px !important;transition:none}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.breadcrumb-item :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}.home{padding-block:var(--post-device-spacing-padding-47)}.home::before{content:unset}.home post-icon{width:var(--post-device-sizing-interactive-icon-size2);height:var(--post-device-sizing-interactive-icon-size2)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+const postBreadcrumbsCss = () => `:host{display:block;position:relative}nav{max-width:100%}nav.invisible{overflow:hidden;visibility:hidden;position:absolute;inset:0}nav.loading>div>:not(.home){display:none}[role=list]{display:flex;align-items:flex-start;gap:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item :is(button,a):not(:disabled):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.breadcrumb-item :is(button,a){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}.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item :is(button,a){border-width:1px !important;transition:none}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.breadcrumb-item :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}.home{padding-block:var(--post-device-spacing-padding-47)}.home::before{content:unset}.home post-icon{width:var(--post-device-sizing-interactive-icon-size2);height:var(--post-device-sizing-interactive-icon-size2)}.menu{margin-inline-end:calc(-1*var(--post-device-spacing-gap-inline-4))}.menu.empty{display:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
 
 var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -7407,92 +7483,142 @@ var __decorate$u = (undefined && undefined.__decorate) || function (decorators,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+const MAX_VISIBLE_ITEMS = 6;
+const MEASUREMENT_DEBOUNCE_MS$1 = 50;
 class PostBreadcrumbs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.shouldRenderMenu = false;
+        this.debounceUpdateCollapsedItems = throttle(MEASUREMENT_DEBOUNCE_MS$1, this.updateCollapsedItems.bind(this));
+        this.resizeObserver = new ResizeObserver(this.debounceUpdateCollapsedItems);
+        this.mutationObserver = new MutationObserver(this.updateHiddenNav.bind(this));
+        this.loaded = false;
+        /** The number of breadcrumb items, counted from the start, that are moved into the overflow menu. */
+        this.collapsed = 0;
+        /** The visible breadcrumb navigation. */
+        this.nav = null;
+        /** An off-screen copy of the breadcrumb navigation used for measurement. */
+        this.hiddenNav = null;
     }
     componentWillLoad() {
         this.id = this.host.id || `b${nanoid(6)}`;
     }
-    componentDidLoad() {
-        this.createMutationObserver();
-        this.createResizeObserver();
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-        this.resizeObserver?.disconnect();
-    }
-    createMutationObserver() {
-        this.mutationObserver = new MutationObserver(this.duplicateNavElement.bind(this));
-        this.mutationObserver.observe(this.host, {
+    async componentDidLoad() {
+        this.resizeObserver?.observe(document.body);
+        this.mutationObserver?.observe(this.host, {
             childList: true,
             characterData: true,
             subtree: true,
         });
-        this.duplicateNavElement();
+        await this.updateHiddenNav();
+        await this.updateCollapsedItems();
+        this.loaded = true;
     }
-    createResizeObserver() {
-        this.resizeObserver = new ResizeObserver(throttle(50, this.checkOverflow.bind(this)));
-        this.resizeObserver.observe(document.body);
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        this.debounceUpdateCollapsedItems.cancel();
     }
     /**
-     * To measure overflow, we duplicate the entire breadcrumb so an inline version is always available.
+     * Measures the space available in the breadcrumb navigation and moves the items that do not fit
+     * into the overflow menu.
      */
-    duplicateNavElement() {
-        const shadowRoot = this.host.shadowRoot;
-        const nav = shadowRoot?.querySelector('nav');
-        if (!shadowRoot || !nav)
+    async updateCollapsedItems() {
+        if (!this.nav)
             return;
-        this.prepareBreadcrumbItemsForClone();
-        const clone = nav.cloneNode(true);
-        clone.classList.add('invisible');
-        shadowRoot.querySelector('nav.invisible')?.remove();
-        shadowRoot.append(clone);
-        requestAnimationFrame(() => {
-            this.duplicateSlottedElements(clone, 'slot:not([name])');
-            this.duplicateSlottedElements(clone, 'slot[name="selected"]');
-            this.checkOverflow();
-        });
+        this.collapsed = await this.calculateCollapsedItems();
     }
-    duplicateSlottedElements(clone, slotSelector) {
-        const originalSlot = this.host.shadowRoot?.querySelector(slotSelector);
-        const clonedSlot = clone.querySelector(slotSelector);
-        if (!originalSlot || !clonedSlot)
-            return;
-        originalSlot.assignedElements().forEach(element => {
-            clonedSlot.insertAdjacentElement('beforebegin', element.cloneNode(true));
-        });
-        clonedSlot.remove();
+    /**
+     * Determines how many items have to be collapsed, either because they do not fit the breadcrumb
+     * navigation or because they exceed the maximum number of visible items.
+     */
+    async calculateCollapsedItems() {
+        const items = this.host.querySelectorAll('post-breadcrumb-item');
+        const overflowing = await this.calculateOverflowingItems();
+        // Never show more than `MAX_VISIBLE_ITEMS`, even if the nav is wide enough to fit them all.
+        return Math.max(overflowing, items.length - MAX_VISIBLE_ITEMS);
     }
-    checkOverflow() {
-        const hiddenNav = this.host.shadowRoot?.querySelector('nav.invisible');
-        if (!hiddenNav)
-            return;
-        const breadcrumbItems = Array.from(hiddenNav.querySelectorAll('post-breadcrumb-item'));
-        Promise.all(breadcrumbItems.map(item => componentOnReady(item))).then(() => {
-            this.shouldRenderMenu =
-                hiddenNav.scrollWidth > hiddenNav.clientWidth && breadcrumbItems.length > 1;
-            this.updateBreadcrumbItemProps();
+    /**
+     * Determines how many items overflow the width of the breadcrumb navigation.
+     */
+    async calculateOverflowingItems() {
+        // Fallback to zero if the hidden nav is not available for measurement.
+        if (!this.hiddenNav)
+            return 0;
+        const gap = Number.parseFloat(getComputedStyle(this.hiddenNav.firstElementChild).gap);
+        const menu = this.hiddenNav.querySelector('.menu').clientWidth;
+        // The last item can never be collapsed, so it is ignored when measuring the width of the items.
+        const items = Array.from(this.hiddenNav.querySelectorAll('post-breadcrumb-item')).slice(0, -1);
+        // Start from the assumption that all items fit and that no menu is shown.
+        // Therefore, subtract the width of the overflow menu.
+        let width = this.hiddenNav.scrollWidth - menu + gap;
+        let overflowing = 0;
+        // Discard items from the start until the remaining ones fit the available width.
+        while (overflowing < items.length && width > this.hiddenNav.clientWidth) {
+            // The overflow menu needs to be displayed as soon as the first item is moved into it, so its
+            // width needs to be taken into account when measuring the remaining items.
+            if (overflowing === 0)
+                width += menu;
+            width -= items[overflowing++].clientWidth + gap;
+        }
+        return overflowing;
+    }
+    /**
+     * Moves `collapsed` items into the overflow menu and marks the last item as selected.
+     */
+    updateItems(items, collapsed) {
+        items.forEach((item, index) => {
+            item.setAttribute('variant', index < collapsed ? 'menuitem' : 'listitem');
+            item.setAttribute('selected', String(index === items.length - 1));
+            item.setAttribute('standalone', String(index === items.length - 1 && index === collapsed));
         });
     }
-    prepareBreadcrumbItemsForClone() {
-        this.shouldRenderMenu = false;
-        this.updateBreadcrumbItemProps();
+    /**
+     * Rebuilds the off-screen copy of the breadcrumb navigation.
+     */
+    async updateHiddenNav() {
+        this.hiddenNav?.remove();
+        this.hiddenNav = await this.renderHiddenNav();
     }
-    updateBreadcrumbItemProps() {
-        const breadcrumbItems = this.host.querySelectorAll('post-breadcrumb-item');
-        breadcrumbItems.forEach((item, index) => {
-            item.setAttribute('variant', this.shouldRenderMenu ? 'menuitem' : 'listitem');
-            item.setAttribute('selected', String(index === breadcrumbItems.length - 1));
+    /**
+     * Renders an off-screen copy of the breadcrumb navigation that is used for measurements.
+     */
+    async renderHiddenNav() {
+        const shadowRoot = this.host.shadowRoot;
+        if (!shadowRoot || !this.nav)
+            return null;
+        const clone = this.nav.cloneNode(true);
+        const slots = clone.querySelectorAll('slot');
+        // Deep clone the breadcrumb navigation and flatten its slots into the clone.
+        this.nav.querySelectorAll('slot').forEach((source, index) => {
+            const target = slots[index];
+            // Insert the assigned elements where the slot used to be, then drop the now empty slot
+            source.assignedElements().forEach(element => {
+                target.insertAdjacentElement('beforebegin', element.cloneNode(true));
+            });
+            target.remove();
         });
+        clone.classList.remove('loading');
+        clone.classList.add('invisible');
+        // Show the overflow menu so that we can include the space it takes up in the measurement.
+        clone.querySelector('.menu').classList.remove('empty');
+        shadowRoot.append(clone);
+        // Wait for all items to be fully hydrated before measuring.
+        const items = clone.querySelectorAll('post-breadcrumb-item');
+        await Promise.all(Array.from(items).map(item => componentOnReady(item)));
+        // Move the items out of the overflow menu so that the uncollapsed layout can be measured.
+        this.updateItems(items, 0);
+        return clone;
     }
     renderMenu() {
         const menuId = `${this.id}-menu`;
-        return (hAsync("div", { role: "listitem" }, hAsync("div", { class: "breadcrumb-item" }, hAsync("post-menu-trigger", { for: menuId }, hAsync("button", null, hAsync("span", { class: "visually-hidden" }, this.textMoreItems), hAsync("span", { "aria-hidden": "true" }, "...")))), hAsync("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, hAsync("slot", null))));
+        return (hAsync("div", { class: `breadcrumb-item menu ${this.collapsed === 0 ? 'empty' : ''}`, role: "listitem" }, hAsync("post-menu-trigger", { for: menuId }, hAsync("button", null, hAsync("span", { class: "visually-hidden" }, this.textMoreItems), hAsync("span", { "aria-hidden": "true" }, "..."))), hAsync("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, hAsync("slot", { name: "menu" }))));
     }
     render() {
-        return (hAsync(Host, { key: '2640a012ada112396ea3c954cda45c7bfaf2968d', "data-version": version$1 }, hAsync("nav", { key: '397a017f326459c433e0f8fae5766badfad52e29', "aria-label": this.textBreadcrumbs }, hAsync("div", { key: 'eb1d83aeb4aca599350918ba6be9df2a5ce86453', role: "list" }, hAsync("div", { key: '217b359f3da4afc3ca8c28d8fc0d352f4198c9b1', class: "breadcrumb-item home", role: "listitem" }, hAsync("a", { key: '1c2c3754bc0ef04e48ab95b5dad62e2d4cbb85e9', href: this.homeUrl }, hAsync("span", { key: '15878d068a9901a2c7b4f6726e6962dc9158a86f', class: "visually-hidden" }, this.textHome), hAsync("post-icon", { key: '0d755bcc61c49ccd7944b4a9370198ed41ab1c34', "aria-hidden": "true", name: "home" }))), this.shouldRenderMenu ? this.renderMenu() : hAsync("slot", null), hAsync("slot", { key: 'a0bafe06eab2346ea12bd00aec40c91b5e5347d0', name: "selected" })))));
+        if (this.loaded) {
+            const items = this.host.querySelectorAll('post-breadcrumb-item');
+            this.updateItems(items, this.collapsed);
+        }
+        return (hAsync(Host, { key: '501384cb07b2deac87a21800fc4d39d695747341', "data-version": version$1 }, hAsync("nav", { key: '20aa57da865967458169544dec75d975926eb675', "aria-label": this.textBreadcrumbs, ref: el => (this.nav = el), class: this.loaded ? '' : 'loading' }, hAsync("div", { key: 'cf8f21f2ee9de01bac0edf9379ba5c183b938d70', role: "list" }, hAsync("div", { key: '9bd29a83cb976d67f3c6ea24cf23b2a07e40ca84', class: "breadcrumb-item home", role: "listitem" }, hAsync("a", { key: '675638668994f074951491040c6043819e6f7282', href: this.homeUrl }, hAsync("span", { key: '3ce1f8ea5ba5738925bff000ec5a8c32603ae963', class: "visually-hidden" }, this.textHome), hAsync("post-icon", { key: '1b35b22788d4e70c948e1067d99265e8af9c74e7', "aria-hidden": "true", name: "home" }))), this.renderMenu(), hAsync("slot", { key: 'f7fe7cd0b16a9064aba28149756f785c47133351' }), hAsync("slot", { key: 'c62ce84877203586c184e1adaea1ecb6ed8a0912', name: "selected" })))));
     }
     get host() { return getElement(this); }
     static get style() { return postBreadcrumbsCss(); }
@@ -7504,8 +7630,9 @@ class PostBreadcrumbs {
             "textHome": [513, "text-home"],
             "textBreadcrumbs": [513, "text-breadcrumbs"],
             "textMoreItems": [513, "text-more-items"],
-            "shouldRenderMenu": [32],
-            "id": [32]
+            "id": [32],
+            "loaded": [32],
+            "collapsed": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7560,7 +7687,7 @@ class PostClosebutton {
         }
         /**
          * The "type" attribute used for the close button
-        
+      
          */
         this.buttonType = 'button';
         /**
@@ -7571,6 +7698,10 @@ class PostClosebutton {
          * The size of the close button.
          */
         this.size = 'default';
+        this.handleClick = () => {
+            const target = findClosableTarget(this.host);
+            target?.close();
+        };
     }
     componentDidLoad() {
         if (globalThis.MutationObserver) {
@@ -7595,13 +7726,8 @@ class PostClosebutton {
             console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
         }
     }
-    handleClick() {
-        if (this.buttonType === 'reset')
-            this.internals.form?.reset();
-        this.host.closest('dialog')?.close();
-    }
     render() {
-        return (hAsync(Host, { key: '22ac2b07e9a8a8f8d157423fea1bcedb2c4f9b11', "data-version": version$1 }, hAsync("button", { key: '91eb413a2546f131e4c97c28340374addbf2c7a7', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: () => this.handleClick() }, hAsync("post-icon", { key: '02202b3df2e5830aeb267921c924c1e75508d546', "aria-hidden": "true", name: "closex" }), hAsync("span", { key: 'c691c845dd58b4f975c33791d29518428ade6ee8', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, hAsync("slot", { key: '3fd42b82ef1d1ea76343e0c69f421a2916c26006' })))));
+        return (hAsync(Host, { key: 'f46ba6cbd82793b2a3d3a72c2f89236f0904eb68', "data-version": version$1 }, hAsync("button", { key: 'd014e76ccce88a087f8dd9caaac002eb09f64699', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: this.handleClick }, hAsync("post-icon", { key: '442305b327aabe61f259b98694118ec1b4ed2f09', "aria-hidden": "true", name: "closex" }), hAsync("span", { key: '530149339a2a983d1e5d23c149abd0faf6f912b5', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, hAsync("slot", { key: 'b90d5bea08c70c6df33dc5fc74bcf06eb2b6cd14' })))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -7697,7 +7823,7 @@ class PostCollapsible {
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (hAsync(Host, { key: 'd4fef8eff9b716e9dff0e570f5993221ca631ed5', "data-version": version$1, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, hAsync("slot", { key: 'ee957da050187c1cfd752e0dcb6b5f86505f5089' })));
+        return (hAsync(Host, { key: 'd21f5e36e292652981b165fbb5f4e03501f88e1b', "data-version": version$1, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, hAsync("slot", { key: '7804a966899325cbc55f9e62eadf81e8e6a1e248' })));
     }
     get host() { return getElement(this); }
     static get style() { return postCollapsibleCss(); }
@@ -7823,7 +7949,7 @@ class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (hAsync(Host, { key: '64dde42136274194be6c3c4f94fb87ded8a3a079', "data-version": version$1 }, hAsync("slot", { key: 'f43727ec2f7692793178ad6c162bb56f0f2d842b' })));
+        return (hAsync(Host, { key: '55ae82b4cf69709de291000cc5e273107e1f61e7', "data-version": version$1 }, hAsync("slot", { key: 'c85ddfc93a1ef93c41fcb3fc5705fa1fbb30934d' })));
     }
     get host() { return getElement(this); }
     static get cmpMeta() { return {
@@ -12657,11 +12783,11 @@ class PostDatePicker {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'ac7b7440fa143243f512f5310451bf5f78c8d4f9', "data-version": version$1 }, this.inline && (hAsync("div", { key: 'f8557be8fa3200fe60a5867136bcbafadb0dd8fa', dir: this.textDirection }, hAsync("slot", { key: '0fb8338aa4f3003debd860818473545159dae9de' }), hAsync("div", { key: 'a5ad622effd59c94e89fdaad49aac1be4572b6cc', class: "datepicker-container" }))), !this.inline && (hAsync("div", { key: '13542f6ebc5b3eb019f08f229b57d9766da1f5f3', dir: this.textDirection }, hAsync("div", { key: '70ff874ef7337256286af303a2491f82cf50ebdd', class: {
+        return (hAsync(Host, { key: '8f3e9c45b6536e766d2930bb7647ccb230a1a53c', "data-version": version$1 }, this.inline && (hAsync("div", { key: '37c23df45461da546c03ab5e487e6831992a1a6f', dir: this.textDirection }, hAsync("slot", { key: '6c031a739d43642604c752e2101bbc2d4fbb39e5' }), hAsync("div", { key: '42ecf6418c4522d15a24341b127b444aedbfc7be', class: "datepicker-container" }))), !this.inline && (hAsync("div", { key: '0166eba762a209d0113f42c19715a9dde86eef2d', dir: this.textDirection }, hAsync("div", { key: '14f687ecc53fd5681aa52abd955e18aa17991b2c', class: {
                 'calendar-input': !this.range,
                 'calendar-input-range': this.range,
                 'disabled': this.inputDisabled,
-            } }, hAsync("slot", { key: '833903cc2bc4560f3d9378e2e8cf47ff26af2ea1' }), hAsync("button", { key: 'd7fd572bc96164d36e30cec148822e875966fc8d', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, hAsync("post-icon", { key: '8606056f1de2c9c6cfc041575affb01155a4282e', name: "calendar" }))), hAsync("post-popovercontainer", { key: '0519c4854ce7eaa31fdc542790d0b24da83c8538', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, hAsync("div", { key: 'ad967bfcb1154e508d03f9d986be7829d65ce69b', class: "datepicker-container" }))))));
+            } }, hAsync("slot", { key: 'afc114dc156c665de0b1a23732efaf3e221929d4' }), hAsync("button", { key: '205ef45ccc828418af1ef7b3b09def83b87c9b26', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, hAsync("post-icon", { key: '6730069a64bc2bb461d72e5c0e615d37ca57b74d', name: "calendar" }))), hAsync("post-popovercontainer", { key: '56e1dfd0fd04442f7778c547fc75cba8caba84a5', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, hAsync("div", { key: '43ff0d83760214ff8e1ad06c2f8d7c6626e178c1', class: "datepicker-container" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12844,10 +12970,10 @@ class PostFooter {
         const allGridSlotsEmpty = GRID_SLOTS.every(slotName => !this.slotDisplayed[slotName]);
         const renderMain = !allGridSlotsEmpty || renderSocialmedia || renderApp || renderBusinesssectors;
         const renderBase = renderCopyright || renderMeta;
-        return (hAsync(Host, { key: 'f668d6ba8da065dacae35ef5b62ee53de08e752b', "data-version": version$1, "data-color-scheme": "light" }, hAsync("footer", { key: 'a2d5506e10de46e0c457795a241f7c121bccabbf' }, hAsync("h2", { key: '6ab3e65fca3282f2c9e885b380759ccd06fdebb1', class: "visually-hidden" }, this.textFooter), hAsync("div", { key: '77575484be6954dedaea636720d739fabd12393b', class: { 'prefooter': true, 'd-none': !renderPrefooter } }, hAsync("div", { key: '10c9bd63fe081645b83e0e4630185da0b2f3125b', class: "footer-container" }, hAsync("slot", { key: 'c73b907f6f0b2210c0fc33d3980e89b303599ca6', onSlotchange: this.handleSlotChange, name: "prefooter" }))), hAsync("div", { key: 'facda7dade1905087e8f1d23505f2afc381f56df', class: { 'footer-main': true, 'd-none': !renderMain } }, hAsync("div", { key: '09fcf43c02bab8f475d400c5fed66fababde2bfd', class: "footer-container" }, hAsync("div", { key: '25362e6384b6f1cdea3e7901e1afef6926e7b855', class: { 'footer-grid': true, 'd-none': allGridSlotsEmpty } }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), hAsync("div", { key: '0d4f176302870c035b517a9d6df34fd5bd2268ae', class: {
+        return (hAsync(Host, { key: '02edce3d202fefa6fe21a84d1ed97a6ded2d76ce', "data-version": version$1, "data-color-scheme": "light" }, hAsync("footer", { key: '7d67c940dc73b6dd16283e7c7a7feeda05f50f80' }, hAsync("h2", { key: '1d71a47f631f463c15b7ac02c7574d4f8adbfe2e', class: "visually-hidden" }, this.textFooter), hAsync("div", { key: '9fd3d08883d63c8aaccb4c3c32c0c8a81c3f8e1c', class: { 'prefooter': true, 'd-none': !renderPrefooter } }, hAsync("div", { key: '99a6abfe43b586e5486c4ceeff3c7176905ef631', class: "footer-container" }, hAsync("slot", { key: '5616b403340d5e2395c0d949926f99c56936b662', onSlotchange: this.handleSlotChange, name: "prefooter" }))), hAsync("div", { key: 'd6ccd3988b9951bb0e38fd612eae64a1889427ef', class: { 'footer-main': true, 'd-none': !renderMain } }, hAsync("div", { key: '4c8880c1dbf366a408402a884e61fe8e1cf45af0', class: "footer-container" }, hAsync("div", { key: 'a79010da73a749002a25b03052d0427d2dcf6c2e', class: { 'footer-grid': true, 'd-none': allGridSlotsEmpty } }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), hAsync("div", { key: '335efe778d8b8e2c4a9f3eeffd4d60e5ba670ad2', class: {
                 'footer-column': true,
                 'd-none': !renderSocialmedia && !renderApp,
-            } }, hAsync("div", { key: 'c109f4a4e6ee2654f3312924c0afe2ccb86c35c5', class: { 'footer-socialmedia': true, 'd-none': !renderSocialmedia } }, hAsync("slot", { key: '50b9083d8962ac635f5b8e9124d401cb8113fd16', onSlotchange: this.handleSlotChange, name: "socialmedia" })), hAsync("div", { key: 'f27f992e9f3fa51f0b1a46263b8b06db904c7326', class: { 'footer-app': true, 'd-none': !renderApp } }, hAsync("slot", { key: 'b2312f504866d55a4214ea2c5a959f63d72224f5', onSlotchange: this.handleSlotChange, name: "app" }))), hAsync("div", { key: '08887180c9834a3c843227e74038c10e59eff574', class: { 'footer-businesssectors': true, 'd-none': !renderBusinesssectors } }, hAsync("slot", { key: '3c06ae979a57241646898761d7e4c07110f9982b', onSlotchange: this.handleSlotChange, name: "businesssectors" })))), hAsync("div", { key: '2b306190837589565cb1f7a849ae5ed6fb95e2f4', class: { 'footer-base': true, 'd-none': !renderBase } }, hAsync("div", { key: 'e399157216b6acd98e6fcb802f01fc50086c268c', class: "footer-container" }, hAsync("div", { key: '2b594870e3256173f6a2bd293e5050cc7733e215', class: { 'footer-copyright': true, 'd-none': !renderCopyright } }, hAsync("slot", { key: 'a79f43ab477dc12d1b9d34635784ac45feeeab59', onSlotchange: this.handleSlotChange, name: "copyright" })), hAsync("div", { key: '3298f106b3ae0fd387dd407f5b3276d99e584eeb', class: { 'footer-meta': true, 'd-none': !renderMeta } }, hAsync("slot", { key: '49b28b37aad643116441612ef10f9edcad9df2c3', onSlotchange: this.handleSlotChange, name: "meta" })))))));
+            } }, hAsync("div", { key: '6725d6db6af39a2f2ed4d887a598f262c6314562', class: { 'footer-socialmedia': true, 'd-none': !renderSocialmedia } }, hAsync("slot", { key: '3a2d1c69bc05245842447ac104615f681b02e3a9', onSlotchange: this.handleSlotChange, name: "socialmedia" })), hAsync("div", { key: '38f1a4b8ef975aafb7f4fd90512ea08dc18e3d4c', class: { 'footer-app': true, 'd-none': !renderApp } }, hAsync("slot", { key: 'fbcb201b8ee7b9ac419c7a01e995ce3be7e4acca', onSlotchange: this.handleSlotChange, name: "app" }))), hAsync("div", { key: '76b292642cd8587ffa95277bf43478c785aed594', class: { 'footer-businesssectors': true, 'd-none': !renderBusinesssectors } }, hAsync("slot", { key: '9fa3ead24b007de21d2669421f03ab2fd870d64e', onSlotchange: this.handleSlotChange, name: "businesssectors" })))), hAsync("div", { key: '0278475002d8a479936967c06335cc667519a902', class: { 'footer-base': true, 'd-none': !renderBase } }, hAsync("div", { key: '59d46393b2a04184a6adc445d4b0940f07ad56f8', class: "footer-container" }, hAsync("div", { key: '7bbaebdf46638ffa1946e7c5be6970c8a1e586bb', class: { 'footer-copyright': true, 'd-none': !renderCopyright } }, hAsync("slot", { key: 'c1601db6edc32929d84897330654dbec24bb8543', onSlotchange: this.handleSlotChange, name: "copyright" })), hAsync("div", { key: '1339ee3a91e8f18d757333b74053291080d95e2b', class: { 'footer-meta': true, 'd-none': !renderMeta } }, hAsync("slot", { key: 'aa98ffd65b0138b198e057dbd2c96368bf92c0b0', onSlotchange: this.handleSlotChange, name: "meta" })))))));
     }
     get host() { return getElement(this); }
     static get style() { return postFooterCss(); }
@@ -13179,10 +13305,10 @@ class PostHeader {
             }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, this.hasLocalNav && !this.hasTitle && (hAsync("div", { class: "local-nav" }, hAsync("slot", { name: "local-nav" }))), hAsync("div", { class: "burger-menu-body" }, hAsync("slot", { name: "audience" }), hAsync("slot", { name: "main-nav" })), hAsync("div", { class: "burger-menu-footer" }, hAsync("slot", { name: "global-nav-secondary" }), hAsync("slot", { name: "language-menu" }))));
     }
     render() {
-        return (hAsync(Host, { key: 'cdd9dc28893d6b4707e70cc4c8fd0940903e9062', "data-version": version$1, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, hAsync("header", { key: '528563b69ff8f0452775b386a98de59e934c802d' }, hAsync("div", { key: '1f0ab8f7288a63bdd8070bebc5651ffdc9ebfd42', class: "global-header" }, hAsync("div", { key: 'd25d70eddb6d4edeb3be26b313b57980761979bf', class: "section" }, hAsync("div", { key: 'fe284d8015bff65be10e2231147523640c4910d4', class: "logo" }, hAsync("slot", { key: '0c6854d79f4e9695e99961481337b327af8c142c', name: "post-logo" })), hAsync("div", { key: '6d0b33a967dc32760f3d3cf74fc794a1cb622327', class: "sliding-controls" }, (hAsync("div", { key: '6ae13d6b39c19d3953fc719b0fca5cfbfa1c57b7', class: "audience" }, hAsync("slot", { key: '49d3954b3c54d898ad473a0bf7d2566f2764638c', name: "audience" }))), hAsync("slot", { key: 'c19c56d0b5c56c278b33c16ded66473fb44bfa3d', name: "global-nav-primary" }), [
+        return (hAsync(Host, { key: '4ae4873c57cd307d3a4073f3d712bcf975528a90', "data-version": version$1, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, hAsync("header", { key: 'cbc743a8981f4bbc3d42807244d88edba88e6a6c' }, hAsync("div", { key: 'f39c122246336d0de803353d9abb9e573459073e', class: "global-header" }, hAsync("div", { key: 'a76628c6501851bbfd597e0106847da12dc0b705', class: "section" }, hAsync("div", { key: 'b703c54159955ae272378aab5172f0bcd1b638d1', class: "logo" }, hAsync("slot", { key: 'a55336f3bee22b2c9a2cb0426b5e04ba5c8f29c4', name: "post-logo" })), hAsync("div", { key: '9b6db729465dae5c503d461a115af296730b2ce6', class: "sliding-controls" }, (hAsync("div", { key: 'cf4124ae4aaf47c2445499ce08ebb15076ac4bf2', class: "audience" }, hAsync("slot", { key: '830003c8b3b50abeb9d82bdfde83212f20a4da3d', name: "audience" }))), hAsync("slot", { key: '458afb2da52853fbc9bc066fc487fcf77df0d2a0', name: "global-nav-primary" }), [
             hAsync("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
             hAsync("slot", { key: "language-menu", name: "language-menu" }),
-        ], hAsync("slot", { key: 'a7c75b4628234c282ea9556b7965a4e469783913', name: "post-login" }), this.hasMainNav && (hAsync("post-togglebutton", { key: 'e120687caa66facfb9721b6b6a8bc8691966a429', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, hAsync("span", { key: '43fd450ae79386d2c9bf29eb546cc66c399564e4' }, this.textMenu), hAsync("post-icon", { key: '863c5284f9f8b38e8e72390ead96eb7cccda9dd5', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), hAsync("post-icon", { key: 'f4ed6301b1836c51b0dbf9ee51040bb62dd06beb', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), hAsync("div", { key: 'e5c314eae3e25b9bfb23fcbe95684ea7bc99be41', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, hAsync("div", { key: '60dd8029f12ec03493b5ce81bc3e3b8338cd80e6', class: "section" }, hAsync("slot", { key: '8bbaa11f39bdf2ceb513fe698913c0350ca78776', name: "side-nav" }), hAsync("slot", { key: '0c1d5da1e42a1d96005c66de9c675c91dc2c8518', name: "title" }), this.hasTitle && hAsync("slot", { key: '8a2bb6822ba8033545e76b8f9a96f9bc7f498c9c', name: "local-nav" }), hAsync("slot", { key: '9c8df8ae91ad85ab58f9ee0bfef6a661fee59814', name: "main-nav" }), !this.hasTitle && hAsync("slot", { key: '85197bf72379b567c782bb54dbf77e6c17060895', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        ], hAsync("slot", { key: 'ffab20101950b7472c97ff0675f36903a6a66ebd', name: "post-login" }), this.hasMainNav && (hAsync("post-togglebutton", { key: 'd1cb44efb5ae024bc225487be4e592a406acf138', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, hAsync("span", { key: 'c33d2bb5c415f58829ad10026b9811684eac3d35' }, this.textMenu), hAsync("post-icon", { key: '7acb3d93aec23ef1c1efd9c9d52832395e66abf0', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), hAsync("post-icon", { key: '7b6fb17d50df4474ddd282d7e202a43c324c3b87', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), hAsync("div", { key: 'c7e6d91a0cd4a286b7186d0f41abdf9dc1e9ffd4', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, hAsync("div", { key: '670d00fb0a79ecc1f2bb45645887db13c7ea500f', class: "section" }, hAsync("slot", { key: '5d3b0c9b97be561875fc908b2b7bf4d558513318', name: "side-nav" }), hAsync("slot", { key: '39348fb8869f5623da026ed08ce69f727d9de7e6', name: "title" }), this.hasTitle && hAsync("slot", { key: '883097731548de45adec9cbbf7df1c80a37b76b5', name: "local-nav" }), hAsync("slot", { key: 'fbc77dee6ed73d8a13da75d3d695af80ce32c3af', name: "main-nav" }), !this.hasTitle && hAsync("slot", { key: '94a989295ae04cd8259ba22e583d41bcb4701881', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -13314,7 +13440,7 @@ class PostIcon {
         }).filter(([_key, value]) => value !== null));
     }
     render() {
-        return (hAsync(Host, { key: 'ce81db69bf77d09a0a331bac48cdaede7ff3cb8e', "data-version": version$1 }, hAsync("span", { key: '211f999da845687289fd991421f4315a090a67ba', style: this.getStyles() })));
+        return (hAsync(Host, { key: '917a78dbe4db46244348298b08a2176c9028048e', "data-version": version$1 }, hAsync("span", { key: '06f07755212e2b6a9a5957d7fd37751c62343be6', style: this.getStyles() })));
     }
     get host() { return getElement(this); }
     static get style() { return postIconCss(); }
@@ -13396,7 +13522,7 @@ class PostLanguageMenu {
     }
     componentDidLoad() {
         // Initially set variants and active language
-        // Handles cases where the language-menu is rendered after the language-options have been rendered
+        // Handles cases where the language-menu is rendered after the language-menu-items have been rendered
         this.updateChildrenVariant();
     }
     /**
@@ -13634,7 +13760,7 @@ class PostLinkarea {
         }));
     }
     render() {
-        return (hAsync(Host, { key: 'ceaff2e12e49f0df50b12770d803f9708b0d7a1c', "data-version": version$1, onClick: (e) => this.dispatchClick(e) }, hAsync("slot", { key: 'f4230e0a8c74fdc143dd1e60843a74a1221396f7' })));
+        return (hAsync(Host, { key: 'a1ab65608098bc992cd70f98a1c60cecd00f43c5', "data-version": version$1, onClick: (e) => this.dispatchClick(e) }, hAsync("slot", { key: 'f3042050a7075daa1e5cc35664bde6aa6bfcdac1' })));
     }
     get host() { return getElement(this); }
     static get style() { return postLinkareaCss(); }
@@ -13676,7 +13802,7 @@ class PostListbox {
                 option.highlighted = false;
             });
             this.highlightedIndex = -1;
-            this.filter('');
+            this.clearActive();
         };
         this.clearActive = () => {
             this.highlightedIndex = -1;
@@ -13780,7 +13906,7 @@ class PostListbox {
         this.updateSelection(event.detail);
     }
     render() {
-        return (hAsync(Host, { key: '55f1f7335a5eed38163aa58a43f091f130a9a2ff', "data-version": version$1, role: "listbox" }, hAsync("post-popovercontainer", { key: '303a6b38d8c5e5fae7b295dd0a58008c7b39a23f', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, hAsync("slot", { key: '165627beb864c21081796db3d380eded51e780dc', name: "blank-slate" }), hAsync("slot", { key: '57d445590587148bdb5e4d5d7338fb4003020a2a' }))));
+        return (hAsync(Host, { key: '793bdd535fb6b51bfd05012d180520e414519c0f', "data-version": version$1, role: "listbox" }, hAsync("post-popovercontainer", { key: 'd88195a37625fd29c47d4a8cc3ec34e0c92caa5f', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, hAsync("slot", { key: '6882e0cdcf7b277b47a349244382eeb7f3f525e1', name: "blank-slate" }), hAsync("slot", { key: 'dd71f5d59621097df38cfbc3b69cdfc805a54272' }))));
     }
     get host() { return getElement(this); }
     static get style() { return postListboxCss(); }
@@ -13817,9 +13943,9 @@ class PostListboxOption {
         this.highlighted = false;
     }
     render() {
-        return (hAsync(Host, { key: '201be2928d48dfa1f3d1183e7453042c0296de19', "data-version": version$1, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
+        return (hAsync(Host, { key: 'c2e1c5052d742c62e82eaac30a01d525048b3a2e', "data-version": version$1, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
             /* Prevent focus change from triggering onblur event in post-autocomplete */
-            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, hAsync("span", { key: 'cbba5a8fe218d6a4b99c70bc38077266361d2840', class: "option-content" }, this.value, hAsync("span", { key: '721e1ee9848f73b1020e5847493c2232d2ae0754', class: "option-description" }, hAsync("slot", { key: '1e54aab82416250673ca448af8de308b0c2f8ade' }))), this.selected && hAsync("post-icon", { key: '3badd4a9cea72cb41aaf160cfa2a09dd343681b0', "aria-hidden": "true", name: "checkmark" })));
+            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, hAsync("span", { key: '2b0cdab57c328df649c1353c41e2c4cfe57378d0', class: "option-content" }, this.value, hAsync("span", { key: 'e5807160223e87095dc3c0c076ec84317050cf18', class: "option-description" }, hAsync("slot", { key: '45f0020b9eebe13b84880a842c095daa51cf0feb' }))), this.selected && hAsync("post-icon", { key: '80a23567a10075cbc8269f4769dd7d8aba7b2961', "aria-hidden": "true", name: "checkmark" })));
     }
     static get style() { return postListboxOptionCss(); }
     static get cmpMeta() { return {
@@ -13866,7 +13992,7 @@ class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (hAsync(Host, { key: 'b9d1a0fcdbbb7789863bd89d0cb1154f432d7749', "data-version": version$1 }, hAsync(LogoTag, { key: 'e9e5f76950b4e95a9dc8d8f961c75f635007b61f', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, hAsync("span", { key: '7f9647d7fc00d1e79e544cbdd11fce5313b2bc83', class: "description" }, hAsync("slot", { key: '8eb8bb0385b14a98aadf1cd956d74972179bee6b', onSlotchange: () => this.checkDescription() })), hAsync("svg", { key: '1bc78071d7ee521a249452af9f8b34108297205c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, hAsync("g", { key: '9d10890ce19c40c38a976dbbbcb9e3939611f765', id: "Logo" }, hAsync("rect", { key: 'c0f9312024721329e2427a623c78658d094d039c', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), hAsync("polygon", { key: '36f41cc32b0a1d92ba4c1b8cb56e9c6f2b454a4f', 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" }), hAsync("path", { key: 'e32537010333ac42f7614203062b424c4feb819f', 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" }))))));
+        return (hAsync(Host, { key: 'dd8ddb0dcbed8062ee5adecf2a26ad98b42c94b1', "data-version": version$1 }, hAsync(LogoTag, { key: 'f4d8ad34cdd455c3e2096ce26db7bc775d7e05c3', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, hAsync("span", { key: '87a58c2904f3dae5406b5652787ca1d99dbda0dc', class: "description" }, hAsync("slot", { key: 'ae69c86c4bfed42b25aafa948f13989c31833466', onSlotchange: () => this.checkDescription() })), hAsync("svg", { key: 'e51164151a1a53971414ea37af5085f99575fc36', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, hAsync("g", { key: 'fa946d3ded62128ca4469b160103b464eb59329b', id: "Logo" }, hAsync("rect", { key: '18424ee0ca3256f9169d8dac6223df3d49cb09b9', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), hAsync("polygon", { key: '96381aeedbc8536fd551ec8ac4161db842b3bfc9', 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" }), hAsync("path", { key: 'c1bbdb1bb687390d59ec2e6dcf83e80d1606582f', 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 style() { return postLogoCss(); }
@@ -14016,7 +14142,7 @@ class PostMainnavigation {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (hAsync(Host, { key: '374379b09ad5578002153a0a80afaf9308f1c964', version: version$1, class: this.canScroll ? 'scrollable' : '' }, hAsync("div", { key: 'b78537cec32cd23c7908482d73b7624e4662b1c8', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, hAsync("post-icon", { key: 'd196c0f3b480f5ede486945c684afe4a06a96af0', "aria-hidden": "true", name: "chevronleft" })), hAsync("nav", { key: '5ee27a1b6cfc8aa59820514708485b334837c09d', ref: el => (this.navbar = el), "aria-label": this.textMain }, hAsync("slot", { key: 'e0a1719713e59899ec4fd1ff057ab5e3c13f7069' })), hAsync("div", { key: 'd1e2b456cadec20bb9c857fee23a3955ab20a2b2', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, hAsync("post-icon", { key: 'dec56cf1fb67c5afb597936d0f99e6389517819f', "aria-hidden": "true", name: "chevronright" }))));
+        return (hAsync(Host, { key: '9fe43f86cab360591a15a033e0dc657096a69c00', version: version$1, class: this.canScroll ? 'scrollable' : '' }, hAsync("div", { key: 'f68ea70e332336e99c0b51b19e33647b40fcfbb4', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, hAsync("post-icon", { key: 'fac01a93fd7cbfe2548a4d049d59f0bc6d01af63', "aria-hidden": "true", name: "chevronleft" })), hAsync("nav", { key: '7787a27e76350e9e86a97a58a20abe1286786ff7', ref: el => (this.navbar = el), "aria-label": this.textMain }, hAsync("slot", { key: '357a8f5fe1e7b6bea5ae67d87c979f785ea24b82' })), hAsync("div", { key: 'ce6091a9466fcd17aca39fcb5d6c204e1782c95d', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, hAsync("post-icon", { key: '92d35b38a453326701a0837e6187abf82fa37bf4', "aria-hidden": "true", name: "chevronright" }))));
     }
     get host() { return getElement(this); }
     static get style() { return postMainnavigationCss(); }
@@ -14332,7 +14458,7 @@ class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (hAsync(Host, { key: 'd181a65a25eafbbc645c717ee2f447caf1ab040a', version: version$1 }, hAsync("div", { key: '7bd6003c2e696e64a14b98a94e6c67d66d143192', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, hAsync("div", { key: 'c79d10e279a37d94c2849ce4cac7bf4d260a0ca3', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (hAsync("p", { key: '7e7769acb5391cb33958b1bd9739583e25def2cc', class: "megadropdown-title" }, this.megadropdownTitle)), hAsync("div", { key: 'fe7b63bd6b9daff336e599cd9ca43338a36fa595', class: "megadropdown-content" }, hAsync("slot", { key: 'cc19bcec12adee943391ec818bcfa8cd8290cb49' })), this.device === 'desktop' ? (hAsync("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (hAsync("button", { onClick: () => this.hide(true), class: "back-button" }, hAsync("post-icon", { name: "arrowleft" }), this.textBack))))));
+        return (hAsync(Host, { key: '2cc8228a628b2a0380acf4fcac8daa1ef1a7bf2f', version: version$1 }, hAsync("div", { key: '709fe50f23fd355bd97add916b451d5abf653780', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, hAsync("div", { key: 'e2bac29e70e39800ee55c8454f78b6889b241121', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (hAsync("p", { key: '6c28bc5d3e3b8c8dab385f13a4b9b8a7b7ba70b9', class: "megadropdown-title" }, this.megadropdownTitle)), hAsync("div", { key: 'bf71d0d7b4a84ae1238f27373d195403d8a1f812', class: "megadropdown-content" }, hAsync("slot", { key: '9812bec733ca678b1a3681d90859082e57fbd64a' })), this.device === 'desktop' ? (hAsync("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (hAsync("button", { onClick: () => this.hide(true), class: "back-button" }, hAsync("post-icon", { name: "arrowleft" }), this.textBack))))));
     }
     get host() { return getElement(this); }
     static get style() { return postMegadropdownCss(); }
@@ -14437,7 +14563,7 @@ class PostMegadropdownTrigger {
         this.megadropdown.toggle();
     }
     render() {
-        return (hAsync(Host, { key: '7dea071ab1a606e7427631e45a1521aef0be85fe', "data-version": version$1 }, hAsync("button", { key: '4486549cfbad6f00de4a44c7af550dac428b9450', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, hAsync("span", { key: '566388f5cc5fd7eb4227de6fcd0205a3c3c0d54d' }, hAsync("span", { key: 'e874004dc5a3d8bf3a422c9b783c24dd6968cf74', innerHTML: this.slottedContent }), hAsync("span", { key: 'd89b1f6867f2b41934edb4a0865aebbdb21741a9', "aria-hidden": "true" }, hAsync("slot", { key: 'fed72c4e9ad605db0d65c1c32e91976ae3147a4b' }))), hAsync("post-icon", { key: '882e65fd30695db2b8a74be8258e69eed90b8f78', name: "chevrondown" }))));
+        return (hAsync(Host, { key: 'd5242fd9126f3486f731ed6f369f3a6c38a5d1e9', "data-version": version$1 }, hAsync("button", { key: '6af086a50a9c788b35ba542531950b69a5e249da', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, hAsync("span", { key: 'dacf0bd6dc576fa7c70353c98eacb3d81ddf83e5' }, hAsync("span", { key: '0c7b950ea9bfcae62b367900d78f155edc49de72', innerHTML: this.slottedContent }), hAsync("span", { key: '999325546eb3196f6e704ebeb18f436ff3d53756', "aria-hidden": "true" }, hAsync("slot", { key: '08fa107b944a87edf156ea7d5e12692eba64952d' }))), hAsync("post-icon", { key: 'eb32199b1ff6951b6025c1e4919674f5419f7d49', name: "chevrondown" }))));
     }
     get host() { return getElement(this); }
     static get style() { return postMegadropdownTriggerCss(); }
@@ -14585,17 +14711,32 @@ class PostMenu {
         this.toggleMenu.emit(this.isVisible);
         if (this.isVisible) {
             this.lastFocusedElement = this.root?.activeElement;
-            requestAnimationFrame(() => {
-                const menuItems = this.getSlottedItems();
-                if (menuItems.length > 0) {
-                    menuItems[0].focus();
-                }
-            });
+            // Only focus the first item if the trigger was keyboard-focus-visible
+            // that's the browser's own signal for a keyboard-driven interaction.
+            if (this.wasFocusVisible(this.lastFocusedElement)) {
+                requestAnimationFrame(() => {
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                });
+            }
         }
         else if (this.lastFocusedElement) {
             this.lastFocusedElement.focus();
         }
     }
+    wasFocusVisible(element) {
+        if (!element)
+            return false;
+        try {
+            return element.matches(':focus-visible');
+        }
+        catch {
+            // Not supported, fall back to always focusing
+            return true;
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (menuItems.length === 0) {
@@ -14647,7 +14788,7 @@ class PostMenu {
         ]));
     }
     render() {
-        return (hAsync(Host, { key: 'ec2d0c28803ab242f28e942c52d03b38d40f3704', "data-version": version$1 }, hAsync("post-popovercontainer", { key: 'c2bbf5c95e200aecbdc55b94676ab1b1b0a32d13', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, hAsync("div", { key: '80e56e976e944955f72b504b33ee3a16117f4551', part: "post-menu" }, hAsync("slot", { key: 'cab13b8104f0be049e31fe5b3eca3af85bec0869', name: "header" }), hAsync("slot", { key: 'acbbd8565bb90c91dad4713fbc4e8c50d10390e8' })))));
+        return (hAsync(Host, { key: 'cc6ede4cdacb722006475de88385b041d7e42dcb', "data-version": version$1 }, hAsync("post-popovercontainer", { key: '3931f604aad477441112fd0b5a4800c8f034abbb', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, hAsync("div", { key: '1b0adb12bb1369d14a6bcfac3c956090eb66572a', part: "post-menu" }, hAsync("slot", { key: '9c2518e7e9e6ccaa64d486a90b5fc7eec15c24b8', name: "header" }), hAsync("slot", { key: 'd28df1e411010aabe083255cd5e5ece4bd62424d' })))));
     }
     get host() { return getElement(this); }
     static get style() { return postMenuCss(); }
@@ -14769,7 +14910,7 @@ class PostMenuTrigger {
         return null;
     }
     render() {
-        return (hAsync(Host, { key: '2e0560835a4202f9a84990a60305bf7dc8adbc98', "data-version": version$1 }, hAsync("slot", { key: 'd175e8bc5ddb253476f9795d7b0b2df2797c46aa' })));
+        return (hAsync(Host, { key: 'fcdfd58ba24cd5269461477ac3d00a53ccf2ea1b', "data-version": version$1 }, hAsync("slot", { key: 'b3a6b137bf61accd32eb1bec5af5e39e68ec6613' })));
     }
     get host() { return getElement(this); }
     static get style() { return postMenuTriggerCss(); }
@@ -14805,7 +14946,7 @@ class PostNumberInput {
         this.isIncrementDisabled = false;
         this.isDecrementDisabled = false;
         this.small = false;
-        this.setupInput = debounce$1(50, () => {
+        this.setupInput = debounce(50, () => {
             this.input = this.input ?? getSlottedElement(this.host, 'input[type="number"]');
             if (!this.input)
                 return;
@@ -14879,10 +15020,10 @@ class PostNumberInput {
     }
     render() {
         const areButtonsShown = !!this.input;
-        return (hAsync(Host, { key: '770a0b0fe9b018afcb81f4477f45e6ea8ce27ad7', "data-version": version$1, class: {
+        return (hAsync(Host, { key: 'aeb366d1738707172f9ae3e154f9a93a10caa016', "data-version": version$1, class: {
                 'number-input-sm': this.small,
                 'disabled': this.isDisabled,
-            } }, areButtonsShown && (hAsync("div", { key: '8e599b55dc4362674719df75a573bf9ce34e79ff', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, hAsync("post-icon", { key: 'aa55be92c51df3cc1b7f006a4400090eb345747c', name: "minus" }))), hAsync("div", { key: '030ea2a621529e61757edfc5a79fa353327a8102', class: "input-container" }, hAsync("slot", { key: '800d325da194bd0f32eab2a2bba21211aaf1829b', onSlotchange: () => this.setupInput() })), areButtonsShown && (hAsync("div", { key: '901dc835f21fbb51146d93f7f34775c600163993', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, hAsync("post-icon", { key: '1a7b93951f1f9978a1d321b33b2083774dcf86b0', name: "plus" })))));
+            } }, areButtonsShown && (hAsync("div", { key: '9037651a4e2f65ca62f1f4ebe0575a25383c77c7', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, hAsync("post-icon", { key: '43ac843cc7df50981dc92eeb5405b415d530a415', name: "minus" }))), hAsync("div", { key: 'f49907424a6cc6802ee9066ef42dcc2c43b1bbfd', class: "input-container" }, hAsync("slot", { key: 'f649b968dac37fbb5f5a643853aedbc90653ed6c', onSlotchange: () => this.setupInput() })), areButtonsShown && (hAsync("div", { key: '66d06189252e360f43c3e63fbdce300be9606069', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, hAsync("post-icon", { key: '44bcff6c698f87eac09d1aeaa8b6af6436cac572', name: "plus" })))));
     }
     get host() { return getElement(this); }
     static get style() { return postNumberInputCss(); }
@@ -14936,7 +15077,7 @@ class PostPagination {
         this.page = 1;
         this.lastWindowWidth = window.innerWidth;
         this.loaded = false;
-        this.debouncedResize = debounce(this.handleResizeInternal.bind(this), RESIZE_DEBOUNCE_MS);
+        this.debouncedResize = debounce$1(this.handleResizeInternal.bind(this), RESIZE_DEBOUNCE_MS);
         this.measurementTimeoutId = null;
     }
     handlePropsChange() {
@@ -15546,7 +15687,7 @@ __decorate$d([
     Type('string')
 ], PostPagination.prototype, "textLast", void 0);
 
-const postPopoverCss = () => `*{box-sizing:border-box}:host{display:contents}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:8px;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:8px;flex-grow:1}`;
+const postPopoverCss = () => `*{box-sizing:border-box}:host{display:contents}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:8px;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:8px;flex-grow:1}post-closebutton{color-scheme:light}`;
 
 var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -15630,10 +15771,10 @@ class PostPopover {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'a389be5fa8b44b8f606041313a5c68897e12fbe9', "data-version": version$1 }, hAsync("post-popovercontainer", { key: 'eedea7fb9aec40bb76d43a17be36ba72c9db763f', arrow: this.arrow, placement: this.placement, edgeGap: this.edgeGap, ref: e => {
+        return (hAsync(Host, { key: '61399669708d5983911748d652ef1a0d7e0562a0', "data-version": version$1 }, hAsync("post-popovercontainer", { key: '561bbe71d735acec27421160623169f7f7f8134e', arrow: this.arrow, placement: this.placement, edgeGap: this.edgeGap, autoHide: true, ref: e => {
                 if (e)
                     this.popoverRef = e;
-            } }, hAsync("div", { key: '699d1b9923ea5bdf2fc822cd45f32a087099557a', class: "popover-container" }, hAsync("div", { key: 'f80a86811d07a9a2478e28e7c8df476000850f08', class: "popover-content" }, hAsync("slot", { key: '06fc1c9b71dbdb59c12889d378c59a183a8e9f64' })), hAsync("post-closebutton", { key: 'a8ff2d07eef92aa6e88f4ff7c9f42b59395c6760', onClick: () => this.hide() }, this.textClose)))));
+            } }, hAsync("div", { key: 'f7e8d0ae5556cfd429c43b12c3d3d0b19e3cdd46', class: "popover-container" }, hAsync("div", { key: '74c9076d67696ff1d1a295560140864b26f59f60', class: "popover-content" }, hAsync("slot", { key: '5c63af09f545ed7fe3fcfd810fccd7db9da05e8a' })), hAsync("post-closebutton", { key: 'f8fd8c7ba548b912c3fe84994810add92fb470d9' }, this.textClose)))));
     }
     get host() { return getElement(this); }
     static get style() { return postPopoverCss(); }
@@ -20745,7 +20886,7 @@ class PostPopoverTrigger {
     focusTrigger() {
         // Restores focus to the trigger
         if (!this.popoverOpen && this.trigger) {
-            this.trigger.focus();
+            this.trigger.focus({ preventScroll: true });
         }
     }
     constructor(hostRef) {
@@ -20781,7 +20922,7 @@ class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (hAsync(Host, { key: '8100af4eaff1f8b790d7019414b078018ffc5ed1', "data-version": version$1 }, hAsync("slot", { key: '91e7f8f31bdc84290618a5c8b29e38cca77de177', onSlotchange: () => this.setupTrigger() })));
+        return (hAsync(Host, { key: 'a8a3be80d30404564add3fcbef1a24b4f59d4614', "data-version": version$1 }, hAsync("slot", { key: '1fada9d0241aa9e8ab6392e63feb61dc2c686dd5', onSlotchange: () => this.setupTrigger() })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -20812,6 +20953,7 @@ __decorate$b([
  * @see https://floating-ui.com/docs/virtual-elements
  */
 
+const sides = ['top', 'right', 'bottom', 'left'];
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -20904,12 +21046,12 @@ function getOppositePlacement(placement) {
   return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
+  var _padding$top, _padding$right, _padding$bottom, _padding$left;
   return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
+    top: (_padding$top = padding.top) != null ? _padding$top : 0,
+    right: (_padding$right = padding.right) != null ? _padding$right : 0,
+    bottom: (_padding$bottom = padding.bottom) != null ? _padding$bottom : 0,
+    left: (_padding$left = padding.left) != null ? _padding$left : 0
   };
 }
 function getPaddingObject(padding) {
@@ -20984,13 +21126,9 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
         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;
+  const alignment = getAlignment(placement);
+  if (alignment) {
+    coords[alignmentAxis] += commonAlign * (alignment === 'end' ? 1 : -1) * (rtl && isVertical ? -1 : 1);
   }
   return coords;
 }
@@ -21039,10 +21177,7 @@ async function detectOverflow(state, options) {
     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
-  } : {
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) && (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
     x: 1,
     y: 1
   };
@@ -21215,17 +21350,16 @@ const arrow$1 = options => ({
 
     // 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);
+    const offset = clamp(minPadding, 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;
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < minPadding ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < minPadding ? center - minPadding : center - max : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
       data: {
@@ -21372,6 +21506,76 @@ const flip$1 = function (options) {
   };
 };
 
+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$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects,
+        platform
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await platform.detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await platform.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));
@@ -21428,12 +21632,19 @@ const inline$1 = function (options) {
         y
       } = evaluate(options, state);
       const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
+
+      // No rects (e.g. a hidden or detached reference, or a collapsed range) —
+      // keep the existing reference rect rather than resetting to an invalid
+      // one with non-finite values.
+      if (!nativeClientRects.length) {
+        return {};
+      }
       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) {
+        if (clientRects.length === 2 && (clientRects[0].left > clientRects[1].right || clientRects[1].left > clientRects[0].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;
         }
@@ -21448,18 +21659,12 @@ const inline$1 = function (options) {
             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,
+            return rectToClientRect({
               x: left,
-              y: top
-            };
+              y: top,
+              width: right - left,
+              height: bottom - top
+            });
           }
           const isLeftSide = getSide(placement) === 'left';
           const maxRight = max(...clientRects.map(rect => rect.right));
@@ -21467,20 +21672,12 @@ const inline$1 = function (options) {
           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 rectToClientRect({
+            x: minLeft,
+            y: top,
+            width: maxRight - minLeft,
+            height: bottom - top
+          });
         }
         return fallback;
       }
@@ -21630,23 +21827,16 @@ const shift$1 = function (options) {
         y
       };
       const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const crossAxis = getSideAxis(getSide(placement));
+      const crossAxis = getSideAxis(placement);
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
+      const clampCoord = (axis, coord) => clamp(coord + overflow[axis === 'y' ? 'top' : 'left'], coord, coord - overflow[axis === 'y' ? 'bottom' : 'right']);
       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);
+        mainAxisCoord = clampCoord(mainAxis, mainAxisCoord);
       }
       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);
+        crossAxisCoord = clampCoord(crossAxis, crossAxisCoord);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -21677,6 +21867,7 @@ const limitShift$1 = function (options) {
   return {
     options,
     fn(state) {
+      var _rawOffset$mainAxis, _rawOffset$crossAxis;
       const {
         x,
         y,
@@ -21702,9 +21893,8 @@ const limitShift$1 = function (options) {
         mainAxis: rawOffset,
         crossAxis: 0
       } : {
-        mainAxis: 0,
-        crossAxis: 0,
-        ...rawOffset
+        mainAxis: (_rawOffset$mainAxis = rawOffset.mainAxis) != null ? _rawOffset$mainAxis : 0,
+        crossAxis: (_rawOffset$crossAxis = rawOffset.crossAxis) != null ? _rawOffset$crossAxis : 0
       };
       if (checkMainAxis) {
         const len = mainAxis === 'y' ? 'height' : 'width';
@@ -21736,6 +21926,12 @@ const limitShift$1 = function (options) {
   };
 };
 
+// Method syntax keeps callback parameters bivariant, but expressing the
+// explicit `| undefined` required by `exactOptionalPropertyTypes` needs
+// property syntax, which is contravariant under `strictFunctionTypes`.
+// Extracting the function from a method position restores that bivariance so
+// consumers can still assign callbacks with narrower parameter types.
+
 /**
  * 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
@@ -21750,7 +21946,6 @@ const size$1 = function (options) {
     name: 'size',
     options,
     async fn(state) {
-      var _state$middlewareData, _state$middlewareData2;
       const {
         placement,
         rects,
@@ -21782,24 +21977,21 @@ const size$1 = function (options) {
       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;
+      const shiftData = state.middlewareData.shift;
+      const noShift = !shiftData;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
-      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+      if (shiftData != null && shiftData.enabled.x) {
         availableWidth = maximumClippingWidth;
       }
-      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+      if (shiftData != null && shiftData.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));
+          availableWidth = width - 2 * max(overflow.left, overflow.right);
         } else {
-          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+          availableHeight = height - 2 * max(overflow.top, overflow.bottom);
         }
       }
       await apply({
@@ -21955,7 +22147,7 @@ function getParentNode(node) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
   if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
+    return (node.ownerDocument || node).body;
   }
   if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
     return parentNode;
@@ -22052,10 +22244,7 @@ function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
   if (isFixed === void 0) {
     isFixed = false;
   }
-  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
-    return false;
-  }
-  return isFixed;
+  return !!floatingOffsetParent && isFixed && floatingOffsetParent === getWindow(element);
 }
 
 function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
@@ -22082,12 +22271,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   let y = (clientRect.top + visualOffsets.y) / scale.y;
   let width = clientRect.width / scale.x;
   let height = clientRect.height / scale.y;
-  if (domElement) {
+  if (domElement && offsetParent) {
     const win = getWindow(domElement);
-    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    const offsetWin = isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentWin = win;
     let currentIFrame = getFrameElement(currentWin);
-    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+    while (currentIFrame && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle$1(currentIFrame);
@@ -22151,7 +22340,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let scale = createCoords(1);
   const offsets = createCoords(0);
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+  if (isOffsetParentAnElement || !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -22172,18 +22361,17 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
 }
 
 function getClientRects(element) {
-  return Array.from(element.getClientRects());
+  return element.getClientRects ? 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;
+function getDocumentRect(html) {
+  const scroll = getNodeScroll(html);
+  const body = html.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);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(html);
   const y = -scroll.scrollTop;
   if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
@@ -22200,7 +22388,11 @@ function getDocumentRect(element) {
 // calculation is affected by unusual styles.
 // Most scrollbars leave 15-18px of space.
 const SCROLLBAR_MAX = 25;
-function getViewportRect(element, strategy) {
+function getViewportRect(element, strategy, rootBoundary) {
+  if (rootBoundary === void 0) {
+    rootBoundary = 'viewport';
+  }
+  const isLayoutViewport = rootBoundary === 'layoutViewport';
   const win = getWindow(element);
   const html = getDocumentElement(element);
   const visualViewport = win.visualViewport;
@@ -22209,31 +22401,42 @@ function getViewportRect(element, strategy) {
   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;
+    // Client coordinates are relative to the layout viewport, except in
+    // WebKit with an `absolute` strategy, where they are relative to the
+    // visual viewport.
+    const layoutRelativeClientCoords = !isWebKit() || strategy === 'fixed';
+    if (isLayoutViewport) {
+      if (!layoutRelativeClientCoords) {
+        x = -visualViewport.offsetLeft;
+        y = -visualViewport.offsetTop;
+      }
+    } else {
+      width = visualViewport.width;
+      height = visualViewport.height;
+      if (layoutRelativeClientCoords) {
+        x = visualViewport.offsetLeft;
+        y = visualViewport.offsetTop;
+      }
     }
   }
   const windowScrollbarX = getWindowScrollBarX(html);
-  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
-  // visual width of the <html> but this is not considered in the size
-  // of `html.clientWidth`.
+  // `scrollbar-gutter: stable` on the <html> reserves gutter space that shrinks
+  // the visual width but isn't reflected in `html.clientWidth`, so subtract it.
+  // Only the inline-end (right) gutter can hold the scrollbar; `both-edges` also
+  // reserves an empty inline-start gutter that clips nothing, so exclude just
+  // the one scrollbar-side gutter — halve the measured (two-gutter) total. A
+  // left-side scrollbar (`windowScrollbarX > 0`) is already handled by
+  // `getHTMLOffset`/`visualViewport.width`; skip it here.
   if (windowScrollbarX <= 0) {
     const doc = html.ownerDocument;
     const body = doc.body;
     const bodyStyles = getComputedStyle(body);
     const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
-    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
-    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
-      width -= clippingStableScrollbarWidth;
+    const reservedWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    const gutter = getComputedStyle(html).scrollbarGutter === 'stable both-edges' ? reservedWidth / 2 : reservedWidth;
+    if (gutter <= SCROLLBAR_MAX) {
+      width -= gutter;
     }
-  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
-    // If the <body> scrollbar is on the left, the width needs to be extended
-    // by the scrollbar amount so there isn't extra space on the right.
-    width += windowScrollbarX;
   }
   return {
     width,
@@ -22248,7 +22451,7 @@ 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 scale = getScale(element);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -22262,8 +22465,8 @@ function getInnerBoundingClientRect(element, strategy) {
 }
 function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
   let rect;
-  if (clippingAncestor === 'viewport') {
-    rect = getViewportRect(element, strategy);
+  if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
+    rect = getViewportRect(element, strategy, clippingAncestor);
   } else if (clippingAncestor === 'document') {
     rect = getDocumentRect(getDocumentElement(element));
   } else if (isElement(clippingAncestor)) {
@@ -22279,13 +22482,6 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   }
   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
@@ -22296,7 +22492,7 @@ function getClippingElementAncestors(element, cache) {
     return cachedResult;
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
-  let currentContainingBlockComputedStyle = null;
+  let lastKeptComputedStyle = null;
   const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
@@ -22304,16 +22500,20 @@ function getClippingElementAncestors(element, cache) {
   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 && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    // Position of the containing block chain below the current node. A fixed
+    // element whose containing block hasn't been found yet is a fixed chain.
+    const lastPosition = lastKeptComputedStyle ? lastKeptComputedStyle.position : elementIsFixed ? 'fixed' : '';
+
+    // A non-containing ancestor does not clip the element when the chain
+    // below it escapes it: a fixed chain escapes all ancestors up to the
+    // next containing block, an absolute chain escapes static ancestors.
+    const shouldDropCurrentNode = !currentNodeIsContaining && (lastPosition === 'fixed' || lastPosition === 'absolute' && computedStyle.position === 'static');
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      // Record last containing block for next iteration.
-      currentContainingBlockComputedStyle = computedStyle;
+      // The kept node carries the chain position for the next iteration.
+      lastKeptComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -22323,7 +22523,7 @@ function getClippingElementAncestors(element, cache) {
 
 // Gets the maximum area that the element is visible in due to any number of
 // clipping ancestors.
-function getClippingRect(_ref) {
+function getClippingRect$1(_ref) {
   let {
     element,
     boundary,
@@ -22373,13 +22573,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     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 (isOffsetParentAnElement || !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -22387,12 +22581,13 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       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();
+
+  // 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.
+  if (!isOffsetParentAnElement && documentElement) {
+    offsets.x = getWindowScrollBarX(documentElement);
   }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
@@ -22477,7 +22672,7 @@ function isRTL(element) {
 const platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,
   getDocumentElement,
-  getClippingRect,
+  getClippingRect: getClippingRect$1,
   getOffsetParent,
   getElementRects,
   getClientRects,
@@ -22492,7 +22687,7 @@ function rectsAreEqual(a, b) {
 }
 
 // https://samthor.au/2021/observing-dom/
-function observeMove(element, onMove) {
+function observeMove(element, onMove, ancestorResize) {
   let io = null;
   let timeoutId;
   const root = getDocumentElement(element);
@@ -22535,13 +22730,22 @@ function observeMove(element, onMove) {
     let isFirstUpdate = true;
     function handleObserve(entries) {
       const ratio = entries[0].intersectionRatio;
+
+      // The entry is a snapshot, so the reference may have moved since the
+      // intersection was computed (under performance constraints, or between
+      // consecutive frames of a multi-frame layout shift). The reported ratio
+      // and the observed area are stale in that case and cannot be trusted to
+      // detect subsequent movement, so refresh regardless of the ratio.
+      if (!rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        return refresh();
+      }
       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.
+          // If the reference is clipped in place, the ratio is 0. Throttle
+          // the refresh to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
           }, 1000);
@@ -22549,16 +22753,6 @@ function observeMove(element, onMove) {
           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;
     }
 
@@ -22575,8 +22769,18 @@ function observeMove(element, onMove) {
     }
     io.observe(element);
   }
+  const win = getWindow(element);
+  // The window is a resize ancestor, so when `ancestorResize` is enabled its
+  // listener already runs the update on resize. Here we only need to rebuild
+  // the `IntersectionObserver` for the new root size, skipping a redundant
+  // update. When `ancestorResize` is disabled, this becomes the sole update.
+  const handleResize = () => refresh(ancestorResize);
+  win.addEventListener('resize', handleResize);
   refresh(true);
-  return cleanup;
+  return () => {
+    win.removeEventListener('resize', handleResize);
+    cleanup();
+  };
 }
 
 /**
@@ -22601,12 +22805,10 @@ function autoUpdate(reference, floating, update, options) {
   const referenceEl = unwrapElement(reference);
   const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
   ancestors.forEach(ancestor => {
-    ancestorScroll && ancestor.addEventListener('scroll', update, {
-      passive: true
-    });
+    ancestorScroll && ancestor.addEventListener('scroll', update);
     ancestorResize && ancestor.addEventListener('resize', update);
   });
-  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update, ancestorResize) : null;
   let reobserveFrame = -1;
   let resizeObserver = null;
   if (elementResize) {
@@ -22692,6 +22894,13 @@ const flip = flip$1;
  */
 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
+ */
+const hide = hide$1;
+
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -22720,11 +22929,9 @@ const computePosition = (reference, floating, options) => {
   // 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 mergedOptions = options != null ? options : {};
   const platformWithCache = {
+    ...platform,
     ...mergedOptions.platform,
     _c: cache
   };
@@ -22749,6 +22956,77 @@ function popIn(el) {
     });
 }
 
+/**
+ * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
+ */
+const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
+/**
+ * A custom floating UI platform that restricts clipping rectangles to the safe area.
+ */
+const safeAreaPlatform = { ...platform, getClippingRect };
+/**
+ * Computes the clipping rectangle of an element while accounting for the safe area.
+ */
+async function getClippingRect(...args) {
+    const element = args[0].element;
+    // Check whether the clipping rectangle of the given element has already been computed during
+    // this pass.
+    const hit = this[CLIPPING_RECT_CACHE].get(element);
+    if (hit)
+        return hit;
+    // Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
+    // area.
+    const clippingRect = await platform.getClippingRect.apply(this, args);
+    applySafeArea(clippingRect, element);
+    this[CLIPPING_RECT_CACHE].set(element, clippingRect);
+    return clippingRect;
+}
+/**
+ * Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
+ *
+ * The safe area only applies to elements that the header can actually cover, which excludes
+ * elements without a header on their page, elements on a top layer and elements within the header.
+ */
+function applySafeArea(clippingRect, element) {
+    const headerElement = element.ownerDocument.querySelector('post-header');
+    if (headerElement === null)
+        return;
+    let parent = element;
+    while (!isLastTraversableNode(parent)) {
+        parent = getParentNode(parent);
+        if (!isHTMLElement(parent))
+            continue;
+        // Do not apply the safe area of the header to
+        // - elements that are on a top layer, such as a dialog.
+        // - elements that are located within the header itself.
+        if (isTopLayer(parent) || parent === headerElement)
+            return;
+    }
+    const headerRect = headerElement.getBoundingClientRect();
+    const top = Math.max(clippingRect.y, headerRect.bottom);
+    clippingRect.height -= top - clippingRect.y;
+    clippingRect.y = top;
+}
+/**
+ * Computes the coordinates that will position the `floating` element next to a given `reference`
+ * element while accounting for the safe area.
+ *
+ * The safe area is the part of the viewport that the header does not cover. Restricting the
+ * clipping rectangles to it makes floating elements behave as if they were clipped by the header.
+ */
+const computePositionWithSafeArea = (reference, floating, options) => {
+    // Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
+    options ?? (options = {});
+    return computePosition(reference, floating, {
+        ...options,
+        platform: {
+            ...safeAreaPlatform,
+            ...options.platform,
+            [CLIPPING_RECT_CACHE]: new Map(),
+        },
+    });
+};
+
 const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([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)))}:host([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)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(: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))}:host(:has(.arrow[dynamic-placement=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))}:host(:has(.arrow[dynamic-placement=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))}:host(:has(.arrow[dynamic-placement=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))}`;
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -22826,7 +23104,7 @@ class PostPopovercontainer {
         if (this.toggleTimeoutId || !target)
             return;
         this.eventTarget = target;
-        this.calculatePosition();
+        this.updatePosition();
         this.host.showPopover();
     }
     /**
@@ -22852,7 +23130,7 @@ class PostPopovercontainer {
         this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
-            this.calculatePosition();
+            this.updatePosition();
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
@@ -22964,17 +23242,14 @@ class PostPopovercontainer {
     startAutoupdates() {
         if (!this.eventTarget || !this.host)
             return;
-        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 ? Number.parseFloat(getComputedStyle(header).height) : 0;
+        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.updatePosition.bind(this));
     }
-    async calculatePosition() {
-        const { x, y, middlewareData, placement } = await this.computeMainPosition();
+    async updatePosition() {
+        const { x, y, middlewareData, placement } = await this.calculatePosition();
+        // Hide the popover if the target is outside the viewport
+        if (middlewareData.hide?.referenceHidden) {
+            this.host.hidePopover();
+        }
         const currentPlacement = placement.split('-')[0];
         this.dynamicPlacement = currentPlacement;
         // Position popover
@@ -22999,13 +23274,15 @@ class PostPopovercontainer {
             await this.updateSafeSpaceBoundaries(currentPlacement);
         }
     }
-    async computeMainPosition() {
+    async calculatePosition() {
         const gap = this.edgeGap;
         const isAligned = (this.placement || 'top').includes('-');
-        const flipMiddleware = flip({
-            padding: this.getHeaderHeight(),
-            crossAxis: false,
-        });
+        const flipMiddleware = [
+            // Flip the popover if the target moves outside the viewport
+            flip({ elementContext: 'reference', crossAxis: false }),
+            // Flip the popover if the popover itself moves outside the viewport
+            flip({ elementContext: 'floating', crossAxis: false }),
+        ];
         const shiftMiddleware = shift({
             padding: gap,
             limiter: limitShift({
@@ -23017,7 +23294,7 @@ class PostPopovercontainer {
             inline(),
             // Per floating-ui docs: for aligned placements (e.g. bottom-end),
             // flip should come before shift. For non-aligned, shift before flip.
-            ...(isAligned ? [flipMiddleware, shiftMiddleware] : [shiftMiddleware, flipMiddleware]),
+            ...(isAligned ? [...flipMiddleware, shiftMiddleware] : [shiftMiddleware, ...flipMiddleware]),
             size({
                 apply({ availableWidth, elements }) {
                     Object.assign(elements.floating.style, {
@@ -23029,7 +23306,12 @@ class PostPopovercontainer {
         if (this.arrow) {
             middleware.push(arrow({ element: this.arrowRef, padding: gap }));
         }
-        return computePosition(this.eventTarget, this.host, {
+        // Automatically hide the popover if the target moves outside the scrollport.
+        if (this.autoHide) {
+            // Per floating-ui docs: hide should generally be placed at the end.
+            middleware.push(hide({ strategy: 'referenceHidden' }));
+        }
+        return computePositionWithSafeArea(this.eventTarget, this.host, {
             placement: this.placement || 'top',
             strategy: 'fixed',
             middleware,
@@ -23096,9 +23378,9 @@ class PostPopovercontainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'bffef7c8067f21aa99c45deaaf2bc122ea455191', "data-version": version$1, popover: "auto" }, hAsync("div", { key: '023339edd5b36827e0051179bee464236bccc62a', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (hAsync("span", { key: 'ae921c38aa8c33ad8b37453a56d22ee7b4b9950c', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (hAsync(Host, { key: 'a6f41ad3ef982f9e9ec0d6450837d1cfdca73d16', "data-version": version$1, popover: "auto" }, hAsync("div", { key: '40afab436d5550fda44c8995139080161eab5b09', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (hAsync("span", { key: '580bd8fcaecb89334aca05001137a4d7cccd254a', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), hAsync("span", { key: 'f7c2720a3bedb808855628482c5b1f377e2719a8', part: "post-popovercontainer-border-mask" }), hAsync("slot", { key: 'e0fee3fded9fea41bc0260f45be0375e236463f9' }))));
+            } })), hAsync("span", { key: '61a6e4e8026832afc188edd5a74535716db65945', part: "post-popovercontainer-border-mask" }), hAsync("slot", { key: 'd79cb69a77dbba13ffa3c30e0393db4f3a669a12' }))));
     }
     get host() { return getElement(this); }
     static get style() { return postPopovercontainerCss(); }
@@ -23111,6 +23393,7 @@ class PostPopovercontainer {
             "offset": [2],
             "arrow": [4],
             "safeSpace": [513, "safe-space"],
+            "autoHide": [4, "auto-hide"],
             "dynamicPlacement": [32],
             "show": [64],
             "hide": [64],
@@ -23197,7 +23480,7 @@ class PostProgressbar {
         const max = this.getEffectiveMax();
         const value = this.getEffectiveValue(min, max);
         const percentage = ((value - min) / (max - min)) * 100;
-        return (hAsync(Host, { key: '434d38d2a3157820477b80831a8283ca9e427dfb', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, hAsync("div", { key: '862332d99d2b930258e20d2f4417cdfebc6e6333', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+        return (hAsync(Host, { key: 'c08b9b976c5cb34018e48c4dafe6b87207710ba5', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, hAsync("div", { key: '485eb6657d14ad5472bfbe822b1cd0eb50cd0129', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
     }
     get host() { return getElement(this); }
     static get style() { return postProgressbarCss(); }
@@ -23314,7 +23597,7 @@ class PostRating {
         }
     }
     render() {
-        return (hAsync(Host, { key: '082aaa831e204f0576c494bd9ce14364b7a34436', "data-version": version$1 }, hAsync("div", { key: '1c13ae74c34a1032fa680ce608aac0320178bd65', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (hAsync("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (hAsync(Host, { key: '0cf576670f16d4b8f88b714af12ded14aa1372b2', "data-version": version$1 }, hAsync("div", { key: 'a53c8f8f9c617a2bd3996fd5812c7af091497f55', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (hAsync("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -23354,7 +23637,7 @@ __decorate$8([
 
 const SIDE_NAVIGATION_SIZES = ['large', 'small'];
 
-const postSideNavigationCss = () => `:host{--post-side-navigation-padding-block-start:34px;--post-side-navigation-padding-block-end:16px;--post-side-navigation-bg:#f0efed;--post-side-navigation-stroke:#b4b3af;display:flex;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}:host dialog{overflow:visible;width:var(--post-side-navigation-width);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke);transform:translateX(-100%);transition-property:transform,overlay,display;transition-behavior:allow-discrete;transition-duration:350ms}@media screen and (max-width: 1023.98px){:host dialog{box-shadow:var(--post-device-elevation-300)}}:host dialog[open]{transform:translateX(0)}@starting-style{:host dialog[open]{transform:translateX(-100%)}}@media (prefers-reduced-motion: reduce){:host dialog{transition:none}}:host post-closebutton{transform:translate(50%, 0)}`;
+const postSideNavigationCss = () => `:host{display:flex}:host,:host dialog{background-color:var(--post-scheme-color-palette-bg-2);border-inline-end:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-interactive-primary-enabled-stroke4)}:host dialog{overflow:visible;width:var(--post-core-dimension-296);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;transform:translateX(-100%);transition-property:transform,overlay,display;transition-behavior:allow-discrete;transition-duration:350ms;box-shadow:var(--post-device-elevation-300)}:host dialog[open]{transform:translateX(0)}@starting-style{:host dialog[open]{transform:translateX(-100%)}}@media (prefers-reduced-motion: reduce){:host dialog{transition:none}}:host post-closebutton{transform:translate(50%, 0)}`;
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -23484,7 +23767,7 @@ class PostSideNavigation {
             } }, hAsync("slot", null), hAsync("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
     }
     render() {
-        return (hAsync(Host, { key: '48fa216d175f5fc96a722dd9aa1d4043298f9512', "data-version": version$1 }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+        return (hAsync(Host, { key: 'd99b96af69d80dc97b44fdc61410768617ca934c', "data-version": version$1 }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
     }
     get host() { return getElement(this); }
     static get style() { return postSideNavigationCss(); }
@@ -23599,7 +23882,7 @@ class PostSideNavigationTrigger {
         await this.sideNavigation?.toggle();
     }
     render() {
-        return (hAsync(Host, { key: '1fda1561026f1eb8a4c976a937d2573713068ef9', "data-version": version$1 }, hAsync("slot", { key: '4e594cf134bfa431e410099cc0b8bf3071833e9a' })));
+        return (hAsync(Host, { key: 'e82eb54b68db812c3753a7d027d983fa81f01255', "data-version": version$1 }, hAsync("slot", { key: 'a1ca8877d1a9e0faa653a3f1dec3fd1655b4bcb7' })));
     }
     get host() { return getElement(this); }
     static get style() { return postSideNavigationTriggerCss(); }
@@ -23729,7 +24012,7 @@ class PostStepper {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'c7b01aa30601ce7e2a383d637e8f9342de1c2143', "data-version": version$1 }, hAsync("ol", { key: '2c864063c2d22988b397b1b83667416edbb9b2b4' }, hAsync("slot", { key: '43a980fa016cd4d45cc90e4fe35de51e549efa19', onSlotchange: () => this.updateSteps() })), hAsync("div", { key: '6fa9f79b179f01d25aed9138614c8d99b4a3fc26', class: "active-step", "aria-hidden": "true" }, hAsync("span", { key: '89305778f7f921e6d62274142a9eb40c405d705b', class: "active-step-label" }, this.mobileActiveStepLabel), hAsync("span", { key: '5964200ae887c012ee843d0d80ce596302b952af', innerHTML: this.mobileActiveStepName }))));
+        return (hAsync(Host, { key: '917393b196552a6994cfc230bf93f2cd0a5e77e7', "data-version": version$1 }, hAsync("ol", { key: 'ab15bc7eaa44c5a8246c2fcc2d1c3c8e1d8ab4a6' }, hAsync("slot", { key: 'e61ab0edfce06fe1ef7345a6472834a3af38ce9e', onSlotchange: () => this.updateSteps() })), hAsync("div", { key: 'be0556840878de5adb007ef33693ef619d8a19fa', class: "active-step", "aria-hidden": "true" }, hAsync("span", { key: '8a1663a9360d931198f52c699c4e855a1f77bbc6', class: "active-step-label" }, this.mobileActiveStepLabel), hAsync("span", { key: '31f804be237598a5d8b7cbd1f418af1758e42fd6', innerHTML: this.mobileActiveStepName }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -23788,7 +24071,7 @@ class PostStepperItem {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0c4bdf86a40900511d1e6cb0fee86b14235bbeec', "data-version": version$1, role: "listitem" }, hAsync("span", { key: '20743202fbefd8ba438a8dd8276462fd7587d45b', class: "stepper-item-content" }, hAsync("span", { key: '00f1b587f5219976227c3db270bb2b746e4d2c6a', class: "step-hidden-label visually-hidden" }), hAsync("span", { key: '897dd5917855cd9437ec455f1d683e213c0e9a8d', class: "label" }, hAsync("slot", { key: '9485bf03c43dcb92b49b80c28175542fed89d4a1' })))));
+        return (hAsync(Host, { key: '486be1addaa512c39628cfa2fab567d5dfb4b517', "data-version": version$1, role: "listitem" }, hAsync("span", { key: 'a89be43022ff5b9d9cbcad1e4f934fdcef8919c3', class: "stepper-item-content" }, hAsync("span", { key: '60e217eab48532d7985b57159251f84217f1b362', class: "step-hidden-label visually-hidden" }), hAsync("span", { key: 'b847451659b699693d168dd8164c878281fb7793', class: "label" }, hAsync("slot", { key: '823229cba3855d597f08ebc6fc4e5a5059ef7f98' })))));
     }
     static get style() { return postStepperItemCss(); }
     static get cmpMeta() { return {
@@ -23844,9 +24127,9 @@ class PostTabItem {
         this.isPagesVariant = hasAnchor;
     }
     render() {
-        return (hAsync(Host, { key: '3d17a3c22c3677483bc4c86600b7527353dff290', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": version$1, "data-pages-variant": this.isPagesVariant.toString(), "aria-selected": this.isPagesVariant ? undefined : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.isPagesVariant ? undefined : '-1', class: `${this.isPagesVariant ? 'nav-item' : 'tab-title'}${!this.isPagesVariant ? ' ssr' : ''}`, style: !this.isPagesVariant
+        return (hAsync(Host, { key: '7a12be83f1b2bd428a4fcba01b4696a253d58daf', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": version$1, "data-pages-variant": this.isPagesVariant.toString(), "aria-selected": this.isPagesVariant ? undefined : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.isPagesVariant ? undefined : '-1', class: `${this.isPagesVariant ? 'nav-item' : 'tab-title'}${!this.isPagesVariant ? ' ssr' : ''}`, style: !this.isPagesVariant
                 ? { '--active': `var(--post-tab-item-${this.name}, 0)` }
-                : undefined }, hAsync("slot", { key: '9514279224549dcc0bf5553e98c535b64f37a191' })));
+                : undefined }, hAsync("slot", { key: '7350214640bf0ab1afcd3584c4ccd48e22da1612' })));
     }
     get host() { return getElement(this); }
     static get cmpMeta() { return {
@@ -23892,7 +24175,7 @@ class PostTabPanel {
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (hAsync(Host, { key: '51119127b00717573aa2fa270186ea907ce8bfbc', "data-version": version$1, id: this.panelId, role: "tabpanel", slot: "panels", style: { display: `var(--post-tab-panel-${this.for}, none)` }  }, hAsync("slot", { key: '7defd4cfb69b1f2b5f3d36cea10df5aed65eb440' })));
+        return (hAsync(Host, { key: 'a1aa48f24e91af0562683115218d19582309ef6e', "data-version": version$1, id: this.panelId, role: "tabpanel", slot: "panels", style: { display: `var(--post-tab-panel-${this.for}, none)` }  }, hAsync("slot", { key: '17e0e571302ded052f9586e0754203b772a3fbec' })));
     }
     get host() { return getElement(this); }
     static get style() { return postTabPanelCss(); }
@@ -24341,10 +24624,10 @@ class PostTabs {
             }
             : undefined;
         const style = !this.isPagesVariant ? tabStyle : undefined;
-        return (hAsync(Host, { key: 'd5776ab3d40faaf892fc494bc57455f94f7905de', "data-version": version$1, style: style }, hAsync("div", { key: '5a8055fd968bcbaa2fe408eb14cb140db0b5cd88', class: "tabs-wrapper", part: "post-tabs" }, hAsync("button", { key: '96f5ead41bfcf826941c2d652f61e04729f18f1d', ref: el => (this.leftScrollButton = el), class: "scroll-btn scroll-btn-left", type: "button", "aria-label": this.textPrevTabItems, tabindex: this.showLeftScrollButton ? 0 : -1, hidden: !this.showLeftScrollButton, onClick: () => this.scrollTabs('prev') }, hAsync("post-icon", { key: '37593c698ce7266194819ec47eee2412a7b7779d', name: "chevronleft" })), hAsync(TabsContainer, { key: '6178c4a55c748dab1c4d1ff7eba5ba63332fd6fd', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, hAsync("slot", { key: 'e08327a41440a408ae6c8a8885cef34090bfb244', onSlotchange: () => {
+        return (hAsync(Host, { key: 'ad4f55f50dbd83e1383944984f79d195d1c531e7', "data-version": version$1, style: style }, hAsync("div", { key: '48456590c7b6cead75b689e3b2b463c641600cdd', class: "tabs-wrapper", part: "post-tabs" }, hAsync("button", { key: '6337fd1ba75f53f09bd80ff0873b129cb2387498', ref: el => (this.leftScrollButton = el), class: "scroll-btn scroll-btn-left", type: "button", "aria-label": this.textPrevTabItems, tabindex: this.showLeftScrollButton ? 0 : -1, hidden: !this.showLeftScrollButton, onClick: () => this.scrollTabs('prev') }, hAsync("post-icon", { key: '97897bb7329a070f40e6ecbacff394b10f660aec', name: "chevronleft" })), hAsync(TabsContainer, { key: 'edc801dcadf41c85ed9aafdd2dda11ff4c87756b', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, hAsync("slot", { key: '908aaf787f545de1738236412dc4094cabe87155', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } })), hAsync("button", { key: '1891e50feaf86f4aac16c63acc4bd836ebff3492', ref: el => (this.rightScrollButton = el), class: "scroll-btn scroll-btn-right", type: "button", "aria-label": this.textNextTabItems, tabindex: this.showRightScrollButton ? 0 : -1, hidden: !this.showRightScrollButton, onClick: () => this.scrollTabs('next') }, hAsync("post-icon", { key: '3a95b1bd98566a4783e066aa0ce0e8fb083dc7c3', name: "chevronright" }))), !this.isPagesVariant && (hAsync("div", { key: 'aef00cd5120565a053d892963e129f1ee6377a89', class: "tab-content", part: "post-tabs-content" }, hAsync("slot", { key: 'd8068bcb3d4daa6f62dc4ad0da644d993ca82aa9', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } })), hAsync("button", { key: 'ed12a602b399e1a8dcd190fca7828fcb2683b925', ref: el => (this.rightScrollButton = el), class: "scroll-btn scroll-btn-right", type: "button", "aria-label": this.textNextTabItems, tabindex: this.showRightScrollButton ? 0 : -1, hidden: !this.showRightScrollButton, onClick: () => this.scrollTabs('next') }, hAsync("post-icon", { key: '0ecd4444455da92f371b300299ff2f1a53f804a2', name: "chevronright" }))), !this.isPagesVariant && (hAsync("div", { key: '2252fefeca18a6135796852e511c779d413aa2c5', class: "tab-content", part: "post-tabs-content" }, hAsync("slot", { key: 'dc553352c6fa9ea4c5780108bc9ed8e3e9b29b24', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -24411,7 +24694,7 @@ class PostTogglebutton {
         });
     }
     render() {
-        return (hAsync(Host, { key: '7b935b808aa1ebbe97ac37bed25bfc215513097f', "data-version": version$1, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, hAsync("slot", { key: 'd06f112049850f8d7bdffd5e0b70440bae41010b' })));
+        return (hAsync(Host, { key: 'ae46e9fcd82766abcf76c4b37d0341cfd29f2f4f', "data-version": version$1, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, hAsync("slot", { key: '9c71c065225f0f5c68e76fa2cec6d75bdf29fed0' })));
     }
     get host() { return getElement(this); }
     static get style() { return postTogglebuttonCss(); }
@@ -24495,7 +24778,7 @@ class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (hAsync(Host, { key: '88e3d485579f14915471a3d6cd09654d4bd288e7', "data-version": version$1 }, hAsync("post-popovercontainer", { key: 'e1cd5638316cf34517d46c5b73c865ac4548d906', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, hAsync("slot", { key: '02ce027505b3fe4f90c2e3208cb7e2c304138c5e' }))));
+        return (hAsync(Host, { key: '1510f7ec123b7bfaa39cc348a6b496a9051163ea', "data-version": version$1 }, hAsync("post-popovercontainer", { key: '004baf52684bfed3b8af77f773c9487d3b776fa9', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, autoHide: true, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, hAsync("slot", { key: '182f95928a4f70c747073e4585c18cab5f0eb277' }))));
     }
     get host() { return getElement(this); }
     static get style() { return postTooltipCss(); }
@@ -24690,7 +24973,7 @@ class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (hAsync(Host, { key: '6c772242ad42feedd5ff3fe7e7ab637fae8d1292', "data-version": version$1 }, hAsync("slot", { key: 'fac33c09dcff608e386bc75af9eef4cc19eecf10', onSlotchange: () => this.handleSlotChange() })));
+        return (hAsync(Host, { key: '692a3cda2890f30f0df80366a9610ec70b0872ba', "data-version": version$1 }, hAsync("slot", { key: '0a9df94a1d52ec318ecbec6740b7d3acc915b130', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return getElement(this); }
     static get style() { return postTooltipTriggerCss(); }