@swisspost/design-system-components 10.4.0 → 10.5.0

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

@@ -120,17 +120,32 @@ export class PostMenu {
         this.toggleMenu.emit(this.isVisible);
         if (this.isVisible) {
             this.lastFocusedElement = this.root?.activeElement;
-            requestAnimationFrame(() => {
-                const menuItems = this.getSlottedItems();
-                if (menuItems.length > 0) {
-                    menuItems[0].focus();
-                }
-            });
+            // Only focus the first item if the trigger was keyboard-focus-visible
+            // that's the browser's own signal for a keyboard-driven interaction.
+            if (this.wasFocusVisible(this.lastFocusedElement)) {
+                requestAnimationFrame(() => {
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                });
+            }
         }
         else if (this.lastFocusedElement) {
             this.lastFocusedElement.focus();
         }
     }
+    wasFocusVisible(element) {
+        if (!element)
+            return false;
+        try {
+            return element.matches(':focus-visible');
+        }
+        catch {
+            // Not supported, fall back to always focusing
+            return true;
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (menuItems.length === 0) {
@@ -184,7 +199,7 @@ export class PostMenu {
         ]));
     }
     render() {
-        return (h(Host, { key: 'ec2d0c28803ab242f28e942c52d03b38d40f3704', "data-version": version }, h("post-popovercontainer", { key: 'c2bbf5c95e200aecbdc55b94676ab1b1b0a32d13', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '80e56e976e944955f72b504b33ee3a16117f4551', part: "post-menu" }, h("slot", { key: 'cab13b8104f0be049e31fe5b3eca3af85bec0869', name: "header" }), h("slot", { key: 'acbbd8565bb90c91dad4713fbc4e8c50d10390e8' })))));
+        return (h(Host, { key: 'cc6ede4cdacb722006475de88385b041d7e42dcb', "data-version": version }, h("post-popovercontainer", { key: '3931f604aad477441112fd0b5a4800c8f034abbb', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '1b0adb12bb1369d14a6bcfac3c956090eb66572a', part: "post-menu" }, h("slot", { key: '9c2518e7e9e6ccaa64d486a90b5fc7eec15c24b8', name: "header" }), h("slot", { key: 'd28df1e411010aabe083255cd5e5ece4bd62424d' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -210,7 +225,7 @@ export class PostMenu {
                         "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-menu-trigger/post-menu-trigger.js

@@ -65,7 +65,7 @@ export class PostMenuTrigger {
         return null;
     }
     render() {
-        return (h(Host, { key: '2e0560835a4202f9a84990a60305bf7dc8adbc98', "data-version": version }, h("slot", { key: 'd175e8bc5ddb253476f9795d7b0b2df2797c46aa' })));
+        return (h(Host, { key: 'fcdfd58ba24cd5269461477ac3d00a53ccf2ea1b', "data-version": version }, h("slot", { key: 'b3a6b137bf61accd32eb1bec5af5e39e68ec6613' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-number-input/post-number-input.js

@@ -89,10 +89,10 @@ export class PostNumberInput {
     }
     render() {
         const areButtonsShown = !!this.input;
-        return (h(Host, { key: '770a0b0fe9b018afcb81f4477f45e6ea8ce27ad7', "data-version": version, class: {
+        return (h(Host, { key: 'aeb366d1738707172f9ae3e154f9a93a10caa016', "data-version": version, class: {
                 'number-input-sm': this.small,
                 'disabled': this.isDisabled,
-            } }, areButtonsShown && (h("div", { key: '8e599b55dc4362674719df75a573bf9ce34e79ff', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: 'aa55be92c51df3cc1b7f006a4400090eb345747c', name: "minus" }))), h("div", { key: '030ea2a621529e61757edfc5a79fa353327a8102', class: "input-container" }, h("slot", { key: '800d325da194bd0f32eab2a2bba21211aaf1829b', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '901dc835f21fbb51146d93f7f34775c600163993', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: '1a7b93951f1f9978a1d321b33b2083774dcf86b0', name: "plus" })))));
+            } }, areButtonsShown && (h("div", { key: '9037651a4e2f65ca62f1f4ebe0575a25383c77c7', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: '43ac843cc7df50981dc92eeb5405b415d530a415', name: "minus" }))), h("div", { key: 'f49907424a6cc6802ee9066ef42dcc2c43b1bbfd', class: "input-container" }, h("slot", { key: 'f649b968dac37fbb5f5a643853aedbc90653ed6c', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '66d06189252e360f43c3e63fbdce300be9606069', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: '44bcff6c698f87eac09d1aeaa8b6af6436cac572', name: "plus" })))));
     }
     static get is() { return "post-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-*{box-sizing:border-box}:host{display:contents}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:8px;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:8px;flex-grow:1}
+*{box-sizing:border-box}:host{display:contents}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:8px;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:8px;flex-grow:1}post-closebutton{color-scheme:light}

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

@@ -83,10 +83,10 @@ export class PostPopover {
         }
     }
     render() {
-        return (h(Host, { key: 'a389be5fa8b44b8f606041313a5c68897e12fbe9', "data-version": version }, h("post-popovercontainer", { key: 'eedea7fb9aec40bb76d43a17be36ba72c9db763f', arrow: this.arrow, placement: this.placement, edgeGap: this.edgeGap, ref: e => {
+        return (h(Host, { key: '61399669708d5983911748d652ef1a0d7e0562a0', "data-version": version }, h("post-popovercontainer", { key: '561bbe71d735acec27421160623169f7f7f8134e', arrow: this.arrow, placement: this.placement, edgeGap: this.edgeGap, autoHide: true, ref: e => {
                 if (e)
                     this.popoverRef = e;
-            } }, h("div", { key: '699d1b9923ea5bdf2fc822cd45f32a087099557a', class: "popover-container" }, h("div", { key: 'f80a86811d07a9a2478e28e7c8df476000850f08', class: "popover-content" }, h("slot", { key: '06fc1c9b71dbdb59c12889d378c59a183a8e9f64' })), h("post-closebutton", { key: 'a8ff2d07eef92aa6e88f4ff7c9f42b59395c6760', onClick: () => this.hide() }, this.textClose)))));
+            } }, h("div", { key: 'f7e8d0ae5556cfd429c43b12c3d3d0b19e3cdd46', class: "popover-container" }, h("div", { key: '74c9076d67696ff1d1a295560140864b26f59f60', class: "popover-content" }, h("slot", { key: '5c63af09f545ed7fe3fcfd810fccd7db9da05e8a' })), h("post-closebutton", { key: 'f8fd8c7ba548b912c3fe84994810add92fb470d9' }, this.textClose)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -112,7 +112,7 @@ export class PostPopover {
                         "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-popover-trigger/post-popover-trigger.js

@@ -72,7 +72,7 @@ export class PostPopoverTrigger {
     focusTrigger() {
         // Restores focus to the trigger
         if (!this.popoverOpen && this.trigger) {
-            this.trigger.focus();
+            this.trigger.focus({ preventScroll: true });
         }
     }
     constructor() {
@@ -107,7 +107,7 @@ export class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '8100af4eaff1f8b790d7019414b078018ffc5ed1', "data-version": version }, h("slot", { key: '91e7f8f31bdc84290618a5c8b29e38cca77de177', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: 'a8a3be80d30404564add3fcbef1a24b4f59d4614', "data-version": version }, h("slot", { key: '1fada9d0241aa9e8ab6392e63feb61dc2c686dd5', onSlotchange: () => this.setupTrigger() })));
     }
     static get is() { return "post-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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: 'bffef7c8067f21aa99c45deaaf2bc122ea455191', "data-version": version, popover: "auto" }, h("div", { key: '023339edd5b36827e0051179bee464236bccc62a', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: 'ae921c38aa8c33ad8b37453a56d22ee7b4b9950c', "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: 'f7c2720a3bedb808855628482c5b1f377e2719a8', part: "post-popovercontainer-border-mask" }), h("slot", { key: 'e0fee3fded9fea41bc0260f45be0375e236463f9' }))));
+            } })), 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: '434d38d2a3157820477b80831a8283ca9e427dfb', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '862332d99d2b930258e20d2f4417cdfebc6e6333', 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: '082aaa831e204f0576c494bd9ce14364b7a34436', "data-version": version }, h("div", { key: '1c13ae74c34a1032fa680ce608aac0320178bd65', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (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

@@ -129,7 +129,7 @@ export class PostSideNavigation {
             } }, h("slot", null), h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
     }
     render() {
-        return (h(Host, { key: '48fa216d175f5fc96a722dd9aa1d4043298f9512', "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: '1fda1561026f1eb8a4c976a937d2573713068ef9', "data-version": version }, h("slot", { key: '4e594cf134bfa431e410099cc0b8bf3071833e9a' })));
+        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: 'c7b01aa30601ce7e2a383d637e8f9342de1c2143', "data-version": version }, h("ol", { key: '2c864063c2d22988b397b1b83667416edbb9b2b4' }, h("slot", { key: '43a980fa016cd4d45cc90e4fe35de51e549efa19', onSlotchange: () => this.updateSteps() })), h("div", { key: '6fa9f79b179f01d25aed9138614c8d99b4a3fc26', class: "active-step", "aria-hidden": "true" }, h("span", { key: '89305778f7f921e6d62274142a9eb40c405d705b', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: '5964200ae887c012ee843d0d80ce596302b952af', 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: '0c4bdf86a40900511d1e6cb0fee86b14235bbeec', "data-version": version, role: "listitem" }, h("span", { key: '20743202fbefd8ba438a8dd8276462fd7587d45b', class: "stepper-item-content" }, h("span", { key: '00f1b587f5219976227c3db270bb2b746e4d2c6a', class: "step-hidden-label visually-hidden" }), h("span", { key: '897dd5917855cd9437ec455f1d683e213c0e9a8d', class: "label" }, h("slot", { key: '9485bf03c43dcb92b49b80c28175542fed89d4a1' })))));
+        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: '3d17a3c22c3677483bc4c86600b7527353dff290', 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: '9514279224549dcc0bf5553e98c535b64f37a191' })));
+                : 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: '51119127b00717573aa2fa270186ea907ce8bfbc', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels", style: isSSR ? { display: `var(--post-tab-panel-${this.for}, none)` } : undefined }, h("slot", { key: '7defd4cfb69b1f2b5f3d36cea10df5aed65eb440' })));
+        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.js

@@ -427,10 +427,10 @@ export class PostTabs {
             }
             : undefined;
         const style = isSSR && !this.isPagesVariant ? tabStyle : undefined;
-        return (h(Host, { key: 'd5776ab3d40faaf892fc494bc57455f94f7905de', "data-version": version, style: style }, h("div", { key: '5a8055fd968bcbaa2fe408eb14cb140db0b5cd88', class: "tabs-wrapper", part: "post-tabs" }, h("button", { key: '96f5ead41bfcf826941c2d652f61e04729f18f1d', ref: el => (this.leftScrollButton = el), class: "scroll-btn scroll-btn-left", type: "button", "aria-label": this.textPrevTabItems, tabindex: this.showLeftScrollButton ? 0 : -1, hidden: !this.showLeftScrollButton, onClick: () => this.scrollTabs('prev') }, h("post-icon", { key: '37593c698ce7266194819ec47eee2412a7b7779d', name: "chevronleft" })), h(TabsContainer, { key: '6178c4a55c748dab1c4d1ff7eba5ba63332fd6fd', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, h("slot", { key: 'e08327a41440a408ae6c8a8885cef34090bfb244', 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: '1891e50feaf86f4aac16c63acc4bd836ebff3492', ref: el => (this.rightScrollButton = el), class: "scroll-btn scroll-btn-right", type: "button", "aria-label": this.textNextTabItems, tabindex: this.showRightScrollButton ? 0 : -1, hidden: !this.showRightScrollButton, onClick: () => this.scrollTabs('next') }, h("post-icon", { key: '3a95b1bd98566a4783e066aa0ce0e8fb083dc7c3', name: "chevronright" }))), !this.isPagesVariant && (h("div", { key: 'aef00cd5120565a053d892963e129f1ee6377a89', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'd8068bcb3d4daa6f62dc4ad0da644d993ca82aa9', 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: '7b935b808aa1ebbe97ac37bed25bfc215513097f', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'd06f112049850f8d7bdffd5e0b70440bae41010b' })));
+        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.js

@@ -67,7 +67,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '88e3d485579f14915471a3d6cd09654d4bd288e7', "data-version": version }, h("post-popovercontainer", { key: 'e1cd5638316cf34517d46c5b73c865ac4548d906', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '02ce027505b3fe4f90c2e3208cb7e2c304138c5e' }))));
+        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: '6c772242ad42feedd5ff3fe7e7ab637fae8d1292', "data-version": version }, h("slot", { key: 'fac33c09dcff608e386bc75af9eef4cc19eecf10', 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);
+}