bromcom-ui-next 0.1.28 → 0.1.30

package/dist/collection/components/popover/popover.component.js

@@ -4,7 +4,8 @@ import { tv } from "../../utils/tv";
 /**
  * @component BcmPopover
  * @description A flexible popover component that displays contextual information or content relative to a target element.
- * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+ * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.
  *
  * @example Basic Click Popover
  * <bcm-popover trigger="click" size="medium" placement="top">
@@ -13,8 +14,8 @@ import { tv } from "../../utils/tv";
  *   <span slot="content">This is a simple popover content.</span>
  * </bcm-popover>
  *
- * @example Hover Popover with Props
- * <bcm-popover trigger="hover" hover-delay="200" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
+ * @example Hover Popover with Delays
+ * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
  *   <bcm-button>Hover Me</bcm-button>
  * </bcm-popover>
  *
@@ -25,8 +26,9 @@ import { tv } from "../../utils/tv";
  * </bcm-popover>
  * <script>
  *   const popover = document.querySelector('#my-popover');
- *   popover.openPopup(); // Opens the popover
- *   popover.closePopup(); // Closes the popover
+ *   popover.show(); // Opens the popover
+ *   popover.hide(); // Closes the popover
+ *   popover.toggle(); // Toggles the popover
  * </script>
  *
  * @slot - Default slot for the target element that triggers the popover
@@ -40,6 +42,8 @@ import { tv } from "../../utils/tv";
  */
 export class Popover {
     constructor() {
+        // 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.
@@ -53,105 +57,171 @@ export class Popover {
          */
         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.hoverDelay = 150;
+        this.showDelay = 0;
         /**
-         * @prop {boolean} open - Indicates whether the popover is currently open.
-         * Can be set programmatically or toggled by user interaction. Mutable.
+         * @prop {number} hideDelay - Delay in milliseconds before hiding the popover.
+         * Provides a grace period for mouse movements.
+         * Default: 0
+         */
+        this.hideDelay = 0;
+        /**
+         * @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;
-            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {
+            // 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;
+            }
+            // 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: {
@@ -159,54 +229,216 @@ export class Popover {
                     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();
+        }
+    }
+    // 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();
+    }
+    /**
+     * Programmatically shows the popover.
+     * Respects the showDelay prop.
+     */
+    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;
         }
-        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.cleanupAutoUpdate = null;
-        clearTimeout(this.hoverTimeout);
     }
     /**
-     * @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 hides the popover.
+     * Respects the hideDelay prop.
      */
-    async openPopup() {
-        this.showPopover();
+    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;
+        }
     }
     /**
-     * @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.
+     * Toggles the popover visibility.
      */
-    async closePopup() {
-        this.hidePopover();
+    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)))));
     }
     static get is() { return "bcm-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -224,7 +456,6 @@ export class Popover {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -243,11 +474,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'right' | 'bottom' | 'left'",
@@ -266,15 +497,15 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'top'"
             },
             "trigger": {
                 "type": "string",
-                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
-                    "original": "'click' | 'hover'",
-                    "resolved": "\"click\" | \"hover\"",
+                    "original": "'click' | 'hover' | 'hover focus'",
+                    "resolved": "\"click\" | \"hover focus\" | \"hover\"",
                     "references": {}
                 },
                 "required": false,
@@ -282,18 +513,41 @@ export class Popover {
                 "docs": {
                     "tags": [{
                             "name": "prop",
-                            "text": "{('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\nDefault: 'click'"
+                            "text": "{('click' | 'hover' | 'hover focus')} trigger - Defines the interaction type to show/hide the popover.\n'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'hover focus' combines both.\nDefault: 'click'"
                         }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "trigger",
                 "defaultValue": "'click'"
             },
-            "hoverDelay": {
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{number} showDelay - Delay in milliseconds before showing the popover.\nUseful to prevent popovers from appearing on quick mouse movements.\nDefault: 0"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delay",
+                "defaultValue": "0"
+            },
+            "hideDelay": {
                 "type": "number",
-                "attribute": "hover-delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -305,18 +559,18 @@ export class Popover {
                 "docs": {
                     "tags": [{
                             "name": "prop",
-                            "text": "{number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\nAdds a delay to prevent flickering on quick mouse movements.\nDefault: 150"
+                            "text": "{number} hideDelay - Delay in milliseconds before hiding the popover.\nProvides a grace period for mouse movements.\nDefault: 0"
                         }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "150"
+                "attribute": "hide-delay",
+                "defaultValue": "0"
             },
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -328,18 +582,64 @@ export class Popover {
                 "docs": {
                     "tags": [{
                             "name": "prop",
-                            "text": "{boolean} open - Indicates whether the popover is currently open.\nCan be set programmatically or toggled by user interaction. Mutable.\nDefault: false"
+                            "text": "{boolean} open - Controls the open state of the popover.\nCan be set programmatically or toggled by user interaction.\nDefault: false"
                         }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
+            "closeOnOutsideClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} closeOnOutsideClick - Whether to close the popover when clicking outside.\nDefault: true"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-outside-click",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} closeOnEscape - Whether to close the popover when pressing Escape key.\nDefault: true"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            },
             "headerText": {
                 "type": "string",
-                "attribute": "header-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -347,7 +647,7 @@ export class Popover {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "prop",
@@ -357,11 +657,11 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "header-text"
             },
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -369,7 +669,7 @@ export class Popover {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "prop",
@@ -379,21 +679,86 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "message"
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} arrow - Whether to show an arrow pointing to the trigger element.\nDefault: true"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow",
+                "defaultValue": "true"
             }
         };
     }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
     static get events() {
         return [{
-                "method": "bcmPopoverOpen",
-                "name": "bcmPopoverOpen",
+                "method": "bcmBeforeOpen",
+                "name": "bcmBeforeOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmBeforeOpen - Emitted before the popover opens.\nUseful for performing actions before the popover becomes visible."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmOpen",
+                "name": "bcmOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmOpen - Emitted when the popover is opened.\nUseful for tracking when the popover becomes visible."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmBeforeClose",
+                "name": "bcmBeforeClose",
                 "bubbles": false,
                 "cancelable": true,
                 "composed": false,
                 "docs": {
                     "tags": [{
                             "name": "event",
-                            "text": "{EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\nUseful for tracking when the popover becomes visible."
+                            "text": "bcmBeforeClose - Emitted before the popover closes.\nUseful for performing actions before the popover is hidden."
                         }],
                     "text": ""
                 },
@@ -403,15 +768,15 @@ export class Popover {
                     "references": {}
                 }
             }, {
-                "method": "bcmPopoverClose",
-                "name": "bcmPopoverClose",
+                "method": "bcmClose",
+                "name": "bcmClose",
                 "bubbles": false,
                 "cancelable": true,
                 "composed": false,
                 "docs": {
                     "tags": [{
                             "name": "event",
-                            "text": "{EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\nUseful for tracking when the popover is hidden."
+                            "text": "bcmClose - Emitted when the popover is closed.\nUseful for tracking when the popover is hidden."
                         }],
                     "text": ""
                 },
@@ -424,7 +789,7 @@ export class Popover {
     }
     static get methods() {
         return {
-            "openPopup": {
+            "show": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -437,17 +802,11 @@ export class Popover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "method",
-                            "text": "{Promise<void>} openPopup - Programmatically opens the popover.\nTriggers the showPopover logic to display the popover with the specified hover delay (if applicable)."
-                        }, {
-                            "name": "returns",
-                            "text": "A promise that resolves when the popover is opened."
-                        }]
+                    "text": "Programmatically shows the popover.\nRespects the showDelay prop.",
+                    "tags": []
                 }
             },
-            "closePopup": {
+            "hide": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -460,18 +819,44 @@ export class Popover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "method",
-                            "text": "{Promise<void>} closePopup - Programmatically closes the popover.\nTriggers the hidePopover logic to hide the popover with the specified hover delay (if applicable)."
-                        }, {
-                            "name": "returns",
-                            "text": "A promise that resolves when the popover is closed."
-                        }]
+                    "text": "Programmatically hides the popover.\nRespects the hideDelay prop.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover visibility.",
+                    "tags": []
                 }
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=popover.component.js.map