@swisspost/design-system-components 10.7.0 → 10.9.0

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

@@ -8,78 +8,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Build, h, Host, } from "@stencil/core";
-import { OneOf, Type } from "../../utils/index";
 import { version } from "../../../../package";
+import { Build, h, Host, } from "@stencil/core";
+import { popIn } from "../../animations/pop-in";
 import { PLACEMENT_TYPES } from "../../types/index";
-import { arrow, autoUpdate, flip, hide, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
+import { OneOf, Type } from "../../utils/index";
+import { arrow, autoUpdate, hide, inline, limitShift, shift, size, offset, } from "@floating-ui/dom";
+import { getSide } from "@floating-ui/utils";
+import { flip } from "../../utils/floating-ui/middleware/flip";
+import { getOppositeSide } from "../../utils/floating-ui/util";
+import { computePositionWithSafeArea } from "../../utils/floating-ui/platform/safe-area";
+import { SAFE_SPACE_MIDDLEWARE, safeSpace } from "../../utils/floating-ui/middleware/safe-space";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
-import { popIn } from "../../animations/pop-in";
 import { apply, isSupported } from "@oddbird/popover-polyfill/fn";
-import { computePositionWithSafeArea } from "../../utils/floating-ui";
-const ANIMATIONS = {
-    'pop-in': popIn,
-};
+const AVAILABLE_WIDTH_PROPERTY = '--post-popovercontainer-available-width';
+const AVAILABLE_HEIGHT_PROPERTY = '--post-popovercontainer-available-height';
+const SAFE_SPACE_PROPERTY = '--post-popovercontainer-safe-space';
 /**
- * @slot - Default slot for placing content inside the popovercontainer.
+ * @slot - Default slot for placing content inside the popover.
  */
 export class PostPopovercontainer {
-    static {
-        this.STATIC_SIDES = {
-            top: 'bottom',
-            right: 'left',
-            bottom: 'top',
-            left: 'right',
-        };
-    }
-    static {
-        this.PROPERTIES_TO_CLEAR = [
-            '--post-safe-space-popover-x',
-            '--post-safe-space-popover-y',
-            '--post-safe-space-popover-x-start',
-            '--post-safe-space-popover-x-end',
-            '--post-safe-space-popover-y-start',
-            '--post-safe-space-popover-y-end',
-            '--post-safe-space-trigger-x',
-            '--post-safe-space-trigger-y',
-            '--post-safe-space-trigger-x-start',
-            '--post-safe-space-trigger-x-end',
-            '--post-safe-space-trigger-y-start',
-            '--post-safe-space-trigger-y-end',
-        ];
-    }
     constructor() {
+        /** The element the popover is anchored to */
+        this.anchorRef = null;
+        this.arrowRef = null;
+        this.hasBeenOpened = false;
         this.toggleTimeoutId = null;
-        this.hasOpenedOnce = true;
+        this.runningAnimation = null;
+        this.stopAutoUpdate = null;
         /**
-         * 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
-         * towards the viewport if they would overlap edge boundaries.
+         * Placement of the popover according to the floating-ui options.
          */
         this.placement = 'top';
         /**
-         * Gap between the edge of the page and the popovercontainer
+         * Gap between the edge of the viewport and the popover.
          */
         this.edgeGap = 8;
         /**
-         * Whether or not to display a little pointer arrow
+         * Show a little indicator arrow
          */
         this.arrow = false;
-        /**
-         * Animation style
-         */
-        this.animation = 'pop-in';
-        this.currentAnimation = null;
-        this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
-    }
-    /**
-     * Updates cursor position for safe space feature when popover is open.
-     * Sets CSS custom properties for dynamic styling of safe area.
-     * @param event MouseEvent with cursor position
-     */
-    mouseTrackingHandler(event) {
-        this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
-        this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
     }
     connectedCallback() {
         if (Build.isBrowser && !isSupported()) {
@@ -90,296 +58,197 @@ export class PostPopovercontainer {
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
-        if (typeof this.clearAutoUpdate === 'function') {
-            this.clearAutoUpdate();
-        }
+        this.cleanup();
         this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
     }
+    cleanup() {
+        this.stopAutoUpdate?.();
+        if (this.runningAnimation) {
+            this.runningAnimation.cancel();
+            this.runningAnimation = null;
+        }
+    }
+    isOpen() {
+        return this.host?.matches(':where(:popover-open, .popover-open)');
+    }
+    getContent() {
+        return this.host?.shadowRoot.querySelector('[part="post-popovercontainer-content"]');
+    }
+    getContentMinSize() {
+        const content = this.getContent();
+        if (!content)
+            return {};
+        const { minWidth, minHeight } = getComputedStyle(content);
+        return {
+            width: Number.parseFloat(minWidth) || 0,
+            height: Number.parseFloat(minHeight) || 0,
+        };
+    }
     /**
-     * Programmatically display the popovercontainer
-     * @param target The element that invokes the popover and to which it is visually anchored.
+     * Shows the popover.
+     * @param anchor the element that the popover is visually anchored to.
      */
-    async show(target) {
-        if (this.toggleTimeoutId || !target)
+    async show(anchor) {
+        if (this.toggleTimeoutId || !anchor || this.isOpen())
             return;
-        this.eventTarget = target;
-        this.updatePosition();
+        this.anchorRef = anchor;
         this.host.showPopover();
     }
     /**
-     * Programmatically hide the popovercontainer
+     * Hides the popover.
      */
     async hide() {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = null;
-            this.host.hidePopover();
-            this.postHide.emit();
-        }
+        if (this.toggleTimeoutId || !this.isOpen())
+            return;
+        this.anchorRef = null;
+        this.host.hidePopover();
+        this.postHide.emit();
     }
     /**
-     * Toggle popovercontainer display
-     * @param target The element that invokes the popover and to which it is visually anchored.
-     * @param force Pass true to always show or false to always hide
+     * Toggles the popover's state from hidden to showing and vice versa.
+     *
+     * If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden
+     * if it is set to `false`.
+     *
+     * @param anchor the element that the popover is visually anchored to.
+     * @param force the next state of the popover.
+     * @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
      */
-    async toggle(target, force) {
-        const isOpen = this.host.matches(':where(:popover-open, .popover-open)');
-        const willOpen = force === true || (force === undefined && !isOpen);
-        if (willOpen && !target)
+    async toggle(anchor, force) {
+        const isOpen = this.isOpen();
+        if (!this.host || this.toggleTimeoutId)
             return isOpen;
-        this.eventTarget = target;
-        // Prevent instant double toggle
-        if (!this.toggleTimeoutId) {
-            this.updatePosition();
-            this.host.togglePopover(force);
-            this.toggleTimeoutId = null;
-        }
-        return this.host.matches(':where(:popover-open, .popover-open)');
+        const shouldOpen = force === true || (force === undefined && !isOpen);
+        if (isOpen === shouldOpen || (shouldOpen && !anchor))
+            return isOpen;
+        this.anchorRef = shouldOpen ? anchor : null;
+        this.host.togglePopover(force);
+        this.toggleTimeoutId = null;
+        return this.isOpen();
     }
     /**
-     * Handles the popover opening process and emits related events.
+     * Handles the popover's state transition from hidden to showing and vice versa.
      */
-    open() {
-        const content = this.host.shadowRoot?.querySelector('.popover-content');
-        this.startAutoupdates();
-        if (content) {
-            const animationFn = ANIMATIONS[this.animation];
-            // Only run the animation if it corresponds to a valid, registered animation function
-            if (typeof animationFn === 'function') {
-                this.runOpenAnimation(animationFn, content);
-            }
-            else {
-                // No animation case
-                this.postBeforeToggle.emit({ willOpen: true });
-                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-                this.postToggle.emit({ isOpen: true });
-                this.postShow.emit({ first: this.hasOpenedOnce });
-                if (this.hasOpenedOnce)
-                    this.hasOpenedOnce = false;
-            }
-        }
-        if (this.safeSpace) {
-            globalThis.addEventListener('mousemove', this.boundMouseTrackingHandler);
-        }
+    async handleToggle(event) {
+        this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
+        if (event.newState === 'open')
+            await this.handleOpen();
+        else
+            await this.handleClose();
     }
     /**
-     * Handles the popover closing process and emits related events.
+     * Handles the popover's state transition from hidden to showing, emitting related events.
      */
-    close() {
-        if (typeof this.clearAutoUpdate === 'function') {
-            this.clearAutoUpdate();
-        }
-        if (this.safeSpace) {
-            globalThis.removeEventListener('mousemove', this.boundMouseTrackingHandler);
+    async handleOpen() {
+        this.postBeforeToggle.emit({ willOpen: true });
+        this.postBeforeShow.emit({ first: !this.hasBeenOpened });
+        await this.updatePosition(true);
+        this.startAutoUpdate();
+        try {
+            await this.runOpenAnimation();
         }
-        // Cancel any running animation
-        if (this.currentAnimation) {
-            this.currentAnimation.cancel();
-            this.currentAnimation = null;
+        catch {
+            return;
         }
-        this.postBeforeToggle.emit({ willOpen: false });
-        this.postToggle.emit({ isOpen: false });
-        this.postHide.emit();
+        this.postToggle.emit({ isOpen: true });
+        this.postShow.emit({ first: !this.hasBeenOpened });
+        this.hasBeenOpened = true;
     }
     /**
-     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     * Run the open animation for the popover.
      */
-    async runOpenAnimation(animationFn, element) {
-        let animation;
-        try {
-            animation = animationFn(element);
-            if (!animation) {
-                // Fallback: no animation, just emit open events directly
-                this.postBeforeToggle.emit({ willOpen: true });
-                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-                this.postToggle.emit({ isOpen: true });
-                this.postShow.emit({ first: this.hasOpenedOnce });
-                return;
-            }
-            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;
-            }
-        }
+    async runOpenAnimation() {
+        const content = this.getContent();
+        if (!content)
+            return;
+        this.runningAnimation = popIn(content);
+        await this.runningAnimation.finished;
     }
     /**
-     * Start or stop auto updates based on popovercontainer events.
-     * Popovercontainers can be closed or opened with other methods than class members,
-     * therefore listening to the toggle event is safer for cleaning up.
-     * @param e ToggleEvent
+     * Handles the popover's state transition from showing to hidden, emitting related events.
      */
-    handleToggle(e) {
-        this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
-        const isOpen = e.newState === 'open';
-        if (isOpen) {
-            this.open();
-        }
-        else {
-            this.close();
-        }
+    async handleClose() {
+        this.postBeforeToggle.emit({ willOpen: false });
+        this.cleanup();
+        this.host.style.removeProperty(AVAILABLE_WIDTH_PROPERTY);
+        this.host.style.removeProperty(AVAILABLE_HEIGHT_PROPERTY);
+        this.host.style.removeProperty(SAFE_SPACE_PROPERTY);
+        this.postToggle.emit({ isOpen: false });
+        this.postHide.emit();
     }
     /**
-     * Start listening for DOM updates, scroll events etc. that have
-     * an influence on popovercontainer positioning
+     * Listen for changes that affect the popover's position and update it accordingly.
      */
-    startAutoupdates() {
-        if (!this.eventTarget || !this.host)
+    startAutoUpdate() {
+        if (!this.host || !this.anchorRef)
             return;
-        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.updatePosition.bind(this));
+        this.stopAutoUpdate = autoUpdate(this.anchorRef, this.host, () => this.updatePosition(this.autoResize));
     }
-    async updatePosition() {
-        const { x, y, middlewareData, placement } = await this.calculatePosition();
-        // Hide the popover if the target is outside the viewport
+    /**
+     * Updates the position of the popover based on the anchor's position and the specified placement.
+     * @param withSize whether to resize the popover based on the available space.
+     */
+    async updatePosition(withSize = false) {
+        const { x, y, middlewareData, placement } = await this.computePosition(withSize);
+        // Hide the popover if the anchor is outside the scrollport.
         if (middlewareData.hide?.referenceHidden) {
             this.host.hidePopover();
+            return;
         }
-        const currentPlacement = placement.split('-')[0];
-        this.dynamicPlacement = currentPlacement;
-        // Position popover
+        this.side = getSide(placement);
+        // Position the popover.
         this.host.style.left = `${x}px`;
         this.host.style.top = `${y}px`;
-        // Position arrow if enabled
-        if (this.arrow && middlewareData.arrow) {
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
-            const arrowSizePx = this.arrowRef.offsetWidth;
-            const halfSide = -0.5 * arrowSizePx;
-            if (staticSide) {
-                Object.assign(this.arrowRef.style, {
-                    left: arrowX ? `${arrowX}px` : '',
-                    top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: `${halfSide}px`,
-                });
-            }
+        // Position the indicator arrow.
+        if (middlewareData.arrow) {
+            this.arrowRef.style.left = middlewareData.arrow.x ? `${middlewareData.arrow.x}px` : '';
+            this.arrowRef.style.top = middlewareData.arrow.y ? `${middlewareData.arrow.y}px` : '';
+            this.arrowRef.style[getOppositeSide(this.side)] = `-${this.arrowRef.offsetWidth / 2}px`;
         }
-        // Handle safe space if enabled
-        if (this.safeSpace && this.eventTarget) {
-            await this.updateSafeSpaceBoundaries(currentPlacement);
+        // Set the safe space polygon.
+        if (middlewareData[SAFE_SPACE_MIDDLEWARE]) {
+            this.host.style.setProperty(SAFE_SPACE_PROPERTY, middlewareData[SAFE_SPACE_MIDDLEWARE].polygon);
         }
     }
-    async calculatePosition() {
-        const gap = this.edgeGap;
-        const isAligned = (this.placement || 'top').includes('-');
-        const flipMiddleware = [
-            // Flip the popover if the target moves outside the viewport
-            flip({ elementContext: 'reference', crossAxis: false }),
-            // Flip the popover if the popover itself moves outside the viewport
-            flip({ elementContext: 'floating', crossAxis: false }),
-        ];
-        const shiftMiddleware = shift({
-            padding: gap,
-            limiter: limitShift({
-                offset: 32,
-            }),
-        });
+    async computePosition(withSize) {
+        const padding = this.edgeGap ?? 0;
         const middleware = [
-            offset(this.offset ?? (this.arrow ? gap + 4 : gap)),
+            offset(this.offset ?? (this.arrow ? padding + 4 : padding)),
             inline(),
-            // Per floating-ui docs: for aligned placements (e.g. bottom-end),
-            // flip should come before shift. For non-aligned, shift before flip.
-            ...(isAligned ? [...flipMiddleware, shiftMiddleware] : [shiftMiddleware, ...flipMiddleware]),
-            size({
-                apply({ availableWidth, elements }) {
-                    Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth - gap * 2}px`,
-                    });
-                },
-            }),
         ];
-        if (this.arrow) {
-            middleware.push(arrow({ element: this.arrowRef, padding: gap }));
+        const flipMiddleware = flip({ padding, minSize: this.getContentMinSize() });
+        const shiftMiddleware = shift({ limiter: limitShift({ offset: 32 }), padding });
+        // `flip` should come before `shift` for edge-aligned placements
+        // (see https://floating-ui.com/docs/flip#combining-with-shift).
+        if (this.placement?.includes('-'))
+            middleware.push(flipMiddleware, shiftMiddleware);
+        else
+            middleware.push(shiftMiddleware, flipMiddleware);
+        if (withSize) {
+            middleware.push(size({
+                padding,
+                apply({ availableWidth, availableHeight, elements }) {
+                    elements.floating.style.setProperty(AVAILABLE_WIDTH_PROPERTY, `${Math.max(0, availableWidth)}px`);
+                    elements.floating.style.setProperty(AVAILABLE_HEIGHT_PROPERTY, `${Math.max(0, availableHeight)}px`);
+                },
+            }));
         }
-        // Automatically hide the popover if the target moves outside the scrollport.
-        if (this.autoHide) {
-            // Per floating-ui docs: hide should generally be placed at the end.
+        if (this.arrow)
+            middleware.push(arrow({ element: this.arrowRef, padding }));
+        if (this.safeSpace)
+            middleware.push(safeSpace());
+        // `hide` should generally be placed at the end of the middleware chain
+        // (see https://floating-ui.com/docs/hide#order).
+        if (this.autoHide)
             middleware.push(hide({ strategy: 'referenceHidden' }));
-        }
-        return computePositionWithSafeArea(this.eventTarget, this.host, {
-            placement: this.placement || 'top',
+        return computePositionWithSafeArea(this.anchorRef, this.host, {
+            placement: this.placement ?? 'top',
             strategy: 'fixed',
             middleware,
         });
     }
-    async updateSafeSpaceBoundaries(currentPlacement) {
-        const targetRect = this.eventTarget.getBoundingClientRect();
-        const popoverRect = this.host.getBoundingClientRect();
-        const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
-        // Helper function to get positioning data based on placement
-        const getPositioningData = (placement, popoverRect, targetRect) => {
-            if (placement === 'top' || placement === 'bottom') {
-                return {
-                    popover: {
-                        y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
-                        xStart: popoverRect.left,
-                        xEnd: popoverRect.right,
-                    },
-                    trigger: {
-                        y: placement === 'top' ? targetRect.top : targetRect.bottom,
-                        xStart: targetRect.left,
-                        xEnd: targetRect.right,
-                    },
-                };
-            }
-            else {
-                // left or right
-                return {
-                    popover: {
-                        x: placement === 'left' ? popoverRect.right : popoverRect.left,
-                        yStart: popoverRect.top,
-                        yEnd: popoverRect.bottom,
-                    },
-                    trigger: {
-                        x: placement === 'left' ? targetRect.left : targetRect.right,
-                        yStart: targetRect.top,
-                        yEnd: targetRect.bottom,
-                    },
-                };
-            }
-        };
-        const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
-        // Clear previous values
-        PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
-            this.host.style.removeProperty(prop);
-        });
-        if (isVertical) {
-            // For top/bottom placement
-            this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
-            this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
-            this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
-        }
-        else {
-            // For left/right placement
-            this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
-            this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
-            this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
-            this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
-        }
-    }
     render() {
-        return (h(Host, { key: 'f3ea4bfc9a59faa2fbf1e413a1ec648f598a6779', "data-version": version, popover: "auto" }, h("div", { key: 'a328c73c7e08eca1e423fcbe736798188cca2a87', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '8fad0095fb8d8c903ba84a639b4efc3e321c6aef', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
-                this.arrowRef = el;
-            } })), h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
+        return (h(Host, { key: '2240dfd6d585287ad6c50d7582053c2187dc924d', "data-version": version, popover: "auto" }, h("div", { key: '2793bd5f9dd3e72f5a6bc8344eab48262e6cea71', part: "post-popovercontainer-content" }, this.arrow && (h("span", { key: '3d0913954cead346a850f7d8ed1aaa97cbfa2d83', "data-side": this.side, class: "arrow", ref: el => (this.arrowRef = el) })), h("span", { key: 'c21d5332cfc0c0a7b7a8403f492bb4ba28b509f4', part: "post-popovercontainer-border-mask" }), h("slot", { key: 'eb6112e8dfa783304e286f65386e6e0741c2a571' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get encapsulation() { return "shadow"; }
@@ -414,7 +283,7 @@ export class PostPopovercontainer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nPopovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+                    "text": "Placement of the popover according to the floating-ui options."
                 },
                 "getter": false,
                 "setter": false,
@@ -434,7 +303,7 @@ export class PostPopovercontainer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Gap between the edge of the page and the popovercontainer"
+                    "text": "Gap between the edge of the viewport and the popover."
                 },
                 "getter": false,
                 "setter": false,
@@ -473,7 +342,7 @@ export class PostPopovercontainer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether or not to display a little pointer arrow"
+                    "text": "Show a little indicator arrow"
                 },
                 "getter": false,
                 "setter": false,
@@ -482,18 +351,18 @@ export class PostPopovercontainer {
                 "defaultValue": "false"
             },
             "safeSpace": {
-                "type": "string",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'triangle' | 'trapezoid'",
-                    "resolved": "\"trapezoid\" | \"triangle\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Enables a safespace through which the cursor can be moved without the popover being disabled"
+                    "text": "Whether to add a space through which the mouse can move without the popover being hidden."
                 },
                 "getter": false,
                 "setter": false,
@@ -512,18 +381,37 @@ export class PostPopovercontainer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to automatically hide the popover when the target moves outside the scrollport.\n\nIf the `post-header` can cover the target, the popover will also be hidden as soon as the\ntarget scrolls behind it."
+                    "text": "Whether to automatically hide the popover when the anchor moves outside the scrollport.\n\nIf the `post-header` can cover the anchor, the popover will also be hidden as soon as the\nanchor scrolls behind it."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "auto-hide"
+            },
+            "autoResize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to keep resizing the popover while it is open.\n\nEvery popover is sized once when it opens: the space available around the anchor, minus the\n`edgeGap`, becomes the maximum width and height of the popover. The placement is then\nrecalculated for that size.\n\nWith `autoResize`, the popover's size is recalculated on every position update, for example\nwhen the anchor moves while scrolling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-resize"
             }
         };
     }
     static get states() {
         return {
-            "dynamicPlacement": {}
+            "side": {}
         };
     }
     static get events() {
@@ -535,7 +423,7 @@ export class PostPopovercontainer {
                 "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."
+                    "text": "Emitted just before the popover is shown.\n\nThe payload contains a `first` boolean, that is set to `true` when the popover is about to be\nshown for the first time."
                 },
                 "complexType": {
                     "original": "{ first?: boolean }",
@@ -550,7 +438,7 @@ export class PostPopovercontainer {
                 "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."
+                    "text": "Emitted just after the popover is shown.\n\nThe payload contains a `first` boolean, that is set to `true` when the popover is shown for the\nfirst time."
                 },
                 "complexType": {
                     "original": "{ first?: boolean }",
@@ -565,7 +453,7 @@ export class PostPopovercontainer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires whenever the popovercontainer is hidden."
+                    "text": "Emitted just after the popover is hidden."
                 },
                 "complexType": {
                     "original": "any",
@@ -580,7 +468,7 @@ export class PostPopovercontainer {
                 "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."
+                    "text": "Emitted just before the popover's state changes.\n\nThe payload contains a `willOpen` boolean, that is set to `true` when the popover is about to\nbe shown, `false` when it is about to be hidden."
                 },
                 "complexType": {
                     "original": "{ willOpen: boolean }",
@@ -595,7 +483,7 @@ export class PostPopovercontainer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "text": "Emitted just after the popover's state changes.\n\nThe payload contains a `isOpen` boolean, that is set to `true` when the popover is shown,\n`false` when it is hidden."
                 },
                 "complexType": {
                     "original": "{ isOpen: boolean }",
@@ -608,11 +496,11 @@ export class PostPopovercontainer {
         return {
             "show": {
                 "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
+                    "signature": "(anchor: HTMLElement) => Promise<void>",
                     "parameters": [{
-                            "name": "target",
+                            "name": "anchor",
                             "type": "HTMLElement",
-                            "docs": "The element that invokes the popover and to which it is visually anchored."
+                            "docs": "the element that the popover is visually anchored to."
                         }],
                     "references": {
                         "Promise": {
@@ -627,10 +515,10 @@ export class PostPopovercontainer {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically display the popovercontainer",
+                    "text": "Shows the popover.",
                     "tags": [{
                             "name": "param",
-                            "text": "target The element that invokes the popover and to which it is visually anchored."
+                            "text": "anchor the element that the popover is visually anchored to."
                         }]
                 }
             },
@@ -647,21 +535,21 @@ export class PostPopovercontainer {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically hide the popovercontainer",
+                    "text": "Hides the popover.",
                     "tags": []
                 }
             },
             "toggle": {
                 "complexType": {
-                    "signature": "(target: HTMLElement, force?: boolean) => Promise<boolean>",
+                    "signature": "(anchor: HTMLElement, force?: boolean) => Promise<boolean>",
                     "parameters": [{
-                            "name": "target",
+                            "name": "anchor",
                             "type": "HTMLElement",
-                            "docs": "The element that invokes the popover and to which it is visually anchored."
+                            "docs": "the element that the popover is visually anchored to."
                         }, {
                             "name": "force",
                             "type": "boolean",
-                            "docs": "Pass true to always show or false to always hide"
+                            "docs": "the next state of the popover."
                         }],
                     "references": {
                         "Promise": {
@@ -676,13 +564,16 @@ export class PostPopovercontainer {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Toggle popovercontainer display",
+                    "text": "Toggles the popover's state from hidden to showing and vice versa.\n\nIf `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden\nif it is set to `false`.",
                     "tags": [{
                             "name": "param",
-                            "text": "target The element that invokes the popover and to which it is visually anchored."
+                            "text": "anchor the element that the popover is visually anchored to."
                         }, {
                             "name": "param",
-                            "text": "force Pass true to always show or false to always hide"
+                            "text": "force the next state of the popover."
+                        }, {
+                            "name": "returns",
+                            "text": "the new state of the popover: `true` if it is shown, `false` if it is hidden."
                         }]
                 }
             }
@@ -696,6 +587,3 @@ __decorate([
 __decorate([
     Type('number')
 ], PostPopovercontainer.prototype, "edgeGap", void 0);
-__decorate([
-    OneOf(['triangle', 'trapezoid'])
-], PostPopovercontainer.prototype, "safeSpace", void 0);