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

package/dist/components/react/{p-DBPOV12C.js → p-BOLlAY91.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-CYkf_7Y5.js';
-import { v as version } from './p-BhxZzOEC.js';
+import { I as IS_BROWSER } from './p-FxUVQ4Tx.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './p-B8YiQ3mz.js';
+import { v as version } from './p-DZ5m2Ttg.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)}}";
 
@@ -67,9 +67,11 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends H {
         const baseHref = IS_BROWSER
             ? document.querySelector('base[href]')?.getAttribute('href') || ''
             : '';
-        const metaIconBase = IS_BROWSER
-            ? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
-            : '';
+        let metaIconBase = '';
+        if (IS_BROWSER) {
+            const metaTag = document.querySelector('meta[name="design-system-settings"]');
+            metaIconBase = metaTag?.getAttribute('data-post-icon-base') || '';
+        }
         // Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
         const buildUrlWithBase = (relativeUrl) => {
             const normalizedHref = normalizeUrl(baseHref);
@@ -116,7 +118,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends H {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '7ce1f627f621201c0f4d6e90ee3d8d6d3c32798a', "data-version": version }, h("span", { key: '987ecd266b8bd68bdbb06cdb500a746b913e79b1', style: this.getStyles() })));
+        return (h(Host, { key: '6469b748f2792c383593dacd1d9f1f17daf9cde0', "data-version": version }, h("span", { key: '9f4d9766dc97a07a2562dbc3bb0931de29fe9757', style: this.getStyles() })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -0,0 +1,36 @@
+import { r as resolveEasing } from './p-CoDiS_Ik.js';
+
+/**
+ * Used by
+ * 1. PostHeader (burger menu)
+ * 2. PostMegadropdown
+ * 3. BackToTopButton
+ */
+const defaultOptions = {
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+    translate: -100,
+};
+function animateFadeSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, {
+        duration,
+        easing: resolveEasing(easing),
+        fill,
+    });
+}
+function fadeSlide(el, direction, options) {
+    if (!el)
+        return;
+    const mergedOptions = options;
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { opacity: '0', transform: `translateY(${translate}px)` },
+        { opacity: '1', transform: 'translateY(0px)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateFadeSlide(el, keyframes, options);
+}
+
+export { fadeSlide as f };

package/dist/components/react/{p-CBFgkSgY.js → p-BVGcVycs.js}

@@ -1,4 +1,4 @@
-import { I as IS_BROWSER } from './p-CJ80BZ06.js';
+import { I as IS_BROWSER } from './p-FxUVQ4Tx.js';
 
 /**
  * getRootNode() can only be used after the element has been attached to the document!

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

@@ -1,9 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.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';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { c as checkRequiredAndType } from './p-B8YiQ3mz.js';
+import { E as EventFrom } from './p-rEfV4v4a.js';
+import { g as getRoot } from './p-BVGcVycs.js';
 
 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;
@@ -104,7 +103,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '1cd00cfdb29b9ce191b8eb1fe6a91ddab412d006', "data-version": version }, h("slot", { key: 'b0625b4f2074852609d4a3dd700c04e01fa34d0a' })));
+        return (h(Host, { key: 'f5055d5970eb900d345957f306c9a373680f257a', "data-version": version }, h("slot", { key: 'cf63bdbca00602b9c4e2a81f28723bd274561045' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -0,0 +1,11 @@
+function debounce(callback, timeout = 200) {
+    let id;
+    return (...args) => {
+        if (id) {
+            clearTimeout(id);
+        }
+        id = setTimeout(callback, timeout, ...args);
+    };
+}
+
+export { debounce as d };

package/dist/components/react/{p-BVXiQdHq.js → p-CJ13r5fi.js}

@@ -27,32 +27,40 @@ function getFocusableChildren(element) {
     const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
     return Array.from(focusableChildren).filter(isVisible);
 }
-// Searches deeper accross shadowDom
-function getDeepFocusableChildren(element) {
-    const results = [];
-    function traverse(node) {
+// Searches deeper across shadow DOM
+function getDeepFocusableChildren(el, filter, visited = new Set()) {
+    if (visited.has(el))
+        return [];
+    visited.add(el);
+    let nodes = [];
+    // SLOT
+    if (el instanceof HTMLSlotElement) {
+        const assigned = el.assignedElements({ flatten: true });
+        nodes = assigned.length ? assigned : Array.from(el.children);
+    }
+    // SHADOW ROOT
+    else if (el instanceof HTMLElement && el.shadowRoot) {
+        nodes = Array.from(el.shadowRoot.children);
+    }
+    // NORMAL ELEMENT
+    else if (el instanceof Element) {
+        nodes = Array.from(el.children);
+    }
+    if (filter) {
+        nodes = nodes.filter(filter);
+    }
+    const focusableElements = [];
+    for (const node of nodes) {
         if (isElementFocusable(node)) {
-            results.push(node);
-        }
-        if (node instanceof HTMLElement && node.shadowRoot) {
-            traverse(node.shadowRoot);
-        }
-        for (const child of Array.from(node.children)) {
-            traverse(child);
-        }
-        if (node instanceof HTMLElement) {
-            for (const slot of Array.from(node.querySelectorAll('slot'))) {
-                for (const el of slot.assignedElements({ flatten: true })) {
-                    traverse(el);
-                }
-            }
+            focusableElements.push(node);
+            continue;
         }
+        focusableElements.push(...getDeepFocusableChildren(node, filter, visited));
     }
-    traverse(element);
-    return results;
+    return focusableElements;
 }
 function isVisible(el) {
-    const style = window.getComputedStyle(el.parentElement);
+    const style = window.getComputedStyle(el);
     return style.display !== 'none' && style.visibility !== 'hidden';
 }
 function isElementFocusable(node) {

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

@@ -1,13 +1,12 @@
 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-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-CYkf_7Y5.js';
-import './p-CJ80BZ06.js';
-import { E as EventFrom } from './p-CzIKqBrS.js';
-import { g as getRoot } from './p-CBFgkSgY.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-QNPIvxLq.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { g as getFocusableChildren } from './p-CJ13r5fi.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-B8YiQ3mz.js';
+import { E as EventFrom } from './p-rEfV4v4a.js';
+import { g as getRoot } from './p-BVGcVycs.js';
 
-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}}";
+const postMenuCss = ":host{display:block}:where([part=post-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;
@@ -58,35 +57,6 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
                 this.controlKeyDownHandler(e);
             }
         };
-        this.handlePostShown = (event) => {
-            // Only for the first open
-            if (event.detail.first) {
-                // Add "menu" and "menuitem" aria roles and aria-label
-                this.host.setAttribute('role', 'menu');
-                const menuItems = this.getSlottedItems();
-                for (const item of menuItems) {
-                    item.setAttribute('role', 'menuitem');
-                }
-                if (this.label)
-                    this.host.setAttribute('aria-label', this.label);
-            }
-        };
-        this.handlePostToggled = (event) => {
-            this.isVisible = event.detail.isOpen;
-            this.toggleMenu.emit(this.isVisible);
-            if (this.isVisible) {
-                this.lastFocusedElement = this.root?.activeElement;
-                requestAnimationFrame(() => {
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                });
-            }
-            else if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        };
         this.handleClick = (e) => {
             const target = e.target;
             if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
@@ -148,6 +118,35 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    handlePostShown(event) {
+        // Only for the first open
+        if (event.detail.first) {
+            // Add "menu" and "menuitem" aria roles and aria-label
+            this.host.setAttribute('role', 'menu');
+            const menuItems = this.getSlottedItems();
+            for (const item of menuItems) {
+                item.setAttribute('role', 'menuitem');
+            }
+            if (this.label)
+                this.host.setAttribute('aria-label', this.label);
+        }
+    }
+    handlePostToggled(event) {
+        this.isVisible = event.detail.isOpen;
+        this.toggleMenu.emit(this.isVisible);
+        if (this.isVisible) {
+            this.lastFocusedElement = this.root?.activeElement;
+            requestAnimationFrame(() => {
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
+                    menuItems[0].focus();
+                }
+            });
+        }
+        else if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -195,7 +194,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        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' })))));
+        return (h(Host, { key: '08285b17608e5bc3133a3da6015a5a0d4de6ec29', "data-version": version }, h("post-popovercontainer", { key: '17e45869b5e76cdd9bd43ca77b2f0b3876462014', onPostShow: this.handlePostShown.bind(this), onPostToggle: this.handlePostToggled.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e2486aa099ffc8ac59885a0971ebb13649a49a35', part: "post-menu" }, h("slot", { key: '9f0e05f211fe18cf5beed8e1b33bde26d4974e24', name: "header" }), h("slot", { key: '971ac8ad433467a2ebe2429574cb10dbdadbcf25' })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -216,10 +215,10 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     }]);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostShown", void 0);
+], PostMenu.prototype, "handlePostShown", null);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggled", void 0);
+], PostMenu.prototype, "handlePostToggled", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -0,0 +1,24 @@
+const headerEase = {
+    x1: 0.8,
+    y1: 0.2,
+    x2: 0.8,
+    y2: 0.7,
+};
+const PRESET_MAP = {
+    'linear': 'linear',
+    'ease': 'ease',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out',
+    'headerEase': headerEase,
+};
+
+function resolveEasing(easing) {
+    const e = typeof easing === 'string' ? (PRESET_MAP[easing] ?? easing) : easing;
+    if (typeof e === 'string')
+        return e;
+    const { x1, y1, x2, y2 } = e;
+    return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+}
+
+export { resolveEasing as r };

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

@@ -0,0 +1,54 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-DZ5m2Ttg.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}";
+
+const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+         */
+        this.toggled = false;
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            // perform a click when enter or spaced are pressed to mimic the button behavior
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault(); // prevents the page from scrolling when space is pressed
+                this.host.click();
+            }
+        };
+    }
+    componentWillLoad() {
+        // add event listener to not override listener that might be set on the host
+        this.host.addEventListener('click', () => this.handleClick());
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+    render() {
+        return (h(Host, { key: 'a526ab3b0ae14c93bb4e1a8dc6d3ded4ff1bf014', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'e8a5bdd99d9270cfcf014306a8d7fe8a2b6b79ba' })));
+    }
+    get host() { return this; }
+    static get style() { return postTogglebuttonCss; }
+}, [1, "post-togglebutton", {
+        "toggled": [1028]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-togglebutton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-togglebutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTogglebutton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { PostTogglebutton as P, defineCustomElement as d };

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

@@ -0,0 +1,24 @@
+import { r as resolveEasing } from './p-CoDiS_Ik.js';
+
+const defaultOptions = {
+    duration: 200,
+    easing: 'linear',
+    fill: 'forwards',
+};
+function animateFade(el, keyframes, options = {}) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, {
+        duration,
+        easing: resolveEasing(easing),
+        fill,
+    });
+}
+function fade(el, direction, options = {}) {
+    if (!el)
+        return;
+    const baseKeyframes = [{ opacity: '0' }, { opacity: '1' }];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateFade(el, keyframes, options);
+}
+
+export { fade as f };

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

@@ -1,8 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.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-DBPOV12C.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { a as checkEmptyOrUrl } from './p-B8YiQ3mz.js';
+import { d as defineCustomElement$1 } from './p-BOLlAY91.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}}";
 
@@ -44,7 +43,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '9ccdcf67335a106fd70e1d756a941736827454c0', "data-version": version }, h("post-icon", { key: 'c2061015e34cc3c37d343abd872bd8bd3cc82615', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3e9659ac705d801699167864a06cde461bc84185', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'e86e3333db8b0636a9a9635a5f11960c7d839e3d' }))));
+        return (h(Host, { key: 'ea3421ed24d2db8fc8c647eeafd04032996a4ae5', "data-version": version }, h("post-icon", { key: 'f2278fc5c68bbf509a44e53ec7f789d396bd75f1', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '60d899795489fdbe9246fda24623289b5994af72', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: '7d87b12cba90f865ef02e1c66fd600703c00456e' }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,17 +1,17 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-BhxZzOEC.js';
-import { I as IS_BROWSER } from './p-CJ80BZ06.js';
-import { e as checkEmptyOrType } from './p-CYkf_7Y5.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { I as IS_BROWSER } from './p-FxUVQ4Tx.js';
+import { e as checkEmptyOrType } from './p-B8YiQ3mz.js';
 
 function isMotionReduced() {
-    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
 }
 
 const collapseDuration = 350;
 const collapseEasing = 'ease';
 const collapsedKeyframe = { height: '0', overflow: 'hidden' };
 const animationOptions = {
-    duration: collapseDuration,
+    duration: isMotionReduced() ? 0 : collapseDuration,
     easing: collapseEasing,
     fill: 'forwards',
 };
@@ -34,8 +34,6 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.__registerHost();
         this.__attachShadow();
         this.postToggle = createEvent(this, "postToggle");
-        this.isLoaded = false;
-        this.isOpen = true;
         /**
          * If `true`, the element is collapsed otherwise it is displayed.
          */
@@ -43,34 +41,36 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
     }
     collapsedChange() {
         checkEmptyOrType(this, 'collapsed', 'boolean');
-        void this.toggle(!this.collapsed);
+    }
+    get isExpanded() {
+        return !this.collapsed;
     }
     componentDidLoad() {
         this.collapsedChange();
-        this.isLoaded = true;
         this.updateTriggers();
     }
     /**
      * Triggers the collapse programmatically.
-     *
      * If there is a collapsing transition running already, it will be reversed.
+     * If no parameter is provided, the current state (this.isExpanded) will be toggled.
      */
-    async toggle(open = !this.isOpen) {
-        if (open === this.isOpen)
-            return open;
-        this.isOpen = open;
-        this.collapsed = !open;
-        if (this.isLoaded)
-            this.postToggle.emit(open);
-        const animation = open ? expand(this.host) : collapse(this.host);
-        if (!this.isLoaded || isMotionReduced())
-            animation.finish();
-        await animation.finished;
-        const isHostRendered = this.host.offsetParent;
-        if (isHostRendered)
+    async toggle(shouldExpand = !this.isExpanded) {
+        // if the parameter (shouldExpand) is set during the call (e.g. `document.querySelector('post-collapsible').toggle(true)`)
+        // and it matches the current state, the current state is returned and the function exits early
+        if (shouldExpand === this.isExpanded)
+            return this.isExpanded;
+        // applying the new state to this.collapsed will also indirectly update this.isExpanded,
+        // due to its implementation with the getter, which returns !this.collapsed
+        this.collapsed = !shouldExpand;
+        const isExpanded = this.isExpanded;
+        if (IS_BROWSER) {
+            const animation = isExpanded ? expand(this.host) : collapse(this.host);
+            await animation.finished;
             animation.commitStyles();
-        this.updateTriggers();
-        return open;
+            this.updateTriggers();
+            this.postToggle.emit(isExpanded);
+        }
+        return isExpanded;
     }
     /**
      * Update all post-collapsible-trigger elements referring to the collapsible
@@ -80,7 +80,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: '3a11f1a60c536544881def998bcdf81f6d248837', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '6ea66375cdffefd02c8293aa1542c4cbfce905a4' })));
+        return (h(Host, { key: '06400647373d6c66398e6f81561ab2c60b748af1', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '63653d2d89b80b03c7f139b1370eaf18fe839409' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,8 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.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';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { c as checkRequiredAndType } from './p-B8YiQ3mz.js';
+import { g as getRoot } from './p-BVGcVycs.js';
 
 const postMenuTriggerCss = ":host{display:inline-block}";
 
@@ -80,7 +79,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
+        return (h(Host, { key: '3ef7e372c9c655bf1da5d5a7d4bca6925a010f65', "data-version": version, "tab-index": "-1" }, h("slot", { key: '771db943ad5aa639c325f055ba6f9d763bf4256d' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

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

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

@@ -0,0 +1,49 @@
+/**
+ * Environment detection helper
+ *
+ * Goal: Distinguish between real browser execution and Stencil's server-side
+ * hydration context. During SSR/hydration Stencil provides a mocked `window`
+ * (Domino / JSDOM–like) so naive checks (e.g. `typeof window !== 'undefined'`)
+ * incorrectly classify the environment as a browser.
+ *
+ * Detection strategy:
+ * - Stencils hydrate context uses a hardcoded user agent string ('MockNavigator')
+ *   and origin ('http://mockdoc.stenciljs.com') for its mocked `window` object.
+ *   We can use this to identify the hydrate context.
+ * - Stencils unit test context also uses the same hardcoded user agent string,
+ *   but a differnet value for the origin.
+ *   That's why comparing the origin is aboslutely mandatory.
+ * - Since we test the hydrate app in the test context, the origin is getting
+ *   overwritten by the test setup, leading to a false positive in the
+ *   `isHydrateApp` detection.
+ *   To circumvent this, we use a global flag (`isHydrateAppTestEnv`),
+ *   that we set/reset during the server test, so we can correctly identify
+ *   the hydrate app in the test context.
+ *   As a drawback, we can't properly test if the hydrate app is detected as
+ *   expected, in a real world scenario (elsewhere than in our tests).
+ */
+const MOCKED_USERAGENT = 'MockNavigator';
+const MOCKED_ORIGIN = 'http://mockdoc.stenciljs.com';
+const isNodeEnv = typeof global !== 'undefined';
+const hasWindow = typeof window !== 'undefined';
+const isMockedUserAgent = hasWindow && window.navigator.userAgent === MOCKED_USERAGENT;
+const isMockedOrigin = hasWindow && window.location.origin === MOCKED_ORIGIN;
+/**
+ * This is the natural hydrate app environment
+ * Is `true` if the hydrate app runs on server
+ */
+const isHydrateAppEnv = isNodeEnv && isMockedUserAgent && isMockedOrigin;
+/**
+ * This is the test app server test env
+ * Is `true` if the server unit test runs (`false` if the browser unit test runs)
+ */
+const isTestAppServerTestEnv = isNodeEnv && isMockedUserAgent && global.IS_HYDRATEAPP_SERVERTEST;
+/**
+ * This is the final hydrate app flag
+ * if it`s `true`, IS_BROWSER equals `false` and IS_SERVER equals `true
+ */
+const isHydrateApp = isHydrateAppEnv || isTestAppServerTestEnv;
+const IS_BROWSER = hasWindow && !isHydrateApp;
+const IS_SERVER = !IS_BROWSER;
+
+export { IS_BROWSER as I, IS_SERVER as a };

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BhxZzOEC.js';
+import { v as version } from './p-DZ5m2Ttg.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: '9d6015291b82728739de4263a62a59ad4a99c94d', "data-version": version }, h("slot", { key: '51f5ff356cddffc806639cc343437500f898065e' })));
+        return (h(Host, { key: 'ae55d1dca73916188cb269cd7f4c808ee3302288', "data-version": version }, h("slot", { key: 'fabc1b7b4b99d7881bea64593114b6cd4fc606c4' })));
     }
     static get style() { return postMenuItemCss; }
 }, [4, "post-menu-item"]);

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

@@ -1,11 +1,10 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BhxZzOEC.js';
+import { v as version } from './p-DZ5m2Ttg.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
-import { b as checkRequiredAndOneOf } from './p-CYkf_7Y5.js';
-import './p-CJ80BZ06.js';
-import { E as EventFrom } from './p-CzIKqBrS.js';
+import { b as checkRequiredAndOneOf } from './p-B8YiQ3mz.js';
+import { E as EventFrom } from './p-rEfV4v4a.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)}";
+const postAccordionCss = ":host{display:block;border-block-start:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
 
 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;