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

package/dist/{cjs/breakpoints-CEkeixld.js → components/react/p-B8YiQ3mz.js}

@@ -1,7 +1,92 @@
-'use strict';
+import { a as IS_SERVER } from './p-FxUVQ4Tx.js';
 
-const IS_SERVER = typeof window === 'undefined';
-const IS_BROWSER = !IS_SERVER;
+const EMPTY_VALUES = [undefined, null, '', NaN];
+
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}
+
+function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
+        const value = component[prop];
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+function checkOneOf(component, prop, possibleValues) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    if (!possibleValues.includes(value)) {
+        console.error(message);
+    }
+}
+
+function checkPattern(component, prop, pattern) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        console.error(message);
+    }
+}
+
+function checkType(component, prop, type) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray) {
+            console.error(message);
+        }
+    }
+    else if (typeof value !== type) {
+        console.error(message);
+    }
+}
+
+function checkUrl(component, prop) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        console.error(message);
+        return;
+    }
+    try {
+        new URL(value, 'https://www.post.ch');
+    }
+    catch {
+        console.error(message);
+    }
+}
+
+function emptyOr(check) {
+    return (component, prop, ...extraArgs) => {
+        const value = component[prop];
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+const checkEmptyOrOneOf = emptyOr(checkOneOf);
+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);
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
@@ -177,6 +262,4 @@ class Breakpoint {
 }
 const breakpoint = new Breakpoint();
 
-exports.IS_BROWSER = IS_BROWSER;
-exports.breakpoint = breakpoint;
-exports.throttle = throttle;
+export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkRequiredAndUrl as f, breakpoint as g, checkRequiredAndPattern as h, checkEmptyOrPattern as i, throttle as t };

package/dist/components/react/{p-2U_BGLjc.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-CV7fm1rW.js';
-import { v as version } from './p-BXRsHuTS.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: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": version }, h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', 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-D4NSCxrX.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-BXRsHuTS.js';
-import { c as checkRequiredAndType } from './p-CV7fm1rW.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;
@@ -16,18 +15,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 +44,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 +103,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: '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-nSFSgY-P.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-mENtrn2l.js';
-import { v as version } from './p-BXRsHuTS.js';
-import { g as getFocusableChildren } from './p-BVXiQdHq.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.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: 'eef3d3cdf2553c2627ddf580a95c70f00c02d388', "data-version": version }, h("post-popovercontainer", { key: '27c3341bec9d4ee98b59f70e902913f03954c32c', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ef6c0ab8b6de380c23f6562a3d0ba34d9eaace98', part: "menu" }, h("slot", { key: 'edca1d3e9ab11d016ba18baf9f8d6aa65bb71958', name: "header" }), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })))));
+        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 {
@@ -205,7 +204,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],
@@ -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-Ccgu_WOx.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-BXRsHuTS.js';
-import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
-import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-2U_BGLjc.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 {