bromcom-ui-next 0.1.4 → 0.1.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"pop-confirm.component.js","sourceRoot":"","sources":["../../../src/components/pop-confirm/pop-confirm.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAsB,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9H,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAkB,MAAM,kBAAkB,CAAC;AAC/F,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,oCAAoC;AACpC,MAAM,WAAW,GAAG;IAChB,IAAI,EAAE,yBAAyB;IAC/B,OAAO,EAAE,0BAA0B;IACnC,OAAO,EAAE,kCAAkC;IAC3C,KAAK,EAAE,sBAAsB;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAMH,MAAM,OAAO,UAAU;IALvB;QASI;;;;WAIG;QAEH,eAAU,GAAW,4CAA4C,CAAC,CAAC,gBAAgB;QAEnF;;;WAGG;QAEH,eAAU,GAAW,QAAQ,CAAC;QAE9B;;;WAGG;QAEH,gBAAW,GAAW,KAAK,CAAC;QAE5B;;;WAGG;QAEH,gBAAW,GAAW,EAAE,CAAC;QAEzB;;;WAGG;QAEH,eAAU,GAAW,EAAE,CAAC;QAExB;;;WAGG;QAEH,cAAS,GAAc,QAAQ,CAAC;QAEhC;;;WAGG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;;WAGG;QAEH,WAAM,GAA6C,MAAM,CAAC;QAE1D;;;WAGG;QAEH,eAAU,GAAY,IAAI,CAAC;QAQ3B,kBAAkB;QAClB;;;WAGG;QAEH,WAAM,GAAY,KAAK,CAAC;QAgDxB;;;;WAIG;QACK,uBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBACnB,qBAAqB,CAAC,GAAG,EAAE;oBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC1B,CAAC,CAAC,CAAC;YACP,CAAC;QACL,CAAC,CAAC;QAEF;;;;WAIG;QACK,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QAC3B,CAAC,CAAC;QAEF;;;;WAIG;QACK,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;QAuBF;;;WAGG;QACK,mBAAc,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE/E,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBACxG,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;aAC3J,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,GAAG,SAAgB,CAAC;YAEzC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;gBACrC,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,GAAG,EAAE,GAAG,CAAC,IAAI;aAChB,CAAC,CAAC;YAEH,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACxE,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAwC,CAAC;YAErF,MAAM,UAAU,GAAG;gBACf,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,OAAO;aAChB,CAAC,aAAa,CAAC,CAAC;YAEjB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;gBACnC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;gBACzC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;gBACxC,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;aAC7E,CAAC,CAAC;QACP,CAAC,CAAC;QAuBF;;;WAGG;QACK,YAAO,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;gBACH,SAAS,EAAE,6GAA6G;gBACxH,MAAM,EAAE,mCAAmC;gBAC3C,iBAAiB,EAAE,+DAA+D;gBAClF,aAAa,EAAE,wHAAwH;gBACvI,cAAc,EAAE,kCAAkC;gBAClD,MAAM,EAAE,iCAAiC;aAC5C;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,SAAS,EAAE,gCAAgC;wBAC3C,MAAM,EAAE,aAAa;wBACrB,MAAM,EAAE,aAAa;wBACrB,cAAc,EAAE,aAAa;wBAC7B,iBAAiB,EAAE,OAAO;qBAC7B;oBACD,MAAM,EAAE;wBACJ,SAAS,EAAE,gCAAgC;wBAC3C,MAAM,EAAE,aAAa;wBACrB,MAAM,EAAE,aAAa;wBACrB,cAAc,EAAE,aAAa;wBAC7B,iBAAiB,EAAE,SAAS;qBAC/B;oBACD,KAAK,EAAE;wBACH,SAAS,EAAE,gCAAgC;wBAC3C,MAAM,EAAE,aAAa;wBACrB,MAAM,EAAE,aAAa;wBACrB,cAAc,EAAE,aAAa;wBAC7B,iBAAiB,EAAE,OAAO;qBAC7B;iBACJ;aACJ;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;aACjB;SACJ,CAAC,CAAC;KAkDN;IAhOG;;;OAGG;IACH,gBAAgB;QACZ,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,2BAA2B,IAAI,CAAC,QAAQ,cAAc,CAAC,CAAC;YACrE,OAAO;QACX,CAAC;QACD,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3E,CAAC;IA4CD;;;OAGG;IAEH,KAAK,CAAC,IAAI;QACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,qBAAqB,CAAC,GAAG,EAAE;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,IAAI;QACN,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC;IAsCD;;;OAGG;IACH,IAAY,YAAY;QACpB,OAAO;YACH,cAAc,EAAE,2BAA2B,IAAI,CAAC,MAAM,GAAG;YACzD,eAAe,EAAE,IAAI,CAAC,UAAU;SACnC,CAAC;IACN,CAAC;IAED;;;OAGG;IACH,oBAAoB;QAChB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC9E,CAAC;IACL,CAAC;IA6CD;;;;OAIG;IACH,MAAM;;QACF,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YACjG,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAC;QACH,OAAO,CACH,EAAC,QAAQ,uDACJ,IAAI,CAAC,MAAM,IAAI,CACZ,4DAAK,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;YAEtI,4DAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,MAAA,IAAI,CAAC,gBAAgB,mCAAI,KAAK,EAAE,GAAQ;YAG1G,+DAAQ,KAAK,EAAE,MAAM,EAAE;gBACnB,4DAAK,KAAK,EAAE,iBAAiB,EAAE;oBAC1B,IAAI,CAAC,UAAU,IAAI,8EAAqB,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAa;oBAC9E,6DAAM,KAAK,EAAE,cAAc,EAAE,IAAG,IAAI,CAAC,UAAU,CAAQ;oBACvD,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB;gBACN,4DAAK,KAAK,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY;oBACnD,8EAAoB,cAAc,GAAY,CAC5C,CACD;YAGT,6DAAM,KAAK,EAAC,sCAAsC;gBAC9C,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,CAAQ,CACxC;YAGP,+DAAQ,KAAK,EAAE,MAAM,EAAE;gBACnB,mEAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,IACjE,IAAI,CAAC,UAAU,CACP;gBACb,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvF,IAAI,CAAC,WAAW,CACR;gBACb,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACP,CACT,CACM,CACd,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from 'tailwind-variants';\n\n// Status icons for different states\nconst statusIcons = {\n    info: 'fa-solid fa-circle-info',\n    success: 'fa-solid fa-circle-check',\n    warning: 'fa-solid fa-triangle-exclamation',\n    error: 'fa-solid fa-circle-x',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n *\n * @example Basic usage\n * <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>\n *\n * @example With all slots and custom styling\n * <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\">\n *   <span slot=\"header\">Custom Header Text</span>\n *   <span slot=\"body\">Additional details here</span>\n *   <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n *\n * @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n *   console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n *   console.log('User canceled the action!');\n * });\n *\n * // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n *\n * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n *\n * @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n *\n * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n *\n * @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n *\n * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n *\n * @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n */\n@Component({\n    tag: 'bcm-pop-confirm',\n    styleUrl: 'pop-confirm.css',\n    shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n    // DOM element reference\n    @Element() el: HTMLElement;\n\n    /**\n     * The color of the arrow pointing to the trigger element.\n     * Can be a CSS custom property or a specific color value.\n     * @default 'var(--bcm-ui-color-background-basic-panel)'\n     */\n    @Prop()\n    arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n    /**\n     * The text displayed on the cancel button.\n     * @default 'Cancel'\n     */\n    @Prop()\n    cancelText: string = 'Cancel';\n\n    /**\n     * The text displayed on the confirm button.\n     * @default 'Yes'\n     */\n    @Prop()\n    confirmText: string = 'Yes';\n\n    /**\n     * The description or body content of the pop-up.\n     * @default ''\n     */\n    @Prop()\n    description: string = '';\n\n    /**\n     * The header text displayed at the top of the pop-up.\n     * @default ''\n     */\n    @Prop()\n    headerText: string = '';\n\n    /**\n     * The placement position of the pop-up relative to the trigger element.\n     * @default 'bottom'\n     */\n    @Prop()\n    placement: Placement = 'bottom';\n\n    /**\n     * The size of the pop-up, determining its dimensions and padding.\n     * @default 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * The status of the pop-up, affecting its icon and color scheme.\n     * @default 'info'\n     */\n    @Prop()\n    status: 'info' | 'error' | 'warning' | 'success' = 'info';\n\n    /**\n     * Whether to display a status icon based on the `status` prop.\n     * @default true\n     */\n    @Prop()\n    statusIcon: boolean = true;\n\n    /**\n     * The ID of the trigger element (e.g., a button) that opens the pop-up.\n     */\n    @Prop()\n    targetId: string;\n\n    // State variables\n    /**\n     * Indicates whether the pop-up is currently open or closed.\n     * @default false\n     */\n    @State()\n    isOpen: boolean = false;\n\n    /**\n     * The current placement position of the pop-up after computation.\n     */\n    @State()\n    currentPlacement: 'top' | 'bottom' | 'left' | 'right';\n\n    // Event Emitters\n    /**\n     * Emits an event when the user confirms the action in the pop-up.\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmConfirm: EventEmitter<void>;\n\n    /**\n     * Emits an event when the user cancels the action in the pop-up.\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmCancel: EventEmitter<void>;\n\n    // Element references\n    private triggerElement: HTMLElement;\n    private popoverElement: HTMLElement;\n    private arrowElement: HTMLElement;\n\n    /**\n     * Lifecycle method called when the component is loaded.\n     * Initializes the trigger element and attaches a click event listener.\n     */\n    componentDidLoad() {\n        this.triggerElement = document.getElementById(this.targetId);\n        if (!this.triggerElement) {\n            console.warn(`Target element with ID '${this.targetId}' not found.`);\n            return;\n        }\n        this.triggerElement.addEventListener('click', this.handleTriggerClick);\n    }\n\n\n    /**\n     * Handles the click event on the trigger element to open the pop-up.\n     * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n     * @param event The mouse event triggering the action.\n     */\n    private handleTriggerClick = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (!this.isOpen) {\n            this.isOpen = true;\n            requestAnimationFrame(() => {\n                this.updatePosition();\n            });\n        }\n    };\n\n    /**\n     * Handles the confirm button click, closing the pop-up and emitting the confirm event.\n     * Prevents default behavior and propagation.\n     * @param event The mouse event triggering the action.\n     */\n    private handleConfirm = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOpen = false;\n        this.bcmConfirm.emit();\n    };\n\n    /**\n     * Handles the cancel button click, closing the pop-up and emitting the cancel event.\n     * Prevents default behavior and propagation.\n     * @param event The mouse event triggering the action.\n     */\n    private handleCancel = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.isOpen = false;\n        this.bcmCancel.emit();\n    };\n\n    /**\n     * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n     * @returns A promise that resolves when the pop-up is shown.\n     */\n    @Method()\n    async show() {\n        this.isOpen = true;\n        requestAnimationFrame(() => {\n            this.updatePosition();\n        });\n    }\n\n    /**\n     * Programmatically hides the pop-up by setting `isOpen` to false.\n     * @returns A promise that resolves when the pop-up is hidden.\n     */\n    @Method()\n    async hide() {\n        this.isOpen = false;\n    }\n\n    /**\n     * Updates the position of the pop-up relative to the trigger element using Floating UI.\n     * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n     */\n    private updatePosition = async () => {\n        if (!this.triggerElement || !this.popoverElement || !this.arrowElement) return;\n\n        const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n            placement: this.placement,\n            middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n        });\n\n        this.currentPlacement = placement as any;\n\n        Object.assign(this.popoverElement.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n        const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n        const staticSide = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n        }[basePlacement];\n\n        Object.assign(this.arrowElement.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n        });\n    };\n\n    /**\n     * Returns the dynamic styles for the pop-up, including text and arrow colors.\n     * @returns An object containing CSS custom properties.\n     */\n    private get popoverStyle() {\n        return {\n            '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n            '--arrow-color': this.arrowColor,\n        };\n    }\n\n    /**\n     * Lifecycle method called when the component is removed from the DOM.\n     * Cleans up the event listener to prevent memory leaks.\n     */\n    disconnectedCallback() {\n        if (this.triggerElement) {\n            this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n        }\n    }\n\n    /**\n     * Defines Tailwind Variants classes for the pop-up's structure and styling.\n     * Supports different sizes and generates dynamic class names.\n     */\n    private classes = tv({\n        slots: {\n            container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n            header: 'flex justify-between items-center',\n            headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n            closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n            titleContainer: '!text-color-header font-semibold',\n            footer: 'flex flex-row justify-end gap-2',\n        },\n        variants: {\n            size: {\n                small: {\n                    container: 'text-size-4 max-w-64 p-4 gap-4',\n                    header: 'text-size-4',\n                    footer: 'text-size-4',\n                    titleContainer: 'text-size-5',\n                    headerLeftContent: 'gap-2',\n                },\n                medium: {\n                    container: 'text-size-5 max-w-80 gap-6 p-6',\n                    header: 'text-size-5',\n                    footer: 'text-size-5',\n                    titleContainer: 'text-size-6',\n                    headerLeftContent: 'gap-2.5',\n                },\n                large: {\n                    container: 'text-size-6 max-w-96 p-8 gap-8',\n                    header: 'text-size-6',\n                    footer: 'text-size-6',\n                    titleContainer: 'text-size-7',\n                    headerLeftContent: 'gap-3',\n                },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n        },\n    });\n\n    /**\n     * Renders the pop-up component, showing it only when `isOpen` is true.\n     * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n     * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n     */\n    render() {\n        const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n            size: this.size,\n        });\n        return (\n            <Fragment>\n                {this.isOpen && (\n                    <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n                        {/* Arrow */}\n                        <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n                        {/* Header Content */}\n                        <header class={header()}>\n                            <div class={headerLeftContent()}>\n                                {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n                                <span class={titleContainer()}>{this.headerText}</span>\n                                <slot name=\"header\"></slot>\n                            </div>\n                            <div class={closeIconArea()} onClick={this.handleCancel}>\n                                <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n                            </div>\n                        </header>\n\n                        {/* Main Content */}\n                        <main class=\"flex-1 mx-auto font-sans text-pretty\">\n                            <slot name=\"body\">{this.description}</slot>\n                        </main>\n\n                        {/* Footer Content */}\n                        <footer class={footer()}>\n                            <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n                                {this.cancelText}\n                            </bcm-button>\n                            <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n                                {this.confirmText}\n                            </bcm-button>\n                            <slot name=\"footer\"></slot>\n                        </footer>\n                    </div>\n                )}\n            </Fragment>\n        );\n    }\n}\n"]}

package/dist/collection/components/pop-confirm/pop-confirm.css

@@ -0,0 +1 @@
+.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)}

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

@@ -0,0 +1,477 @@
+import { arrow, computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @component BcmPopover
+ * @description A flexible popover component that displays contextual information or content relative to a target element.
+ * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ *
+ * @example Basic Click Popover
+ * <bcm-popover trigger="click" size="medium" placement="top">
+ *   <bcm-button>Click Me</bcm-button>
+ *   <span slot="header">Header</span>
+ *   <span slot="content">This is a simple popover content.</span>
+ * </bcm-popover>
+ *
+ * @example Hover Popover with Props
+ * <bcm-popover trigger="hover" hover-delay="200" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
+ *   <bcm-button>Hover Me</bcm-button>
+ * </bcm-popover>
+ *
+ * @example Programmatic Control
+ * <bcm-popover id="my-popover" trigger="click">
+ *   <bcm-button>Toggle Me</bcm-button>
+ *   <span slot="content">Controlled popover</span>
+ * </bcm-popover>
+ * <script>
+ *   const popover = document.querySelector('#my-popover');
+ *   popover.openPopup(); // Opens the popover
+ *   popover.closePopup(); // Closes the popover
+ * </script>
+ *
+ * @slot - Default slot for the target element that triggers the popover
+ * @slot header - Slot for custom header content
+ * @slot content - Slot for custom popover content
+ *
+ * @csspart popover - The root popover container element, stylable for the entire popover
+ * @csspart header - The header section of the popover, stylable for the title area
+ * @csspart content - The content section of the popover, stylable for the main content area
+ * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
+ */
+export class Popover {
+    constructor() {
+        /**
+         * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.
+         * Controls the text size and padding of the popover content.
+         * Default: 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.
+         * Determines where the popover appears around the trigger element.
+         * Default: 'top'
+         */
+        this.placement = 'top';
+        /**
+         * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.
+         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+         * Default: 'click'
+         */
+        this.trigger = 'click';
+        /**
+         * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.
+         * Adds a delay to prevent flickering on quick mouse movements.
+         * Default: 150
+         */
+        this.hoverDelay = 150;
+        /**
+         * @prop {boolean} open - Indicates whether the popover is currently open.
+         * Can be set programmatically or toggled by user interaction. Mutable.
+         * Default: false
+         */
+        this.open = false;
+        this.togglePopover = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bcmPopoverOpen.emit();
+            }
+            else {
+                this.bcmPopoverClose.emit();
+            }
+            this.updatePosition();
+        };
+        this.showPopover = () => {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = setTimeout(() => {
+                this.open = true;
+                this.bcmPopoverOpen.emit();
+                this.updatePosition();
+            }, this.hoverDelay);
+        };
+        this.hidePopover = () => {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = setTimeout(() => {
+                this.open = false;
+                this.bcmPopoverClose.emit();
+            }, this.hoverDelay);
+        };
+        this.handleSlotChange = () => {
+            const slot = this.el.shadowRoot.querySelector('slot');
+            const elements = slot.assignedElements();
+            this.targetElement = elements[0];
+            if (this.targetElement) {
+                this.targetElement.removeEventListener('click', this.togglePopover);
+                this.targetElement.removeEventListener('mouseenter', this.showPopover);
+                this.targetElement.removeEventListener('mouseleave', this.hidePopover);
+                if (this.trigger === 'click') {
+                    this.targetElement.addEventListener('click', this.togglePopover);
+                    this.targetElement.setAttribute('aria-expanded', this.open.toString());
+                }
+                if (this.trigger === 'hover') {
+                    this.targetElement.addEventListener('mouseenter', this.showPopover);
+                    this.targetElement.addEventListener('mouseleave', this.hidePopover);
+                }
+                if (this.popoverElement && !this.cleanupAutoUpdate) {
+                    this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());
+                }
+            }
+        };
+        this.handleOutsideClick = (event) => {
+            if (!this.el.contains(event.target) && this.open) {
+                this.open = false;
+            }
+        };
+        this.updatePosition = async () => {
+            if (!this.targetElement || !this.popoverElement || !this.arrowElement)
+                return;
+            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {
+                placement: this.placement,
+                middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
+            });
+            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]: '-4px',
+            });
+        };
+        this.popoverClass = tv({
+            slots: {
+                box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',
+                header: 'font-semibold text-color',
+                content: 'font-normal text-color',
+                arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',
+            },
+            variants: {
+                size: {
+                    small: { box: 'text-size-3' },
+                    medium: { box: 'text-size-4' },
+                    large: { box: 'text-size-5' },
+                },
+                isOpen: {
+                    true: { box: 'flex' },
+                    false: { box: 'hidden' },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                isOpen: false,
+            },
+        });
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        var _a;
+        document.removeEventListener('click', this.handleOutsideClick);
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('click', this.togglePopover);
+            this.targetElement.removeEventListener('mouseenter', this.showPopover);
+            this.targetElement.removeEventListener('mouseleave', this.hidePopover);
+        }
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = null;
+        clearTimeout(this.hoverTimeout);
+    }
+    /**
+     * @method {Promise<void>} openPopup - Programmatically opens the popover.
+     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
+     * @returns {Promise<void>} A promise that resolves when the popover is opened.
+     */
+    async openPopup() {
+        this.showPopover();
+    }
+    /**
+     * @method {Promise<void>} closePopup - Programmatically closes the popover.
+     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
+     * @returns {Promise<void>} A promise that resolves when the popover is closed.
+     */
+    async closePopup() {
+        this.hidePopover();
+    }
+    render() {
+        const { box, header, content, arrow } = this.popoverClass({
+            isOpen: this.open,
+            size: this.size,
+        });
+        return (h("div", { key: '665229a272b741f98b8f2a6afdbfcd381c570139', class: "relative" }, h("slot", { key: '4ea3bf8f4a1ea77814c2356e81edbe405eceb7d4', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '00c49e72fa5803d9999639918ba30dcd0714c4d4', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f293355d74a3b5420368cdda0ddd0f2fd5f42010', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'c2ac22ed51b5a01a8832467ee717e6bf35ccbb69', class: header(), part: "header" }, h("slot", { key: '434a1f3f4a013222935ee681feae058c7bbfd993', name: "header" }, this.headerText)), h("div", { key: '950d3aa73579ae246f43aaa3d6101da1d6a7a601', class: content(), part: "content" }, h("slot", { key: 'fa43adb4816dae231c92d5de93432d0a76f211f9', name: "content" }, this.message)))));
+    }
+    static get is() { return "bcm-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{('small' | 'medium' | 'large')} size - Defines the size of the popover.\nControls the text size and padding of the popover content.\nDefault: 'medium'"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'right' | 'bottom' | 'left'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\nDetermines where the popover appears around the trigger element.\nDefault: 'top'"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\nDefault: 'click'"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "hoverDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\nAdds a delay to prevent flickering on quick mouse movements.\nDefault: 150"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hover-delay",
+                "reflect": false,
+                "defaultValue": "150"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} open - Indicates whether the popover is currently open.\nCan be set programmatically or toggled by user interaction. Mutable.\nDefault: false"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headerText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{string} headerText - Custom text for the popover header.\nUsed as fallback content if the 'header' slot is not provided."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "header-text",
+                "reflect": false
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{string} message - Custom text for the popover content.\nUsed as fallback content if the 'content' slot is not provided."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmPopoverOpen",
+                "name": "bcmPopoverOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "{EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\nUseful for tracking when the popover becomes visible."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmPopoverClose",
+                "name": "bcmPopoverClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "{EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\nUseful for tracking when the popover is hidden."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openPopup": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "method",
+                            "text": "{Promise<void>} openPopup - Programmatically opens the popover.\nTriggers the showPopover logic to display the popover with the specified hover delay (if applicable)."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the popover is opened."
+                        }]
+                }
+            },
+            "closePopup": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "method",
+                            "text": "{Promise<void>} closePopup - Programmatically closes the popover.\nTriggers the hidePopover logic to hide the popover with the specified hover delay (if applicable)."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the popover is closed."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=popover.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.component.js","sourceRoot":"","sources":["../../../src/components/popover/popover.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n *   <bcm-button>Click Me</bcm-button>\n *   <span slot=\"header\">Header</span>\n *   <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n *   <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n *   <bcm-button>Toggle Me</bcm-button>\n *   <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n *   const popover = document.querySelector('#my-popover');\n *   popover.openPopup(); // Opens the popover\n *   popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n    tag: 'bcm-popover',\n    styleUrl: 'popover.css',\n    shadow: true,\n})\nexport class Popover implements ComponentInterface {\n    @Element() el: HTMLElement;\n    private targetElement: HTMLElement;\n    private popoverElement: HTMLElement;\n    private arrowElement: HTMLElement;\n    private hoverTimeout: any;\n    private cleanupAutoUpdate: () => void;\n    /**\n     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n     * Controls the text size and padding of the popover content.\n     * Default: 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n    /**\n     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n     * Determines where the popover appears around the trigger element.\n     * Default: 'top'\n     */\n    @Prop()\n    placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n    /**\n     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n     * Default: 'click'\n     */\n    @Prop()\n    trigger: 'click' | 'hover' = 'click';\n    /**\n     * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n     * Adds a delay to prevent flickering on quick mouse movements.\n     * Default: 150\n     */\n    @Prop()\n    hoverDelay: number = 150;\n    /**\n     * @prop {boolean} open - Indicates whether the popover is currently open.\n     * Can be set programmatically or toggled by user interaction. Mutable.\n     * Default: false\n     */\n    @Prop({ mutable: true })\n    open: boolean = false;\n    /**\n     * @prop {string} headerText - Custom text for the popover header.\n     * Used as fallback content if the 'header' slot is not provided.\n     */\n    @Prop()\n    headerText: string;\n    /**\n     * @prop {string} message - Custom text for the popover content.\n     * Used as fallback content if the 'content' slot is not provided.\n     */\n    @Prop()\n    message: string;\n    /**\n     * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n     * Useful for tracking when the popover becomes visible.\n     */\n    @Event({ composed: false, bubbles: false, cancelable: true })\n    bcmPopoverOpen: EventEmitter<void>;\n\n    /**\n     * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n     * Useful for tracking when the popover is hidden.\n     */\n    @Event({ composed: false, bubbles: false, cancelable: true })\n    bcmPopoverClose: EventEmitter<void>;\n\n    connectedCallback() {\n        document.addEventListener('click', this.handleOutsideClick);\n    }\n\n    disconnectedCallback() {\n        document.removeEventListener('click', this.handleOutsideClick);\n        if (this.targetElement) {\n            this.targetElement.removeEventListener('click', this.togglePopover);\n            this.targetElement.removeEventListener('mouseenter', this.showPopover);\n            this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n        }\n        this.cleanupAutoUpdate?.();\n        this.cleanupAutoUpdate = null;\n        clearTimeout(this.hoverTimeout);\n    }\n\n    private togglePopover = () => {\n        this.open = !this.open;\n        if (this.open) {\n            this.bcmPopoverOpen.emit();\n        } else {\n            this.bcmPopoverClose.emit();\n        }\n        this.updatePosition();\n    };\n\n    private showPopover = () => {\n        clearTimeout(this.hoverTimeout);\n        this.hoverTimeout = setTimeout(() => {\n            this.open = true;\n            this.bcmPopoverOpen.emit();\n            this.updatePosition();\n        }, this.hoverDelay);\n    };\n\n    private hidePopover = () => {\n        clearTimeout(this.hoverTimeout);\n        this.hoverTimeout = setTimeout(() => {\n            this.open = false;\n            this.bcmPopoverClose.emit();\n        }, this.hoverDelay);\n    };\n\n    /**\n     * @method {Promise<void>} openPopup - Programmatically opens the popover.\n     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n     * @returns {Promise<void>} A promise that resolves when the popover is opened.\n     */\n    @Method()\n    async openPopup() {\n        this.showPopover();\n    }\n\n    /**\n     * @method {Promise<void>} closePopup - Programmatically closes the popover.\n     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n     * @returns {Promise<void>} A promise that resolves when the popover is closed.\n     */\n    @Method()\n    async closePopup() {\n        this.hidePopover();\n    }\n\n    private handleSlotChange = () => {\n        const slot = this.el.shadowRoot.querySelector('slot');\n        const elements = slot.assignedElements();\n        this.targetElement = elements[0] as HTMLElement;\n\n        if (this.targetElement) {\n            this.targetElement.removeEventListener('click', this.togglePopover);\n            this.targetElement.removeEventListener('mouseenter', this.showPopover);\n            this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n            if (this.trigger === 'click') {\n                this.targetElement.addEventListener('click', this.togglePopover);\n                this.targetElement.setAttribute('aria-expanded', this.open.toString());\n            }\n\n            if (this.trigger === 'hover') {\n                this.targetElement.addEventListener('mouseenter', this.showPopover);\n                this.targetElement.addEventListener('mouseleave', this.hidePopover);\n            }\n\n            if (this.popoverElement && !this.cleanupAutoUpdate) {\n                this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n            }\n        }\n    };\n\n    private handleOutsideClick = (event: Event) => {\n        if (!this.el.contains(event.target as Node) && this.open) {\n            this.open = false;\n        }\n    };\n\n    private updatePosition = async () => {\n        if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n        const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n            placement: this.placement,\n            middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n        });\n\n        Object.assign(this.popoverElement.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n        const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n        const staticSide = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n        }[basePlacement];\n\n        Object.assign(this.arrowElement.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            [staticSide]: '-4px',\n        });\n    };\n\n    private popoverClass = tv({\n        slots: {\n            box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n            header: 'font-semibold text-color',\n            content: 'font-normal text-color',\n            arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n        },\n        variants: {\n            size: {\n                small: { box: 'text-size-3' },\n                medium: { box: 'text-size-4' },\n                large: { box: 'text-size-5' },\n            },\n            isOpen: {\n                true: { box: 'flex' },\n                false: { box: 'hidden' },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            isOpen: false,\n        },\n    });\n\n    render() {\n        const { box, header, content, arrow } = this.popoverClass({\n            isOpen: this.open,\n            size: this.size,\n        });\n\n        return (\n            <div class=\"relative\">\n                <slot onSlotchange={() => this.handleSlotChange()}></slot>\n                <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n                    <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n                    <div class={header()} part=\"header\">\n                        <slot name=\"header\">{this.headerText}</slot>\n                    </div>\n                    <div class={content()} part=\"content\">\n                        <slot name=\"content\">{this.message}</slot>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/popover/popover.css

@@ -0,0 +1 @@
+:host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\[9999\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-color{color:var(--bcm-ui-color-text-default)}.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)}