@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

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

@@ -22,19 +22,20 @@ export class PostPopover {
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
     }
-    validateCloseButtonCaption() {
-        checkRequiredAndType(this, 'closeButtonCaption', 'string');
+    validateTextClose() {
+        checkRequiredAndType(this, 'textClose', 'string');
     }
     componentDidLoad() {
         this.validatePlacement();
-        this.validateCloseButtonCaption();
+        this.validateTextClose();
     }
     /**
      * Programmatically display the popover
      * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      */
     async show(target) {
-        this.popoverRef.show(target);
+        await this.popoverRef.show(target);
+        this.focusFirstEl();
     }
     /**
      * Programmatically hide this popover
@@ -48,16 +49,20 @@ export class PostPopover {
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
-        await this.popoverRef.toggle(target, force);
+        const isOpen = await this.popoverRef.toggle(target, force);
+        if (isOpen)
+            this.focusFirstEl();
+    }
+    focusFirstEl() {
         const focusableChildren = getDeepFocusableChildren(this.host);
-        // find first focusable element
+        // Find first focusable element
         const firstFocusable = focusableChildren[0];
         if (firstFocusable) {
             firstFocusable.focus();
         }
     }
     render() {
-        return (h(Host, { key: '5ef2edb171dada1bf701a6583471410e02297a5b', "data-version": version }, h("post-popovercontainer", { key: '3f913ddf3756ecbec65c1ab04423421adbc46f16', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '541a5a7da9eb1362609d7d58717ffde7ef4cbb90', class: "popover-container" }, h("div", { key: '1b3d22349574f7fb542cfa662aca0d34c85c1d2f', class: "popover-content" }, h("slot", { key: 'a17a97f0abe47fb7a1777fa3f9365efc0cfc5b1d' })), h("post-closebutton", { key: '9888084b892be0381c64620a534c45231533fa59', onClick: () => this.hide() }, this.closeButtonCaption)))));
+        return (h(Host, { key: 'd015a324a7c9fe1c3508ccd3e434435d92d74f85', "data-version": version }, h("post-popovercontainer", { key: '01c575c2b9370d512858e9c71a402ee08843d052', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4be3ccad4885493091a9572c6bf95ea137ad66f9', class: "popover-container" }, h("div", { key: '3b9e69e7e84f7acdb2a14cb27e11d10d4aa2900b', class: "popover-content" }, h("slot", { key: 'de871fc377dfdc17f64f9bb40e5421e00a103ce0' })), h("post-closebutton", { key: 'd73a44affc7e09a3452988f63f16cc4eea83aa66', onClick: () => this.hide() }, this.textClose)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -75,7 +80,6 @@ export class PostPopover {
         return {
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -84,7 +88,8 @@ export class PostPopover {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.4/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.mts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -97,11 +102,11 @@ export class PostPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'top'"
             },
-            "closeButtonCaption": {
+            "textClose": {
                 "type": "string",
-                "attribute": "close-button-caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -112,15 +117,15 @@ export class PostPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define the caption of the close button for assistive technology"
+                    "text": "Define the text of the close button for assistive technology"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "text-close"
             },
             "arrow": {
                 "type": "boolean",
-                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -136,6 +141,7 @@ export class PostPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "arrow",
                 "defaultValue": "true"
             }
         };
@@ -230,8 +236,8 @@ export class PostPopover {
                 "propName": "placement",
                 "methodName": "validatePlacement"
             }, {
-                "propName": "closeButtonCaption",
-                "methodName": "validateCloseButtonCaption"
+                "propName": "textClose",
+                "methodName": "validateTextClose"
             }];
     }
 }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
-import { checkRequiredAndType } from "../../utils/index";
+import { checkEmptyOrType } from "../../utils/index";
 export class PostPopoverTrigger {
     syncAriaExpanded(newValue) {
         this.ariaExpanded = newValue;
@@ -14,41 +14,57 @@ export class PostPopoverTrigger {
      * @param forValue - The new value of the `for` property.
      */
     validateFor() {
-        checkRequiredAndType(this, 'for', 'string');
+        checkEmptyOrType(this, 'for', 'string');
     }
-    // Gets the associated popover element to the trigger based on 'for'
+    hasAriaControlsElements(el) {
+        return 'ariaControlsElements' in el;
+    }
+    // Gets the associated to the trigger popover element
     get popover() {
-        const ref = document.getElementById(this.for);
+        const ref = this.host.querySelector('post-popover') ?? document.getElementById(this.for);
+        if (!ref) {
+            const target = this.for ? `with ID: ${this.for}` : 'inside the <post-popover-trigger>';
+            console.error(`No post-popover found ${target}.`);
+            return null;
+        }
         return ref?.localName === 'post-popover' ? ref : null;
     }
     setupTrigger() {
+        const popover = this.popover;
         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');
+        if (!this.trigger) {
+            console.error('No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.');
+            return;
+        }
+        // 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');
+        }
+        if (!popover)
+            return;
+        // Set aria attributes
+        this.trigger.setAttribute('aria-expanded', this.ariaExpanded.toString());
+        this.trigger.setAttribute('aria-haspopup', 'true');
+        // Set aria-controls depending on the popover/trigger relationship
+        if (this.for) {
             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.');
+            if (this.hasAriaControlsElements(this.trigger)) {
+                this.trigger.ariaControlsElements = [popover];
+            }
+            else {
+                popover.id || (popover.id = `popover-${crypto.randomUUID()}`);
+                this.trigger.setAttribute('aria-controls', popover.id);
+            }
         }
+        this.trigger.addEventListener('click', this.boundHandleToggle);
+        this.trigger.addEventListener('keydown', this.boundHandleKeyDown);
     }
     handleToggle() {
-        const popoverEl = this.popover;
-        if (popoverEl) {
-            popoverEl.toggle(this.trigger);
-            this.focusTrigger();
-        }
-        else {
-            console.warn(`No post-popover found with ID: ${this.for}`);
-        }
+        this.popover?.toggle(this.trigger);
+        this.focusTrigger();
     }
     focusTrigger() {
         // Restores focus to the trigger
@@ -89,7 +105,7 @@ export class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '5beba85bbe276a0f047415c4fefa2a013f922cdc', "data-version": version }, h("slot", { key: '4f1a4834e97275ab8a011888d0c932db6471e727', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '8552f66f45c0cf3f772cb96b4974a447a4a2cf19', "data-version": version }, h("slot", { key: '06824853f828cc65ba7a7a2b7ae8b762f6b1eaee', onSlotchange: () => this.setupTrigger() })));
     }
     static get is() { return "post-popover-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -107,22 +123,22 @@ export class PostPopoverTrigger {
         return {
             "for": {
                 "type": "string",
-                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "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
+                "reflect": true,
+                "attribute": "for"
             }
         };
     }

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

@@ -1 +1 @@
-@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}
+@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{--arrow-size: 0.5825rem;position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-bottom-right-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-bottom-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-top-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-top-right-radius:2px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}

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

@@ -6,6 +6,9 @@ import { PLACEMENT_TYPES } from "../../types/index";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
 import { apply, isSupported } from "@oddbird/popover-polyfill/fn";
 import { popIn } from "../../animations/pop-in";
+const ANIMATIONS = {
+    'pop-in': popIn,
+};
 /**
  * @slot - Default slot for placing content inside the popovercontainer.
  */
@@ -22,18 +25,14 @@ export class PostPopovercontainer {
          * Gap between the edge of the page and the popovercontainer
          */
         this.edgeGap = 8;
-        /**
-         * Animation style
-         */
-        this.animation = null;
         /**
          * Whether or not to display a little pointer arrow
          */
         this.arrow = false;
         /**
-         * Whether or not the popovercontainer should close when user clicks outside of it
+         * Animation style
          */
-        this.manualClose = false;
+        this.animation = 'pop-in';
         this.currentAnimation = null;
     }
     validatePlacement() {
@@ -60,6 +59,9 @@ export class PostPopovercontainer {
         }
     }
     componentDidLoad() {
+        this.validatePlacement();
+        this.validateEdgeGap();
+        this.validateSafeSpace();
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
@@ -70,7 +72,7 @@ export class PostPopovercontainer {
     }
     /**
      * Programmatically display the popovercontainer
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param target A focusable element inside the trigger component that controls the popover
      */
     async show(target) {
         if (this.toggleTimeoutId)
@@ -79,15 +81,44 @@ export class PostPopovercontainer {
         this.calculatePosition();
         this.host.showPopover();
     }
+    /**
+     * Programmatically hide the popovercontainer
+     */
+    async hide() {
+        if (!this.toggleTimeoutId) {
+            this.eventTarget = null;
+            this.host.hidePopover();
+            this.postHide.emit();
+        }
+    }
+    /**
+     * Toggle popovercontainer display
+     * @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.calculatePosition();
+            this.host.togglePopover(force);
+            this.toggleTimeoutId = null;
+        }
+        return this.host.matches(':where(:popover-open, .popover-open)');
+    }
     /**
      * Handles the popover opening process and emits related events.
      */
-    async open() {
+    open() {
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
-            // Only run animation and emit related events if animation is defined
-            if (this.animation === null) {
+            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 });
@@ -96,9 +127,6 @@ export class PostPopovercontainer {
                 if (this.hasOpenedOnce)
                     this.hasOpenedOnce = false;
             }
-            else {
-                this.runOpenAnimation(content);
-            }
         }
         if (this.safeSpace) {
             window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
@@ -107,7 +135,7 @@ export class PostPopovercontainer {
     /**
      * Handles the popover closing process and emits related events.
      */
-    async close() {
+    close() {
         if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
         }
@@ -115,7 +143,7 @@ export class PostPopovercontainer {
             window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
         // Cancel any running animation
-        if (this.animation !== null && this.currentAnimation) {
+        if (this.currentAnimation) {
             this.currentAnimation.cancel();
             this.currentAnimation = null;
         }
@@ -126,10 +154,18 @@ export class PostPopovercontainer {
     /**
      * Runs the animation and emits the toggle/show/hide events in the correct timing
      */
-    async runOpenAnimation(element) {
+    async runOpenAnimation(animationFn, element) {
         let animation;
         try {
-            animation = popIn(element);
+            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 });
@@ -153,31 +189,6 @@ export class PostPopovercontainer {
             }
         }
     }
-    /**
-     * Programmatically hide the popovercontainer
-     */
-    async hide() {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = null;
-            this.host.hidePopover();
-            this.postHide.emit();
-        }
-    }
-    /**
-     * Toggle popovercontainer display
-     * @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.calculatePosition();
-            this.host.togglePopover(force);
-            this.toggleTimeoutId = null;
-        }
-        return this.host.matches(':where(:popover-open, .popover-open)');
-    }
     /**
      * Start or stop auto updates based on popovercontainer events.
      * Popovercontainers can be closed or opened with other methods than class members,
@@ -199,6 +210,8 @@ export class PostPopovercontainer {
      * an influence on popovercontainer positioning
      */
     startAutoupdates() {
+        if (!this.eventTarget || !this.host)
+            return;
         this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
     /**
@@ -211,6 +224,7 @@ export class PostPopovercontainer {
     async calculatePosition() {
         const { x, y, middlewareData, placement } = await this.computeMainPosition();
         const currentPlacement = placement.split('-')[0];
+        this.dynamicPlacement = currentPlacement;
         // Position popover
         this.host.style.left = `${x}px`;
         this.host.style.top = `${y}px`;
@@ -218,11 +232,20 @@ export class PostPopovercontainer {
         if (this.arrow && middlewareData.arrow) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
+            const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+            // Calculate dynamically the half side which provides the static side offset
+            const arrowSizeValue = getComputedStyle(this.arrowRef)
+                .getPropertyValue('--arrow-size')
+                .trim();
+            const arrowSizePx = arrowSizeValue.endsWith('rem')
+                ? Number.parseFloat(arrowSizeValue) * rootFontSize
+                : Number.parseFloat(arrowSizeValue);
+            const halfSide = -0.5 * arrowSizePx;
             if (staticSide) {
                 Object.assign(this.arrowRef.style, {
                     left: arrowX ? `${arrowX}px` : '',
                     top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: '-5px',
+                    [staticSide]: `${halfSide}px`,
                 });
             }
         }
@@ -323,9 +346,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '9ec775608a6bfab69c50e9cefb1a42235deaa451', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'b659d1ce9cf9d3b661e3712c689cf1ffb0816f6e', class: "popover-content" }, this.arrow && (h("span", { key: '504e007d07d6b38018d93f5dca5a074b881cd50b', class: "arrow", ref: el => {
+        return (h(Host, { key: 'f675b14ed97d7f2931781549df8aafd9072faa96', "data-version": version, popover: "auto" }, h("div", { key: 'f66186a7448f60b9f9dcb1b3cbe047a74a85dc7b', class: "popover-content" }, this.arrow && (h("span", { key: 'd0f8f2baa005522140ac1ef49a0bccc13be72c72', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '207062f4582b4aad7b570a7453711fd61654d5e3' }))));
+            } })), h("slot", { key: '5fbdad6fa76951f4d886ef0ab57e7471ac38c59d' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -342,7 +365,6 @@ export class PostPopovercontainer {
         return {
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -351,7 +373,8 @@ export class PostPopovercontainer {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.4/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.mts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -364,11 +387,11 @@ export class PostPopovercontainer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'top'"
             },
             "edgeGap": {
                 "type": "number",
-                "attribute": "edge-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -384,31 +407,11 @@ export class PostPopovercontainer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "edge-gap",
                 "defaultValue": "8"
             },
-            "animation": {
-                "type": "string",
-                "attribute": "animation",
-                "mutable": false,
-                "complexType": {
-                    "original": "'pop-in' | null",
-                    "resolved": "\"pop-in\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Animation style"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "null"
-            },
             "arrow": {
                 "type": "boolean",
-                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -424,31 +427,11 @@ export class PostPopovercontainer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
-            },
-            "manualClose": {
-                "type": "boolean",
-                "attribute": "manual-close",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether or not the popovercontainer should close when user clicks outside of it"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
+                "attribute": "arrow",
                 "defaultValue": "false"
             },
             "safeSpace": {
                 "type": "string",
-                "attribute": "safe-space",
                 "mutable": false,
                 "complexType": {
                     "original": "'triangle' | 'trapezoid'",
@@ -463,10 +446,16 @@ export class PostPopovercontainer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "safe-space"
             }
         };
     }
+    static get states() {
+        return {
+            "dynamicPlacement": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "postBeforeShow",
@@ -553,7 +542,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": "A focusable element inside the trigger component that controls the popover"
                         }],
                     "references": {
                         "Promise": {
@@ -571,48 +560,10 @@ export class PostPopovercontainer {
                     "text": "Programmatically display the popovercontainer",
                     "tags": [{
                             "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "text": "target A focusable element inside the trigger component that controls the popover"
                         }]
                 }
             },
-            "open": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "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>",