@swisspost/design-system-components 10.0.0-next.50 → 10.0.0-next.52

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

@@ -1,38 +1,12 @@
 import { h, Host } from "@stencil/core";
 import { PLACEMENT_TYPES } from "../../types/index";
 import { version } from "../../../../package";
-import { IS_BROWSER, getAttributeObserver, checkRequiredAndType, checkEmptyOrOneOf } from "../../utils/index";
+import { checkRequiredAndType, checkEmptyOrOneOf, getDeepFocusableChildren } from "../../utils/index";
 /**
  * @slot default - Slot for placing content inside the popover.
  */
-let popoverInstances = 0;
-const popoverTargetAttribute = 'data-popover-target';
-const globalToggleHandler = (e) => {
-    let currentElement = e.target;
-    // Traverse up the DOM tree to find if any parent has the popover target attribute
-    while (currentElement && !currentElement.getAttribute(popoverTargetAttribute)) {
-        if (currentElement === document.body || !currentElement.parentElement)
-            break;
-        currentElement = currentElement.parentElement;
-    }
-    const popoverTarget = currentElement?.getAttribute(popoverTargetAttribute);
-    if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
-        return;
-    const popover = document.getElementById(popoverTarget);
-    popover?.toggle(currentElement);
-};
 export class PostPopover {
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateCloseButtonCaption() {
-        checkRequiredAndType(this, 'closeButtonCaption', 'string');
-    }
     constructor() {
-        // Initialize a mutation observer for patching accessibility features
-        this.triggerObserver = IS_BROWSER
-            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
-            : null;
         /**
          * Defines the position of the popover relative to its trigger.
          * Popovers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
@@ -44,76 +18,46 @@ export class PostPopover {
          */
         // eslint-disable-next-line @stencil-community/ban-default-true
         this.arrow = true;
-        this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
-    connectedCallback() {
-        // Set up accessibility patcher and event listeners for the first component
-        if (popoverInstances === 0) {
-            window.addEventListener('pointerup', globalToggleHandler);
-            window.addEventListener('keydown', globalToggleHandler);
-            this.triggerObserver?.observe(document.body, {
-                subtree: true,
-                childList: true,
-                attributeFilter: [popoverTargetAttribute],
-            });
-        }
-        popoverInstances++;
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateCloseButtonCaption() {
+        checkRequiredAndType(this, 'closeButtonCaption', 'string');
     }
     componentDidLoad() {
         this.validatePlacement();
         this.validateCloseButtonCaption();
-        this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
-    }
-    disconnectedCallback() {
-        popoverInstances--;
-        // Remove listeners and observer after the last popover has been destructed
-        if (popoverInstances === 0) {
-            window.removeEventListener('click', globalToggleHandler);
-            window.removeEventListener('keydown', globalToggleHandler);
-            this.triggerObserver?.disconnect();
-        }
-        this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
-        this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
     }
     /**
      * Programmatically display the popover
-     * @param target An element with [data-popover-target="id"] where the popover should be shown
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      */
     async show(target) {
         this.popoverRef.show(target);
-        console.log(this.popoverRef);
-        target.setAttribute('aria-expanded', 'true');
     }
     /**
      * Programmatically hide this popover
      */
     async hide() {
         this.popoverRef.hide();
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     /**
      * Toggle popover display
-     * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+     * @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) {
-        const newState = await this.popoverRef.toggle(target, force);
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-        target.setAttribute('aria-expanded', `${newState}`);
-    }
-    get triggers() {
-        return document.querySelectorAll(`[${popoverTargetAttribute}="${this.host.id}"]`);
-    }
-    beforeToggleHandler() {
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    patchAccessibilityFeatures(trigger) {
-        const force = trigger.hasAttribute(popoverTargetAttribute);
-        trigger.setAttribute('aria-expanded', force ? 'false' : null);
+        await this.popoverRef.toggle(target, force);
+        const focusableChildren = getDeepFocusableChildren(this.host);
+        // find first focusable element
+        const firstFocusable = focusableChildren[0];
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
     }
     render() {
-        return (h(Host, { key: '4224bfe1dc1bdb7fdfb86da67b54816e8cc6fce4', "data-version": version }, h("post-popovercontainer", { key: '3d7e370a89214878d33598cafd3d118c74d16312', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ed806f93ddec2656a15a1b242246c9c09b34f58a', class: "popover-container" }, h("div", { key: 'd60dd75153f88fc65d56dc9ec7387363e78cb835', class: "popover-content" }, h("slot", { key: 'f37005a225ecde32a80dd5efc3e61ccea7ab6dc5' })), h("post-closebutton", { key: 'c440bc94fb2832a8b8fcc0dd545b5f9d65cf834a', onClick: () => this.hide() }, this.closeButtonCaption)))));
+        return (h(Host, { key: '82f8d89013b8ddb37fb924c9608ba394c669f35a', "data-version": version }, h("post-popovercontainer", { key: 'cf276e5faf65ae27bc0d8e51779de5470a1e49a3', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9ab455b2ee7d7f082dc6fc588d519d7a362cad8c', class: "popover-container" }, h("div", { key: 'b3b468da2ff7ccb2a47d69a1841488359763e927', class: "popover-content" }, h("slot", { key: 'a32099475baaca02ce41350e36d363614a6f83ef' })), h("post-closebutton", { key: 'eac806bd1e6652cacce58fb7e915d66e82c24980', onClick: () => this.hide() }, this.closeButtonCaption)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -140,7 +84,7 @@ export class PostPopover {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.3/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -204,7 +148,7 @@ export class PostPopover {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-popover-target=\"id\"] where the popover should be shown"
+                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }],
                     "references": {
                         "Promise": {
@@ -222,7 +166,7 @@ export class PostPopover {
                     "text": "Programmatically display the popover",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-popover-target=\"id\"] where the popover should be shown"
+                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }]
                 }
             },
@@ -249,7 +193,7 @@ export class PostPopover {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-popover-target=\"id\"] where the popover should be anchored to"
+                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }, {
                             "name": "force",
                             "type": "boolean",
@@ -271,7 +215,7 @@ export class PostPopover {
                     "text": "Toggle popover display",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-popover-target=\"id\"] where the popover should be anchored to"
+                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }, {
                             "name": "param",
                             "text": "force Pass true to always show or false to always hide"

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

@@ -0,0 +1 @@
+:host{cursor:pointer}

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

@@ -0,0 +1,145 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import isFocusable from "ally.js/is/focusable";
+import { checkRequiredAndType } from "../../utils/index";
+export class PostPopoverTrigger {
+    syncAriaExpanded(newValue) {
+        this.ariaExpanded = newValue;
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', String(newValue));
+        }
+    }
+    /**
+     * Watch for changes to the `for` property to validate its type and ensure it is a string.
+     * @param forValue - The new value of the `for` property.
+     */
+    validateFor() {
+        checkRequiredAndType(this, 'for', 'string');
+    }
+    // Gets the associated popover element to the trigger based on 'for'
+    get popover() {
+        const ref = document.getElementById(this.for);
+        return ref?.localName === 'post-popover' ? ref : null;
+    }
+    setupTrigger() {
+        this.trigger = this.host.querySelector('*');
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', this.ariaExpanded.toString());
+            // check if its not focusable and add aria role and tabindex
+            if (!isFocusable(this.trigger)) {
+                this.trigger.setAttribute('tabindex', '0');
+                this.trigger.setAttribute('role', 'button');
+            }
+            // Set aria attributes
+            this.trigger.setAttribute('aria-haspopup', 'true');
+            this.trigger.setAttribute('aria-controls', this.for);
+            this.trigger.addEventListener('click', this.boundHandleToggle);
+            this.trigger.addEventListener('keydown', this.boundHandleKeyDown);
+        }
+        else {
+            console.error('No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.');
+        }
+    }
+    handleToggle() {
+        const popoverEl = this.popover;
+        if (popoverEl) {
+            popoverEl.toggle(this.trigger);
+            this.focusTrigger();
+        }
+        else {
+            console.warn(`No post-popover found with ID: ${this.for}`);
+        }
+    }
+    focusTrigger() {
+        // Restores focus to the trigger
+        if (!this.popoverOpen && this.trigger) {
+            this.trigger.focus();
+        }
+    }
+    constructor() {
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated popover is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
+        /**
+         * Holds the state of the popover toggle
+         */
+        this.popoverOpen = false;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleToggle();
+            }
+        };
+        this.boundHandleToggle = this.handleToggle.bind(this);
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+        this.boundHandlePostToggle = (event) => {
+            this.popoverOpen = event.detail.isOpen;
+            this.focusTrigger();
+        };
+    }
+    componentDidLoad() {
+        this.validateFor();
+        this.setupTrigger();
+        this.popover?.addEventListener('postToggle', this.boundHandlePostToggle);
+    }
+    disconnectedCallback() {
+        this.trigger.removeEventListener('click', this.boundHandleToggle);
+        this.trigger.removeEventListener('keydown', this.boundHandleKeyDown);
+        this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
+    }
+    render() {
+        return (h(Host, { key: 'd7467aa400f407d76df06e8bbc84210e5f016073', "data-version": version }, h("slot", { key: '618f3d14fb89b3ad3c101a58f8519c337d9f1721', onSlotchange: () => this.setupTrigger() })));
+    }
+    static get is() { return "post-popover-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-popover-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-popover-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "attribute": "for",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the popover element that this trigger is linked to. Used to open and close the popover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaExpanded": {},
+            "popoverOpen": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "popoverOpen",
+                "methodName": "syncAriaExpanded"
+            }, {
+                "propName": "for",
+                "methodName": "validateFor"
+            }];
+    }
+}

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

@@ -11,7 +11,7 @@ import { popIn } from "../../animations/pop-in";
  */
 export class PostPopovercontainer {
     constructor() {
-        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
@@ -65,36 +65,79 @@ export class PostPopovercontainer {
         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 HTMLElement) {
+                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;
@@ -111,27 +154,11 @@ export class PostPopovercontainer {
         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
@@ -262,9 +289,9 @@ export class PostPopovercontainer {
         }
     }
     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' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -290,7 +317,7 @@ export class PostPopovercontainer {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.3/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -408,6 +435,66 @@ export class PostPopovercontainer {
     }
     static get events() {
         return [{
+                "method": "postBeforeShow",
+                "name": "postBeforeShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the popovercontainer is about to be shown, passing in event.detail a `first` boolean, which is true if it is to be shown for the first time."
+                },
+                "complexType": {
+                    "original": "{ first?: boolean }",
+                    "resolved": "{ first?: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "postShow",
+                "name": "postShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the popovercontainer is shown, passing in event.detail a `first` boolean, which is true if it is shown for the first time."
+                },
+                "complexType": {
+                    "original": "{ first?: boolean }",
+                    "resolved": "{ first?: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "postHide",
+                "name": "postHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the popovercontainer is hidden."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "postBeforeToggle",
+                "name": "postBeforeToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the popovercontainer is about to be shown or hidden, passing in event.detail a `willOpen` boolean, which is true if the popovercontainer is about to be opened and false if it is about to be closed."
+                },
+                "complexType": {
+                    "original": "{ willOpen: boolean }",
+                    "resolved": "{ willOpen: boolean; }",
+                    "references": {}
+                }
+            }, {
                 "method": "postToggle",
                 "name": "postToggle",
                 "bubbles": true,
@@ -415,11 +502,11 @@ export class PostPopovercontainer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing two booleans: `isOpen`, which is true if the popovercontainer was opened and false if it was closed, and `first`, which is true if it was opened for the first time."
+                    "text": "Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing a `isOpen`boolean, which is true if the popovercontainer was opened and false if it was closed."
                 },
                 "complexType": {
-                    "original": "{ isOpen: boolean; first?: boolean }",
-                    "resolved": "{ isOpen: boolean; first?: boolean; }",
+                    "original": "{ isOpen: boolean }",
+                    "resolved": "{ isOpen: boolean; }",
                     "references": {}
                 }
             }];
@@ -432,7 +519,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-popover-target=\"id\"] where the popovercontainer should be shown"
+                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }],
                     "references": {
                         "Promise": {
@@ -450,10 +537,44 @@ export class PostPopovercontainer {
                     "text": "Programmatically display the popovercontainer",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-popover-target=\"id\"] where the popovercontainer should be shown"
+                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }]
                 }
             },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Handles the popover opening process and emits related events.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Handles the popover closing process and emits related events.",
+                    "tags": []
+                }
+            },
             "hide": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -477,7 +598,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-popover-target=\"id\"] where the popovercontainer should be shown"
+                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }, {
                             "name": "force",
                             "type": "boolean",
@@ -499,7 +620,7 @@ export class PostPopovercontainer {
                     "text": "Toggle popovercontainer display",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-popover-target=\"id\"] where the popovercontainer should be shown"
+                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
                         }, {
                             "name": "param",
                             "text": "force Pass true to always show or false to always hide"