bromcom-ui-next 0.1.29 → 0.1.31

package/dist/collection/components/pop-confirm/pop-confirm.component.js

@@ -1,297 +1,528 @@
-import { h, Fragment } from "@stencil/core";
-import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";
+import { h } from "@stencil/core";
+import { computePosition, flip, shift, offset, arrow, autoUpdate } from "@floating-ui/dom";
 import { tv } from "../../utils/tv";
-// Status icons for different states
 const statusIcons = {
     info: 'fa-solid fa-circle-info',
     success: 'fa-solid fa-circle-check',
     warning: 'fa-solid fa-triangle-exclamation',
-    error: 'fa-solid fa-circle-x',
+    error: 'fa-solid fa-circle-xmark',
 };
 /**
  * @component BcmPopConfirm
- * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.
- * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.
+ * @description A confirmation popover component that displays a confirmation dialog with customizable actions.
+ * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+ * Ideal for confirming destructive actions or important decisions inline.
  *
- * @example Basic usage
- * <bcm-pop-confirm target-id="trigger-btn" placement="right" header-text="Confirm Action" description="Are you sure?" confirm-text="Yes" cancel-text="No" status="warning"></bcm-pop-confirm>
+ * @slot - Default slot for the trigger element that opens the confirmation popover
+ * @slot header - Custom header content (overrides headerText prop)
+ * @slot body - Custom body content (overrides description prop)
+ * @slot footer - Custom footer content with action buttons (overrides default confirm/cancel buttons)
  *
- * @example With all slots and custom styling
- * <bcm-pop-confirm target-id="trigger-btn" placement="left" header-text="Delete Item" description="Are you sure you want to delete this item?" confirm-text="Delete" cancel-text="Cancel" status="error" arrow-color="#ffffff">
- *   <span slot="header">Custom Header Text</span>
- *   <span slot="body">Additional details here</span>
- *   <span slot="footer">Custom Footer Action</span>
+ * @csspart container - The main popover container element
+ * @csspart arrow - The arrow pointer element
+ * @csspart body - The body/description section
+ * @csspart footer - The footer section with action buttons
+ *
+ * @example Basic Usage
+ * ```html
+ * <bcm-pop-confirm
+ *   header-text="Delete Item?"
+ *   description="Are you sure you want to delete this item? This action cannot be undone."
+ *   status="error"
+ * >
+ *   <bcm-button status="error">Delete</bcm-button>
+ * </bcm-pop-confirm>
+ * ```
+ *
+ * @example With Event Handlers
+ * ```html
+ * <bcm-pop-confirm
+ *   id="deleteConfirm"
+ *   header-text="Confirm Delete"
+ *   description="This will permanently delete the item."
+ *   status="warning"
+ *   confirm-text="Yes, Delete"
+ *   cancel-text="No, Keep It"
+ * >
+ *   <bcm-button>Delete Item</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <script>
+ *   const popconfirm = document.getElementById('deleteConfirm');
+ *   popconfirm.addEventListener('bcmConfirm', () => {
+ *     console.log('User confirmed deletion');
+ *     // Perform delete operation
+ *   });
+ *   popconfirm.addEventListener('bcmCancel', () => {
+ *     console.log('User cancelled deletion');
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Different Status Types
+ * ```html
+ * <!-- Info (default) -->
+ * <bcm-pop-confirm header-text="Information" description="This is an info message">
+ *   <bcm-button>Info</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <!-- Success -->
+ * <bcm-pop-confirm status="success" header-text="Confirm Action" description="Proceed with this action?">
+ *   <bcm-button status="success">Proceed</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <!-- Warning -->
+ * <bcm-pop-confirm status="warning" header-text="Warning" description="This action may have consequences">
+ *   <bcm-button status="warning">Continue</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <!-- Error/Danger -->
+ * <bcm-pop-confirm status="error" header-text="Danger Zone" description="This is a destructive action">
+ *   <bcm-button status="error">Delete</bcm-button>
  * </bcm-pop-confirm>
+ * ```
+ *
+ * @example Custom Content with Slots
+ * ```html
+ * <bcm-pop-confirm status="warning">
+ *   <bcm-button>Custom Confirm</bcm-button>
  *
- * @example Event handling
- * // Listen to confirmation events
- * const popConfirm = document.querySelector('bcm-pop-confirm');
- * popConfirm.addEventListener('bcmConfirm', () => {
- *   console.log('User confirmed the action!');
- * });
- * popConfirm.addEventListener('bcmCancel', () => {
- *   console.log('User canceled the action!');
- * });
+ *   <div slot="header">
+ *     <strong>Custom Header</strong>
+ *   </div>
  *
- * // Programmatically control pop-up
- * await popConfirm.show(); // Show the pop-up
- * await popConfirm.hide(); // Hide the pop-up
+ *   <div slot="body">
+ *     <p>This is custom body content with <strong>HTML formatting</strong>.</p>
+ *     <ul>
+ *       <li>Point 1</li>
+ *       <li>Point 2</li>
+ *     </ul>
+ *   </div>
  *
- * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')
- * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')
- * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')
- * @prop {string} description - The description or body content of the pop-up (default: '')
- * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')
- * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')
- * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')
- * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')
- * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)
- * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up
+ *   <div slot="footer">
+ *     <bcm-button kind="outline" size="small">Maybe Later</bcm-button>
+ *     <bcm-button status="success" size="small">Confirm</bcm-button>
+ *   </div>
+ * </bcm-pop-confirm>
+ * ```
  *
- * @slot header - Custom content for the header area (optional)
- * @slot body - Custom content for the main body area (optional, falls back to `description`)
- * @slot footer - Custom content for the footer area (optional)
+ * @example Different Sizes
+ * ```html
+ * <!-- Small -->
+ * <bcm-pop-confirm size="small" header-text="Small" description="Compact confirmation">
+ *   <bcm-button size="small">Small</bcm-button>
+ * </bcm-pop-confirm>
  *
- * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up
- * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up
+ * <!-- Medium (default) -->
+ * <bcm-pop-confirm size="medium" header-text="Medium" description="Standard confirmation">
+ *   <bcm-button size="medium">Medium</bcm-button>
+ * </bcm-pop-confirm>
  *
- * @csspart container - The root container element of the pop-up
- * @csspart header - The header section with title and close icon
- * @csspart content - The main content section of the pop-up
- * @csspart footer - The footer section with confirm/cancel buttons
- * @csspart arrow - The positioning arrow pointing to the trigger
+ * <!-- Large -->
+ * <bcm-pop-confirm size="large" header-text="Large" description="Spacious confirmation with more room for content">
+ *   <bcm-button size="large">Large</bcm-button>
+ * </bcm-pop-confirm>
+ * ```
  *
- * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)
- * @css {string} --popover-bg - Background color of the pop-up
- * @css {string} --text-color - Text color of the pop-up based on status
+ * @example Programmatic Control
+ * ```html
+ * <bcm-pop-confirm id="myConfirm" header-text="Confirm" description="Are you sure?">
+ *   <bcm-button>Trigger</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <bcm-button id="showBtn">Show Programmatically</bcm-button>
+ * <bcm-button id="hideBtn">Hide Programmatically</bcm-button>
+ *
+ * <script>
+ *   const popconfirm = document.getElementById('myConfirm');
+ *   document.getElementById('showBtn').addEventListener('click', () => {
+ *     popconfirm.show();
+ *   });
+ *   document.getElementById('hideBtn').addEventListener('click', () => {
+ *     popconfirm.hide();
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Without Status Icon
+ * ```html
+ * <bcm-pop-confirm
+ *   header-text="Simple Confirmation"
+ *   description="No status icon shown"
+ *   status-icon={false}
+ * >
+ *   <bcm-button>Click Me</bcm-button>
+ * </bcm-pop-confirm>
+ * ```
  *
- * @methods
- * show() - Programmatically shows the pop-up
- * hide() - Programmatically hides the pop-up
+ * @example Different Placements
+ * ```html
+ * <bcm-pop-confirm placement="top" header-text="Top" description="Opens above">
+ *   <bcm-button>Top</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <bcm-pop-confirm placement="right" header-text="Right" description="Opens to the right">
+ *   <bcm-button>Right</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <bcm-pop-confirm placement="bottom" header-text="Bottom" description="Opens below">
+ *   <bcm-button>Bottom</bcm-button>
+ * </bcm-pop-confirm>
+ *
+ * <bcm-pop-confirm placement="left" header-text="Left" description="Opens to the left">
+ *   <bcm-button>Left</bcm-button>
+ * </bcm-pop-confirm>
+ * ```
  */
-export class PopConfirm {
-    constructor() {
-        /**
-         * The color of the arrow pointing to the trigger element.
-         * Can be a CSS custom property or a specific color value.
-         * @default 'var(--bcm-ui-color-background-basic-panel)'
-         */
-        this.arrowColor = 'var(--bcm-ui-color-background-basic-panel)'; // Default color
-        /**
-         * The text displayed on the cancel button.
-         * @default 'Cancel'
-         */
-        this.cancelText = 'Cancel';
-        /**
-         * The text displayed on the confirm button.
-         * @default 'Yes'
-         */
-        this.confirmText = 'Yes';
-        /**
-         * The description or body content of the pop-up.
-         * @default ''
-         */
-        this.description = '';
-        /**
-         * The header text displayed at the top of the pop-up.
-         * @default ''
-         */
-        this.headerText = '';
-        /**
-         * The placement position of the pop-up relative to the trigger element.
-         * @default 'bottom'
-         */
-        this.placement = 'bottom';
-        /**
-         * The size of the pop-up, determining its dimensions and padding.
-         * @default 'medium'
-         */
-        this.size = 'medium';
-        /**
-         * The status of the pop-up, affecting its icon and color scheme.
-         * @default 'info'
-         */
-        this.status = 'info';
-        /**
-         * Whether to display a status icon based on the `status` prop.
-         * @default true
-         */
-        this.statusIcon = true;
-        // State variables
-        /**
-         * Indicates whether the pop-up is currently open or closed.
-         * @default false
-         */
-        this.isOpen = false;
-        /**
-         * Handles the click event on the trigger element to open the pop-up.
-         * Prevents default behavior and propagation, then opens the pop-up if it's closed.
-         * @param event The mouse event triggering the action.
-         */
-        this.handleTriggerClick = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!this.isOpen) {
-                this.isOpen = true;
-                requestAnimationFrame(() => {
-                    this.updatePosition();
-                });
-            }
-        };
-        /**
-         * Handles the confirm button click, closing the pop-up and emitting the confirm event.
-         * Prevents default behavior and propagation.
-         * @param event The mouse event triggering the action.
-         */
-        this.handleConfirm = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.isOpen = false;
-            this.bcmConfirm.emit();
-        };
-        /**
-         * Handles the cancel button click, closing the pop-up and emitting the cancel event.
-         * Prevents default behavior and propagation.
-         * @param event The mouse event triggering the action.
-         */
-        this.handleCancel = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.isOpen = false;
-            this.bcmCancel.emit();
-        };
-        /**
-         * Updates the position of the pop-up relative to the trigger element using Floating UI.
-         * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.
-         */
-        this.updatePosition = async () => {
-            if (!this.triggerElement || !this.popoverElement || !this.arrowElement)
-                return;
-            const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {
-                placement: this.placement,
-                middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
-            });
-            this.currentPlacement = placement;
-            Object.assign(this.popoverElement.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]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',
-            });
-        };
-        /**
-         * Defines Tailwind Variants classes for the pop-up's structure and styling.
-         * Supports different sizes and generates dynamic class names.
-         */
-        this.classes = tv({
-            slots: {
-                container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',
-                header: 'flex justify-between items-center',
-                headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',
-                closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',
-                titleContainer: '!text-color-header font-semibold',
-                footer: 'flex flex-row justify-end gap-2',
-            },
-            variants: {
-                size: {
-                    small: {
-                        container: 'text-size-4 max-w-64 p-4 gap-4',
-                        header: 'text-size-4',
-                        footer: 'text-size-4',
-                        titleContainer: 'text-size-5',
-                        headerLeftContent: 'gap-2',
-                    },
-                    medium: {
-                        container: 'text-size-5 max-w-80 gap-6 p-6',
-                        header: 'text-size-5',
-                        footer: 'text-size-5',
-                        titleContainer: 'text-size-6',
-                        headerLeftContent: 'gap-2.5',
-                    },
-                    large: {
-                        container: 'text-size-6 max-w-96 p-8 gap-8',
-                        header: 'text-size-6',
-                        footer: 'text-size-6',
-                        titleContainer: 'text-size-7',
-                        headerLeftContent: 'gap-3',
-                    },
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-            },
-        });
-    }
+export class BcmPopConfirm {
+    host;
+    popconfirmRef;
+    arrowRef;
+    triggerRef;
+    cleanupAutoUpdate;
+    popconfirmId;
     /**
-     * Lifecycle method called when the component is loaded.
-     * Initializes the trigger element and attaches a click event listener.
+     * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element.
+     * Automatically flips if there's not enough space.
+     * Default: 'top'
      */
-    componentDidLoad() {
-        this.triggerElement = document.getElementById(this.targetId);
-        if (!this.triggerElement) {
-            console.warn(`Target element with ID '${this.targetId}' not found.`);
+    placement = 'top';
+    /**
+     * @prop {PopConfirmSize} size - Size variant that controls padding and text size.
+     * - 'small': Compact size with minimal padding
+     * - 'medium': Standard size
+     * - 'large': Spacious size with more padding
+     * Default: 'medium'
+     */
+    size = 'medium';
+    /**
+     * @prop {PopConfirmStatus} status - Status type that determines the color scheme and icon.
+     * - 'info': Informational (blue)
+     * - 'success': Success/positive action (green)
+     * - 'warning': Warning/caution (yellow)
+     * - 'error': Error/destructive action (red)
+     * Default: 'info'
+     */
+    status = 'info';
+    /**
+     * @prop {string} headerText - Text displayed in the header section.
+     * Can be overridden by using the 'header' slot.
+     * Default: ''
+     */
+    headerText = '';
+    /**
+     * @prop {string} description - Description text displayed in the body section.
+     * Can be overridden by using the 'body' slot.
+     * Default: ''
+     */
+    description = '';
+    /**
+     * @prop {string} confirmText - Text for the confirm button.
+     * Default: 'Yes'
+     */
+    confirmText = 'Yes';
+    /**
+     * @prop {string} cancelText - Text for the cancel button.
+     * Default: 'Cancel'
+     */
+    cancelText = 'Cancel';
+    /**
+     * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger.
+     * Default: true
+     */
+    showArrow = true;
+    /**
+     * @prop {boolean} statusIcon - Whether to show the status icon in the header.
+     * Icon only shows if headerText is also provided.
+     * Default: true
+     */
+    statusIcon = true;
+    /**
+     * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element.
+     * Default: 12
+     */
+    offsetDistance = 12;
+    /**
+     * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside the popover.
+     * Default: true
+     */
+    closeOnOutsideClick = true;
+    /**
+     * @prop {boolean} closeOnEscape - Whether to close when pressing the Escape key.
+     * Default: true
+     */
+    closeOnEscape = true;
+    isOpen = false;
+    /**
+     * @event bcmBeforeOpen - Emitted before the popover opens.
+     * Useful for performing actions before the popover becomes visible.
+     */
+    bcmBeforeOpen;
+    /**
+     * @event bcmOpen - Emitted when the popover is opened.
+     * Useful for tracking when the popover becomes visible.
+     */
+    bcmOpen;
+    /**
+     * @event bcmBeforeClose - Emitted before the popover closes.
+     * Useful for performing cleanup actions before hiding.
+     */
+    bcmBeforeClose;
+    /**
+     * @event bcmClose - Emitted when the popover is closed.
+     * Useful for tracking when the popover is hidden.
+     */
+    bcmClose;
+    /**
+     * @event bcmConfirm - Emitted when the user clicks the confirm button.
+     * This is where you should handle the confirmed action.
+     */
+    bcmConfirm;
+    /**
+     * @event bcmCancel - Emitted when the user clicks cancel, presses Escape, or clicks outside.
+     * Useful for tracking when the user dismisses the confirmation.
+     */
+    bcmCancel;
+    async handleOpenChange(open) {
+        if (!this.popconfirmRef)
             return;
+        if (open) {
+            this.popconfirmRef.showPopover();
+            await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+            await this.updatePosition();
+            this.startAutoUpdate();
+            this.bcmOpen.emit();
+            // Add outside click listener after a frame to avoid immediate close
+            if (this.closeOnOutsideClick) {
+                requestAnimationFrame(() => {
+                    document.addEventListener('click', this.handleOutsideClick);
+                });
+            }
+        }
+        else {
+            this.popconfirmRef.hidePopover();
+            this.stopAutoUpdate();
+            this.bcmClose.emit();
+            document.removeEventListener('click', this.handleOutsideClick);
         }
-        this.triggerElement.addEventListener('click', this.handleTriggerClick);
     }
     /**
-     * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.
-     * @returns A promise that resolves when the pop-up is shown.
+     * Programmatically shows the popconfirm.
+     * @returns Promise that resolves when the show operation begins
      */
     async show() {
+        if (this.isOpen)
+            return;
+        this.bcmBeforeOpen.emit();
         this.isOpen = true;
-        requestAnimationFrame(() => {
-            this.updatePosition();
-        });
     }
     /**
-     * Programmatically hides the pop-up by setting `isOpen` to false.
-     * @returns A promise that resolves when the pop-up is hidden.
+     * Programmatically hides the popconfirm.
+     * @returns Promise that resolves when the hide operation begins
      */
     async hide() {
+        if (!this.isOpen)
+            return;
+        this.bcmBeforeClose.emit();
         this.isOpen = false;
     }
     /**
-     * Returns the dynamic styles for the pop-up, including text and arrow colors.
-     * @returns An object containing CSS custom properties.
+     * Toggles the popconfirm visibility.
+     * If open, it will close. If closed, it will open.
+     * @returns Promise that resolves when the toggle operation completes
      */
-    get popoverStyle() {
-        return {
-            '--text-color': `var(--bcm-ui-color-text-${this.status})`,
-            '--arrow-color': this.arrowColor,
+    async toggle() {
+        if (this.isOpen) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    startAutoUpdate() {
+        if (!this.triggerRef || !this.popconfirmRef)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.popconfirmRef, () => this.updatePosition(), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: true,
+            layoutShift: true,
+        });
+    }
+    stopAutoUpdate() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    async updatePosition() {
+        if (!this.triggerRef || !this.popconfirmRef)
+            return;
+        const middleware = [offset(this.offsetDistance), flip(), shift({ padding: 8 })];
+        if (this.showArrow && this.arrowRef) {
+            middleware.push(arrow({ element: this.arrowRef }));
+        }
+        const virtualElement = {
+            getBoundingClientRect: () => this.triggerRef.getBoundingClientRect(),
         };
+        const { x, y, placement, middlewareData } = await computePosition(virtualElement, this.popconfirmRef, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware,
+        });
+        this.popconfirmRef.style.left = `${x}px`;
+        this.popconfirmRef.style.top = `${y}px`;
+        if (this.showArrow && this.arrowRef && middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const side = placement.split('-')[0];
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[side];
+            Object.assign(this.arrowRef.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        }
+    }
+    handleSlotChange = () => {
+        const slot = this.host.shadowRoot?.querySelector('slot:not([name])');
+        if (!slot)
+            return;
+        const elements = slot.assignedElements();
+        const assignedElement = elements[0];
+        this.triggerRef = (assignedElement || this.host);
+        if (!this.triggerRef)
+            return;
+        if (this.popconfirmRef && this.popconfirmId) {
+            this.triggerRef.setAttribute('aria-describedby', this.popconfirmId);
+        }
+        this.removeTriggerListeners();
+        this.setupTriggerListeners();
+    };
+    setupTriggerListeners() {
+        if (!this.triggerRef)
+            return;
+        this.triggerRef.addEventListener('click', this.handleTriggerClick);
+    }
+    removeTriggerListeners() {
+        if (!this.triggerRef)
+            return;
+        this.triggerRef.removeEventListener('click', this.handleTriggerClick);
+    }
+    handleTriggerClick = () => {
+        this.toggle();
+    };
+    handleOutsideClick = (e) => {
+        if (!this.closeOnOutsideClick || !this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.host.contains(target) && !this.popconfirmRef?.contains(target)) {
+            this.handleCancel();
+        }
+    };
+    handleKeyDown(e) {
+        if (!this.closeOnEscape || !this.isOpen)
+            return;
+        if (e.key === 'Escape') {
+            // Check if this is the topmost open popconfirm
+            const openPopconfirms = Array.from(document.querySelectorAll('bcm-pop-confirm')).filter(el => {
+                const popconfirmEl = el.shadowRoot?.querySelector('[popover]');
+                return popconfirmEl?.matches(':popover-open');
+            });
+            const topPopconfirm = openPopconfirms[openPopconfirms.length - 1];
+            if (topPopconfirm === this.host) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.handleCancel();
+            }
+        }
+    }
+    handleToggle = (e) => {
+        const toggleEvent = e;
+        if (toggleEvent.newState === 'open' && !this.isOpen) {
+            this.isOpen = true;
+        }
+        else if (toggleEvent.newState === 'closed' && this.isOpen) {
+            this.isOpen = false;
+        }
+    };
+    handleConfirm = () => {
+        this.bcmConfirm.emit();
+        this.hide();
+    };
+    handleCancel = () => {
+        this.bcmCancel.emit();
+        this.hide();
+    };
+    componentWillLoad() {
+        this.popconfirmId = `popconfirm-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        if (this.popconfirmRef) {
+            this.popconfirmRef.addEventListener('toggle', this.handleToggle);
+        }
     }
-    /**
-     * Lifecycle method called when the component is removed from the DOM.
-     * Cleans up the event listener to prevent memory leaks.
-     */
     disconnectedCallback() {
-        if (this.triggerElement) {
-            this.triggerElement.removeEventListener('click', this.handleTriggerClick);
+        this.stopAutoUpdate();
+        this.removeTriggerListeners();
+        document.removeEventListener('click', this.handleOutsideClick);
+        if (this.popconfirmRef) {
+            this.popconfirmRef.removeEventListener('toggle', this.handleToggle);
         }
     }
-    /**
-     * Renders the pop-up component, showing it only when `isOpen` is true.
-     * Includes header, main content, and footer sections with dynamic styling and slots for customization.
-     * @returns JSX.Element representing the pop-up or an empty fragment if closed.
-     */
+    popconfirmClass = tv({
+        slots: {
+            container: 'bcm-ui-element fixed m-0 flex flex-col bg-[--popover-bg] rounded-lg shadow-3 z-[9999]',
+            arrow: 'absolute w-3 h-3 bg-[--popover-bg] rotate-45',
+            closeBtn: 'absolute flex size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-color-muted',
+            header: 'flex items-center pr-8',
+            headerLeft: 'flex items-center gap-2',
+            title: '!text-color-header font-semibold',
+            body: 'flex-1 font-sans text-pretty',
+            footer: 'flex flex-row justify-end gap-2',
+        },
+        variants: {
+            size: {
+                small: {
+                    container: 'text-size-4 max-w-64 p-4 gap-4',
+                    title: 'text-size-5',
+                    closeBtn: 'top-3 right-3',
+                },
+                medium: {
+                    container: 'text-size-5 max-w-80 p-6 gap-6',
+                    title: 'text-size-6',
+                    closeBtn: 'top-4 right-4',
+                },
+                large: {
+                    container: 'text-size-6 max-w-96 p-8 gap-8',
+                    title: 'text-size-7',
+                    closeBtn: 'top-6 right-6',
+                },
+            },
+            status: {
+                info: { headerLeft: 'text-[var(--bcm-ui-color-text-info)]' },
+                success: { headerLeft: 'text-[var(--bcm-ui-color-text-success)]' },
+                warning: { headerLeft: 'text-[var(--bcm-ui-color-text-warning)]' },
+                error: { headerLeft: 'text-[var(--bcm-ui-color-text-error)]' },
+            },
+        },
+    });
     render() {
-        var _a;
-        const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({
+        const { container, arrow: arrowClass, header, headerLeft, title, closeBtn, body, footer } = this.popconfirmClass({
             size: this.size,
+            status: this.status,
         });
-        return (h(Fragment, { key: '86c517640fafd1c8c6826b85c2b6210ef51fb8a3' }, this.isOpen && (h("div", { key: 'c6c04b088ddf54834208cfb353ad205784c3f43b', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '2333829cfb8a5bc0f36d6ecf48d7e768b2c5c871', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'd0978abfe687e8eb13b8ea29ff05d0ccb0a060a4', class: header() }, h("div", { key: '9d648868414279f9d0494f329e5f20c1a18dd83c', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: 'e0caaa164bad82bf321e7706e534d07de45caee2', "icon-name": statusIcons[this.status] }), h("span", { key: '34b24b04e00a89098a727725998647b4cfaf6fda', class: titleContainer() }, this.headerText), h("slot", { key: '04422666023fa5a7e912a29d406ff7a9d4b0ec23', name: "header" })), h("div", { key: '4d6387833461db35148ff1f91de430d1b3b4ae0a', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: '04214951b966c79f4661db005255ab7ee58cb347', "icon-name": "far fa-times" }))), h("main", { key: '7df82cffa20da608e2f4026b89c390eeede5f305', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '7f045ed1b27608865cb0ae0c6fd24fc07220129d', name: "body" }, this.description)), h("footer", { key: '5c3d3c2436c24739f7900841c7d7025cc011ee17', class: footer() }, h("bcm-button", { key: '5f8bdfe07adeb25a6fa8111ea32e3439e391a546', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '9920702fb5bcef61f11e7cf2730344f0e4c17b5f', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'dde6cc0979b5e7994f92c9afa0444d86ff9585cd', name: "footer" }))))));
+        // Only show header if there's actual header content (headerText or custom header slot)
+        // Status icon only shows if explicitly enabled AND there's header text
+        const showStatusIcon = this.statusIcon && this.headerText;
+        const hasHeaderText = Boolean(this.headerText);
+        return (h("div", { key: '7329eb6db100b57368ca73b36a2a2ad66b218b8e', class: "inline-block" }, h("slot", { key: '0d775cf4a00b4ef97e8e75e2620ddf420caf43c6', onSlotchange: this.handleSlotChange }), h("div", { key: '19c4c001fbf51b895a45b271365b3a7cb22590bb', ref: el => (this.popconfirmRef = el), id: this.popconfirmId, part: "container", class: container(), popover: "manual", role: "alertdialog", "aria-labelledby": hasHeaderText ? `${this.popconfirmId}-header` : undefined, "aria-describedby": `${this.popconfirmId}-body` }, this.showArrow && h("div", { key: '91aaa976265c10537cea1d0d57d08df27c838645', ref: el => (this.arrowRef = el), part: "arrow", class: arrowClass() }), h("div", { key: '91a049dd52d47d267d11c8e8c628aa417fb40663', class: closeBtn(), onClick: this.handleCancel, role: "button", tabIndex: 0, "aria-label": "Close" }, h("bcm-icon", { key: 'd15fb5922185f246c15e9480c3a4652ef9e96ffa', "icon-name": "far fa-times" })), h("header", { key: 'b62f81fd72a05aa116ecad7614f20645aa85f060', class: header() }, h("div", { key: '226cbb6ac92d294b67eb0c33ed0faea52d56689a', class: headerLeft() }, showStatusIcon && h("bcm-icon", { key: '0e5cd64e8369876b9016af3c9607cdb406828651', "icon-name": statusIcons[this.status] }), hasHeaderText && (h("span", { key: '4a1cf44acf56bc46ad52fda1d1d29da0c838fded', id: `${this.popconfirmId}-header`, class: title() }, this.headerText)), h("slot", { key: '5e159545f0b12d97c9b632653955f636866c2a14', name: "header" }))), h("main", { key: '6e082c73048583a1447dc4fb7c9940a677e7d587', id: `${this.popconfirmId}-body`, part: "body", class: body() }, h("slot", { key: '6d0546a06ca77118d82074fffb9164c4b4f86a5c', name: "body" }, this.description)), h("footer", { key: '4f36400e44847e31d6ceed5fd7f47d35f68af458', part: "footer", class: footer() }, h("slot", { key: '97b85bb7dd3d39790b91e6bffef01f7eb077c2c3', name: "footer" }, h("bcm-button", { key: '8e8b7175a1dd9e069e9cbca7b430fdc1e9a7beab', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: 'ae9daeacaf77c8abfe92951eefe2e885d23eab79', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText))))));
     }
     static get is() { return "bcm-pop-confirm"; }
     static get encapsulation() { return "shadow"; }
@@ -307,78 +538,95 @@ export class PopConfirm {
     }
     static get properties() {
         return {
-            "arrowColor": {
+            "placement": {
                 "type": "string",
-                "attribute": "arrow-color",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "PopConfirmPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "PopConfirmPlacement": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/pop-confirm/pop-confirm.component.tsx",
+                            "id": "src/components/pop-confirm/pop-confirm.component.tsx::PopConfirmPlacement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "'var(--bcm-ui-color-background-basic-panel)'"
+                            "name": "prop",
+                            "text": "{PopConfirmPlacement} placement - Position of the popover relative to the trigger element.\nAutomatically flips if there's not enough space.\nDefault: 'top'"
                         }],
-                    "text": "The color of the arrow pointing to the trigger element.\nCan be a CSS custom property or a specific color value."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'var(--bcm-ui-color-background-basic-panel)'"
+                "attribute": "placement",
+                "defaultValue": "'top'"
             },
-            "cancelText": {
+            "size": {
                 "type": "string",
-                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "PopConfirmSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "PopConfirmSize": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/pop-confirm/pop-confirm.component.tsx",
+                            "id": "src/components/pop-confirm/pop-confirm.component.tsx::PopConfirmSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "'Cancel'"
+                            "name": "prop",
+                            "text": "{PopConfirmSize} size - Size variant that controls padding and text size.\n- 'small': Compact size with minimal padding\n- 'medium': Standard size\n- 'large': Spacious size with more padding\nDefault: 'medium'"
                         }],
-                    "text": "The text displayed on the cancel button."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'Cancel'"
+                "attribute": "size",
+                "defaultValue": "'medium'"
             },
-            "confirmText": {
+            "status": {
                 "type": "string",
-                "attribute": "confirm-text",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "PopConfirmStatus",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PopConfirmStatus": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/pop-confirm/pop-confirm.component.tsx",
+                            "id": "src/components/pop-confirm/pop-confirm.component.tsx::PopConfirmStatus"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "'Yes'"
+                            "name": "prop",
+                            "text": "{PopConfirmStatus} status - Status type that determines the color scheme and icon.\n- 'info': Informational (blue)\n- 'success': Success/positive action (green)\n- 'warning': Warning/caution (yellow)\n- 'error': Error/destructive action (red)\nDefault: 'info'"
                         }],
-                    "text": "The text displayed on the confirm button."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'Yes'"
+                "attribute": "status",
+                "defaultValue": "'info'"
             },
-            "description": {
+            "headerText": {
                 "type": "string",
-                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -389,19 +637,19 @@ export class PopConfirm {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "''"
+                            "name": "prop",
+                            "text": "{string} headerText - Text displayed in the header section.\nCan be overridden by using the 'header' slot.\nDefault: ''"
                         }],
-                    "text": "The description or body content of the pop-up."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "header-text",
                 "defaultValue": "''"
             },
-            "headerText": {
+            "description": {
                 "type": "string",
-                "attribute": "header-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -412,94 +660,134 @@ export class PopConfirm {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "''"
+                            "name": "prop",
+                            "text": "{string} description - Description text displayed in the body section.\nCan be overridden by using the 'body' slot.\nDefault: ''"
                         }],
-                    "text": "The header text displayed at the top of the pop-up."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "description",
                 "defaultValue": "''"
             },
-            "placement": {
+            "confirmText": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
-                    "original": "Placement",
-                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-                    "references": {
-                        "Placement": {
-                            "location": "import",
-                            "path": "@floating-ui/dom",
-                            "id": "node_modules::Placement"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "'bottom'"
+                            "name": "prop",
+                            "text": "{string} confirmText - Text for the confirm button.\nDefault: 'Yes'"
                         }],
-                    "text": "The placement position of the pop-up relative to the trigger element."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'bottom'"
+                "attribute": "confirm-text",
+                "defaultValue": "'Yes'"
             },
-            "size": {
+            "cancelText": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "'medium'"
+                            "name": "prop",
+                            "text": "{string} cancelText - Text for the cancel button.\nDefault: 'Cancel'"
                         }],
-                    "text": "The size of the pop-up, determining its dimensions and padding."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'medium'"
+                "attribute": "cancel-text",
+                "defaultValue": "'Cancel'"
             },
-            "status": {
-                "type": "string",
-                "attribute": "status",
+            "showArrow": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'info' | 'error' | 'warning' | 'success'",
-                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "'info'"
+                            "name": "prop",
+                            "text": "{boolean} showArrow - Whether to show the arrow pointing to the trigger.\nDefault: true"
                         }],
-                    "text": "The status of the pop-up, affecting its icon and color scheme."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'info'"
+                "attribute": "show-arrow",
+                "defaultValue": "true"
             },
             "statusIcon": {
                 "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} statusIcon - Whether to show the status icon in the header.\nIcon only shows if headerText is also provided.\nDefault: true"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "status-icon",
+                "defaultValue": "true"
+            },
+            "offsetDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{number} offsetDistance - Distance in pixels between the popover and trigger element.\nDefault: 12"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-distance",
+                "defaultValue": "12"
+            },
+            "closeOnOutsideClick": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -510,53 +798,132 @@ export class PopConfirm {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "true"
+                            "name": "prop",
+                            "text": "{boolean} closeOnOutsideClick - Whether to close when clicking outside the popover.\nDefault: true"
                         }],
-                    "text": "Whether to display a status icon based on the `status` prop."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "close-on-outside-click",
                 "defaultValue": "true"
             },
-            "targetId": {
-                "type": "string",
-                "attribute": "target-id",
+            "closeOnEscape": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The ID of the trigger element (e.g., a button) that opens the pop-up."
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} closeOnEscape - Whether to close when pressing the Escape key.\nDefault: true"
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
-            "isOpen": {},
-            "currentPlacement": {}
+            "isOpen": {}
         };
     }
     static get events() {
         return [{
+                "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": "bcmBeforeClose - Emitted before the popover closes.\nUseful for performing cleanup actions before hiding."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmClose",
+                "name": "bcmClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmClose - Emitted when the popover is closed.\nUseful for tracking when the popover is hidden."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "bcmConfirm",
                 "name": "bcmConfirm",
                 "bubbles": false,
                 "cancelable": true,
                 "composed": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits an event when the user confirms the action in the pop-up."
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmConfirm - Emitted when the user clicks the confirm button.\nThis is where you should handle the confirmed action."
+                        }],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "void",
@@ -570,8 +937,11 @@ export class PopConfirm {
                 "cancelable": true,
                 "composed": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits an event when the user cancels the action in the pop-up."
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmCancel - Emitted when the user clicks cancel, presses Escape, or clicks outside.\nUseful for tracking when the user dismisses the confirmation."
+                        }],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "void",
@@ -595,10 +965,10 @@ export class PopConfirm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically shows the pop-up by setting `isOpen` to true and updating its position.",
+                    "text": "Programmatically shows the popconfirm.",
                     "tags": [{
                             "name": "returns",
-                            "text": "A promise that resolves when the pop-up is shown."
+                            "text": "Promise that resolves when the show operation begins"
                         }]
                 }
             },
@@ -615,15 +985,50 @@ export class PopConfirm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically hides the pop-up by setting `isOpen` to false.",
+                    "text": "Programmatically hides the popconfirm.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the hide operation begins"
+                        }]
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popconfirm visibility.\nIf open, it will close. If closed, it will open.",
                     "tags": [{
                             "name": "returns",
-                            "text": "A promise that resolves when the pop-up is hidden."
+                            "text": "Promise that resolves when the toggle operation completes"
                         }]
                 }
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=pop-confirm.component.js.map