@swisspost/design-system-components 9.0.0-next.3 → 9.0.0-next.5

package/loaders/post-menu-trigger.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PostMenuTrigger extends Components.PostMenuTrigger, HTMLElement {}
+export const PostMenuTrigger: {
+    prototype: PostMenuTrigger;
+    new (): PostMenuTrigger;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/loaders/post-menu-trigger.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
+
+const postMenuTriggerCss = ":host{display:inline-block}";
+const PostMenuTriggerStyle0 = postMenuTriggerCss;
+
+const PostMenuTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends HTMLElement {
+    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;
+    }
+    /**
+     * 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.
+     */
+    validateControlFor(forValue = this.for) {
+        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+    }
+    get menu() {
+        const ref = document.getElementById(this.for);
+        return ref && ref.localName === 'post-menu' ? ref : null;
+    }
+    handleToggle() {
+        const menu = this.menu;
+        if (menu && this.slottedButton) {
+            this.ariaExpanded = !this.ariaExpanded;
+            this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+            menu.toggle(this.host);
+        }
+        else {
+            console.warn(`No post-menu found with ID: ${this.for}`);
+        }
+    }
+    componentDidLoad() {
+        this.validateControlFor();
+        this.slottedButton = this.host.querySelector('button');
+        if (this.slottedButton) {
+            this.slottedButton.setAttribute('aria-haspopup', 'menu');
+            this.slottedButton.addEventListener('click', () => {
+                this.handleToggle();
+            });
+            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            console.warn('No button found within post-menu-trigger');
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ce2a30260fae6eecae5b2feb0538ac2ce66b989c', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a69d7dc4a1a798332bd9881cedb216ef82d279ab' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
+    static get style() { return PostMenuTriggerStyle0; }
+}, [4, "post-menu-trigger", {
+        "for": [1],
+        "ariaExpanded": [32]
+    }, undefined, {
+        "for": ["validateControlFor"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-menu-trigger"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-menu-trigger":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMenuTrigger$1);
+            }
+            break;
+    } });
+}
+
+const PostMenuTrigger = PostMenuTrigger$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostMenuTrigger, defineCustomElement };

package/loaders/post-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PostMenu extends Components.PostMenu, HTMLElement {}
+export const PostMenu: {
+    prototype: PostMenu;
+    new (): PostMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/loaders/post-menu.js

@@ -0,0 +1,204 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+].join(',')})`;
+const isFocusable = (element) => {
+    return (element === null || element === void 0 ? void 0 : element.matches(focusableSelector)) && !(element === null || element === void 0 ? void 0 : element.matches(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)}";
+const PostMenuStyle0 = postMenuCss;
+
+const PostMenu$1 = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLElement {
+    constructor() {
+        super();
+        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;
+    }
+    connectedCallback() {
+        this.host.addEventListener('keydown', this.handleKeyDown);
+        this.host.addEventListener('click', this.handleClick);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+        this.host.removeEventListener('click', this.handleClick);
+    }
+    componentDidLoad() {
+        this.popoverRef.addEventListener('postToggle', (event) => {
+            this.isVisible = event.detail;
+            this.toggleMenu.emit(this.isVisible);
+        });
+    }
+    /**
+     * Toggles the menu visibility based on its current state.
+     */
+    async toggle(target) {
+        this.isVisible ? await this.hide() : await this.show(target);
+    }
+    /**
+     * Displays the popover menu, focusing the first menu item.
+     *
+     * @param target - The HTML element relative to which the popover menu should be displayed.
+     */
+    async show(target) {
+        if (this.popoverRef) {
+            await this.popoverRef.show(target);
+            this.lastFocusedElement = document.activeElement;
+            const menuItems = this.getSlottedItems();
+            if (menuItems.length > 0) {
+                menuItems[0].focus();
+            }
+        }
+        else {
+            console.error('show: popoverRef is null or undefined');
+        }
+    }
+    /**
+     * Hides the popover menu and restores focus to the previously focused element.
+     */
+    async hide() {
+        if (this.popoverRef) {
+            await this.popoverRef.hide();
+            if (this.lastFocusedElement) {
+                this.lastFocusedElement.focus();
+            }
+        }
+        else {
+            console.error('hide: popoverRef is null or undefined');
+        }
+    }
+    controlKeyDownHandler(e) {
+        const menuItems = this.getSlottedItems();
+        if (!menuItems.length) {
+            return;
+        }
+        const currentFocusedElement = document.activeElement;
+        let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
+        switch (e.key) {
+            case this.KEYCODES.UP:
+                e.preventDefault();
+                currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+                break;
+            case this.KEYCODES.DOWN:
+                e.preventDefault();
+                currentIndex = (currentIndex + 1) % menuItems.length;
+                break;
+            case this.KEYCODES.HOME:
+                currentIndex = 0;
+                break;
+            case this.KEYCODES.END:
+                currentIndex = menuItems.length - 1;
+                break;
+            case this.KEYCODES.SPACE:
+            case this.KEYCODES.ENTER:
+                this.toggle(this.host);
+                return;
+            case this.KEYCODES.TAB:
+                this.toggle(this.host);
+                break;
+        }
+        if (menuItems[currentIndex]) {
+            menuItems[currentIndex].focus();
+        }
+    }
+    getSlottedItems() {
+        const slot = this.host.shadowRoot.querySelector('slot');
+        const slottedElements = slot ? slot.assignedElements() : [];
+        const menuItems = slottedElements
+            .filter(el => el.tagName === 'POST-MENU-ITEM')
+            .map(el => {
+            const slot = el.shadowRoot.querySelector('slot');
+            const assignedElements = slot ? slot.assignedElements() : [];
+            return assignedElements.filter(isFocusable);
+        })
+            .flat();
+        return menuItems;
+    }
+    render() {
+        return (h(Host, { key: '4447ff6878a1b0f38b533196466b33217f9499d4', "data-version": version }, h("post-popovercontainer", { key: '918e2b8a662cdb64972cb0729b8b077e1bca5e0a', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '40b04b6c0d65cc3c10f6b8b037ec3ff24d1b907b', class: "popover-container" }, h("slot", { key: 'e836fdb9e29961f3b6c6c13261e8eef0f874cfb6' })))));
+    }
+    get host() { return this; }
+    static get style() { return PostMenuStyle0; }
+}, [1, "post-menu", {
+        "placement": [1],
+        "isVisible": [32],
+        "toggle": [64],
+        "show": [64],
+        "hide": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-menu", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMenu$1);
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PostMenu = PostMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostMenu, defineCustomElement };

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: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,.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}";
+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:var(--post-gray-80);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{-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,.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}";
 const PostPopoverStyle0 = postPopoverCss;
 
 /**
@@ -96,7 +96,7 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: '6b67868c1156eef8a56185282a3a7deb0244134e', "data-version": version }, h("post-popovercontainer", { key: 'ece27b60be001b3c22c92d060ed5f173141d9ab3', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'bd6ed5b021f6e5b6704009c8b97a77797603a2b2', class: "popover-container" }, h("div", { key: '352f7c368bbf0c3f8835a93478fd93228a1f95d9', class: "popover-content" }, h("slot", { key: 'dcc97fac19ab3dcdaa00c59ab2de6eb17662a5cf' })), h("button", { key: '0e1d2f250d3519181459638957eb6056535325e6', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '55dc6800e309eede4adb8705b41bc1a23e824e11', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: '22964a2be347979d1ebaaec468edfd4b079776ff', "data-version": version }, h("post-popovercontainer", { key: 'a108ed03721a453ce73a850913d93b8bfaf83922', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '943f1a914ada58c3f8b085613b47ed4b7c55e591', class: "popover-container" }, h("div", { key: 'a6a8dec53c9190c48d1b3b217c979d78b2f32995', class: "popover-content" }, h("slot", { key: '555bc4537d6bd62b60186db9700588eb3ec38ac2' })), h("button", { key: 'db0826565312bba9bc48a88cd84636a903eeb94f', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'aef92ba6e586e02924a09d459e4d753ad18f72f7', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     get host() { return this; }
     static get style() { return PostPopoverStyle0; }

package/loaders/post-popovercontainer2.js

@@ -2054,6 +2054,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.__registerHost();
         this.postToggle = createEvent(this, "postToggle", 7);
         this.placement = 'top';
+        this.edgeGap = 8;
         this.arrow = false;
     }
     componentDidLoad() {
@@ -2125,11 +2126,12 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
     async calculatePosition() {
+        const gap = this.edgeGap;
         const middleware = [
             flip(),
             inline(),
             shift({
-                padding: 8,
+                padding: gap,
                 // Prevents shifting away from the anchor too far, while shifting as far as possible
                 // https://floating-ui.com/docs/shift#limiter
                 limiter: limitShift({
@@ -2139,14 +2141,14 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
             size({
                 apply({ availableWidth, elements }) {
                     Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth - 16}px`,
+                        maxWidth: `${availableWidth - gap * 2}px`,
                     });
                 },
             }),
-            offset(this.arrow ? 12 : 8), // 4px outside of element to account for focus outline + ~arrow size
+            offset(this.arrow ? gap + 4 : gap), // 4px outside of element to account for focus outline + ~arrow size
         ];
         if (this.arrow) {
-            middleware.push(arrow({ element: this.arrowRef, padding: 8 }));
+            middleware.push(arrow({ element: this.arrowRef, padding: gap }));
         }
         const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
             placement: this.placement || 'top',
@@ -2174,14 +2176,15 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: 'b12ea12dd1224cb0562f65c4e38899886041ce06', "data-version": version }, this.arrow && (h("span", { key: '0273018a157873711de698ed2cdcde2c9de68573', class: "arrow", ref: el => {
+        return (h(Host, { key: '97a63bfbf098bd3463eb75678e54ddcc9e4790b3', "data-version": version }, this.arrow && (h("span", { key: 'f6eaa7bd6cd3eb63d15e7d91825365661daae7dd', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'cf6b2a9a8cb9d04d01ab9d5d99afd52740c3520c' })));
+            } })), h("slot", { key: '414055000891719b74c2c449fec2c87a60b62047' })));
     }
     get host() { return this; }
     static get style() { return PostPopovercontainerStyle0; }
 }, [4, "post-popovercontainer", {
         "placement": [1],
+        "edgeGap": [2, "edge-gap"],
         "arrow": [4],
         "show": [64],
         "hide": [64],

package/loaders/post-rating.js

@@ -74,7 +74,7 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         }
     }
     render() {
-        return (h(Host, { key: '442c936d6e9337d04b16edc62e56996139e86262', "data-version": version }, h("div", { key: '280ea877721676ba137c91d9be00007bcc5caf4f', 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: '0202a629d68bc85d00fb3ccae63073938fb174d3', "data-version": version }, h("div", { key: '7de2c78d498957dbd988472729fde2ea04162490', 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/loaders/post-tab-header.js

@@ -20,7 +20,7 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: '5912b0379fbde496a165cc18bd8025e02858dd20', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '14d7d226e09a018139570ded2acef36ade7ad501' })));
+        return (h(Host, { key: 'f105dabe8a61308d5aa361a6aeaad2f938cf7656', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '3abc0c8fab0a0ab1dd538e20831980b4672ae79a' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/loaders/post-tab-panel.js

@@ -17,7 +17,7 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'b3cf3aa9d4a89fc1f561ba7ecd62ff456e3392eb', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '63be1c4ea7c1c57a1438eeb164b446d39613f926' })));
+        return (h(Host, { key: '9018d11d85d1ce0b83e74987f8fb96eb1b873a40', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '45e2214fbeb5d4c2b4e5e35eb5ad74d99033a0a3' })));
     }
     get host() { return this; }
     static get style() { return PostTabPanelStyle0; }

package/loaders/post-tabs.js

@@ -23,7 +23,7 @@ const customOnReady = (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{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}:host{display:block}";
+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{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs.list-bullet>li{margin:0;padding:0}.tabs.list-bullet>li::before{display:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}:host{display:block}";
 const PostTabsStyle0 = postTabsCss;
 
 const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
@@ -164,7 +164,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '443b79a70c7e0128a01094a8d06e8846225a534f', "data-version": version }, h("div", { key: '0f7ce12730170ec5197a458f7d8c995a30400260', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '0f97c05226414525b18f74cf39eba9dd724b2ae7', class: "tabs", role: "tablist" }, h("slot", { key: '63b83a89e4fa49508c2a5885bf0ab0c895c1d6bc', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '234bfca1c275439f15b38b5b0953f5875c071436', class: "tab-content", part: "content" }, h("slot", { key: '77ef898a040b7f59d90afab6a9a0fd47c00e0ab5', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '3c9d7351fa09531238892f0bd05447379f46fdb4', "data-version": version }, h("div", { key: '1eff106f6324302155e809a58cd3367bb7bdbd76', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'fc5917d92b577f99fb19fa80ecd1a863ffeaa4d8', class: "tabs", role: "tablist" }, h("slot", { key: 'af35884271ca9d75dbbd113e05fd052c4691c53e', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4908774e2306e432af65b94a9dd5e1d257569652', class: "tab-content", part: "content" }, h("slot", { key: 'c0eb44e39b0cffe57c42c51dd74e605e74241f70', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/loaders/post-tag.js

@@ -35,7 +35,7 @@ const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEle
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '0696ad0df9ebe7a349090d8a7ed8fd9f60194e46', "data-version": version }, h("div", { key: 'a656792f0bea60ffb006ea52a53c72200e67cb52', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'f8886d0eca17458e71649584bb3d3d082272dc03', class: "tag-text" }, h("slot", { key: 'fa66eef13f726a169f62fdbdd2f914932bfde61d' })))));
+        return (h(Host, { key: '01f369b7c6803f710fb0b5eae652d6d1beb340ed', "data-version": version }, h("div", { key: 'bba40e4deaa43e64c9bc32c2ad4a3e3515bdf8dd', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '9addb054f9555c9a97d8825a148958b2e2b863a7', class: "tag-text" }, h("slot", { key: '315cf79690fa489c61edd6ce6b304b94a3866b8c' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/loaders/post-tooltip.js

@@ -4977,7 +4977,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '95188177d36478c25892238d67427b250a5d0978', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'feb6016cb20946f5578aecc693c2813382580562', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '6d7b69f543c0f550952dfa985e9ca3222af8ac18' }))));
+        return (h(Host, { key: '8e2bd1f11a44a0d39ad797f12b880338d59ea006', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'ff4fdbf72ca4b95d5f4e925fedbfbcf7e281410f', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '770a98cff11b963ec37559683a27a216250e8bde' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.5",
   "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,7 +26,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "9.0.0-next.3",
+    "@swisspost/design-system-styles": "9.0.0-next.5",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },
@@ -51,6 +51,7 @@
     "rimraf": "6.0.1",
     "rollup-plugin-postcss": "4.0.2",
     "sass": "1.78.0",
+    "throttle-debounce": "5.0.2",
     "ts-jest": "29.2.4",
     "typescript": "5.5.4"
   },