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

package/loaders/post-megadropdown.js

@@ -0,0 +1,202 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getFocusableChildren } from './get-focusable-children.js';
+import { v as version } from './package.js';
+import { b as breakpoint } from './breakpoints.js';
+
+const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:4;position:fixed;inset-block-start:var(--header-navigation-current-inset);inset-inline:0;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
+const PostMegadropdownStyle0 = postMegadropdownCss;
+
+const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
+        this.device = breakpoint.get('name');
+        this.isVisible = false;
+        this.animationClass = null;
+    }
+    firstFocusableEl;
+    lastFocusableEl;
+    get host() { return this; }
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
+    breakpointChange(e) {
+        this.device = e.detail;
+        if (this.device === 'desktop' && this.isVisible) {
+            this.animationClass = null;
+        }
+    }
+    /**
+     * Emits when the dropdown is shown or hidden.
+     * The event payload is an object.
+     * `isVisible` is true when the dropdown gets opened and false when it gets closed
+     * `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
+     **/
+    postToggleMegadropdown;
+    disconnectedCallback() {
+        this.removeListeners();
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
+    }
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    /**
+     * Displays the dropdown.
+     */
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-in';
+        }
+        this.isVisible = true;
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
+        if (this.firstFocusableEl &&
+            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
+            this.firstFocusableEl.focus();
+        }
+        this.addListeners();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide(focusParent = true, forceClose = false) {
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        if (forceClose) {
+            this.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-out';
+        }
+    }
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    async focusFirst() {
+        this.firstFocusableEl?.focus();
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
+        this.removeListeners();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            PostMegadropdown.activeDropdown = null;
+            this.removeListeners();
+        }
+    }
+    handleClickOutside = (event) => {
+        if (this.device !== 'desktop')
+            return;
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
+        }
+        if (target instanceof HTMLElement) {
+            const trigger = target.closest('post-megadropdown-trigger');
+            if (trigger) {
+                const targetDropdownId = trigger.getAttribute('for');
+                if (targetDropdownId !== this.host.id) {
+                    return;
+                }
+            }
+        }
+        this.hide(false);
+    };
+    addListeners() {
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeListeners() {
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    handleTabOutside(e) {
+        if (e.key === 'Tab' && this.device === 'desktop') {
+            if (!this.host.contains(e.target)) {
+                this.hide(false);
+            }
+        }
+    }
+    render() {
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '7426a12ebaeac0ce3b8402c3da4d5393daca059b', version: version }, h("div", { key: 'd47b60c334577f5662f19912f12ce941b4b52d94', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '2798f217b2b3e43c3c63072884bbbbe7d99ed62f', class: "megadropdown" }, h("slot", { key: 'b61f82bbc7f87f65d9b6957e7a4e5d6790b6dd00', name: "megadropdown-title" }), h("div", { key: 'f4996a819511cb59185faeedbdcec4be6e6f8a24', class: "megadropdown-content" }, h("slot", { key: '54f695c3b3d30a6a1aae7f7dc6f65f4d4d27de68' })), h("div", { key: 'b1334295c7d758e20c85b6c6c8cefc31dcf09e20', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'c4db69fa3207ce4cb47b725e37b1993820a2a64c', name: "back-button" })), h("div", { key: '68b22a3222382586fc749dec63e36edae84360c1', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '8023b75c931a95dbd9552c1a713790e77e40f526', name: "close-button" }))))));
+    }
+    static get style() { return PostMegadropdownStyle0; }
+}, [4, "post-megadropdown", {
+        "device": [32],
+        "isVisible": [32],
+        "animationClass": [32],
+        "toggle": [64],
+        "show": [64],
+        "hide": [64],
+        "focusFirst": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-megadropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-megadropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMegadropdown$1);
+            }
+            break;
+    } });
+}
+
+const PostMegadropdown = PostMegadropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostMegadropdown, defineCustomElement };

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

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

package/loaders/post-menu-item.js

@@ -0,0 +1,6 @@
+import { P as PostMenuItem$1, d as defineCustomElement$1 } from './post-menu-item2.js';
+
+const PostMenuItem = PostMenuItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostMenuItem, defineCustomElement };

package/loaders/post-menu-item2.js

@@ -0,0 +1,27 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+
+const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { key: '376ce17a520b6cb74c55c009843df878f99ef411', role: "menuitem", "data-version": version }, h("slot", { key: 'e489c5c09f1527e527e052e9f4349c5b26db6ea9' })));
+    }
+}, [4, "post-menu-item"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMenuItem);
+            }
+            break;
+    } });
+}
+
+export { PostMenuItem as P, defineCustomElement as d };

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,6 @@
+import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './post-menu-trigger2.js';
+
+const PostMenuTrigger = PostMenuTrigger$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostMenuTrigger, defineCustomElement };

package/loaders/post-menu-trigger2.js

@@ -0,0 +1,109 @@
+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';
+import { g as getRoot } from './get-root.js';
+
+const postMenuTriggerCss = ":host{display:inline-block}";
+const PostMenuTriggerStyle0 = postMenuTriggerCss;
+
+const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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.
+     */
+    validateControlFor() {
+        checkType(this, 'for', 'string');
+    }
+    get menu() {
+        const ref = this.root.getElementById(this.for);
+        return ref && ref.localName === 'post-menu' ? ref : null;
+    }
+    handleToggle() {
+        if (this.menu) {
+            this.menu.toggle(this.host);
+        }
+        else {
+            console.warn(`No post-menu found with ID: ${this.for}`);
+        }
+    }
+    handleKeyDown = (e) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.handleToggle();
+        }
+    };
+    connectedCallback() {
+        this.root = getRoot(this.host);
+    }
+    componentDidLoad() {
+        this.validateControlFor();
+        this.slottedButton = this.host.querySelector('button');
+        // Check if the slottedButton is within a web component
+        if (!this.slottedButton) {
+            const webComponent = this.host.querySelector('.menu-trigger-webc');
+            if (webComponent.shadowRoot) {
+                const slottedButton = webComponent.shadowRoot.querySelector('button');
+                if (slottedButton) {
+                    this.slottedButton = slottedButton;
+                }
+            }
+        }
+        if (this.slottedButton) {
+            this.slottedButton.setAttribute('aria-haspopup', 'menu');
+            // Listen to the `toggleMenu` event emitted by the `post-menu` component
+            if (this.menu && this.slottedButton) {
+                this.menu.addEventListener('toggleMenu', (event) => {
+                    this.ariaExpanded = event.detail;
+                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                });
+            }
+            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: '84316d4a69c4231be636e5ff8971752d5af9bab2', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3091adcf7033c4dd25e49fa383ccb9773b2d226' })));
+    }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
+    static get style() { return PostMenuTriggerStyle0; }
+}, [4, "post-menu-trigger", {
+        "for": [1],
+        "ariaExpanded": [32]
+    }, undefined, {
+        "for": ["validateControlFor"]
+    }]);
+function defineCustomElement() {
+    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);
+            }
+            break;
+    } });
+}
+
+export { PostMenuTrigger as P, defineCustomElement as d };

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,6 @@
+import { P as PostMenu$1, d as defineCustomElement$1 } from './post-menu2.js';
+
+const PostMenu = PostMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostMenu, defineCustomElement };

package/loaders/post-menu2.js

@@ -0,0 +1,191 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { g as getFocusableChildren } from './get-focusable-children.js';
+import { g as getRoot } from './get-root.js';
+import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+
+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;
+
+const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toggleMenu = createEvent(this, "toggleMenu", 7);
+        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);
+        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);
+            requestAnimationFrame(() => {
+                if (this.isVisible) {
+                    this.lastFocusedElement = this.root.activeElement;
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                }
+                else if (this.lastFocusedElement) {
+                    this.lastFocusedElement.focus();
+                }
+            });
+        });
+    }
+    /**
+     * Toggles the menu visibility based on its current state.
+     */
+    async toggle(target) {
+        if (this.popoverRef) {
+            await this.popoverRef.toggle(target);
+        }
+        else {
+            console.error('toggle: popoverRef is null or undefined');
+        }
+    }
+    /**
+     * 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);
+        }
+        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();
+        }
+        else {
+            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) {
+            return;
+        }
+        let currentIndex = menuItems.findIndex(el => {
+            // Check if the item is currently focused within its rendered scope (document or shadow root)
+            return el === getRoot(el).activeElement;
+        });
+        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:
+                e.preventDefault();
+                currentIndex = menuItems.length - 1;
+                break;
+            case this.KEYCODES.SPACE:
+                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() : [];
+        return (slottedElements
+            // If the element is a slot, get the assigned elements
+            .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
+            // For each menu item, get any focusable children (e.g., buttons, links)
+            .flatMap(el => Array.from(getFocusableChildren(el))));
+    }
+    render() {
+        return (h(Host, { key: 'bbf51586a2b534d8784124547afb4e3a1b5c8dc8', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'd54ac2a016ca74fc9fe8a34cdde5ac42786cde9e', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'bbcd8c421bb6ac757c9d818ce6b56f343032ba74', class: "popover-container", part: "popover-container" }, h("slot", { key: 'af9513da5bb0c9d42b1f1d04af0fd9ee2a681e81' })))));
+    }
+    static get style() { return PostMenuStyle0; }
+}, [1, "post-menu", {
+        "placement": [1],
+        "isVisible": [32],
+        "toggle": [64],
+        "show": [64],
+        "hide": [64]
+    }]);
+function defineCustomElement() {
+    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);
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostMenu as P, defineCustomElement as d };

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:var(--post-scheme-color-interactive-button-secondary-enabled-fg);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}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.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:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:var(--post-scheme-color-surface-default-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:hover{color:HighlightText !important}}";
 const PostPopoverStyle0 = postPopoverCss;
 
 /**
@@ -12,14 +12,18 @@ const PostPopoverStyle0 = postPopoverCss;
 let popoverInstances = 0;
 const popoverTargetAttribute = 'data-popover-target';
 const globalToggleHandler = (e) => {
-    const target = e.target;
-    if (!target || !('getAttribute' in target))
-        return;
-    const popoverTarget = target.getAttribute(popoverTargetAttribute);
+    let currentElement = e.target;
+    // Traverse up the DOM tree to find if any parent has the popover target attribute
+    while (currentElement && !currentElement.getAttribute(popoverTargetAttribute)) {
+        if (currentElement === document.body || !currentElement.parentElement)
+            break;
+        currentElement = currentElement.parentElement;
+    }
+    const popoverTarget = currentElement?.getAttribute(popoverTargetAttribute);
     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(currentElement);
 };
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger => {
@@ -27,6 +31,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();
@@ -96,9 +103,8 @@ 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: 'ec1aab472fb8f7d6515050d90f6a8b20730640f0', "data-version": version }, h("post-popovercontainer", { key: 'beda133fe8cf98f9db6b61f2bf3e08b3549d3b86', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'dd0ad949ddc80632b3918cba539781cf23a46163', class: "popover-container" }, h("div", { key: '038dfcf60ff63b0fbe142c0e29db78fe13c5a51b', class: "popover-content" }, h("slot", { key: 'cabcedfbbd0dfc179a66bde0f9afd6a250e4fe1c' })), h("button", { key: 'bb8333e139158f3220c80380cd587e564664b612', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '285a90c985133c7b53150a649850a6e675fdb4d8', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
-    get host() { return this; }
     static get style() { return PostPopoverStyle0; }
 }, [1, "post-popover", {
         "placement": [1],