@swisspost/design-system-components 10.0.0-next.51 → 10.0.0-next.53

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

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { g as getFocusableChildren } from './p-C35MCWIp.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { g as getFocusableChildren } from './p-BVXiQdHq.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { b as breakpoint } from './p-CJ80BZ06.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.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 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 [slot=megadropdown-overview-link]{text-decoration:none;border-radius:0;padding-block:13px 12px;margin-block-end:16px;display:flex;align-items:center;min-height:56px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset}.megadropdown [slot=megadropdown-overview-link]::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown [slot=megadropdown-overview-link].active,.megadropdown [slot=megadropdown-overview-link][aria-current=page],.megadropdown [slot=megadropdown-overview-link][aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover{background-color:#504f4b;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover::before{background-color:#504f4b}@media screen and (max-width: 1023.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:12px 11px;min-height:unset}}@media screen and (max-width: 599.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:10px 9px}}.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 H {
     constructor() {
@@ -41,7 +41,9 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     }
     get megadropdownTrigger() {
         const hostId = this.host.getAttribute('id');
-        return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`) : null;
+        return hostId
+            ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
+            : null;
     }
     connectedCallback() {
         window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
@@ -145,6 +147,11 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     getFocusableElements() {
         const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
         const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        // Check for an overview link
+        const overviewLink = this.host.querySelector('a[slot="megadropdown-overview-link"]');
+        if (overviewLink) {
+            focusableChildren.unshift(overviewLink);
+        }
         this.firstFocusableEl = focusableChildren[0];
         this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
     }
@@ -222,7 +229,7 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        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" }))))));
+        return (h(Host, { key: '341ea7fd69a095bc0f18b0f73c3ac5247784dd33', version: version }, h("div", { key: '078435c707ec6b2e0d51f8adad5502729513af63', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'ad92234d06bccbc60a2e1a6cc63634535646c4f7', class: "megadropdown" }, h("slot", { key: 'f9779e130c7709912c12d30b554ff8f478840628', name: "megadropdown-title" }), h("slot", { key: 'e079e0381a0ce7e3ab7efd974cdf36e6938a378d', name: "megadropdown-overview-link" }), h("div", { key: '508d4e9bddb727e960aa6f2dc15515f1718aa2b9', class: "megadropdown-content" }, h("slot", { key: '442bb0b169824ed66ae5e7da9acd6bb7d759b6f5' })), h("div", { key: 'cc278c0b5680019270206fbde4ce7a83341a029a', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '9c42fa29e89f60af62ab5d04d01e1764b36ebec4', name: "back-button" })), h("div", { key: '62bcc5bcc348cb45289ded98273804ab547471ef', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '2cdf1d72f62a162bfb1596507063315430953096', name: "close-button" }))))));
     }
     get host() { return this; }
     static get style() { return postMegadropdownCss; }

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

@@ -1,4 +1,4 @@
-import { P as PostMenuItem$1, d as defineCustomElement$1 } from './p-BIslNfKd.js';
+import { P as PostMenuItem$1, d as defineCustomElement$1 } from './p-CEP4VRNR.js';
 
 const PostMenuItem = PostMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './p-D7N0KPNm.js';
+import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './p-DZ_1ljyU.js';
 
 const PostMenuTrigger = PostMenuTrigger$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { P as PostMenu$1, d as defineCustomElement$1 } from './p-BRBszIzq.js';
+import { P as PostMenu$1, d as defineCustomElement$1 } from './p-BB-k_ccz.js';
 
 const PostMenu = PostMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/react/post-popover-trigger.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostPopoverTrigger extends Components.PostPopoverTrigger, HTMLElement {}
+export const PostPopoverTrigger: {
+    prototype: PostPopoverTrigger;
+    new (): PostPopoverTrigger;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,133 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-DeqIcjvO.js';
+import { i as isFocusable } from './p-HygIVKXC.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+
+const postPopoverTriggerCss = ":host{cursor:pointer}";
+
+const PostPopoverTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostPopoverTrigger extends H {
+    syncAriaExpanded(newValue) {
+        this.ariaExpanded = newValue;
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', String(newValue));
+        }
+    }
+    /**
+     * Watch for changes to the `for` property to validate its type and ensure it is a string.
+     * @param forValue - The new value of the `for` property.
+     */
+    validateFor() {
+        checkRequiredAndType(this, 'for', 'string');
+    }
+    // Gets the associated popover element to the trigger based on 'for'
+    get popover() {
+        const ref = document.getElementById(this.for);
+        return ref?.localName === 'post-popover' ? ref : null;
+    }
+    setupTrigger() {
+        this.trigger = this.host.querySelector('*');
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', this.ariaExpanded.toString());
+            // check if its not focusable and add aria role and tabindex
+            if (!isFocusable(this.trigger)) {
+                this.trigger.setAttribute('tabindex', '0');
+                this.trigger.setAttribute('role', 'button');
+            }
+            // Set aria attributes
+            this.trigger.setAttribute('aria-haspopup', 'true');
+            this.trigger.setAttribute('aria-controls', this.for);
+            this.trigger.addEventListener('click', this.boundHandleToggle);
+            this.trigger.addEventListener('keydown', this.boundHandleKeyDown);
+        }
+        else {
+            console.error('No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.');
+        }
+    }
+    handleToggle() {
+        const popoverEl = this.popover;
+        if (popoverEl) {
+            popoverEl.toggle(this.trigger);
+            this.focusTrigger();
+        }
+        else {
+            console.warn(`No post-popover found with ID: ${this.for}`);
+        }
+    }
+    focusTrigger() {
+        // Restores focus to the trigger
+        if (!this.popoverOpen && this.trigger) {
+            this.trigger.focus();
+        }
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated popover is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
+        /**
+         * Holds the state of the popover toggle
+         */
+        this.popoverOpen = false;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleToggle();
+            }
+        };
+        this.boundHandleToggle = this.handleToggle.bind(this);
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+        this.boundHandlePostToggle = (event) => {
+            this.popoverOpen = event.detail.isOpen;
+            this.focusTrigger();
+        };
+    }
+    componentDidLoad() {
+        this.validateFor();
+        this.setupTrigger();
+        this.popover?.addEventListener('postToggle', this.boundHandlePostToggle);
+    }
+    disconnectedCallback() {
+        this.trigger.removeEventListener('click', this.boundHandleToggle);
+        this.trigger.removeEventListener('keydown', this.boundHandleKeyDown);
+        this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
+    }
+    render() {
+        return (h(Host, { key: 'd7467aa400f407d76df06e8bbc84210e5f016073', "data-version": version }, h("slot", { key: '618f3d14fb89b3ad3c101a58f8519c337d9f1721', onSlotchange: () => this.setupTrigger() })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "popoverOpen": ["syncAriaExpanded"],
+        "for": ["validateFor"]
+    }; }
+    static get style() { return postPopoverTriggerCss; }
+}, [1, "post-popover-trigger", {
+        "for": [513],
+        "ariaExpanded": [32],
+        "popoverOpen": [32]
+    }, undefined, {
+        "popoverOpen": ["syncAriaExpanded"],
+        "for": ["validateFor"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-popover-trigger"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-popover-trigger":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostPopoverTrigger$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostPopoverTrigger = PostPopoverTrigger$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostPopoverTrigger, defineCustomElement };

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

@@ -1,71 +1,19 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-BVVgwjV0.js';
-import { v as version } from './p-DgSkXfqW.js';
-import { I as IS_BROWSER } from './p-CJ80BZ06.js';
+import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-ClNlUIJm.js';
+import { v as version } from './p-DeqIcjvO.js';
+import { a as getDeepFocusableChildren } from './p-BVXiQdHq.js';
 import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
-import { d as defineCustomElement$4 } from './p-BnCGzVcR.js';
-import { d as defineCustomElement$3 } from './p-BcpJoB81.js';
-
-function getAttributeObserver(attribute, handler) {
-    /**
-     * Handle attribute changes and childList changes from the observer
-     * @param {MutationRecord[]} mutationList
-     */
-    function observerHandler(mutationList) {
-        mutationList.forEach(mutation => {
-            if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
-                handler(mutation.target);
-            }
-            if (mutation.type === 'childList') {
-                mutation.addedNodes.forEach(node => {
-                    if (node.nodeType === Node.ELEMENT_NODE &&
-                        node.hasAttribute(attribute)) {
-                        handler(node);
-                    }
-                });
-            }
-        });
-    }
-    // Initialize a mutation observer for patching accessibility features
-    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
-}
+import './p-CJ80BZ06.js';
+import { d as defineCustomElement$4 } from './p-oXx3C5kr.js';
+import { d as defineCustomElement$3 } from './p-vCHPi-c4.js';
 
 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.
- */
-let popoverInstances = 0;
-const popoverTargetAttribute = 'data-popover-target';
-const globalToggleHandler = (e) => {
-    let currentElement = e.target;
-    // Traverse up the DOM tree to find if any parent has the popover target attribute
-    while (currentElement && !currentElement.getAttribute(popoverTargetAttribute)) {
-        if (currentElement === document.body || !currentElement.parentElement)
-            break;
-        currentElement = currentElement.parentElement;
-    }
-    const popoverTarget = currentElement?.getAttribute(popoverTargetAttribute);
-    if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
-        return;
-    const popover = document.getElementById(popoverTarget);
-    popover?.toggle(currentElement);
-};
 const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H {
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateCloseButtonCaption() {
-        checkRequiredAndType(this, 'closeButtonCaption', 'string');
-    }
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        // Initialize a mutation observer for patching accessibility features
-        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.
@@ -77,76 +25,46 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
          */
         // eslint-disable-next-line @stencil-community/ban-default-true
         this.arrow = true;
-        this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
-    connectedCallback() {
-        // Set up accessibility patcher and event listeners for the first component
-        if (popoverInstances === 0) {
-            window.addEventListener('pointerup', globalToggleHandler);
-            window.addEventListener('keydown', globalToggleHandler);
-            this.triggerObserver?.observe(document.body, {
-                subtree: true,
-                childList: true,
-                attributeFilter: [popoverTargetAttribute],
-            });
-        }
-        popoverInstances++;
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateCloseButtonCaption() {
+        checkRequiredAndType(this, 'closeButtonCaption', 'string');
     }
     componentDidLoad() {
         this.validatePlacement();
         this.validateCloseButtonCaption();
-        this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
-    }
-    disconnectedCallback() {
-        popoverInstances--;
-        // Remove listeners and observer after the last popover has been destructed
-        if (popoverInstances === 0) {
-            window.removeEventListener('click', globalToggleHandler);
-            window.removeEventListener('keydown', globalToggleHandler);
-            this.triggerObserver?.disconnect();
-        }
-        this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
-        this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
     }
     /**
      * Programmatically display the popover
-     * @param target An element with [data-popover-target="id"] where the popover should be shown
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      */
     async show(target) {
         this.popoverRef.show(target);
-        console.log(this.popoverRef);
-        target.setAttribute('aria-expanded', 'true');
     }
     /**
      * Programmatically hide this popover
      */
     async hide() {
         this.popoverRef.hide();
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     /**
      * Toggle popover display
-     * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
-        const newState = await this.popoverRef.toggle(target, force);
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-        target.setAttribute('aria-expanded', `${newState}`);
-    }
-    get triggers() {
-        return document.querySelectorAll(`[${popoverTargetAttribute}="${this.host.id}"]`);
-    }
-    beforeToggleHandler() {
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    patchAccessibilityFeatures(trigger) {
-        const force = trigger.hasAttribute(popoverTargetAttribute);
-        trigger.setAttribute('aria-expanded', force ? 'false' : null);
+        await this.popoverRef.toggle(target, force);
+        const focusableChildren = getDeepFocusableChildren(this.host);
+        // find first focusable element
+        const firstFocusable = focusableChildren[0];
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
     }
     render() {
-        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)))));
+        return (h(Host, { key: '82f8d89013b8ddb37fb924c9608ba394c669f35a', "data-version": version }, h("post-popovercontainer", { key: 'cf276e5faf65ae27bc0d8e51779de5470a1e49a3', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9ab455b2ee7d7f082dc6fc588d519d7a362cad8c', class: "popover-container" }, h("div", { key: 'b3b468da2ff7ccb2a47d69a1841488359763e927', class: "popover-content" }, h("slot", { key: 'a32099475baaca02ce41350e36d363614a6f83ef' })), h("post-closebutton", { key: 'eac806bd1e6652cacce58fb7e915d66e82c24980', onClick: () => this.hide() }, this.closeButtonCaption)))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './p-BVVgwjV0.js';
+import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './p-ClNlUIJm.js';
 
 const PostPopovercontainer = PostPopovercontainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/react/post-rating.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$2 } from './p-BcpJoB81.js';
+import { d as defineCustomElement$2 } from './p-vCHPi-c4.js';
 
 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%)}";
 
@@ -28,10 +28,6 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         this.postInput = createEvent(this, "postInput");
         this.postChange = createEvent(this, "postChange");
         this.hasChanged = false;
-        /**
-         * Defines a hidden label for the component.
-         */
-        this.label = 'Rating';
         /**
          * Defines the total amount of stars rendered in the component.
          */
@@ -101,13 +97,13 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         }
     }
     render() {
-        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: {
+        return (h(Host, { key: '9089061145d80c4791a56580d107d6fab88f1d6d', "data-version": version }, h("div", { key: '81f0ba286541aecf6ddfd2e2fa113526a02abdcd', 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} / ${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),
                 'hover': i === this.hoveredIndex,
                 'after-active': i > this.hoveredIndex && i < this.currentRating,
-            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "2062", class: "stroke" }), h("post-icon", { name: "2574", class: "fill" })))))));
+            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "favoritestar", class: "stroke" }), h("post-icon", { name: "favoritestar-solid", class: "fill" })))))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { n as nanoid } from './p-BLchVpF6.js';
@@ -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: '387d9db0111153ca4a7da1a9ad600daeafa3b7a1', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '62126f05530776ca45b151b00834fa0c68c5b26e' })));
+        return (h(Host, { key: '5d9cfad4e62285e8b64a5f597e3d38d451dd493f', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '679874586fb55510af17838ef73403c8b7a33ddc' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { n as nanoid } from './p-BLchVpF6.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.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: '97ae92b05f495a63bd5ec5f57eb196fdf6772ca8', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '8b36e0849fcd65662a27bc62ac29cec0d8db4f41' })));
+        return (h(Host, { key: '5d6c56e41ac61b10dd2560482bc5e4edab394742', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: 'ec7be772a0d3f883388742460c825dce0f0e44e8' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/post-tabs.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 import { f as fadeOut, a as fadeIn } from './p-SbIC4aZX.js';
 import './p-CJ80BZ06.js';
 
@@ -167,7 +167,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
         nextTab.focus();
     }
     render() {
-        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() }))));
+        return (h(Host, { key: '3e352bc059be99242f612a49bdea71fd065d67b0', "data-version": version }, h("div", { key: '34d608d7af834fd4fb3106ac3fb90100a9b73138', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '102e75b53d3e485a185d391f84755142d8690de6', class: "tabs", role: "tablist" }, h("slot", { key: '03624f2944dfd37d3eb3403772d430a6e053e676', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '8c7c956b831ef19fb093122ca35c14b5a015dad3', class: "tab-content", part: "content" }, h("slot", { key: '8fad35a2a6d26814f513c422b4fcbe98aae7bd22', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return postTabsCss; }

package/dist/components/react/post-togglebutton.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DgSkXfqW.js';
+import { v as version } from './p-DeqIcjvO.js';
 
 const postTogglebuttonCss = ":host{cursor:pointer;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}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
 
@@ -29,7 +29,7 @@ const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutt
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: '190c53c4bbada662698addcb288bcb50a8d179b3', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '544bf7d937386a6e65be75e249f3dcc080054d74' })));
+        return (h(Host, { key: 'f56832bfbfacc23923ac06d8455fffcdafa8a7ec', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '7adc9ed579b6badeb08c7599ceb95892d68f027f' })));
     }
     get host() { return this; }
     static get style() { return postTogglebuttonCss; }