bromcom-ui-next 0.1.4 → 0.1.6

package/dist/esm/validation-messages-af4512f0.js.map

@@ -0,0 +1 @@
+{"file":"validation-messages-af4512f0.js","mappings":"MAEa,IAAI;IAIf,OAAO,WAAW,CAAC,MAAc,EAAE,QAAgC;QACjE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;;KAE7B;IAED,OAAO,SAAS,CAAC,MAAc;QAC7B,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;;YAE5B,OAAO,CAAC,GAAG,CAAC,2BAA2B,MAAM,EAAE,CAAC,CAAC;SAClD;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,WAAW,MAAM,yBAAyB,CAAC,CAAC;SAC1D;KACF;IAED,OAAO,CAAC,CAAC,GAAW,EAAE,IAA0B;;QAC9C,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,0CAAG,GAAG,CAAC,KAAI,GAAG,CAAC;QAChE,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAE1B,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC;YACnD,OAAO,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,GAAG,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAChE,EAAE,OAAO,CAAC,CAAC;KACb;;AA1Bc,aAAQ,GAA2C,EAAE,CAAC;AACtD,kBAAa,GAAG,IAAI;;MCFxB,yBAAyB,GAAG;IACvC,KAAK,EAAE,oCAAoC;IAC3C,QAAQ,EAAE,wBAAwB;IAClC,SAAS,EAAE,wCAAwC;IACnD,SAAS,EAAE,4CAA4C;IACvD,GAAG,EAAE,8BAA8B;IACnC,GAAG,EAAE,6BAA6B;IAClC,OAAO,EAAE,6BAA6B;EACtC;MAEW,qBAAqB,GAAG,CAAC,MAAc,EAAE,QAAmD;IACvG,IAAI,CAAC,WAAW,CAAC,MAAM,kCAAO,yBAAyB,GAAK,QAAQ,EAAG,CAAC;AAC1E,EAAE;MAEW,oBAAoB,GAAG,CAAC,IAA4C,EAAE,IAAsC;IACvH,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAC5B;;;;","names":[],"sources":["src/utils/i18n.ts","src/utils/validation-messages.ts"],"sourcesContent":["export type MessageTemplateData = Record<string, string | number>;\n\nexport class I18n {\n  private static messages: Record<string, Record<string, string>> = {};\n  private static currentLocale = 'en';\n\n  static setMessages(locale: string, messages: Record<string, string>) {\n    this.messages[locale] = messages;\n    this.currentLocale = locale; // Mesajları set ederken locale'i de güncelle\n    // console.log(`I18n messages set for locale: ${locale}`, messages);\n  }\n\n  static setLocale(locale: string) {\n    if (this.messages[locale]) {\n      this.currentLocale = locale;\n      // Locale değiştiğinde console'a bilgi ver (development için)\n      console.log(`I18n locale changed to: ${locale}`);\n    } else {\n      console.warn(`Locale '${locale}' not found in messages`);\n    }\n  }\n\n  static t(key: string, data?: MessageTemplateData): string {\n    const message = this.messages[this.currentLocale]?.[key] || key;\n    if (!data) return message;\n\n    return Object.entries(data).reduce((msg, [key, value]) => {\n      return msg.replace(new RegExp(`{${key}}`, 'g'), String(value));\n    }, message);\n  }\n}\n","import { I18n } from './i18n';\n\nexport const defaultValidationMessages = {\n  email: 'Please enter a valid email address',\n  required: 'This field is required',\n  minlength: 'Please enter at least {min} characters',\n  maxlength: 'Please enter no more than {max} characters',\n  min: 'Value must be at least {min}',\n  max: 'Value must be at most {max}',\n  pattern: 'Please enter a valid format',\n};\n\nexport const setValidationMessages = (locale: string, messages: Partial<typeof defaultValidationMessages>) => {\n  I18n.setMessages(locale, { ...defaultValidationMessages, ...messages });\n};\n\nexport const getValidationMessage = (type: keyof typeof defaultValidationMessages, data?: Record<string, string | number>) => {\n  return I18n.t(type, data);\n};\n"],"version":3}

package/dist/types/components/button/button.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition } from './types';
+import { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition } from './types';
 export declare class BcmButton {
     /** Defines the main visual style of the button */
     kind: ButtonKind;
@@ -9,6 +9,8 @@ export declare class BcmButton {
     status: ButtonStatus;
     /** Predefined button variants */
     variant?: ButtonVariant;
+    /** Button position in button group (first, middle, last) */
+    position?: ButtonPosition;
     /** Icon class name */
     icon?: string;
     /** Icon placement (prefix/suffix) */

package/dist/types/components/button/types.d.ts

@@ -3,13 +3,13 @@ export type ButtonSize = 'small' | 'medium' | 'large';
 export type ButtonType = 'button' | 'reset' | 'submit';
 export type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';
 export type IconPosition = 'prefix' | 'suffix';
-interface ButtonVariantConfig {
+export type ButtonPosition = 'first' | 'middle' | 'last' | null;
+export interface VariantOption {
     text: string;
-    status: ButtonStatus;
     icon?: string;
     iconPosition?: IconPosition;
+    status?: ButtonStatus;
     kind?: ButtonKind;
 }
-export declare const variantOptions: Record<string, ButtonVariantConfig>;
+export declare const variantOptions: Record<string, VariantOption>;
 export type ButtonVariant = keyof typeof variantOptions;
-export {};

package/dist/types/components/button-group/button-group.component.d.ts

@@ -0,0 +1,25 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';
+export declare class BcmButtonGroup implements ComponentInterface {
+    host: HTMLElement;
+    /** Defines the main visual style of buttons */
+    kind?: ButtonKind;
+    /** Controls the button size */
+    size?: ButtonSize;
+    /** Defines the button's status/state color */
+    status?: ButtonStatus;
+    /** Full width buttons */
+    fullWidth?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Button orientation */
+    orientation: 'horizontal' | 'vertical';
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private applyPropertiesToButtons;
+    private setButtonPositions;
+    private buttonGroupClass;
+    render(): any;
+}

package/dist/types/components/button-group/types.d.ts

@@ -0,0 +1,2 @@
+export type ButtonGroupGap = 'small' | 'medium' | 'large';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';

package/dist/types/components/checkbox/checkbox.component.d.ts

@@ -0,0 +1,99 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @description A checkbox component that allows users to select or deselect an option.
+ * It also supports an indeterminate state.
+ */
+export declare class Checkbox implements ComponentInterface {
+    /** Reference to the host element */
+    el: HTMLElement;
+    /**
+     * Unique ID for the component. Automatically generated if not specified.
+     */
+    _id?: string;
+    /**
+     * Label text to display next to the checkbox
+     */
+    label?: string;
+    /**
+     * Name attribute for the checkbox when used in a form
+     */
+    name: string;
+    /**
+     * Determines if the checkbox is in an indeterminate state.
+     * This is useful when some items in a group of checkboxes are selected and others are not.
+     */
+    indeterminate: boolean;
+    /**
+     * Size variant of the checkbox
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Determines if the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Indicates if the checkbox is in an error state.
+     * This affects the visual styling of the component.
+     */
+    error: boolean;
+    /**
+     * Determines if the checkbox is disabled
+     */
+    disabled: boolean;
+    /**
+     * Controls the position of the label relative to the checkbox
+     */
+    labelPosition: 'left' | 'right';
+    /**
+     * Internal state to track checked status
+     */
+    internalChecked: boolean;
+    /**
+     * Event emitted when the checked state changes
+     */
+    bcmCheckboxChange: EventEmitter<{
+        element: any;
+        checked: boolean;
+    }>;
+    /** Reference to the underlying input element */
+    private inputElement;
+    /**
+     * Lifecycle method that runs before the component first renders.
+     * Initializes the internal checked state.
+     */
+    componentWillLoad(): void;
+    /**
+     * Lifecycle method that runs after the component has rendered.
+     * Updates the indeterminate state of the input element.
+     */
+    componentDidLoad(): void;
+    /**
+     * Watches for changes to the checked prop and updates the internal state
+     * @param newValue The new checked value
+     */
+    syncCheckedProp(newValue: boolean | undefined): void;
+    /**
+     * Watches for changes to indeterminate and internalChecked states
+     * Updates the input element accordingly
+     */
+    updateIndeterminateState(): void;
+    /**
+     * Handles change events on the checkbox
+     * Updates state and emits the change event
+     */
+    private handleChange;
+    /**
+     * Returns the CSS custom properties based on component state
+     * @returns Object with CSS custom properties
+     */
+    private getStyles;
+    /**
+     * Tailwind Variants definition for the component
+     * Configures styling based on component props
+     */
+    private classes;
+    /**
+     * Renders the checkbox component
+     */
+    render(): any;
+}

package/dist/types/components/dropdown/dropdown.component.d.ts

@@ -0,0 +1,14 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Dropdown implements ComponentInterface {
+    host: HTMLElement;
+    text?: string;
+    isReady: boolean;
+    dropdownItems: HTMLBcmDropdownItemElement[];
+    protected buttonRef?: HTMLBcmButtonElement;
+    bcmDropdownChange: EventEmitter<any>;
+    componentDidLoad(): void;
+    handleDropdownItemChange(event: CustomEvent): void;
+    private dropdownClass;
+    private handleSlotChange;
+    render(): any;
+}

package/dist/types/components/dropdown-item/dropdown-item.component.d.ts

@@ -0,0 +1,14 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class DropdownItem implements ComponentInterface {
+    host: HTMLElement;
+    text: string;
+    icon: string;
+    rightIcons: string[];
+    selected: boolean;
+    error: boolean;
+    disabled: boolean;
+    bcmDropDownItemChange: EventEmitter<any>;
+    private handleClick;
+    private dropdownItemClass;
+    render(): any;
+}

package/dist/types/components/linked/linked.component.d.ts

@@ -0,0 +1,16 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class BcmLinked implements ComponentInterface {
+    host: HTMLElement;
+    targetId: string;
+    targetElement?: HTMLElement;
+    isVisible: boolean;
+    private floatingEl?;
+    private targetEl?;
+    componentDidLoad(): void;
+    private updatePosition;
+    private show;
+    private hide;
+    private toggle;
+    render(): any;
+    disconnectedCallback(): void;
+}

package/dist/types/components/pop-confirm/pop-confirm.component.d.ts

@@ -0,0 +1,195 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+import { type Placement } from '@floating-ui/dom';
+/**
+ * @component BcmPopConfirm
+ * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.
+ * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.
+ *
+ * @example Basic usage
+ * <bcm-pop-confirm target-id="trigger-btn" placement="right" header-text="Confirm Action" description="Are you sure?" confirm-text="Yes" cancel-text="No" status="warning"></bcm-pop-confirm>
+ *
+ * @example With all slots and custom styling
+ * <bcm-pop-confirm target-id="trigger-btn" placement="left" header-text="Delete Item" description="Are you sure you want to delete this item?" confirm-text="Delete" cancel-text="Cancel" status="error" arrow-color="#ffffff">
+ *   <span slot="header">Custom Header Text</span>
+ *   <span slot="body">Additional details here</span>
+ *   <span slot="footer">Custom Footer Action</span>
+ * </bcm-pop-confirm>
+ *
+ * @example Event handling
+ * // Listen to confirmation events
+ * const popConfirm = document.querySelector('bcm-pop-confirm');
+ * popConfirm.addEventListener('bcmConfirm', () => {
+ *   console.log('User confirmed the action!');
+ * });
+ * popConfirm.addEventListener('bcmCancel', () => {
+ *   console.log('User canceled the action!');
+ * });
+ *
+ * // Programmatically control pop-up
+ * await popConfirm.show(); // Show the pop-up
+ * await popConfirm.hide(); // Hide the pop-up
+ *
+ * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')
+ * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')
+ * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')
+ * @prop {string} description - The description or body content of the pop-up (default: '')
+ * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')
+ * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')
+ * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')
+ * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')
+ * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)
+ * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up
+ *
+ * @slot header - Custom content for the header area (optional)
+ * @slot body - Custom content for the main body area (optional, falls back to `description`)
+ * @slot footer - Custom content for the footer area (optional)
+ *
+ * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up
+ * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up
+ *
+ * @csspart container - The root container element of the pop-up
+ * @csspart header - The header section with title and close icon
+ * @csspart content - The main content section of the pop-up
+ * @csspart footer - The footer section with confirm/cancel buttons
+ * @csspart arrow - The positioning arrow pointing to the trigger
+ *
+ * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)
+ * @css {string} --popover-bg - Background color of the pop-up
+ * @css {string} --text-color - Text color of the pop-up based on status
+ *
+ * @methods
+ * show() - Programmatically shows the pop-up
+ * hide() - Programmatically hides the pop-up
+ */
+export declare class PopConfirm implements ComponentInterface {
+    el: HTMLElement;
+    /**
+     * The color of the arrow pointing to the trigger element.
+     * Can be a CSS custom property or a specific color value.
+     * @default 'var(--bcm-ui-color-background-basic-panel)'
+     */
+    arrowColor: string;
+    /**
+     * The text displayed on the cancel button.
+     * @default 'Cancel'
+     */
+    cancelText: string;
+    /**
+     * The text displayed on the confirm button.
+     * @default 'Yes'
+     */
+    confirmText: string;
+    /**
+     * The description or body content of the pop-up.
+     * @default ''
+     */
+    description: string;
+    /**
+     * The header text displayed at the top of the pop-up.
+     * @default ''
+     */
+    headerText: string;
+    /**
+     * The placement position of the pop-up relative to the trigger element.
+     * @default 'bottom'
+     */
+    placement: Placement;
+    /**
+     * The size of the pop-up, determining its dimensions and padding.
+     * @default 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The status of the pop-up, affecting its icon and color scheme.
+     * @default 'info'
+     */
+    status: 'info' | 'error' | 'warning' | 'success';
+    /**
+     * Whether to display a status icon based on the `status` prop.
+     * @default true
+     */
+    statusIcon: boolean;
+    /**
+     * The ID of the trigger element (e.g., a button) that opens the pop-up.
+     */
+    targetId: string;
+    /**
+     * Indicates whether the pop-up is currently open or closed.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * The current placement position of the pop-up after computation.
+     */
+    currentPlacement: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Emits an event when the user confirms the action in the pop-up.
+     */
+    bcmConfirm: EventEmitter<void>;
+    /**
+     * Emits an event when the user cancels the action in the pop-up.
+     */
+    bcmCancel: EventEmitter<void>;
+    private triggerElement;
+    private popoverElement;
+    private arrowElement;
+    /**
+     * Lifecycle method called when the component is loaded.
+     * Initializes the trigger element and attaches a click event listener.
+     */
+    componentDidLoad(): void;
+    /**
+     * Handles the click event on the trigger element to open the pop-up.
+     * Prevents default behavior and propagation, then opens the pop-up if it's closed.
+     * @param event The mouse event triggering the action.
+     */
+    private handleTriggerClick;
+    /**
+     * Handles the confirm button click, closing the pop-up and emitting the confirm event.
+     * Prevents default behavior and propagation.
+     * @param event The mouse event triggering the action.
+     */
+    private handleConfirm;
+    /**
+     * Handles the cancel button click, closing the pop-up and emitting the cancel event.
+     * Prevents default behavior and propagation.
+     * @param event The mouse event triggering the action.
+     */
+    private handleCancel;
+    /**
+     * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.
+     * @returns A promise that resolves when the pop-up is shown.
+     */
+    show(): Promise<void>;
+    /**
+     * Programmatically hides the pop-up by setting `isOpen` to false.
+     * @returns A promise that resolves when the pop-up is hidden.
+     */
+    hide(): Promise<void>;
+    /**
+     * Updates the position of the pop-up relative to the trigger element using Floating UI.
+     * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.
+     */
+    private updatePosition;
+    /**
+     * Returns the dynamic styles for the pop-up, including text and arrow colors.
+     * @returns An object containing CSS custom properties.
+     */
+    private get popoverStyle();
+    /**
+     * Lifecycle method called when the component is removed from the DOM.
+     * Cleans up the event listener to prevent memory leaks.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Defines Tailwind Variants classes for the pop-up's structure and styling.
+     * Supports different sizes and generates dynamic class names.
+     */
+    private classes;
+    /**
+     * Renders the pop-up component, showing it only when `isOpen` is true.
+     * Includes header, main content, and footer sections with dynamic styling and slots for customization.
+     * @returns JSX.Element representing the pop-up or an empty fragment if closed.
+     */
+    render(): any;
+}

package/dist/types/components/popover/popover.component.d.ts

@@ -0,0 +1,118 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component BcmPopover
+ * @description A flexible popover component that displays contextual information or content relative to a target element.
+ * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ *
+ * @example Basic Click Popover
+ * <bcm-popover trigger="click" size="medium" placement="top">
+ *   <bcm-button>Click Me</bcm-button>
+ *   <span slot="header">Header</span>
+ *   <span slot="content">This is a simple popover content.</span>
+ * </bcm-popover>
+ *
+ * @example Hover Popover with Props
+ * <bcm-popover trigger="hover" hover-delay="200" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
+ *   <bcm-button>Hover Me</bcm-button>
+ * </bcm-popover>
+ *
+ * @example Programmatic Control
+ * <bcm-popover id="my-popover" trigger="click">
+ *   <bcm-button>Toggle Me</bcm-button>
+ *   <span slot="content">Controlled popover</span>
+ * </bcm-popover>
+ * <script>
+ *   const popover = document.querySelector('#my-popover');
+ *   popover.openPopup(); // Opens the popover
+ *   popover.closePopup(); // Closes the popover
+ * </script>
+ *
+ * @slot - Default slot for the target element that triggers the popover
+ * @slot header - Slot for custom header content
+ * @slot content - Slot for custom popover content
+ *
+ * @csspart popover - The root popover container element, stylable for the entire popover
+ * @csspart header - The header section of the popover, stylable for the title area
+ * @csspart content - The content section of the popover, stylable for the main content area
+ * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
+ */
+export declare class Popover implements ComponentInterface {
+    el: HTMLElement;
+    private targetElement;
+    private popoverElement;
+    private arrowElement;
+    private hoverTimeout;
+    private cleanupAutoUpdate;
+    /**
+     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.
+     * Controls the text size and padding of the popover content.
+     * Default: 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.
+     * Determines where the popover appears around the trigger element.
+     * Default: 'top'
+     */
+    placement: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.
+     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+     * Default: 'click'
+     */
+    trigger: 'click' | 'hover';
+    /**
+     * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.
+     * Adds a delay to prevent flickering on quick mouse movements.
+     * Default: 150
+     */
+    hoverDelay: number;
+    /**
+     * @prop {boolean} open - Indicates whether the popover is currently open.
+     * Can be set programmatically or toggled by user interaction. Mutable.
+     * Default: false
+     */
+    open: boolean;
+    /**
+     * @prop {string} headerText - Custom text for the popover header.
+     * Used as fallback content if the 'header' slot is not provided.
+     */
+    headerText: string;
+    /**
+     * @prop {string} message - Custom text for the popover content.
+     * Used as fallback content if the 'content' slot is not provided.
+     */
+    message: string;
+    /**
+     * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.
+     * Useful for tracking when the popover becomes visible.
+     */
+    bcmPopoverOpen: EventEmitter<void>;
+    /**
+     * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.
+     * Useful for tracking when the popover is hidden.
+     */
+    bcmPopoverClose: EventEmitter<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private togglePopover;
+    private showPopover;
+    private hidePopover;
+    /**
+     * @method {Promise<void>} openPopup - Programmatically opens the popover.
+     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
+     * @returns {Promise<void>} A promise that resolves when the popover is opened.
+     */
+    openPopup(): Promise<void>;
+    /**
+     * @method {Promise<void>} closePopup - Programmatically closes the popover.
+     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
+     * @returns {Promise<void>} A promise that resolves when the popover is closed.
+     */
+    closePopup(): Promise<void>;
+    private handleSlotChange;
+    private handleOutsideClick;
+    private updatePosition;
+    private popoverClass;
+    render(): any;
+}

package/dist/types/components/radio/radio.component.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @component BcmRadio
+ * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.
+ * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.
+ *
+ * @example
+ * <bcm-radio label="Option 1" name="group1" value="1" size="medium" label-position="right">
+ *   Option 1
+ * </bcm-radio>
+ *
+ * @example Radio with error state
+ * <bcm-radio label="Error Option" name="group1" value="2" error={true}>
+ *   Error Option
+ * </bcm-radio>
+ *
+ * @prop {string} label - The text label to display next to the radio button.
+ * @prop {string} name - The name attribute for the radio input, used to group radio buttons.
+ * @prop {string} value - The value of the radio button, submitted with the form.
+ * @prop {boolean} checked - Whether the radio button is selected.
+ * @defaultValue false
+ * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.
+ * @defaultValue 'medium'
+ * @prop {boolean} disabled - Whether the radio button is disabled.
+ * @defaultValue false
+ * @prop {boolean} readonly - Whether the radio button is readonly.
+ * @defaultValue false
+ * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.
+ * @defaultValue 'right'
+ * @prop {boolean} error - Whether the radio button is in an error state.
+ * @defaultValue false
+ *
+ * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.
+ * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.
+ * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.
+ *
+ * @csspart container - The root label element wrapping the radio button and label.
+ * @csspart dotContainer - The container for the radio button dot.
+ * @csspart dot - The inner dot of the radio button.
+ * @csspart label - The label text element.
+ */
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class BcmRadio implements ComponentInterface {
+    host: HTMLBcmRadioElement;
+    /**
+     * The text label to display next to the radio button.
+     * @prop
+     * @defaultValue undefined
+     */
+    label: string;
+    /**
+     * The name attribute for the radio input, used to group radio buttons.
+     * @prop
+     * @defaultValue undefined
+     */
+    name: string;
+    /**
+     * The value of the radio button, submitted with the form.
+     * @prop
+     * @defaultValue undefined
+     */
+    value: string;
+    /**
+     * Whether the radio button is selected.
+     * @prop
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Defines the size of the radio button: 'small' | 'medium' | 'large'.
+     * @prop
+     * @defaultValue 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether the radio button is disabled.
+     * @prop
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Whether the radio button is readonly.
+     * @prop
+     * @defaultValue false
+     */
+    readonly: boolean;
+    /**
+     * Position of the label relative to the radio button: 'right' | 'left'.
+     * @prop
+     * @defaultValue 'right'
+     */
+    labelPosition: 'right' | 'left';
+    /**
+     * Whether the radio button is in an error state.
+     * @prop
+     * @defaultValue false
+     */
+    error: boolean;
+    bcmRadioChange: EventEmitter<void>;
+    bcmBlur: EventEmitter<FocusEvent>;
+    bcmFocus: EventEmitter<FocusEvent>;
+    private handleClick;
+    private getRadioStyle;
+    private getRadioClass;
+    render(): any;
+}