@swisspost/design-system-components 10.3.0 → 10.5.0

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js

@@ -12,10 +12,11 @@ import { Build, h, Host, } from "@stencil/core";
 import { OneOf, Type } from "../../utils/index";
 import { version } from "../../../../package";
 import { PLACEMENT_TYPES } from "../../types/index";
-import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
+import { arrow, autoUpdate, flip, hide, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
 import { popIn } from "../../animations/pop-in";
 import { apply, isSupported } from "@oddbird/popover-polyfill/fn";
+import { computePositionWithSafeArea } from "../../utils/floating-ui";
 const ANIMATIONS = {
     'pop-in': popIn,
 };
@@ -78,7 +79,7 @@ export class PostPopovercontainer {
         if (this.toggleTimeoutId || !target)
             return;
         this.eventTarget = target;
-        this.calculatePosition();
+        this.updatePosition();
         this.host.showPopover();
     }
     /**
@@ -104,7 +105,7 @@ export class PostPopovercontainer {
         this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
-            this.calculatePosition();
+            this.updatePosition();
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
@@ -216,17 +217,14 @@ export class PostPopovercontainer {
     startAutoupdates() {
         if (!this.eventTarget || !this.host)
             return;
-        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
+        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.updatePosition.bind(this));
     }
-    /**
-     * Retrieves the dynamic height of the header
-     */
-    getHeaderHeight() {
-        const header = document.querySelector('post-header');
-        return header ? Number.parseFloat(getComputedStyle(header).height) : 0;
-    }
-    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
@@ -251,13 +249,15 @@ export 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({
@@ -269,7 +269,7 @@ export 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, {
@@ -281,7 +281,12 @@ export 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,
@@ -348,9 +353,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: 'be9f32a35f247f5b2cb54599b96e715ce1a5a1f1', "data-version": version, popover: "auto" }, h("div", { key: 'ad2616c15dfec83e1e53ad14cb145aee2d625c9a', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '293ba9d1ba2a7b57297cd4aa716ba1369b2f8988', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (h(Host, { key: 'a6f41ad3ef982f9e9ec0d6450837d1cfdca73d16', "data-version": version, popover: "auto" }, h("div", { key: '40afab436d5550fda44c8995139080161eab5b09', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '580bd8fcaecb89334aca05001137a4d7cccd254a', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("span", { key: '7b9d47b53a4d4a672490eccdc88a7eb0552b5574', part: "post-popovercontainer-border-mask" }), h("slot", { key: '4b4249d6ebe1c247634bbb76b08ec01e73dc7d4b' }))));
+            } })), h("span", { key: '61a6e4e8026832afc188edd5a74535716db65945', part: "post-popovercontainer-border-mask" }), h("slot", { key: 'd79cb69a77dbba13ffa3c30e0393db4f3a669a12' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get encapsulation() { return "shadow"; }
@@ -376,7 +381,7 @@ export class PostPopovercontainer {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
                             "referenceLocation": "Placement"
                         }
                     }
@@ -470,6 +475,25 @@ export class PostPopovercontainer {
                 "setter": false,
                 "reflect": true,
                 "attribute": "safe-space"
+            },
+            "autoHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to automatically hide the popover when the target moves outside the scrollport.\n\nIf the `post-header` can cover the target, the popover will also be hidden as soon as the\ntarget scrolls behind it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-hide"
             }
         };
     }

package/dist/collection/components/post-progressbar/post-progressbar.js

@@ -43,7 +43,7 @@ export class PostProgressbar {
         const max = this.getEffectiveMax();
         const value = this.getEffectiveValue(min, max);
         const percentage = ((value - min) / (max - min)) * 100;
-        return (h(Host, { key: '26bdbb5219393e8b44e2fe5395d8a4cd8aa7e18a', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '65b81479fac7aa6024556ef6589064f997f4394e', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+        return (h(Host, { key: 'c08b9b976c5cb34018e48c4dafe6b87207710ba5', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '485eb6657d14ad5472bfbe822b1cd0eb50cd0129', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
     }
     static get is() { return "post-progressbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-rating/post-rating.js

@@ -83,7 +83,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: 'c793abbf5e0d01bb19dc4464ebd75249959a1717', "data-version": version }, h("div", { key: '357946df40a3d3a85ece2d0ac6ecc761951d9471', 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) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: '0cf576670f16d4b8f88b714af12ded14aa1372b2', "data-version": version }, h("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) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/collection/components/post-side-navigation/post-side-navigation.css

@@ -1 +1 @@
-: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)}
+: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)}

package/dist/collection/components/post-side-navigation/post-side-navigation.js

@@ -47,6 +47,15 @@ export class PostSideNavigation {
             collapsible.toggle(false);
             this.collapsibleTrigger?.querySelector('button')?.focus();
         };
+        /**
+         * Closes the dialog when a navigation link is clicked.
+         */
+        this.handleDialogClick = (e) => {
+            const path = e.composedPath();
+            if (path.some(el => el instanceof HTMLAnchorElement)) {
+                this.dialog.close();
+            }
+        };
     }
     connectedCallback() {
         globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
@@ -115,12 +124,12 @@ export class PostSideNavigation {
      * Render modal navigation (mobile/tablet).
      */
     renderDialog() {
-        return (h("dialog", { onClose: () => {
+        return (h("dialog", { onClick: this.handleDialogClick, onClose: () => {
                 this.postToggle.emit(false);
             } }, h("slot", null), h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
     }
     render() {
-        return (h(Host, { key: 'b551854e6db686783086a7a9d82a6847bf2a04b9', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+        return (h(Host, { key: 'd99b96af69d80dc97b44fdc61410768617ca934c', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
     }
     static get is() { return "post-side-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-side-navigation-trigger/post-side-navigation-trigger.js

@@ -85,7 +85,7 @@ export class PostSideNavigationTrigger {
         await this.sideNavigation?.toggle();
     }
     render() {
-        return (h(Host, { key: '2822a6c7246da96de537eff3e3fbf5a2db400547', "data-version": version }, h("slot", { key: '0bb02d90c7916a4dbfe6dd7fc0f4325509939a80' })));
+        return (h(Host, { key: 'e82eb54b68db812c3753a7d027d983fa81f01255', "data-version": version }, h("slot", { key: 'a1ca8877d1a9e0faa653a3f1dec3fd1655b4bcb7' })));
     }
     static get is() { return "post-side-navigation-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-stepper/post-stepper.js

@@ -104,7 +104,7 @@ export class PostStepper {
         }
     }
     render() {
-        return (h(Host, { key: '52c9943bca4c1d7b1d964d812ce21d8b0eb2d236', "data-version": version }, h("ol", { key: 'ea1f27a214d9cdf14b5f2d07f14a8d54836a32b3' }, h("slot", { key: '6f07fe49d55152123dc39645ef17bf5557753005', onSlotchange: () => this.updateSteps() })), h("div", { key: 'ad3af45bc5d1493f9f1084cc28c77c39d27cbd35', class: "active-step", "aria-hidden": "true" }, h("span", { key: '6e3f5decadc8bcc67812dd67f6efe0afa0613b46', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: '4aeb9376181d78007a929c5e8e4ba11c181039bb', innerHTML: this.mobileActiveStepName }))));
+        return (h(Host, { key: '917393b196552a6994cfc230bf93f2cd0a5e77e7', "data-version": version }, h("ol", { key: 'ab15bc7eaa44c5a8246c2fcc2d1c3c8e1d8ab4a6' }, h("slot", { key: 'e61ab0edfce06fe1ef7345a6472834a3af38ce9e', onSlotchange: () => this.updateSteps() })), h("div", { key: 'be0556840878de5adb007ef33693ef619d8a19fa', class: "active-step", "aria-hidden": "true" }, h("span", { key: '8a1663a9360d931198f52c699c4e855a1f77bbc6', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: '31f804be237598a5d8b7cbd1f418af1758e42fd6', innerHTML: this.mobileActiveStepName }))));
     }
     static get is() { return "post-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-stepper-item/post-stepper-item.js

@@ -2,7 +2,7 @@ import { version } from "../../../../package";
 import { h, Host } from "@stencil/core";
 export class PostStepperItem {
     render() {
-        return (h(Host, { key: '53b052a2b68a93df9fda7f80f23d602d8a8efc56', "data-version": version, role: "listitem" }, h("span", { key: 'e06841841e7fad42ff9de3e39dadf5fab96b9952', class: "stepper-item-content" }, h("span", { key: 'f934ef19fbdd65111b7cf561dcc9297122d62595', class: "step-hidden-label visually-hidden" }), h("span", { key: '213db918f5ab854225974678c50176bb565ac2b1', class: "label" }, h("slot", { key: 'd8e067ea304700e37edb996a4c715d41e209b8d8' })))));
+        return (h(Host, { key: '486be1addaa512c39628cfa2fab567d5dfb4b517', "data-version": version, role: "listitem" }, h("span", { key: 'a89be43022ff5b9d9cbcad1e4f934fdcef8919c3', class: "stepper-item-content" }, h("span", { key: '60e217eab48532d7985b57159251f84217f1b362', class: "step-hidden-label visually-hidden" }), h("span", { key: 'b847451659b699693d168dd8164c878281fb7793', class: "label" }, h("slot", { key: '823229cba3855d597f08ebc6fc4e5a5059ef7f98' })))));
     }
     static get is() { return "post-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-item/post-tab-item.js

@@ -44,9 +44,9 @@ export class PostTabItem {
     }
     render() {
         const isSSR = Build.isServer;
-        return (h(Host, { key: '974d9682ef0448cf3adf9481ba472a5c196349b3', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": version, "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'}${isSSR && !this.isPagesVariant ? ' ssr' : ''}`, style: isSSR && !this.isPagesVariant
+        return (h(Host, { key: '7a12be83f1b2bd428a4fcba01b4696a253d58daf', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": version, "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'}${isSSR && !this.isPagesVariant ? ' ssr' : ''}`, style: isSSR && !this.isPagesVariant
                 ? { '--active': `var(--post-tab-item-${this.name}, 0)` }
-                : undefined }, h("slot", { key: '6a7ed6323892a40ea22e487bc9460af69fda02c6' })));
+                : undefined }, h("slot", { key: '7350214640bf0ab1afcd3584c4ccd48e22da1612' })));
     }
     static get is() { return "post-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -21,7 +21,7 @@ export class PostTabPanel {
     }
     render() {
         const isSSR = Build.isServer;
-        return (h(Host, { key: '07d93ddaa69253a956ed50cd9ecd6ed039fbc6e2', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels", style: isSSR ? { display: `var(--post-tab-panel-${this.for}, none)` } : undefined }, h("slot", { key: 'd6887db4e0e4dc22f8f8fdf098d6068ef4bd1a91' })));
+        return (h(Host, { key: 'a1aa48f24e91af0562683115218d19582309ef6e', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels", style: isSSR ? { display: `var(--post-tab-panel-${this.for}, none)` } : undefined }, h("slot", { key: '17e0e571302ded052f9586e0754203b772a3fbec' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tabs/post-tabs.css

@@ -1 +1 @@
-:host{display:block}:host .tabs-wrapper{position:relative;display:flex;align-items:center}:host .tabs-wrapper button.scroll-btn{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;display:flex;align-items:center;justify-content:center;transition:background-color 100ms,border-color 100ms,color 100ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn{background-color:ButtonFace !important}:host .tabs-wrapper button.scroll-btn:hover{background-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn post-icon{color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn post-icon{color:Highlight}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:hover post-icon{color:canvas}}:host .tabs-wrapper button.scroll-btn[hidden]{display:none}:host .tabs-wrapper button.scroll-btn{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 .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*var(--post-device-border-width-default)) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:calc(var(--post-device-spacing-padding-28) + -1*var(--post-device-border-width-default)) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .tabs-wrapper .tabs{overflow-x:hidden;background-color:rgba(0,0,0,0) !important;display:flex;flex-wrap:nowrap;align-items:end;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}:host(.page-tabs){overflow:visible !important}:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1*(var(--post-container-offset)))}:host(.page-tabs) .tabs-wrapper button.scroll-btn{color:var(--post-scheme-color-interactive-primary-enabled-fg5);background-color:var(--post-scheme-color-interactive-primary-enabled-bg5);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke);position:absolute;z-index:2;box-shadow:var(--post-device-elevation-200);border-radius:var(--post-device-border-radius-2)}:host(.page-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-primary-hover-fg4);background-color:var(--post-scheme-color-interactive-primary-hover-bg8)}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-left{inset-inline-start:0;border-inline-start:none;border-radius:0 var(--post-device-border-radius-2) var(--post-device-border-radius-2) 0}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-right{inset-inline-end:0;border-inline-end:none;border-radius:var(--post-device-border-radius-2) 0 0 var(--post-device-border-radius-2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn{background-color:Highlight;color:HighlightText}}:host(.page-tabs) .tabs-wrapper::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:var(--post-device-border-width-default);background-color:var(--post-palette-color-nested-tabs-page-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{background-color:LinkText}}:host(.page-tabs) .tabs-wrapper .tabs{padding-inline:calc(var(--post-container-offset));gap:var(--post-device-spacing-gap-inline-5);scrollbar-width:none}:host(.page-tabs) .tabs-wrapper .tabs::-webkit-scrollbar{display:none}:host(.page-tabs:not([size=small])) button.scroll-btn{top:var(--post-device-spacing-padding-block-35)}:host(.page-tabs[size=small]) button.scroll-btn{top:var(--post-device-spacing-padding-block-8)}:host(.content-tabs) .tabs-wrapper button.scroll-btn{flex-shrink:0;color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{color:HighlightText}}:host(post-tabs:not([size=small])) button.scroll-btn{height:var(--post-device-sizing-interactive-button-height-10);width:var(--post-device-sizing-interactive-button-width-1);border-radius:var(--post-device-border-radius-2)}:host(post-tabs:not([size=small])) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size5);width:var(--post-device-sizing-interactive-icon-size5)}:host(.page-tabs:not([size=small])) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-38) var(--post-device-spacing-padding-39)}:host(.page-tabs:not([size=small])) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-39) var(--post-device-spacing-padding-38)}:host([size=small]) button.scroll-btn{height:var(--post-device-sizing-interactive-button-size-1);width:var(--post-device-sizing-interactive-button-size-1);border-radius:var(--post-device-border-radius-2)}:host([size=small]) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4)}:host(.page-tabs[size=small]) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-41) var(--post-device-spacing-padding-42)}:host(.page-tabs[size=small]) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-42) var(--post-device-spacing-padding-41)}
+:host{display:block}:host .tabs-wrapper{position:relative;display:flex;align-items:center}:host .tabs-wrapper button.scroll-btn{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;display:flex;align-items:center;justify-content:center;transition:background-color 100ms,border-color 100ms,color 100ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn{background-color:ButtonFace !important}:host .tabs-wrapper button.scroll-btn:hover{background-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn post-icon{color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn post-icon{color:Highlight}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:hover post-icon{color:canvas}}:host .tabs-wrapper button.scroll-btn[hidden]{display:none}:host .tabs-wrapper button.scroll-btn{outline-offset:var(--post-device-spacing-padding-44) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .tabs-wrapper button.scroll-btn: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 .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .tabs-wrapper button.scroll-btn: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 .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .tabs-wrapper .tabs{overflow-x:hidden;background-color:rgba(0,0,0,0) !important;display:flex;flex-wrap:nowrap;align-items:end;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}:host(.page-tabs){overflow:visible !important}:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1*(var(--post-container-offset)))}:host(.page-tabs) .tabs-wrapper button.scroll-btn{color:var(--post-scheme-color-interactive-primary-enabled-fg5);background-color:var(--post-scheme-color-interactive-primary-enabled-bg5);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke);position:absolute;z-index:2;box-shadow:var(--post-device-elevation-200);border-radius:var(--post-device-border-radius-2)}:host(.page-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-primary-hover-fg4);background-color:var(--post-scheme-color-interactive-primary-hover-bg8)}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-left{inset-inline-start:0;border-inline-start:none;border-radius:0 var(--post-device-border-radius-2) var(--post-device-border-radius-2) 0}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-right{inset-inline-end:0;border-inline-end:none;border-radius:var(--post-device-border-radius-2) 0 0 var(--post-device-border-radius-2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn{background-color:Highlight;color:HighlightText}}:host(.page-tabs) .tabs-wrapper::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:var(--post-device-border-width-default);background-color:var(--post-palette-color-nested-tabs-page-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{background-color:LinkText}}:host(.page-tabs) .tabs-wrapper .tabs{padding-inline:calc(var(--post-container-offset));gap:var(--post-device-spacing-gap-inline-5);scrollbar-width:none}:host(.page-tabs) .tabs-wrapper .tabs::-webkit-scrollbar{display:none}:host(.page-tabs:not([size=small])) button.scroll-btn{top:var(--post-device-spacing-padding-36)}:host(.page-tabs[size=small]) button.scroll-btn{top:var(--post-device-spacing-padding-36)}:host(.content-tabs) .tabs-wrapper button.scroll-btn{flex-shrink:0;color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{color:HighlightText}}:host(post-tabs:not([size=small])) button.scroll-btn{height:var(--post-device-sizing-interactive-button-height-10);width:var(--post-device-sizing-interactive-button-width-1);border-radius:var(--post-device-border-radius-2)}:host(post-tabs:not([size=small])) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size5);width:var(--post-device-sizing-interactive-icon-size5)}:host(.page-tabs:not([size=small])) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-39) var(--post-device-spacing-padding-40)}:host(.page-tabs:not([size=small])) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-40) var(--post-device-spacing-padding-39)}:host([size=small]) button.scroll-btn{height:var(--post-device-sizing-interactive-button-size-1);width:var(--post-device-sizing-interactive-button-size-1);border-radius:var(--post-device-border-radius-2)}:host([size=small]) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4)}:host(.page-tabs[size=small]) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-42) var(--post-device-spacing-padding-43)}:host(.page-tabs[size=small]) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-43) var(--post-device-spacing-padding-42)}

package/dist/collection/components/post-tabs/post-tabs.js

@@ -427,10 +427,10 @@ export class PostTabs {
             }
             : undefined;
         const style = isSSR && !this.isPagesVariant ? tabStyle : undefined;
-        return (h(Host, { key: '0520b7aba909495feef9358b2e572f767e42dce2', "data-version": version, style: style }, h("div", { key: '779d35686ab406d8b60b595aea6ca67eb5b7d82a', class: "tabs-wrapper", part: "post-tabs" }, h("button", { key: '2be9734aa1389baf48901e1eafe759f887ed9490', 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') }, h("post-icon", { key: 'ca6b0acaef9179468737d3669acbc61dfb709657', name: "chevronleft" })), h(TabsContainer, { key: 'df8d1f5ca66b86baeb13123459059f1f399f5383', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, h("slot", { key: 'e9c618d1f018381f37c0b46aea741abe797d7e37', onSlotchange: () => {
+        return (h(Host, { key: 'ad4f55f50dbd83e1383944984f79d195d1c531e7', "data-version": version, style: style }, h("div", { key: '48456590c7b6cead75b689e3b2b463c641600cdd', class: "tabs-wrapper", part: "post-tabs" }, h("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') }, h("post-icon", { key: '97897bb7329a070f40e6ecbacff394b10f660aec', name: "chevronleft" })), h(TabsContainer, { key: 'edc801dcadf41c85ed9aafdd2dda11ff4c87756b', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, h("slot", { key: '908aaf787f545de1738236412dc4094cabe87155', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } })), h("button", { key: '79e0ad08c240f251e5805d71319d6ce32d843367', 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') }, h("post-icon", { key: '491fc9c7746896d9a140fa6cbb97a432ff174ca3', name: "chevronright" }))), !this.isPagesVariant && (h("div", { key: '04839eb63e75923e733ec4eea84cd345ae480e70', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: '64483606952f79810e7a24105f5c9f822180b6ca', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } })), h("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') }, h("post-icon", { key: '0ecd4444455da92f371b300299ff2f1a53f804a2', name: "chevronright" }))), !this.isPagesVariant && (h("div", { key: '2252fefeca18a6135796852e511c779d413aa2c5', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'dc553352c6fa9ea4c5780108bc9ed8e3e9b29b24', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -29,7 +29,7 @@ export class PostTogglebutton {
         });
     }
     render() {
-        return (h(Host, { key: '6f61a07946f3e67bace0a883b73c424893c4043d', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'fd9b93e45da499dbb790ad675f3db36e248c1960' })));
+        return (h(Host, { key: 'ae46e9fcd82766abcf76c4b37d0341cfd29f2f4f', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9c71c065225f0f5c68e76fa2cec6d75bdf29fed0' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer{--post-current-bg: var(--post-scheme-color-surface-accent-bg);--post-current-fg: var(--post-scheme-color-surface-accent-fg);--post-popovercontainer-arrow-border-width: var(--post-device-border-width-alternative1);--post-popovercontainer-arrow-border-color: var(--post-scheme-color-surface-accent-fg)}post-popovercontainer::part(post-popovercontainer-border-mask){display:block;box-shadow:inset 0 0 0 var(--post-device-spacing-padding-14) var(--post-scheme-color-surface-accent-bg)}post-popovercontainer::part(post-popovercontainer-content){border:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-surface-accent-fg);border-radius:var(--post-device-border-radius-1);padding:var(--post-device-spacing-padding-14) var(--post-device-spacing-padding-15);font-size:var(--post-device-font-size-9);max-width:var(--post-tooltip-max-width, 280px);width:inherit;word-wrap:break-word;white-space:normal}
+:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer{--post-current-bg: var(--post-scheme-color-surface-accent-bg);--post-current-fg: var(--post-scheme-color-surface-accent-fg);--post-popovercontainer-arrow-border-width: var(--post-device-border-width-alternative1);--post-popovercontainer-arrow-border-color: var(--post-scheme-color-surface-accent-fg)}post-popovercontainer::part(post-popovercontainer-border-mask){display:block;box-shadow:inset 0 0 0 var(--post-device-spacing-padding-14) var(--post-scheme-color-surface-accent-bg)}post-popovercontainer::part(post-popovercontainer-content){border:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-surface-accent-fg);border-radius:var(--post-device-border-radius-1);padding:var(--post-device-spacing-padding-14) var(--post-device-spacing-padding-15);font-size:var(--post-device-font-size-9);max-width:var(--post-tooltip-max-width, 280px);word-wrap:break-word;white-space:normal}

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -67,7 +67,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'd49731becbb7395ec68cfae34d316a6248977b53', "data-version": version }, h("post-popovercontainer", { key: '12da18a58c2143ef4c2ddff207d081d091e6a40e', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '5f941c0311eff468be1c6abe7cbcdab8ba272e15' }))));
+        return (h(Host, { key: '1510f7ec123b7bfaa39cc348a6b496a9051163ea', "data-version": version }, h("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) }, h("slot", { key: '182f95928a4f70c747073e4585c18cab5f0eb277' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -93,7 +93,7 @@ export class PostTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
                             "referenceLocation": "Placement"
                         }
                     }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -180,7 +180,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '37f835a46c96f1f97019b611da8b6be2d6e1a8d7', "data-version": version }, h("slot", { key: 'c2fc3d9080948fdcfbd8b2866730e76b770b87ba', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '692a3cda2890f30f0df80366a9610ec70b0872ba', "data-version": version }, h("slot", { key: '0a9df94a1d52ec318ecbec6740b7d3acc915b130', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/breakpoints.js

@@ -1,20 +1,21 @@
-import { throttle } from "throttle-debounce";
 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;
@@ -22,9 +23,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);

package/dist/collection/utils/closable-target.js

@@ -0,0 +1,38 @@
+import { findClosestAcrossShadow } from "./event-from";
+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),
+    },
+];
+export 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) };
+}

package/dist/collection/utils/event-from.js

@@ -89,29 +89,34 @@ export 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;
+export 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);
+}

package/dist/collection/utils/floating-ui.js

@@ -0,0 +1,72 @@
+/**
+ * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
+ */
+import { computePosition, platform as domPlatform } from "@floating-ui/dom";
+import { getParentNode, isHTMLElement, isLastTraversableNode, isTopLayer, } from "@floating-ui/utils/dom";
+const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
+/**
+ * A custom floating UI platform that restricts clipping rectangles to the safe area.
+ */
+const safeAreaPlatform = { ...domPlatform, 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 domPlatform.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.
+ */
+export 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(),
+        },
+    });
+};

package/dist/collection/utils/index.js

@@ -1,6 +1,7 @@
 export * from './property-decorators';
 export * from './attribute-observer';
 export * from './breakpoints';
+export * from './closable-target';
 export * from './component-on-ready';
 export * from './debounce';
 export * from './event-from';

package/dist/components/breakpoints.js

@@ -1 +1 @@
-import{getElement as t}from"@stencil/core/internal/client";const e=[void 0,null,"",Number.NaN];function n(t){return e.some((e=>Object.is(e,t)))}const i=new WeakSet,o=new WeakSet,s=new WeakMap,c=new WeakMap,r=new WeakMap,u=new WeakMap;function a(t,e,n){let i=t.get(e);return i||(i=n(),t.set(e,i)),i}function f(t){return a(c,t,(()=>new Set))}function h(t){return a(r,t,(()=>new Map))}function d(t,e,n){v(t,e);const i=a(u,t,(()=>new Map));a(i,e,(()=>new Set)).add(n)}function v(t,e){const n=Object.getOwnPropertyDescriptor(t,e);n&&n.get||Object.defineProperty(t,e,{get(){return h(this).get(e)},set(t){if(h(this).set(e,t),o.has(this)){l(this,e);const t=Object.getPrototypeOf(this),n=u.get(t);if(n){const t=n.get(e);if(t)for(const e of t)l(this,e)}}},enumerable:!0,configurable:!0})}function l(t,e){const i=Object.getPrototypeOf(t),o=s.get(i);if(!o)return;const c=o.get(e);if(!c||0===c.length)return;const r=[...c].sort(((t,e)=>t.priority-e.priority)),u=n(t[e]);for(const n of r)if((!u||n.validateEmptyValues)&&!n.run(t,e)&&n.blocking)break}function b(t){return function(e,n){v(e,n),function(t){if(i.has(t))return;i.add(t);const e="componentDidLoad"in t&&"function"==typeof t.componentDidLoad?t.componentDidLoad:void 0;Object.defineProperty(t,"componentDidLoad",{writable:!0,configurable:!0,value:function(...t){o.add(this);const n=f(Object.getPrototypeOf(this));for(const t of n)l(this,t);if(e)return e.apply(this,t)}})}(e),f(e).add(n),function(t,e){const n=a(s,t,(()=>new Map));return a(n,e,(()=>[]))}(e,n).push(t)}}function m(e,n){const i=t(e),o=i.localName,s=e[n];return{value:s,showError(t){console.error(`[${o}] Property "${String(n)}" ${t}. Received: ${JSON.stringify(s)}.`,i)}}}function p(t,e,n){var i,o=n||{},s=o.noTrailing,c=void 0!==s&&s,r=o.noLeading,u=void 0!==r&&r,a=o.debounceMode,f=void 0===a?void 0:a,h=!1,d=0;function v(){i&&clearTimeout(i)}function l(){for(var n=arguments.length,o=new Array(n),s=0;s<n;s++)o[s]=arguments[s];var r=this,a=Date.now()-d;function l(){d=Date.now(),e.apply(r,o)}function b(){i=void 0}h||(u||!f||i||l(),v(),void 0===f&&a>t?u?(d=Date.now(),c||(i=setTimeout(f?b:l,t))):l():!0!==c&&(i=setTimeout(f?b:l,void 0===f?t-a:t)))}return l.cancel=function(t){var e=(t||{}).upcomingOnly,n=void 0!==e&&e;v(),h=!n},l}function w(t,e){var n={}.atBegin;return p(t,e,{debounceMode:!1!==(void 0!==n&&n)})}const k=new class{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}],this.resizeObserver=globalThis.ResizeObserver?new ResizeObserver((()=>this.updateCurrentBreakpoint())):null,this.updateCurrentBreakpoint=p(50,((t={emitEvents:!0})=>{const e=this.currentBreakpoint,n=this.breakpoints.find((t=>t.minWidth<=innerWidth));n&&(this.currentBreakpoint=n,t.emitEvents&&Object.keys(this.currentBreakpoint).filter((t=>!e||this.currentBreakpoint[t]!==e[t])).forEach((t=>this.dispatchEvent(t))))})),this.resizeObserver&&(this.updateCurrentBreakpoint({emitEvents:!1}),this.resizeObserver.observe(document.body))}dispatchEvent(t){globalThis.dispatchEvent(new CustomEvent(`postBreakpoint:${t}`,{detail:this.currentBreakpoint[t]}))}get(t){return this.updateCurrentBreakpoint({emitEvents:!1}),this.currentBreakpoint[t]}};export{k as b,b as c,w as d,m as g,n as i,d as r,p as t}
+import{getElement as t}from"@stencil/core/internal/client";const e=[void 0,null,"",Number.NaN];function n(t){return e.some((e=>Object.is(e,t)))}const i=new WeakSet,o=new WeakSet,s=new WeakMap,c=new WeakMap,r=new WeakMap,u=new WeakMap;function a(t,e,n){let i=t.get(e);return i||(i=n(),t.set(e,i)),i}function h(t){return a(c,t,(()=>new Set))}function d(t){return a(r,t,(()=>new Map))}function f(t,e,n){m(t,e);const i=a(u,t,(()=>new Map));a(i,e,(()=>new Set)).add(n)}function m(t,e){const n=Object.getOwnPropertyDescriptor(t,e);n&&n.get||Object.defineProperty(t,e,{get(){return d(this).get(e)},set(t){if(d(this).set(e,t),o.has(this)){l(this,e);const t=Object.getPrototypeOf(this),n=u.get(t);if(n){const t=n.get(e);if(t)for(const e of t)l(this,e)}}},enumerable:!0,configurable:!0})}function l(t,e){const i=Object.getPrototypeOf(t),o=s.get(i);if(!o)return;const c=o.get(e);if(!c||0===c.length)return;const r=[...c].sort(((t,e)=>t.priority-e.priority)),u=n(t[e]);for(const n of r)if((!u||n.validateEmptyValues)&&!n.run(t,e)&&n.blocking)break}function b(t){return function(e,n){m(e,n),function(t){if(i.has(t))return;i.add(t);const e="componentDidLoad"in t&&"function"==typeof t.componentDidLoad?t.componentDidLoad:void 0;Object.defineProperty(t,"componentDidLoad",{writable:!0,configurable:!0,value:function(...t){o.add(this);const n=h(Object.getPrototypeOf(this));for(const t of n)l(this,t);if(e)return e.apply(this,t)}})}(e),h(e).add(n),function(t,e){const n=a(s,t,(()=>new Map));return a(n,e,(()=>[]))}(e,n).push(t)}}function p(e,n){const i=t(e),o=i.localName,s=e[n];return{value:s,showError(t){console.error(`[${o}] Property "${String(n)}" ${t}. Received: ${JSON.stringify(s)}.`,i)}}}const w=new class{constructor(){this.breakpoints=[{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=(t={emitEvents:!0})=>{const e=this.currentBreakpoint,n=this.breakpoints.find((t=>globalThis.matchMedia?globalThis.matchMedia(t.mediaQuery).matches:t.minWidth<=document.documentElement.clientWidth));n&&(this.currentBreakpoint=n,t.emitEvents&&Object.keys(this.currentBreakpoint).filter((t=>"mediaQuery"!==t)).filter((t=>!e||this.currentBreakpoint[t]!==e[t])).forEach((t=>this.dispatchEvent(t))))},this.resizeObserver&&(this.updateCurrentBreakpoint({emitEvents:!1}),this.resizeObserver.observe(document.body))}dispatchEvent(t){globalThis.dispatchEvent(new CustomEvent(`postBreakpoint:${t}`,{detail:this.currentBreakpoint[t]}))}get(t){return this.updateCurrentBreakpoint({emitEvents:!1}),this.currentBreakpoint[t]}};export{w as b,b as c,p as g,n as i,f as r}

package/dist/components/event-from.js

@@ -1 +1 @@
-function n(n,t,e,i,r=!1){if(!(n instanceof Event&&n.target instanceof HTMLElement))return!1;const o=n.target;if(r){if(!o.closest(t))return!1}else if(o.localName!==t)return!1;return!i||function(n,t){let e=n;for(;e;){if(e.localName===t)return e;e=e.parentElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}return null}(o,e.localName)===e}function t(t,e){const i={ignoreNestedComponents:!0,allowDescendants:!1,...e};return function(e,r,o){if(o){const e=o.value;o.value=function(r){if(n(r,t,this.host,i.ignoreNestedComponents,i.allowDescendants))return e.call(this,r)}}else{const o=`__${r}_original`;Object.defineProperty(e,o,{writable:!0,configurable:!0}),Object.defineProperty(e,r,{get(){return this[o]},set(e){this[o]="function"==typeof e?r=>{if(n(r,t,this.host,i.ignoreNestedComponents))return e.call(this,r)}:e},configurable:!0,enumerable:!0})}}}export{t as E}
+function n(n,t,i,r,o=!1){if(!(n instanceof Event&&n.target instanceof HTMLElement))return!1;const s=n.target;if(o){if(!s.closest(t))return!1}else if(s.localName!==t)return!1;return!r||(f=i.localName,e(s,(n=>n.localName===f))===i);var f}function t(t,e){const i={ignoreNestedComponents:!0,allowDescendants:!1,...e};return function(e,r,o){if(o){const e=o.value;o.value=function(r){if(n(r,t,this.host,i.ignoreNestedComponents,i.allowDescendants))return e.call(this,r)}}else{const o=`__${r}_original`;Object.defineProperty(e,o,{writable:!0,configurable:!0}),Object.defineProperty(e,r,{get(){return this[o]},set(e){this[o]="function"==typeof e?r=>{if(n(r,t,this.host,i.ignoreNestedComponents))return e.call(this,r)}:e},configurable:!0,enumerable:!0})}}}function e(n,t){let e=n;for(;e;){if(t(e))return e;if(e.parentElement)e=e.parentElement;else{const n=e.parentNode;e=null!==n&&11===n.nodeType&&"host"in n?n.host:null}}return null}export{t as E,e as f}