@swisspost/design-system-components 7.2.1 → 7.3.0

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

@@ -9,7 +9,6 @@ export class PostCollapsible {
     constructor() {
         this.isLoaded = false;
         this.isOpen = true;
-        this.id = undefined;
         this.collapsed = false;
     }
     validateCollapsed(newValue = this.collapsed) {
@@ -18,13 +17,11 @@ export class PostCollapsible {
     connectedCallback() {
         this.validateCollapsed();
     }
-    componentWillRender() {
-        this.id = this.host.id || `c${crypto.randomUUID()}`;
-    }
     componentDidLoad() {
         if (this.collapsed)
             void this.toggle(false);
         this.isLoaded = true;
+        this.updateTriggers();
     }
     /**
      * Triggers the collapse programmatically.
@@ -37,15 +34,22 @@ export class PostCollapsible {
         this.isOpen = !this.isOpen;
         if (this.isLoaded)
             this.postToggle.emit(this.isOpen);
-        const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
+        const animation = open ? expand(this.host) : collapse(this.host);
         if (!this.isLoaded || isMotionReduced())
             animation.finish();
         await animation.finished;
         animation.commitStyles();
         return this.isOpen;
     }
+    /**
+     * Update all post-collapsible-trigger elements referring to the collapsible
+     */
+    updateTriggers() {
+        const triggers = document.querySelectorAll(`post-collapsible-trigger[for=${this.host.id}]`);
+        triggers.forEach(trigger => trigger.update());
+    }
     render() {
-        return (h(Host, { key: 'a4c0bed771143ee6aa8683c75296ef1ecdc462dd', id: this.id, "data-version": version }, h("div", { key: 'f2e76d252d572b7054d99ff605ce6d9f3b86a395', class: "collapse", id: `${this.id}--collapse`, ref: el => (this.collapsible = el) }, h("slot", { key: '94c957e18aaa8a990d5edda77e63226fefe76cd9' }))));
+        return (h(Host, { key: 'c24a0524427d6ec5a3a57e12300a5af4cc047a71', "data-version": version }, h("slot", { key: '4d41b67a18ca43acfa0e9ef208c07fa7882baba2' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -81,11 +85,6 @@ export class PostCollapsible {
             }
         };
     }
-    static get states() {
-        return {
-            "id": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "postToggle",

package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js

@@ -0,0 +1,153 @@
+import { version } from "typescript";
+import { checkNonEmpty, checkType, debounce } from "../../utils/index";
+export class PostCollapsibleTrigger {
+    constructor() {
+        this.observer = new MutationObserver(() => this.setTrigger());
+        this.debouncedUpdate = debounce(() => {
+            var _a;
+            if (!this.trigger)
+                return;
+            // add the provided id to the aria-controls list
+            const ariaControls = this.trigger.getAttribute('aria-controls');
+            if (!(ariaControls === null || ariaControls === void 0 ? void 0 : ariaControls.includes(this.for))) {
+                const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+                this.trigger.setAttribute('aria-controls', newAriaControls);
+            }
+            // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
+            const isCollapsed = (_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.collapsed;
+            const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
+            this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+        });
+        this.for = undefined;
+    }
+    /**
+     * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
+     */
+    setAriaAttributes() {
+        checkNonEmpty(this.for, 'The post-collapsible-trigger "for" prop is required.');
+        checkType(this.for, 'string', 'The post-collapsible-trigger "for" prop should be a id.');
+        void this.update();
+    }
+    /**
+     * Initiate a mutation observer that updates the trigger whenever necessary
+     */
+    connectedCallback() {
+        this.observer.observe(this.host, { childList: true, subtree: true });
+    }
+    /**
+     * Add the "data-version" to the host element and set the trigger
+     */
+    componentDidLoad() {
+        this.host.setAttribute('data-version', version);
+        this.setTrigger();
+        if (!this.trigger)
+            console.warn('The post-collapsible-trigger must contain a button.');
+    }
+    /**
+     * Disconnect the mutation observer
+     */
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    /**
+     * Update the "aria-expanded" attribute on the trigger anytime the controlled post-collapsible is toggled
+     */
+    setAriaExpanded(e) {
+        if (!this.trigger || !e.target.isEqualNode(this.collapsible))
+            return;
+        this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+    }
+    /**
+     * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
+     */
+    async update() {
+        this.debouncedUpdate();
+    }
+    /**
+     * Toggle the post-collapsible controlled by the trigger
+     */
+    async toggleCollapsible() {
+        var _a;
+        await ((_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.toggle());
+    }
+    /**
+     * Retrieve the post-collapsible controlled by the trigger
+     */
+    get collapsible() {
+        const ref = document.getElementById(this.for);
+        if (ref && ref.localName === 'post-collapsible') {
+            return ref;
+        }
+        return null;
+    }
+    /**
+     * Find the button and add the proper event listener and ARIA attributes to it
+     */
+    setTrigger() {
+        const trigger = this.host.querySelector('button');
+        if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
+            return;
+        this.trigger = trigger;
+        this.trigger.addEventListener('click', () => this.toggleCollapsible());
+        this.setAriaAttributes();
+    }
+    static get is() { return "post-collapsible-trigger"; }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link the trigger to a post-collapsible with this id"
+                },
+                "attribute": "for",
+                "reflect": false
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "update": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update the \"aria-controls\" and \"aria-expanded\" attributes on the trigger button",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "setAriaAttributes"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "postToggle",
+                "method": "setAriaExpanded",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -81,7 +81,7 @@ export class PostIcon {
         })
             .filter(([_key, value]) => value !== null)
             .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: '95fa0f7a09d3430bb5d621e01b57188742920eb4', "data-version": version }, h("span", { key: 'c824e3705dc83665bb6f7649381654e6d1e07dfb', style: svgStyles })));
+        return (h(Host, { key: 'c046b74af0d3cc42dcddfbd4aa029ca07be26bf8', "data-version": version }, h("span", { key: 'c49c4d2de0222c665acf1db46f8a13db26f6a26e', style: svgStyles })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-popover/post-popover.css

@@ -28,4 +28,4 @@
  * THE SOFTWARE.
  *//*!
  * Copyright 2021 by Swiss Post, Information Technology
- */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px}@media(max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}
+ */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px}@media(max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}

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

@@ -88,7 +88,7 @@ export class PostPopover {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: '97db4a92db81f3a84ca272af8f79981cf181024d', "data-version": version }, h("post-popovercontainer", { key: '291247845dc11572a5722aa949c1dfa74e521edd', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '92137bf8c92633c8578c89c7b0c8252b0b59e2fa', class: "popover-container" }, h("div", { key: '06f79f59e90ca439b552380af0e151084adadf03', class: "popover-content" }, h("slot", { key: 'c37c742ac7cf24f9440ac3b862761fcd937f7658' })), h("button", { key: '0e6f316574720e0f901af56e0dbb99f86e36c5b4', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '77c41e8e8df74649ce9ca21740c77e78336905e6', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: '943dbb1a0a290d281ebe0f346ccd531f8acbbb5e', "data-version": version }, h("post-popovercontainer", { key: 'aa6bf3a2cc395ce612342b78bee23bcd1b68db5e', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ba6f039088615157ba47ebc448770fd9128efa0', class: "popover-container" }, h("div", { key: '0472f76d0cf51269029534c29f155e0f71d649fb', class: "popover-content" }, h("slot", { key: '1d722457c871c0aac9297b0517fe077c32e73794' })), h("button", { key: '430fa605ce81aad6b8709c22a31da62cdf6022e5', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '37169089662c8ef1edd8de6389c55f9eee4e1a9e', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}}.popover{box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}.arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}.arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}.arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}.arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}.arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}
+@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}: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-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
 import "@oddbird/popover-polyfill";
@@ -18,12 +18,10 @@ export class PostPopovercontainer {
         this.arrow = false;
     }
     componentDidLoad() {
-        this.popoverRef.setAttribute('popover', '');
-        this.popoverRef.addEventListener('beforetoggle', this.handleToggle.bind(this));
+        this.host.setAttribute('popover', '');
+        this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
-        if (this.popoverRef)
-            this.popoverRef.removeEventListener('beforetoggle', e => this.toggle(e.target));
         if (typeof this.clearAutoUpdate === 'function')
             this.clearAutoUpdate();
     }
@@ -35,7 +33,7 @@ export class PostPopovercontainer {
         if (!this.toggleTimeoutId) {
             this.eventTarget = target;
             this.calculatePosition();
-            this.popoverRef.showPopover();
+            this.host.showPopover();
         }
     }
     /**
@@ -44,7 +42,7 @@ export class PostPopovercontainer {
     async hide() {
         if (!this.toggleTimeoutId) {
             this.eventTarget = null;
-            this.popoverRef.hidePopover();
+            this.host.hidePopover();
         }
     }
     /**
@@ -57,10 +55,10 @@ export class PostPopovercontainer {
         if (!this.toggleTimeoutId) {
             this.eventTarget = target;
             this.calculatePosition();
-            this.popoverRef.togglePopover(force);
+            this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
-        return this.popoverRef.matches(':popover-open');
+        return this.host.matches(':where(:popover-open, .popover-open');
     }
     /**
      * Start or stop auto updates based on tooltip events.
@@ -85,7 +83,7 @@ export class PostPopovercontainer {
      * an influence on tooltip positioning
      */
     startAutoupdates() {
-        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.popoverRef, this.calculatePosition.bind(this));
+        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
     async calculatePosition() {
         const middleware = [
@@ -111,14 +109,14 @@ export class PostPopovercontainer {
         if (this.arrow) {
             middleware.push(arrow({ element: this.arrowRef, padding: 8 }));
         }
-        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.popoverRef, {
+        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
             placement: this.placement || 'top',
             strategy: 'fixed',
             middleware,
         });
         // Tooltip
-        this.popoverRef.style.left = `${x}px`;
-        this.popoverRef.style.top = `${y}px`;
+        this.host.style.left = `${x}px`;
+        this.host.style.top = `${y}px`;
         // Arrow
         if (this.arrow) {
             // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
@@ -137,12 +135,11 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '1707db71258eef7c95c13d738561d9d55df540fc', "data-version": version }, h("div", { key: 'd1d89bfc31529c803b04f2395509fe96b38d7d7a', class: "popover", part: "popover", ref: (el) => (this.popoverRef = el) }, this.arrow && (h("span", { key: 'd85fc5f68be0ff8060b3be823e22744873395775', class: "arrow", ref: el => {
+        return (h(Host, { key: '944364458c19e3a11171571402f183449dafff24', "data-version": version }, this.arrow && (h("span", { key: 'f77a61b4b6f4f4ceb861ef8eb7d16f71f45642ec', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '7bd455d61d270b9d6cdc132ffb7a00f0259164e7' }))));
+            } })), h("slot", { key: 'feeedfe09388dca41ee1048c8702c68bd0a91d33' })));
     }
     static get is() { return "post-popovercontainer"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["post-popovercontainer.scss"]

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

@@ -64,7 +64,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: '64081561d0b0819ed5fbe31c0bc7974b996ec582', "data-version": version }, h("div", { key: 'eaed95cef70f1dfa815a77e3d630ac933d2c1eff', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'b175b250377f4bf9be92ad05fb14f7e4a8f7c12f', "data-version": version }, h("div", { key: 'b12eb5ff191d5a4ac5270845f120360f61e0fce0', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/collection/components/post-tab-header/post-tab-header.css

@@ -1,4 +1,4 @@
-.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
+.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
  * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -16,7 +16,7 @@ export class PostTabHeader {
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'eb6ac6a67f4cbf571d38f1de1c8d428a9dea5a53', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title" }, h("slot", { key: 'd6559dbcc76ecc8d253fcd4a115b4bc4f78fd496' })));
+        return (h(Host, { key: '543284f0251b7edff35b0fc4f260c7ba1447d57a', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title" }, h("slot", { key: 'c8ed807ea7fbd6fd5ab0e06724fd49852c5e15bf' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -13,7 +13,7 @@ export class PostTabPanel {
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'cd74acf8889af916b9b32b57b483bbd74d5a6e20', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '9d2c3f42b1dd9214aeeee35efc1179372851af13' })));
+        return (h(Host, { key: '2b7e8f1853df072796345126b60ed2b6315362a2', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '77c2b1c1f7d141fd3f9b71c504cdd9a5ce61260b' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,19 +41,17 @@ export class PostTabs {
             this.showing.finish();
         }
         // hide the currently visible panel only if no other animation is running
-        if (previousTab && !this.showing && !this.hiding) {
+        if (previousTab && !this.showing && !this.hiding)
             this.hidePanel(previousTab.panel);
-        }
         // wait for any hiding animation to complete before showing the selected tab
-        if (this.hiding) {
+        if (this.hiding)
             await this.hiding.finished;
-        }
         this.showSelectedPanel();
         // wait for any display animation to complete for the returned promise to fully resolve
-        if (this.showing) {
+        if (this.showing)
             await this.showing.finished;
-        }
-        this.postChange.emit(this.activeTab.panel);
+        if (this.isLoaded)
+            this.postChange.emit(this.activeTab.panel);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
@@ -143,7 +141,7 @@ export class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: 'f7aabebf0645b5d9db9028a0b1807e49d6f4e994', "data-version": version }, h("div", { key: 'b62f738a4df453f9acf94825f2d1626dc40c4eb1', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'a9bd32fc939cfdff73d2c48982551cceedb5bd2a', class: "tabs", role: "tablist" }, h("slot", { key: '4a8c2bc4815debd4d6951acbce224d3f1fd6b169', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'c7b2543a1decdc2bfe7a683b7bd193586485d012', class: "tab-content", part: "content" }, h("slot", { key: 'af19b3e89f8ca0cecf59f4426e4b5d3ac4efbc75', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '365b2794cfb46631277341ea23afb2070c9d3ad1', "data-version": version }, h("div", { key: '70df13385ecc9c067527b80e2dd7b3a9b245e745', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'cae4d18aff0c890e0e8d76c1b8e321322abbeccd', class: "tabs", role: "tablist" }, h("slot", { key: '2b6ca3e01e45e541950ddc2c1cdc680b28ea96b9', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '7352582d9c738af9b8bf3b71e0a153132fd23dcd', class: "tab-content", part: "content" }, h("slot", { key: '4845c39bf9b9cbc42aa8689c7ae99cc2e75d7907', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class PostTag {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '932992b2aa41e1082bf1617c7f6c74419febb143', "data-version": version }, h("div", { key: '3d5b82975cf95f1439299326347886a8b74e2d3d', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '96dac1715f1ddfe799cb2cb443f57d2a4082d90e', class: "tag-text" }, h("slot", { key: 'bb886b44ae76b71096c9938dacd708d80b602790' })))));
+        return (h(Host, { key: '0292c0d7a103bd987511cb67d66bc3de60800bf1', "data-version": version }, h("div", { key: 'b3b1934c9c3ec3490b1dad8829b15f63490677ba', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '0cb543c65dfe1d61756aecf67de9b2cdae3f78e5', class: "tag-text" }, h("slot", { key: '020b0b7191f0b6051c958253ef6cb52bc660d5e2' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51}post-popovercontainer::part(popover){padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer.has-arrow::part(popover)::after{position:absolute;content:"";inset:-13px;z-index:-1}
+:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}

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

@@ -3,6 +3,8 @@ import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
 import "long-press-event";
 import { getAttributeObserver } from "../../utils/attribute-observer";
+import { checkEmptyOrType, timeout } from "../../utils/index";
+const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
  */
@@ -83,6 +85,13 @@ export class PostTooltip {
     constructor() {
         this.placement = 'top';
         this.arrow = true;
+        this.delayed = false;
+    }
+    validateDelayed() {
+        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+    }
+    connectedCallback() {
+        this.validateDelayed();
     }
     componentDidLoad() {
         if (!this.host.id) {
@@ -135,6 +144,8 @@ export class PostTooltip {
      * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
      */
     async show(target) {
+        if (this.delayed)
+            await timeout(OPEN_DELAY);
         this.popoverRef.show(target);
     }
     /**
@@ -168,7 +179,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: 'b0d7189566ac508ebd711e563a045d1797b06afb', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e8e4eba9431feb03fd2209884f129d6fe46516a8', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '8ab50141cce24665aa10b9b31db5b14342de2040' }))));
+        return (h(Host, { key: 'de8f7f40645168240a3bcb70fd014ea2cfefbeb6', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '4cecbb91117c4dd46c7aea6f084a84de995c25b7', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c023b8f26189ed2c0dc4573914e92ce65f50ac18' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -225,6 +236,24 @@ export class PostTooltip {
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "delayed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the tooltip is displayed a few milliseconds after it is triggered"
+                },
+                "attribute": "delayed",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -313,4 +342,10 @@ export class PostTooltip {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "delayed",
+                "methodName": "validateDelayed"
+            }];
+    }
 }

package/dist/collection/index.js

@@ -4,6 +4,7 @@ export { PostAccordionItem } from './components/post-accordion-item/post-accordi
 export { PostAlert } from './components/post-alert/post-alert';
 export { PostCardControl } from './components/post-card-control/post-card-control';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
+export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostPopover } from './components/post-popover/post-popover';
 export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';

package/dist/collection/utils/debounce.js

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

package/dist/collection/utils/index.js

@@ -1,3 +1,5 @@
 export * from './property-checkers';
+export * from './debounce';
 export * from './is-motion-reduced';
 export * from './sass-export';
+export * from './timeout';

package/dist/collection/utils/timeout.js

@@ -0,0 +1,3 @@
+export function timeout(delay) {
+    return new Promise(resolve => setTimeout(resolve, delay));
+}

package/dist/components/_commonjsHelpers.js

@@ -0,0 +1,26 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function commonjsRequire (path) {
+	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+
+export { commonjsGlobal as a, getDefaultExportFromCjs as b, commonjsRequire as c, getAugmentedNamespace as g };

package/dist/components/check-type.js

@@ -0,0 +1,14 @@
+function checkType(value, type, error) {
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray)
+            throw new Error(error);
+    }
+    else {
+        if (typeof value !== type)
+            throw new Error(error);
+    }
+}
+
+export { checkType as c };

package/dist/components/index.js

@@ -4,6 +4,7 @@ export { P as PostAccordionItem } from './post-accordion-item2.js';
 export { P as PostAlert } from './post-alert2.js';
 export { P as PostCardControl } from './post-card-control2.js';
 export { P as PostCollapsible } from './post-collapsible2.js';
+export { P as PostCollapsibleTrigger } from './post-collapsible-trigger2.js';
 export { P as PostIcon } from './post-icon2.js';
 export { P as PostPopover } from './post-popover2.js';
 export { P as PostPopovercontainer } from './post-popovercontainer2.js';