@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

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

@@ -147,7 +147,7 @@ export class PostMainnavigation {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: '6cd850555585d87eb25e3f6892b8010f5e4d23d6', slot: "post-mainnavigation", version: version }, h("div", { key: '3411008120d072920f4de0b71c9dc014748f1390', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '2e3747380cb546bd6da77e5ffba2403586205a55', name: "back-button" })), h("div", { key: 'e9eedd836b3f679ba2861109db2d0811c1142677', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '628511a2c1812a08828e1aa2b51f26ad01a5a2cf', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '1b660d65e1984e8701a98a369046f391fd177338', ref: el => (this.navbar = el) }, h("slot", { key: '0eb35366ac0bd58509afd6a12f68c2b09396a497' })), h("div", { key: '11145ad6602e2df78d3c3f4643cc6e4e960775aa', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '26e795cd00221dbfb1a7632453d0d48993584b0b', "aria-hidden": "true", name: "chevronright" }))));
+        return (h(Host, { key: '0aaf98ec2144bec91f4eec42ab367a419e406681', slot: "post-mainnavigation", version: version }, h("div", { key: 'b09cff2d01eb4bbc75824368433c7d730cbb2230', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '0270f7b3fcd2702d44159d0325604c02b582a89e', name: "back-button" })), h("div", { key: '70f46db7348b1e8b34ec57a055763637fbde68e6', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '4326ec1115371476986e594556127f2710543b4f', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: 'e20213b2b307f29ea2ff6d39a766144bae5dff3b', ref: el => (this.navbar = el) }, h("slot", { key: '17c5b51c7a29ead6635f72df25bb5457d4b86ecf' })), h("div", { key: '9b8a2033a772315167c0c28b5ba769a4c5a957e8', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: 'f941e874a0b28b784f248e0e6ec8eeb5feb61ef7', "aria-hidden": "true", name: "chevronright" }))));
     }
     static get is() { return "post-mainnavigation"; }
     static get originalStyleUrls() {

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

@@ -4,6 +4,15 @@ import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
 export class PostMegadropdown {
     constructor() {
+        this.device = breakpoint.get('device');
+        /**
+         * 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.
+         */
+        this.isVisible = false;
+        /** Holds the current animation class. */
+        this.animationClass = null;
         this.handleClickOutside = (event) => {
             if (this.device !== 'desktop')
                 return;
@@ -22,9 +31,6 @@ export class PostMegadropdown {
             }
             this.hide(false);
         };
-        this.device = breakpoint.get('name');
-        this.isVisible = false;
-        this.animationClass = null;
     }
     breakpointChange(e) {
         this.device = e.detail;
@@ -34,7 +40,7 @@ export class PostMegadropdown {
     }
     disconnectedCallback() {
         this.removeListeners();
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        window.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
         if (PostMegadropdown.activeDropdown === this) {
             PostMegadropdown.activeDropdown = null;
         }
@@ -92,7 +98,7 @@ export class PostMegadropdown {
         this.firstFocusableEl?.focus();
     }
     connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
     }
     /**
      * Forces the dropdown to close without animation.
@@ -151,7 +157,7 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: '7426a12ebaeac0ce3b8402c3da4d5393daca059b', version: version }, h("div", { key: 'd47b60c334577f5662f19912f12ce941b4b52d94', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '2798f217b2b3e43c3c63072884bbbbe7d99ed62f', class: "megadropdown" }, h("slot", { key: 'b61f82bbc7f87f65d9b6957e7a4e5d6790b6dd00', name: "megadropdown-title" }), h("div", { key: 'f4996a819511cb59185faeedbdcec4be6e6f8a24', class: "megadropdown-content" }, h("slot", { key: '54f695c3b3d30a6a1aae7f7dc6f65f4d4d27de68' })), h("div", { key: 'b1334295c7d758e20c85b6c6c8cefc31dcf09e20', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'c4db69fa3207ce4cb47b725e37b1993820a2a64c', name: "back-button" })), h("div", { key: '68b22a3222382586fc749dec63e36edae84360c1', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '8023b75c931a95dbd9552c1a713790e77e40f526', name: "close-button" }))))));
+        return (h(Host, { key: '3e846f475540067d9c58b60f636730a2b38a0aff', version: version }, h("div", { key: '47133c10dc15b7e5641a9fb47a1875ba89581e23', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '8f64dc9ef745ed4434fe00a48f76cc12b96e6443', class: "megadropdown" }, h("slot", { key: '5041727da18956a26ce43f870cde81264431cb23', name: "megadropdown-title" }), h("div", { key: '5ac34fe4ab27de09c9fc825c3999f2294abc624c', class: "megadropdown-content" }, h("slot", { key: 'f8917a15cd28082d0c0d88046f355aa85767255f' })), h("div", { key: '7fdaae11f771b92f11b2ed12be096f2936d9e08b', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'de791c42ef57abbde0ae9d24e1bcdb64b5e873cc', name: "back-button" })), h("div", { key: 'be88c1f94bc3eb7507e5de0a558a87a31936b6a0', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '444b996c0001f283279406d00708e4291d5af5bc', name: "close-button" }))))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {

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: 'a6b452393957a1468493ef1b8f56d398479a3245', "data-version": version, "tab-index": "-1" }, h("button", { key: 'bf9565005a58bbae0dd2424819548c4b635791c1' }, h("slot", { key: 'c52d356902e2b38056f2feea0fc90cf5493c8752' }))));
+        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: '6d23cab02632b003891301577900c484825f4021', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '4a0e4ed73449f62ffc1e4bd1c1d3fd73718072bc', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'cabe298c9aeeb6a8d12aaa638a82ac8a2eb2d320', class: "popover-container", part: "popover-container" }, h("slot", { key: 'fe27a3ceda1720b64a77735ef7fe280a4a3d59d9' })))));
+        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: '376ce17a520b6cb74c55c009843df878f99ef411', role: "menuitem", "data-version": version }, h("slot", { key: 'e489c5c09f1527e527e052e9f4349c5b26db6ea9' })));
+        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: '4c3732f46a6f1882d38e646b5d23f6c29ad9f4c8', "data-version": version, "tab-index": "-1" }, h("slot", { key: '456dbe219d56fe0826bc208201573c9f977f7f79' })));
+        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);
     }
@@ -105,7 +113,7 @@ export class PostPopover {
         trigger.setAttribute('aria-expanded', force ? 'false' : null);
     }
     render() {
-        return (h(Host, { key: '3dc7041d2208523956f62fedcf1dfbdee5302006', "data-version": version }, h("post-popovercontainer", { key: 'c4a93a401ab5f6605dec49e509c5188bf05004be', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9c4d4c36c811ac443e98716c3b013de97eaa624d', class: "popover-container" }, h("div", { key: 'e256d82cb50ddfd7af6368c707afd0b1e5c8e7aa', class: "popover-content" }, h("slot", { key: '7da07c358162b0e5bfd13561d5ac1e94d028a917' })), h("button", { key: 'c1fef4bf8383e92d34367966ae980983c77e15e4', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '066b77e1883d64b937319a20e0e6e35fa0168d48', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: 'fe756429b10af594a621b5769f129ee82b1aa6eb', "data-version": version }, h("post-popovercontainer", { key: '437b8c75fc878b3edb916887cfab3933ed08c7b2', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '082e00cb11a042cad036252743261395874b0a86', class: "popover-container" }, h("div", { key: 'be2e39304472bf351a524dc4f6eeb3ec9da8fc58', class: "popover-content" }, h("slot", { key: 'e1cd722828d3b136ad96553d81334b31de3289f9' })), h("button", { key: 'b6fa750860d95bf223da9224d6fa8531e577b3a5', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd3fb8e0e0e15c58df5b1aacfe5d4a6b90ec3843', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -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)}