@swisspost/design-system-components 9.0.0-next.13 → 9.0.0-next.14

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

@@ -1,78 +1,137 @@
+import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { h, Host } from "@stencil/core";
 export class PostMegadropdown {
-    constructor() {
-        this.isVisible = false;
-        this.animationClass = null;
-    }
-    popoverRef;
+    header;
+    firstFocusableEl;
+    lastFocusableEl;
+    device;
     host;
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
+    /**
+     * Holds the current visibility state of the dropdown.
+     * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+     * and updates automatically when the dropdown is toggled.
+     */
+    isVisible = false;
+    /** Holds the current animation class. */
+    animationClass = null;
     /**
      * Emits when the dropdown is shown or hidden.
      * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
      **/
     postToggleMegadropdown;
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.postToggleMegadropdown.emit(this.isVisible);
-        });
-        this.popoverRef.addEventListener('animationend', () => {
-            if (this.animationClass === 'slide-out') {
-                this.hide();
-            }
-        });
+    disconnectedCallback() {
+        this.removeOutsideClickListener();
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
     }
     /**
      * Toggles the dropdown visibility based on its current state.
      */
-    async toggle(target) {
+    async toggle() {
         if (this.isVisible) {
             this.hide();
         }
         else {
-            await this.show(target);
+            await this.show();
         }
     }
     /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     * Displays the dropdown.
      */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.animationClass = 'slide-in';
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
         }
-        else {
-            console.error('show: popoverRef is null or undefined');
+        this.isVisible = true;
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        this.animationClass = 'slide-in';
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit(this.isVisible);
+        this.addOutsideClickListener();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide() {
+        this.animationClass = 'slide-out';
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+    }
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+        if (this.header) {
+            this.header.addEventListener('postUpdateDevice', (event) => (this.device = event.detail));
         }
     }
     /**
-     * Hides the popover dropdown
+     * Forces the dropdown to close without animation.
      */
-    hide() {
-        if (this.popoverRef) {
-            this.popoverRef.hide();
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit(this.isVisible);
+        this.removeOutsideClickListener();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            this.postToggleMegadropdown.emit(this.isVisible);
+            this.removeOutsideClickListener();
         }
-        else {
-            console.error('hide: popoverRef is null or undefined');
+    }
+    handleClickOutside = (event) => {
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
         }
+        if (target instanceof HTMLElement) {
+            const trigger = target.closest('post-megadropdown-trigger');
+            if (trigger) {
+                const targetDropdownId = trigger.getAttribute('for');
+                if (targetDropdownId !== this.host.id) {
+                    return;
+                }
+            }
+        }
+        this.hide();
+    };
+    addOutsideClickListener() {
+        document.addEventListener('mousedown', this.handleClickOutside);
     }
-    handleBackButtonClick() {
-        this.animationClass = 'slide-out';
+    removeOutsideClickListener() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
     }
-    handleCloseButtonClick() {
-        this.popoverRef.hide();
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
     }
-    handleFocusout(event) {
-        const relatedTarget = event.relatedTarget;
-        const megadropdown = this.popoverRef.querySelector('.megadropdown');
-        if (!megadropdown.contains(relatedTarget)) {
-            this.hide();
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
         }
     }
     render() {
-        return (h(Host, { key: 'b6a687738e91a7eaac3dcd909952985798d2140b' }, h("post-popovercontainer", { key: '74a0361d028eea3ddab6d54c5ab0da8d40b0b84f', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '4aece57642f113594530c4247cd428de4efe1762', class: "megadropdown", onFocusout: e => this.handleFocusout(e) }, h("div", { key: '298ee3b65149cafcd258ebf124d8e3e937019605', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5d9f50fb2b7b7659f48969888df0a3b773556aed', name: "back-button" })), h("div", { key: 'cd1870f410464d52d2f242751fb917f377ab1b06', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '6016c5b95668fa764c645c62e9170a803b7a129e', name: "close-button" })), h("slot", { key: '0ed98dc5c769edabfcebb6198aa454f3ac57c436', name: "megadropdown-title" }), h("div", { key: 'd7b6cbcfd6471f8009f940c298ef5bbc993cbe13', class: "megadropdown-content" }, h("slot", { key: 'cb1df5a62550afe3a35a50b28d221af8b28e5d96' }))))));
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '5aa08b01be715325182c245e1b0ae2456bcc5df6' }, h("div", { key: '0737c9368ecbffac59bbdf47fabac3f3b94ae7bb', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'efe49f3f9cdcd99e2feca78b772c944405e19f21', class: "megadropdown" }, h("div", { key: '14dd7ff2f7e7b1eb91f2673a25d7ccafffe4f9d0', onClick: () => this.hide(), class: "back-button" }, h("slot", { key: '554e30e6408c0bef0549f5e2c31dcd8b90ceee40', name: "back-button" })), h("div", { key: '4e7335152d7b6649918adf075213ebbf8b8ddeaa', onClick: () => this.hide(), class: "close-button" }, h("slot", { key: 'db90f3a5334ce723c0ee672a96167197ca25b545', name: "close-button" })), h("slot", { key: 'b11b1d16147f88103f2eb24c8dd21394de53f69c', name: "megadropdown-title" }), h("div", { key: '6d837c1a70f66f00097fb531058750fbac6fd41a', class: "megadropdown-content" }, h("slot", { key: 'be685185f04e44d867167f918494d086856b5928' }))))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {
@@ -87,6 +146,7 @@ export class PostMegadropdown {
     }
     static get states() {
         return {
+            "device": {},
             "isVisible": {},
             "animationClass": {}
         };
@@ -113,20 +173,12 @@ export class PostMegadropdown {
         return {
             "toggle": {
                 "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": ""
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -138,30 +190,36 @@ export class PostMegadropdown {
             },
             "show": {
                 "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": "- The HTML element relative to which the popover dropdown should be displayed."
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLElement": {
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Displays the dropdown.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
                             "location": "global",
-                            "id": "global::HTMLElement"
+                            "id": "global::Promise"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Displays the popover dropdown",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target - The HTML element relative to which the popover dropdown should be displayed."
-                        }]
+                    "text": "Hides the dropdown with an animation.",
+                    "tags": []
                 }
             }
         };

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

@@ -1 +1 @@
-post-megadropdown-trigger{width:100%}
+post-megadropdown-trigger{width:100%;position:relative;z-index:3}

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

@@ -2,11 +2,15 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkType } from "../../utils/index";
 export class PostMegadropdownTrigger {
-    constructor() {
-        this.for = undefined;
-        this.ariaExpanded = false;
-    }
+    /**
+     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
+     */
+    for;
     host;
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
+     */
+    ariaExpanded = false;
     /**
      * Reference to the slotted button within the trigger, if present.
      * Used to manage click and key events for mega dropdown control.
@@ -27,7 +31,7 @@ export class PostMegadropdownTrigger {
     }
     handleToggle() {
         if (this.megadropdown) {
-            this.megadropdown.toggle(this.host);
+            this.megadropdown.toggle();
         }
         else {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -56,7 +60,7 @@ export class PostMegadropdownTrigger {
         }
     }
     render() {
-        return (h(Host, { key: 'ba9b6922d4f4eac596f7d1310a5a1bf534b156d8', "data-version": version, "tab-index": "-1" }, h("button", { key: '5fe4ea7f385897606f472ea72be84399e76550e2' }, h("slot", { key: '333f583f0db191599c4be9be9647789b2ea1ecaf' }))));
+        return (h(Host, { key: '2e009cb0dbfd81785d3a8ce5802a4fab0e84a52e', "data-version": version, "tab-index": "-1" }, h("button", { key: 'd77d9a5eb5786a63cf7453c639647adc705892bc' }, h("slot", { key: '19f4b17dc2d073b0770c33d6acfb763c1e47735a' }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get originalStyleUrls() {
@@ -85,6 +89,8 @@ export class PostMegadropdownTrigger {
                     "tags": [],
                     "text": "ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "for",
                 "reflect": false
             }

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

@@ -3,10 +3,6 @@ import { version } from "../../../../package";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { getRoot } from "../../utils/index";
 export class PostMenu {
-    constructor() {
-        this.placement = 'bottom';
-        this.isVisible = false;
-    }
     popoverRef;
     lastFocusedElement = null;
     KEYCODES = {
@@ -20,6 +16,18 @@ export class PostMenu {
         ESCAPE: 'Escape',
     };
     host;
+    /**
+     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Tooltips 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 = 'bottom';
+    /**
+     * Holds the current visibility state of the menu.
+     * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
+     * and updates automatically when the menu is toggled.
+     */
+    isVisible = false;
     /**
      * Emits when the menu is shown or hidden.
      * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
@@ -150,7 +158,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '8f16d2fa03fc108a1ee5972811e6c94dc03a8142', "data-version": version }, h("post-popovercontainer", { key: '4c4df2d6de84db121b8a261be6fbdeaf617ab3e2', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '20e5335b60c1cee8d6da80f654abd32c363397b8', class: "popover-container", part: "popover-container" }, h("slot", { key: '0182cda99c5e991a8001cbc594ef4988950657c2' })))));
+        return (h(Host, { key: '071532c327f80197dda662f77e5cb2444281087d', "data-version": version }, h("post-popovercontainer", { key: '9f70ca4009139e0547026b26be610a02f4f1a95a', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ff1048a8fb27402a82cedc3dc300366063c9601', class: "popover-container", part: "popover-container" }, h("slot", { key: 'bed6c96b7502e0032b746ac6fdf8c3dd6d782e48' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -186,6 +194,8 @@ export class PostMenu {
                     "tags": [],
                     "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"

package/dist/collection/components/post-menu-item/post-menu-item.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostMenuItem {
     render() {
-        return (h(Host, { key: '1cd717c2bbc991b33acba0bbfa5d5a2412f6dcc7', role: "menuitem", "data-version": version }, h("slot", { key: 'fe09373b79d299f21ebfdf596bab4d4bc30a9060' })));
+        return (h(Host, { key: '376ce17a520b6cb74c55c009843df878f99ef411', role: "menuitem", "data-version": version }, h("slot", { key: 'e489c5c09f1527e527e052e9f4349c5b26db6ea9' })));
     }
     static get is() { return "post-menu-item"; }
 }

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

@@ -2,11 +2,15 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkType, getRoot } from "../../utils/index";
 export class PostMenuTrigger {
-    constructor() {
-        this.for = undefined;
-        this.ariaExpanded = false;
-    }
+    /**
+     * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+     */
+    for;
     host;
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+     */
+    ariaExpanded = false;
     /**
      * Reference to the slotted button within the trigger, if present.
      * Used to manage click and key events for menu control.
@@ -67,7 +71,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '5bdaebd0c1f46fda5804c0e8d39ab3e714b523c5', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'ffee26535991d712f44cb1859a5976ec89ad772a' })));
+        return (h(Host, { key: 'a0fff619978087ce0c67d7d327982424e3784ff0', "data-version": version, "tab-index": "-1" }, h("slot", { key: '93e26150b59e9a01275a6815096e09ff5fac146b' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {
@@ -96,6 +100,8 @@ export class PostMenuTrigger {
                     "tags": [],
                     "text": "ID of the menu element that this trigger is linked to. Used to open and close the specified menu."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "for",
                 "reflect": false
             }

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

@@ -25,10 +25,22 @@ export class PostPopover {
     popoverRef;
     localBeforeToggleHandler;
     host;
+    /**
+     * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Popoverss 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 = 'top';
+    /**
+     * Define the caption of the close button for assistive technology
+     */
+    closeButtonCaption;
+    /**
+     * Show a little indicator arrow
+     */
+    // eslint-disable-next-line @stencil-community/ban-default-true
+    arrow = true;
     constructor() {
-        this.placement = 'top';
-        this.closeButtonCaption = undefined;
-        this.arrow = true;
         this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
     connectedCallback() {
@@ -91,7 +103,7 @@ export class PostPopover {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: 'c2f53a7ac9d6bbcca8c220d9b8a5ed0dda360cf9', "data-version": version }, h("post-popovercontainer", { key: 'fa5a32cfd4263fcabed5405f2b6bb2ab0ca93c9a', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4799da001d006a47d93be1393618744a0b393841', class: "popover-container" }, h("div", { key: '7a28ea59e07591c8b835dd10157bc5e9b85793c6', class: "popover-content" }, h("slot", { key: '1ba6533577817d1fc2b7762654b5639596b16422' })), h("button", { key: 'f1446964325e49b79bc0fe26a05bb4f12a140c61', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd056bb988df548e8cae61ba226c1d9e124bc32b', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: 'a7976e6c960015ed9b318c75fc8a74afc2337661', "data-version": version }, h("post-popovercontainer", { key: '1b71f4bce3a6866e19c3900c0e82f814508f8144', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'b15e45e7fd31edc36fa4c912332984daf0ce9cbc', class: "popover-container" }, h("div", { key: 'adc170a2738c7f88c60e8885d8ee84f10fa1d546', class: "popover-content" }, h("slot", { key: '235dbd1a184353de8d8da038c8c31e3dd7f6dab7' })), h("button", { key: '679fccf088d5589b548ec2186facc6c767aace93', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'e8f61719cc6e9b6ddf85756005f17b9103406055', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -127,6 +139,8 @@ export class PostPopover {
                     "tags": [],
                     "text": "Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nPopoverss 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -145,6 +159,8 @@ export class PostPopover {
                     "tags": [],
                     "text": "Define the caption of the close button for assistive technology"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-button-caption",
                 "reflect": false
             },
@@ -162,6 +178,8 @@ export class PostPopover {
                     "tags": [],
                     "text": "Show a little indicator arrow"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "true"

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){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);background:var(--post-current-palette-bg);color:var(--post-current-palette-fg);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}: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):not(:has(.arrow)){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12)}:where(post-popovercontainer):has(.arrow){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){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){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){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-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}
+@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:var(--post-device-elevation-300);background:var(--post-current-palette-bg);color:var(--post-current-palette-fg);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}: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):not(:has(.arrow)){box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow){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){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){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){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-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}

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

@@ -13,11 +13,6 @@ const SIDE_MAP = {
  * @slot - Default slot for placing content inside the popovercontainer.
  */
 export class PostPopovercontainer {
-    constructor() {
-        this.placement = 'top';
-        this.edgeGap = 8;
-        this.arrow = false;
-    }
     host;
     arrowRef;
     eventTarget;
@@ -27,8 +22,25 @@ export class PostPopovercontainer {
      * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
      */
     postToggle;
+    /**
+     * Whether or not the popover should close when user clicks outside of it
+     */
+    manualClose = false;
+    /**
+     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Tooltips 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 = 'top';
+    /**
+     * Gap between the edge of the page and the popover
+     */
+    edgeGap = 8;
+    /**
+     * Wheter or not to display a little pointer arrow
+     */
+    arrow = false;
     componentDidLoad() {
-        this.host.setAttribute('popover', '');
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
@@ -146,9 +158,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '844302edb3852f99229d4f4ccacf82cd78588435', "data-version": version }, this.arrow && (h("span", { key: 'ae293d24ef24282bfcaeb7f545653a563e5246d5', class: "arrow", ref: el => {
+        return (h(Host, { key: '6bebf9ab3013796d0eebb3d543411a0e80d2e913', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, this.arrow && (h("span", { key: 'd6eca10452a54073a293128e8faf76e45e35c4c5', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '61dd3072a5217099028e3dd4b22fa845ea2f5970' })));
+            } })), h("slot", { key: '3b6674dfa1b3ffac10c6640717c7ae713577c965' })));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -163,6 +175,26 @@ export class PostPopovercontainer {
     }
     static get properties() {
         return {
+            "manualClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the popover should close when user clicks outside of it"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "manual-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "placement": {
                 "type": "string",
                 "mutable": false,
@@ -183,6 +215,8 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -201,6 +235,8 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Gap between the edge of the page and the popover"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "edge-gap",
                 "reflect": false,
                 "defaultValue": "8"
@@ -219,6 +255,8 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Wheter or not to display a little pointer arrow"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "false"