@swisspost/design-system-components 10.0.0-next.46 → 10.0.0-next.47

package/dist/collection/components/post-banner/post-banner.js

@@ -1,49 +1,45 @@
+var __decorate = (this && this.__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;
+};
 import { Host, h, } from "@stencil/core";
 import { version } from "../../../../package";
 import { fadeOut } from "../../animations/index";
-import { checkRequiredAndType, checkEmptyOrOneOf } from "../../utils/index";
+import { checkEmptyOrOneOf, EventFrom } from "../../utils/index";
 import { BANNER_TYPES } from "./banner-types";
-import { nanoid } from "nanoid";
 /**
  * @slot heading - Slot for placing custom content within the banner's heading.
  * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the banner.
+ * @slot close-button - Slot for placing a `post-closebutton` component to make the banner dismissible.
  * @slot default - Slot for placing the main content/message of the banner.
  */
 export class PostBanner {
     constructor() {
-        this.bannerId = `p${nanoid(6)}`;
-        this.onDismissButtonClick = () => this.dismiss();
-        /**
-         * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
-         */
-        this.dismissible = false;
+        this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
+        this.hasActions = false;
         /**
          * The type of the banner.
          */
         this.type = 'info';
     }
-    checkDismissible() {
-        if (this.dismissible) {
-            setTimeout(() => {
-                checkRequiredAndType(this, 'dismissLabel', 'string');
-            });
-        }
-    }
     validateType() {
         checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
     }
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, { childList: true });
+    }
     componentDidLoad() {
-        this.checkDismissible();
+        this.checkContent();
         this.validateType();
     }
-    componentWillRender() {
-        this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
-        this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
-        this.classes = `banner ${this.type ? 'banner-' + this.type : ''}`;
-        if (this.dismissible)
-            this.classes += ' banner-dismissible';
-        if (this.hasActions)
-            this.classes += ' banner-action';
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
     }
     /**
      * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
@@ -54,16 +50,14 @@ export class PostBanner {
         this.host.remove();
         this.postDismissed.emit();
     }
+    onCloseButtonClick() {
+        void this.dismiss();
+    }
+    checkContent() {
+        this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
+    }
     render() {
-        const defaultBannerContent = [
-            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: 'cea692aeb18e0c75d9616efc1cf804f3629f5bbf', name: "heading" }))),
-            h("slot", { key: `${this.bannerId}-message` }),
-        ];
-        const actionBannerContent = [
-            h("div", { key: `${this.bannerId}-content`, class: "banner-content" }, defaultBannerContent),
-            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: '5f48e2d579c573cce2e347b08951785e2a8a0c42', name: "actions" })),
-        ];
-        return (h(Host, { key: '27649f6a2f208748afd204c2cf4c72b7c19eb3a0', "data-version": version }, h("div", { key: 'dd8418a4d6358bd1f6493a57308ce93a2a945cd2', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '549e7ef13a1d69312c1266737a6c145dd5cf257a', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: 'b024d4254d6e9e52fcf3dca5bfe42c310565afce', class: "visually-hidden" }, this.dismissLabel))), this.hasActions ? actionBannerContent : defaultBannerContent)));
+        return (h(Host, { key: 'fc9507a57b443c485cf9496be4e04f66c04d7eaf', "data-version": version, role: "alert" }, h("slot", { key: '1f59c2d63144990f148a37046d70b2155280abd6', name: "close-button" }), h("slot", { key: '65d0e3c723cb474498d40d26f7f369b7d3abb41e', name: "heading" }), h("slot", { key: '03ff96159a3066a64a7a474d9e6a5450937f8c84' }), this.hasActions && (h("div", { key: '641ad34505cd5141133e5ef788f7e38ab0f977c8', class: "actions" }, h("slot", { key: '242f388c40d71f37a25f2af3fe3eb622a9ab2796', name: "actions" })))));
     }
     static get is() { return "post-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -79,45 +73,6 @@ export class PostBanner {
     }
     static get properties() {
         return {
-            "dismissible": {
-                "type": "boolean",
-                "attribute": "dismissible",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, a close button (\u00D7) is displayed and the banner can be dismissed by the user."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "dismissLabel": {
-                "type": "string",
-                "attribute": "dismiss-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The label to use for the close button of a dismissible banner."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "type": {
                 "type": "string",
                 "attribute": "type",
@@ -141,18 +96,14 @@ export class PostBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'info'"
             }
         };
     }
     static get states() {
         return {
-            "bannerId": {},
-            "classes": {},
-            "hasActions": {},
-            "hasHeading": {},
-            "onDismissButtonClick": {}
+            "hasActions": {}
         };
     }
     static get events() {
@@ -197,11 +148,20 @@ export class PostBanner {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "dismissible",
-                "methodName": "checkDismissible"
-            }, {
                 "propName": "type",
                 "methodName": "validateType"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "postClick",
+                "method": "onCloseButtonClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
+__decorate([
+    EventFrom('post-closebutton')
+], PostBanner.prototype, "onCloseButtonClick", null);

package/dist/collection/components/post-card-control/post-card-control.js

@@ -5,8 +5,8 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="banner banner-sm banner-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
- * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<post-banner type="warning" data-size="sm"><p>Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p></post-banner>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<post-banner data-size="sm"><p>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p></post-banner>
  */
 export class PostCardControl {
     /**
@@ -229,14 +229,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: 'ff23ac518f715fc7c2727dd7c2abccd0fdb486da', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '3519942dfeb694729e4b6c7c7df4b68854ccde81', class: {
+        return (h(Host, { key: 'e0f328775bee8a8a05ca02a0d74c30bab97a55b1', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '21c4f081f2c4720dce65f0beed7127a7392c21bb', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
                 'is-valid': this.validity !== undefined && this.validity !== false,
                 'is-invalid': this.validity === false,
-            } }, h("input", { key: 'f47a58485c7d507565e29c832ca1c3d6b053bc17', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === false, onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: '65e8247d88c2cc6bb2e0be17e7d6fab3502fb364', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'df538a1f14b49fa7bd6907ef57d045c7303b6d77', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '1a79c6a2da57a5b8aef911dc2acd09e553b79489' })))));
+            } }, h("input", { key: '0850cf58736cd393e1aa34e7f4f44ccdfbde0f1a', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === false, onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: '73956c65cb4a83e0feb3d915c8b5f7561307336f', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '9b4104a21c0d960d9b3adbefdb38ba8e81ac1ab6', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '85469e7c5665c934c297a21870bc296a1ef95128' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -347,7 +347,7 @@ export class PostCardControl {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the `name` attribute of the control.\n<span className=\"mb-4 banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
+                    "text": "Defines the `name` attribute of the control.\n<post-banner data-size=\"sm\"><p>This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</p></post-banner>\n<post-banner data-size=\"sm\"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>"
                 },
                 "getter": false,
                 "setter": false,
@@ -366,7 +366,7 @@ export class PostCardControl {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the `value` attribute of the control. <span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
+                    "text": "Defines the `value` attribute of the control. <post-banner data-size=\"sm\"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>"
                 },
                 "getter": false,
                 "setter": false,
@@ -444,7 +444,7 @@ export class PostCardControl {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon `name` inside the card.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>"
+                    "text": "Defines the icon `name` inside the card.\n<post-banner data-size=\"sm\"><p>If not set the icon will not show up.</p></post-banner>"
                 },
                 "getter": false,
                 "setter": false,
@@ -481,7 +481,7 @@ export class PostCardControl {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<span className=\"banner banner-sm banner-info\">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>"
+                    "text": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<post-banner data-size=\"sm\"><p>If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</p></post-banner>"
                 },
                 "complexType": {
                     "original": "{ state: boolean; value: string }",

package/dist/collection/components/post-closebutton/post-closebutton.js

@@ -4,8 +4,16 @@ import { version } from "../../../../package";
  * @slot default - Slot for placing visually hidden label in the close button.
  */
 export class PostClosebutton {
+    componentDidLoad() {
+        this.checkHiddenLabel();
+    }
+    checkHiddenLabel(slot = this.host.shadowRoot.querySelector('.visually-hidden slot')) {
+        if (slot.assignedNodes().length === 0) {
+            console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
+        }
+    }
     render() {
-        return (h(Host, { key: '7b5e179b42eefd1823b2b2ef7ee17c94bd9f0ddd', "data-version": version }, h("button", { key: '471e68d1ddcfe741f5450d002b2daa86cec0f986', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '928fa7460988cffa269a29506e68e056f84bcef8', "aria-hidden": "true", name: "closex" }), h("span", { key: 'c1501f4a8b7d8d95be7d02576b10143b9e6b0654', class: "visually-hidden" }, h("slot", { key: 'a9f1ab8db57486d420db0981090ad2ba5183c289' })))));
+        return (h(Host, { key: '639599ff890ccf96684035e80449a99dcad7de85', "data-version": version }, h("button", { key: '0cc95e3c46a6d91ec3d31fff498b4c0b784de272', class: "btn btn-icon-close", type: "button", onClick: () => this.postClick.emit() }, h("post-icon", { key: 'e30566a7734bb6a64a03f8983da015e7e7ec8c90', "aria-hidden": "true", name: "closex" }), h("span", { key: '549ef38de408b6af78605f5e2f6f5c9aa291c04b', class: "visually-hidden" }, h("slot", { key: '0325e4b54cfa8cfea9ddf243c1c25730d9a4b88f', onSlotchange: () => this.checkHiddenLabel() })))));
     }
     static get is() { return "post-closebutton"; }
     static get encapsulation() { return "shadow"; }
@@ -19,5 +27,23 @@ export class PostClosebutton {
             "$": ["post-closebutton.css"]
         };
     }
+    static get events() {
+        return [{
+                "method": "postClick",
+                "name": "postClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the close button is clicked.\nIt has no payload."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js

@@ -149,7 +149,7 @@ export class PostPopovercontainer {
                 Object.assign(this.arrowRef.style, {
                     left: arrowX ? `${arrowX}px` : '',
                     top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: '-7px',
+                    [staticSide]: '-5px',
                 });
             }
         }

package/dist/components/{p-Dg6sSnLv.js → p-336Lbkey.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { g as getRoot } from './p-CBFgkSgY.js';

package/dist/components/{p-DQE6fqIb.js → p-BM8mtEfS.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
 

package/dist/components/{p-DNnYEFO6.js → p-BSvy4uym.js}

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

package/dist/components/{p-Cd5RHPSU.js → p-C0H2ohSv.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-8U5GFtQP.js';

package/dist/components/{p-Cpy7mEQb.js → p-Cxrx7SXz.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-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.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)}}";
 

package/dist/components/{p-jLh9Y0sO.js → p-DEi5TIMq.js}

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

package/dist/components/{p-D1Ldeko3.js → p-DP5pj8mq.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-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 
 const PLACEMENT_TYPES = [
     'top',
@@ -2853,7 +2853,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
                 Object.assign(this.arrowRef.style, {
                     left: arrowX ? `${arrowX}px` : '',
                     top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: '-7px',
+                    [staticSide]: '-5px',
                 });
             }
         }

package/dist/components/{p-9rHPmDn6.js → p-DVGX_JCp.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
 import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';

package/dist/components/p-Z01QMrov.js

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

package/dist/components/{p-C8YtuR96.js → p-i0-mizzM.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.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 1rem;gap:.5rem;font-size:1rem;color:#050400;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);outline-offset:0;padding-block:.75rem}post-menu-item button:has(post-icon:last-child),post-menu-item a:has(post-icon:last-child){padding-inline-end:.75rem}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem}}post-menu-item button>post-icon:last-child,post-menu-item a>post-icon:last-child{margin-inline-start:.5rem}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:-2px !important;border-radius:4px}post-menu-item button::after,post-menu-item a::after{content:\"\";display:block;position:absolute;inset-block-end:0;inset-inline:0;height:3px;background-color:rgba(0,0,0,0);transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-menu-item button:hover,post-menu-item a:hover{color:#504f4b}post-menu-item button:hover::after,post-menu-item a:hover::after{background-color:currentColor}";
 

package/dist/components/{p-C1i4rB_c.js → p-pHxypsHK.js}

@@ -1,6 +1,6 @@
 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-D1Ldeko3.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-DP5pj8mq.js';
+import { v as version } from './p-Z01QMrov.js';
 import { g as getFocusableChildren } from './p-C35MCWIp.js';
 import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';

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

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

package/dist/components/post-accordion.js

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

package/dist/components/post-avatar.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 import { c as checkRequiredAndType, e as checkEmptyOrType, f as checkEmptyOrPattern } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 

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

@@ -1,11 +1,36 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { s as slideDown, a as slideUp } from './p-BuLMaH5t.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-Z01QMrov.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$2 } from './p-Cpy7mEQb.js';
+import { d as defineCustomElement$2 } from './p-Cxrx7SXz.js';
 
-const postBackToTopCss = ":host{--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}";
+// 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);
+}
+
+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}";
 
 const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends H {
     constructor() {
@@ -26,10 +51,10 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
-            slideDown(this.host, this.translateY);
+            slideDownAndFadeIn(this.host, this.translateY);
         }
         else {
-            slideUp(this.host, this.translateY);
+            slideUpAndFadeOut(this.host, this.translateY);
         }
     }
     scrollToTop() {
@@ -60,7 +85,7 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
                 parseFloat(positionTop.replace('px', '')) -
                 parseFloat(elevationHeight.replace('px', ''))) + 'px';
         if (this.belowFold) {
-            slideDown(this.host, this.translateY);
+            slideDownAndFadeIn(this.host, this.translateY);
         }
         if (!this.belowFold) {
             this.host.style.transform = `translateY(${this.translateY})`;
@@ -79,7 +104,7 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '7edc6db9d849cf9ce0308a2ac5b2c2f9bc4e47a9', "data-version": version }, h("button", { key: '610e81756ce3dd927f55d48beb8cd829b66fc247', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'bb1f3cc462de7680361f4cfd04abb1816aebd488', "aria-hidden": "true", name: "3026" }), h("span", { key: '4fbd84d78c425140adea5833450cef60af967f5a', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: '820244e9c039304895d78887000ed986707bf3b1', "data-version": version }, h("button", { key: 'c1d38883fbf31c50b2b00e08e6b22cbc6be37adb', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '3cc57c355a12bf500f368e906d147be10f9014e7', "aria-hidden": "true", name: "3026" }), h("span", { key: '134e5c579e2d99d64c25ce21ab538e51520a6dd6', class: "visually-hidden" }, this.label))));
     }
     get host() { return this; }
     static get watchers() { return {