@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.34

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

@@ -1,6 +1,7 @@
 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 './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 
 const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
@@ -10,20 +11,45 @@ const PostMegadropdownTrigger = /*@__PURE__*/ proxyCustomElement(class PostMegad
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * 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) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
+                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());
+                    }
+                }
+            });
+        };
         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 mega dropdown control.
-     */
-    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.
-     */
-    wasExpanded = false;
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
@@ -45,32 +71,6 @@ const PostMegadropdownTrigger = /*@__PURE__*/ proxyCustomElement(class PostMegad
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
         }
     }
-    handleKeyDown = (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.handleToggle();
-            if (this.megadropdown && !this.ariaExpanded) {
-                setTimeout(() => this.megadropdown.focusFirst(), 100);
-            }
-        }
-    };
-    handleToggleMegadropdown = (event) => {
-        eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
-            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());
-                }
-            }
-        });
-    };
     componentDidLoad() {
         this.validateControlFor();
         // Check if the mega dropdown attached to the trigger is expanded or not
@@ -93,6 +93,7 @@ const PostMegadropdownTrigger = /*@__PURE__*/ proxyCustomElement(class PostMegad
     render() {
         return (h(Host, { key: '86b85efede8d9b19f3f0560f500f33f5e172177f', "data-version": version, "tab-index": "-1" }, h("button", { key: '0f810e4c38bc4abf23ac60ab27b36d408e7ced0d' }, h("slot", { key: '2a522ac7e15ef8ac077b73cdebf629b89ea173c6' }))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }

package/dist/components/post-megadropdown2.js

@@ -11,28 +11,34 @@ const PostMegadropdown = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown
         super();
         this.__registerHost();
         this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
+        this.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);
+        };
         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));
@@ -112,24 +118,6 @@ const PostMegadropdown = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown
             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));
@@ -172,6 +160,7 @@ const PostMegadropdown = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown
         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" }))))));
     }
+    get host() { return this; }
     static get style() { return PostMegadropdownStyle0; }
 }, [4, "post-megadropdown", {
         "device": [32],
@@ -182,6 +171,8 @@ const PostMegadropdown = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown
         "hide": [64],
         "focusFirst": [64]
     }]);
+/** Tracks the currently active dropdown instance. */
+PostMegadropdown.activeDropdown = null;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1,6 +1,7 @@
 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 './breakpoints.js';
 import { g as getRoot } from './get-root.js';
 
 const postMenuTriggerCss = ":host{display:inline-block}";
@@ -10,16 +11,20 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for menu control.
+         */
+        this.slottedButton = null;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleToggle();
+            }
+        };
         this.for = undefined;
         this.ariaExpanded = false;
     }
-    get host() { return this; }
-    /**
-     * Reference to the slotted button within the trigger, if present.
-     * Used to manage click and key events for menu control.
-     */
-    slottedButton = null;
-    root;
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
@@ -39,12 +44,6 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
             console.warn(`No post-menu found with ID: ${this.for}`);
         }
     }
-    handleKeyDown = (e) => {
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.handleToggle();
-        }
-    };
     connectedCallback() {
         this.root = getRoot(this.host);
     }
@@ -80,14 +79,15 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '84316d4a69c4231be636e5ff8971752d5af9bab2', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3091adcf7033c4dd25e49fa383ccb9773b2d226' })));
+        return (h(Host, { key: '1b9589febc2976d17eed3363d91b4321473b7b5e', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'bec55f97274084ab4721dc085dc9e1c3a216c0a3' })));
     }
+    get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }
     static get style() { return PostMenuTriggerStyle0; }
 }, [4, "post-menu-trigger", {
-        "for": [1],
+        "for": [513],
         "ariaExpanded": [32]
     }, undefined, {
         "for": ["validateControlFor"]

package/dist/components/post-menu2.js

@@ -1,8 +1,9 @@
 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 './breakpoints.js';
 import { e as eventGuard } from './event-guard.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}";
@@ -14,28 +15,54 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.toggleMenu = createEvent(this, "toggleMenu", 7);
+        this.lastFocusedElement = null;
+        this.KEYCODES = {
+            SPACE: ' ',
+            ENTER: 'Enter',
+            UP: 'ArrowUp',
+            DOWN: 'ArrowDown',
+            TAB: 'Tab',
+            HOME: 'Home',
+            END: 'End',
+            ESCAPE: 'Escape',
+        };
+        this.handleKeyDown = (e) => {
+            e.stopPropagation();
+            if (e.key === this.KEYCODES.ESCAPE) {
+                this.toggle(this.host);
+                return;
+            }
+            if (Object.values(this.KEYCODES).includes(e.key)) {
+                this.controlKeyDownHandler(e);
+            }
+        };
+        this.handlePostToggle = (event) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
+                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();
+                    }
+                });
+            });
+        };
+        this.handleClick = (e) => {
+            const target = e.target;
+            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+                this.toggle(this.host);
+            }
+        };
         this.placement = 'bottom';
         this.isVisible = false;
     }
-    popoverRef;
-    lastFocusedElement = null;
-    KEYCODES = {
-        SPACE: ' ',
-        ENTER: 'Enter',
-        UP: 'ArrowUp',
-        DOWN: 'ArrowDown',
-        TAB: 'Tab',
-        HOME: 'Home',
-        END: 'End',
-        ESCAPE: 'Escape',
-    };
-    get host() { return this; }
-    /**
-     * Emits when the menu is shown or hidden.
-     * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
-     **/
-    toggleMenu;
-    root;
     connectedCallback() {
         this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
@@ -86,40 +113,6 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             console.error('hide: popoverRef is null or undefined');
         }
     }
-    handleKeyDown = (e) => {
-        e.stopPropagation();
-        if (e.key === this.KEYCODES.ESCAPE) {
-            this.toggle(this.host);
-            return;
-        }
-        if (Object.values(this.KEYCODES).includes(e.key)) {
-            this.controlKeyDownHandler(e);
-        }
-    };
-    handlePostToggle = (event) => {
-        eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
-            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();
-                }
-            });
-        });
-    };
-    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) {
@@ -168,6 +161,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     render() {
         return (h(Host, { key: 'a86276a1fefccbb1f2b50f1ad74dd98ddcbdae5d', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'a0b2a35714ba370b7a73d92d1d6c036aa7039aea', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '98da2e21f8e4b4e02b4c347bc4f9238edc635b77', class: "popover-container", part: "popover-container" }, h("slot", { key: 'd3060c46482c5f3179827b8996a9a4b24abf49fa' })))));
     }
+    get host() { return this; }
     static get style() { return PostMenuStyle0; }
 }, [1, "post-menu", {
         "placement": [1],

package/dist/components/post-popover2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
+import { I as IS_BROWSER } from './breakpoints.js';
+import { v as version } from './package.js';
 import { d as defineCustomElement$1 } 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: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}}";
@@ -25,19 +26,15 @@ const globalToggleHandler = (e) => {
     const popover = document.getElementById(popoverTarget);
     popover?.toggle(currentElement);
 };
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger => {
-    const force = trigger.hasAttribute(popoverTargetAttribute);
-    trigger.setAttribute('aria-expanded', force ? 'false' : null);
-});
 const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
-    popoverRef;
-    localBeforeToggleHandler;
-    get host() { return this; }
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = IS_BROWSER
+            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
         this.placement = 'top';
         this.closeButtonCaption = undefined;
         this.arrow = true;
@@ -48,7 +45,7 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
         if (popoverInstances === 0) {
             window.addEventListener('pointerup', globalToggleHandler);
             window.addEventListener('keydown', globalToggleHandler);
-            triggerObserver.observe(document.body, {
+            this.triggerObserver?.observe(document.body, {
                 subtree: true,
                 childList: true,
                 attributeFilter: [popoverTargetAttribute],
@@ -66,7 +63,7 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
         if (popoverInstances === 0) {
             window.removeEventListener('click', globalToggleHandler);
             window.removeEventListener('keydown', globalToggleHandler);
-            triggerObserver.disconnect();
+            this.triggerObserver?.disconnect();
         }
         this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
         this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
@@ -102,9 +99,14 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
     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: '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))))));
+        return (h(Host, { key: '0eee6a532fc25170b70f2424b7238ae31f0efa2e', "data-version": version }, h("post-popovercontainer", { key: '52af51e794bd070a000fbdd5f0c05ee2f0c3ac1c', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '772b5efef90b136a38b69fccfce2d5607d46035a', class: "popover-container" }, h("div", { key: '8bfdf07447daa58f88c788f04fdfab483783ca7e', class: "popover-content" }, h("slot", { key: '7866899dbf93c856253e2448a0ca696499c94c12' })), h("button", { key: '5056fcd7654309c1f9810b8136ce472b6cf7946f', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '9f9c9b8007a6431367197d824ca42cfd7ca91761', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
+    get host() { return this; }
     static get style() { return PostPopoverStyle0; }
 }, [1, "post-popover", {
         "placement": [1],