@swisspost/design-system-components 10.0.0-next.48 → 10.0.0-next.50

package/dist/components/post-megadropdown.js

@@ -3,7 +3,7 @@ import { g as getFocusableChildren } from './get-focusable-children.js';
 import { v as version } from './package.js';
 import { b as breakpoint } from './breakpoints.js';
 
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
+const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.active,.megadropdown post-list .list-title h3 a[aria-current=page],.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
 
 const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
     constructor() {
@@ -17,6 +17,7 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
          * and updates automatically when the dropdown is toggled.
          */
         this.isVisible = false;
+        this.trigger = false;
         /** Holds the current animation class. */
         this.animationClass = null;
         this.handleClickOutside = (event) => {
@@ -38,11 +39,20 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
             this.hide(false);
         };
     }
-    breakpointChange(e) {
-        this.device = e.detail;
-        if (this.device === 'desktop' && this.isVisible) {
-            this.animationClass = null;
-        }
+    get megadropdownTrigger() {
+        const hostId = this.host.getAttribute('id');
+        return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`) : null;
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+    }
+    componentDidRender() {
+        this.getFocusableElements();
+    }
+    componentDidLoad() {
+        this.checkInitialAriaCurrent();
+        this.setupObserver();
+        this.handleAriaCurrentChange([]);
     }
     disconnectedCallback() {
         this.removeListeners();
@@ -50,9 +60,7 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         if (PostMegadropdown.activeDropdown === this) {
             PostMegadropdown.activeDropdown = null;
         }
-    }
-    componentWillRender() {
-        this.getFocusableElements();
+        this.defaultSlotObserver.disconnect();
     }
     /**
      * Toggles the dropdown visibility based on its current state.
@@ -101,8 +109,11 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     async focusFirst() {
         this.firstFocusableEl?.focus();
     }
-    connectedCallback() {
-        window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+    breakpointChange(e) {
+        this.device = e.detail;
+        if (this.device === 'desktop' && this.isVisible) {
+            this.animationClass = null;
+        }
     }
     /**
      * Forces the dropdown to close without animation.
@@ -159,15 +170,66 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
             }
         }
     }
+    /**
+     * Sets up a MutationObserver on the host to watch for changes
+     * in `aria-current` attributes.
+     */
+    setupObserver() {
+        const config = {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-current'],
+        };
+        this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
+        this.defaultSlotObserver.observe(this.host, config);
+    }
+    /**
+     * Adds or removes the 'active' class on the megadropdown trigger button
+     * based on the active state.
+     *
+     * @param isActive - Whether the trigger should appear active
+     */
+    setTriggerActive(isActive) {
+        const trigger = this.megadropdownTrigger;
+        if (!trigger)
+            return;
+        if (isActive) {
+            trigger.classList.add('active');
+        }
+        else {
+            trigger.classList.remove('active');
+        }
+    }
+    /**
+     * Updates the megadropdown trigger state when the megadropdown content changes.
+     * Checks if any element inside the megadropdown has `aria-current="page"`
+     * and sets the trigger as active accordingly.
+     */
+    handleAriaCurrentChange(mutations) {
+        if (!mutations.length)
+            return;
+        const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
+        this.setTriggerActive(hasCurrentPage);
+    }
+    /**
+     * Checks on initialization if any element inside the megadropdown
+     * has `aria-current="page"` and sets the trigger as active if so.
+     */
+    checkInitialAriaCurrent() {
+        const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
+        if (hasCurrentPage)
+            this.setTriggerActive(true);
+    }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'b322cf2da9bc8f494045644e5a97e98195eae223', version: version }, h("div", { key: '6c17be4d41d19b5043736b588468b8e1def70f11', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'ba33f5c97239fcd7212cb435bfdd64a79b7910d7', class: "megadropdown" }, h("slot", { key: '0148730fada5d623b11071b69f9972013fbbcbce', name: "megadropdown-title" }), h("div", { key: '536c1b795d8a2e16ad9a105bd3db98cd9abfc0d6', class: "megadropdown-content" }, h("slot", { key: '3f66bfd1661ea42c938a31af6ceb8d1f1bbdbcd0' })), h("div", { key: '2f240c7264663fe6d1877e582a33b599ae137219', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '0ad90d939722d07809fb9ea96ab2bb091ef78c1c', name: "back-button" })), h("div", { key: '1d038e119522ca98cc3ab4cdba178b87febcedb4', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: 'b4e3dd20b8e14291261b5b7939fadd6a8927c0a2', name: "close-button" }))))));
+        return (h(Host, { key: '40023f8684db4cfff78f69d2d5786e4c3a0332b4', version: version }, h("div", { key: '986f114148d355b7a6e92c19d1c02c925eb27fce', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'c14d01be681f596148d39f272375615eafdf25c0', class: "megadropdown" }, h("slot", { key: '5f60ff26e694c107c569e06d30e18a5940d3e7b1', name: "megadropdown-title" }), h("div", { key: '49202a8a0dcebc086220db637cf25d96510b6eac', class: "megadropdown-content" }, h("slot", { key: '98593b2824d21f065b4c183c8980d94136b175bf' })), h("div", { key: 'ed1dfbbebd101a98153657007f8037c0282b47ef', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '4e737d72e77271cb025976ae5e5fe4d5f653480a', name: "back-button" })), h("div", { key: '0bf1316c091efbf294be89efeebae7937c013b29', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '594a412944fff3fee09639b85cc13a9291b96a10', name: "close-button" }))))));
     }
     get host() { return this; }
     static get style() { return postMegadropdownCss; }
 }, [4, "post-megadropdown", {
         "device": [32],
         "isVisible": [32],
+        "trigger": [32],
         "animationClass": [32],
         "toggle": [64],
         "show": [64],

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 
-const postMenuItemCss = "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}";
+const postMenuItemCss = "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 .75rem .5rem 1rem;gap:.5rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1.25rem;height:1.25rem;margin:.125rem}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:.75rem;gap:1rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.375rem;height:1.375rem;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:.8125rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.5rem;height:1.5rem}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}";
 
 const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends HTMLElement {
     constructor() {
@@ -9,7 +9,7 @@ const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '6be606f22288f655320c5ef58f3d0f4bf39d7f62', role: "menuitem", "data-version": version }, h("slot", { key: 'a6d4b48b8cb09e27b19cc14def007e3754ff06c0' })));
+        return (h(Host, { key: '6b2c8542aed22132c627fadb6be036124e37853e', "data-version": version }, h("slot", { key: '8059cb5112270641ef7ba860cdacb2cdaa75fd59' })));
     }
     static get style() { return postMenuItemCss; }
 }, [4, "post-menu-item"]);

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

@@ -80,7 +80,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '76b3c59cdae5c78cefaaf1ea2a9668a77bddd37e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '3835d87c3795e694f7493ceb735bd638bdd2dea1' })));
+        return (h(Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-menu2.js

@@ -2,12 +2,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './post-popovercontainer2.js';
 import { v as version } from './package.js';
 import { g as getFocusableChildren } from './get-focusable-children.js';
-import { d as checkEmptyOrOneOf } from './index2.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { E as EventFrom } from './event-from.js';
 import { g as getRoot } from './get-root.js';
 
-const postMenuCss = "@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}";
+const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -59,18 +59,32 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             }
         };
         this.handlePostToggle = (event) => {
-            this.isVisible = event.detail;
+            this.isVisible = event.detail.isOpen;
             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();
+                    if (event.detail.first) {
+                        if (menuItems.length > 0) {
+                            // Add role="menu" to the popovercontainer
+                            this.host.setAttribute('role', 'menu');
+                            // Add role="menuitem" to the focusable elements
+                            menuItems.forEach(item => {
+                                item.setAttribute('role', 'menuitem');
+                            });
+                            // Add aria-label to the menu
+                            if (this.label)
+                                this.host.setAttribute('aria-label', this.label);
+                        }
                     }
+                    menuItems[0].focus();
                 }
                 else if (this.lastFocusedElement) {
-                    this.lastFocusedElement.focus();
+                    setTimeout(() => {
+                        // This timeout is added for NVDA to announce the menu as collapsed
+                        this.lastFocusedElement.focus();
+                    }, 0);
                 }
             });
         };
@@ -84,6 +98,9 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
     }
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
     connectedCallback() {
         this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
@@ -96,6 +113,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     }
     componentDidLoad() {
         this.validatePlacement();
+        this.validateLabel();
         if (this.popoverRef) {
             this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
         }
@@ -172,8 +190,9 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         }
     }
     getSlottedItems() {
-        const slot = this.host.shadowRoot.querySelector('slot');
-        const slottedElements = slot ? slot.assignedElements() : [];
+        const slot = this.host.shadowRoot.querySelectorAll('slot');
+        const slottedElements = [];
+        slot.forEach(slotItem => slottedElements.push(...slotItem.assignedElements()));
         return (slottedElements
             // If the element is a slot, get the assigned elements
             .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
@@ -181,21 +200,24 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'ee365a30646247563fccd55556f7667cb1591d02', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'c649841d408d3f35dfed959cdc6b041163ff80d3', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9f4f145b80c716d27dc51f4bcb0d269b2b2678a8', part: "menu" }, h("slot", { key: '72b53c8f154a4a91541799a789e8618a8d1a9c2c' })))));
+        return (h(Host, { key: 'd98d7b0a1c607732ab12c94f8d872408a053c19b', "data-version": version }, h("post-popovercontainer", { key: '669e6062e5ff0dfac0d311cc8fdd0bb51735aac1', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '6bc1abb7b764e9e6985a839904ed5575ea20a519', part: "menu" }, h("slot", { key: '6b8670f2e80ed93761797b9161ddf54bb88f73ec', name: "header" }), h("slot", { key: '971f39ae63f22a503e36aeecb67575304ce14248' })))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "placement": ["validatePlacement"]
+        "placement": ["validatePlacement"],
+        "label": ["validateLabel"]
     }; }
     static get style() { return postMenuCss; }
 }, [1, "post-menu", {
         "placement": [1],
+        "label": [1],
         "isVisible": [32],
         "toggle": [64],
         "show": [64],
         "hide": [64]
     }, undefined, {
-        "placement": ["validatePlacement"]
+        "placement": ["validatePlacement"],
+        "label": ["validateLabel"]
     }]);
 __decorate([
     EventFrom('post-popovercontainer')

package/dist/components/post-popover.js

@@ -3,6 +3,8 @@ import { a as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popover
 import { v as version } from './package.js';
 import { I as IS_BROWSER } from './breakpoints.js';
 import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
+import { d as defineCustomElement$4 } from './post-closebutton2.js';
+import { d as defineCustomElement$3 } from './post-icon2.js';
 
 function getAttributeObserver(attribute, handler) {
     /**
@@ -28,7 +30,7 @@ function getAttributeObserver(attribute, handler) {
     return IS_BROWSER ? new MutationObserver(observerHandler) : null;
 }
 
-const postPopoverCss = "@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)}}.btn-close{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;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:var(--post-current-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:hover{color:HighlightText !important}}";
+const postPopoverCss = "*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}";
 
 /**
  * @slot default - Slot for placing content inside the popover.
@@ -144,7 +146,7 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         trigger.setAttribute('aria-expanded', force ? 'false' : null);
     }
     render() {
-        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))))));
+        return (h(Host, { key: '4224bfe1dc1bdb7fdfb86da67b54816e8cc6fce4', "data-version": version }, h("post-popovercontainer", { key: '3d7e370a89214878d33598cafd3d118c74d16312', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ed806f93ddec2656a15a1b242246c9c09b34f58a', class: "popover-container" }, h("div", { key: 'd60dd75153f88fc65d56dc9ec7387363e78cb835', class: "popover-content" }, h("slot", { key: 'f37005a225ecde32a80dd5efc3e61ccea7ab6dc5' })), h("post-closebutton", { key: 'c440bc94fb2832a8b8fcc0dd545b5f9d65cf834a', onClick: () => this.hide() }, this.closeButtonCaption)))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -167,13 +169,23 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-popover", "post-popovercontainer"];
+    const components = ["post-popover", "post-closebutton", "post-icon", "post-popovercontainer"];
     components.forEach(tagName => { switch (tagName) {
         case "post-popover":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostPopover$1);
             }
             break;
+        case "post-closebutton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "post-popovercontainer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/components/post-popovercontainer2.js

@@ -2707,13 +2707,29 @@ function apply() {
   injectStyles(document);
 }
 
-const postPopovercontainerCss = "@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-fg);background-color:var(--post-current-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)}";
+const duration = 250;
+const easing = 'ease-out';
+function popIn(el) {
+    if (!el)
+        return;
+    return el.animate([
+        { transform: 'scale(0.9)', opacity: 0 },
+        { transform: 'scale(1)', opacity: 1 },
+    ], {
+        duration,
+        easing,
+        fill: 'forwards',
+    });
+}
+
+const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
 
 const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopovercontainer extends HTMLElement$1 {
     constructor() {
         super();
         this.__registerHost();
         this.postToggle = createEvent(this, "postToggle", 7);
+        this.firstOpen = true;
         /**
          * 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
@@ -2813,9 +2829,19 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
         const isOpen = e.newState === 'open';
         if (isOpen) {
+            const content = this.host.querySelector('.popover-content');
             this.startAutoupdates();
+            if (content && this.animation === 'pop-in') {
+                popIn(content);
+            }
             if (this.safeSpace)
                 window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+            // Emit event with `first` flag only true on the first open
+            if (this.firstOpen) {
+                this.postToggle.emit({ isOpen, first: this.firstOpen });
+                this.firstOpen = false;
+                return;
+            }
         }
         else {
             if (typeof this.clearAutoUpdate === 'function')
@@ -2823,7 +2849,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
             if (this.safeSpace)
                 window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
-        this.postToggle.emit(isOpen);
+        this.postToggle.emit({ isOpen: isOpen, first: false });
     }
     /**
      * Start listening for DOM updates, scroll events etc. that have
@@ -2954,10 +2980,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        const animationClass = this.animation ? `animate-${this.animation}` : '';
-        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 => {
+        return (h(Host, { key: '493d032d16ace815b6c031e77dbcc673f26d149b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '97bb357cada0456b3aa458e12768d9ad5458ef24', class: "popover-content" }, this.arrow && (h("span", { key: 'f5f2256470edad5a8ca89c32b3a44ef0fe388eea', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '39f53833a3f570b2c8807a5903b531c6733b0ada' }))));
+            } })), h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-rating.js

@@ -4,7 +4,7 @@ import { c as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postRatingCss = "@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:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
+const postRatingCss = ":host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 
 const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
     validateLabel() {
@@ -101,7 +101,7 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         }
     }
     render() {
-        return (h(Host, { key: '588c5d3c4600faa939cab4b673e27d08182323da', "data-version": version }, h("div", { key: '8fced4724505cdc2f3fb3160cf276ed1280b5431', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'befb055aff44467d2da231043db28797f843c239', "data-version": version }, h("div", { key: 'c231944ad2638c2b69b6ae9e8ad92a962aa50139', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/components/post-tab-header.js

@@ -4,7 +4,7 @@ import { c as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { n as nanoid } from './index.browser.js';
 
-const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}@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}.tab-title{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){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
+const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}:host{display:block}.tab-title{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){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
 
 const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
     constructor() {
@@ -19,7 +19,7 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: 'd5f6cd0ceb819b475ec49f8ea66e6b4b25f04f8e', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '8a87fef31572674981dab80e56e6b20163b448ae' })));
+        return (h(Host, { key: '387d9db0111153ca4a7da1a9ad600daeafa3b7a1', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '62126f05530776ca45b151b00834fa0c68c5b26e' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tab-panel.js

@@ -21,7 +21,7 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '609dd2b8bf26e58e92a1dbc827e4479ac416d95b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '121538878e0298f1f16f6e20eeb15d5da8a5ba9c' })));
+        return (h(Host, { key: '97ae92b05f495a63bd5ec5f57eb196fdf6772ca8', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '8b36e0849fcd65662a27bc62ac29cec0d8db4f41' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tabs.js

@@ -167,7 +167,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: 'dc7228c840d65e3546e0d13e5bcaa78819b5aeb9', "data-version": version }, h("div", { key: '377d592f7c00f3ec0c7aba2a4a8ca2b88cd37927', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '6e79f33d6cd82d55ba9fad2f09f6163ce7e0a372', class: "tabs", role: "tablist" }, h("slot", { key: '65fbf3cb6525f2f2ae97eb60dad313811db4c585', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '675a59a27e79bad06ea2b70c4fc7b0a6f4b020ff', class: "tab-content", part: "content" }, h("slot", { key: 'b559af0fa652e352673fbabb6829a62a5630e809', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'eb30ee19d073caf4f32e255045eff58c0cb511f5', "data-version": version }, h("div", { key: '0920e0cbb6565ff8a9ff663e938291c050d6c93c', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'df3a5a698a77719b371879effba16e11709b2c22', class: "tabs", role: "tablist" }, h("slot", { key: 'e6c9592b39e999369eb1b6f43b08e7130872add9', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '14cdae926ce10f854577de34b713c8e269568dbb', class: "tab-content", part: "content" }, h("slot", { key: 'f2aaff6a23f8dd2683963cb25c95d41953e708f5', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return postTabsCss; }

package/dist/components/post-togglebutton.js

@@ -29,7 +29,7 @@ const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutt
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: '1cebe1d1314e2c89f141869e07521e7f30e58617', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '8b8c33befde8e93eca73a6239170c3786e2cf2f2' })));
+        return (h(Host, { key: '190c53c4bbada662698addcb288bcb50a8d179b3', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '544bf7d937386a6e65be75e249f3dcc080054d74' })));
     }
     get host() { return this; }
     static get style() { return postTogglebuttonCss; }

package/dist/components/post-tooltip-trigger.js

@@ -5189,7 +5189,7 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '6106c5a0bbe8d19da424e3c9389829009543b6d5', "data-version": version$1 }, h("slot", { key: 'c7358b9b796f287bd165951664a1dd61a0372dc4', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '49529a68fdcc56e8967cdd147ac4c5c35177e70f', "data-version": version$1 }, h("slot", { key: '2b38e3412393f39dd6b2da480f591e4bec38ba34', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tooltip.js

@@ -67,11 +67,11 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
      * @param e Popovercontainer toggle event
      */
     handleToggle(e) {
-        this.open = e.detail;
+        this.open = e.detail.isOpen;
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'c5f293812e33520ea5a2c9224e93fe5e5e41cbe0', "data-version": version }, h("post-popovercontainer", { key: '7ec57e1a2315d95e7cb696cf6d2d1a1d8ae77257', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '79c91307707c56345acb136a45acdae859d54c2b' }))));
+        return (h(Host, { key: 'cdde276f07efb0916bb3b0cd7cf761788421e251', "data-version": version }, h("post-popovercontainer", { key: '06b4d472448d4083f717ce13e73ff9426f422ec4', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c5efcac53b6c0fa207ceee34ee86580c7566f8a8' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-Tg0GNTZM.js → p-B392lG2N.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-0Ltezq5O.js';
+import { v as version } from './p-DimG3b3P.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { E as EventFrom } from './p-kraHE1r3.js';
+import { E as EventFrom } from './p-CzIKqBrS.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -103,7 +103,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '7fdf4338861df3ed4a61e2de68a0623f7f43df19', "data-version": version }, h("slot", { key: '4efa3ed29778dc162c4e8628f32d447d8b0b9ece' })));
+        return (h(Host, { key: 'd0851c032e622f4a182e1321331e84eaa0440245', "data-version": version }, h("slot", { key: 'd495c42f409de0f9230c01031ecddab69cead1b7' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-Dq9F2i7n.js → p-B9Y7UQKI.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-0Ltezq5O.js';
+import { v as version } from './p-DimG3b3P.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
 import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { E as EventFrom } from './p-kraHE1r3.js';
+import { E as EventFrom } from './p-CzIKqBrS.js';
 
-const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:where(:only-of-type,:not(:first-of-type))){--post-accordion-button-border-top-width:0}";
+const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;