@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/components/post-megadropdown-trigger.js

@@ -1,4 +1,135 @@
-import { P as PostMegadropdownTrigger$1, d as defineCustomElement$1 } from './post-megadropdown-trigger2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+
+const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}@media screen and (max-width: 1023.98px){post-megadropdown-trigger{z-index:4}}";
+
+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 PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
+         */
+        this.ariaExpanded = false;
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for mega dropdown control.
+         */
+        this.slottedButton = null;
+        /**
+         * Tracks whether this trigger's dropdown was expanded before a state change.
+         * Used to determine if this trigger should handle focus when its dropdown closes.
+         */
+        this.wasExpanded = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleToggle();
+                if (this.megadropdown && !this.ariaExpanded) {
+                    setTimeout(() => this.megadropdown.focusFirst(), 100);
+                }
+            }
+        };
+        this.handleToggleMegadropdown = (event) => {
+            if (event.target.id === this.for) {
+                this.ariaExpanded = event.detail.isVisible;
+                // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+                if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
+                    setTimeout(() => {
+                        this.slottedButton?.focus();
+                    }, 100);
+                }
+                this.wasExpanded = this.ariaExpanded;
+                if (this.slottedButton) {
+                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                }
+            }
+        };
+    }
+    /**
+     * 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() {
+        checkRequiredAndType(this, 'for', 'string');
+    }
+    get megadropdown() {
+        const ref = document.getElementById(this.for);
+        return ref && ref.localName === 'post-megadropdown'
+            ? ref
+            : null;
+    }
+    handleToggle() {
+        if (this.megadropdown) {
+            this.megadropdown.toggle();
+        }
+        else {
+            console.warn(`No post-megadropdown found with ID: ${this.for}`);
+        }
+    }
+    componentDidLoad() {
+        this.validateControlFor();
+        // Check if the mega dropdown attached to the trigger is expanded or not
+        document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+        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-megadropdown-trigger');
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+    }
+    render() {
+        return (h(Host, { key: '315c957a6cf876da48209096b9f30a7d94e72c08', "data-version": version, "tab-index": "-1" }, h("button", { key: '2533ded6277d2cf97c0c108df49823833486b4de' }, h("slot", { key: 'bf9b18545e11b30eb40d351794ca104035ed47db' }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
+    static get style() { return postMegadropdownTriggerCss; }
+}, [4, "post-megadropdown-trigger", {
+        "for": [1],
+        "ariaExpanded": [32]
+    }, undefined, {
+        "for": ["validateControlFor"]
+    }]);
+__decorate([
+    EventFrom('post-megadropdown', { ignoreNestedComponents: false })
+], PostMegadropdownTrigger$1.prototype, "handleToggleMegadropdown", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-megadropdown-trigger"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-megadropdown-trigger":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMegadropdownTrigger$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostMegadropdownTrigger = PostMegadropdownTrigger$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-megadropdown.js

@@ -1,4 +1,197 @@
-import { P as PostMegadropdown$1, d as defineCustomElement$1 } from './post-megadropdown2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as getFocusableChildren } from './p-C35MCWIp.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { b as breakpoint } from './p-Cx0AiN2A.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:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-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(--post-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 PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown");
+        this.device = breakpoint.get('device');
+        /**
+         * Holds the current visibility state of the dropdown.
+         * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+         * and updates automatically when the dropdown is toggled.
+         */
+        this.isVisible = false;
+        /** Holds the current animation class. */
+        this.animationClass = null;
+        this.handleClickOutside = (event) => {
+            if (this.device !== 'desktop')
+                return;
+            const target = event.target;
+            if (this.host.contains(target)) {
+                return;
+            }
+            if (target instanceof H) {
+                const trigger = target.closest('post-megadropdown-trigger');
+                if (trigger) {
+                    const targetDropdownId = trigger.getAttribute('for');
+                    if (targetDropdownId !== this.host.id) {
+                        return;
+                    }
+                }
+            }
+            this.hide(false);
+        };
+    }
+    breakpointChange(e) {
+        this.device = e.detail;
+        if (this.device === 'desktop' && this.isVisible) {
+            this.animationClass = null;
+        }
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        window.removeEventListener('postBreakpoint:device', 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:device', 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();
+        }
+    }
+    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: '3e846f475540067d9c58b60f636730a2b38a0aff', version: version }, h("div", { key: '47133c10dc15b7e5641a9fb47a1875ba89581e23', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '8f64dc9ef745ed4434fe00a48f76cc12b96e6443', class: "megadropdown" }, h("slot", { key: '5041727da18956a26ce43f870cde81264431cb23', name: "megadropdown-title" }), h("div", { key: '5ac34fe4ab27de09c9fc825c3999f2294abc624c', class: "megadropdown-content" }, h("slot", { key: 'f8917a15cd28082d0c0d88046f355aa85767255f' })), h("div", { key: '7fdaae11f771b92f11b2ed12be096f2936d9e08b', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'de791c42ef57abbde0ae9d24e1bcdb64b5e873cc', name: "back-button" })), h("div", { key: 'be88c1f94bc3eb7507e5de0a558a87a31936b6a0', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '444b996c0001f283279406d00708e4291d5af5bc', name: "close-button" }))))));
+    }
+    get host() { return this; }
+    static get style() { return postMegadropdownCss; }
+}, [4, "post-megadropdown", {
+        "device": [32],
+        "isVisible": [32],
+        "animationClass": [32],
+        "toggle": [64],
+        "show": [64],
+        "hide": [64],
+        "focusFirst": [64]
+    }]);
+/** Tracks the currently active dropdown instance. */
+PostMegadropdown$1.activeDropdown = null;
+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;
+    } });
+}
+defineCustomElement$1();
 
 const PostMegadropdown = PostMegadropdown$1;
 const defineCustomElement = defineCustomElement$1;

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

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

package/dist/components/post-menu-trigger.js

@@ -1,4 +1,4 @@
-import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './post-menu-trigger2.js';
+import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './p-CaPj3whI.js';
 
 const PostMenuTrigger = PostMenuTrigger$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-menu.js

@@ -1,4 +1,4 @@
-import { P as PostMenu$1, d as defineCustomElement$1 } from './post-menu2.js';
+import { P as PostMenu$1, d as defineCustomElement$1 } from './p-BLhBouGz.js';
 
 const PostMenu = PostMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-popover.js

@@ -1,4 +1,187 @@
-import { P as PostPopover$1, d as defineCustomElement$1 } from './post-popover2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-elg4VvHg.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { I as IS_BROWSER } from './p-Cx0AiN2A.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
+
+function getAttributeObserver(attribute, handler) {
+    /**
+     * Handle attribute changes and childList changes from the observer
+     * @param {MutationRecord[]} mutationList
+     */
+    function observerHandler(mutationList) {
+        mutationList.forEach(mutation => {
+            if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
+                handler(mutation.target);
+            }
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE &&
+                        node.hasAttribute(attribute)) {
+                        handler(node);
+                    }
+                });
+            }
+        });
+    }
+    // Initialize a mutation observer for patching accessibility features
+    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
+}
+
+const postPopoverCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.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}}";
+
+/**
+ * @slot default - Slot for placing content inside the popover.
+ */
+let popoverInstances = 0;
+const popoverTargetAttribute = 'data-popover-target';
+const globalToggleHandler = (e) => {
+    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?.toggle(currentElement);
+};
+const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H {
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateCloseButtonCaption() {
+        checkRequiredAndType(this, 'closeButtonCaption', 'string');
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = IS_BROWSER
+            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
+        /**
+         * Defines the position of the popover relative to its trigger.
+         * Popovers 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 = 'top';
+        /**
+         * Show a little indicator arrow
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.arrow = true;
+        this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
+    }
+    connectedCallback() {
+        // Set up accessibility patcher and event listeners for the first component
+        if (popoverInstances === 0) {
+            window.addEventListener('pointerup', globalToggleHandler);
+            window.addEventListener('keydown', globalToggleHandler);
+            this.triggerObserver?.observe(document.body, {
+                subtree: true,
+                childList: true,
+                attributeFilter: [popoverTargetAttribute],
+            });
+        }
+        popoverInstances++;
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    componentDidLoad() {
+        this.validatePlacement();
+        this.validateCloseButtonCaption();
+        this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
+    }
+    disconnectedCallback() {
+        popoverInstances--;
+        // Remove listeners and observer after the last popover has been destructed
+        if (popoverInstances === 0) {
+            window.removeEventListener('click', globalToggleHandler);
+            window.removeEventListener('keydown', globalToggleHandler);
+            this.triggerObserver?.disconnect();
+        }
+        this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
+        this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
+    }
+    /**
+     * Programmatically display the popover
+     * @param target An element with [data-popover-target="id"] where the popover should be shown
+     */
+    async show(target) {
+        this.popoverRef.show(target);
+        console.log(this.popoverRef);
+        target.setAttribute('aria-expanded', 'true');
+    }
+    /**
+     * Programmatically hide this popover
+     */
+    async hide() {
+        this.popoverRef.hide();
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    /**
+     * Toggle popover display
+     * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        const newState = await this.popoverRef.toggle(target, force);
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+        target.setAttribute('aria-expanded', `${newState}`);
+    }
+    get triggers() {
+        return document.querySelectorAll(`[${popoverTargetAttribute}="${this.host.id}"]`);
+    }
+    beforeToggleHandler() {
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    patchAccessibilityFeatures(trigger) {
+        const force = trigger.hasAttribute(popoverTargetAttribute);
+        trigger.setAttribute('aria-expanded', force ? 'false' : null);
+    }
+    render() {
+        return (h(Host, { key: 'fe756429b10af594a621b5769f129ee82b1aa6eb', "data-version": version }, h("post-popovercontainer", { key: '437b8c75fc878b3edb916887cfab3933ed08c7b2', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '082e00cb11a042cad036252743261395874b0a86', class: "popover-container" }, h("div", { key: 'be2e39304472bf351a524dc4f6eeb3ec9da8fc58', class: "popover-content" }, h("slot", { key: 'e1cd722828d3b136ad96553d81334b31de3289f9' })), h("button", { key: 'b6fa750860d95bf223da9224d6fa8531e577b3a5', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd3fb8e0e0e15c58df5b1aacfe5d4a6b90ec3843', class: "visually-hidden" }, this.closeButtonCaption))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "placement": ["validatePlacement"],
+        "closeButtonCaption": ["validateCloseButtonCaption"]
+    }; }
+    static get style() { return postPopoverCss; }
+}, [1, "post-popover", {
+        "placement": [1],
+        "closeButtonCaption": [1, "close-button-caption"],
+        "arrow": [4],
+        "show": [64],
+        "hide": [64],
+        "toggle": [64]
+    }, undefined, {
+        "placement": ["validatePlacement"],
+        "closeButtonCaption": ["validateCloseButtonCaption"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-popover", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-popover":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostPopover$1);
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostPopover = PostPopover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-popovercontainer.js

@@ -1,4 +1,4 @@
-import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './p-elg4VvHg.js';
 
 const PostPopovercontainer = PostPopovercontainer$1;
 const defineCustomElement = defineCustomElement$1;