@swisspost/design-system-components 10.0.0-next.53 → 10.0.0-next.54

package/dist/components/post-megadropdown.js

@@ -62,7 +62,9 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         if (PostMegadropdown.activeDropdown === this) {
             PostMegadropdown.activeDropdown = null;
         }
-        this.defaultSlotObserver.disconnect();
+        if (this.defaultSlotObserver) {
+            this.defaultSlotObserver.disconnect();
+        }
     }
     /**
      * Toggles the dropdown visibility based on its current state.
@@ -229,7 +231,7 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: '341ea7fd69a095bc0f18b0f73c3ac5247784dd33', version: version }, h("div", { key: '078435c707ec6b2e0d51f8adad5502729513af63', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'ad92234d06bccbc60a2e1a6cc63634535646c4f7', class: "megadropdown" }, h("slot", { key: 'f9779e130c7709912c12d30b554ff8f478840628', name: "megadropdown-title" }), h("slot", { key: 'e079e0381a0ce7e3ab7efd974cdf36e6938a378d', name: "megadropdown-overview-link" }), h("div", { key: '508d4e9bddb727e960aa6f2dc15515f1718aa2b9', class: "megadropdown-content" }, h("slot", { key: '442bb0b169824ed66ae5e7da9acd6bb7d759b6f5' })), h("div", { key: 'cc278c0b5680019270206fbde4ce7a83341a029a', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '9c42fa29e89f60af62ab5d04d01e1764b36ebec4', name: "back-button" })), h("div", { key: '62bcc5bcc348cb45289ded98273804ab547471ef', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '2cdf1d72f62a162bfb1596507063315430953096', name: "close-button" }))))));
+        return (h(Host, { key: 'd111d8d93a9b64018f3df88813da8f6d1c65759e', version: version }, h("div", { key: 'd7cb2b98624c9241108bc66cc11c15c0a2e7acf3', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '9f0280b6f28f19ee7f9ba4707209b64b38759927', class: "megadropdown" }, h("slot", { key: '71f2521e1ab13406dd986c18a7c52e171148b0b0', name: "megadropdown-title" }), h("slot", { key: '148de1446aade76b074e155d07b70e775fc9612c', name: "megadropdown-overview-link" }), h("div", { key: '269c1e1db66acb7c274c720a9f715d29e875ef54', class: "megadropdown-content" }, h("slot", { key: '444040337c57e64bcc57f56415c4c40513ef0a5b' })), h("div", { key: 'f97d8c578ee19b5ba7d593e5d110e3b283255087', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'dc04da3a42714e2e8742ab8ed25bcc288a236294', name: "back-button" })), h("div", { key: '354eca51a5aef76d483a30e595bedfa95792d7ce', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '28693622360c0da91f3051426be545852c5ec337', name: "close-button" }))))));
     }
     get host() { return this; }
     static get style() { return postMegadropdownCss; }

package/dist/components/post-menu2.js

@@ -76,10 +76,12 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             this.toggleMenu.emit(this.isVisible);
             if (this.isVisible) {
                 this.lastFocusedElement = this.root?.activeElement;
-                const menuItems = this.getSlottedItems();
-                if (menuItems.length > 0) {
-                    menuItems[0].focus();
-                }
+                requestAnimationFrame(() => {
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                });
             }
             else if (this.lastFocusedElement) {
                 this.lastFocusedElement.focus();
@@ -193,7 +195,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '092a180331d50cfe701ad440569e0e6bd4bcd0c8', "data-version": version }, h("post-popovercontainer", { key: '96f33df1a47d2fb1f6f862a7d7f97def5fd8b642', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '5d23d1059dd1cf68ac817acc8227129267a3c5a4', part: "menu" }, h("slot", { key: '020fbf8912393d85cd5a6fd9f65fdf264f2ba6f6', name: "header" }), h("slot", { key: '07cd9cb978ec85dd7fbbaed527520b97484e2030' })))));
+        return (h(Host, { key: 'eef3d3cdf2553c2627ddf580a95c70f00c02d388', "data-version": version }, h("post-popovercontainer", { key: '27c3341bec9d4ee98b59f70e902913f03954c32c', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ef6c0ab8b6de380c23f6562a3d0ba34d9eaace98', part: "menu" }, h("slot", { key: 'edca1d3e9ab11d016ba18baf9f8d6aa65bb71958', name: "header" }), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-popovercontainer2.js

@@ -2773,6 +2773,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
          * Whether or not the popovercontainer should close when user clicks outside of it
          */
         this.manualClose = false;
+        this.currentAnimation = null;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -2814,8 +2815,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.toggleTimeoutId)
             return;
         this.eventTarget = target;
-        if (this.toggleTimeoutId)
-            return;
         this.calculatePosition();
         this.host.showPopover();
     }
@@ -2826,17 +2825,19 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
-            const animation = popIn(content);
-            if (animation?.playState === 'running') {
+            // Only run animation and emit related events if animation is defined
+            if (this.animation === null) {
+                // No animation case
                 this.postBeforeToggle.emit({ willOpen: true });
                 this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-            }
-            animation?.finished.then(() => {
                 this.postToggle.emit({ isOpen: true });
                 this.postShow.emit({ first: this.hasOpenedOnce });
                 if (this.hasOpenedOnce)
                     this.hasOpenedOnce = false;
-            });
+            }
+            else {
+                this.runOpenAnimation(content);
+            }
         }
         if (this.safeSpace) {
             window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
@@ -2852,17 +2853,50 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.safeSpace) {
             window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
+        // Cancel any running animation
+        if (this.animation !== null && this.currentAnimation) {
+            this.currentAnimation.cancel();
+            this.currentAnimation = null;
+        }
+        this.postBeforeToggle.emit({ willOpen: false });
         this.postToggle.emit({ isOpen: false });
         this.postHide.emit();
     }
+    /**
+     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     */
+    async runOpenAnimation(element) {
+        let animation;
+        try {
+            animation = popIn(element);
+            this.currentAnimation = animation;
+            if (animation.playState === 'running') {
+                this.postBeforeToggle.emit({ willOpen: true });
+                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            }
+            await animation.finished;
+            this.postToggle.emit({ isOpen: true });
+            this.postShow.emit({ first: this.hasOpenedOnce });
+            this.hasOpenedOnce = true;
+        }
+        catch (err) {
+            console.warn('Animation failed or was interrupted:', err);
+            // Reset all states to closing
+            this.postBeforeToggle.emit({ willOpen: false });
+            this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            this.postToggle.emit({ isOpen: false });
+        }
+        finally {
+            if (this.currentAnimation === animation) {
+                this.currentAnimation = null;
+            }
+        }
+    }
     /**
      * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
-            if (this.eventTarget && this.eventTarget instanceof HTMLElement$1) {
-                this.eventTarget.focus();
-            }
             this.eventTarget = null;
             this.host.hidePopover();
             this.postHide.emit();
@@ -3028,9 +3062,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: 'cdb25a25fbd5e411e380175a8d3789cec83e2755', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'e99bcc4d5123b335b4b8be7044a80b2913ab6fce', class: "popover-content" }, this.arrow && (h("span", { key: '3c228829cc7e5bd83d7f1759ef163407ebcd10c5', class: "arrow", ref: el => {
+        return (h(Host, { key: 'ec57bb478a7fe7d6449ef1ed4d91db4d0835ea4e', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '2969b3c6ef9441d06b9c913f47bb64e84006dbe4', class: "popover-content" }, this.arrow && (h("span", { key: '03b8addd0bee91d9358e9554f2d507b9a349e0db', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '6a213deed5ccfec47d4dee903c7544d30a3f5748' }))));
+            } })), h("slot", { key: '2fb25dce5ea9e5f1044cde4839df61af34c8b667' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-vCHPi-c4.js → p-2U_BGLjc.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './p-CV7fm1rW.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 
 const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 

package/dist/components/react/{p-CEP4VRNR.js → p-BK474oMI.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 
 const postMenuItemCss = "post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;width:100%;align-items:center;padding:.5rem .75rem .5rem 1rem;gap:.75rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1rem;height:1rem;margin-block:.25rem}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:.75rem;gap:1rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.5rem;height:1.5rem;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:.8125rem}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}";
 

package/dist/components/react/{p-DZ_1ljyU.js → p-BUxAs8N5.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { g as getRoot } from './p-CBFgkSgY.js';

package/dist/components/react/p-BXRsHuTS.js

@@ -0,0 +1,3 @@
+const version = "10.0.0-next.54";
+
+export { version as v };

package/dist/components/react/{p-CJocYMQ7.js → p-BfLuYwf7.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
 

package/dist/components/react/{p-ClCCjdRt.js → p-Ccgu_WOx.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$1 } from './p-2U_BGLjc.js';
 
 const postBreadcrumbItemCss = ":host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}";
 

package/dist/components/react/{p-oXx3C5kr.js → p-D3CFjhAf.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$1 } from './p-2U_BGLjc.js';
 
 const BUTTON_TYPES = ['button', 'submit', 'reset'];
 

package/dist/components/react/{p-DC1SzgZS.js → p-D4NSCxrX.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';

package/dist/components/react/{p-D_8kJXLe.js → p-DVxZMuPW.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
 import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';

package/dist/components/react/{p-RFewkSE5.js → p-Dj7qWba5.js}

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
 import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
 import { n as nanoid } from './p-BLchVpF6.js';
-import { d as defineCustomElement$3 } from './p-CJocYMQ7.js';
-import { d as defineCustomElement$2 } from './p-DC1SzgZS.js';
-import { d as defineCustomElement$1 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$3 } from './p-BfLuYwf7.js';
+import { d as defineCustomElement$2 } from './p-D4NSCxrX.js';
+import { d as defineCustomElement$1 } from './p-2U_BGLjc.js';
 
 const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start-width:var(--post-device-border-width-default);border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}";
 

package/dist/components/react/{p-ClNlUIJm.js → p-mENtrn2l.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './p-CV7fm1rW.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 
 const PLACEMENT_TYPES = [
     'top',
@@ -2773,6 +2773,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
          * Whether or not the popovercontainer should close when user clicks outside of it
          */
         this.manualClose = false;
+        this.currentAnimation = null;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -2814,8 +2815,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.toggleTimeoutId)
             return;
         this.eventTarget = target;
-        if (this.toggleTimeoutId)
-            return;
         this.calculatePosition();
         this.host.showPopover();
     }
@@ -2826,17 +2825,19 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
-            const animation = popIn(content);
-            if (animation?.playState === 'running') {
+            // Only run animation and emit related events if animation is defined
+            if (this.animation === null) {
+                // No animation case
                 this.postBeforeToggle.emit({ willOpen: true });
                 this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-            }
-            animation?.finished.then(() => {
                 this.postToggle.emit({ isOpen: true });
                 this.postShow.emit({ first: this.hasOpenedOnce });
                 if (this.hasOpenedOnce)
                     this.hasOpenedOnce = false;
-            });
+            }
+            else {
+                this.runOpenAnimation(content);
+            }
         }
         if (this.safeSpace) {
             window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
@@ -2852,17 +2853,50 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.safeSpace) {
             window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
+        // Cancel any running animation
+        if (this.animation !== null && this.currentAnimation) {
+            this.currentAnimation.cancel();
+            this.currentAnimation = null;
+        }
+        this.postBeforeToggle.emit({ willOpen: false });
         this.postToggle.emit({ isOpen: false });
         this.postHide.emit();
     }
+    /**
+     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     */
+    async runOpenAnimation(element) {
+        let animation;
+        try {
+            animation = popIn(element);
+            this.currentAnimation = animation;
+            if (animation.playState === 'running') {
+                this.postBeforeToggle.emit({ willOpen: true });
+                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            }
+            await animation.finished;
+            this.postToggle.emit({ isOpen: true });
+            this.postShow.emit({ first: this.hasOpenedOnce });
+            this.hasOpenedOnce = true;
+        }
+        catch (err) {
+            console.warn('Animation failed or was interrupted:', err);
+            // Reset all states to closing
+            this.postBeforeToggle.emit({ willOpen: false });
+            this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            this.postToggle.emit({ isOpen: false });
+        }
+        finally {
+            if (this.currentAnimation === animation) {
+                this.currentAnimation = null;
+            }
+        }
+    }
     /**
      * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
-            if (this.eventTarget && this.eventTarget instanceof H) {
-                this.eventTarget.focus();
-            }
             this.eventTarget = null;
             this.host.hidePopover();
             this.postHide.emit();
@@ -3028,9 +3062,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: 'cdb25a25fbd5e411e380175a8d3789cec83e2755', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'e99bcc4d5123b335b4b8be7044a80b2913ab6fce', class: "popover-content" }, this.arrow && (h("span", { key: '3c228829cc7e5bd83d7f1759ef163407ebcd10c5', class: "arrow", ref: el => {
+        return (h(Host, { key: 'ec57bb478a7fe7d6449ef1ed4d91db4d0835ea4e', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '2969b3c6ef9441d06b9c913f47bb64e84006dbe4', class: "popover-content" }, this.arrow && (h("span", { key: '03b8addd0bee91d9358e9554f2d507b9a349e0db', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '6a213deed5ccfec47d4dee903c7544d30a3f5748' }))));
+            } })), h("slot", { key: '2fb25dce5ea9e5f1044cde4839df61af34c8b667' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-BB-k_ccz.js → p-nSFSgY-P.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-ClNlUIJm.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-mENtrn2l.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { g as getFocusableChildren } from './p-BVXiQdHq.js';
 import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
@@ -76,10 +76,12 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             this.toggleMenu.emit(this.isVisible);
             if (this.isVisible) {
                 this.lastFocusedElement = this.root?.activeElement;
-                const menuItems = this.getSlottedItems();
-                if (menuItems.length > 0) {
-                    menuItems[0].focus();
-                }
+                requestAnimationFrame(() => {
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                });
             }
             else if (this.lastFocusedElement) {
                 this.lastFocusedElement.focus();
@@ -193,7 +195,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '092a180331d50cfe701ad440569e0e6bd4bcd0c8', "data-version": version }, h("post-popovercontainer", { key: '96f33df1a47d2fb1f6f862a7d7f97def5fd8b642', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '5d23d1059dd1cf68ac817acc8227129267a3c5a4', part: "menu" }, h("slot", { key: '020fbf8912393d85cd5a6fd9f65fdf264f2ba6f6', name: "header" }), h("slot", { key: '07cd9cb978ec85dd7fbbaed527520b97484e2030' })))));
+        return (h(Host, { key: 'eef3d3cdf2553c2627ddf580a95c70f00c02d388', "data-version": version }, h("post-popovercontainer", { key: '27c3341bec9d4ee98b59f70e902913f03954c32c', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ef6c0ab8b6de380c23f6562a3d0ba34d9eaace98', part: "menu" }, h("slot", { key: 'edca1d3e9ab11d016ba18baf9f8d6aa65bb71958', name: "header" }), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/post-accordion-item.js

@@ -1,4 +1,4 @@
-import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-RFewkSE5.js';
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-Dj7qWba5.js';
 
 const PostAccordionItem = PostAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/react/post-accordion.js

@@ -1,4 +1,4 @@
-import { P as PostAccordion$1, d as defineCustomElement$1 } from './p-D_8kJXLe.js';
+import { P as PostAccordion$1, d as defineCustomElement$1 } from './p-DVxZMuPW.js';
 
 const PostAccordion = PostAccordion$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/react/post-avatar.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { c as checkRequiredAndType, e as checkEmptyOrType, f as checkEmptyOrPattern } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 

package/dist/components/react/post-back-to-top.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BXRsHuTS.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$2 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$2 } from './p-2U_BGLjc.js';
 
 // Define common animation options
 const easing = 'ease';