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

package/dist/components/react/{p-DVGEExot.js → p-QNPIvxLq.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-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 } from './p-B8YiQ3mz.js';
+import { v as version } from './p-DZ5m2Ttg.js';
 
 const PLACEMENT_TYPES = [
     'top',
@@ -2739,7 +2739,7 @@ function popIn(el) {
     });
 }
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{--arrow-size: 0.5825rem;position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-bottom-right-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-bottom-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-top-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-top-right-radius:2px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}";
 
 const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopovercontainer extends H {
     constructor() {
@@ -2769,10 +2769,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
          * Whether or not to display a little pointer arrow
          */
         this.arrow = false;
-        /**
-         * Whether or not the popovercontainer should close when user clicks outside of it
-         */
-        this.manualClose = false;
         this.currentAnimation = null;
     }
     validatePlacement() {
@@ -2818,10 +2814,35 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.calculatePosition();
         this.host.showPopover();
     }
+    /**
+     * Programmatically hide the popovercontainer
+     */
+    async hide() {
+        if (!this.toggleTimeoutId) {
+            this.eventTarget = null;
+            this.host.hidePopover();
+            this.postHide.emit();
+        }
+    }
+    /**
+     * Toggle popovercontainer display
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.eventTarget = target;
+        // Prevent instant double toggle
+        if (!this.toggleTimeoutId) {
+            this.calculatePosition();
+            this.host.togglePopover(force);
+            this.toggleTimeoutId = null;
+        }
+        return this.host.matches(':where(:popover-open, .popover-open)');
+    }
     /**
      * Handles the popover opening process and emits related events.
      */
-    async open() {
+    open() {
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
@@ -2846,7 +2867,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     /**
      * Handles the popover closing process and emits related events.
      */
-    async close() {
+    close() {
         if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
         }
@@ -2892,31 +2913,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
             }
         }
     }
-    /**
-     * Programmatically hide the popovercontainer
-     */
-    async hide() {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = null;
-            this.host.hidePopover();
-            this.postHide.emit();
-        }
-    }
-    /**
-     * Toggle popovercontainer display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
-     */
-    async toggle(target, force) {
-        this.eventTarget = target;
-        // Prevent instant double toggle
-        if (!this.toggleTimeoutId) {
-            this.calculatePosition();
-            this.host.togglePopover(force);
-            this.toggleTimeoutId = null;
-        }
-        return this.host.matches(':where(:popover-open, .popover-open)');
-    }
     /**
      * Start or stop auto updates based on popovercontainer events.
      * Popovercontainers can be closed or opened with other methods than class members,
@@ -2950,6 +2946,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     async calculatePosition() {
         const { x, y, middlewareData, placement } = await this.computeMainPosition();
         const currentPlacement = placement.split('-')[0];
+        this.dynamicPlacement = currentPlacement;
         // Position popover
         this.host.style.left = `${x}px`;
         this.host.style.top = `${y}px`;
@@ -2957,11 +2954,20 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.arrow && middlewareData.arrow) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
+            const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+            // Calculate dynamically the half side which provides the static side offset
+            const arrowSizeValue = getComputedStyle(this.arrowRef)
+                .getPropertyValue('--arrow-size')
+                .trim();
+            const arrowSizePx = arrowSizeValue.endsWith('rem')
+                ? Number.parseFloat(arrowSizeValue) * rootFontSize
+                : Number.parseFloat(arrowSizeValue);
+            const halfSide = -0.5 * arrowSizePx;
             if (staticSide) {
                 Object.assign(this.arrowRef.style, {
                     left: arrowX ? `${arrowX}px` : '',
                     top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: '-5px',
+                    [staticSide]: `${halfSide}px`,
                 });
             }
         }
@@ -3062,9 +3068,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        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 => {
+        return (h(Host, { key: '0aaf70cb284e7227149f2e500aa7c72cab69d90a', "data-version": version, popover: "auto" }, h("div", { key: '9762887bdddca93acc6dfda715f2f41f4f6c98d6', class: "popover-content" }, this.arrow && (h("span", { key: 'e77f16be0b3b0cdb02886ea928aa6986d3f477e3', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '207062f4582b4aad7b570a7453711fd61654d5e3' }))));
+            } })), h("slot", { key: 'e8737e5acec3a20d258d462a7d82278d303ba353' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -3078,11 +3084,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         "edgeGap": [2, "edge-gap"],
         "animation": [1],
         "arrow": [4],
-        "manualClose": [4, "manual-close"],
         "safeSpace": [513, "safe-space"],
+        "dynamicPlacement": [32],
         "show": [64],
-        "open": [64],
-        "close": [64],
         "hide": [64],
         "toggle": [64]
     }, undefined, {

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

@@ -1,12 +1,11 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.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-DBPOV12C.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { d as checkEmptyOrOneOf } from './p-B8YiQ3mz.js';
+import { d as defineCustomElement$1 } from './p-BOLlAY91.js';
 
 const BUTTON_TYPES = ['button', 'submit', 'reset'];
 
-const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);display:flex;align-items:center;justify-content:center}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
+const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);display:flex;align-items:center;justify-content:center}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn{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}post-closebutton .btn: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){post-closebutton .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-closebutton .btn: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){post-closebutton .btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
 
 const PostClosebutton = /*@__PURE__*/ proxyCustomElement(class PostClosebutton extends H {
     constructor() {
@@ -43,7 +42,7 @@ const PostClosebutton = /*@__PURE__*/ proxyCustomElement(class PostClosebutton e
         }
     }
     render() {
-        return (h(Host, { key: '9b5bb7e95c6cf3039119ce485e963ac672834bc3', "data-version": version }, h("button", { key: '084709a7c632a8c665905a667fa6498cae1972a6', class: "btn", type: this.buttonType }, h("post-icon", { key: 'e19209e0c8de59d3e187531e0185d8f2d5c85408', "aria-hidden": "true", name: "closex" }), h("span", { key: '233184a45391e5a9b89635345f2324a87f5e9558', class: "visually-hidden" }, h("slot", { key: 'c213ac1dbdd98d83a8b2dc1b74c85926404ad1c1' })))));
+        return (h(Host, { key: '6965a8cb5fb765b4fcec0439ceeafe19d34970c2', "data-version": version }, h("button", { key: '7e718f70b0a4ac79e9439784dac46bd1ffd60fd1', class: "btn", type: this.buttonType }, h("post-icon", { key: '70acda3fbe6c9420f0be708fde6b29a7d5337d13', "aria-hidden": "true", name: "closex" }), h("span", { key: '899b3814c0898b521e4166e1cd951af628558e78', class: "visually-hidden" }, h("slot", { key: 'b13d0e95fd567c86e93e5185389909c7c0e7107d' })))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -0,0 +1,113 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
+import { d as checkEmptyOrOneOf } from './p-B8YiQ3mz.js';
+import { E as EventFrom } from './p-rEfV4v4a.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+import { d as defineCustomElement$3 } from './p-DRfa3MOV.js';
+import { d as defineCustomElement$2 } from './p-BYCGzO-t.js';
+import { d as defineCustomElement$1 } from './p-BOLlAY91.js';
+
+const postAccordionItemCss = ":host{display:block;border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover){border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover){border-block-end-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-block:var(--post-device-spacing-padding-19);padding-inline:var(--post-device-spacing-padding-5);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);cursor:pointer;outline:none !important}@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{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)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:\"\";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);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)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:\"\";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);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)::before{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:var(--post-device-spacing-padding-19);padding-block-end:var(--post-device-spacing-padding-19)}.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}}post-collapsible{margin-block-end:calc(var(--post-device-border-width-default)*-1)}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:var(--post-device-spacing-padding-block-25);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}";
+
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
+        this.collapsed = false;
+    }
+    validateHeadingLevel() {
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
+    }
+    componentWillLoad() {
+        this.id = this.host.id || `p${nanoid(6)}`;
+    }
+    componentDidLoad() {
+        this.validateHeadingLevel();
+    }
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
+    onCollapseToggle(event) {
+        this.collapsed = !event.detail;
+    }
+    /**
+     * Triggers the collapse programmatically.
+     */
+    async toggle(force) {
+        return this.collapsible.toggle(force);
+    }
+    onSlotLogoChange() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    componentWillRender() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    render() {
+        const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
+        const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
+        return (h(Host, { key: '03e6974f6d2f02e0d9240c84516f6538a2a96c9a', id: this.id, "data-version": version }, h("post-collapsible-trigger", { key: 'de3fe01f5fdc4394d6ba0163313850a60b0134ec', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'abc8ccd196030b90f800ffca0075f0a99a70229d', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '422fb7f22228706ca0d07f07241ec72fab6387b7', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, h("span", { key: '1b2bec5bf36707656ac92f65f99d2e1c5f1d44c3', class: {
+                'logo-container': true,
+                'has-image': !!this.slottedLogo,
+            } }, h("slot", { key: '717d1393ab1277a0f141c7a978585d288ab9359b', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '6c7f506f051b96f07991cd4c56c884527e736eb5', name: "header" }), h("post-icon", { key: 'e77b71473bcf619b1083dfea8b87d219489f774e', name: "chevronup" })))), h("post-collapsible", { key: '020481b62323ea8719cd8289c6b402611a83944b', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '99bdc90c6a557958d1ecb73860b9f6c904165496', class: "accordion-body", part: "post-accordion-body" }, h("slot", { key: '0a10be7f2b7fb61614fec92a5306372ada0dcf62' })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "headingLevel": ["validateHeadingLevel"]
+    }; }
+    static get style() { return postAccordionItemCss; }
+}, [1, "post-accordion-item", {
+        "collapsed": [1028],
+        "headingLevel": [2, "heading-level"],
+        "id": [32],
+        "slottedLogo": [32],
+        "toggle": [64]
+    }, [[2, "postToggle", "onCollapseToggle"]], {
+        "headingLevel": ["validateHeadingLevel"]
+    }]);
+__decorate([
+    EventFrom('post-accordion-item')
+], PostAccordionItem.prototype, "onCollapseToggle", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostAccordionItem);
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { PostAccordionItem as P, defineCustomElement as d };

package/dist/components/react/{p-CzIKqBrS.js → p-rEfV4v4a.js}

@@ -58,7 +58,7 @@ function EventFrom(tag, option) {
             // Create hidden storage for original method
             Object.defineProperty(target, privateKey, {
                 writable: true,
-                configurable: true
+                configurable: true,
             });
             // Replace property with getter/setter
             Object.defineProperty(target, propertyKey, {
@@ -82,7 +82,7 @@ function EventFrom(tag, option) {
                     }
                 },
                 configurable: true,
-                enumerable: true
+                enumerable: true,
             });
         }
     };

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

@@ -1,4 +1,4 @@
-import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-v3pOrMNQ.js';
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-c6yNOQwn.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-CewRvBtg.js';
+import { P as PostAccordion$1, d as defineCustomElement$1 } from './p-NCAcc7ZZ.js';
 
 const PostAccordion = PostAccordion$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BhxZzOEC.js';
-import { c as checkRequiredAndType, e as checkEmptyOrType, g as checkEmptyOrPattern } from './p-CYkf_7Y5.js';
-import './p-CJ80BZ06.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { c as checkRequiredAndType, e as checkEmptyOrType, i as checkEmptyOrPattern } from './p-B8YiQ3mz.js';
 
 // https://docs.gravatar.com/api/avatars/images/
 const GRAVATAR_DEFAULT = '404';
@@ -166,7 +165,7 @@ const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
             .join('')
             .trim();
         const fullname = names.join(' ');
-        return (h(Host, { key: '9e596623d1949c62b1f110e311b839d244b249ef', "data-version": version }, h("span", { key: '6722e4096cb0d2f8b5d171f0d84fef98f74e1cd7', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '95e8809133eb0de4382e9dc521eda877a6be5a8b', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: 'cb2ed3eab02f28369911997a94617efaeaa5c00a', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '5565b06795c4651537b20e9abd33492d7cb8a9d1', class: "initials" }, initials, h("span", { key: '58ac3ee3a664a13ff82fc201e04e1896e409fbf1' }, this.description ?? fullname)))));
+        return (h(Host, { key: '620b361e23a70143903abd7bf10bcd804f959042', "data-version": version }, h("span", { key: 'cc3752d89187f0c08dedf2952676de1aaaa59a8a', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: 'dbba7fc0522b177f6ad467f0e22dad9065582ce7', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '375eeeab749e09bc21d215aa80cf45309a15620e', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '620d25537ef0f606933e9c7deb915a87fbc4b95c', class: "initials" }, initials, h("span", { key: '03dc6aacddc2af35c114fc6815550e0ec461937d' }, this.description ?? fullname)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/post-back-to-top.js

@@ -1,34 +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 { d as defineCustomElement$2 } from './p-DBPOV12C.js';
-
-// Define common animation options
-const easing = 'ease';
-const defaultDuration = 500;
-const fill = 'forwards';
-function createSlideFadeAnimation(el, keyframes, duration = defaultDuration) {
-    return el.animate(keyframes, {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-function slideUpAndFadeOut(el, translateY = '-100%', duration = defaultDuration) {
-    const keyframes = [
-        { transform: 'translateY(0)', opacity: '1' },
-        { transform: `translateY(${translateY})`, opacity: '0' },
-    ];
-    return createSlideFadeAnimation(el, keyframes, duration);
-}
-function slideDownAndFadeIn(el, translateY = '-100%', duration = defaultDuration) {
-    const keyframes = [
-        { transform: `translateY(${translateY})`, opacity: '0' },
-        { transform: 'translateY(0)', opacity: '1' },
-    ];
-    return createSlideFadeAnimation(el, keyframes, duration);
-}
+import { f as fadeSlide } from './p-BVCjnh6Q.js';
+import { v as version } from './p-DZ5m2Ttg.js';
+import { c as checkRequiredAndType } from './p-B8YiQ3mz.js';
+import { d as defineCustomElement$2 } from './p-BOLlAY91.js';
 
 const postBackToTopCss = ":host{opacity:0;--post-floating-button-position-top:var(--post-device-position-4);--post-back-to-top-position-top:calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation:var(--post-device-elevation-300);position:fixed;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{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;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{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 .back-to-top: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){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top: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){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
@@ -45,16 +19,16 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    validateTextBackToTop() {
+        checkRequiredAndType(this, 'textBackToTop', 'string');
     }
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
-            slideDownAndFadeIn(this.host, this.translateY);
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
         else {
-            slideUpAndFadeOut(this.host, this.translateY);
+            fadeSlide(this.host, 'out', { translate: this.translateY, fill: 'forwards' });
         }
     }
     scrollToTop() {
@@ -81,11 +55,11 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
         const elevationHeight = this.getSecondPixelValue(elevationParts);
         // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
         this.translateY =
-            String((-1 * 100) / 100 -
+            (-1 * 100) / 100 -
                 parseFloat(positionTop.replace('px', '')) -
-                parseFloat(elevationHeight.replace('px', ''))) + 'px';
+                parseFloat(elevationHeight.replace('px', ''));
         if (this.belowFold) {
-            slideDownAndFadeIn(this.host, this.translateY);
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
         if (!this.belowFold) {
             this.host.style.transform = `translateY(${this.translateY})`;
@@ -98,25 +72,25 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
         this.animateButton();
-        this.validateLabel();
+        this.validateTextBackToTop();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '51abef7d1f650da1476689c46d853f49669da856', "data-version": version }, h("button", { key: '9de175f7962448fa3d658e4a24b01a857925a5b7', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '2913ad9930bccf5f1e72ea611ed3c57a0e4e1ca8', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '44b3f9bf5a16c883282a73bf5cfae77619079c0d', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: 'a6a5afe41d76c9b2b703f4a78e63849a1437680f', "data-version": version }, h("button", { key: 'ad10b46cf4d07d1efffae6feef7431ba8a11c59e', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'e95c5710939aa968df42f3acec2d56b2eaaa238e', "aria-hidden": "true", name: "arrowup" }), h("span", { key: 'f854524e0b76f71ef1edfed5a13d57985ac98ea5', class: "visually-hidden" }, this.textBackToTop))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "label": ["validateLabel"],
+        "textBackToTop": ["validateTextBackToTop"],
         "belowFold": ["watchBelowFold"]
     }; }
     static get style() { return postBackToTopCss; }
 }, [1, "post-back-to-top", {
-        "label": [513],
+        "textBackToTop": [513, "text-back-to-top"],
         "belowFold": [32]
     }, undefined, {
-        "label": ["validateLabel"],
+        "textBackToTop": ["validateTextBackToTop"],
         "belowFold": ["watchBelowFold"]
     }]);
 function defineCustomElement$1() {