bromcom-ui-next 0.1.20 → 0.1.22

package/dist/components/bcm-pop-confirm.js.map

@@ -1 +1 @@
-{"file":"bcm-pop-confirm.js","mappings":"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","names":["tv"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-basic-panel);\n  --popover-radius: 6px;\n  --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n  position: absolute;\n  background: var(--arrow-color);\n  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n  z-index: 1;\n}\n\n.arrow.top {\n  transform: rotate(180deg);\n}\n\n.arrow.bottom {\n  transform: rotate(0deg);\n}\n\n.arrow.right {\n  transform: rotate(-90deg);\n}\n\n.arrow.left {\n  transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n  font-family: 'Inter', sans-serif;\n  text-wrap: pretty;\n}\n","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"],"version":3}
+{"file":"bcm-pop-confirm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-basic-panel);\n  --popover-radius: 6px;\n  --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n  position: absolute;\n  background: var(--arrow-color);\n  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n  z-index: 1;\n}\n\n.arrow.top {\n  transform: rotate(180deg);\n}\n\n.arrow.bottom {\n  transform: rotate(0deg);\n}\n\n.arrow.right {\n  transform: rotate(-90deg);\n}\n\n.arrow.left {\n  transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n  font-family: 'Inter', sans-serif;\n  text-wrap: pretty;\n}\n","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 '@utils/tv';\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   * 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"],"version":3}

package/dist/components/bcm-popover.js

@@ -1,9 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-50133556.js';
-import { c as ce } from './p-5fcf77f9.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-CzcTU1ty.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
 const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
-const BcmPopoverStyle0 = popoverCss;
 
 const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
     constructor() {
@@ -118,7 +117,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
                 [staticSide]: '-4px',
             });
         };
-        this.popoverClass = ce({
+        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',
@@ -178,11 +177,11 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
             isOpen: this.open,
             size: this.size,
         });
-        return (h("div", { key: '3fe47e7ebc4fb9f9fad0fda8dedf11f2ea8e904f', class: "relative" }, h("slot", { key: '8dd0e99a839b2c9c0ad6df67356bf616dae407f1', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'b4339c24996ec4666ffb731f7908513ade8cb5d8', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f94ca6625dac67dd16f625398c007a274e677ac7', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'd64bf52940bef06b04ec2c13f3116652a7b6b8d6', class: header(), part: "header" }, h("slot", { key: 'be1ee83453f9b159297e6e7e73d5451f21fbb873', name: "header" }, this.headerText)), h("div", { key: '9838c02e51fac40992a34fdfcaecb8d48fba48c8', class: content(), part: "content" }, h("slot", { key: '0f01f42280a5058d4a4aacca035111e8990c194a', name: "content" }, this.message)))));
+        return (h("div", { key: 'e57bc4bf987d3e0ab1c32093c0c2aa4fb19ec403', class: "relative" }, h("slot", { key: '4e2cf108937324457a86501891f280abc1ab1bbb', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '63ef22a0aaed9d37a570686c191a2d1b901a38df', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f6c3d7d6733e60928703b3be49b69abc69693a2e', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: '88898bfe6a978e5a7f85c9bd72387a1965bd5e8b', class: header(), part: "header" }, h("slot", { key: '13d490f43ac484bfe7c7ece3d93cc5161d85ef6f', name: "header" }, this.headerText)), h("div", { key: 'a1de41f15a483d4eefdbc915109f971225163852', class: content(), part: "content" }, h("slot", { key: '8000dff7ff5ed0466fcb50dae1b23c0510a7bfc8', name: "content" }, this.message)))));
     }
     get el() { return this; }
-    static get style() { return BcmPopoverStyle0; }
-}, [1, "bcm-popover", {
+    static get style() { return popoverCss; }
+}, [257, "bcm-popover", {
         "size": [1],
         "placement": [1],
         "trigger": [1],
@@ -212,5 +211,6 @@ const BcmPopover = Popover;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmPopover, defineCustomElement };
+//# sourceMappingURL=bcm-popover.js.map
 
 //# sourceMappingURL=bcm-popover.js.map

package/dist/components/bcm-popover.js.map

@@ -1 +1 @@
-{"file":"bcm-popover.js","mappings":"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","names":["tv"],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","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"],"version":3}
+{"file":"bcm-popover.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","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 '@utils/tv';\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"],"version":3}

package/dist/components/bcm-radio-group.js

@@ -1,10 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { c as ce } from './p-5fcf77f9.js';
-import { g as generateId } from './p-ba2410ef.js';
-import { c as classNames } from './p-12360e4c.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
+import { g as generateId } from './p-IBjzkjef.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
 
 const radioGroupCss = ".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}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.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-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmRadioGroupStyle0 = radioGroupCss;
 
 const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup extends H {
     constructor() {
@@ -52,7 +51,7 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
                 radio.error = this.error;
             });
         };
-        this.radioGroupClass = ce({
+        this.radioGroupClass = tv({
             slots: {
                 host: ['bcm-ui-element bcm-radio-group flex flex-col'],
                 container: ['flex'],
@@ -101,7 +100,7 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
      */
     async setClear() {
         var _a;
-        this.value = "";
+        this.value = '';
         (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
             radio.checked = false;
         });
@@ -140,14 +139,14 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
             size: this.size,
             direction: this.direction,
         });
-        return (h("div", { key: '482530d13c741ccd1d4a6a2255f984a3957cb3f1', class: host() }, this.label && (h("label", { key: '15b52d29e3ee83bfc6ccd483d4296195f2eb562b', class: classNames('input-label font-medium', {
+        return (h("div", { key: '8a8ca20a35d1b1dc50a9cbd44b37c21cc9591617', class: host() }, this.label && (h("label", { key: '82df9232afd7a395acaa50096f48b74349f82c0d', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }) }, h("slot", { key: 'f241a0ec8a9f8b5175e54c27238a81abe6e5c043', name: "label" }, this.label), this.required && h("span", { key: 'c091f0d477cb5b8a5ba88ad2aff77f212c780058' }, "*"))), h("div", { key: 'f91e7e3bfd60aa6907ff3b2869d21a6962664062', class: container() }, h("slot", { key: 'ec597411044a4b6a537f7e5bf7391499dacd86e7', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '6b35ceb2bbdd2c6bbf1c6d3643902ae022dba111', class: classNames('input-caption-text font-regular mt-1', {
+            }) }, h("slot", { key: 'e328ff4bb753334d9a15ddd6879566149c490d89', name: "label" }, this.label), this.required && h("span", { key: '4671022c9d17783262dd0d80034a1f0f67517b24' }, "*"))), h("div", { key: '87df33142912050dc54c54d8cedf0497936aa7b8', class: container() }, h("slot", { key: '204d69a31753136cd8000904d604d21d748b60bb', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '4a7a5457542d2bba9c72e15d3ac0c9efc68bd4e9', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled,
                 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
                 'text-[--bcm-ui-color-text-disabled]': this.disabled,
@@ -161,8 +160,8 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
     static get watchers() { return {
         "value": ["handleValueChange"]
     }; }
-    static get style() { return BcmRadioGroupStyle0; }
-}, [1, "bcm-radio-group", {
+    static get style() { return radioGroupCss; }
+}, [257, "bcm-radio-group", {
         "name": [1],
         "value": [1],
         "disabled": [4],
@@ -196,5 +195,6 @@ const BcmRadioGroup = BcmRadioGroup$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmRadioGroup, defineCustomElement };
+//# sourceMappingURL=bcm-radio-group.js.map
 
 //# sourceMappingURL=bcm-radio-group.js.map

package/dist/components/bcm-radio-group.js.map

@@ -1 +1 @@
-{"file":"bcm-radio-group.js","mappings":"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","names":["BcmRadioGroup","tv"],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n    tag: 'bcm-radio-group',\n    styleUrl: 'radio-group.css',\n    shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n    @Element() host: HTMLBcmRadioGroupElement;\n\n    /**\n     * The name attribute for the radio group, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The currently selected value of the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio group and its radio buttons are disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Whether the radio group is required in a form.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    required: boolean = false;\n\n    /**\n     * Whether the radio group is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * The label text to display above the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n     * @prop\n     * @defaultValue 'vertical'\n     */\n    @Prop()\n    direction: 'horizontal' | 'vertical' = 'vertical';\n\n    /**\n     * Optional caption text to display below the radio group, often used for error messages or hints.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    captionText?: string;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioGroupChange',\n    })\n    bcmRadioGroupChange: EventEmitter<any>;\n\n    private readonly radioGroupName = generateId('radio-group-name');\n\n    get radios() {\n        return this.host.querySelectorAll('bcm-radio');\n    }\n\n    componentWillLoad() {\n        if (this.value) {\n            this.updateRadios(this.value);\n        }\n    }\n\n    /**\n     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n     * @method\n     */\n    @Method()\n    async setClear() {\n        this.value = \"\";\n        this.radios?.forEach(radio => {\n            radio.checked = false;\n        });\n    }\n\n    /**\n     * Resets the error state and caption.\n     * @method\n     */\n    @Method()\n    async resetCaption() {\n        this.error = false;\n        this.captionText = undefined;\n    }\n\n    private handleSlotChange = () => {\n        this.radios.forEach(radio => {\n            radio.size = this.size;\n            radio.name = this.name ?? this.radioGroupName;\n            radio.disabled = this.disabled;\n            radio.error = this.error;\n        });\n    };\n\n    @Watch('value')\n    handleValueChange(newValue: string) {\n        this.updateRadios(newValue);\n    }\n\n    @Listen('bcmRadioChange', { capture: true })\n    handleRadioChange(event: CustomEvent) {\n        const radio = event.target as HTMLBcmRadioElement;\n        const radios = this.host.querySelectorAll('bcm-radio');\n        radios.forEach(r => {\n            if (r !== radio) {\n                r.checked = false;\n            }\n        });\n        this.bcmRadioGroupChange.emit({\n            value: radio.value,\n            element: radio,\n        });\n    }\n\n    private updateRadios(value: string) {\n        this.radios.forEach(radio => {\n            radio.checked = radio.value === value;\n        });\n    }\n\n    private radioGroupClass = tv({\n        slots: {\n            host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n            container: ['flex'],\n        },\n        variants: {\n            size: {\n                small: {\n                    host: 'gap-1.5',\n                    container: 'gap-1.5',\n                },\n                medium: {\n                    host: 'gap-2',\n                    container: 'gap-2',\n                },\n                large: {\n                    host: 'gap-2.5',\n                    container: 'gap-2.5',\n                },\n            },\n            direction: {\n                horizontal: {\n                    container: ['flex-row flex-wrap'],\n                },\n                vertical: {\n                    container: ['flex-col'],\n                },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            direction: 'vertical',\n        },\n    });\n\n    render() {\n        const { host, container } = this.radioGroupClass({\n            size: this.size,\n            direction: this.direction,\n        });\n        return (\n            <div class={host()}>\n                {this.label && (\n                    <label\n                        class={classNames(\n                            'input-label font-medium',\n                            {\n                                'text-color-label': !this.disabled,\n                                'text-color-disabled': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        <slot name=\"label\">{this.label}</slot>\n                        {this.required && <span>*</span>}\n                    </label>\n                )}\n                <div class={container()}>\n                    <slot onSlotchange={this.handleSlotChange}></slot>\n                </div>\n\n                {this.captionText && (\n                    <div\n                        class={classNames(\n                            'input-caption-text font-regular mt-1',\n                            {\n                                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        {this.captionText}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"bcm-radio-group.js","mappings":"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","names":["BcmRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'bcm-radio-group',\n  styleUrl: 'radio-group.css',\n  shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n  @Element() host: HTMLBcmRadioGroupElement;\n\n  /**\n   * The name attribute for the radio group, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The currently selected value of the radio group.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio group and its radio buttons are disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Whether the radio group is required in a form.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  required: boolean = false;\n\n  /**\n   * Whether the radio group is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * The label text to display above the radio group.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n   * @prop\n   * @defaultValue 'vertical'\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Optional caption text to display below the radio group, often used for error messages or hints.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  captionText?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioGroupChange',\n  })\n  bcmRadioGroupChange: EventEmitter<any>;\n\n  private readonly radioGroupName = generateId('radio-group-name');\n\n  get radios() {\n    return this.host.querySelectorAll('bcm-radio');\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.updateRadios(this.value);\n    }\n  }\n\n  /**\n   * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n   * @method\n   */\n  @Method()\n  async setClear() {\n    this.value = '';\n    this.radios?.forEach(radio => {\n      radio.checked = false;\n    });\n  }\n\n  /**\n   * Resets the error state and caption.\n   * @method\n   */\n  @Method()\n  async resetCaption() {\n    this.error = false;\n    this.captionText = undefined;\n  }\n\n  private handleSlotChange = () => {\n    this.radios.forEach(radio => {\n      radio.size = this.size;\n      radio.name = this.name ?? this.radioGroupName;\n      radio.disabled = this.disabled;\n      radio.error = this.error;\n    });\n  };\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.updateRadios(newValue);\n  }\n\n  @Listen('bcmRadioChange', { capture: true })\n  handleRadioChange(event: CustomEvent) {\n    const radio = event.target as HTMLBcmRadioElement;\n    const radios = this.host.querySelectorAll('bcm-radio');\n    radios.forEach(r => {\n      if (r !== radio) {\n        r.checked = false;\n      }\n    });\n    this.bcmRadioGroupChange.emit({\n      value: radio.value,\n      element: radio,\n    });\n  }\n\n  private updateRadios(value: string) {\n    this.radios.forEach(radio => {\n      radio.checked = radio.value === value;\n    });\n  }\n\n  private radioGroupClass = tv({\n    slots: {\n      host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n      container: ['flex'],\n    },\n    variants: {\n      size: {\n        small: {\n          host: 'gap-1.5',\n          container: 'gap-1.5',\n        },\n        medium: {\n          host: 'gap-2',\n          container: 'gap-2',\n        },\n        large: {\n          host: 'gap-2.5',\n          container: 'gap-2.5',\n        },\n      },\n      direction: {\n        horizontal: {\n          container: ['flex-row flex-wrap'],\n        },\n        vertical: {\n          container: ['flex-col'],\n        },\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n      direction: 'vertical',\n    },\n  });\n\n  render() {\n    const { host, container } = this.radioGroupClass({\n      size: this.size,\n      direction: this.direction,\n    });\n    return (\n      <div class={host()}>\n        {this.label && (\n          <label\n            class={classNames(\n              'input-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n        <div class={container()}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n\n        {this.captionText && (\n          <div\n            class={classNames(\n              'input-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-radio.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { c as ce } from './p-5fcf77f9.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
 const radioCss = ".block{display:block}:host{display:block}.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}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\\[18px\\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-radio-bg\\]{background-color:var(--bcm-radio-bg)}.bg-\\[--bcm-radio-checked\\]{background-color:var(--bcm-radio-checked)}.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)}.font-medium{font-weight:500}.text-\\[--bcm-radio-text-color\\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\\[inset_0_0_0_3px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\\:shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border-hover\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmRadioStyle0 = radioCss;
 
 const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
     constructor() {
@@ -48,7 +47,7 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
          * @defaultValue false
          */
         this.error = false;
-        this.getRadioClass = ce({
+        this.getRadioClass = tv({
             slots: {
                 container: 'bcm-ui-element bcm-radio group',
                 dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',
@@ -160,11 +159,11 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (h("label", { key: '4b53e856e66a8f35fddca847ea0dad4f749d9ad1', class: container(), style: this.getRadioStyle() }, h("input", { key: '04506f00b7b0773c43f6d3cf65967d83f11dc1ed', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '9da73fa48763a71a9eafc6ed9bca5812317b8268', class: dotContainer() }, h("div", { key: '2126018bf6f5eef062be02cec1f081daf939c9df', class: dot() })), h("span", { key: '86f5e2485c72b27892054ffa0082307f025ad31a', class: labelClass() }, h("slot", { key: 'de05d13a1e3d88b7a6f7f7e9355d7b36d740709f' }, this.label))));
+        return (h("label", { key: '8ec133d96a6ce1549cfc2e27764883fedb192f02', class: container(), style: this.getRadioStyle() }, h("input", { key: '7dabc73fa0ea4707943db1cc5ab77b6381409b75', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: 'ac815a1849d2c415203a2084ad8f5ce518478a79', class: dotContainer() }, h("div", { key: 'b36a046d5abc43ef3cbe18fc3e938e31c5069a1d', class: dot() })), h("span", { key: 'fc3bdf6839bb08d9d4b3c0a415c49f867d4d5077', class: labelClass() }, h("slot", { key: '9cfd3891ac6650f717a97c5e6268158b2ef5b0ce' }, this.label))));
     }
     get host() { return this; }
-    static get style() { return BcmRadioStyle0; }
-}, [1, "bcm-radio", {
+    static get style() { return radioCss; }
+}, [257, "bcm-radio", {
         "label": [1],
         "name": [1],
         "value": [1],
@@ -194,5 +193,6 @@ const BcmRadio = BcmRadio$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmRadio, defineCustomElement };
+//# sourceMappingURL=bcm-radio.js.map
 
 //# sourceMappingURL=bcm-radio.js.map

package/dist/components/bcm-radio.js.map

@@ -1 +1 @@
-{"file":"bcm-radio.js","mappings":"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","names":["BcmRadio","tv"],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-radio',\n    styleUrl: 'radio.css',\n    shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n    @Element() host: HTMLBcmRadioElement;\n\n    /**\n     * The text label to display next to the radio button.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * The name attribute for the radio input, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The value of the radio button, submitted with the form.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio button is selected.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop({ reflect: true })\n    checked: boolean = false;\n\n    /**\n     * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Whether the radio button is disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled = false;\n\n    /**\n     * Whether the radio button is readonly.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    readonly = false;\n\n    /**\n     * Position of the label relative to the radio button: 'right' | 'left'.\n     * @prop\n     * @defaultValue 'right'\n     */\n    @Prop()\n    labelPosition: 'right' | 'left' = 'right';\n\n    /**\n     * Whether the radio button is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioChange',\n    })\n    bcmRadioChange: EventEmitter<void>;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmBlur: EventEmitter<FocusEvent>;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmFocus: EventEmitter<FocusEvent>;\n\n    private handleClick(): void {\n        if (this.readonly || this.disabled) return;\n        if (!this.checked) {\n            this.checked = true;\n            this.bcmRadioChange.emit();\n        }\n    }\n\n    private getRadioStyle() {\n        const defaultStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        const errorStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        const disabledStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n        };\n\n        const readonlyStyle = {\n            '--bcm-radio-bg': 'transparent',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        return {\n            ...defaultStyle,\n            ...(this.error && errorStyle),\n            ...(this.disabled && disabledStyle),\n            ...(this.readonly && readonlyStyle),\n        };\n    }\n\n    private getRadioClass = tv(\n        {\n            slots: {\n                container: 'bcm-ui-element bcm-radio group',\n                dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n                dotContainer:\n                    'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n                labelClass: 'font-medium text-[--bcm-radio-text-color]',\n            },\n            variants: {\n                size: {\n                    small: {\n                        container: 'gap-2',\n                        dotContainer: 'size-3.5',\n                        dot: 'size-2',\n                        labelClass: 'text-size-4',\n                    },\n                    medium: {\n                        container: 'gap-2.5',\n                        dotContainer: 'size-4',\n                        dot: 'size-2.5',\n                        labelClass: 'text-size-5',\n                    },\n                    large: {\n                        container: 'gap-3',\n                        dotContainer: 'size-[18px]',\n                        dot: 'size-3',\n                        labelClass: 'text-size-6',\n                    },\n                },\n                checked: {\n                    true: {\n                        dot: 'opacity-100',\n                    },\n                    false: {\n                        dot: 'opacity-0',\n                    },\n                },\n                disabled: {\n                    true: {\n                        container: 'cursor-not-allowed',\n                    },\n                    false: {\n                        container: 'cursor-pointer focus-visible:ring',\n                    },\n                },\n                readonly: {\n                    true: {\n                        container: 'cursor-default pointer-events-none',\n                        dot: 'opacity-100',\n                        dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n                    },\n                    false: '',\n                },\n                labelPosition: {\n                    left: {\n                        container: 'inline-flex flex-row-reverse items-center',\n                    },\n                    right: {\n                        container: 'inline-flex flex-row items-center',\n                    },\n                },\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n            size: this.size,\n            checked: this.checked,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            labelPosition: this.labelPosition,\n        });\n\n        return (\n            <label class={container()} style={this.getRadioStyle()}>\n                <input\n                    aria-label={this.label}\n                    role=\"radio\"\n                    aria-checked={this.checked.toString()}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled}\n                    readOnly={this.readonly}\n                    checked={this.checked}\n                    class=\"appearance-none sr-only\"\n                    onClick={() => this.handleClick()}\n                    onFocus={e => this.bcmFocus.emit(e)}\n                    onBlur={e => this.bcmBlur.emit(e)}\n                ></input>\n                <div class={dotContainer()}>\n                    <div class={dot()}></div>\n                </div>\n                <span class={labelClass()}>\n                    <slot>{this.label}</slot>\n                </span>\n            </label>\n        );\n    }\n}\n"],"version":3}
+{"file":"bcm-radio.js","mappings":"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","names":["BcmRadio","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n  @Element() host: HTMLBcmRadioElement;\n\n  /**\n   * The text label to display next to the radio button.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The name attribute for the radio input, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The value of the radio button, submitted with the form.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio button is selected.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the radio button is disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Whether the radio button is readonly.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  readonly = false;\n\n  /**\n   * Position of the label relative to the radio button: 'right' | 'left'.\n   * @prop\n   * @defaultValue 'right'\n   */\n  @Prop()\n  labelPosition: 'right' | 'left' = 'right';\n\n  /**\n   * Whether the radio button is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioChange',\n  })\n  bcmRadioChange: EventEmitter<void>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  private handleClick(): void {\n    if (this.readonly || this.disabled) return;\n    if (!this.checked) {\n      this.checked = true;\n      this.bcmRadioChange.emit();\n    }\n  }\n\n  private getRadioStyle() {\n    const defaultStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const errorStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const disabledStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n    };\n\n    const readonlyStyle = {\n      '--bcm-radio-bg': 'transparent',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.error && errorStyle),\n      ...(this.disabled && disabledStyle),\n      ...(this.readonly && readonlyStyle),\n    };\n  }\n\n  private getRadioClass = tv(\n    {\n      slots: {\n        container: 'bcm-ui-element bcm-radio group',\n        dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n        dotContainer:\n          'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n        labelClass: 'font-medium text-[--bcm-radio-text-color]',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            dotContainer: 'size-3.5',\n            dot: 'size-2',\n            labelClass: 'text-size-4',\n          },\n          medium: {\n            container: 'gap-2.5',\n            dotContainer: 'size-4',\n            dot: 'size-2.5',\n            labelClass: 'text-size-5',\n          },\n          large: {\n            container: 'gap-3',\n            dotContainer: 'size-[18px]',\n            dot: 'size-3',\n            labelClass: 'text-size-6',\n          },\n        },\n        checked: {\n          true: {\n            dot: 'opacity-100',\n          },\n          false: {\n            dot: 'opacity-0',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer focus-visible:ring',\n          },\n        },\n        readonly: {\n          true: {\n            container: 'cursor-default pointer-events-none',\n            dot: 'opacity-100',\n            dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n          },\n          false: '',\n        },\n        labelPosition: {\n          left: {\n            container: 'inline-flex flex-row-reverse items-center',\n          },\n          right: {\n            container: 'inline-flex flex-row items-center',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      labelPosition: this.labelPosition,\n    });\n\n    return (\n      <label class={container()} style={this.getRadioStyle()}>\n        <input\n          aria-label={this.label}\n          role=\"radio\"\n          aria-checked={this.checked.toString()}\n          type=\"radio\"\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          checked={this.checked}\n          class=\"appearance-none sr-only\"\n          onClick={() => this.handleClick()}\n          onFocus={e => this.bcmFocus.emit(e)}\n          onBlur={e => this.bcmBlur.emit(e)}\n        ></input>\n        <div class={dotContainer()}>\n          <div class={dot()}></div>\n        </div>\n        <span class={labelClass()}>\n          <slot>{this.label}</slot>\n        </span>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-segmented-picker-option.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
-import { c as ce } from './p-5fcf77f9.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
 const segmentedPickerOptionCss = ".relative{position:relative}.flex{display:flex}.outline{outline-style:solid}:host{display:inline-block;flex:1}.segmented-option{background:transparent;height:100%;outline:none;position:relative;width:100%;z-index:1}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\\[1px\\]{padding-bottom:1px;padding-top:1px}.py-\\[3px\\]{padding-bottom:3px;padding-top:3px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.text-center{text-align:center}.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-\\[--bcm-ui-color-text-header\\]{color:var(--bcm-ui-color-text-header)}.text-\\[--bcm-ui-color-text-helper\\]{color:var(--bcm-ui-color-text-helper)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmSegmentedPickerOptionStyle0 = segmentedPickerOptionCss;
 
 const BcmSegmentedPickerOption$1 = /*@__PURE__*/ proxyCustomElement(class BcmSegmentedPickerOption extends H {
     constructor() {
@@ -20,7 +19,7 @@ const BcmSegmentedPickerOption$1 = /*@__PURE__*/ proxyCustomElement(class BcmSeg
                 return;
             this.bcmOptionClick.emit(this.value);
         };
-        this.optionClass = ce({
+        this.optionClass = tv({
             base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',
             variants: {
                 size: {
@@ -92,15 +91,15 @@ const BcmSegmentedPickerOption$1 = /*@__PURE__*/ proxyCustomElement(class BcmSeg
     render() {
         const size = this.size || this.getSizeFromParent();
         const disabled = this.isDisabled();
-        return (h(Host, { key: '0e1d1fa066ff7f75cefa08efc39d5403bcaa8939' }, h("button", { key: '6d7f2ccc063979c6f7ebc39780ce599bdf0544d9', class: this.optionClass({
+        return (h(Host, { key: '2a73da779908b67076dfea3943e83c9bd4e1164b' }, h("button", { key: 'a2f1efb0c73378026867bde6f9dd1cea4adb36c2', class: this.optionClass({
                 size,
                 selected: this.selected,
                 disabled,
-            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '4b0c5a40f76ef045964b32a3fa7c1a8f26aa5b66' }, this.label))));
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '62f4c0d40ffb4cbe2c7a0cc18c0adeb7689ff2df' }, this.label))));
     }
     get host() { return this; }
-    static get style() { return BcmSegmentedPickerOptionStyle0; }
-}, [1, "bcm-segmented-picker-option", {
+    static get style() { return segmentedPickerOptionCss; }
+}, [257, "bcm-segmented-picker-option", {
         "value": [1],
         "label": [1],
         "size": [1],
@@ -127,5 +126,6 @@ const BcmSegmentedPickerOption = BcmSegmentedPickerOption$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmSegmentedPickerOption, defineCustomElement };
+//# sourceMappingURL=bcm-segmented-picker-option.js.map
 
 //# sourceMappingURL=bcm-segmented-picker-option.js.map