@swisspost/design-system-components 10.4.0 → 10.6.0

package/dist/cjs/post-closebutton_14.cjs.entry.js

@@ -1,22 +1,61 @@
 'use strict';
 
-var index = require('./index-CW10QvjR.js');
-var breakpoints = require('./breakpoints-B0Olgvgc.js');
-var _package = require('./package-CL8OSAS4.js');
-var oneOf = require('./one-of-vJeW7S4_.js');
-var required = require('./required-DRnPokVn.js');
+var index = require('./index-B3PXzvDk.js');
+var breakpoints = require('./breakpoints-Kruvy8Dm.js');
+var eventFrom = require('./event-from-CTcQxB9-.js');
+var _package = require('./package-pKyFPwiA.js');
+var oneOf = require('./one-of-CRFrfihj.js');
+var required = require('./required-DhAEd0c7.js');
 var fade = require('./fade-CPQhl1fP.js');
-var eventFrom = require('./event-from-CwMw19f8.js');
 var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
-var type = require('./type-CNcU_-B2.js');
+var index$1 = require('./index-CggFmZ8n.js');
+var type = require('./type-2Ma9dvHs.js');
 var nanoid = require('./nanoid-CmjyF1Cm.js');
-var pattern = require('./pattern-Zmn3wpyp.js');
-var url = require('./url-DgJ3lXQz.js');
+var pattern = require('./pattern-D329DFcf.js');
+var url = require('./url-DePscsTj.js');
 var utils = require('./utils-s05L2ulk.js');
 var fadeSlide = require('./fade-slide-dPhQa-I1.js');
 var placement = require('./placement-qEFR9hmI.js');
 var getRoot = require('./get-root-B1FnQ50K.js');
-require('./create-validator-decorator-BtgLWaMJ.js');
+require('./create-validator-decorator-Cy5yN6u9.js');
+
+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 = eventFrom.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) };
+}
 
 const BUTTON_TYPES = ['button', 'reset'];
 const PLACEMENT = ['manual', 'auto'];
@@ -46,7 +85,7 @@ const PostClosebutton = class {
         }
         /**
          * The "type" attribute used for the close button
-        
+      
          */
         this.buttonType = 'button';
         /**
@@ -57,6 +96,10 @@ const PostClosebutton = class {
          * The size of the close button.
          */
         this.size = 'default';
+        this.handleClick = () => {
+            const target = findClosableTarget(this.host);
+            target?.close();
+        };
     }
     componentDidLoad() {
         if (globalThis.MutationObserver) {
@@ -81,13 +124,8 @@ const PostClosebutton = class {
             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 (index.h(index.Host, { key: '22ac2b07e9a8a8f8d157423fea1bcedb2c4f9b11', "data-version": _package.version }, index.h("button", { key: '91eb413a2546f131e4c97c28340374addbf2c7a7', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: () => this.handleClick() }, index.h("post-icon", { key: '02202b3df2e5830aeb267921c924c1e75508d546', "aria-hidden": "true", name: "closex" }), index.h("span", { key: 'c691c845dd58b4f975c33791d29518428ade6ee8', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, index.h("slot", { key: '3fd42b82ef1d1ea76343e0c69f421a2916c26006' })))));
+        return (index.h(index.Host, { key: 'b8e2214b904f5167fa3753aab947418891236fcf', "data-version": _package.version }, index.h("button", { key: '224ca42d3be187062ba9717e4a534ff34eeafaf7', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: this.handleClick }, index.h("post-icon", { key: '5b289691599d6f9a3bb0fa7a28c71eecd1f5aee7', "aria-hidden": "true", name: "closex" }), index.h("span", { key: 'e22045f15b3dc8b8b228eb4282114e10db68b186', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, index.h("slot", { key: 'e492390c995a993ffc8988a1c90a41e59fbe39f5' })))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -176,7 +214,7 @@ const PostHeader = class {
     }
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.throttledResize = breakpoints.throttle(50, () => this.updateLocalHeaderHeight());
+        this.throttledResize = index$1.throttle(50, () => this.updateLocalHeaderHeight());
         this.animationOptions = {
             duration: 350,
             easing: 'headerEase',
@@ -434,10 +472,10 @@ const PostHeader = class {
     render() {
         const onDesktop = this.device === 'desktop';
         const onTabletAndMobile = this.device !== 'desktop';
-        return (index.h(index.Host, { key: 'cdd9dc28893d6b4707e70cc4c8fd0940903e9062', "data-version": _package.version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, index.h("header", { key: '528563b69ff8f0452775b386a98de59e934c802d' }, index.h("div", { key: '1f0ab8f7288a63bdd8070bebc5651ffdc9ebfd42', class: "global-header" }, index.h("div", { key: 'd25d70eddb6d4edeb3be26b313b57980761979bf', class: "section" }, index.h("div", { key: 'fe284d8015bff65be10e2231147523640c4910d4', class: "logo" }, index.h("slot", { key: '0c6854d79f4e9695e99961481337b327af8c142c', name: "post-logo" })), index.h("div", { key: '6d0b33a967dc32760f3d3cf74fc794a1cb622327', class: "sliding-controls" }, onDesktop && (index.h("div", { key: '6ae13d6b39c19d3953fc719b0fca5cfbfa1c57b7', class: "audience" }, index.h("slot", { key: '49d3954b3c54d898ad473a0bf7d2566f2764638c', name: "audience" }))), index.h("slot", { key: 'c19c56d0b5c56c278b33c16ded66473fb44bfa3d', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+        return (index.h(index.Host, { key: 'd288ef2e58942c2cbc5da673076548c97eef04ed', "data-version": _package.version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, index.h("header", { key: '5357f3edf382dec9b552fdfe9fb51d0878de697c' }, index.h("div", { key: 'bafa11390b33056e5a3d1a8a2922fd3a43a25020', class: "global-header" }, index.h("div", { key: '2d54e8d2931864880ff7a28aea64625e775ce327', class: "section" }, index.h("div", { key: 'b3a87bbf3b87213e22043d58a7298d0cff530cdf', class: "logo" }, index.h("slot", { key: '9d559b9231dc23841e277d3f4633cdeba2da12b2', name: "post-logo" })), index.h("div", { key: '64ebd463868ce8b417023651e745e33331feb908', class: "sliding-controls" }, onDesktop && (index.h("div", { key: 'b4e7d7231a0d8bebe620d41cb655c3686449b19f', class: "audience" }, index.h("slot", { key: '0781a76b1853a842dc74ec2a2a649f7de487e148', name: "audience" }))), index.h("slot", { key: '25f1d5b34a5aa950014214f810f3acca95dbbe80', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
             index.h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
             index.h("slot", { key: "language-menu", name: "language-menu" }),
-        ], index.h("slot", { key: 'a7c75b4628234c282ea9556b7965a4e469783913', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (index.h("post-togglebutton", { key: 'e120687caa66facfb9721b6b6a8bc8691966a429', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, index.h("span", { key: '43fd450ae79386d2c9bf29eb546cc66c399564e4' }, this.textMenu), index.h("post-icon", { key: '863c5284f9f8b38e8e72390ead96eb7cccda9dd5', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), index.h("post-icon", { key: 'f4ed6301b1836c51b0dbf9ee51040bb62dd06beb', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), index.h("div", { key: 'e5c314eae3e25b9bfb23fcbe95684ea7bc99be41', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, index.h("div", { key: '60dd8029f12ec03493b5ce81bc3e3b8338cd80e6', class: "section" }, index.h("slot", { key: '8bbaa11f39bdf2ceb513fe698913c0350ca78776', name: "side-nav" }), index.h("slot", { key: '0c1d5da1e42a1d96005c66de9c675c91dc2c8518', name: "title" }), this.hasTitle && index.h("slot", { key: '8a2bb6822ba8033545e76b8f9a96f9bc7f498c9c', name: "local-nav" }), onDesktop && index.h("slot", { key: '9c8df8ae91ad85ab58f9ee0bfef6a661fee59814', name: "main-nav" }), onDesktop && !this.hasTitle && index.h("slot", { key: '85197bf72379b567c782bb54dbf77e6c17060895', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        ], index.h("slot", { key: 'd7121e5e9ddf825f96a3a82e65ff135c61891adb', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (index.h("post-togglebutton", { key: 'dd0bcf9cfd96d4ffa44fc549d518d7b39d287156', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, index.h("span", { key: '23004cb12733a7081f828d33327cc26adafe3888' }, this.textMenu), index.h("post-icon", { key: '7fb36892eadfcce0a85d964c411aeafc3fbbde1b', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), index.h("post-icon", { key: 'a41292205573c03f25d225d4f4296f75ffe6c7ce', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), index.h("div", { key: '7d6d1424881bb5277210c86b194dfb9e5dcb7c59', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, index.h("div", { key: '724a8d3f79112875ba343470f9d0b753ce5d4861', class: "section" }, index.h("slot", { key: '688aafdec4e4d5565f3d0a9d9bd9bb7bc78152be', name: "side-nav" }), index.h("slot", { key: '12590bfb4bfcc8c565f008a8e3d75b5951eb73bc', name: "title" }), this.hasTitle && index.h("slot", { key: 'd862de0f3aaba5ea22a26c387ea7e93dc0c5e79c', name: "local-nav" }), onDesktop && index.h("slot", { key: '1a25ec6694bc8b2c06e21449dc566f36595afbb5', name: "main-nav" }), onDesktop && !this.hasTitle && index.h("slot", { key: '987c26ee73fb19049fdd19de79b537b71e2771de', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -567,7 +605,7 @@ const PostIcon = class {
         }).filter(([_key, value]) => value !== null));
     }
     render() {
-        return (index.h(index.Host, { key: 'ce81db69bf77d09a0a331bac48cdaede7ff3cb8e', "data-version": _package.version }, index.h("span", { key: '211f999da845687289fd991421f4315a090a67ba', style: this.getStyles() })));
+        return (index.h(index.Host, { key: '405ccfde4206c14f044575d0b23998d93a03ffb6', "data-version": _package.version }, index.h("span", { key: 'ad70ccf63add4b881ef6096ae460e13fba09f508', style: this.getStyles() })));
     }
     get host() { return index.getElement(this); }
 };
@@ -632,7 +670,7 @@ const PostLanguageMenu = class {
     }
     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();
     }
     /**
@@ -800,7 +838,7 @@ const PostLogo = class {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (index.h(index.Host, { key: 'b9d1a0fcdbbb7789863bd89d0cb1154f432d7749', "data-version": _package.version }, index.h(LogoTag, { key: 'e9e5f76950b4e95a9dc8d8f961c75f635007b61f', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: '7f9647d7fc00d1e79e544cbdd11fce5313b2bc83', class: "description" }, index.h("slot", { key: '8eb8bb0385b14a98aadf1cd956d74972179bee6b', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: '1bc78071d7ee521a249452af9f8b34108297205c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '9d10890ce19c40c38a976dbbbcb9e3939611f765', id: "Logo" }, index.h("rect", { key: 'c0f9312024721329e2427a623c78658d094d039c', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("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" }), index.h("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 (index.h(index.Host, { key: '1f69b0ddc0ecf2fde47423cd7824fcbe76e4a529', "data-version": _package.version }, index.h(LogoTag, { key: '096736bd50a6dd43e02a104e7e81897cb286db60', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: 'bc49b9591424f02744f771eb1079911f02ceca33', class: "description" }, index.h("slot", { key: 'ea905eac805e2a9940bfe50aa222bef738d15d27', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: '482d94c38347017269dabd0ab3d15f4ede14f187', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'fcd3dc56e8a0e448abe65b557639a8bea8ca580f', id: "Logo" }, index.h("rect", { key: '11ed7bad596ee07301f1c1101ddded089ef2bf99', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '6ab9d28c8492c746a2620cff62dbd92a59a00aff', 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" }), index.h("path", { key: '8b96cee7ee8ad1ec3c22aaf7928f7a711c05c828', 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 index.getElement(this); }
 };
@@ -940,7 +978,7 @@ const PostMainnavigation = class {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (index.h(index.Host, { key: '374379b09ad5578002153a0a80afaf9308f1c964', version: _package.version, class: this.canScroll ? 'scrollable' : '' }, index.h("div", { key: 'b78537cec32cd23c7908482d73b7624e4662b1c8', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: 'd196c0f3b480f5ede486945c684afe4a06a96af0', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '5ee27a1b6cfc8aa59820514708485b334837c09d', ref: el => (this.navbar = el), "aria-label": this.textMain }, index.h("slot", { key: 'e0a1719713e59899ec4fd1ff057ab5e3c13f7069' })), index.h("div", { key: 'd1e2b456cadec20bb9c857fee23a3955ab20a2b2', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: 'dec56cf1fb67c5afb597936d0f99e6389517819f', "aria-hidden": "true", name: "chevronright" }))));
+        return (index.h(index.Host, { key: 'cf7b2328a41b41ca28956120b8042590655e7bb2', version: _package.version, class: this.canScroll ? 'scrollable' : '' }, index.h("div", { key: 'a25c55cf7b11a11ce86fb134dd57dbdad3d30301', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '013778591637d5ee0ac2cd2bf3f23c677ba2a13f', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: 'a007b7be57429580de35865e5eff0c54378d0a8e', ref: el => (this.navbar = el), "aria-label": this.textMain }, index.h("slot", { key: 'bc8e1db18430ee43b5963539fbaa65e1fb1b0c55' })), index.h("div", { key: 'cdb413fedc9a90c712db0fe5d6ab760a426ff632', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: 'b2df569a79881b3a044556ba9c0f2e2b0646e78b', "aria-hidden": "true", name: "chevronright" }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -963,6 +1001,8 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostMegadropdown = class {
+    /** Tracks the currently active dropdown instance. */
+    static { this.activeDropdown = null; }
     get megadropdownTrigger() {
         const hostId = this.host.getAttribute('id');
         return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"]`) : null;
@@ -1244,12 +1284,10 @@ const PostMegadropdown = class {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (index.h(index.Host, { key: 'd181a65a25eafbbc645c717ee2f447caf1ab040a', version: _package.version }, index.h("div", { key: '7bd6003c2e696e64a14b98a94e6c67d66d143192', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, index.h("div", { key: 'c79d10e279a37d94c2849ce4cac7bf4d260a0ca3', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (index.h("p", { key: '7e7769acb5391cb33958b1bd9739583e25def2cc', class: "megadropdown-title" }, this.megadropdownTitle)), index.h("div", { key: 'fe7b63bd6b9daff336e599cd9ca43338a36fa595', class: "megadropdown-content" }, index.h("slot", { key: 'cc19bcec12adee943391ec818bcfa8cd8290cb49' })), this.device === 'desktop' ? (index.h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (index.h("button", { onClick: () => this.hide(true), class: "back-button" }, index.h("post-icon", { name: "arrowleft" }), this.textBack))))));
+        return (index.h(index.Host, { key: 'c0854fff62bf5e8de1597e46051aea5f300ee686', version: _package.version }, index.h("div", { key: '1f4f66b74d7129481d76f1eec15a924b2c37718c', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, index.h("div", { key: 'af743442fe3ad6211cddccddf5d0803de9f501b5', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (index.h("p", { key: '35a03b2ee32498aa157140d4e6916cbf66655e5c', class: "megadropdown-title" }, this.megadropdownTitle)), index.h("div", { key: '6c4efb52e7bb04c4f40d5b3f739ca69771c48602', class: "megadropdown-content" }, index.h("slot", { key: '2b3200495cf23fe049734de9de9a5a1f4c9b09f3' })), this.device === 'desktop' ? (index.h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (index.h("button", { onClick: () => this.hide(true), class: "back-button" }, index.h("post-icon", { name: "arrowleft" }), this.textBack))))));
     }
     get host() { return index.getElement(this); }
 };
-/** Tracks the currently active dropdown instance. */
-PostMegadropdown.activeDropdown = null;
 __decorate$4([
     required.Required(),
     type.Type('string')
@@ -1331,7 +1369,7 @@ const PostMegadropdownTrigger = class {
         this.megadropdown.toggle();
     }
     render() {
-        return (index.h(index.Host, { key: '7dea071ab1a606e7427631e45a1521aef0be85fe', "data-version": _package.version }, index.h("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 } }, index.h("span", { key: '566388f5cc5fd7eb4227de6fcd0205a3c3c0d54d' }, index.h("span", { key: 'e874004dc5a3d8bf3a422c9b783c24dd6968cf74', innerHTML: this.slottedContent }), index.h("span", { key: 'd89b1f6867f2b41934edb4a0865aebbdb21741a9', "aria-hidden": "true" }, index.h("slot", { key: 'fed72c4e9ad605db0d65c1c32e91976ae3147a4b' }))), index.h("post-icon", { key: '882e65fd30695db2b8a74be8258e69eed90b8f78', name: "chevrondown" }))));
+        return (index.h(index.Host, { key: '7e6201e3cdea96113bbebdeeb805acff557c8bbb', "data-version": _package.version }, index.h("button", { key: '1863f48dbd6e98b7a2b226b7c3b25b16a38c644b', 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 } }, index.h("span", { key: 'dee7e77e45914a3e40a9f5027570bef0035dfdf2' }, index.h("span", { key: '362865f7946f14f45ecdb240e81f09370e3f6d10', innerHTML: this.slottedContent }), index.h("span", { key: 'd61eb63433aa65631f787646df2c6705c3d6e7a1', "aria-hidden": "true" }, index.h("slot", { key: 'c831f7299fe3c80b8229c861e01e09a2ee481bc8' }))), index.h("post-icon", { key: 'bcc8ed53293e16d4571e989a491760f98425b298', name: "chevrondown" }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -1462,17 +1500,32 @@ const PostMenu = class {
         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) {
@@ -1524,7 +1577,7 @@ const PostMenu = class {
         ]));
     }
     render() {
-        return (index.h(index.Host, { key: 'ec2d0c28803ab242f28e942c52d03b38d40f3704', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'c2bbf5c95e200aecbdc55b94676ab1b1b0a32d13', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '80e56e976e944955f72b504b33ee3a16117f4551', part: "post-menu" }, index.h("slot", { key: 'cab13b8104f0be049e31fe5b3eca3af85bec0869', name: "header" }), index.h("slot", { key: 'acbbd8565bb90c91dad4713fbc4e8c50d10390e8' })))));
+        return (index.h(index.Host, { key: '22441c2bef0402f10e77b96b8a5d48a0648615f7', "data-version": _package.version }, index.h("post-popovercontainer", { key: '8b37fe55d58a3a486e947266348b55408999a8bb', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '2679eb9c4a95585b8aaf74e29f026c84b10aa6f3', part: "post-menu" }, index.h("slot", { key: '0da58a1bde1bdb4c1f8b7b19ca8cbde14d7946fc', name: "header" }), index.h("slot", { key: '801f7bc59d4d3267728b9adf0750dbea76a7652c' })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -1543,7 +1596,7 @@ __decorate$2([
 ], PostMenu.prototype, "handlePostBeforeToggle", null);
 PostMenu.style = postMenuCss();
 
-const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}`;
+const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}`;
 
 const PostMenuItem = class {
     constructor(hostRef) {
@@ -1623,7 +1676,7 @@ const PostMenuTrigger = class {
         return null;
     }
     render() {
-        return (index.h(index.Host, { key: '2e0560835a4202f9a84990a60305bf7dc8adbc98', "data-version": _package.version }, index.h("slot", { key: 'd175e8bc5ddb253476f9795d7b0b2df2797c46aa' })));
+        return (index.h(index.Host, { key: 'f75522d28e9a45c80846a191cff3ea2eb51b5bde', "data-version": _package.version }, index.h("slot", { key: 'bc70e3ddc8dc372611c00a4cda52cd35ede02a3f' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -1638,6 +1691,7 @@ PostMenuTrigger.style = postMenuTriggerCss();
  * @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;
@@ -1730,12 +1784,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) {
@@ -1810,13 +1864,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;
 }
@@ -1865,10 +1915,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
   };
@@ -2041,17 +2088,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: {
@@ -2198,6 +2244,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));
@@ -2254,12 +2370,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;
         }
@@ -2274,18 +2397,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));
@@ -2293,20 +2410,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;
       }
@@ -2456,23 +2565,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,
@@ -2503,6 +2605,7 @@ const limitShift$1 = function (options) {
   return {
     options,
     fn(state) {
+      var _rawOffset$mainAxis, _rawOffset$crossAxis;
       const {
         x,
         y,
@@ -2528,9 +2631,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';
@@ -2562,6 +2664,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
@@ -2576,7 +2684,6 @@ const size$1 = function (options) {
     name: 'size',
     options,
     async fn(state) {
-      var _state$middlewareData, _state$middlewareData2;
       const {
         placement,
         rects,
@@ -2608,24 +2715,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({
@@ -2781,7 +2885,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;
@@ -2878,10 +2982,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) {
@@ -2908,12 +3009,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);
@@ -2977,7 +3078,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);
     }
@@ -2998,18 +3099,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;
@@ -3026,7 +3126,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;
@@ -3035,31 +3139,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,
@@ -3074,7 +3189,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;
@@ -3088,8 +3203,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)) {
@@ -3105,13 +3220,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
@@ -3122,7 +3230,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;
 
@@ -3130,16 +3238,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);
   }
@@ -3149,7 +3261,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,
@@ -3199,13 +3311,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);
     }
@@ -3213,12 +3319,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;
@@ -3303,7 +3410,7 @@ function isRTL(element) {
 const platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,
   getDocumentElement,
-  getClippingRect,
+  getClippingRect: getClippingRect$1,
   getOffsetParent,
   getElementRects,
   getClientRects,
@@ -3318,7 +3425,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);
@@ -3361,13 +3468,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);
@@ -3375,16 +3491,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;
     }
 
@@ -3401,8 +3507,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();
+  };
 }
 
 /**
@@ -3427,12 +3543,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) {
@@ -3518,6 +3632,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.
@@ -3546,11 +3667,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
   };
@@ -4367,6 +4486,77 @@ function apply() {
   injectStyles(document);
 }
 
+/**
+ * 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 ??= {};
+    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 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -4383,6 +4573,30 @@ const ANIMATIONS = {
     'pop-in': popIn,
 };
 const PostPopovercontainer = class {
+    static {
+        this.STATIC_SIDES = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+        };
+    }
+    static {
+        this.PROPERTIES_TO_CLEAR = [
+            '--post-safe-space-popover-x',
+            '--post-safe-space-popover-y',
+            '--post-safe-space-popover-x-start',
+            '--post-safe-space-popover-x-end',
+            '--post-safe-space-popover-y-start',
+            '--post-safe-space-popover-y-end',
+            '--post-safe-space-trigger-x',
+            '--post-safe-space-trigger-y',
+            '--post-safe-space-trigger-x-start',
+            '--post-safe-space-trigger-x-end',
+            '--post-safe-space-trigger-y-start',
+            '--post-safe-space-trigger-y-end',
+        ];
+    }
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.postBeforeShow = index.createEvent(this, "postBeforeShow");
@@ -4444,7 +4658,7 @@ const PostPopovercontainer = class {
         if (this.toggleTimeoutId || !target)
             return;
         this.eventTarget = target;
-        this.calculatePosition();
+        this.updatePosition();
         this.host.showPopover();
     }
     /**
@@ -4470,7 +4684,7 @@ const PostPopovercontainer = class {
         this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
-            this.calculatePosition();
+            this.updatePosition();
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
@@ -4582,17 +4796,14 @@ const PostPopovercontainer = class {
     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
@@ -4617,13 +4828,15 @@ const PostPopovercontainer = class {
             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({
@@ -4635,7 +4848,7 @@ const PostPopovercontainer = class {
             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, {
@@ -4647,7 +4860,12 @@ const PostPopovercontainer = class {
         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,
@@ -4714,32 +4932,12 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bffef7c8067f21aa99c45deaaf2bc122ea455191', "data-version": _package.version, popover: "auto" }, index.h("div", { key: '023339edd5b36827e0051179bee464236bccc62a', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (index.h("span", { key: 'ae921c38aa8c33ad8b37453a56d22ee7b4b9950c', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (index.h(index.Host, { key: 'f3ea4bfc9a59faa2fbf1e413a1ec648f598a6779', "data-version": _package.version, popover: "auto" }, index.h("div", { key: 'a328c73c7e08eca1e423fcbe736798188cca2a87', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (index.h("span", { key: '8fad0095fb8d8c903ba84a639b4efc3e321c6aef', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), index.h("span", { key: 'f7c2720a3bedb808855628482c5b1f377e2719a8', part: "post-popovercontainer-border-mask" }), index.h("slot", { key: 'e0fee3fded9fea41bc0260f45be0375e236463f9' }))));
+            } })), index.h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), index.h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
     }
     get host() { return index.getElement(this); }
 };
-PostPopovercontainer.STATIC_SIDES = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
-PostPopovercontainer.PROPERTIES_TO_CLEAR = [
-    '--post-safe-space-popover-x',
-    '--post-safe-space-popover-y',
-    '--post-safe-space-popover-x-start',
-    '--post-safe-space-popover-x-end',
-    '--post-safe-space-popover-y-start',
-    '--post-safe-space-popover-y-end',
-    '--post-safe-space-trigger-x',
-    '--post-safe-space-trigger-y',
-    '--post-safe-space-trigger-x-start',
-    '--post-safe-space-trigger-x-end',
-    '--post-safe-space-trigger-y-start',
-    '--post-safe-space-trigger-y-end',
-];
 __decorate([
     oneOf.OneOf(placement.PLACEMENT_TYPES)
 ], PostPopovercontainer.prototype, "placement", void 0);
@@ -4780,7 +4978,7 @@ const PostTogglebutton = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '7b935b808aa1ebbe97ac37bed25bfc215513097f', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: 'd06f112049850f8d7bdffd5e0b70440bae41010b' })));
+        return (index.h(index.Host, { key: '81fa9d922480059096e4146c10cf2ef72357b482', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '4e8d793e3867ba4c9c8e17d509652309a79f032a' })));
     }
     get host() { return index.getElement(this); }
 };