bromcom-ui-next 0.1.28 → 0.1.30

package/dist/types/components.d.ts

@@ -17,9 +17,11 @@ import { Event } from "./stencil-public-runtime";
 import { TriggerType } from "./components/linked/linked.component";
 import { Placement } from "@floating-ui/dom";
 import { ModalPlacement, ModalSize } from "./components/modal/modal.component";
+import { PopConfirmPlacement, PopConfirmSize, PopConfirmStatus } from "./components/pop-confirm/pop-confirm.component";
 import { SegmentedPickerSize } from "./components/segmented-picker/types";
 import { TextSize, TextVariant } from "./components/text/text.types";
 import { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
+import { TooltipPlacement, TooltipSize, TooltipTrigger } from "./components/tooltip/tooltip.component";
 export { AccordionChangeEventType } from "./components/accordion/types";
 export { AccordionGroupChangeEventType } from "./components/accordion-group/types";
 export { AlertKind, AlertSize, AlertStatus } from "./components/alert/types";
@@ -32,9 +34,11 @@ export { Event } from "./stencil-public-runtime";
 export { TriggerType } from "./components/linked/linked.component";
 export { Placement } from "@floating-ui/dom";
 export { ModalPlacement, ModalSize } from "./components/modal/modal.component";
+export { PopConfirmPlacement, PopConfirmSize, PopConfirmStatus } from "./components/pop-confirm/pop-confirm.component";
 export { SegmentedPickerSize } from "./components/segmented-picker/types";
 export { TextSize, TextVariant } from "./components/text/text.types";
 export { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
+export { TooltipPlacement, TooltipSize, TooltipTrigger } from "./components/tooltip/tooltip.component";
 export namespace Components {
     /**
      * @component BcmAccordion
@@ -524,6 +528,11 @@ export namespace Components {
           * @default false
          */
         "error": boolean;
+        /**
+          * Full width checkbox
+          * @default false
+         */
+        "fullWidth": boolean;
         /**
           * 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.
           * @default false
@@ -630,30 +639,109 @@ export namespace Components {
          */
         "variant": 'solid' | 'dashed' | 'dotted';
     }
+    /**
+     * @component BcmDrawer
+     * @description A slide-in panel component built on the native HTML Dialog API.
+     * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.
+     * @example ```html
+     * <!-- Basic usage -->
+     * <bcm-drawer open header-text="Menu" position="left">
+     *   <nav>
+     *     <a href="/home">Home</a>
+     *     <a href="/about">About</a>
+     *   </nav>
+     * </bcm-drawer>
+     * <!-- Custom size and position -->
+     * <bcm-drawer size="large" position="right">
+     *   <div slot="header">Settings</div>
+     *   <form>...</form>
+     *   <div slot="footer">
+     *     <button data-dismiss>Cancel</button>
+     *     <button>Save</button>
+     *   </div>
+     * </bcm-drawer>
+     * <!-- Custom size with CSS units -->
+     * <bcm-drawer size="600px" position="bottom">
+     *   <p>Custom height drawer</p>
+     * </bcm-drawer>
+     * <!-- Programmatic usage -->
+     * <bcm-drawer id="myDrawer">Content</bcm-drawer>
+     * <script>
+     *   document.getElementById('myDrawer').show();
+     * </script>
+     * ```
+     */
     interface BcmDrawer {
         /**
+          * Controls backdrop behavior - true: Shows backdrop, drawer can be closed by clicking outside - false: No backdrop - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+          * @default true
+         */
+        "backdrop": boolean | 'static';
+        /**
+          * Allows closing the drawer by clicking on the backdrop
+          * @default true
+         */
+        "closeOnBackdrop": boolean;
+        /**
+          * Allows closing the drawer by pressing the Escape key
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * Makes the drawer take the full screen (100vw x 100vh)
+          * @default false
+         */
+        "fullScreen": boolean;
+        /**
+          * Makes the drawer take full width (for left/right) or full height (for top/bottom)
           * @default false
          */
         "fullWidth": boolean;
+        /**
+          * Text to display in the drawer header
+         */
         "headerText"?: string;
+        /**
+          * Helper text to display below the header title
+         */
+        "helperText"?: string;
+        /**
+          * Programmatically closes the drawer
+         */
         "hide": () => Promise<void>;
         /**
+          * Hides the footer section completely
+          * @default false
+         */
+        "noFooter": boolean;
+        /**
+          * Hides the header section completely
           * @default false
          */
         "noHeader": boolean;
         /**
+          * Controls whether the drawer is open or closed
           * @default false
          */
         "open": boolean;
         /**
+          * The position where the drawer slides in from - 'left': Slides from the left edge - 'right': Slides from the right edge - 'top': Slides from the top edge - 'bottom': Slides from the bottom edge
           * @default 'right'
          */
         "position": DrawerPosition;
+        /**
+          * Programmatically opens the drawer
+         */
         "show": () => Promise<void>;
         /**
+          * The size of the drawer. Can be a preset value or a custom CSS size - For left/right drawers:   - 'small': 320px   - 'medium': 480px   - 'large': 1064px - For top/bottom drawers:   - 'small': 40vh   - 'medium': 60vh   - 'large': 90vh - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')
           * @default 'medium'
          */
         "size": DrawerSize;
+        /**
+          * Toggles the drawer open/closed state
+         */
+        "toggle": () => Promise<void>;
     }
     interface BcmDropdown {
         "text"?: string;
@@ -802,221 +890,436 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @component BcmLinked
+     * @description A flexible linked floating element component that displays contextual content relative to a trigger element.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Supports different trigger types (click, hover, focus, manual) and comprehensive event system.
+     * @example Basic Click Trigger
+     * <bcm-linked trigger="click">
+     * <button slot="trigger">Click Me</button>
+     * <div>Floating content here</div>
+     * </bcm-linked>
+     * @example Hover Trigger with Delays
+     * <bcm-linked trigger="hover" show-delay="200" hide-delay="100">
+     * <span slot="trigger">Hover Me</span>
+     * <div>This appears on hover</div>
+     * </bcm-linked>
+     * @example Manual Control
+     * <bcm-linked id="my-linked" trigger="manual">
+     * <button slot="trigger">Trigger</button>
+     * <div>Controlled content</div>
+     * </bcm-linked>
+     * <script>
+     * const linked = document.querySelector('#my-linked');
+     * linked.show(); // Opens the floating element
+     * linked.hide(); // Closes the floating element
+     * </script>
+     * @csspart floating - The floating container element
+     * @csspart arrow - The arrow element pointing to the trigger
+     * @csspart content - The content wrapper element
+     */
     interface BcmLinked {
         /**
-          * @default false
+          * @prop {boolean} closeOnEscape - Whether to close when pressing Escape key. Default: true
+          * @default true
          */
-        "appendToBody": boolean;
+        "closeOnEscape": boolean;
         /**
-          * @default false
+          * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside. Default: true
+          * @default true
          */
-        "arrow": boolean;
+        "closeOnOutsideClick": boolean;
         /**
+          * @prop {boolean} disabled - Disables the floating element, preventing it from showing. Default: false
           * @default false
          */
-        "destroyOnHide": boolean;
+        "disabled": boolean;
         /**
-          * @default false
+          * Programmatically hides the floating element. Respects the hideDelay prop.
          */
-        "disabled": boolean;
         "hide": () => Promise<void>;
         /**
+          * @prop {number} hideDelay - Delay in milliseconds before hiding the floating element. Default: 0
           * @default 0
          */
         "hideDelay": number;
         /**
+          * @prop {number} offsetDistance - Distance in pixels between the floating element and the trigger. Default: 8
           * @default 8
          */
-        "offset": number;
+        "offsetDistance": number;
         /**
+          * @prop {Placement} placement - Defines the position of the floating element relative to the trigger. Default: 'bottom-start'
           * @default 'bottom-start'
          */
         "placement": Placement;
+        /**
+          * Programmatically shows the floating element. Respects the showDelay prop.
+         */
         "show": () => Promise<void>;
         /**
+          * @prop {boolean} showArrow - Whether to show an arrow pointing to the trigger element. Default: true
+          * @default true
+         */
+        "showArrow": boolean;
+        /**
+          * @prop {number} showDelay - Delay in milliseconds before showing the floating element. Default: 0
           * @default 0
          */
         "showDelay": number;
-        "targetElement"?: HTMLElement;
-        "targetId"?: string;
+        /**
+          * Toggles the floating element visibility.
+         */
         "toggle": () => Promise<void>;
         /**
+          * @prop {TriggerType} trigger - Defines the interaction type to show/hide the floating element. 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'focus' shows on focus and hides on blur, 'manual' requires programmatic control. Default: 'click'
           * @default 'click'
          */
         "trigger": TriggerType;
-        "updatePositioning": () => Promise<void>;
         /**
-          * @default 1000
+          * Updates the position of the floating element. Useful when the trigger element moves or resizes.
+         */
+        "updatePosition": () => Promise<void>;
+        /**
+          * @prop {boolean} visible - Controls the visibility state of the floating element. Can be set programmatically or toggled by user interaction. Default: false
+          * @default false
          */
-        "zIndex": number;
+        "visible": boolean;
     }
+    /**
+     * @component BcmModal
+     * @description A flexible modal dialog component built on the native HTML Dialog API.
+     * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.
+     * @example ```html
+     * <!-- Basic usage -->
+     * <bcm-modal open header-text="Welcome" helper-text="Please read carefully">
+     *   <p>Modal content goes here</p>
+     *   <div slot="footer">
+     *     <button data-dismiss>Close</button>
+     *   </div>
+     * </bcm-modal>
+     * <!-- Custom size and placement -->
+     * <bcm-modal size="large" placement="top">
+     *   <div slot="header">Custom Header</div>
+     *   <p>Content here</p>
+     *   <div slot="footer">
+     *     <button>Cancel</button>
+     *     <button>Confirm</button>
+     *   </div>
+     * </bcm-modal>
+     * <!-- Full screen modal -->
+     * <bcm-modal full-screen no-footer>
+     *   <p>Full screen content</p>
+     * </bcm-modal>
+     * <!-- Programmatic usage -->
+     * <bcm-modal id="myModal">Content</bcm-modal>
+     * <script>
+     *   document.getElementById('myModal').show();
+     * </script>
+     * ```
+     */
     interface BcmModal {
         /**
+          * Controls backdrop behavior - true: Shows backdrop, modal can be closed by clicking outside - false: No backdrop - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
           * @default true
          */
         "backdrop": boolean | 'static';
         /**
+          * Allows closing the modal by clicking on the backdrop
           * @default true
          */
         "closeOnBackdrop": boolean;
         /**
+          * Allows closing the modal by pressing the Escape key
           * @default true
          */
         "closeOnEscape": boolean;
         /**
+          * Makes the modal take the full screen (100vw x 100vh, no border radius)
           * @default false
          */
         "fullScreen": boolean;
         /**
+          * Makes the modal take full width of the viewport (max-width: 100%)
           * @default false
          */
         "fullWidth": boolean;
+        /**
+          * Text to display in the modal header
+         */
         "headerText"?: string;
+        /**
+          * Helper text to display below the header title
+         */
         "helperText"?: string;
+        /**
+          * Programmatically closes the modal
+         */
         "hide": () => Promise<void>;
         /**
+          * Hides the footer section completely
           * @default false
          */
         "noFooter": boolean;
         /**
+          * Hides the header section completely
           * @default false
          */
         "noHeader": boolean;
         /**
+          * Controls whether the modal is open or closed
           * @default false
          */
         "open": boolean;
         /**
+          * The placement of the modal on the screen - 'center': Centered vertically and horizontally - 'top': Aligned to the top with 80px padding
           * @default 'center'
          */
         "placement": ModalPlacement;
+        /**
+          * Programmatically opens the modal
+         */
         "show": () => Promise<void>;
         /**
+          * The size of the modal - 'small': 400px - 'medium': 600px - 'large': 800px - 'xlarge': 1024px - 'xxlarge': 1200px - 'full': 100% width
           * @default 'medium'
          */
         "size": ModalSize;
+        /**
+          * Toggles the modal open/closed state
+         */
         "toggle": () => Promise<void>;
     }
     /**
      * @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>
+     * @description A confirmation popover component that displays a confirmation dialog with customizable actions.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Ideal for confirming destructive actions or important decisions inline.
+     * @csspart container - The main popover container element
+     * @csspart arrow - The arrow pointer element
+     * @csspart body - The body/description section
+     * @csspart footer - The footer section with action buttons
+     * @example Basic Usage
+     * ```html
+     * <bcm-pop-confirm
+     * header-text="Delete Item?"
+     * description="Are you sure you want to delete this item? This action cannot be undone."
+     * status="error"
+     * >
+     * <bcm-button status="error">Delete</bcm-button>
      * </bcm-pop-confirm>
-     * @example Event handling
-     * // Listen to confirmation events
-     * const popConfirm = document.querySelector('bcm-pop-confirm');
-     * popConfirm.addEventListener('bcmConfirm', () => {
-     * console.log('User confirmed the action!');
+     * ```
+     * @example With Event Handlers
+     * ```html
+     * <bcm-pop-confirm
+     * id="deleteConfirm"
+     * header-text="Confirm Delete"
+     * description="This will permanently delete the item."
+     * status="warning"
+     * confirm-text="Yes, Delete"
+     * cancel-text="No, Keep It"
+     * >
+     * <bcm-button>Delete Item</bcm-button>
+     * </bcm-pop-confirm>
+     * <script>
+     * const popconfirm = document.getElementById('deleteConfirm');
+     * popconfirm.addEventListener('bcmConfirm', () => {
+     * console.log('User confirmed deletion');
+     * // Perform delete operation
      * });
-     * popConfirm.addEventListener('bcmCancel', () => {
-     * console.log('User canceled the action!');
+     * popconfirm.addEventListener('bcmCancel', () => {
+     * console.log('User cancelled deletion');
      * });
-     * // 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
-     * @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
+     * </script>
+     * ```
+     * @example Different Status Types
+     * ```html
+     * <!-- Info (default) -->
+     * <bcm-pop-confirm header-text="Information" description="This is an info message">
+     * <bcm-button>Info</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Success -->
+     * <bcm-pop-confirm status="success" header-text="Confirm Action" description="Proceed with this action?">
+     * <bcm-button status="success">Proceed</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Warning -->
+     * <bcm-pop-confirm status="warning" header-text="Warning" description="This action may have consequences">
+     * <bcm-button status="warning">Continue</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Error/Danger -->
+     * <bcm-pop-confirm status="error" header-text="Danger Zone" description="This is a destructive action">
+     * <bcm-button status="error">Delete</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Custom Content with Slots
+     * ```html
+     * <bcm-pop-confirm status="warning">
+     * <bcm-button>Custom Confirm</bcm-button>
+     * <div slot="header">
+     * <strong>Custom Header</strong>
+     * </div>
+     * <div slot="body">
+     * <p>This is custom body content with <strong>HTML formatting</strong>.</p>
+     * <ul>
+     * <li>Point 1</li>
+     * <li>Point 2</li>
+     * </ul>
+     * </div>
+     * <div slot="footer">
+     * <bcm-button kind="outline" size="small">Maybe Later</bcm-button>
+     * <bcm-button status="success" size="small">Confirm</bcm-button>
+     * </div>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Different Sizes
+     * ```html
+     * <!-- Small -->
+     * <bcm-pop-confirm size="small" header-text="Small" description="Compact confirmation">
+     * <bcm-button size="small">Small</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Medium (default) -->
+     * <bcm-pop-confirm size="medium" header-text="Medium" description="Standard confirmation">
+     * <bcm-button size="medium">Medium</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Large -->
+     * <bcm-pop-confirm size="large" header-text="Large" description="Spacious confirmation with more room for content">
+     * <bcm-button size="large">Large</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Programmatic Control
+     * ```html
+     * <bcm-pop-confirm id="myConfirm" header-text="Confirm" description="Are you sure?">
+     * <bcm-button>Trigger</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-button id="showBtn">Show Programmatically</bcm-button>
+     * <bcm-button id="hideBtn">Hide Programmatically</bcm-button>
+     * <script>
+     * const popconfirm = document.getElementById('myConfirm');
+     * document.getElementById('showBtn').addEventListener('click', () => {
+     * popconfirm.show();
+     * });
+     * document.getElementById('hideBtn').addEventListener('click', () => {
+     * popconfirm.hide();
+     * });
+     * </script>
+     * ```
+     * @example Without Status Icon
+     * ```html
+     * <bcm-pop-confirm
+     * header-text="Simple Confirmation"
+     * description="No status icon shown"
+     * status-icon={false}
+     * >
+     * <bcm-button>Click Me</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Different Placements
+     * ```html
+     * <bcm-pop-confirm placement="top" header-text="Top" description="Opens above">
+     * <bcm-button>Top</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="right" header-text="Right" description="Opens to the right">
+     * <bcm-button>Right</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="bottom" header-text="Bottom" description="Opens below">
+     * <bcm-button>Bottom</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="left" header-text="Left" description="Opens to the left">
+     * <bcm-button>Left</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
      */
     interface BcmPopConfirm {
         /**
-          * 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.
+          * @prop {string} cancelText - Text for the cancel button. Default: 'Cancel'
           * @default 'Cancel'
          */
         "cancelText": string;
         /**
-          * The text displayed on the confirm button.
+          * @prop {boolean} closeOnEscape - Whether to close when pressing the Escape key. Default: true
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside the popover. Default: true
+          * @default true
+         */
+        "closeOnOutsideClick": boolean;
+        /**
+          * @prop {string} confirmText - Text for the confirm button. Default: 'Yes'
           * @default 'Yes'
          */
         "confirmText": string;
         /**
-          * The description or body content of the pop-up.
+          * @prop {string} description - Description text displayed in the body section. Can be overridden by using the 'body' slot. Default: ''
           * @default ''
          */
         "description": string;
         /**
-          * The header text displayed at the top of the pop-up.
+          * @prop {string} headerText - Text displayed in the header section. Can be overridden by using the 'header' slot. Default: ''
           * @default ''
          */
         "headerText": string;
         /**
-          * Programmatically hides the pop-up by setting `isOpen` to false.
-          * @returns A promise that resolves when the pop-up is hidden.
+          * Programmatically hides the popconfirm.
+          * @returns Promise that resolves when the hide operation begins
          */
         "hide": () => Promise<void>;
         /**
-          * The placement position of the pop-up relative to the trigger element.
-          * @default 'bottom'
+          * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element. Default: 12
+          * @default 12
          */
-        "placement": Placement;
+        "offsetDistance": number;
         /**
-          * 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.
+          * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element. Automatically flips if there's not enough space. Default: 'top'
+          * @default 'top'
+         */
+        "placement": PopConfirmPlacement;
+        /**
+          * Programmatically shows the popconfirm.
+          * @returns Promise that resolves when the show operation begins
          */
         "show": () => Promise<void>;
         /**
-          * The size of the pop-up, determining its dimensions and padding.
+          * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger. Default: true
+          * @default true
+         */
+        "showArrow": boolean;
+        /**
+          * @prop {PopConfirmSize} size - Size variant that controls padding and text size. - 'small': Compact size with minimal padding - 'medium': Standard size - 'large': Spacious size with more padding Default: 'medium'
           * @default 'medium'
          */
-        "size": 'small' | 'medium' | 'large';
+        "size": PopConfirmSize;
         /**
-          * The status of the pop-up, affecting its icon and color scheme.
+          * @prop {PopConfirmStatus} status - Status type that determines the color scheme and icon. - 'info': Informational (blue) - 'success': Success/positive action (green) - 'warning': Warning/caution (yellow) - 'error': Error/destructive action (red) Default: 'info'
           * @default 'info'
          */
-        "status": 'info' | 'error' | 'warning' | 'success';
+        "status": PopConfirmStatus;
         /**
-          * Whether to display a status icon based on the `status` prop.
+          * @prop {boolean} statusIcon - Whether to show the status icon in the header. Icon only shows if headerText is also provided. Default: true
           * @default true
          */
         "statusIcon": boolean;
         /**
-          * The ID of the trigger element (e.g., a button) that opens the pop-up.
+          * Toggles the popconfirm visibility. If open, it will close. If closed, it will open.
+          * @returns Promise that resolves when the toggle operation completes
          */
-        "targetId": string;
+        "toggle": () => Promise<void>;
     }
     /**
      * @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.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.
      * @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.">
+     * @example Hover Popover with Delays
+     * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" 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
@@ -1026,8 +1329,9 @@ export namespace Components {
      * </bcm-popover>
      * <script>
      * const popover = document.querySelector('#my-popover');
-     * popover.openPopup(); // Opens the popover
-     * popover.closePopup(); // Closes the popover
+     * popover.show(); // Opens the popover
+     * popover.hide(); // Closes the popover
+     * popover.toggle(); // Toggles the popover
      * </script>
      * @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
@@ -1036,48 +1340,70 @@ export namespace Components {
      */
     interface BcmPopover {
         /**
-          * @method {Promise<void>} closePopup - Programmatically closes the popover. Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
-          * @returns A promise that resolves when the popover is closed.
+          * @prop {boolean} arrow - Whether to show an arrow pointing to the trigger element. Default: true
+          * @default true
+         */
+        "arrow": boolean;
+        /**
+          * @prop {boolean} closeOnEscape - Whether to close the popover when pressing Escape key. Default: true
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * @prop {boolean} closeOnOutsideClick - Whether to close the popover when clicking outside. Default: true
+          * @default true
          */
-        "closePopup": () => Promise<void>;
+        "closeOnOutsideClick": boolean;
         /**
           * @prop {string} headerText - Custom text for the popover header. Used as fallback content if the 'header' slot is not provided.
          */
-        "headerText": string;
+        "headerText"?: string;
         /**
-          * @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
-          * @default 150
+          * Programmatically hides the popover. Respects the hideDelay prop.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * @prop {number} hideDelay - Delay in milliseconds before hiding the popover. Provides a grace period for mouse movements. Default: 0
+          * @default 0
          */
-        "hoverDelay": number;
+        "hideDelay": number;
         /**
           * @prop {string} message - Custom text for the popover content. Used as fallback content if the 'content' slot is not provided.
          */
-        "message": string;
+        "message"?: string;
         /**
-          * @prop {boolean} open - Indicates whether the popover is currently open. Can be set programmatically or toggled by user interaction. Mutable. Default: false
+          * @prop {boolean} open - Controls the open state of the popover. Can be set programmatically or toggled by user interaction. Default: false
           * @default false
          */
         "open": boolean;
-        /**
-          * @method {Promise<void>} openPopup - Programmatically opens the popover. Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
-          * @returns A promise that resolves when the popover is opened.
-         */
-        "openPopup": () => Promise<void>;
         /**
           * @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'
           * @default 'top'
          */
         "placement": 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * Programmatically shows the popover. Respects the showDelay prop.
+         */
+        "show": () => Promise<void>;
+        /**
+          * @prop {number} showDelay - Delay in milliseconds before showing the popover. Useful to prevent popovers from appearing on quick mouse movements. Default: 0
+          * @default 0
+         */
+        "showDelay": number;
         /**
           * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover. Controls the text size and padding of the popover content. Default: 'medium'
           * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
-          * @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'
+          * Toggles the popover visibility.
+         */
+        "toggle": () => Promise<void>;
+        /**
+          * @prop {('click' | 'hover' | 'hover focus')} trigger - Defines the interaction type to show/hide the popover. 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'hover focus' combines both. Default: 'click'
           * @default 'click'
          */
-        "trigger": 'click' | 'hover';
+        "trigger": 'click' | 'hover' | 'hover focus';
     }
     interface BcmRadio {
         /**
@@ -1571,59 +1897,113 @@ export namespace Components {
     }
     /**
      * @component BcmTooltip
-     * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on 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 Hover Tooltip
-     * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
-     * <bcm-button>Hover Me</bcm-button>
+     * @description A flexible tooltip component that provides contextual information on hover or click.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Automatically handles overflow, flipping, and complex shadow DOM scenarios.
+     * @example ```html
+     * <!-- Basic usage with text message -->
+     * <bcm-tooltip message="This is a tooltip">
+     *   <button>Hover me</button>
      * </bcm-tooltip>
-     * @example Click Tooltip with Programmatic Control
-     * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
-     * <bcm-button>Click Me</bcm-button>
+     * <!-- With custom rich content -->
+     * <bcm-tooltip placement="right" size="large">
+     *   <button>Click me</button>
+     *   <div slot="content">
+     *     <strong>Rich content</strong>
+     *     <p>You can add any HTML here</p>
+     *   </div>
+     * </bcm-tooltip>
+     * <!-- Click trigger with custom delays -->
+     * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+     *   <span>Click me</span>
+     * </bcm-tooltip>
+     * <!-- Mouse following mode -->
+     * <bcm-tooltip follow={true} message="I follow your cursor!">
+     *   <div>Move your mouse here</div>
+     * </bcm-tooltip>
+     * <!-- Programmatic control -->
+     * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+     *   <span>Trigger</span>
      * </bcm-tooltip>
      * <script>
-     * const tooltip = document.querySelector('#my-tooltip');
-     * tooltip.openTooltip(); // Opens the tooltip
-     * tooltip.closeTooltip(); // Closes the tooltip
+     *   const tooltip = document.getElementById('myTooltip');
+     *   tooltip.show();
+     *   setTimeout(() => tooltip.hide(), 2000);
      * </script>
-     * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
-     * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+     * <!-- Custom styling with CSS parts -->
+     * <style>
+     *   bcm-tooltip::part(tooltip) {
+     *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+     *     border-radius: 12px;
+     *   }
+     *   bcm-tooltip::part(arrow) {
+     *     background: #667eea;
+     *   }
+     * </style>
+     * ```
      */
     interface BcmTooltip {
         /**
-          * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip. Triggers the hideTooltip logic with the specified delay.
-          * @returns A promise that resolves when the tooltip is closed.
+          * Whether to show an arrow pointing to the trigger element Note: Arrow is automatically hidden in 'follow' mode
+          * @default true
          */
-        "closeTooltip": () => Promise<void>;
+        "arrow": boolean;
         /**
-          * @prop {string} message - Custom text for the tooltip content. Used as fallback content if the 'tooltip' slot is not provided.
+          * Disables the tooltip, preventing it from showing Useful for conditional tooltips based on application state
+          * @default false
          */
-        "message": string;
+        "disabled": boolean;
         /**
-          * @method {Promise<void>} openTooltip - Programmatically opens the tooltip. Triggers the showTooltip logic with the specified delay.
-          * @returns A promise that resolves when the tooltip is opened.
+          * Makes the tooltip follow the mouse cursor When enabled: - Arrow is hidden - Tooltip position updates smoothly with cursor movement - Pointer events are disabled on tooltip to prevent interference
+          * @default false
+         */
+        "follow": boolean;
+        /**
+          * Programmatically hides the tooltip Respects the hideDelay prop
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Delay in milliseconds before hiding the tooltip Provides a grace period for mouse movements
+          * @default 100
+         */
+        "hideDelay": number;
+        /**
+          * Simple text message to display in the tooltip Can be overridden by slotting content into the 'content' slot
          */
-        "openTooltip": () => Promise<void>;
+        "message"?: string;
         /**
-          * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element. Default: 'top'
+          * Distance in pixels between the tooltip and the trigger element Also used as the offset in 'follow' mode
+          * @default 12
+         */
+        "offset": number;
+        /**
+          * Preferred placement of the tooltip relative to the trigger Note: Tooltip will automatically flip if there's not enough space - 'top': Above the trigger element - 'right': To the right of the trigger element - 'bottom': Below the trigger element - 'left': To the left of the trigger element
           * @default 'top'
          */
-        "placement": 'top' | 'right' | 'bottom' | 'left';
+        "placement": TooltipPlacement;
         /**
-          * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip. Helps prevent flickering on quick mouse movements. Default: 150
+          * Programmatically shows the tooltip Respects the showDelay prop and disabled state
+         */
+        "show": () => Promise<void>;
+        /**
+          * Delay in milliseconds before showing the tooltip Useful to prevent tooltips from appearing on quick mouse movements
           * @default 150
          */
         "showDelay": number;
         /**
-          * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip. Controls the text size and padding of the tooltip content. Default: 'medium'
+          * Size variant of the tooltip - 'small': Compact tooltip with minimal padding (text-size-3, py-1 px-2) - 'medium': Standard tooltip size (text-size-4, py-1.5 px-3) - 'large': Larger tooltip for more content (text-size-5, py-2 px-4)
           * @default 'medium'
          */
-        "size": 'small' | 'medium' | 'large';
+        "size": TooltipSize;
         /**
-          * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip. 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave. Default: 'hover'
+          * Toggles the tooltip visibility If open, hides it; if closed, shows it
+         */
+        "toggle": () => Promise<void>;
+        /**
+          * How the tooltip is triggered - 'hover': Shows on mouse enter, hides on mouse leave - 'click': Toggles on click, closes on outside click or Escape key
           * @default 'hover'
          */
-        "trigger": 'click' | 'hover';
+        "trigger": TooltipTrigger;
     }
 }
 export interface BcmAccordionCustomEvent<T> extends CustomEvent<T> {
@@ -2013,6 +2393,38 @@ declare global {
         "bcmBeforeOpen": void;
         "bcmBeforeClose": void;
     }
+    /**
+     * @component BcmDrawer
+     * @description A slide-in panel component built on the native HTML Dialog API.
+     * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.
+     * @example ```html
+     * <!-- Basic usage -->
+     * <bcm-drawer open header-text="Menu" position="left">
+     *   <nav>
+     *     <a href="/home">Home</a>
+     *     <a href="/about">About</a>
+     *   </nav>
+     * </bcm-drawer>
+     * <!-- Custom size and position -->
+     * <bcm-drawer size="large" position="right">
+     *   <div slot="header">Settings</div>
+     *   <form>...</form>
+     *   <div slot="footer">
+     *     <button data-dismiss>Cancel</button>
+     *     <button>Save</button>
+     *   </div>
+     * </bcm-drawer>
+     * <!-- Custom size with CSS units -->
+     * <bcm-drawer size="600px" position="bottom">
+     *   <p>Custom height drawer</p>
+     * </bcm-drawer>
+     * <!-- Programmatic usage -->
+     * <bcm-drawer id="myDrawer">Content</bcm-drawer>
+     * <script>
+     *   document.getElementById('myDrawer').show();
+     * </script>
+     * ```
+     */
     interface HTMLBcmDrawerElement extends Components.BcmDrawer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmDrawerElementEventMap>(type: K, listener: (this: HTMLBcmDrawerElement, ev: BcmDrawerCustomEvent<HTMLBcmDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2084,11 +2496,42 @@ declare global {
         new (): HTMLBcmInputElement;
     };
     interface HTMLBcmLinkedElementEventMap {
+        "bcmBeforeShow": void;
         "bcmShow": void;
+        "bcmBeforeHide": void;
         "bcmHide": void;
         "bcmShown": void;
         "bcmHidden": void;
     }
+    /**
+     * @component BcmLinked
+     * @description A flexible linked floating element component that displays contextual content relative to a trigger element.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Supports different trigger types (click, hover, focus, manual) and comprehensive event system.
+     * @example Basic Click Trigger
+     * <bcm-linked trigger="click">
+     * <button slot="trigger">Click Me</button>
+     * <div>Floating content here</div>
+     * </bcm-linked>
+     * @example Hover Trigger with Delays
+     * <bcm-linked trigger="hover" show-delay="200" hide-delay="100">
+     * <span slot="trigger">Hover Me</span>
+     * <div>This appears on hover</div>
+     * </bcm-linked>
+     * @example Manual Control
+     * <bcm-linked id="my-linked" trigger="manual">
+     * <button slot="trigger">Trigger</button>
+     * <div>Controlled content</div>
+     * </bcm-linked>
+     * <script>
+     * const linked = document.querySelector('#my-linked');
+     * linked.show(); // Opens the floating element
+     * linked.hide(); // Closes the floating element
+     * </script>
+     * @csspart floating - The floating container element
+     * @csspart arrow - The arrow element pointing to the trigger
+     * @csspart content - The content wrapper element
+     */
     interface HTMLBcmLinkedElement extends Components.BcmLinked, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmLinkedElementEventMap>(type: K, listener: (this: HTMLBcmLinkedElement, ev: BcmLinkedCustomEvent<HTMLBcmLinkedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2109,6 +2552,38 @@ declare global {
         "bcmBeforeOpen": void;
         "bcmBeforeClose": void;
     }
+    /**
+     * @component BcmModal
+     * @description A flexible modal dialog component built on the native HTML Dialog API.
+     * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.
+     * @example ```html
+     * <!-- Basic usage -->
+     * <bcm-modal open header-text="Welcome" helper-text="Please read carefully">
+     *   <p>Modal content goes here</p>
+     *   <div slot="footer">
+     *     <button data-dismiss>Close</button>
+     *   </div>
+     * </bcm-modal>
+     * <!-- Custom size and placement -->
+     * <bcm-modal size="large" placement="top">
+     *   <div slot="header">Custom Header</div>
+     *   <p>Content here</p>
+     *   <div slot="footer">
+     *     <button>Cancel</button>
+     *     <button>Confirm</button>
+     *   </div>
+     * </bcm-modal>
+     * <!-- Full screen modal -->
+     * <bcm-modal full-screen no-footer>
+     *   <p>Full screen content</p>
+     * </bcm-modal>
+     * <!-- Programmatic usage -->
+     * <bcm-modal id="myModal">Content</bcm-modal>
+     * <script>
+     *   document.getElementById('myModal').show();
+     * </script>
+     * ```
+     */
     interface HTMLBcmModalElement extends Components.BcmModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmModalElementEventMap>(type: K, listener: (this: HTMLBcmModalElement, ev: BcmModalCustomEvent<HTMLBcmModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2124,55 +2599,151 @@ declare global {
         new (): HTMLBcmModalElement;
     };
     interface HTMLBcmPopConfirmElementEventMap {
+        "bcmBeforeOpen": void;
+        "bcmOpen": void;
+        "bcmBeforeClose": void;
+        "bcmClose": void;
         "bcmConfirm": void;
         "bcmCancel": void;
     }
     /**
      * @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>
+     * @description A confirmation popover component that displays a confirmation dialog with customizable actions.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Ideal for confirming destructive actions or important decisions inline.
+     * @csspart container - The main popover container element
+     * @csspart arrow - The arrow pointer element
+     * @csspart body - The body/description section
+     * @csspart footer - The footer section with action buttons
+     * @example Basic Usage
+     * ```html
+     * <bcm-pop-confirm
+     * header-text="Delete Item?"
+     * description="Are you sure you want to delete this item? This action cannot be undone."
+     * status="error"
+     * >
+     * <bcm-button status="error">Delete</bcm-button>
      * </bcm-pop-confirm>
-     * @example Event handling
-     * // Listen to confirmation events
-     * const popConfirm = document.querySelector('bcm-pop-confirm');
-     * popConfirm.addEventListener('bcmConfirm', () => {
-     * console.log('User confirmed the action!');
+     * ```
+     * @example With Event Handlers
+     * ```html
+     * <bcm-pop-confirm
+     * id="deleteConfirm"
+     * header-text="Confirm Delete"
+     * description="This will permanently delete the item."
+     * status="warning"
+     * confirm-text="Yes, Delete"
+     * cancel-text="No, Keep It"
+     * >
+     * <bcm-button>Delete Item</bcm-button>
+     * </bcm-pop-confirm>
+     * <script>
+     * const popconfirm = document.getElementById('deleteConfirm');
+     * popconfirm.addEventListener('bcmConfirm', () => {
+     * console.log('User confirmed deletion');
+     * // Perform delete operation
+     * });
+     * popconfirm.addEventListener('bcmCancel', () => {
+     * console.log('User cancelled deletion');
+     * });
+     * </script>
+     * ```
+     * @example Different Status Types
+     * ```html
+     * <!-- Info (default) -->
+     * <bcm-pop-confirm header-text="Information" description="This is an info message">
+     * <bcm-button>Info</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Success -->
+     * <bcm-pop-confirm status="success" header-text="Confirm Action" description="Proceed with this action?">
+     * <bcm-button status="success">Proceed</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Warning -->
+     * <bcm-pop-confirm status="warning" header-text="Warning" description="This action may have consequences">
+     * <bcm-button status="warning">Continue</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Error/Danger -->
+     * <bcm-pop-confirm status="error" header-text="Danger Zone" description="This is a destructive action">
+     * <bcm-button status="error">Delete</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Custom Content with Slots
+     * ```html
+     * <bcm-pop-confirm status="warning">
+     * <bcm-button>Custom Confirm</bcm-button>
+     * <div slot="header">
+     * <strong>Custom Header</strong>
+     * </div>
+     * <div slot="body">
+     * <p>This is custom body content with <strong>HTML formatting</strong>.</p>
+     * <ul>
+     * <li>Point 1</li>
+     * <li>Point 2</li>
+     * </ul>
+     * </div>
+     * <div slot="footer">
+     * <bcm-button kind="outline" size="small">Maybe Later</bcm-button>
+     * <bcm-button status="success" size="small">Confirm</bcm-button>
+     * </div>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Different Sizes
+     * ```html
+     * <!-- Small -->
+     * <bcm-pop-confirm size="small" header-text="Small" description="Compact confirmation">
+     * <bcm-button size="small">Small</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Medium (default) -->
+     * <bcm-pop-confirm size="medium" header-text="Medium" description="Standard confirmation">
+     * <bcm-button size="medium">Medium</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Large -->
+     * <bcm-pop-confirm size="large" header-text="Large" description="Spacious confirmation with more room for content">
+     * <bcm-button size="large">Large</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Programmatic Control
+     * ```html
+     * <bcm-pop-confirm id="myConfirm" header-text="Confirm" description="Are you sure?">
+     * <bcm-button>Trigger</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-button id="showBtn">Show Programmatically</bcm-button>
+     * <bcm-button id="hideBtn">Hide Programmatically</bcm-button>
+     * <script>
+     * const popconfirm = document.getElementById('myConfirm');
+     * document.getElementById('showBtn').addEventListener('click', () => {
+     * popconfirm.show();
      * });
-     * popConfirm.addEventListener('bcmCancel', () => {
-     * console.log('User canceled the action!');
+     * document.getElementById('hideBtn').addEventListener('click', () => {
+     * popconfirm.hide();
      * });
-     * // 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
-     * @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
+     * </script>
+     * ```
+     * @example Without Status Icon
+     * ```html
+     * <bcm-pop-confirm
+     * header-text="Simple Confirmation"
+     * description="No status icon shown"
+     * status-icon={false}
+     * >
+     * <bcm-button>Click Me</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Different Placements
+     * ```html
+     * <bcm-pop-confirm placement="top" header-text="Top" description="Opens above">
+     * <bcm-button>Top</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="right" header-text="Right" description="Opens to the right">
+     * <bcm-button>Right</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="bottom" header-text="Bottom" description="Opens below">
+     * <bcm-button>Bottom</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="left" header-text="Left" description="Opens to the left">
+     * <bcm-button>Left</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
      */
     interface HTMLBcmPopConfirmElement extends Components.BcmPopConfirm, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmPopConfirmElementEventMap>(type: K, listener: (this: HTMLBcmPopConfirmElement, ev: BcmPopConfirmCustomEvent<HTMLBcmPopConfirmElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2189,21 +2760,24 @@ declare global {
         new (): HTMLBcmPopConfirmElement;
     };
     interface HTMLBcmPopoverElementEventMap {
-        "bcmPopoverOpen": void;
-        "bcmPopoverClose": void;
+        "bcmBeforeOpen": void;
+        "bcmOpen": void;
+        "bcmBeforeClose": void;
+        "bcmClose": void;
     }
     /**
      * @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.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.
      * @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.">
+     * @example Hover Popover with Delays
+     * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" 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
@@ -2213,8 +2787,9 @@ declare global {
      * </bcm-popover>
      * <script>
      * const popover = document.querySelector('#my-popover');
-     * popover.openPopup(); // Opens the popover
-     * popover.closePopup(); // Closes the popover
+     * popover.show(); // Opens the popover
+     * popover.hide(); // Closes the popover
+     * popover.toggle(); // Toggles the popover
      * </script>
      * @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
@@ -2444,23 +3019,50 @@ declare global {
     };
     /**
      * @component BcmTooltip
-     * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on 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 Hover Tooltip
-     * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
-     * <bcm-button>Hover Me</bcm-button>
+     * @description A flexible tooltip component that provides contextual information on hover or click.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Automatically handles overflow, flipping, and complex shadow DOM scenarios.
+     * @example ```html
+     * <!-- Basic usage with text message -->
+     * <bcm-tooltip message="This is a tooltip">
+     *   <button>Hover me</button>
      * </bcm-tooltip>
-     * @example Click Tooltip with Programmatic Control
-     * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
-     * <bcm-button>Click Me</bcm-button>
+     * <!-- With custom rich content -->
+     * <bcm-tooltip placement="right" size="large">
+     *   <button>Click me</button>
+     *   <div slot="content">
+     *     <strong>Rich content</strong>
+     *     <p>You can add any HTML here</p>
+     *   </div>
+     * </bcm-tooltip>
+     * <!-- Click trigger with custom delays -->
+     * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+     *   <span>Click me</span>
+     * </bcm-tooltip>
+     * <!-- Mouse following mode -->
+     * <bcm-tooltip follow={true} message="I follow your cursor!">
+     *   <div>Move your mouse here</div>
+     * </bcm-tooltip>
+     * <!-- Programmatic control -->
+     * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+     *   <span>Trigger</span>
      * </bcm-tooltip>
      * <script>
-     * const tooltip = document.querySelector('#my-tooltip');
-     * tooltip.openTooltip(); // Opens the tooltip
-     * tooltip.closeTooltip(); // Closes the tooltip
+     *   const tooltip = document.getElementById('myTooltip');
+     *   tooltip.show();
+     *   setTimeout(() => tooltip.hide(), 2000);
      * </script>
-     * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
-     * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+     * <!-- Custom styling with CSS parts -->
+     * <style>
+     *   bcm-tooltip::part(tooltip) {
+     *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+     *     border-radius: 12px;
+     *   }
+     *   bcm-tooltip::part(arrow) {
+     *     background: #667eea;
+     *   }
+     * </style>
+     * ```
      */
     interface HTMLBcmTooltipElement extends Components.BcmTooltip, HTMLStencilElement {
     }
@@ -2975,6 +3577,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "error"?: boolean;
+        /**
+          * Full width checkbox
+          * @default false
+         */
+        "fullWidth"?: boolean;
         /**
           * 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.
           * @default false
@@ -3086,29 +3693,110 @@ declare namespace LocalJSX {
          */
         "variant"?: 'solid' | 'dashed' | 'dotted';
     }
+    /**
+     * @component BcmDrawer
+     * @description A slide-in panel component built on the native HTML Dialog API.
+     * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.
+     * @example ```html
+     * <!-- Basic usage -->
+     * <bcm-drawer open header-text="Menu" position="left">
+     *   <nav>
+     *     <a href="/home">Home</a>
+     *     <a href="/about">About</a>
+     *   </nav>
+     * </bcm-drawer>
+     * <!-- Custom size and position -->
+     * <bcm-drawer size="large" position="right">
+     *   <div slot="header">Settings</div>
+     *   <form>...</form>
+     *   <div slot="footer">
+     *     <button data-dismiss>Cancel</button>
+     *     <button>Save</button>
+     *   </div>
+     * </bcm-drawer>
+     * <!-- Custom size with CSS units -->
+     * <bcm-drawer size="600px" position="bottom">
+     *   <p>Custom height drawer</p>
+     * </bcm-drawer>
+     * <!-- Programmatic usage -->
+     * <bcm-drawer id="myDrawer">Content</bcm-drawer>
+     * <script>
+     *   document.getElementById('myDrawer').show();
+     * </script>
+     * ```
+     */
     interface BcmDrawer {
         /**
+          * Controls backdrop behavior - true: Shows backdrop, drawer can be closed by clicking outside - false: No backdrop - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+          * @default true
+         */
+        "backdrop"?: boolean | 'static';
+        /**
+          * Allows closing the drawer by clicking on the backdrop
+          * @default true
+         */
+        "closeOnBackdrop"?: boolean;
+        /**
+          * Allows closing the drawer by pressing the Escape key
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * Makes the drawer take the full screen (100vw x 100vh)
+          * @default false
+         */
+        "fullScreen"?: boolean;
+        /**
+          * Makes the drawer take full width (for left/right) or full height (for top/bottom)
           * @default false
          */
         "fullWidth"?: boolean;
+        /**
+          * Text to display in the drawer header
+         */
         "headerText"?: string;
         /**
+          * Helper text to display below the header title
+         */
+        "helperText"?: string;
+        /**
+          * Hides the footer section completely
+          * @default false
+         */
+        "noFooter"?: boolean;
+        /**
+          * Hides the header section completely
           * @default false
          */
         "noHeader"?: boolean;
+        /**
+          * Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()
+         */
         "onBcmBeforeClose"?: (event: BcmDrawerCustomEvent<void>) => void;
+        /**
+          * Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()
+         */
         "onBcmBeforeOpen"?: (event: BcmDrawerCustomEvent<void>) => void;
+        /**
+          * Emitted after the drawer has closed
+         */
         "onBcmClose"?: (event: BcmDrawerCustomEvent<void>) => void;
+        /**
+          * Emitted after the drawer has opened
+         */
         "onBcmOpen"?: (event: BcmDrawerCustomEvent<void>) => void;
         /**
+          * Controls whether the drawer is open or closed
           * @default false
          */
         "open"?: boolean;
         /**
+          * The position where the drawer slides in from - 'left': Slides from the left edge - 'right': Slides from the right edge - 'top': Slides from the top edge - 'bottom': Slides from the bottom edge
           * @default 'right'
          */
         "position"?: DrawerPosition;
         /**
+          * The size of the drawer. Can be a preset value or a custom CSS size - For left/right drawers:   - 'small': 320px   - 'medium': 480px   - 'large': 1064px - For top/bottom drawers:   - 'small': 40vh   - 'medium': 60vh   - 'large': 90vh - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')
           * @default 'medium'
          */
         "size"?: DrawerSize;
@@ -3261,220 +3949,457 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @component BcmLinked
+     * @description A flexible linked floating element component that displays contextual content relative to a trigger element.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Supports different trigger types (click, hover, focus, manual) and comprehensive event system.
+     * @example Basic Click Trigger
+     * <bcm-linked trigger="click">
+     * <button slot="trigger">Click Me</button>
+     * <div>Floating content here</div>
+     * </bcm-linked>
+     * @example Hover Trigger with Delays
+     * <bcm-linked trigger="hover" show-delay="200" hide-delay="100">
+     * <span slot="trigger">Hover Me</span>
+     * <div>This appears on hover</div>
+     * </bcm-linked>
+     * @example Manual Control
+     * <bcm-linked id="my-linked" trigger="manual">
+     * <button slot="trigger">Trigger</button>
+     * <div>Controlled content</div>
+     * </bcm-linked>
+     * <script>
+     * const linked = document.querySelector('#my-linked');
+     * linked.show(); // Opens the floating element
+     * linked.hide(); // Closes the floating element
+     * </script>
+     * @csspart floating - The floating container element
+     * @csspart arrow - The arrow element pointing to the trigger
+     * @csspart content - The content wrapper element
+     */
     interface BcmLinked {
         /**
-          * @default false
-         */
-        "appendToBody"?: boolean;
-        /**
-          * @default false
+          * @prop {boolean} closeOnEscape - Whether to close when pressing Escape key. Default: true
+          * @default true
          */
-        "arrow"?: boolean;
+        "closeOnEscape"?: boolean;
         /**
-          * @default false
+          * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside. Default: true
+          * @default true
          */
-        "destroyOnHide"?: boolean;
+        "closeOnOutsideClick"?: boolean;
         /**
+          * @prop {boolean} disabled - Disables the floating element, preventing it from showing. Default: false
           * @default false
          */
         "disabled"?: boolean;
         /**
+          * @prop {number} hideDelay - Delay in milliseconds before hiding the floating element. Default: 0
           * @default 0
          */
         "hideDelay"?: number;
         /**
+          * @prop {number} offsetDistance - Distance in pixels between the floating element and the trigger. Default: 8
           * @default 8
          */
-        "offset"?: number;
+        "offsetDistance"?: number;
+        /**
+          * @event bcmBeforeHide - Emitted before the floating element hides.
+         */
+        "onBcmBeforeHide"?: (event: BcmLinkedCustomEvent<void>) => void;
+        /**
+          * @event bcmBeforeShow - Emitted before the floating element shows.
+         */
+        "onBcmBeforeShow"?: (event: BcmLinkedCustomEvent<void>) => void;
+        /**
+          * @event bcmHidden - Emitted after the floating element is fully hidden (after animation).
+         */
         "onBcmHidden"?: (event: BcmLinkedCustomEvent<void>) => void;
+        /**
+          * @event bcmHide - Emitted when the floating element is hidden.
+         */
         "onBcmHide"?: (event: BcmLinkedCustomEvent<void>) => void;
+        /**
+          * @event bcmShow - Emitted when the floating element is shown.
+         */
         "onBcmShow"?: (event: BcmLinkedCustomEvent<void>) => void;
+        /**
+          * @event bcmShown - Emitted after the floating element is fully shown (after animation).
+         */
         "onBcmShown"?: (event: BcmLinkedCustomEvent<void>) => void;
         /**
+          * @prop {Placement} placement - Defines the position of the floating element relative to the trigger. Default: 'bottom-start'
           * @default 'bottom-start'
          */
         "placement"?: Placement;
         /**
+          * @prop {boolean} showArrow - Whether to show an arrow pointing to the trigger element. Default: true
+          * @default true
+         */
+        "showArrow"?: boolean;
+        /**
+          * @prop {number} showDelay - Delay in milliseconds before showing the floating element. Default: 0
           * @default 0
          */
         "showDelay"?: number;
-        "targetElement"?: HTMLElement;
-        "targetId"?: string;
         /**
+          * @prop {TriggerType} trigger - Defines the interaction type to show/hide the floating element. 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'focus' shows on focus and hides on blur, 'manual' requires programmatic control. Default: 'click'
           * @default 'click'
          */
         "trigger"?: TriggerType;
         /**
-          * @default 1000
+          * @prop {boolean} visible - Controls the visibility state of the floating element. Can be set programmatically or toggled by user interaction. Default: false
+          * @default false
          */
-        "zIndex"?: number;
+        "visible"?: boolean;
     }
+    /**
+     * @component BcmModal
+     * @description A flexible modal dialog component built on the native HTML Dialog API.
+     * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.
+     * @example ```html
+     * <!-- Basic usage -->
+     * <bcm-modal open header-text="Welcome" helper-text="Please read carefully">
+     *   <p>Modal content goes here</p>
+     *   <div slot="footer">
+     *     <button data-dismiss>Close</button>
+     *   </div>
+     * </bcm-modal>
+     * <!-- Custom size and placement -->
+     * <bcm-modal size="large" placement="top">
+     *   <div slot="header">Custom Header</div>
+     *   <p>Content here</p>
+     *   <div slot="footer">
+     *     <button>Cancel</button>
+     *     <button>Confirm</button>
+     *   </div>
+     * </bcm-modal>
+     * <!-- Full screen modal -->
+     * <bcm-modal full-screen no-footer>
+     *   <p>Full screen content</p>
+     * </bcm-modal>
+     * <!-- Programmatic usage -->
+     * <bcm-modal id="myModal">Content</bcm-modal>
+     * <script>
+     *   document.getElementById('myModal').show();
+     * </script>
+     * ```
+     */
     interface BcmModal {
         /**
+          * Controls backdrop behavior - true: Shows backdrop, modal can be closed by clicking outside - false: No backdrop - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
           * @default true
          */
         "backdrop"?: boolean | 'static';
         /**
+          * Allows closing the modal by clicking on the backdrop
           * @default true
          */
         "closeOnBackdrop"?: boolean;
         /**
+          * Allows closing the modal by pressing the Escape key
           * @default true
          */
         "closeOnEscape"?: boolean;
         /**
+          * Makes the modal take the full screen (100vw x 100vh, no border radius)
           * @default false
          */
         "fullScreen"?: boolean;
         /**
+          * Makes the modal take full width of the viewport (max-width: 100%)
           * @default false
          */
         "fullWidth"?: boolean;
+        /**
+          * Text to display in the modal header
+         */
         "headerText"?: string;
+        /**
+          * Helper text to display below the header title
+         */
         "helperText"?: string;
         /**
+          * Hides the footer section completely
           * @default false
          */
         "noFooter"?: boolean;
         /**
+          * Hides the header section completely
           * @default false
          */
         "noHeader"?: boolean;
+        /**
+          * Emitted before the modal closes. Can be cancelled by calling event.preventDefault()
+         */
         "onBcmBeforeClose"?: (event: BcmModalCustomEvent<void>) => void;
+        /**
+          * Emitted before the modal opens. Can be cancelled by calling event.preventDefault()
+         */
         "onBcmBeforeOpen"?: (event: BcmModalCustomEvent<void>) => void;
+        /**
+          * Emitted after the modal has closed
+         */
         "onBcmClose"?: (event: BcmModalCustomEvent<void>) => void;
+        /**
+          * Emitted after the modal has opened
+         */
         "onBcmOpen"?: (event: BcmModalCustomEvent<void>) => void;
         /**
+          * Controls whether the modal is open or closed
           * @default false
          */
         "open"?: boolean;
         /**
+          * The placement of the modal on the screen - 'center': Centered vertically and horizontally - 'top': Aligned to the top with 80px padding
           * @default 'center'
          */
         "placement"?: ModalPlacement;
         /**
+          * The size of the modal - 'small': 400px - 'medium': 600px - 'large': 800px - 'xlarge': 1024px - 'xxlarge': 1200px - 'full': 100% width
           * @default 'medium'
          */
         "size"?: ModalSize;
     }
     /**
      * @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>
+     * @description A confirmation popover component that displays a confirmation dialog with customizable actions.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Ideal for confirming destructive actions or important decisions inline.
+     * @csspart container - The main popover container element
+     * @csspart arrow - The arrow pointer element
+     * @csspart body - The body/description section
+     * @csspart footer - The footer section with action buttons
+     * @example Basic Usage
+     * ```html
+     * <bcm-pop-confirm
+     * header-text="Delete Item?"
+     * description="Are you sure you want to delete this item? This action cannot be undone."
+     * status="error"
+     * >
+     * <bcm-button status="error">Delete</bcm-button>
      * </bcm-pop-confirm>
-     * @example Event handling
-     * // Listen to confirmation events
-     * const popConfirm = document.querySelector('bcm-pop-confirm');
-     * popConfirm.addEventListener('bcmConfirm', () => {
-     * console.log('User confirmed the action!');
+     * ```
+     * @example With Event Handlers
+     * ```html
+     * <bcm-pop-confirm
+     * id="deleteConfirm"
+     * header-text="Confirm Delete"
+     * description="This will permanently delete the item."
+     * status="warning"
+     * confirm-text="Yes, Delete"
+     * cancel-text="No, Keep It"
+     * >
+     * <bcm-button>Delete Item</bcm-button>
+     * </bcm-pop-confirm>
+     * <script>
+     * const popconfirm = document.getElementById('deleteConfirm');
+     * popconfirm.addEventListener('bcmConfirm', () => {
+     * console.log('User confirmed deletion');
+     * // Perform delete operation
      * });
-     * popConfirm.addEventListener('bcmCancel', () => {
-     * console.log('User canceled the action!');
+     * popconfirm.addEventListener('bcmCancel', () => {
+     * console.log('User cancelled deletion');
      * });
-     * // 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
-     * @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
+     * </script>
+     * ```
+     * @example Different Status Types
+     * ```html
+     * <!-- Info (default) -->
+     * <bcm-pop-confirm header-text="Information" description="This is an info message">
+     * <bcm-button>Info</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Success -->
+     * <bcm-pop-confirm status="success" header-text="Confirm Action" description="Proceed with this action?">
+     * <bcm-button status="success">Proceed</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Warning -->
+     * <bcm-pop-confirm status="warning" header-text="Warning" description="This action may have consequences">
+     * <bcm-button status="warning">Continue</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Error/Danger -->
+     * <bcm-pop-confirm status="error" header-text="Danger Zone" description="This is a destructive action">
+     * <bcm-button status="error">Delete</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Custom Content with Slots
+     * ```html
+     * <bcm-pop-confirm status="warning">
+     * <bcm-button>Custom Confirm</bcm-button>
+     * <div slot="header">
+     * <strong>Custom Header</strong>
+     * </div>
+     * <div slot="body">
+     * <p>This is custom body content with <strong>HTML formatting</strong>.</p>
+     * <ul>
+     * <li>Point 1</li>
+     * <li>Point 2</li>
+     * </ul>
+     * </div>
+     * <div slot="footer">
+     * <bcm-button kind="outline" size="small">Maybe Later</bcm-button>
+     * <bcm-button status="success" size="small">Confirm</bcm-button>
+     * </div>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Different Sizes
+     * ```html
+     * <!-- Small -->
+     * <bcm-pop-confirm size="small" header-text="Small" description="Compact confirmation">
+     * <bcm-button size="small">Small</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Medium (default) -->
+     * <bcm-pop-confirm size="medium" header-text="Medium" description="Standard confirmation">
+     * <bcm-button size="medium">Medium</bcm-button>
+     * </bcm-pop-confirm>
+     * <!-- Large -->
+     * <bcm-pop-confirm size="large" header-text="Large" description="Spacious confirmation with more room for content">
+     * <bcm-button size="large">Large</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Programmatic Control
+     * ```html
+     * <bcm-pop-confirm id="myConfirm" header-text="Confirm" description="Are you sure?">
+     * <bcm-button>Trigger</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-button id="showBtn">Show Programmatically</bcm-button>
+     * <bcm-button id="hideBtn">Hide Programmatically</bcm-button>
+     * <script>
+     * const popconfirm = document.getElementById('myConfirm');
+     * document.getElementById('showBtn').addEventListener('click', () => {
+     * popconfirm.show();
+     * });
+     * document.getElementById('hideBtn').addEventListener('click', () => {
+     * popconfirm.hide();
+     * });
+     * </script>
+     * ```
+     * @example Without Status Icon
+     * ```html
+     * <bcm-pop-confirm
+     * header-text="Simple Confirmation"
+     * description="No status icon shown"
+     * status-icon={false}
+     * >
+     * <bcm-button>Click Me</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
+     * @example Different Placements
+     * ```html
+     * <bcm-pop-confirm placement="top" header-text="Top" description="Opens above">
+     * <bcm-button>Top</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="right" header-text="Right" description="Opens to the right">
+     * <bcm-button>Right</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="bottom" header-text="Bottom" description="Opens below">
+     * <bcm-button>Bottom</bcm-button>
+     * </bcm-pop-confirm>
+     * <bcm-pop-confirm placement="left" header-text="Left" description="Opens to the left">
+     * <bcm-button>Left</bcm-button>
+     * </bcm-pop-confirm>
+     * ```
      */
     interface BcmPopConfirm {
         /**
-          * 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.
+          * @prop {string} cancelText - Text for the cancel button. Default: 'Cancel'
           * @default 'Cancel'
          */
         "cancelText"?: string;
         /**
-          * The text displayed on the confirm button.
+          * @prop {boolean} closeOnEscape - Whether to close when pressing the Escape key. Default: true
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside the popover. Default: true
+          * @default true
+         */
+        "closeOnOutsideClick"?: boolean;
+        /**
+          * @prop {string} confirmText - Text for the confirm button. Default: 'Yes'
           * @default 'Yes'
          */
         "confirmText"?: string;
         /**
-          * The description or body content of the pop-up.
+          * @prop {string} description - Description text displayed in the body section. Can be overridden by using the 'body' slot. Default: ''
           * @default ''
          */
         "description"?: string;
         /**
-          * The header text displayed at the top of the pop-up.
+          * @prop {string} headerText - Text displayed in the header section. Can be overridden by using the 'header' slot. Default: ''
           * @default ''
          */
         "headerText"?: string;
         /**
-          * Emits an event when the user cancels the action in the pop-up.
+          * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element. Default: 12
+          * @default 12
+         */
+        "offsetDistance"?: number;
+        /**
+          * @event bcmBeforeClose - Emitted before the popover closes. Useful for performing cleanup actions before hiding.
+         */
+        "onBcmBeforeClose"?: (event: BcmPopConfirmCustomEvent<void>) => void;
+        /**
+          * @event bcmBeforeOpen - Emitted before the popover opens. Useful for performing actions before the popover becomes visible.
+         */
+        "onBcmBeforeOpen"?: (event: BcmPopConfirmCustomEvent<void>) => void;
+        /**
+          * @event bcmCancel - Emitted when the user clicks cancel, presses Escape, or clicks outside. Useful for tracking when the user dismisses the confirmation.
          */
         "onBcmCancel"?: (event: BcmPopConfirmCustomEvent<void>) => void;
         /**
-          * Emits an event when the user confirms the action in the pop-up.
+          * @event bcmClose - Emitted when the popover is closed. Useful for tracking when the popover is hidden.
+         */
+        "onBcmClose"?: (event: BcmPopConfirmCustomEvent<void>) => void;
+        /**
+          * @event bcmConfirm - Emitted when the user clicks the confirm button. This is where you should handle the confirmed action.
          */
         "onBcmConfirm"?: (event: BcmPopConfirmCustomEvent<void>) => void;
         /**
-          * The placement position of the pop-up relative to the trigger element.
-          * @default 'bottom'
+          * @event bcmOpen - Emitted when the popover is opened. Useful for tracking when the popover becomes visible.
          */
-        "placement"?: Placement;
+        "onBcmOpen"?: (event: BcmPopConfirmCustomEvent<void>) => void;
+        /**
+          * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element. Automatically flips if there's not enough space. Default: 'top'
+          * @default 'top'
+         */
+        "placement"?: PopConfirmPlacement;
+        /**
+          * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger. Default: true
+          * @default true
+         */
+        "showArrow"?: boolean;
         /**
-          * The size of the pop-up, determining its dimensions and padding.
+          * @prop {PopConfirmSize} size - Size variant that controls padding and text size. - 'small': Compact size with minimal padding - 'medium': Standard size - 'large': Spacious size with more padding Default: 'medium'
           * @default 'medium'
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: PopConfirmSize;
         /**
-          * The status of the pop-up, affecting its icon and color scheme.
+          * @prop {PopConfirmStatus} status - Status type that determines the color scheme and icon. - 'info': Informational (blue) - 'success': Success/positive action (green) - 'warning': Warning/caution (yellow) - 'error': Error/destructive action (red) Default: 'info'
           * @default 'info'
          */
-        "status"?: 'info' | 'error' | 'warning' | 'success';
+        "status"?: PopConfirmStatus;
         /**
-          * Whether to display a status icon based on the `status` prop.
+          * @prop {boolean} statusIcon - Whether to show the status icon in the header. Icon only shows if headerText is also provided. Default: true
           * @default true
          */
         "statusIcon"?: boolean;
-        /**
-          * The ID of the trigger element (e.g., a button) that opens the pop-up.
-         */
-        "targetId"?: string;
     }
     /**
      * @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.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.
      * @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.">
+     * @example Hover Popover with Delays
+     * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" 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
@@ -3484,8 +4409,9 @@ declare namespace LocalJSX {
      * </bcm-popover>
      * <script>
      * const popover = document.querySelector('#my-popover');
-     * popover.openPopup(); // Opens the popover
-     * popover.closePopup(); // Closes the popover
+     * popover.show(); // Opens the popover
+     * popover.hide(); // Closes the popover
+     * popover.toggle(); // Toggles the popover
      * </script>
      * @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
@@ -3493,29 +4419,52 @@ declare namespace LocalJSX {
      * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
      */
     interface BcmPopover {
+        /**
+          * @prop {boolean} arrow - Whether to show an arrow pointing to the trigger element. Default: true
+          * @default true
+         */
+        "arrow"?: boolean;
+        /**
+          * @prop {boolean} closeOnEscape - Whether to close the popover when pressing Escape key. Default: true
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * @prop {boolean} closeOnOutsideClick - Whether to close the popover when clicking outside. Default: true
+          * @default true
+         */
+        "closeOnOutsideClick"?: boolean;
         /**
           * @prop {string} headerText - Custom text for the popover header. Used as fallback content if the 'header' slot is not provided.
          */
         "headerText"?: string;
         /**
-          * @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
-          * @default 150
+          * @prop {number} hideDelay - Delay in milliseconds before hiding the popover. Provides a grace period for mouse movements. Default: 0
+          * @default 0
          */
-        "hoverDelay"?: number;
+        "hideDelay"?: number;
         /**
           * @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>} bcmPopoverClose - Emitted when the popover is closed. Useful for tracking when the popover is hidden.
+          * @event bcmBeforeClose - Emitted before the popover closes. Useful for performing actions before the popover is hidden.
+         */
+        "onBcmBeforeClose"?: (event: BcmPopoverCustomEvent<void>) => void;
+        /**
+          * @event bcmBeforeOpen - Emitted before the popover opens. Useful for performing actions before the popover becomes visible.
          */
-        "onBcmPopoverClose"?: (event: BcmPopoverCustomEvent<void>) => void;
+        "onBcmBeforeOpen"?: (event: BcmPopoverCustomEvent<void>) => void;
         /**
-          * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened. Useful for tracking when the popover becomes visible.
+          * @event bcmClose - Emitted when the popover is closed. Useful for tracking when the popover is hidden.
          */
-        "onBcmPopoverOpen"?: (event: BcmPopoverCustomEvent<void>) => void;
+        "onBcmClose"?: (event: BcmPopoverCustomEvent<void>) => void;
         /**
-          * @prop {boolean} open - Indicates whether the popover is currently open. Can be set programmatically or toggled by user interaction. Mutable. Default: false
+          * @event bcmOpen - Emitted when the popover is opened. Useful for tracking when the popover becomes visible.
+         */
+        "onBcmOpen"?: (event: BcmPopoverCustomEvent<void>) => void;
+        /**
+          * @prop {boolean} open - Controls the open state of the popover. Can be set programmatically or toggled by user interaction. Default: false
           * @default false
          */
         "open"?: boolean;
@@ -3524,16 +4473,21 @@ declare namespace LocalJSX {
           * @default 'top'
          */
         "placement"?: 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * @prop {number} showDelay - Delay in milliseconds before showing the popover. Useful to prevent popovers from appearing on quick mouse movements. Default: 0
+          * @default 0
+         */
+        "showDelay"?: number;
         /**
           * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover. Controls the text size and padding of the popover content. Default: 'medium'
           * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
-          * @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'
+          * @prop {('click' | 'hover' | 'hover focus')} trigger - Defines the interaction type to show/hide the popover. 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'hover focus' combines both. Default: 'click'
           * @default 'click'
          */
-        "trigger"?: 'click' | 'hover';
+        "trigger"?: 'click' | 'hover' | 'hover focus';
     }
     interface BcmRadio {
         /**
@@ -4029,49 +4983,101 @@ declare namespace LocalJSX {
     }
     /**
      * @component BcmTooltip
-     * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on 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 Hover Tooltip
-     * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
-     * <bcm-button>Hover Me</bcm-button>
+     * @description A flexible tooltip component that provides contextual information on hover or click.
+     * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+     * Automatically handles overflow, flipping, and complex shadow DOM scenarios.
+     * @example ```html
+     * <!-- Basic usage with text message -->
+     * <bcm-tooltip message="This is a tooltip">
+     *   <button>Hover me</button>
      * </bcm-tooltip>
-     * @example Click Tooltip with Programmatic Control
-     * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
-     * <bcm-button>Click Me</bcm-button>
+     * <!-- With custom rich content -->
+     * <bcm-tooltip placement="right" size="large">
+     *   <button>Click me</button>
+     *   <div slot="content">
+     *     <strong>Rich content</strong>
+     *     <p>You can add any HTML here</p>
+     *   </div>
+     * </bcm-tooltip>
+     * <!-- Click trigger with custom delays -->
+     * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+     *   <span>Click me</span>
+     * </bcm-tooltip>
+     * <!-- Mouse following mode -->
+     * <bcm-tooltip follow={true} message="I follow your cursor!">
+     *   <div>Move your mouse here</div>
+     * </bcm-tooltip>
+     * <!-- Programmatic control -->
+     * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+     *   <span>Trigger</span>
      * </bcm-tooltip>
      * <script>
-     * const tooltip = document.querySelector('#my-tooltip');
-     * tooltip.openTooltip(); // Opens the tooltip
-     * tooltip.closeTooltip(); // Closes the tooltip
+     *   const tooltip = document.getElementById('myTooltip');
+     *   tooltip.show();
+     *   setTimeout(() => tooltip.hide(), 2000);
      * </script>
-     * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
-     * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+     * <!-- Custom styling with CSS parts -->
+     * <style>
+     *   bcm-tooltip::part(tooltip) {
+     *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+     *     border-radius: 12px;
+     *   }
+     *   bcm-tooltip::part(arrow) {
+     *     background: #667eea;
+     *   }
+     * </style>
+     * ```
      */
     interface BcmTooltip {
         /**
-          * @prop {string} message - Custom text for the tooltip content. Used as fallback content if the 'tooltip' slot is not provided.
+          * Whether to show an arrow pointing to the trigger element Note: Arrow is automatically hidden in 'follow' mode
+          * @default true
+         */
+        "arrow"?: boolean;
+        /**
+          * Disables the tooltip, preventing it from showing Useful for conditional tooltips based on application state
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Makes the tooltip follow the mouse cursor When enabled: - Arrow is hidden - Tooltip position updates smoothly with cursor movement - Pointer events are disabled on tooltip to prevent interference
+          * @default false
+         */
+        "follow"?: boolean;
+        /**
+          * Delay in milliseconds before hiding the tooltip Provides a grace period for mouse movements
+          * @default 100
+         */
+        "hideDelay"?: number;
+        /**
+          * Simple text message to display in the tooltip Can be overridden by slotting content into the 'content' slot
          */
         "message"?: string;
         /**
-          * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element. Default: 'top'
+          * Distance in pixels between the tooltip and the trigger element Also used as the offset in 'follow' mode
+          * @default 12
+         */
+        "offset"?: number;
+        /**
+          * Preferred placement of the tooltip relative to the trigger Note: Tooltip will automatically flip if there's not enough space - 'top': Above the trigger element - 'right': To the right of the trigger element - 'bottom': Below the trigger element - 'left': To the left of the trigger element
           * @default 'top'
          */
-        "placement"?: 'top' | 'right' | 'bottom' | 'left';
+        "placement"?: TooltipPlacement;
         /**
-          * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip. Helps prevent flickering on quick mouse movements. Default: 150
+          * Delay in milliseconds before showing the tooltip Useful to prevent tooltips from appearing on quick mouse movements
           * @default 150
          */
         "showDelay"?: number;
         /**
-          * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip. Controls the text size and padding of the tooltip content. Default: 'medium'
+          * Size variant of the tooltip - 'small': Compact tooltip with minimal padding (text-size-3, py-1 px-2) - 'medium': Standard tooltip size (text-size-4, py-1.5 px-3) - 'large': Larger tooltip for more content (text-size-5, py-2 px-4)
           * @default 'medium'
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: TooltipSize;
         /**
-          * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip. 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave. Default: 'hover'
+          * How the tooltip is triggered - 'hover': Shows on mouse enter, hides on mouse leave - 'click': Toggles on click, closes on outside click or Escape key
           * @default 'hover'
          */
-        "trigger"?: 'click' | 'hover';
+        "trigger"?: TooltipTrigger;
     }
     interface IntrinsicElements {
         "bcm-accordion": BcmAccordion;
@@ -4281,72 +5287,258 @@ declare module "@stencil/core" {
              * The component uses CSS variables for theming and Tailwind for styling.
              */
             "bcm-divider": LocalJSX.BcmDivider & JSXBase.HTMLAttributes<HTMLBcmDividerElement>;
+            /**
+             * @component BcmDrawer
+             * @description A slide-in panel component built on the native HTML Dialog API.
+             * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.
+             * @example ```html
+             * <!-- Basic usage -->
+             * <bcm-drawer open header-text="Menu" position="left">
+             *   <nav>
+             *     <a href="/home">Home</a>
+             *     <a href="/about">About</a>
+             *   </nav>
+             * </bcm-drawer>
+             * <!-- Custom size and position -->
+             * <bcm-drawer size="large" position="right">
+             *   <div slot="header">Settings</div>
+             *   <form>...</form>
+             *   <div slot="footer">
+             *     <button data-dismiss>Cancel</button>
+             *     <button>Save</button>
+             *   </div>
+             * </bcm-drawer>
+             * <!-- Custom size with CSS units -->
+             * <bcm-drawer size="600px" position="bottom">
+             *   <p>Custom height drawer</p>
+             * </bcm-drawer>
+             * <!-- Programmatic usage -->
+             * <bcm-drawer id="myDrawer">Content</bcm-drawer>
+             * <script>
+             *   document.getElementById('myDrawer').show();
+             * </script>
+             * ```
+             */
             "bcm-drawer": LocalJSX.BcmDrawer & JSXBase.HTMLAttributes<HTMLBcmDrawerElement>;
             "bcm-dropdown": LocalJSX.BcmDropdown & JSXBase.HTMLAttributes<HTMLBcmDropdownElement>;
             "bcm-dropdown-item": LocalJSX.BcmDropdownItem & JSXBase.HTMLAttributes<HTMLBcmDropdownItemElement>;
             "bcm-input": LocalJSX.BcmInput & JSXBase.HTMLAttributes<HTMLBcmInputElement>;
+            /**
+             * @component BcmLinked
+             * @description A flexible linked floating element component that displays contextual content relative to a trigger element.
+             * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+             * Supports different trigger types (click, hover, focus, manual) and comprehensive event system.
+             * @example Basic Click Trigger
+             * <bcm-linked trigger="click">
+             * <button slot="trigger">Click Me</button>
+             * <div>Floating content here</div>
+             * </bcm-linked>
+             * @example Hover Trigger with Delays
+             * <bcm-linked trigger="hover" show-delay="200" hide-delay="100">
+             * <span slot="trigger">Hover Me</span>
+             * <div>This appears on hover</div>
+             * </bcm-linked>
+             * @example Manual Control
+             * <bcm-linked id="my-linked" trigger="manual">
+             * <button slot="trigger">Trigger</button>
+             * <div>Controlled content</div>
+             * </bcm-linked>
+             * <script>
+             * const linked = document.querySelector('#my-linked');
+             * linked.show(); // Opens the floating element
+             * linked.hide(); // Closes the floating element
+             * </script>
+             * @csspart floating - The floating container element
+             * @csspart arrow - The arrow element pointing to the trigger
+             * @csspart content - The content wrapper element
+             */
             "bcm-linked": LocalJSX.BcmLinked & JSXBase.HTMLAttributes<HTMLBcmLinkedElement>;
+            /**
+             * @component BcmModal
+             * @description A flexible modal dialog component built on the native HTML Dialog API.
+             * Provides a powerful way to display content in a layer above the page with full keyboard and focus management.
+             * @example ```html
+             * <!-- Basic usage -->
+             * <bcm-modal open header-text="Welcome" helper-text="Please read carefully">
+             *   <p>Modal content goes here</p>
+             *   <div slot="footer">
+             *     <button data-dismiss>Close</button>
+             *   </div>
+             * </bcm-modal>
+             * <!-- Custom size and placement -->
+             * <bcm-modal size="large" placement="top">
+             *   <div slot="header">Custom Header</div>
+             *   <p>Content here</p>
+             *   <div slot="footer">
+             *     <button>Cancel</button>
+             *     <button>Confirm</button>
+             *   </div>
+             * </bcm-modal>
+             * <!-- Full screen modal -->
+             * <bcm-modal full-screen no-footer>
+             *   <p>Full screen content</p>
+             * </bcm-modal>
+             * <!-- Programmatic usage -->
+             * <bcm-modal id="myModal">Content</bcm-modal>
+             * <script>
+             *   document.getElementById('myModal').show();
+             * </script>
+             * ```
+             */
             "bcm-modal": LocalJSX.BcmModal & JSXBase.HTMLAttributes<HTMLBcmModalElement>;
             /**
              * @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>
+             * @description A confirmation popover component that displays a confirmation dialog with customizable actions.
+             * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+             * Ideal for confirming destructive actions or important decisions inline.
+             * @csspart container - The main popover container element
+             * @csspart arrow - The arrow pointer element
+             * @csspart body - The body/description section
+             * @csspart footer - The footer section with action buttons
+             * @example Basic Usage
+             * ```html
+             * <bcm-pop-confirm
+             * header-text="Delete Item?"
+             * description="Are you sure you want to delete this item? This action cannot be undone."
+             * status="error"
+             * >
+             * <bcm-button status="error">Delete</bcm-button>
              * </bcm-pop-confirm>
-             * @example Event handling
-             * // Listen to confirmation events
-             * const popConfirm = document.querySelector('bcm-pop-confirm');
-             * popConfirm.addEventListener('bcmConfirm', () => {
-             * console.log('User confirmed the action!');
+             * ```
+             * @example With Event Handlers
+             * ```html
+             * <bcm-pop-confirm
+             * id="deleteConfirm"
+             * header-text="Confirm Delete"
+             * description="This will permanently delete the item."
+             * status="warning"
+             * confirm-text="Yes, Delete"
+             * cancel-text="No, Keep It"
+             * >
+             * <bcm-button>Delete Item</bcm-button>
+             * </bcm-pop-confirm>
+             * <script>
+             * const popconfirm = document.getElementById('deleteConfirm');
+             * popconfirm.addEventListener('bcmConfirm', () => {
+             * console.log('User confirmed deletion');
+             * // Perform delete operation
              * });
-             * popConfirm.addEventListener('bcmCancel', () => {
-             * console.log('User canceled the action!');
+             * popconfirm.addEventListener('bcmCancel', () => {
+             * console.log('User cancelled deletion');
              * });
-             * // 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
-             * @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
+             * </script>
+             * ```
+             * @example Different Status Types
+             * ```html
+             * <!-- Info (default) -->
+             * <bcm-pop-confirm header-text="Information" description="This is an info message">
+             * <bcm-button>Info</bcm-button>
+             * </bcm-pop-confirm>
+             * <!-- Success -->
+             * <bcm-pop-confirm status="success" header-text="Confirm Action" description="Proceed with this action?">
+             * <bcm-button status="success">Proceed</bcm-button>
+             * </bcm-pop-confirm>
+             * <!-- Warning -->
+             * <bcm-pop-confirm status="warning" header-text="Warning" description="This action may have consequences">
+             * <bcm-button status="warning">Continue</bcm-button>
+             * </bcm-pop-confirm>
+             * <!-- Error/Danger -->
+             * <bcm-pop-confirm status="error" header-text="Danger Zone" description="This is a destructive action">
+             * <bcm-button status="error">Delete</bcm-button>
+             * </bcm-pop-confirm>
+             * ```
+             * @example Custom Content with Slots
+             * ```html
+             * <bcm-pop-confirm status="warning">
+             * <bcm-button>Custom Confirm</bcm-button>
+             * <div slot="header">
+             * <strong>Custom Header</strong>
+             * </div>
+             * <div slot="body">
+             * <p>This is custom body content with <strong>HTML formatting</strong>.</p>
+             * <ul>
+             * <li>Point 1</li>
+             * <li>Point 2</li>
+             * </ul>
+             * </div>
+             * <div slot="footer">
+             * <bcm-button kind="outline" size="small">Maybe Later</bcm-button>
+             * <bcm-button status="success" size="small">Confirm</bcm-button>
+             * </div>
+             * </bcm-pop-confirm>
+             * ```
+             * @example Different Sizes
+             * ```html
+             * <!-- Small -->
+             * <bcm-pop-confirm size="small" header-text="Small" description="Compact confirmation">
+             * <bcm-button size="small">Small</bcm-button>
+             * </bcm-pop-confirm>
+             * <!-- Medium (default) -->
+             * <bcm-pop-confirm size="medium" header-text="Medium" description="Standard confirmation">
+             * <bcm-button size="medium">Medium</bcm-button>
+             * </bcm-pop-confirm>
+             * <!-- Large -->
+             * <bcm-pop-confirm size="large" header-text="Large" description="Spacious confirmation with more room for content">
+             * <bcm-button size="large">Large</bcm-button>
+             * </bcm-pop-confirm>
+             * ```
+             * @example Programmatic Control
+             * ```html
+             * <bcm-pop-confirm id="myConfirm" header-text="Confirm" description="Are you sure?">
+             * <bcm-button>Trigger</bcm-button>
+             * </bcm-pop-confirm>
+             * <bcm-button id="showBtn">Show Programmatically</bcm-button>
+             * <bcm-button id="hideBtn">Hide Programmatically</bcm-button>
+             * <script>
+             * const popconfirm = document.getElementById('myConfirm');
+             * document.getElementById('showBtn').addEventListener('click', () => {
+             * popconfirm.show();
+             * });
+             * document.getElementById('hideBtn').addEventListener('click', () => {
+             * popconfirm.hide();
+             * });
+             * </script>
+             * ```
+             * @example Without Status Icon
+             * ```html
+             * <bcm-pop-confirm
+             * header-text="Simple Confirmation"
+             * description="No status icon shown"
+             * status-icon={false}
+             * >
+             * <bcm-button>Click Me</bcm-button>
+             * </bcm-pop-confirm>
+             * ```
+             * @example Different Placements
+             * ```html
+             * <bcm-pop-confirm placement="top" header-text="Top" description="Opens above">
+             * <bcm-button>Top</bcm-button>
+             * </bcm-pop-confirm>
+             * <bcm-pop-confirm placement="right" header-text="Right" description="Opens to the right">
+             * <bcm-button>Right</bcm-button>
+             * </bcm-pop-confirm>
+             * <bcm-pop-confirm placement="bottom" header-text="Bottom" description="Opens below">
+             * <bcm-button>Bottom</bcm-button>
+             * </bcm-pop-confirm>
+             * <bcm-pop-confirm placement="left" header-text="Left" description="Opens to the left">
+             * <bcm-button>Left</bcm-button>
+             * </bcm-pop-confirm>
+             * ```
              */
             "bcm-pop-confirm": LocalJSX.BcmPopConfirm & JSXBase.HTMLAttributes<HTMLBcmPopConfirmElement>;
             /**
              * @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.
+             * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+             * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.
              * @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.">
+             * @example Hover Popover with Delays
+             * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" 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
@@ -4356,8 +5548,9 @@ declare module "@stencil/core" {
              * </bcm-popover>
              * <script>
              * const popover = document.querySelector('#my-popover');
-             * popover.openPopup(); // Opens the popover
-             * popover.closePopup(); // Closes the popover
+             * popover.show(); // Opens the popover
+             * popover.hide(); // Closes the popover
+             * popover.toggle(); // Toggles the popover
              * </script>
              * @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
@@ -4415,23 +5608,50 @@ declare module "@stencil/core" {
             "bcm-textarea": LocalJSX.BcmTextarea & JSXBase.HTMLAttributes<HTMLBcmTextareaElement>;
             /**
              * @component BcmTooltip
-             * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on 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 Hover Tooltip
-             * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
-             * <bcm-button>Hover Me</bcm-button>
+             * @description A flexible tooltip component that provides contextual information on hover or click.
+             * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+             * Automatically handles overflow, flipping, and complex shadow DOM scenarios.
+             * @example ```html
+             * <!-- Basic usage with text message -->
+             * <bcm-tooltip message="This is a tooltip">
+             *   <button>Hover me</button>
              * </bcm-tooltip>
-             * @example Click Tooltip with Programmatic Control
-             * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
-             * <bcm-button>Click Me</bcm-button>
+             * <!-- With custom rich content -->
+             * <bcm-tooltip placement="right" size="large">
+             *   <button>Click me</button>
+             *   <div slot="content">
+             *     <strong>Rich content</strong>
+             *     <p>You can add any HTML here</p>
+             *   </div>
+             * </bcm-tooltip>
+             * <!-- Click trigger with custom delays -->
+             * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+             *   <span>Click me</span>
+             * </bcm-tooltip>
+             * <!-- Mouse following mode -->
+             * <bcm-tooltip follow={true} message="I follow your cursor!">
+             *   <div>Move your mouse here</div>
+             * </bcm-tooltip>
+             * <!-- Programmatic control -->
+             * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+             *   <span>Trigger</span>
              * </bcm-tooltip>
              * <script>
-             * const tooltip = document.querySelector('#my-tooltip');
-             * tooltip.openTooltip(); // Opens the tooltip
-             * tooltip.closeTooltip(); // Closes the tooltip
+             *   const tooltip = document.getElementById('myTooltip');
+             *   tooltip.show();
+             *   setTimeout(() => tooltip.hide(), 2000);
              * </script>
-             * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
-             * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+             * <!-- Custom styling with CSS parts -->
+             * <style>
+             *   bcm-tooltip::part(tooltip) {
+             *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+             *     border-radius: 12px;
+             *   }
+             *   bcm-tooltip::part(arrow) {
+             *     background: #667eea;
+             *   }
+             * </style>
+             * ```
              */
             "bcm-tooltip": LocalJSX.BcmTooltip & JSXBase.HTMLAttributes<HTMLBcmTooltipElement>;
         }