@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.13

package/loaders/post-menu-trigger2.js

@@ -10,20 +10,16 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for menu control.
-         */
-        this.slottedButton = null;
-        this.handleKeyDown = (e) => {
-            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.handleToggle();
-            }
-        };
         this.for = undefined;
         this.ariaExpanded = false;
     }
+    get host() { return this; }
+    /**
+     * Reference to the slotted button within the trigger, if present.
+     * Used to manage click and key events for menu control.
+     */
+    slottedButton = null;
+    root;
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
@@ -46,6 +42,12 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
             console.warn(`No post-menu found with ID: ${this.for}`);
         }
     }
+    handleKeyDown = (e) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.handleToggle();
+        }
+    };
     componentDidLoad() {
         this.root = getRoot(this.host);
         this.validateControlFor();
@@ -74,7 +76,6 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
     render() {
         return (h(Host, { key: '5bdaebd0c1f46fda5804c0e8d39ab3e714b523c5', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'ffee26535991d712f44cb1859a5976ec89ad772a' })));
     }
-    get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }

package/loaders/post-menu2.js

@@ -27,9 +27,9 @@ const focusDisablingSelector = `:where(${[
     'details:not([open]) > *:not(details > summary:first-of-type) *',
     '[tabindex^="-"]',
 ].join(',')})`;
-const getFocusableChildren = (element) => {
+function getFocusableChildren(element) {
     return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
-};
+}
 
 const postMenuCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}";
 const PostMenuStyle0 = postMenuCss;
@@ -40,36 +40,28 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.toggleMenu = createEvent(this, "toggleMenu", 7);
-        this.lastFocusedElement = null;
-        this.KEYCODES = {
-            SPACE: ' ',
-            ENTER: 'Enter',
-            UP: 'ArrowUp',
-            DOWN: 'ArrowDown',
-            TAB: 'Tab',
-            HOME: 'Home',
-            END: 'End',
-            ESCAPE: 'Escape',
-        };
-        this.handleKeyDown = (e) => {
-            e.stopPropagation();
-            if (e.key === this.KEYCODES.ESCAPE) {
-                this.toggle(this.host);
-                return;
-            }
-            if (Object.values(this.KEYCODES).includes(e.key)) {
-                this.controlKeyDownHandler(e);
-            }
-        };
-        this.handleClick = (e) => {
-            const target = e.target;
-            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-                this.toggle(this.host);
-            }
-        };
         this.placement = 'bottom';
         this.isVisible = false;
     }
+    popoverRef;
+    lastFocusedElement = null;
+    KEYCODES = {
+        SPACE: ' ',
+        ENTER: 'Enter',
+        UP: 'ArrowUp',
+        DOWN: 'ArrowDown',
+        TAB: 'Tab',
+        HOME: 'Home',
+        END: 'End',
+        ESCAPE: 'Escape',
+    };
+    get host() { return this; }
+    /**
+     * Emits when the menu is shown or hidden.
+     * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
+     **/
+    toggleMenu;
+    root;
     connectedCallback() {
         this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
@@ -89,7 +81,12 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
      * Toggles the menu visibility based on its current state.
      */
     async toggle(target) {
-        this.isVisible ? await this.hide() : await this.show(target);
+        if (this.isVisible) {
+            await this.hide();
+        }
+        else {
+            await this.show(target);
+        }
     }
     /**
      * Displays the popover menu, focusing the first menu item.
@@ -123,6 +120,22 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    handleKeyDown = (e) => {
+        e.stopPropagation();
+        if (e.key === this.KEYCODES.ESCAPE) {
+            this.toggle(this.host);
+            return;
+        }
+        if (Object.values(this.KEYCODES).includes(e.key)) {
+            this.controlKeyDownHandler(e);
+        }
+    };
+    handleClick = (e) => {
+        const target = e.target;
+        if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+            this.toggle(this.host);
+        }
+    };
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -171,9 +184,8 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '68c4661d3ab9256dadbbe3243247456c090b728e', "data-version": version }, h("post-popovercontainer", { key: 'b6cb0624239e0ed5aeadac63ffb1b1f7fb0e873e', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '608f677ae715eb09ed46fde9912241dc35673e06', class: "popover-container", part: "popover-container" }, h("slot", { key: '83f84b7b29b4d7c9d4e0924026ca7469c1f0cfb0' })))));
+        return (h(Host, { key: '8f16d2fa03fc108a1ee5972811e6c94dc03a8142', "data-version": version }, h("post-popovercontainer", { key: '4c4df2d6de84db121b8a261be6fbdeaf617ab3e2', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '20e5335b60c1cee8d6da80f654abd32c363397b8', class: "popover-container", part: "popover-container" }, h("slot", { key: '0182cda99c5e991a8001cbc594ef4988950657c2' })))));
     }
-    get host() { return this; }
     static get style() { return PostMenuStyle0; }
 }, [1, "post-menu", {
         "placement": [1],

package/loaders/post-popover.js

@@ -3,7 +3,7 @@ import { v as version } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
 import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
 
-const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.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:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{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}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-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:var(--post-core-border-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{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:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.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{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;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
+const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.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:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{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}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-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:var(--post-core-border-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{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:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@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{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;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
 const PostPopoverStyle0 = postPopoverCss;
 
 /**
@@ -19,7 +19,7 @@ const globalToggleHandler = (e) => {
     if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
         return;
     const popover = document.getElementById(popoverTarget);
-    popover === null || popover === void 0 ? void 0 : popover.toggle(target);
+    popover?.toggle(target);
 };
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger => {
@@ -27,6 +27,9 @@ const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger =>
     trigger.setAttribute('aria-expanded', force ? 'false' : null);
 });
 const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
+    popoverRef;
+    localBeforeToggleHandler;
+    get host() { return this; }
     constructor() {
         super();
         this.__registerHost();
@@ -98,7 +101,6 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
     render() {
         return (h(Host, { key: 'c2f53a7ac9d6bbcca8c220d9b8a5ed0dda360cf9', "data-version": version }, h("post-popovercontainer", { key: 'fa5a32cfd4263fcabed5405f2b6bb2ab0ca93c9a', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4799da001d006a47d93be1393618744a0b393841', class: "popover-container" }, h("div", { key: '7a28ea59e07591c8b835dd10157bc5e9b85793c6', class: "popover-content" }, h("slot", { key: '1ba6533577817d1fc2b7762654b5639596b16422' })), h("button", { key: 'f1446964325e49b79bc0fe26a05bb4f12a140c61', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd056bb988df548e8cae61ba226c1d9e124bc32b', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
-    get host() { return this; }
     static get style() { return PostPopoverStyle0; }
 }, [1, "post-popover", {
         "placement": [1],

package/loaders/post-popovercontainer2.js

@@ -2103,7 +2103,7 @@ const computePosition = (reference, floating, options) => {
   }
 `,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
 
-const postPopovercontainerCss = "@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);background:var(--post-current-palette-bg);color:var(--post-current-palette-fg);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer) .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)}";
+const postPopovercontainerCss = "@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);background:var(--post-current-palette-bg);color:var(--post-current-palette-fg);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer):not(:has(.arrow)){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12)}:where(post-popovercontainer):has(.arrow){filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top){filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left){filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right){filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-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)}";
 const PostPopovercontainerStyle0 = postPopovercontainerCss;
 
 const SIDE_MAP = {
@@ -2121,6 +2121,15 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.edgeGap = 8;
         this.arrow = false;
     }
+    get host() { return this; }
+    arrowRef;
+    eventTarget;
+    clearAutoUpdate;
+    toggleTimeoutId;
+    /**
+     * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
+     */
+    postToggle;
     componentDidLoad() {
         this.host.setAttribute('popover', '');
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
@@ -2244,7 +2253,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
                 this.arrowRef = el;
             } })), h("slot", { key: '61dd3072a5217099028e3dd4b22fa845ea2f5970' })));
     }
-    get host() { return this; }
     static get style() { return PostPopovercontainerStyle0; }
 }, [4, "post-popovercontainer", {
         "placement": [1],

package/loaders/post-rating.js

@@ -6,13 +6,24 @@ const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technol
 const PostRatingStyle0 = postRatingCss;
 
 const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
+    hasChanged = false;
+    get host() { return this; }
+    /**
+     * An event emitted whenever the component's value has changed (on input).
+     * The event payload can be used like so: `event.detail.value`.
+     */
+    postInput;
+    /**
+     * An event emitted whenever the component's value has changed (on blur).
+     * The event payload can be used like so: `event.detail.value`.
+     */
+    postChange;
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.postInput = createEvent(this, "postInput", 7);
         this.postChange = createEvent(this, "postChange", 7);
-        this.hasChanged = false;
         this.hoveredIndex = undefined;
         this.label = 'Rating';
         this.stars = 5;
@@ -82,7 +93,6 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
                 'after-active': i > this.hoveredIndex && i < this.currentRating,
             }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "2062", class: "stroke" }), h("post-icon", { name: "2574", class: "fill" })))))));
     }
-    get host() { return this; }
     static get style() { return PostRatingStyle0; }
 }, [1, "post-rating", {
         "label": [1],

package/loaders/post-tab-header.js

@@ -3,7 +3,7 @@ import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
 import { n as nanoid } from './index.browser.js';
 
-const postTabHeaderCss = ".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:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-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) .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:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
+const postTabHeaderCss = ".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:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;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:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-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) .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:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
 const PostTabHeaderStyle0 = postTabHeaderCss;
 
 const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
@@ -14,6 +14,7 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
         this.tabId = undefined;
         this.panel = undefined;
     }
+    get host() { return this; }
     validateFor(newValue) {
         checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
     }
@@ -23,7 +24,6 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
     render() {
         return (h(Host, { key: '9b12878498f63da83113c081f81a749b4ee47ef4', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '3a2e7f3657110d707b49af911e9dd3a4ef323e36' })));
     }
-    get host() { return this; }
     static get watchers() { return {
         "panel": ["validateFor"]
     }; }

package/loaders/post-tab-panel.js

@@ -13,6 +13,7 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
         this.panelId = undefined;
         this.name = undefined;
     }
+    get host() { return this; }
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
@@ -20,7 +21,6 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
     render() {
         return (h(Host, { key: '9e8f9c5dc0c1c3d1b7e63cbb9e9cbb0cf116da9b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '3ece42346845324cfa0fb9af5721efab2b71e2f1' })));
     }
-    get host() { return this; }
     static get style() { return PostTabPanelStyle0; }
 }, [1, "post-tab-panel", {
         "name": [1],

package/loaders/post-tabs.js

@@ -6,7 +6,7 @@ import { f as fadeOut, a as fadeIn } from './fade.js';
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-const componentOnReady = (el) => {
+function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -15,15 +15,15 @@ const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+function customOnReady(callback) {
     if (typeof requestAnimationFrame === 'function') {
         return requestAnimationFrame(callback);
     }
     return setTimeout(callback);
-};
+}
 
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
 const PostTabsStyle0 = postTabsCss;
 
 const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
@@ -32,17 +32,25 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.postChange = createEvent(this, "postChange", 7);
-        this.isLoaded = false;
         this.activePanel = undefined;
     }
+    activeTab;
+    showing;
+    hiding;
+    isLoaded = false;
     get tabs() {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
+    get host() { return this; }
+    /**
+     * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
+     * The payload is the name of the newly shown panel.
+     */
+    postChange;
     componentDidLoad() {
-        var _a;
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || ((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -51,9 +59,8 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
     async show(panelName) {
-        var _a;
         // do nothing if the tab is already active
-        if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+        if (panelName === this.activeTab?.panel) {
             return;
         }
         const previousTab = this.activeTab;
@@ -87,7 +94,6 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         });
     }
     enableTabs() {
-        var _a;
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
@@ -114,7 +120,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         });
         // if the currently active tab was removed from the DOM then select the first one
         if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
+            void this.show(this.tabs[0]?.panel);
         }
     }
     activateTab(tab) {
@@ -166,9 +172,8 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '27b5f90f8b6d8f0d3688b3c965fa666df5f8edab', "data-version": version }, h("div", { key: '4d811e26c2bed4abc63e89517dca0f6fd9f701c3', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'd740301189c1335c3d76520d6a5bfe3e75789d4a', class: "tabs", role: "tablist" }, h("slot", { key: '9b3dc7e7d05b8577dfb480d684cf423a8adc2a23', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'fe219c0eaad3c67bea5a47f0690a8bdda0c739aa', class: "tab-content", part: "content" }, h("slot", { key: '80d8eb9fe9292e4c2486fded48928ffc9c5219bf', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '697174a68f4eedabd9170bcad93e60539f0dc778', "data-version": version }, h("div", { key: 'ae39c8fd62edd28113dea0f013ffdd3a76bea739', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'a638044b8b6ab2d3c2d6e6b59a2e9a02fd137e0d', class: "tabs", role: "tablist" }, h("slot", { key: '2ea6eb60f7d1edcc59eea994cc2fde91c900c286', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '6900fd1914df01fbe5901378611ed0a359bc13f6', class: "tab-content", part: "content" }, h("slot", { key: '464bb9fa7450ddd22517a0e41f692876d6e8bf5b', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
-    get host() { return this; }
     static get style() { return PostTabsStyle0; }
 }, [1, "post-tabs", {
         "activePanel": [1, "active-panel"],

package/loaders/post-tag.js

@@ -2,10 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
+const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
 const PostTagStyle0 = postTagCss;
 
 const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
+    get host() { return this; }
     constructor() {
         super();
         this.__registerHost();
@@ -37,7 +38,6 @@ const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEle
     render() {
         return (h(Host, { key: 'cda93c397ec81e289c843eaae7694bbba6f3c297', "data-version": version }, h("div", { key: '7fa71d9c0ca5393bc188e5e09107ec931943ed66', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '8d36933c00910e9f36759d101f43b628c0fbf185', class: "tag-text" }, h("slot", { key: '49e2e9dd66cb85df4615c512d8dc0d7cad6606b8' })))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "variant": ["variantChanged"],
         "size": ["sizeChanged"]

package/loaders/post-togglebutton.js

@@ -10,18 +10,9 @@ const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutt
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            // perform a click when enter or spaced are pressed to mimic the button behavior
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault(); // prevents the page from scrolling when space is pressed
-                this.host.click();
-            }
-        };
         this.toggled = false;
     }
+    get host() { return this; }
     validateToggled(value = this.toggled) {
         checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
     }
@@ -31,10 +22,19 @@ const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutt
         this.host.addEventListener('click', () => this.handleClick());
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
+    handleClick = () => {
+        this.toggled = !this.toggled;
+    };
+    handleKeydown = (event) => {
+        // perform a click when enter or spaced are pressed to mimic the button behavior
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault(); // prevents the page from scrolling when space is pressed
+            this.host.click();
+        }
+    };
     render() {
         return (h(Host, { key: '461f72ebada75a99921b7a166f67f2547aa6465e', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'cd5f4cc4df687cceacb3ea6c125b7b62f01b2712' })));
     }
-    get host() { return this; }
     static get watchers() { return {
         "toggled": ["validateToggled"]
     }; }

package/loaders/post-tooltip.js

@@ -4812,7 +4812,7 @@ const globalInterestHandler = (e) => {
     const tooltip = document.getElementById(tooltipTarget);
     // Determine if the tooltip was triggered by a focus event
     const triggeredByFocus = e.type === 'focusin';
-    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement, triggeredByFocus));
+    void tooltip?.show(targetElement, triggeredByFocus);
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -4853,7 +4853,7 @@ const patchAccessibilityFeatures = (trigger) => {
     const describedBy = trigger.getAttribute('aria-describedby');
     const id = trigger.getAttribute(tooltipTargetAttribute);
     // Add tooltip to aria-describedby
-    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(id))) {
+    if (!describedBy?.includes(id)) {
         const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
         trigger.setAttribute('aria-describedby', newDescribedBy);
     }
@@ -4869,11 +4869,13 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.wasOpenedByFocus = false;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
     }
+    popoverRef;
+    wasOpenedByFocus = false;
+    get host() { return this; }
     validateDelayed() {
         checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
     }
@@ -4991,7 +4993,6 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
         return (h(Host, { key: '492f3f8b1b323417304ffba6c93f277c18f5b3d8', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '1b25c36c8351f0471e9acdf1fdf3073fa59683da', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '0c1f7d6c81e214155976d1fb6151ec0f97724724' }))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "delayed": ["validateDelayed"]
     }; }

package/loaders/slide.js

@@ -1,7 +1,7 @@
 const easing = 'ease';
 const duration = 500;
 const fill = 'forwards';
-const slideUp = (el, translateSize = '100%') => {
+function slideUp(el, translateSize = '100%') {
     return el.animate([
         { transform: `translateY(${translateSize})` }, // Starting position (no translation)
         { transform: 'translateY(0)' }, // End position
@@ -10,8 +10,8 @@ const slideUp = (el, translateSize = '100%') => {
         easing,
         fill,
     });
-};
-const slideDown = (el, translateSize = '100%') => {
+}
+function slideDown(el, translateSize = '100%') {
     return el.animate([
         { transform: 'translateY(0)' }, // Starting position (no translation)
         { transform: `translateY(${translateSize})` }, // End position
@@ -20,6 +20,6 @@ const slideDown = (el, translateSize = '100%') => {
         easing,
         fill,
     });
-};
+}
 
 export { slideDown as a, slideUp as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.12",
+  "version": "9.0.0-next.13",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -26,36 +26,39 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.13",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "9.0.0-next.12",
-    "@swisspost/design-system-styles": "9.0.0-next.12",
+    "@swisspost/design-system-icons": "9.0.0-next.13",
+    "@swisspost/design-system-styles": "9.0.0-next.13",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"
   },
   "devDependencies": {
+    "@eslint/compat": "1.2.5",
+    "@eslint/js": "9.18.0",
     "@percy/cli": "1.30.6",
     "@percy/cypress": "3.1.2",
-    "@stencil-community/eslint-plugin": "0.8.0",
+    "@stencil-community/eslint-plugin": "0.9.0",
     "@stencil/angular-output-target": "0.8.4",
     "@stencil/core": "4.19.2",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.14",
     "@types/node": "22.10.5",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "bootstrap": "5.3.3",
     "cypress": "13.13.2",
     "cypress-axe": "1.5.0",
     "cypress-storybook": "1.0.0",
-    "eslint": "8.57.1",
-    "eslint-plugin-react": "7.37.3",
+    "eslint": "9.18.0",
+    "eslint-plugin-react": "7.37.4",
+    "globals": "15.14.0",
     "rimraf": "6.0.1",
     "rollup-plugin-postcss": "4.0.2",
     "sass": "1.78.0",
     "throttle-debounce": "5.0.2",
     "ts-jest": "29.2.5",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "typescript-eslint": "8.20.0"
   },
   "keywords": [
     "components",
@@ -77,6 +80,7 @@
     "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "e2e:watch": "cypress open",
     "generate": "stencil generate",
-    "lint": "eslint src/**/*{.ts,.tsx}"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   }
 }