@swisspost/design-system-components 10.0.0-next.40 → 10.0.0-next.42

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

@@ -1,9 +1,22 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                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 { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkRequiredAndType } from "../../utils/index";
-import { eventGuard } from "../../utils/event-gua";
+import { checkRequiredAndType, EventFrom } from "../../utils/index";
 export class PostMegadropdownTrigger {
     constructor() {
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
         /**
          * Reference to the slotted button within the trigger, if present.
          * Used to manage click and key events for mega dropdown control.
@@ -24,24 +37,20 @@ export class PostMegadropdownTrigger {
             }
         };
         this.handleToggleMegadropdown = (event) => {
-            eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
-                if (event.target.id === this.for) {
-                    this.ariaExpanded = event.detail.isVisible;
-                    // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
-                    if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
-                        setTimeout(() => {
-                            this.slottedButton?.focus();
-                        }, 100);
-                    }
-                    this.wasExpanded = this.ariaExpanded;
-                    if (this.slottedButton) {
-                        this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-                    }
+            if (event.target.id === this.for) {
+                this.ariaExpanded = event.detail.isVisible;
+                // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+                if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
+                    setTimeout(() => {
+                        this.slottedButton?.focus();
+                    }, 100);
                 }
-            });
+                this.wasExpanded = this.ariaExpanded;
+                if (this.slottedButton) {
+                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                }
+            }
         };
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
@@ -84,7 +93,7 @@ export class PostMegadropdownTrigger {
         document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
     }
     render() {
-        return (h(Host, { key: '54824c6e5d6d8f6bd44caf3e5b5e578d62f5e1e2', "data-version": version, "tab-index": "-1" }, h("button", { key: '54bb8740ba2f04d6d7f128436210b489e2d56bd8' }, h("slot", { key: 'fb58922d62496196ed50543b664b98c1ba2c4d4b' }))));
+        return (h(Host, { key: '315c957a6cf876da48209096b9f30a7d94e72c08', "data-version": version, "tab-index": "-1" }, h("button", { key: '2533ded6277d2cf97c0c108df49823833486b4de' }, h("slot", { key: 'bf9b18545e11b30eb40d351794ca104035ed47db' }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get originalStyleUrls() {
@@ -101,6 +110,7 @@ export class PostMegadropdownTrigger {
         return {
             "for": {
                 "type": "string",
+                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -113,7 +123,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."
                 },
-                "attribute": "for",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };
@@ -131,3 +142,6 @@ export class PostMegadropdownTrigger {
             }];
     }
 }
+__decorate([
+    EventFrom('post-megadropdown', { ignoreNestedComponents: false })
+], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);

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

@@ -1 +1 @@
-@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}
+@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}

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

@@ -1,9 +1,18 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                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 { h, Host, } from "@stencil/core";
 import { PLACEMENT_TYPES } from "../../types/index";
 import { version } from "../../../../package";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
-import { getRoot, checkEmptyOrOneOf } from "../../utils/index";
-import { eventGuard } from "../../utils/event-gua";
+import { getRoot, checkEmptyOrOneOf, EventFrom } from "../../utils/index";
 export class PostMenu {
     constructor() {
         this.lastFocusedElement = null;
@@ -17,6 +26,18 @@ export class PostMenu {
             END: 'End',
             ESCAPE: 'Escape',
         };
+        /**
+         * Defines the position of the menu relative to its trigger.
+         * Menus 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.
+         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+         */
+        this.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.
+         */
+        this.isVisible = false;
         this.handleKeyDown = (e) => {
             e.stopPropagation();
             if (e.key === this.KEYCODES.ESCAPE) {
@@ -28,21 +49,19 @@ export class PostMenu {
             }
         };
         this.handlePostToggle = (event) => {
-            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
-                this.isVisible = event.detail;
-                this.toggleMenu.emit(this.isVisible);
-                requestAnimationFrame(() => {
-                    if (this.isVisible) {
-                        this.lastFocusedElement = this.root?.activeElement;
-                        const menuItems = this.getSlottedItems();
-                        if (menuItems.length > 0) {
-                            menuItems[0].focus();
-                        }
+            this.isVisible = event.detail;
+            this.toggleMenu.emit(this.isVisible);
+            requestAnimationFrame(() => {
+                if (this.isVisible) {
+                    this.lastFocusedElement = this.root?.activeElement;
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
                     }
-                    else if (this.lastFocusedElement) {
-                        this.lastFocusedElement.focus();
-                    }
-                });
+                }
+                else if (this.lastFocusedElement) {
+                    this.lastFocusedElement.focus();
+                }
             });
         };
         this.handleClick = (e) => {
@@ -51,8 +70,6 @@ export class PostMenu {
                 this.toggle(this.host);
             }
         };
-        this.placement = 'bottom';
-        this.isVisible = false;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -156,7 +173,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'a66db7a05d72ddb3f139339a6afa46a6eb29eac6', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '9b9eab1d709ca42dae36cd04edf8aa98cf6d1b47', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '55ccf7663ebb5dd467b42065631aec2be92fc9da', class: "popover-container", part: "popover-container" }, h("slot", { key: 'b15306e711b53535fb62827a0b6fca37f143e55f' })))));
+        return (h(Host, { key: 'bca8873f7f98b03d3e6952bce4990d1c435bd5ec', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '805c1e528c4af6e35b7881395b2f9de9e430f8c8', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'f534119e208f2bb387f39824736aee766f550fa8', part: "menu" }, h("slot", { key: 'ec9ae42dab9aebd93aafdbebd15d8c39736c84df' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -174,6 +191,7 @@ export class PostMenu {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -182,7 +200,7 @@ export class PostMenu {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.2/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -192,7 +210,8 @@ export class PostMenu {
                     "tags": [],
                     "text": "Defines the position of the menu relative to its trigger.\nMenus 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.\nFor supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement)."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'bottom'"
             }
@@ -303,3 +322,6 @@ export class PostMenu {
             }];
     }
 }
+__decorate([
+    EventFrom('post-popovercontainer')
+], PostMenu.prototype, "handlePostToggle", void 0);

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

@@ -0,0 +1 @@
+post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;width:100%;align-items:center;padding:.5rem 1rem;gap:.5rem;font-size:1rem;color:#050400;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);outline-offset:0;padding-block:.75rem}post-menu-item button:has(post-icon:last-child),post-menu-item a:has(post-icon:last-child){padding-inline-end:.75rem}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem}}post-menu-item button>post-icon:last-child,post-menu-item a>post-icon:last-child{margin-inline-start:.5rem}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:-2px !important;border-radius:4px}post-menu-item button::after,post-menu-item a::after{content:"";display:block;position:absolute;inset-block-end:0;inset-inline:0;height:3px;background-color:rgba(0,0,0,0);transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-menu-item button:hover,post-menu-item a:hover{color:#504f4b}post-menu-item button:hover::after,post-menu-item a:hover::after{background-color:currentColor}

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

@@ -2,7 +2,17 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostMenuItem {
     render() {
-        return (h(Host, { key: '200aeaf57f54b400f38bfa1dcf5d723b1db67c00', role: "menuitem", "data-version": version }, h("slot", { key: '6491d510a4e3a6f86b76bc657d379fc96cc764b7' })));
+        return (h(Host, { key: '6be606f22288f655320c5ef58f3d0f4bf39d7f62', role: "menuitem", "data-version": version }, h("slot", { key: 'a6d4b48b8cb09e27b19cc14def007e3754ff06c0' })));
     }
     static get is() { return "post-menu-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-menu-item.css"]
+        };
+    }
 }

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

@@ -3,6 +3,10 @@ import { version } from "../../../../package";
 import { getRoot, checkRequiredAndType } from "../../utils/index";
 export class PostMenuTrigger {
     constructor() {
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
         /**
          * Reference to the slotted button within the trigger, if present.
          * Used to manage click and key events for menu control.
@@ -14,8 +18,6 @@ export class PostMenuTrigger {
                 this.handleToggle();
             }
         };
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
@@ -45,7 +47,7 @@ export class PostMenuTrigger {
         // Check if the slottedButton is within a web component
         if (!this.slottedButton) {
             const webComponent = this.host.querySelector('.menu-trigger-webc');
-            if (webComponent.shadowRoot) {
+            if (webComponent?.shadowRoot) {
                 const slottedButton = webComponent.shadowRoot.querySelector('button');
                 if (slottedButton) {
                     this.slottedButton = slottedButton;
@@ -71,7 +73,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '61d2f4b4703acd195db0ac005cdf882150e499ba', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'b7f8ea683af5e3473e4ba12f6d4ac36ae55aad57' })));
+        return (h(Host, { key: '76b3c59cdae5c78cefaaf1ea2a9668a77bddd37e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '3835d87c3795e694f7493ceb735bd638bdd2dea1' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {
@@ -88,6 +90,7 @@ export class PostMenuTrigger {
         return {
             "for": {
                 "type": "string",
+                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -100,7 +103,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."
                 },
-                "attribute": "for",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };

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

@@ -33,8 +33,16 @@ export class PostPopover {
         this.triggerObserver = IS_BROWSER
             ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
             : null;
+        /**
+         * Defines the position of the popover relative to its trigger.
+         * Popovers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+         */
         this.placement = 'top';
-        this.closeButtonCaption = undefined;
+        /**
+         * Show a little indicator arrow
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.arrow = true;
         this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
@@ -123,6 +131,7 @@ export class PostPopover {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -131,7 +140,7 @@ export class PostPopover {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.2/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -141,12 +150,14 @@ export class PostPopover {
                     "tags": [],
                     "text": "Defines the position of the popover relative to its trigger.\nPopovers 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.\nFor supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement)."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'top'"
             },
             "closeButtonCaption": {
                 "type": "string",
+                "attribute": "close-button-caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -159,11 +170,13 @@ export class PostPopover {
                     "tags": [],
                     "text": "Define the caption of the close button for assistive technology"
                 },
-                "attribute": "close-button-caption",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "arrow": {
                 "type": "boolean",
+                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -176,7 +189,8 @@ export class PostPopover {
                     "tags": [],
                     "text": "Show a little indicator arrow"
                 },
-                "attribute": "arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             }

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

@@ -1 +1 @@
-@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(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-palette-fg);background-color:var(--post-current-palette-bg);border:2px solid rgba(0,0,0,0);border-radius:4px}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}: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)}
+@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(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-palette-fg);background-color:var(--post-current-palette-bg);border-radius:4px}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}@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)}

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

@@ -4,18 +4,34 @@ import { version } from "../../../../package";
 import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 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/dist/popover-fn.js";
+import { apply, isSupported } from "@oddbird/popover-polyfill/fn";
 /**
  * @slot - Default slot for placing content inside the popovercontainer.
  */
 export class PostPopovercontainer {
     constructor() {
+        /**
+         * 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.
+         */
         this.placement = 'top';
+        /**
+         * 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
+         */
         this.manualClose = false;
-        this.safeSpace = undefined;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -53,11 +69,11 @@ export class PostPopovercontainer {
      * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      */
     async show(target) {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = target;
-            this.calculatePosition();
-            this.host.showPopover();
-        }
+        if (this.toggleTimeoutId)
+            return;
+        this.eventTarget = target;
+        this.calculatePosition();
+        this.host.showPopover();
     }
     /**
      * Programmatically hide the popovercontainer
@@ -235,9 +251,9 @@ export class PostPopovercontainer {
     }
     render() {
         const animationClass = this.animation ? `animate-${this.animation}` : '';
-        return (h(Host, { key: 'c5f30bf3c07bbc6af797368b4951c9a1b5d596ef', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'afae0976b169831fe49df860d44cd80fa0ae0b3a', class: animationClass }, this.arrow && (h("span", { key: '08e89fda623b139c1b1fba283a9d508757cd1b3d', class: "arrow", ref: el => {
+        return (h(Host, { key: '357f53696ca28ab2c137d47e2192038dc756c289', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9c40bdc5034ccf14157ee1ae8ce33fe58a9049e4', class: animationClass }, this.arrow && (h("span", { key: '6133ab54aaea6f198560ca5cb30f5604318203f6', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'fa3f48c319dca350cbd456f2daf8ab5975b99d8f' }))));
+            } })), h("slot", { key: '39f53833a3f570b2c8807a5903b531c6733b0ada' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -254,6 +270,7 @@ export class PostPopovercontainer {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -262,7 +279,7 @@ export class PostPopovercontainer {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.2/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -272,12 +289,14 @@ export class PostPopovercontainer {
                     "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."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'top'"
             },
             "edgeGap": {
                 "type": "number",
+                "attribute": "edge-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -290,12 +309,14 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Gap between the edge of the page and the popovercontainer"
                 },
-                "attribute": "edge-gap",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "8"
             },
             "animation": {
                 "type": "string",
+                "attribute": "animation",
                 "mutable": false,
                 "complexType": {
                     "original": "'pop-in' | null",
@@ -308,12 +329,14 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Animation style"
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
             },
             "arrow": {
                 "type": "boolean",
+                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -326,12 +349,14 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Whether or not to display a little pointer arrow"
                 },
-                "attribute": "arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "manualClose": {
                 "type": "boolean",
+                "attribute": "manual-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -344,12 +369,14 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Whether or not the popovercontainer should close when user clicks outside of it"
                 },
-                "attribute": "manual-close",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "safeSpace": {
                 "type": "string",
+                "attribute": "safe-space",
                 "mutable": false,
                 "complexType": {
                     "original": "'triangle' | 'trapezoid'",
@@ -362,7 +389,8 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Enables a safespace through which the cursor can be moved without the popover being disabled"
                 },
-                "attribute": "safe-space",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };