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

package/dist/components/react/{p-BfLuYwf7.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-BXRsHuTS.js';
-import { I as IS_BROWSER } from './p-CJ80BZ06.js';
-import { e as checkEmptyOrType } from './p-CV7fm1rW.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-BUxAs8N5.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-BXRsHuTS.js';
-import { c as checkRequiredAndType } from './p-CV7fm1rW.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: 'fc962802089652073c19cc35a511e48b0cab43b7', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3a8b40c0a88c44092b56ca4aa1c74f880bebb20' })));
+        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-BK474oMI.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-BXRsHuTS.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: 'd37c4eed483b46dedcccbc835017ff2415dbd22e', "data-version": version }, h("slot", { key: 'e13d1f35e7883a0aee4d08ceb39caeb97fb960ec' })));
+        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-DVxZMuPW.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-BXRsHuTS.js';
+import { v as version } from './p-DZ5m2Ttg.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
-import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.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;
@@ -102,7 +101,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: 'ab800b580f0dd591a9413305afa282ff7e697759', "data-version": version }, h("div", { key: '258ba1dc99811545c0dd9796ef521a05a0c87dda', class: "accordion" }, h("slot", { key: '2ad7482962316723f5c8ff334bad7cc33b6fa953', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '470d8a7646796044df8f9cf1ebfc113e5c8db960', "data-version": version }, h("div", { key: '360ad1fe885dbb3c61a5c026ea253e7fba81ef9e', class: "accordion" }, h("slot", { key: '9e14d7906cba560a848986787159f56c961c78db', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -110,7 +109,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     }; }
     static get style() { return postAccordionCss; }
 }, [1, "post-accordion", {
-        "headingLevel": [2, "heading-level"],
+        "headingLevel": [514, "heading-level"],
         "multiple": [4],
         "toggle": [64],
         "expandAll": [64],

package/dist/components/react/{p-mENtrn2l.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-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 } 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: 'ec57bb478a7fe7d6449ef1ed4d91db4d0835ea4e', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '2969b3c6ef9441d06b9c913f47bb64e84006dbe4', class: "popover-content" }, this.arrow && (h("span", { key: '03b8addd0bee91d9358e9554f2d507b9a349e0db', 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: '2fb25dce5ea9e5f1044cde4839df61af34c8b667' }))));
+            } })), 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-D3CFjhAf.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-BXRsHuTS.js';
-import { d as checkEmptyOrOneOf } 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 { 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-Dj7qWba5.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-DVxZMuPW.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-BXRsHuTS.js';
-import { c as checkRequiredAndType, e as checkEmptyOrType, f as checkEmptyOrPattern } from './p-CV7fm1rW.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';
@@ -16,7 +15,7 @@ async function cryptify(key) {
 }
 const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
 
-const postAvatarCss = ":host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const postAvatarCss = ":host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
@@ -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 {