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

package/dist/components/post-stepper.js

@@ -0,0 +1,134 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkRequiredAndType, f as checkRequiredAndPattern } from './index2.js';
+import './breakpoints.js';
+
+const postStepperCss = "ol{margin-block:0;padding-inline-start:0;list-style:none;counter-reset:step-index;display:grid;position:relative;overflow:hidden;grid-template-columns:20px;grid-auto-columns:minmax(0, 1fr);padding-inline-end:20px}@media screen and (max-width: 779.98px){ol{display:flex;padding-inline-end:0}}.active-step{font-size:var(--post-device-font-size-7);font-weight:var(--post-device-font-weight-bold);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media screen and (min-width: 780px){.active-step{display:none}}";
+
+const PostStepper$1 = /*@__PURE__*/ proxyCustomElement(class PostStepper extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Defines the currently active step
+         */
+        this.currentIndex = -1;
+    }
+    validateCurrentLabel() {
+        checkRequiredAndType(this, 'currentLabel', 'string');
+    }
+    validateCompletedLabel() {
+        checkRequiredAndType(this, 'completedLabel', 'string');
+    }
+    validateActiveStepLabel() {
+        checkRequiredAndPattern(this, 'activeStepLabel', /#index\b/);
+        this.updateActiveStepLabel();
+    }
+    validateCurrentIndex() {
+        checkRequiredAndType(this, 'currentIndex', 'number');
+        this.updateSteps();
+    }
+    componentDidLoad() {
+        this.validateCompletedLabel();
+        this.validateCurrentLabel();
+        this.validateActiveStepLabel();
+        // Wait for slotchange
+        setTimeout(() => {
+            this.validateCurrentIndex();
+        });
+    }
+    updateActiveStepLabel() {
+        if (this.activeStepLabel) {
+            const labelTemplate = this.activeStepLabel;
+            this.mobileActiveStepLabel = labelTemplate.replace(/#index/g, `${this.currentIndex + 1}`);
+            this.updateMobileActiveStepVisibility();
+        }
+    }
+    updateSteps() {
+        this.stepItems = this.host.querySelectorAll('post-stepper-item');
+        if (!this.stepItems || this.stepItems.length < 3) {
+            console.error('The post-stepper component should have at least three steps.');
+            return;
+        }
+        this.updateActiveStepLabel();
+        this.stepItems.forEach((el, i) => {
+            if (this.currentIndex === i) {
+                this.mobileActiveStepName = el.querySelector('.label').innerHTML;
+            }
+            // Update "post-stepper-item" classes to show correct status
+            el.classList.toggle('stepper-item-completed', this.currentIndex > i);
+            el.classList.toggle('stepper-item-current', this.currentIndex === i);
+            el.classList.toggle('stepper-item-inactive', this.currentIndex < i);
+            // Update accessibility label depending on status (Completed/Current/-)
+            const hiddenLabel = el.querySelector('.step-hidden-label');
+            if (hiddenLabel) {
+                let labelText = '';
+                if (this.currentIndex > i) {
+                    labelText = `${this.completedLabel}:`;
+                }
+                else if (this.currentIndex === i) {
+                    labelText = `${this.currentLabel}:`;
+                }
+                hiddenLabel.textContent = labelText;
+            }
+            // Update accessibility aria attributes
+            if (this.currentIndex === i) {
+                el.setAttribute('aria-current', 'step');
+                el.setAttribute('aria-live', 'polite');
+            }
+            else {
+                el.removeAttribute('aria-current');
+                el.removeAttribute('aria-live');
+            }
+        });
+        this.updateMobileActiveStepVisibility();
+    }
+    updateMobileActiveStepVisibility() {
+        if (this.currentIndex >= this.stepItems.length || this.currentIndex < 0) {
+            this.mobileActiveStepLabel = '';
+            this.mobileActiveStepName = '';
+        }
+    }
+    render() {
+        return (h(Host, { key: '874d4d6a510ede937c7f9e5dd1f28f8981f33626', "data-version": version }, h("ol", { key: '55fb25ded4111eb1c87ea11a10fbd65346843132' }, h("slot", { key: '0c9f9d00573ea568c0039312507989a22868f432', onSlotchange: () => this.updateSteps() })), h("div", { key: '22e5b14c5285b96ba0a3a99c9cb90e02550298c6', class: "active-step", "aria-hidden": "true" }, this.mobileActiveStepLabel, h("span", { key: '1ba5204f3c01dad6730d0d300168a13316e3d3ac', innerHTML: this.mobileActiveStepName }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "currentLabel": ["validateCurrentLabel"],
+        "completedLabel": ["validateCompletedLabel"],
+        "activeStepLabel": ["validateActiveStepLabel"],
+        "currentIndex": ["validateCurrentIndex"]
+    }; }
+    static get style() { return postStepperCss; }
+}, [1, "post-stepper", {
+        "currentLabel": [513, "current-label"],
+        "completedLabel": [513, "completed-label"],
+        "activeStepLabel": [513, "active-step-label"],
+        "currentIndex": [2, "current-index"],
+        "mobileActiveStepLabel": [32],
+        "mobileActiveStepName": [32]
+    }, undefined, {
+        "currentLabel": ["validateCurrentLabel"],
+        "completedLabel": ["validateCompletedLabel"],
+        "activeStepLabel": ["validateActiveStepLabel"],
+        "currentIndex": ["validateCurrentIndex"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostStepper$1);
+            }
+            break;
+    } });
+}
+
+const PostStepper = PostStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostStepper, defineCustomElement };

package/dist/components/post-tab-header.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: '5d9cfad4e62285e8b64a5f597e3d38d451dd493f', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '679874586fb55510af17838ef73403c8b7a33ddc' })));
+        return (h(Host, { key: 'b350fb9392e74af452470d72f97678aa1ac2d430', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '49722204330b3b2d760b8718b349b1417fd29a71' })));
     }
     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: '5d6c56e41ac61b10dd2560482bc5e4edab394742', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: 'ec7be772a0d3f883388742460c825dce0f0e44e8' })));
+        return (h(Host, { key: 'f00d9caf4324fc2d750d7844ca6ddc8198aef0c0', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '58f2eaf91aee7897039a151e117d9b9fc948162a' })));
     }
     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: '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() }))));
+        return (h(Host, { key: 'f3534a3b05c379ce1cb311d4c5ea950c8eba87d0', "data-version": version }, h("div", { key: 'd812db6b2a895504fce8ac9dae2663821b9dd759', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9abd0ee00204a085ceaebce5e11fcff527273605', class: "tabs", role: "tablist" }, h("slot", { key: '89f09f443ca740dc9af66fedb1367cdb4885074d', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4a94a19fd67814482934bd31bb219470bea8dec6', class: "tab-content", part: "content" }, h("slot", { key: '44db446865edacb1b1c0fc20ef391adfa189e8cb', 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: 'f56832bfbfacc23923ac06d8455fffcdafa8a7ec', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '7adc9ed579b6badeb08c7599ceb95892d68f027f' })));
+        return (h(Host, { key: 'ecd5772b09be8842e5c6fc3bf34932b27d90c533', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '3bb32b33155e71ced9375afb5a26d1d4e63a83c8' })));
     }
     get host() { return this; }
     static get style() { return postTogglebuttonCss; }

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

@@ -173,7 +173,7 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: 'e545db2bc489025c51e51f680f4139b508ef09f8', "data-version": version }, h("slot", { key: '90abc548bccbc51d233001c98d289fd60599c482', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '48246523aabaf1851e05d0273346d3e26e7ad866', "data-version": version }, h("slot", { key: '0442aeadddd59642c317b6f10c93008adf3e6585', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tooltip.js

@@ -4,7 +4,7 @@ import { d as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
 import { a as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
 
-const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:280px;min-height:32px;word-wrap:break-word;white-space:normal}";
+const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}";
 
 const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement {
     constructor() {
@@ -71,7 +71,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '0755eeba6f7be3cd0d94138369355df9767ca541', "data-version": version }, h("post-popovercontainer", { key: '1e1d71a4878e60f9e20b34b5f12588e09a8c7716', 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: '25a69d406a91cb0ba8d4c5fadee44d937c84a266' }))));
+        return (h(Host, { key: 'ebc25bd8a9615a13be82d58f246b5a5d42113cf2', "data-version": version }, h("post-popovercontainer", { key: 'dba7a96c1f354752475a6f1d9116b0097dddf320', 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: '537370b88912d323a72ee074767b4cf2b4bc1b57' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/index.js

@@ -1,4 +1,4 @@
-const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
+const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-stepper,post-stepper-item,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
 
 const NAMESPACE = 'post-components';
 const BUILD = /* post-components */ { hydratedSelectorName: "data-hydrated", lazyLoad: false, slotRelocation: true, updatable: true};

package/dist/components/react/p-BhxZzOEC.js

@@ -0,0 +1,3 @@
+const version = "10.0.0-next.55";
+
+export { version as v };

package/dist/components/react/{p-BB-k_ccz.js → p-CSAMO7iJ.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-ClNlUIJm.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-DVGEExot.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { g as getFocusableChildren } from './p-BVXiQdHq.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
@@ -76,10 +76,12 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             this.toggleMenu.emit(this.isVisible);
             if (this.isVisible) {
                 this.lastFocusedElement = this.root?.activeElement;
-                const menuItems = this.getSlottedItems();
-                if (menuItems.length > 0) {
-                    menuItems[0].focus();
-                }
+                requestAnimationFrame(() => {
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                });
             }
             else if (this.lastFocusedElement) {
                 this.lastFocusedElement.focus();
@@ -193,7 +195,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '092a180331d50cfe701ad440569e0e6bd4bcd0c8', "data-version": version }, h("post-popovercontainer", { key: '96f33df1a47d2fb1f6f862a7d7f97def5fd8b642', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '5d23d1059dd1cf68ac817acc8227129267a3c5a4', part: "menu" }, h("slot", { key: '020fbf8912393d85cd5a6fd9f65fdf264f2ba6f6', name: "header" }), h("slot", { key: '07cd9cb978ec85dd7fbbaed527520b97484e2030' })))));
+        return (h(Host, { key: 'ab27eeef6ddcca57eb65ca9f7471809d9f78d7d1', "data-version": version }, h("post-popovercontainer", { key: 'c8053a6cbae6d22751e81107099180b95829b8c4', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'c60d336220b331cd7f3d5b896788f3fdcee090cf', part: "menu" }, h("slot", { key: '629b1f5dbe4074df6459bdfe64e1c0f836314e85', name: "header" }), h("slot", { key: 'c918bba494424db857e7e99fd80d24224bdeb9ed' })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -203,7 +205,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     static get style() { return postMenuCss; }
 }, [1, "post-menu", {
         "placement": [1],
-        "label": [1],
+        "label": [513],
         "isVisible": [32],
         "toggle": [64],
         "show": [64],

package/dist/components/react/{p-CV7fm1rW.js → p-CYkf_7Y5.js}

@@ -82,7 +82,8 @@ const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 const checkEmptyOrUrl = emptyOr(checkUrl);
 const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndPattern = requiredAnd(checkPattern);
 const checkRequiredAndType = requiredAnd(checkType);
 const checkRequiredAndUrl = requiredAnd(checkUrl);
 
-export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkEmptyOrPattern as f, checkRequiredAndUrl as g };
+export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkRequiredAndPattern as f, checkEmptyOrPattern as g, checkRequiredAndUrl as h };

package/dist/components/react/{p-CJocYMQ7.js → p-Ccrl2AQn.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
-import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
+import { e as checkEmptyOrType } from './p-CYkf_7Y5.js';
 
 function isMotionReduced() {
     return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;

package/dist/components/react/{p-D_8kJXLe.js → p-CewRvBtg.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
-import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
+import { b as checkRequiredAndOneOf } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
 
@@ -102,7 +102,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: 'ab800b580f0dd591a9413305afa282ff7e697759', "data-version": version }, h("div", { key: '258ba1dc99811545c0dd9796ef521a05a0c87dda', class: "accordion" }, h("slot", { key: '2ad7482962316723f5c8ff334bad7cc33b6fa953', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '470d8a7646796044df8f9cf1ebfc113e5c8db960', "data-version": version }, h("div", { key: '360ad1fe885dbb3c61a5c026ea253e7fba81ef9e', class: "accordion" }, h("slot", { key: '9e14d7906cba560a848986787159f56c961c78db', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -110,7 +110,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     }; }
     static get style() { return postAccordionCss; }
 }, [1, "post-accordion", {
-        "headingLevel": [2, "heading-level"],
+        "headingLevel": [514, "heading-level"],
         "multiple": [4],
         "toggle": [64],
         "expandAll": [64],

package/dist/components/react/{p-DZ_1ljyU.js → p-Cwiv86_f.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
-import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { c as checkRequiredAndType } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
 
@@ -80,7 +80,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: 'fc962802089652073c19cc35a511e48b0cab43b7', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3a8b40c0a88c44092b56ca4aa1c74f880bebb20' })));
+        return (h(Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-CEP4VRNR.js → p-D2waO0Zc.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BhxZzOEC.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 .75rem .5rem 1rem;gap:.75rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1rem;height:1rem;margin-block:.25rem}@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.5rem;height:1.5rem;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: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}";
 
@@ -9,7 +9,7 @@ const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'd37c4eed483b46dedcccbc835017ff2415dbd22e', "data-version": version }, h("slot", { key: 'e13d1f35e7883a0aee4d08ceb39caeb97fb960ec' })));
+        return (h(Host, { key: '9d6015291b82728739de4263a62a59ad4a99c94d', "data-version": version }, h("slot", { key: '51f5ff356cddffc806639cc343437500f898065e' })));
     }
     static get style() { return postMenuItemCss; }
 }, [4, "post-menu-item"]);

package/dist/components/react/{p-vCHPi-c4.js → p-DBPOV12C.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
-import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './p-CV7fm1rW.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './p-CYkf_7Y5.js';
+import { v as version } from './p-BhxZzOEC.js';
 
 const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 
@@ -116,7 +116,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends H {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": version }, h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', style: this.getStyles() })));
+        return (h(Host, { key: '7ce1f627f621201c0f4d6e90ee3d8d6d3c32798a', "data-version": version }, h("span", { key: '987ecd266b8bd68bdbb06cdb500a746b913e79b1', style: this.getStyles() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-ClNlUIJm.js → p-DVGEExot.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
-import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './p-CV7fm1rW.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './p-CYkf_7Y5.js';
+import { v as version } from './p-BhxZzOEC.js';
 
 const PLACEMENT_TYPES = [
     'top',
@@ -2773,6 +2773,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
          * Whether or not the popovercontainer should close when user clicks outside of it
          */
         this.manualClose = false;
+        this.currentAnimation = null;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -2814,8 +2815,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.toggleTimeoutId)
             return;
         this.eventTarget = target;
-        if (this.toggleTimeoutId)
-            return;
         this.calculatePosition();
         this.host.showPopover();
     }
@@ -2826,17 +2825,19 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
-            const animation = popIn(content);
-            if (animation?.playState === 'running') {
+            // Only run animation and emit related events if animation is defined
+            if (this.animation === null) {
+                // No animation case
                 this.postBeforeToggle.emit({ willOpen: true });
                 this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-            }
-            animation?.finished.then(() => {
                 this.postToggle.emit({ isOpen: true });
                 this.postShow.emit({ first: this.hasOpenedOnce });
                 if (this.hasOpenedOnce)
                     this.hasOpenedOnce = false;
-            });
+            }
+            else {
+                this.runOpenAnimation(content);
+            }
         }
         if (this.safeSpace) {
             window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
@@ -2852,17 +2853,50 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.safeSpace) {
             window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
+        // Cancel any running animation
+        if (this.animation !== null && this.currentAnimation) {
+            this.currentAnimation.cancel();
+            this.currentAnimation = null;
+        }
+        this.postBeforeToggle.emit({ willOpen: false });
         this.postToggle.emit({ isOpen: false });
         this.postHide.emit();
     }
+    /**
+     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     */
+    async runOpenAnimation(element) {
+        let animation;
+        try {
+            animation = popIn(element);
+            this.currentAnimation = animation;
+            if (animation.playState === 'running') {
+                this.postBeforeToggle.emit({ willOpen: true });
+                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            }
+            await animation.finished;
+            this.postToggle.emit({ isOpen: true });
+            this.postShow.emit({ first: this.hasOpenedOnce });
+            this.hasOpenedOnce = true;
+        }
+        catch (err) {
+            console.warn('Animation failed or was interrupted:', err);
+            // Reset all states to closing
+            this.postBeforeToggle.emit({ willOpen: false });
+            this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            this.postToggle.emit({ isOpen: false });
+        }
+        finally {
+            if (this.currentAnimation === animation) {
+                this.currentAnimation = null;
+            }
+        }
+    }
     /**
      * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
-            if (this.eventTarget && this.eventTarget instanceof H) {
-                this.eventTarget.focus();
-            }
             this.eventTarget = null;
             this.host.hidePopover();
             this.postHide.emit();
@@ -3028,9 +3062,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: 'cdb25a25fbd5e411e380175a8d3789cec83e2755', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'e99bcc4d5123b335b4b8be7044a80b2913ab6fce', class: "popover-content" }, this.arrow && (h("span", { key: '3c228829cc7e5bd83d7f1759ef163407ebcd10c5', class: "arrow", ref: el => {
+        return (h(Host, { key: '9ec775608a6bfab69c50e9cefb1a42235deaa451', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'b659d1ce9cf9d3b661e3712c689cf1ffb0816f6e', class: "popover-content" }, this.arrow && (h("span", { key: '504e007d07d6b38018d93f5dca5a074b881cd50b', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '6a213deed5ccfec47d4dee903c7544d30a3f5748' }))));
+            } })), h("slot", { key: '207062f4582b4aad7b570a7453711fd61654d5e3' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-ClCCjdRt.js → p-Djvj8fd2.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
-import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { a as checkEmptyOrUrl } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$1 } from './p-DBPOV12C.js';
 
 const postBreadcrumbItemCss = ":host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{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}.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}";
 

package/dist/components/react/{p-DC1SzgZS.js → p-LtiDhYis.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
-import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { c as checkRequiredAndType } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
@@ -16,18 +16,19 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.observer = new MutationObserver(() => this.setTrigger());
-    }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     validateAriaAttributes() {
         checkRequiredAndType(this, 'for', 'string');
     }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.observer = new MutationObserver(() => this.setTrigger());
+        this.handlePostToggle = this.handlePostToggle.bind(this);
+    }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
      */
@@ -44,7 +45,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     }
     disconnectedCallback() {
         this.observer.disconnect();
-        this.root.removeEventListener('postToggle', this.handlePostToggle);
+        this.root?.removeEventListener('postToggle', this.handlePostToggle);
     }
     /**
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
@@ -103,7 +104,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'd0851c032e622f4a182e1321331e84eaa0440245', "data-version": version }, h("slot", { key: 'd495c42f409de0f9230c01031ecddab69cead1b7' })));
+        return (h(Host, { key: '1cd00cfdb29b9ce191b8eb1fe6a91ddab412d006', "data-version": version }, h("slot", { key: 'b0625b4f2074852609d4a3dd700c04e01fa34d0a' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-oXx3C5kr.js → p-XrZzCOKT.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
-import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { d as checkEmptyOrOneOf } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$1 } from './p-DBPOV12C.js';
 
 const BUTTON_TYPES = ['button', 'submit', 'reset'];
 

package/dist/components/react/{p-RFewkSE5.js → p-v3pOrMNQ.js}

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DeqIcjvO.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
-import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import { d as checkEmptyOrOneOf } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
 import { n as nanoid } from './p-BLchVpF6.js';
-import { d as defineCustomElement$3 } from './p-CJocYMQ7.js';
-import { d as defineCustomElement$2 } from './p-DC1SzgZS.js';
-import { d as defineCustomElement$1 } from './p-vCHPi-c4.js';
+import { d as defineCustomElement$3 } from './p-Ccrl2AQn.js';
+import { d as defineCustomElement$2 } from './p-LtiDhYis.js';
+import { d as defineCustomElement$1 } from './p-DBPOV12C.js';
 
 const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-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;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start-width:var(--post-device-border-width-default);border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-button{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}";
 

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

@@ -1,4 +1,4 @@
-import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-RFewkSE5.js';
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-v3pOrMNQ.js';
 
 const PostAccordionItem = PostAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { P as PostAccordion$1, d as defineCustomElement$1 } from './p-D_8kJXLe.js';
+import { P as PostAccordion$1, d as defineCustomElement$1 } from './p-CewRvBtg.js';
 
 const PostAccordion = PostAccordion$1;
 const defineCustomElement = defineCustomElement$1;