@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

package/dist/components/post-language-switch.js

@@ -1,157 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as checkRequiredAndType, d as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
-import { E as EventFrom } from './event-from.js';
-import { v as version } from './package.js';
-import { S as SWITCH_VARIANTS } from './switch-variants.js';
-import { n as nanoid } from './index.browser.js';
-import { d as defineCustomElement$5 } from './post-icon2.js';
-import { d as defineCustomElement$4 } from './post-menu2.js';
-import { d as defineCustomElement$3 } from './post-menu-trigger2.js';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
-
-const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;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;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{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}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}post-menu::part(menu){padding-block:0}.post-language-switch-list{margin-top:1rem}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.menuId = `p${nanoid(11)}`;
-        this.listSpanId = `list-span-${nanoid(11)}`;
-        /**
-         * Whether the component is rendered as a list or a menu
-         */
-        this.variant = 'list';
-    }
-    get languageOptions() {
-        return Array.from(this.host.querySelectorAll('post-language-option'));
-    }
-    validateCaption() {
-        checkRequiredAndType(this, 'caption', 'string');
-    }
-    validateDescription() {
-        checkRequiredAndType(this, 'description', 'string');
-    }
-    validateVariant() {
-        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
-        this.updateChildrenVariant();
-    }
-    componentDidLoad() {
-        this.validateCaption();
-        this.validateDescription();
-        this.validateVariant();
-        // Initially set variants and active language
-        // Handles cases where the language-switch is rendered after the language-options have been rendered
-        this.updateChildrenVariant();
-    }
-    /**
-     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
-     */
-    handlePostChange(event) {
-        this.activeLang = event.detail;
-        // Update the active state in the children post-language-option components
-        this.languageOptions.forEach(lang => {
-            if (lang.code && lang.code === this.activeLang) {
-                lang.setAttribute('active', '');
-            }
-            else {
-                lang.removeAttribute('active');
-            }
-        });
-        // Hides the dropdown when an option has been clicked
-        if (this.variant === 'menu') {
-            const menu = this.host.shadowRoot.querySelector('post-menu');
-            menu.hide();
-        }
-    }
-    /**
-     * Handles cases where the language switch is being rendered before options are available
-     * @param event Initially emitted by <post-langauge-option>
-     */
-    handleInitiallyActive(event) {
-        this.activeLang = event.detail;
-    }
-    // Update post-language-option variant to have the correct style
-    updateChildrenVariant() {
-        this.languageOptions.forEach(el => {
-            el.setAttribute('variant', this.variant);
-        });
-    }
-    renderList() {
-        return (h(Host, { "data-version": version }, h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), h("slot", null))));
-    }
-    renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", label: this.caption }, h("slot", null))));
-    }
-    render() {
-        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "caption": ["validateCaption"],
-        "description": ["validateDescription"],
-        "variant": ["validateVariant"]
-    }; }
-    static get style() { return postLanguageSwitchCss; }
-}, [1, "post-language-switch", {
-        "caption": [513],
-        "description": [513],
-        "variant": [1],
-        "activeLang": [32]
-    }, [[0, "postChange", "handlePostChange"], [0, "postLanguageOptionInitiallyActive", "handleInitiallyActive"]], {
-        "caption": ["validateCaption"],
-        "description": ["validateDescription"],
-        "variant": ["validateVariant"]
-    }]);
-__decorate([
-    EventFrom('post-language-option')
-], PostLanguageSwitch$1.prototype, "handlePostChange", null);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-language-switch", "post-icon", "post-menu", "post-menu-trigger", "post-popovercontainer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-language-switch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostLanguageSwitch$1);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "post-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "post-menu-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PostLanguageSwitch = PostLanguageSwitch$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostLanguageSwitch, defineCustomElement };

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

@@ -1,38 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-
-const postListItemCss = ":host{display:flex}";
-
-const PostListItem$1 = /*@__PURE__*/ proxyCustomElement(class PostListItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    connectedCallback() {
-        this.host.setAttribute('slot', 'post-list-item');
-    }
-    render() {
-        return (h(Host, { key: '98f83a8ef6ff73461bfc7b67d8113543e94d66cb', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '1ee5c021183b30ba7b560a58042a196aa9c1127e' })));
-    }
-    get host() { return this; }
-    static get style() { return postListItemCss; }
-}, [1, "post-list-item"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-list-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostListItem$1);
-            }
-            break;
-    } });
-}
-
-const PostListItem = PostListItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostListItem, defineCustomElement };

package/dist/components/post-list.js

@@ -1,61 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { n as nanoid } from './index.browser.js';
-
-const postListCss = "post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-
-const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        /**
-         * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
-         */
-        this.titleHidden = false;
-        /**
-         * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
-         */
-        this.horizontal = false;
-    }
-    componentWillLoad() {
-        /**
-         * Get the id set on the host element or use a random id by default
-         */
-        this.titleId = `title-${this.host.id || nanoid(6)}`;
-    }
-    componentDidLoad() {
-        this.checkTitle();
-    }
-    checkTitle() {
-        if (!this.titleEl.textContent.trim()) {
-            console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
-        }
-    }
-    render() {
-        return (h(Host, { key: '85193bec2b2ff22ed76c93a4037f353b091192bc', "data-version": version }, h("div", { key: '32cdc5ccb95b48e3f81e90ac93f0207d935c9d3b', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '890dd411e370a7829354dcaa00fae75e8f538f01' })), h("div", { key: '72867a1d81f2e186ed3d68f5185a46c7c96fdd3b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '2cd5a5e9ca717c675f9db3a19fbf13ff49a7312c', name: "post-list-item" }))));
-    }
-    get host() { return this; }
-    static get style() { return postListCss; }
-}, [4, "post-list", {
-        "titleHidden": [4, "title-hidden"],
-        "horizontal": [516],
-        "titleId": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostList$1);
-            }
-            break;
-    } });
-}
-
-const PostList = PostList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostList, defineCustomElement };

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

@@ -1,52 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.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:#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}}:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
-
-const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    validateFor() {
-        checkRequiredAndType(this, 'panel', 'string');
-    }
-    componentWillLoad() {
-        this.tabId = `tab-${this.host.id || nanoid(6)}`;
-    }
-    render() {
-        return (h(Host, { key: 'b350fb9392e74af452470d72f97678aa1ac2d430', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '49722204330b3b2d760b8718b349b1417fd29a71' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "panel": ["validateFor"]
-    }; }
-    static get style() { return postTabHeaderCss; }
-}, [1, "post-tab-header", {
-        "panel": [513],
-        "tabId": [32]
-    }, undefined, {
-        "panel": ["validateFor"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tab-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tab-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTabHeader$1);
-            }
-            break;
-    } });
-}
-
-const PostTabHeader = PostTabHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostTabHeader, defineCustomElement };

package/dist/components/react/p-BVXiQdHq.js

@@ -1,64 +0,0 @@
-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) *',
-    '[tabindex^="-"]',
-    '[hidden]:not([hidden="false"])',
-].join(',')})`;
-function getFocusableChildren(element) {
-    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
-    return Array.from(focusableChildren).filter(isVisible);
-}
-// Searches deeper accross shadowDom
-function getDeepFocusableChildren(element) {
-    const results = [];
-    function traverse(node) {
-        if (isElementFocusable(node)) {
-            results.push(node);
-        }
-        if (node instanceof HTMLElement && node.shadowRoot) {
-            traverse(node.shadowRoot);
-        }
-        for (const child of Array.from(node.children)) {
-            traverse(child);
-        }
-        if (node instanceof HTMLElement) {
-            for (const slot of Array.from(node.querySelectorAll('slot'))) {
-                for (const el of slot.assignedElements({ flatten: true })) {
-                    traverse(el);
-                }
-            }
-        }
-    }
-    traverse(element);
-    return results;
-}
-function isVisible(el) {
-    const style = window.getComputedStyle(el.parentElement);
-    return style.display !== 'none' && style.visibility !== 'hidden';
-}
-function isElementFocusable(node) {
-    return (node instanceof HTMLElement &&
-        node.matches(`${focusableSelector}:not(${focusDisablingSelector})`) &&
-        isVisible(node));
-}
-
-export { getDeepFocusableChildren as a, getFocusableChildren as g };

package/dist/components/react/p-BhxZzOEC.js

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

package/dist/components/react/p-CSAMO7iJ.js

@@ -1,243 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-DVGEExot.js';
-import { v as version } from './p-BhxZzOEC.js';
-import { g as getFocusableChildren } from './p-BVXiQdHq.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CYkf_7Y5.js';
-import './p-CJ80BZ06.js';
-import { E as EventFrom } from './p-CzIKqBrS.js';
-import { g as getRoot } from './p-CBFgkSgY.js';
-
-const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.toggleMenu = createEvent(this, "toggleMenu");
-        this.lastFocusedElement = null;
-        this.KEYCODES = {
-            SPACE: ' ',
-            ENTER: 'Enter',
-            UP: 'ArrowUp',
-            DOWN: 'ArrowDown',
-            TAB: 'Tab',
-            HOME: 'Home',
-            END: 'End',
-            ESCAPE: 'Escape',
-        };
-        /**
-         * Defines the position of the menu relative to its trigger.
-         * Menus are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
-         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
-         */
-        this.placement = 'bottom';
-        /**
-         * Holds the current visibility state of the menu.
-         * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
-         * and updates automatically when the menu is toggled.
-         */
-        this.isVisible = false;
-        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.handlePostShown = (event) => {
-            // Only for the first open
-            if (event.detail.first) {
-                // Add "menu" and "menuitem" aria roles and aria-label
-                this.host.setAttribute('role', 'menu');
-                const menuItems = this.getSlottedItems();
-                for (const item of menuItems) {
-                    item.setAttribute('role', 'menuitem');
-                }
-                if (this.label)
-                    this.host.setAttribute('aria-label', this.label);
-            }
-        };
-        this.handlePostToggled = (event) => {
-            this.isVisible = event.detail.isOpen;
-            this.toggleMenu.emit(this.isVisible);
-            if (this.isVisible) {
-                this.lastFocusedElement = this.root?.activeElement;
-                requestAnimationFrame(() => {
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                });
-            }
-            else if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        };
-        this.handleClick = (e) => {
-            const target = e.target;
-            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-                this.toggle(this.host);
-            }
-        };
-    }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
-    }
-    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.validatePlacement();
-        this.validateLabel();
-    }
-    /**
-     * 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');
-        }
-    }
-    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.querySelectorAll('slot');
-        const slottedElements = [];
-        slot.forEach(slotItem => slottedElements.push(...slotItem.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: 'ab27eeef6ddcca57eb65ca9f7471809d9f78d7d1', "data-version": version }, h("post-popovercontainer", { key: 'c8053a6cbae6d22751e81107099180b95829b8c4', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'c60d336220b331cd7f3d5b896788f3fdcee090cf', part: "menu" }, h("slot", { key: '629b1f5dbe4074df6459bdfe64e1c0f836314e85', name: "header" }), h("slot", { key: 'c918bba494424db857e7e99fd80d24224bdeb9ed' })))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "placement": ["validatePlacement"],
-        "label": ["validateLabel"]
-    }; }
-    static get style() { return postMenuCss; }
-}, [1, "post-menu", {
-        "placement": [1],
-        "label": [513],
-        "isVisible": [32],
-        "toggle": [64],
-        "show": [64],
-        "hide": [64]
-    }, undefined, {
-        "placement": ["validatePlacement"],
-        "label": ["validateLabel"]
-    }]);
-__decorate([
-    EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostShown", void 0);
-__decorate([
-    EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggled", void 0);
-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;
-    } });
-}
-defineCustomElement();
-
-export { PostMenu as P, defineCustomElement as d };