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

package/dist/components/post-tooltip.js

@@ -71,7 +71,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'cdde276f07efb0916bb3b0cd7cf761788421e251', "data-version": version }, h("post-popovercontainer", { key: '06b4d472448d4083f717ce13e73ff9426f422ec4', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c5efcac53b6c0fa207ceee34ee86580c7566f8a8' }))));
+        return (h(Host, { key: '0755eeba6f7be3cd0d94138369355df9767ca541', "data-version": version }, h("post-popovercontainer", { key: '1e1d71a4878e60f9e20b34b5f12588e09a8c7716', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '25a69d406a91cb0ba8d4c5fadee44d937c84a266' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/index.js

@@ -1,4 +1,4 @@
-const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popovercontainer,post-rating,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
+const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
 
 const NAMESPACE = 'post-components';
 const BUILD = /* post-components */ { hydratedSelectorName: "data-hydrated", lazyLoad: false, slotRelocation: true, updatable: true};

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

@@ -1,7 +1,7 @@
 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-BVVgwjV0.js';
-import { v as version } from './p-DgSkXfqW.js';
-import { g as getFocusableChildren } from './p-C35MCWIp.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-ClNlUIJm.js';
+import { v as version } from './p-DeqIcjvO.js';
+import { g as getFocusableChildren } from './p-BVXiQdHq.js';
 import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
@@ -58,35 +58,32 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
                 this.controlKeyDownHandler(e);
             }
         };
-        this.handlePostToggle = (event) => {
+        this.handlePostShown = (event) => {
+            // Only for the first open
+            if (event.detail.first) {
+                // Add "menu" and "menuitem" aria roles and aria-label
+                this.host.setAttribute('role', 'menu');
+                const menuItems = this.getSlottedItems();
+                for (const item of menuItems) {
+                    item.setAttribute('role', 'menuitem');
+                }
+                if (this.label)
+                    this.host.setAttribute('aria-label', this.label);
+            }
+        };
+        this.handlePostToggled = (event) => {
             this.isVisible = event.detail.isOpen;
             this.toggleMenu.emit(this.isVisible);
-            requestAnimationFrame(() => {
-                if (this.isVisible) {
-                    this.lastFocusedElement = this.root?.activeElement;
-                    const menuItems = this.getSlottedItems();
-                    if (event.detail.first) {
-                        if (menuItems.length > 0) {
-                            // Add role="menu" to the popovercontainer
-                            this.host.setAttribute('role', 'menu');
-                            // Add role="menuitem" to the focusable elements
-                            menuItems.forEach(item => {
-                                item.setAttribute('role', 'menuitem');
-                            });
-                            // Add aria-label to the menu
-                            if (this.label)
-                                this.host.setAttribute('aria-label', this.label);
-                        }
-                    }
+            if (this.isVisible) {
+                this.lastFocusedElement = this.root?.activeElement;
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
                     menuItems[0].focus();
                 }
-                else if (this.lastFocusedElement) {
-                    setTimeout(() => {
-                        // This timeout is added for NVDA to announce the menu as collapsed
-                        this.lastFocusedElement.focus();
-                    }, 0);
-                }
-            });
+            }
+            else if (this.lastFocusedElement) {
+                this.lastFocusedElement.focus();
+            }
         };
         this.handleClick = (e) => {
             const target = e.target;
@@ -109,14 +106,10 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     disconnectedCallback() {
         this.host.removeEventListener('keydown', this.handleKeyDown);
         this.host.removeEventListener('click', this.handleClick);
-        this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
     }
     componentDidLoad() {
         this.validatePlacement();
         this.validateLabel();
-        if (this.popoverRef) {
-            this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
-        }
     }
     /**
      * Toggles the menu visibility based on its current state.
@@ -200,7 +193,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'd98d7b0a1c607732ab12c94f8d872408a053c19b', "data-version": version }, h("post-popovercontainer", { key: '669e6062e5ff0dfac0d311cc8fdd0bb51735aac1', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '6bc1abb7b764e9e6985a839904ed5575ea20a519', part: "menu" }, h("slot", { key: '6b8670f2e80ed93761797b9161ddf54bb88f73ec', name: "header" }), h("slot", { key: '971f39ae63f22a503e36aeecb67575304ce14248' })))));
+        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' })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -221,7 +214,10 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     }]);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggle", void 0);
+], PostMenu.prototype, "handlePostShown", void 0);
+__decorate([
+    EventFrom('post-popovercontainer')
+], PostMenu.prototype, "handlePostToggled", void 0);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -0,0 +1,64 @@
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    return Array.from(focusableChildren).filter(isVisible);
+}
+// Searches deeper accross shadowDom
+function getDeepFocusableChildren(element) {
+    const results = [];
+    function traverse(node) {
+        if (isElementFocusable(node)) {
+            results.push(node);
+        }
+        if (node instanceof HTMLElement && node.shadowRoot) {
+            traverse(node.shadowRoot);
+        }
+        for (const child of Array.from(node.children)) {
+            traverse(child);
+        }
+        if (node instanceof HTMLElement) {
+            for (const slot of Array.from(node.querySelectorAll('slot'))) {
+                for (const el of slot.assignedElements({ flatten: true })) {
+                    traverse(el);
+                }
+            }
+        }
+    }
+    traverse(element);
+    return results;
+}
+function isVisible(el) {
+    const style = window.getComputedStyle(el.parentElement);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+}
+function isElementFocusable(node) {
+    return (node instanceof HTMLElement &&
+        node.matches(`${focusableSelector}:not(${focusDisablingSelector})`) &&
+        isVisible(node));
+}
+
+export { getDeepFocusableChildren as a, getFocusableChildren as g };

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.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}";
 
@@ -9,7 +9,7 @@ const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '6b2c8542aed22132c627fadb6be036124e37853e', "data-version": version }, h("slot", { key: '8059cb5112270641ef7ba860cdacb2cdaa75fd59' })));
+        return (h(Host, { key: 'd37c4eed483b46dedcccbc835017ff2415dbd22e', "data-version": version }, h("slot", { key: 'e13d1f35e7883a0aee4d08ceb39caeb97fb960ec' })));
     }
     static get style() { return postMenuItemCss; }
 }, [4, "post-menu-item"]);

package/dist/components/react/{p-BsuTiCyd.js → p-CJocYMQ7.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-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
 

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

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-BcpJoB81.js';
+import { d as defineCustomElement$1 } from './p-vCHPi-c4.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}}";
 
@@ -44,7 +44,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '9ccdcf67335a106fd70e1d756a941736827454c0', "data-version": version }, h("post-icon", { key: 'e0c9479626737582764a4ecd55612d3d9ee4ae21', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '75f7b88edee2dda2907429c3c1ab55efe9e5137b', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: '1e59f84b6a9fd8b73372371e79fff43e44bd88c6' }))));
+        return (h(Host, { key: '9ccdcf67335a106fd70e1d756a941736827454c0', "data-version": version }, h("post-icon", { key: 'c2061015e34cc3c37d343abd872bd8bd3cc82615', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3e9659ac705d801699167864a06cde461bc84185', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'e86e3333db8b0636a9a9635a5f11960c7d839e3d' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-BVVgwjV0.js → p-ClNlUIJm.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-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 
 const PLACEMENT_TYPES = [
     'top',
@@ -1323,14 +1323,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
 
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -1369,7 +1364,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -1403,6 +1398,10 @@ function getDocumentRect(element) {
   };
 }
 
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1420,6 +1419,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -2728,8 +2745,12 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     constructor() {
         super();
         this.__registerHost();
+        this.postBeforeShow = createEvent(this, "postBeforeShow");
+        this.postShow = createEvent(this, "postShow");
+        this.postHide = createEvent(this, "postHide");
+        this.postBeforeToggle = createEvent(this, "postBeforeToggle");
         this.postToggle = createEvent(this, "postToggle");
-        this.firstOpen = true;
+        this.hasOpenedOnce = true;
         /**
          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
          * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
@@ -2783,36 +2804,79 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
         }
+        this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     /**
      * Programmatically display the popovercontainer
-     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      */
     async show(target) {
         if (this.toggleTimeoutId)
             return;
         this.eventTarget = target;
+        if (this.toggleTimeoutId)
+            return;
         this.calculatePosition();
         this.host.showPopover();
     }
+    /**
+     * Handles the popover opening process and emits related events.
+     */
+    async open() {
+        const content = this.host.querySelector('.popover-content');
+        this.startAutoupdates();
+        if (content) {
+            const animation = popIn(content);
+            if (animation?.playState === 'running') {
+                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;
+            });
+        }
+        if (this.safeSpace) {
+            window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+        }
+    }
+    /**
+     * Handles the popover closing process and emits related events.
+     */
+    async close() {
+        if (typeof this.clearAutoUpdate === 'function') {
+            this.clearAutoUpdate();
+        }
+        if (this.safeSpace) {
+            window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+        }
+        this.postToggle.emit({ isOpen: false });
+        this.postHide.emit();
+    }
     /**
      * 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();
         }
     }
     /**
      * Toggle popovercontainer display
-     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
+        this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
-            this.eventTarget = target;
             this.calculatePosition();
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
@@ -2829,27 +2893,11 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
         const isOpen = e.newState === 'open';
         if (isOpen) {
-            const content = this.host.querySelector('.popover-content');
-            this.startAutoupdates();
-            if (content && this.animation === 'pop-in') {
-                popIn(content);
-            }
-            if (this.safeSpace)
-                window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
-            // Emit event with `first` flag only true on the first open
-            if (this.firstOpen) {
-                this.postToggle.emit({ isOpen, first: this.firstOpen });
-                this.firstOpen = false;
-                return;
-            }
+            this.open();
         }
         else {
-            if (typeof this.clearAutoUpdate === 'function')
-                this.clearAutoUpdate();
-            if (this.safeSpace)
-                window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+            this.close();
         }
-        this.postToggle.emit({ isOpen: isOpen, first: false });
     }
     /**
      * Start listening for DOM updates, scroll events etc. that have
@@ -2980,9 +3028,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: '493d032d16ace815b6c031e77dbcc673f26d149b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '97bb357cada0456b3aa458e12768d9ad5458ef24', class: "popover-content" }, this.arrow && (h("span", { key: 'f5f2256470edad5a8ca89c32b3a44ef0fe388eea', class: "arrow", ref: el => {
+        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 => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
+            } })), h("slot", { key: '6a213deed5ccfec47d4dee903c7544d30a3f5748' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -2999,6 +3047,8 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         "manualClose": [4, "manual-close"],
         "safeSpace": [513, "safe-space"],
         "show": [64],
+        "open": [64],
+        "close": [64],
         "hide": [64],
         "toggle": [64]
     }, undefined, {

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.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-D7N0KPNm.js → p-DZ_1ljyU.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
@@ -80,7 +80,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
+        return (h(Host, { key: 'fc962802089652073c19cc35a511e48b0cab43b7', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3a8b40c0a88c44092b56ca4aa1c74f880bebb20' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.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-DeqIcjvO.js

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