bromcom-ui-next 0.1.29 → 0.1.31

package/dist/cjs/bcm-pop-confirm.cjs.entry.js

@@ -1,250 +1,381 @@
 'use strict';
 
-var index = require('./index-BtiU-G2W.js');
-var floatingUi_dom = require('./floating-ui.dom-DyKmFgkP.js');
+var index = require('./index-1Qal-onT.js');
+var floatingUi_dom = require('./floating-ui.dom-S9nP6zZt.js');
 var tv = require('./tv-ngpIbGlG.js');
 
-const popConfirmCss = ".absolute{position:absolute}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
+const popConfirmCss = ".visible{visibility:visible}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);display:inline-block}[popover]{border:none;overflow:visible;padding:0}[popover]:not(:popover-open){display:none}[popover]:popover-open{opacity:1;transform:scale(1);transition:opacity .15s ease-out,transform .15s ease-out}@starting-style{[popover]:popover-open{opacity:0;transform:scale(.95)}}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.right-3{right:.75rem}.right-4{right:1rem}.right-6{right:1.5rem}.top-3{top:.75rem}.top-4{top:1rem}.top-6{top:1.5rem}.z-\\[9999\\]{z-index:9999}.m-0{margin:0}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-3{height:.75rem}.w-3{width:.75rem}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.pr-8{padding-right:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[var\\(--bcm-ui-color-text-error\\)\\]{color:var(--bcm-ui-color-text-error)}.text-\\[var\\(--bcm-ui-color-text-info\\)\\]{color:var(--bcm-ui-color-text-info)}.text-\\[var\\(--bcm-ui-color-text-success\\)\\]{color:var(--bcm-ui-color-text-success)}.text-\\[var\\(--bcm-ui-color-text-warning\\)\\]{color:var(--bcm-ui-color-text-warning)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
 
-// 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',
 };
-const PopConfirm = class {
+const BcmPopConfirm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.bcmBeforeOpen = index.createEvent(this, "bcmBeforeOpen", 1);
+        this.bcmOpen = index.createEvent(this, "bcmOpen", 1);
+        this.bcmBeforeClose = index.createEvent(this, "bcmBeforeClose", 1);
+        this.bcmClose = index.createEvent(this, "bcmClose", 1);
         this.bcmConfirm = index.createEvent(this, "bcmConfirm", 1);
         this.bcmCancel = index.createEvent(this, "bcmCancel", 1);
-        /**
-         * 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 floatingUi_dom.computePosition(this.triggerElement, this.popoverElement, {
-                placement: this.placement,
-                middleware: [floatingUi_dom.offset(12), floatingUi_dom.flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), floatingUi_dom.shift({ padding: 8 }), floatingUi_dom.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.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',
-            },
-        });
     }
+    get host() { return index.getElement(this); }
+    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 = floatingUi_dom.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 = [floatingUi_dom.offset(this.offsetDistance), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 8 })];
+        if (this.showArrow && this.arrowRef) {
+            middleware.push(floatingUi_dom.arrow({ element: this.arrowRef }));
+        }
+        const virtualElement = {
+            getBoundingClientRect: () => this.triggerRef.getBoundingClientRect(),
         };
+        const { x, y, placement, middlewareData } = await floatingUi_dom.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.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 (index.h(index.Fragment, { key: '86c517640fafd1c8c6826b85c2b6210ef51fb8a3' }, this.isOpen && (index.h("div", { key: 'c6c04b088ddf54834208cfb353ad205784c3f43b', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, index.h("div", { key: '2333829cfb8a5bc0f36d6ecf48d7e768b2c5c871', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), index.h("header", { key: 'd0978abfe687e8eb13b8ea29ff05d0ccb0a060a4', class: header() }, index.h("div", { key: '9d648868414279f9d0494f329e5f20c1a18dd83c', class: headerLeftContent() }, this.statusIcon && index.h("bcm-icon", { key: 'e0caaa164bad82bf321e7706e534d07de45caee2', "icon-name": statusIcons[this.status] }), index.h("span", { key: '34b24b04e00a89098a727725998647b4cfaf6fda', class: titleContainer() }, this.headerText), index.h("slot", { key: '04422666023fa5a7e912a29d406ff7a9d4b0ec23', name: "header" })), index.h("div", { key: '4d6387833461db35148ff1f91de430d1b3b4ae0a', class: closeIconArea(), onClick: this.handleCancel }, index.h("bcm-icon", { key: '04214951b966c79f4661db005255ab7ee58cb347', "icon-name": "far fa-times" }))), index.h("main", { key: '7df82cffa20da608e2f4026b89c390eeede5f305', class: "flex-1 mx-auto font-sans text-pretty" }, index.h("slot", { key: '7f045ed1b27608865cb0ae0c6fd24fc07220129d', name: "body" }, this.description)), index.h("footer", { key: '5c3d3c2436c24739f7900841c7d7025cc011ee17', class: footer() }, index.h("bcm-button", { key: '5f8bdfe07adeb25a6fa8111ea32e3439e391a546', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), index.h("bcm-button", { key: '9920702fb5bcef61f11e7cf2730344f0e4c17b5f', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), index.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 (index.h("div", { key: '7329eb6db100b57368ca73b36a2a2ad66b218b8e', class: "inline-block" }, index.h("slot", { key: '0d775cf4a00b4ef97e8e75e2620ddf420caf43c6', onSlotchange: this.handleSlotChange }), index.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 && index.h("div", { key: '91aaa976265c10537cea1d0d57d08df27c838645', ref: el => (this.arrowRef = el), part: "arrow", class: arrowClass() }), index.h("div", { key: '91a049dd52d47d267d11c8e8c628aa417fb40663', class: closeBtn(), onClick: this.handleCancel, role: "button", tabIndex: 0, "aria-label": "Close" }, index.h("bcm-icon", { key: 'd15fb5922185f246c15e9480c3a4652ef9e96ffa', "icon-name": "far fa-times" })), index.h("header", { key: 'b62f81fd72a05aa116ecad7614f20645aa85f060', class: header() }, index.h("div", { key: '226cbb6ac92d294b67eb0c33ed0faea52d56689a', class: headerLeft() }, showStatusIcon && index.h("bcm-icon", { key: '0e5cd64e8369876b9016af3c9607cdb406828651', "icon-name": statusIcons[this.status] }), hasHeaderText && (index.h("span", { key: '4a1cf44acf56bc46ad52fda1d1d29da0c838fded', id: `${this.popconfirmId}-header`, class: title() }, this.headerText)), index.h("slot", { key: '5e159545f0b12d97c9b632653955f636866c2a14', name: "header" }))), index.h("main", { key: '6e082c73048583a1447dc4fb7c9940a677e7d587', id: `${this.popconfirmId}-body`, part: "body", class: body() }, index.h("slot", { key: '6d0546a06ca77118d82074fffb9164c4b4f86a5c', name: "body" }, this.description)), index.h("footer", { key: '4f36400e44847e31d6ceed5fd7f47d35f68af458', part: "footer", class: footer() }, index.h("slot", { key: '97b85bb7dd3d39790b91e6bffef01f7eb077c2c3', name: "footer" }, index.h("bcm-button", { key: '8e8b7175a1dd9e069e9cbca7b430fdc1e9a7beab', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), index.h("bcm-button", { key: 'ae9daeacaf77c8abfe92951eefe2e885d23eab79', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText))))));
     }
-    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": ["handleOpenChange"]
+    }; }
 };
-PopConfirm.style = popConfirmCss;
+BcmPopConfirm.style = popConfirmCss;
 
-exports.bcm_pop_confirm = PopConfirm;
+exports.bcm_pop_confirm = BcmPopConfirm;
 //# sourceMappingURL=bcm-pop-confirm.entry.cjs.js.map
-
-//# sourceMappingURL=bcm-pop-confirm.cjs.entry.js.map