bromcom-ui-next 0.1.29 → 0.1.30

package/dist/components/bcm-popover.js

@@ -1,16 +1,22 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-CzcTU1ty.js';
+import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, b as arrow } from './p-DBDSgIvP.js';
 import { t as tv } from './p-CEcVC0yX.js';
 
-const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
+const popoverCss = ".visible{visibility:visible}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}[popover]{border:none;overflow:visible;padding:0}[popover]:not(:popover-open){display:none}[popover]:popover-open{opacity:1;transform:scale(1);transition:opacity .15s ease-out,transform .15s ease-out}@starting-style{[popover]:popover-open{opacity:0;transform:scale(.95)}}[data-placement^=top] [part=arrow]{border-left:none;border-top:none}[data-placement^=bottom] [part=arrow]{border-bottom:none;border-right:none}[data-placement^=left] [part=arrow]{border-bottom:none;border-left:none}[data-placement^=right] [part=arrow]{border-right:none;border-top:none}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.m-0{margin:0}.inline-block{display:inline-block}.flex{display:flex}.h-3{height:.75rem}.w-3{width:.75rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
 
 const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.bcmPopoverOpen = createEvent(this, "bcmPopoverOpen", 1);
-        this.bcmPopoverClose = createEvent(this, "bcmPopoverClose", 1);
+        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 1);
+        this.bcmOpen = createEvent(this, "bcmOpen", 1);
+        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 1);
+        this.bcmClose = createEvent(this, "bcmClose", 1);
+        // Unique ID for ARIA
+        this.popoverId = `popover-${Math.random().toString(36).substring(2, 11)}`;
         /**
          * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.
          * Controls the text size and padding of the popover content.
@@ -24,105 +30,171 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
          */
         this.placement = 'top';
         /**
-         * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.
-         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+         * @prop {('click' | 'hover' | 'hover focus')} trigger - Defines the interaction type to show/hide the popover.
+         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'hover focus' combines both.
          * Default: 'click'
          */
         this.trigger = 'click';
         /**
-         * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.
-         * Adds a delay to prevent flickering on quick mouse movements.
-         * Default: 150
+         * @prop {number} showDelay - Delay in milliseconds before showing the popover.
+         * Useful to prevent popovers from appearing on quick mouse movements.
+         * Default: 0
+         */
+        this.showDelay = 0;
+        /**
+         * @prop {number} hideDelay - Delay in milliseconds before hiding the popover.
+         * Provides a grace period for mouse movements.
+         * Default: 0
          */
-        this.hoverDelay = 150;
+        this.hideDelay = 0;
         /**
-         * @prop {boolean} open - Indicates whether the popover is currently open.
-         * Can be set programmatically or toggled by user interaction. Mutable.
+         * @prop {boolean} open - Controls the open state of the popover.
+         * Can be set programmatically or toggled by user interaction.
          * Default: false
          */
         this.open = false;
-        this.togglePopover = () => {
-            this.open = !this.open;
-            if (this.open) {
-                this.bcmPopoverOpen.emit();
-            }
-            else {
-                this.bcmPopoverClose.emit();
+        /**
+         * @prop {boolean} closeOnOutsideClick - Whether to close the popover when clicking outside.
+         * Default: true
+         */
+        this.closeOnOutsideClick = true;
+        /**
+         * @prop {boolean} closeOnEscape - Whether to close the popover when pressing Escape key.
+         * Default: true
+         */
+        this.closeOnEscape = true;
+        /**
+         * @prop {boolean} arrow - Whether to show an arrow pointing to the trigger element.
+         * Default: true
+         */
+        this.arrow = true;
+        // Internal state
+        this.isOpen = false;
+        this.handleSlotChange = () => {
+            var _a;
+            const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+            if (!slot)
+                return;
+            const elements = slot.assignedElements();
+            if (elements.length > 0) {
+                // Remove old listeners
+                this.removeTriggerListeners();
+                this.triggerRef = elements[0];
+                this.setupTriggerListeners();
+                this.setupAriaAttributes();
             }
-            this.updatePosition();
         };
-        this.showPopover = () => {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = setTimeout(() => {
-                this.open = true;
-                this.bcmPopoverOpen.emit();
-                this.updatePosition();
-            }, this.hoverDelay);
+        this.handleMouseEnter = () => {
+            this.show();
         };
-        this.hidePopover = () => {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = setTimeout(() => {
-                this.open = false;
-                this.bcmPopoverClose.emit();
-            }, this.hoverDelay);
+        this.handleMouseLeave = () => {
+            this.hide();
         };
-        this.handleSlotChange = () => {
-            const slot = this.el.shadowRoot.querySelector('slot');
-            const elements = slot.assignedElements();
-            this.targetElement = elements[0];
-            if (this.targetElement) {
-                this.targetElement.removeEventListener('click', this.togglePopover);
-                this.targetElement.removeEventListener('mouseenter', this.showPopover);
-                this.targetElement.removeEventListener('mouseleave', this.hidePopover);
-                if (this.trigger === 'click') {
-                    this.targetElement.addEventListener('click', this.togglePopover);
-                    this.targetElement.setAttribute('aria-expanded', this.open.toString());
-                }
-                if (this.trigger === 'hover') {
-                    this.targetElement.addEventListener('mouseenter', this.showPopover);
-                    this.targetElement.addEventListener('mouseleave', this.hidePopover);
-                }
-                if (this.popoverElement && !this.cleanupAutoUpdate) {
-                    this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());
-                }
-            }
+        this.handlePopoverMouseEnter = () => {
+            this.clearTimeouts();
+        };
+        this.handlePopoverMouseLeave = () => {
+            this.hide();
+        };
+        this.handleTriggerClick = (event) => {
+            event.stopPropagation();
+            this.toggle();
+        };
+        this.handleFocus = () => {
+            this.show();
+        };
+        this.handleBlur = () => {
+            this.hide();
         };
         this.handleOutsideClick = (event) => {
-            if (!this.el.contains(event.target) && this.open) {
-                this.open = false;
+            var _a;
+            if (!this.closeOnOutsideClick || !this.open)
+                return;
+            const target = event.target;
+            const path = event.composedPath();
+            const isInsideHost = this.host.contains(target) || path.includes(this.host);
+            const isInsidePopover = ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.contains(target)) || (this.popoverRef && path.includes(this.popoverRef));
+            if (!isInsideHost && !isInsidePopover) {
+                this.hide();
+            }
+        };
+        this.handleToggle = (event) => {
+            // Sync internal state with native popover state
+            if (event.newState === 'open' && !this.isOpen) {
+                this.isOpen = true;
+            }
+            else if (event.newState === 'closed' && this.isOpen) {
+                this.isOpen = false;
             }
         };
         this.updatePosition = async () => {
-            if (!this.targetElement || !this.popoverElement || !this.arrowElement)
+            if (!this.triggerRef || !this.popoverRef)
+                return;
+            // Check if trigger element is still in viewport
+            const triggerRect = this.triggerRef.getBoundingClientRect();
+            const isInViewport = triggerRect.bottom > 0 && triggerRect.top < window.innerHeight && triggerRect.right > 0 && triggerRect.left < window.innerWidth;
+            // Hide popover if trigger is out of viewport
+            if (!isInViewport && this.open) {
+                this.hide();
                 return;
-            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {
+            }
+            // Virtual element for shadow DOM boundary
+            const virtualElement = {
+                getBoundingClientRect: () => this.triggerRef.getBoundingClientRect(),
+            };
+            const middleware = [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 })];
+            if (this.arrow && this.arrowRef) {
+                middleware.push(arrow({ element: this.arrowRef }));
+            }
+            const { x, y, placement, middlewareData } = await computePosition(virtualElement, this.popoverRef, {
                 placement: this.placement,
-                middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
+                strategy: 'fixed',
+                middleware,
             });
-            Object.assign(this.popoverElement.style, {
+            Object.assign(this.popoverRef.style, {
                 left: `${x}px`,
                 top: `${y}px`,
             });
-            const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };
-            const basePlacement = placement.split('-')[0];
-            const staticSide = {
-                top: 'bottom',
-                right: 'left',
-                bottom: 'top',
-                left: 'right',
-            }[basePlacement];
-            Object.assign(this.arrowElement.style, {
-                left: arrowX != null ? `${arrowX}px` : '',
-                top: arrowY != null ? `${arrowY}px` : '',
-                [staticSide]: '-4px',
-            });
+            // Update placement attribute for CSS
+            this.popoverRef.setAttribute('data-placement', placement);
+            // Arrow positioning
+            if (this.arrow && this.arrowRef && middlewareData.arrow) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                const basePlacement = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[basePlacement];
+                Object.assign(this.arrowRef.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    [staticSide]: '-4px',
+                });
+            }
         };
         this.popoverClass = tv({
             slots: {
-                box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',
+                box: [
+                    'bcm-ui-element',
+                    'bcm-popover',
+                    'fixed',
+                    'm-0',
+                    'flex',
+                    'flex-col',
+                    'bg-[--popover-bg]',
+                    'rounded-md',
+                    'shadow-3',
+                    'p-3',
+                    'gap-1.5',
+                    'min-w-max',
+                ],
                 header: 'font-semibold text-color',
                 content: 'font-normal text-color',
-                arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',
+                arrow: 'absolute w-3 h-3 bg-[--popover-bg] transform rotate-45',
             },
             variants: {
                 size: {
@@ -130,67 +202,240 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
                     medium: { box: 'text-size-4' },
                     large: { box: 'text-size-5' },
                 },
-                isOpen: {
-                    true: { box: 'flex' },
-                    false: { box: 'hidden' },
-                },
             },
             defaultVariants: {
                 size: 'medium',
-                isOpen: false,
             },
         });
     }
-    connectedCallback() {
-        document.addEventListener('click', this.handleOutsideClick);
+    // Watch for open prop changes
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.showInternal();
+        }
+        else {
+            this.hideInternal();
+        }
     }
-    disconnectedCallback() {
+    // Internal show logic
+    showInternal() {
         var _a;
-        document.removeEventListener('click', this.handleOutsideClick);
-        if (this.targetElement) {
-            this.targetElement.removeEventListener('click', this.togglePopover);
-            this.targetElement.removeEventListener('mouseenter', this.showPopover);
-            this.targetElement.removeEventListener('mouseleave', this.hidePopover);
+        if (!this.popoverRef)
+            return;
+        this.isOpen = true;
+        this.popoverRef.showPopover();
+        this.startAutoUpdate();
+        this.updatePosition();
+        (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+        this.bcmOpen.emit();
+        if (this.closeOnOutsideClick) {
+            this.addOutsideClickListener();
         }
-        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.cleanupAutoUpdate = null;
-        clearTimeout(this.hoverTimeout);
+    }
+    // Internal hide logic
+    hideInternal() {
+        var _a;
+        if (!this.popoverRef)
+            return;
+        this.isOpen = false;
+        this.popoverRef.hidePopover();
+        this.stopAutoUpdate();
+        (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+        this.bcmClose.emit();
+        this.removeOutsideClickListener();
     }
     /**
-     * @method {Promise<void>} openPopup - Programmatically opens the popover.
-     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
-     * @returns {Promise<void>} A promise that resolves when the popover is opened.
+     * Programmatically shows the popover.
+     * Respects the showDelay prop.
      */
-    async openPopup() {
-        this.showPopover();
+    async show() {
+        if (this.open)
+            return;
+        this.clearTimeouts();
+        if (this.showDelay > 0) {
+            this.showTimeout = window.setTimeout(() => {
+                this.bcmBeforeOpen.emit();
+                this.open = true;
+            }, this.showDelay);
+        }
+        else {
+            this.bcmBeforeOpen.emit();
+            this.open = true;
+        }
     }
     /**
-     * @method {Promise<void>} closePopup - Programmatically closes the popover.
-     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
-     * @returns {Promise<void>} A promise that resolves when the popover is closed.
+     * Programmatically hides the popover.
+     * Respects the hideDelay prop.
      */
-    async closePopup() {
-        this.hidePopover();
+    async hide() {
+        if (!this.open)
+            return;
+        this.clearTimeouts();
+        if (this.hideDelay > 0) {
+            this.hideTimeout = window.setTimeout(() => {
+                this.bcmBeforeClose.emit();
+                this.open = false;
+            }, this.hideDelay);
+        }
+        else {
+            this.bcmBeforeClose.emit();
+            this.open = false;
+        }
+    }
+    /**
+     * Toggles the popover visibility.
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+    startAutoUpdate() {
+        if (!this.triggerRef || !this.popoverRef)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.popoverRef, () => this.updatePosition(), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: true,
+            layoutShift: true,
+        });
+    }
+    stopAutoUpdate() {
+        var _a;
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = undefined;
+    }
+    setupTriggerListeners() {
+        var _a, _b;
+        if (!this.triggerRef)
+            return;
+        if (this.trigger === 'hover' || this.trigger === 'hover focus') {
+            this.triggerRef.addEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerRef.addEventListener('mouseleave', this.handleMouseLeave);
+            (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.handlePopoverMouseEnter);
+            (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.handlePopoverMouseLeave);
+        }
+        if (this.trigger === 'click') {
+            this.triggerRef.addEventListener('click', this.handleTriggerClick);
+        }
+        if (this.trigger === 'hover focus') {
+            this.triggerRef.addEventListener('focus', this.handleFocus);
+            this.triggerRef.addEventListener('blur', this.handleBlur);
+        }
+    }
+    removeTriggerListeners() {
+        var _a, _b;
+        if (!this.triggerRef)
+            return;
+        this.triggerRef.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.triggerRef.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.triggerRef.removeEventListener('click', this.handleTriggerClick);
+        this.triggerRef.removeEventListener('focus', this.handleFocus);
+        this.triggerRef.removeEventListener('blur', this.handleBlur);
+        (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.handlePopoverMouseEnter);
+        (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.handlePopoverMouseLeave);
+    }
+    setupAriaAttributes() {
+        if (!this.triggerRef)
+            return;
+        this.triggerRef.setAttribute('aria-describedby', this.popoverId);
+        this.triggerRef.setAttribute('aria-expanded', String(this.open));
+        this.triggerRef.setAttribute('aria-haspopup', 'dialog');
+    }
+    handleKeyDown(event) {
+        var _a;
+        if (!this.closeOnEscape || !this.open)
+            return;
+        if (event.key === 'Escape') {
+            // Topmost popover check
+            const openPopovers = Array.from(document.querySelectorAll('bcm-popover[open]'));
+            const topPopover = openPopovers[openPopovers.length - 1];
+            if (topPopover === this.host) {
+                event.preventDefault();
+                this.hide();
+                (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    }
+    addOutsideClickListener() {
+        // Add on next tick to avoid catching current click
+        setTimeout(() => {
+            document.addEventListener('click', this.handleOutsideClick, true);
+        }, 0);
+    }
+    removeOutsideClickListener() {
+        document.removeEventListener('click', this.handleOutsideClick, true);
+    }
+    componentDidLoad() {
+        var _a;
+        // Toggle event listener (Popover API)
+        (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handleToggle);
+        // Initial state sync
+        if (this.open) {
+            this.showInternal();
+        }
+    }
+    disconnectedCallback() {
+        this.clearTimeouts();
+        this.stopAutoUpdate();
+        this.removeTriggerListeners();
+        this.removeOutsideClickListener();
+        if (this.popoverRef) {
+            this.popoverRef.removeEventListener('toggle', this.handleToggle);
+            if (this.isOpen) {
+                try {
+                    this.popoverRef.hidePopover();
+                }
+                catch (e) {
+                    // Element might already be removed
+                }
+            }
+        }
     }
     render() {
-        const { box, header, content, arrow } = this.popoverClass({
-            isOpen: this.open,
+        const { box, header, content, arrow: arrowClass } = this.popoverClass({
             size: this.size,
         });
-        return (h("div", { key: 'b81215e32d99dcfcc8515112267c3c2238379de8', class: "relative" }, h("slot", { key: 'd766006614697458b5343a55d387cb11ae1be04b', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '1016451410fa02ec500f3ed3f29f2203830ccb40', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: '199e69dd49ac7f920f402e9b44acc946406ba625', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: '3adfb07eae7e0c437768c1fb2a1d0b086ee40c4b', class: header(), part: "header" }, h("slot", { key: 'e6fc16d74640eca36ce78dc79cc8f2442f318516', name: "header" }, this.headerText)), h("div", { key: 'ac7b023e5c2ec83be9ef9d07e5b6215e71131813', class: content(), part: "content" }, h("slot", { key: '876c5b841f3ba597900b5950e8b56e0fa859ecdd', name: "content" }, this.message)))));
+        return (h("div", { key: '79e275204246ae56d255cf6eb3cd048631d4e89b', class: "inline-block" }, h("slot", { key: '787bce1db3d40d8e95631e4963011432f567ce38', onSlotchange: this.handleSlotChange }), h("div", { key: '11aac4ed45dfc6ea5ac73df72c1f95708c02b033', ref: el => (this.popoverRef = el), id: this.popoverId, part: "popover", class: box(),
+            // @ts-ignore - popover is a valid HTML attribute
+            popover: "manual", role: "dialog", "aria-labelledby": this.headerText ? `${this.popoverId}-header` : undefined }, this.arrow && h("div", { key: '86eff698c15414eac0b8341d0378deae0ffa9f22', ref: el => (this.arrowRef = el), part: "arrow", class: arrowClass() }), h("div", { key: '9ab131a4a26f552c9628dcec39dbfea8244abeb2', id: `${this.popoverId}-header`, part: "header", class: header() }, h("slot", { key: 'f9db05dc65149e097d086f7c93ee8962e7e2c32f', name: "header" }, this.headerText)), h("div", { key: '9e03b53071f8f3cf22e1347eaa812ecaf6e806a8', part: "content", class: content() }, h("slot", { key: '771733f668c6fd1d6f7a2f73b994a4ba906f2b6b', name: "content" }, this.message)))));
     }
-    get el() { return this; }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
     static get style() { return popoverCss; }
 }, [257, "bcm-popover", {
         "size": [1],
         "placement": [1],
         "trigger": [1],
-        "hoverDelay": [2, "hover-delay"],
-        "open": [1028],
+        "showDelay": [2, "show-delay"],
+        "hideDelay": [2, "hide-delay"],
+        "open": [1540],
+        "closeOnOutsideClick": [4, "close-on-outside-click"],
+        "closeOnEscape": [4, "close-on-escape"],
         "headerText": [1, "header-text"],
         "message": [1],
-        "openPopup": [64],
-        "closePopup": [64]
+        "arrow": [4],
+        "isOpen": [32],
+        "show": [64],
+        "hide": [64],
+        "toggle": [64]
+    }, [[4, "keydown", "handleKeyDown"]], {
+        "open": ["handleOpenChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {