bromcom-ui-next 0.1.29 → 0.1.31

package/dist/types/components.d.ts

@@ -12,14 +12,16 @@ import { AvatarShape, AvatarSize, AvatarStatus } from "./components/avatar/types
 import { ButtonKind, ButtonPosition, ButtonSize, ButtonStatus, ButtonType, ButtonVariant, IconPosition } from "./components/button/types";
 import { ChipKind, ChipSize, ChipStatus } from "./components/chip/types";
 import { DrawerPosition, DrawerSize } from "./components/drawer/types";
+import { BcmUploadErrorMessages, BcmUploadItem } from "./components/upload/file-upload.component";
 import { InputSize, InputStatus, InputType } from "./components/input/types";
 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 { SegmentedPickerSize } from "./components/segmented-picker/types";
+import { PopConfirmPlacement, PopConfirmSize, PopConfirmStatus } from "./components/pop-confirm/pop-confirm.component";
 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";
@@ -27,14 +29,16 @@ export { AvatarShape, AvatarSize, AvatarStatus } from "./components/avatar/types
 export { ButtonKind, ButtonPosition, ButtonSize, ButtonStatus, ButtonType, ButtonVariant, IconPosition } from "./components/button/types";
 export { ChipKind, ChipSize, ChipStatus } from "./components/chip/types";
 export { DrawerPosition, DrawerSize } from "./components/drawer/types";
+export { BcmUploadErrorMessages, BcmUploadItem } from "./components/upload/file-upload.component";
 export { InputSize, InputStatus, InputType } from "./components/input/types";
 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 { SegmentedPickerSize } from "./components/segmented-picker/types";
+export { PopConfirmPlacement, PopConfirmSize, PopConfirmStatus } from "./components/pop-confirm/pop-confirm.component";
 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
@@ -500,58 +504,122 @@ export namespace Components {
         "status"?: ButtonStatus;
     }
     /**
-     * @description A checkbox component that allows users to select or deselect an option.
-     * It also supports an indeterminate state.
+     * @component BcmCheckbox
+     * @description A form-associated checkbox component representing a boolean choice.
+     * Integrates with native HTML forms via ElementInternals while supporting
+     * **three validation strategies** via `validation-mode`:
+     * - **`native`**
+     *   - Participates in native browser constraint validation.
+     *   - Sets the underlying input's `required`.
+     *   - Browser may show native validation bubbles when submit/reportValidity happens.
+     * - **`silent`**
+     *   - Does **not** set native `required` (prevents browser bubble).
+     *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+     * - **`none`**
+     *   - Value-only mode: submits value but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * - `touched` becomes true after first user interaction
+     * - `submitAttempted` becomes true when the parent form emits `submit`
+     * ## Value behavior
+     * - When checked → submits `value` (default: `"on"`).
+     * - When unchecked → submits no value (`null`).
+     * - When disabled → no submission and no validity participation.
+     * ## Shadow Parts
+     * - `checkbox`  → root container
+     * - `control`   → visual checkbox box
+     * - `icon`      → icon container (check or minus)
+     * - `label`     → label text
+     * - `caption`   → helper/error text (silent mode UI)
+     * - `input`     → hidden native input
+     * @example Basic usage
+     * <bcm-checkbox name="terms" required>
+     * I agree to the terms and conditions
+     * </bcm-checkbox>
+     * @example Silent validation (no native bubble)
+     * <form>
+     * <bcm-checkbox name="newsletter" required validation-mode="silent">
+     * Subscribe to newsletter
+     * </bcm-checkbox>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Value-only mode
+     * <bcm-checkbox name="analytics" validation-mode="none">
+     * Allow analytics
+     * </bcm-checkbox>
      */
     interface BcmCheckbox {
         /**
-          * Unique ID for the component. Automatically generated if not specified.
+          * Unique ID for the component. Automatically generated if not specified. Used to bind the visible label to the internal input.
           * @default generateId('bcm-checkbox')
          */
         "_id"?: string;
         /**
-          * Determines if the checkbox is checked
+          * Helper / error caption (silent mode UI)
+         */
+        "caption"?: string;
+        /**
+          * Checked state
           * @default false
          */
         "checked": boolean;
         /**
-          * Determines if the checkbox is disabled
+          * Disabled state
           * @default false
          */
         "disabled": boolean;
         /**
-          * Indicates if the checkbox is in an error state. This affects the visual styling of the component.
+          * Visual error state. - In `silent` mode this can be managed internally. - In other modes you can set it externally as well.
           * @default false
          */
         "error": boolean;
         /**
-          * Full width checkbox
+          * Makes checkbox occupy full width (if your styles support it).
           * @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.
+          * Indeterminate (mixed) state. Useful when a group selection is partially selected.
           * @default false
          */
         "indeterminate": boolean;
         /**
-          * Label text to display next to the checkbox
+          * Visible label text (optional). You can also use the default slot.
          */
         "label"?: string;
         /**
-          * Controls the position of the label relative to the checkbox
+          * Label position relative to the checkbox control.
           * @default 'right'
          */
         "labelPosition": 'left' | 'right';
         /**
-          * Name attribute for the checkbox when used in a form
+          * Form field name
          */
-        "name": string;
+        "name"?: string;
+        /**
+          * Optional readonly support
+          * @default false
+         */
+        "readonly": boolean;
         /**
-          * Size variant of the checkbox
+          * Required state
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Size variant (affects control + typography).
           * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
+        /**
+          * @default 'native'
+         */
+        "validationMode": 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
+         */
+        "value": string;
     }
     /**
      * @component BcmChip
@@ -635,30 +703,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;
@@ -680,6 +827,56 @@ export namespace Components {
         "selected": boolean;
         "text": string;
     }
+    interface BcmFileUpload {
+        /**
+          * @default '.xls,.pdf'
+         */
+        "accept": string;
+        /**
+          * @default ''
+         */
+        "caption"?: string;
+        /**
+          * Allows consumers to override default error messages.
+         */
+        "customErrorMessages"?: BcmUploadErrorMessages;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Maximum number of files allowed in total. Only applied when `multiple` is true.
+         */
+        "maxFileCount"?: number;
+        /**
+          * @default 2
+         */
+        "maxSize": number;
+        /**
+          * @default false
+         */
+        "multiple": boolean;
+        /**
+          * @default 'file'
+         */
+        "name": string;
+        /**
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * @default 'medium'
+         */
+        "size": 'medium' | 'small';
+        /**
+          * Reserved for future backend upload integration. Currently does not affect component behavior.
+         */
+        "uploadUrl"?: string;
+    }
     interface BcmInput {
         /**
           * Input id
@@ -807,221 +1004,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;
+        /**
+          * @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 pop-up by setting `isOpen` to true and updating its position.
-          * @returns A promise that resolves when the pop-up is shown.
+          * Programmatically shows the popconfirm.
+          * @returns Promise that resolves when the show operation begins
          */
         "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
@@ -1031,8 +1443,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
@@ -1041,50 +1454,76 @@ 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
          */
-        "closePopup": () => Promise<void>;
+        "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;
+        "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.
          */
-        "hoverDelay": number;
+        "hide": () => Promise<void>;
+        /**
+          * @prop {number} hideDelay - Delay in milliseconds before hiding the popover. Provides a grace period for mouse movements. Default: 0
+          * @default 0
+         */
+        "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 {
+        /**
+          * @default generateId('bcm-radio')
+         */
+        "_id"?: string;
         /**
           * Whether the radio button is selected.
           * @prop 
@@ -1127,6 +1566,11 @@ export namespace Components {
           * @defaultValue false
          */
         "readonly": boolean;
+        /**
+          * Whether at least one radio in this group is required. (HTML)
+          * @default false
+         */
+        "required": boolean;
         /**
           * Defines the size of the radio button: 'small' | 'medium' | 'large'.
           * @prop 
@@ -1206,49 +1650,83 @@ export namespace Components {
          */
         "value": string;
     }
-    interface BcmSegmentedPicker {
+    /**
+     * Individual segment option component
+     */
+    interface BcmSegment {
+        /**
+          * Index of currently active segment (inherited from parent)
+          * @default 0
+         */
+        "activeIndex": number;
         /**
           * Disabled state
           * @default false
          */
         "disabled": boolean;
         /**
-          * Full width component
+          * Index of this segment (inherited from parent)
+          * @default 0
+         */
+        "index": number;
+        /**
+          * Selected state (controlled by parent)
           * @default false
          */
-        "fullWidth": boolean;
+        "selected": boolean;
         /**
-          * Controls the component size
+          * Size variant (inherited from parent)
           * @default 'medium'
          */
-        "size": SegmentedPickerSize;
+        "size": 'small' | 'medium' | 'large';
         /**
-          * The selected option value
+          * Unique identifier for this segment
          */
-        "value"?: string;
+        "value": string;
     }
-    interface BcmSegmentedPickerOption {
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface BcmSegmentedPicker {
         /**
-          * Whether this option is disabled
+          * Disabled state
           * @default false
          */
         "disabled": boolean;
-        "getWidth": () => Promise<number>;
         /**
-          * Option display label
+          * Full width flag
+          * @default false
          */
-        "label"?: string;
+        "fullWidth": boolean;
+        /**
+          * Public method to get active segment value
+         */
+        "getValue": () => Promise<string>;
         /**
-          * Whether this option is selected
+          * Name attribute for form association
+         */
+        "name": string;
+        /**
+          * Whether this field is required in a form
           * @default false
          */
-        "selected": boolean;
+        "required": boolean;
+        /**
+          * Public method to programmatically set active segment
+         */
+        "setValue": (value: string) => Promise<void>;
+        /**
+          * Enable shadow on container
+          * @default false
+         */
+        "shadow": boolean;
         /**
-          * Controls the option size
+          * Size variant
+          * @default 'medium'
          */
-        "size"?: SegmentedPickerSize;
+        "size": 'small' | 'medium' | 'large';
         /**
-          * Option value
+          * Selected segment value
          */
         "value": string;
     }
@@ -1261,50 +1739,79 @@ export namespace Components {
     }
     /**
      * @component BcmSwitch
-     * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-     * Supports different sizes, label positions, error states, and accessibility features.
+     * @description A form-associated toggle switch component representing a boolean choice.
+     * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+     * This component supports **three validation strategies** via `validation-mode`:
+     * - **`native`**:
+     *   - Uses native browser constraint validation.
+     *   - Sets the underlying input's `required` attribute.
+     *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+     * - **`silent`**:
+     *   - Does **not** rely on native `required` (prevents the browser bubble).
+     *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+     * - **`none`**:
+     *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * To avoid showing errors on initial render, the component tracks:
+     * - `touched`: set after the first user interaction
+     * - `submitAttempted`: set when the parent form emits `submit`
+     * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+     * ## Value behavior
+     * - When checked, the component submits its `value` (default: `"on"`).
+     * - When unchecked, no value is submitted.
+     * - When disabled, the component does not participate in submission or validity.
      * @example Basic usage
-     * <bcm-switch label="Enable notifications"></bcm-switch>
-     * @example With error state
+     * <bcm-switch name="newsletter" label="Receive newsletter?" />
+     * @example Required with silent validation (no native bubble)
+     * <form>
      * <bcm-switch
+     * name="terms"
      * label="Accept terms"
-     * error={true}
-     * caption="You must accept the terms to continue">
-     * </bcm-switch>
-     * @example Disabled state
-     * <bcm-switch
-     * label="Advanced features"
-     * disabled={true}>
-     * </bcm-switch>
-     * @example With custom size and label position
-     * <bcm-switch
-     * label="Dark mode"
-     * size="large"
-     * labelPosition="left">
+     * required
+     * validation-mode="silent">
      * </bcm-switch>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Native validation mode (may show native bubble)
+     * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+     * @example Value-only mode (no validation)
+     * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+     * @csspart base - Root container
+     * @csspart switch-wrapper - Wrapper containing label + track
+     * @csspart input - Hidden native input
+     * @csspart label - Text label
+     * @csspart dot-container - Switch track
+     * @csspart dot - Switch knob
+     * @csspart caption - Helper/error text
      */
     interface BcmSwitch {
         /**
-          * Text to display as an error message when error is true
+          * Unique id (optional). Generated by default.
+          * @default generateId('bcm-switch')
+         */
+        "_id"?: string;
+        /**
+          * Helper / error text shown under the switch
          */
         "caption"?: string;
         /**
-          * Whether the switch is checked or not
+          * Checked state
           * @default false
          */
         "checked": boolean;
         /**
-          * Whether the switch is disabled
+          * Disabled state
           * @default false
          */
         "disabled": boolean;
         /**
-          * Whether to display the switch in an error state
+          * Visual error state (manual/external). In silent mode this can be auto-managed.
           * @default false
          */
         "error": boolean;
         /**
-          * Text label for the switch
+          * Visible label text
          */
         "label": string;
         /**
@@ -1313,128 +1820,93 @@ export namespace Components {
          */
         "labelPosition": 'left' | 'right';
         /**
-          * The name attribute for the hidden input element
+          * Form field name
          */
-        "name": string;
+        "name"?: string;
         /**
-          * Whether the switch is in readonly mode
+          * Optional readonly support
           * @default false
          */
         "readonly": boolean;
         /**
-          * Whether the switch is required in a form
+          * Required state
           * @default false
          */
         "required": boolean;
         /**
-          * Size variant of the switch
+          * Size variant
           * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
-          * The value attribute for the hidden input element
+          * @default 'native'
+         */
+        "validationMode": 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
          */
         "value": string;
     }
     /**
-     * @description Tab interface component
+     * Individual tab component - self-contained with label and content panel
      */
-    interface BcmTabs {
+    interface BcmTab {
         /**
-          * Default active tab value
-         */
-        "defaultValue": string;
-        /**
-          * Disables all tabs
-         */
-        "disableAllTabs": () => Promise<void>;
-        "disableTab": (value: string) => Promise<void>;
-        /**
-          * Enables all tabs
-         */
-        "enableAllTabs": () => Promise<void>;
-        "enableTab": (value: string) => Promise<void>;
-        /**
-          * Returns the active tab value
-         */
-        "getActiveTab": () => Promise<string>;
-        /**
-          * Sets the active tab
+          * Active state (controlled by parent)
+          * @default false
          */
-        "setActiveTab": (value: string) => Promise<void>;
+        "active": boolean;
         /**
-          * Tab size
-          * @default 'medium'
+          * Disabled state
+          * @default false
          */
-        "size": 'small' | 'medium' | 'large';
+        "disabled": boolean;
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Label text to display in tab button
          */
-        "smooth": boolean;
+        "label": string;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Size variant (inherited from parent)
+          * @default 'md'
          */
-        "variant": 'full-width' | 'auto-width';
-    }
-    /**
-     * @description Tab content panel component that displays when its corresponding tab is selected
-     */
-    interface BcmTabsContent {
+        "size": 'sm' | 'md' | 'lg';
         /**
-          * Unique identifier that matches a tab trigger's value Used to associate this content with its corresponding tab
+          * Unique identifier for this tab
          */
         "value": string;
     }
     /**
-     * @description Container component for tab triggers that includes the sliding indicator (inkbar)
+     * Modern Tabs component with CSS-first approach
      */
-    interface BcmTabsList {
-        /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
-         */
-        "smooth": boolean;
+    interface BcmTabs {
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Public method to get active tab value
          */
-        "variant": 'full-width' | 'auto-width';
-    }
-    /**
-     * @description Tab trigger component that functions as a clickable tab button
-     */
-    interface BcmTabsTrigger {
+        "getActiveTab": () => Promise<string>;
         /**
-          * Whether the tab is currently active
-          * @default false
+          * Public method to programmatically set active tab
          */
-        "active": boolean;
+        "setActiveTab": (value: string) => Promise<void>;
         /**
-          * Whether the tab is disabled
+          * Enable shadow on main container
           * @default false
          */
-        "disabled": boolean;
+        "shadow": boolean;
         /**
-          * Size of the tab
-          * @default 'medium'
+          * Tab size variant
+          * @default 'md'
          */
-        "size": 'small' | 'medium' | 'large';
+        "size": 'sm' | 'md' | 'lg';
         /**
-          * Whether to enable smooth animations for transitions
-          * @default true
-         */
-        "smooth": boolean;
-        /**
-          * Unique identifier value for the tab
+          * Active tab value
          */
         "value": string;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Visual variant
+          * @default 'line'
          */
-        "variant": 'full-width' | 'auto-width';
+        "variant": 'line' | 'enclosed';
     }
     interface BcmText {
         /**
@@ -1576,59 +2048,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
+         */
+        "arrow": boolean;
+        /**
+          * Disables the tooltip, preventing it from showing Useful for conditional tooltips based on application state
+          * @default false
          */
-        "closeTooltip": () => Promise<void>;
+        "disabled": boolean;
         /**
-          * @prop {string} message - Custom text for the tooltip content. Used as fallback content if the 'tooltip' slot is not provided.
+          * 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
          */
-        "message": string;
+        "follow": 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.
+          * Programmatically hides the tooltip Respects the hideDelay prop
          */
-        "openTooltip": () => Promise<void>;
+        "hide": () => Promise<void>;
         /**
-          * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element. Default: 'top'
+          * 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;
+        /**
+          * 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;
+        /**
+          * Toggles the tooltip visibility If open, hides it; if closed, shows it
+         */
+        "toggle": () => Promise<void>;
         /**
-          * @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;
     }
 }
 export interface BcmAccordionCustomEvent<T> extends CustomEvent<T> {
@@ -1665,7 +2191,11 @@ export interface BcmDropdownCustomEvent<T> extends CustomEvent<T> {
 }
 export interface BcmDropdownItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmDropdownItemElement;
+    target: HTMLBcmDropdownItemElement;
+}
+export interface BcmFileUploadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmFileUploadElement;
 }
 export interface BcmInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1695,25 +2225,25 @@ export interface BcmRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmRadioGroupElement;
 }
-export interface BcmSegmentedPickerCustomEvent<T> extends CustomEvent<T> {
+export interface BcmSegmentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmSegmentedPickerElement;
+    target: HTMLBcmSegmentElement;
 }
-export interface BcmSegmentedPickerOptionCustomEvent<T> extends CustomEvent<T> {
+export interface BcmSegmentedPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmSegmentedPickerOptionElement;
+    target: HTMLBcmSegmentedPickerElement;
 }
 export interface BcmSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmSwitchElement;
 }
-export interface BcmTabsCustomEvent<T> extends CustomEvent<T> {
+export interface BcmTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmTabsElement;
+    target: HTMLBcmTabElement;
 }
-export interface BcmTabsTriggerCustomEvent<T> extends CustomEvent<T> {
+export interface BcmTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmTabsTriggerElement;
+    target: HTMLBcmTabsElement;
 }
 export interface BcmTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1942,11 +2472,52 @@ declare global {
         new (): HTMLBcmButtonGroupElement;
     };
     interface HTMLBcmCheckboxElementEventMap {
-        "bcmCheckboxChange": { element: any; checked: boolean };
+        "bcmCheckboxChange": { element: HTMLInputElement; checked: boolean };
     }
     /**
-     * @description A checkbox component that allows users to select or deselect an option.
-     * It also supports an indeterminate state.
+     * @component BcmCheckbox
+     * @description A form-associated checkbox component representing a boolean choice.
+     * Integrates with native HTML forms via ElementInternals while supporting
+     * **three validation strategies** via `validation-mode`:
+     * - **`native`**
+     *   - Participates in native browser constraint validation.
+     *   - Sets the underlying input's `required`.
+     *   - Browser may show native validation bubbles when submit/reportValidity happens.
+     * - **`silent`**
+     *   - Does **not** set native `required` (prevents browser bubble).
+     *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+     * - **`none`**
+     *   - Value-only mode: submits value but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * - `touched` becomes true after first user interaction
+     * - `submitAttempted` becomes true when the parent form emits `submit`
+     * ## Value behavior
+     * - When checked → submits `value` (default: `"on"`).
+     * - When unchecked → submits no value (`null`).
+     * - When disabled → no submission and no validity participation.
+     * ## Shadow Parts
+     * - `checkbox`  → root container
+     * - `control`   → visual checkbox box
+     * - `icon`      → icon container (check or minus)
+     * - `label`     → label text
+     * - `caption`   → helper/error text (silent mode UI)
+     * - `input`     → hidden native input
+     * @example Basic usage
+     * <bcm-checkbox name="terms" required>
+     * I agree to the terms and conditions
+     * </bcm-checkbox>
+     * @example Silent validation (no native bubble)
+     * <form>
+     * <bcm-checkbox name="newsletter" required validation-mode="silent">
+     * Subscribe to newsletter
+     * </bcm-checkbox>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Value-only mode
+     * <bcm-checkbox name="analytics" validation-mode="none">
+     * Allow analytics
+     * </bcm-checkbox>
      */
     interface HTMLBcmCheckboxElement extends Components.BcmCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmCheckboxElementEventMap>(type: K, listener: (this: HTMLBcmCheckboxElement, ev: BcmCheckboxCustomEvent<HTMLBcmCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2018,6 +2589,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;
@@ -2066,6 +2669,27 @@ declare global {
         prototype: HTMLBcmDropdownItemElement;
         new (): HTMLBcmDropdownItemElement;
     };
+    interface HTMLBcmFileUploadElementEventMap {
+        "bcmFileChange": File[];
+        "bcmFileRemoved": BcmUploadItem;
+        "bcmUploadCanceled": BcmUploadItem;
+        "bcmFocus": FocusEvent;
+        "bcmBlur": FocusEvent;
+    }
+    interface HTMLBcmFileUploadElement extends Components.BcmFileUpload, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmFileUploadElementEventMap>(type: K, listener: (this: HTMLBcmFileUploadElement, ev: BcmFileUploadCustomEvent<HTMLBcmFileUploadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmFileUploadElementEventMap>(type: K, listener: (this: HTMLBcmFileUploadElement, ev: BcmFileUploadCustomEvent<HTMLBcmFileUploadElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBcmFileUploadElement: {
+        prototype: HTMLBcmFileUploadElement;
+        new (): HTMLBcmFileUploadElement;
+    };
     interface HTMLBcmInputElementEventMap {
         "bcmInput": InputEvent;
         "bcmChange": Event;
@@ -2089,11 +2713,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;
@@ -2114,6 +2769,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;
@@ -2129,55 +2816,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;
@@ -2194,21 +2977,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
@@ -2218,8 +3004,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
@@ -2276,39 +3063,45 @@ declare global {
         prototype: HTMLBcmRadioGroupElement;
         new (): HTMLBcmRadioGroupElement;
     };
-    interface HTMLBcmSegmentedPickerElementEventMap {
-        "bcmChange": { value: string };
+    interface HTMLBcmSegmentElementEventMap {
+        "bcmSegmentClick": string;
     }
-    interface HTMLBcmSegmentedPickerElement extends Components.BcmSegmentedPicker, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Individual segment option component
+     */
+    interface HTMLBcmSegmentElement extends Components.BcmSegment, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmSegmentElementEventMap>(type: K, listener: (this: HTMLBcmSegmentElement, ev: BcmSegmentCustomEvent<HTMLBcmSegmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmSegmentElementEventMap>(type: K, listener: (this: HTMLBcmSegmentElement, ev: BcmSegmentCustomEvent<HTMLBcmSegmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmSegmentedPickerElement: {
-        prototype: HTMLBcmSegmentedPickerElement;
-        new (): HTMLBcmSegmentedPickerElement;
+    var HTMLBcmSegmentElement: {
+        prototype: HTMLBcmSegmentElement;
+        new (): HTMLBcmSegmentElement;
     };
-    interface HTMLBcmSegmentedPickerOptionElementEventMap {
-        "bcmOptionClick": string;
+    interface HTMLBcmSegmentedPickerElementEventMap {
+        "bcmSegmentChange": { value: string; previousValue: string };
     }
-    interface HTMLBcmSegmentedPickerOptionElement extends Components.BcmSegmentedPickerOption, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmSegmentedPickerOptionElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerOptionElement, ev: BcmSegmentedPickerOptionCustomEvent<HTMLBcmSegmentedPickerOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface HTMLBcmSegmentedPickerElement extends Components.BcmSegmentedPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmSegmentedPickerOptionElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerOptionElement, ev: BcmSegmentedPickerOptionCustomEvent<HTMLBcmSegmentedPickerOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmSegmentedPickerOptionElement: {
-        prototype: HTMLBcmSegmentedPickerOptionElement;
-        new (): HTMLBcmSegmentedPickerOptionElement;
+    var HTMLBcmSegmentedPickerElement: {
+        prototype: HTMLBcmSegmentedPickerElement;
+        new (): HTMLBcmSegmentedPickerElement;
     };
     interface HTMLBcmShortcutElement extends Components.BcmShortcut, HTMLStencilElement {
     }
@@ -2321,27 +3114,51 @@ declare global {
     }
     /**
      * @component BcmSwitch
-     * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-     * Supports different sizes, label positions, error states, and accessibility features.
+     * @description A form-associated toggle switch component representing a boolean choice.
+     * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+     * This component supports **three validation strategies** via `validation-mode`:
+     * - **`native`**:
+     *   - Uses native browser constraint validation.
+     *   - Sets the underlying input's `required` attribute.
+     *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+     * - **`silent`**:
+     *   - Does **not** rely on native `required` (prevents the browser bubble).
+     *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+     * - **`none`**:
+     *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * To avoid showing errors on initial render, the component tracks:
+     * - `touched`: set after the first user interaction
+     * - `submitAttempted`: set when the parent form emits `submit`
+     * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+     * ## Value behavior
+     * - When checked, the component submits its `value` (default: `"on"`).
+     * - When unchecked, no value is submitted.
+     * - When disabled, the component does not participate in submission or validity.
      * @example Basic usage
-     * <bcm-switch label="Enable notifications"></bcm-switch>
-     * @example With error state
+     * <bcm-switch name="newsletter" label="Receive newsletter?" />
+     * @example Required with silent validation (no native bubble)
+     * <form>
      * <bcm-switch
+     * name="terms"
      * label="Accept terms"
-     * error={true}
-     * caption="You must accept the terms to continue">
-     * </bcm-switch>
-     * @example Disabled state
-     * <bcm-switch
-     * label="Advanced features"
-     * disabled={true}>
-     * </bcm-switch>
-     * @example With custom size and label position
-     * <bcm-switch
-     * label="Dark mode"
-     * size="large"
-     * labelPosition="left">
+     * required
+     * validation-mode="silent">
      * </bcm-switch>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Native validation mode (may show native bubble)
+     * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+     * @example Value-only mode (no validation)
+     * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+     * @csspart base - Root container
+     * @csspart switch-wrapper - Wrapper containing label + track
+     * @csspart input - Hidden native input
+     * @csspart label - Text label
+     * @csspart dot-container - Switch track
+     * @csspart dot - Switch knob
+     * @csspart caption - Helper/error text
      */
     interface HTMLBcmSwitchElement extends Components.BcmSwitch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmSwitchElementEventMap>(type: K, listener: (this: HTMLBcmSwitchElement, ev: BcmSwitchCustomEvent<HTMLBcmSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2357,67 +3174,48 @@ declare global {
         prototype: HTMLBcmSwitchElement;
         new (): HTMLBcmSwitchElement;
     };
-    interface HTMLBcmTabsElementEventMap {
-        "bcmTabChange": {
-    activeTab: string;
-    element: HTMLBcmTabsTriggerElement;
-    previousTab?: string;
-  };
+    interface HTMLBcmTabElementEventMap {
+        "bcmTabClick": string;
     }
     /**
-     * @description Tab interface component
+     * Individual tab component - self-contained with label and content panel
      */
-    interface HTMLBcmTabsElement extends Components.BcmTabs, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLBcmTabElement extends Components.BcmTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmTabElementEventMap>(type: K, listener: (this: HTMLBcmTabElement, ev: BcmTabCustomEvent<HTMLBcmTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmTabElementEventMap>(type: K, listener: (this: HTMLBcmTabElement, ev: BcmTabCustomEvent<HTMLBcmTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmTabsElement: {
-        prototype: HTMLBcmTabsElement;
-        new (): HTMLBcmTabsElement;
-    };
-    /**
-     * @description Tab content panel component that displays when its corresponding tab is selected
-     */
-    interface HTMLBcmTabsContentElement extends Components.BcmTabsContent, HTMLStencilElement {
-    }
-    var HTMLBcmTabsContentElement: {
-        prototype: HTMLBcmTabsContentElement;
-        new (): HTMLBcmTabsContentElement;
+    var HTMLBcmTabElement: {
+        prototype: HTMLBcmTabElement;
+        new (): HTMLBcmTabElement;
     };
-    /**
-     * @description Container component for tab triggers that includes the sliding indicator (inkbar)
-     */
-    interface HTMLBcmTabsListElement extends Components.BcmTabsList, HTMLStencilElement {
-    }
-    var HTMLBcmTabsListElement: {
-        prototype: HTMLBcmTabsListElement;
-        new (): HTMLBcmTabsListElement;
-    };
-    interface HTMLBcmTabsTriggerElementEventMap {
-        "bcmTabSelected": string;
+    interface HTMLBcmTabsElementEventMap {
+        "bcmTabChange": {
+    value: string;
+    previousValue: string;
+  };
     }
     /**
-     * @description Tab trigger component that functions as a clickable tab button
+     * Modern Tabs component with CSS-first approach
      */
-    interface HTMLBcmTabsTriggerElement extends Components.BcmTabsTrigger, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmTabsTriggerElementEventMap>(type: K, listener: (this: HTMLBcmTabsTriggerElement, ev: BcmTabsTriggerCustomEvent<HTMLBcmTabsTriggerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLBcmTabsElement extends Components.BcmTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmTabsTriggerElementEventMap>(type: K, listener: (this: HTMLBcmTabsTriggerElement, ev: BcmTabsTriggerCustomEvent<HTMLBcmTabsTriggerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmTabsTriggerElement: {
-        prototype: HTMLBcmTabsTriggerElement;
-        new (): HTMLBcmTabsTriggerElement;
+    var HTMLBcmTabsElement: {
+        prototype: HTMLBcmTabsElement;
+        new (): HTMLBcmTabsElement;
     };
     interface HTMLBcmTextElement extends Components.BcmText, HTMLStencilElement {
     }
@@ -2449,23 +3247,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 {
     }
@@ -2488,6 +3313,7 @@ declare global {
         "bcm-drawer": HTMLBcmDrawerElement;
         "bcm-dropdown": HTMLBcmDropdownElement;
         "bcm-dropdown-item": HTMLBcmDropdownItemElement;
+        "bcm-file-upload": HTMLBcmFileUploadElement;
         "bcm-input": HTMLBcmInputElement;
         "bcm-linked": HTMLBcmLinkedElement;
         "bcm-modal": HTMLBcmModalElement;
@@ -2495,14 +3321,12 @@ declare global {
         "bcm-popover": HTMLBcmPopoverElement;
         "bcm-radio": HTMLBcmRadioElement;
         "bcm-radio-group": HTMLBcmRadioGroupElement;
+        "bcm-segment": HTMLBcmSegmentElement;
         "bcm-segmented-picker": HTMLBcmSegmentedPickerElement;
-        "bcm-segmented-picker-option": HTMLBcmSegmentedPickerOptionElement;
         "bcm-shortcut": HTMLBcmShortcutElement;
         "bcm-switch": HTMLBcmSwitchElement;
+        "bcm-tab": HTMLBcmTabElement;
         "bcm-tabs": HTMLBcmTabsElement;
-        "bcm-tabs-content": HTMLBcmTabsContentElement;
-        "bcm-tabs-list": HTMLBcmTabsListElement;
-        "bcm-tabs-trigger": HTMLBcmTabsTriggerElement;
         "bcm-text": HTMLBcmTextElement;
         "bcm-textarea": HTMLBcmTextareaElement;
         "bcm-tooltip": HTMLBcmTooltipElement;
@@ -2956,62 +3780,126 @@ declare namespace LocalJSX {
         "status"?: ButtonStatus;
     }
     /**
-     * @description A checkbox component that allows users to select or deselect an option.
-     * It also supports an indeterminate state.
+     * @component BcmCheckbox
+     * @description A form-associated checkbox component representing a boolean choice.
+     * Integrates with native HTML forms via ElementInternals while supporting
+     * **three validation strategies** via `validation-mode`:
+     * - **`native`**
+     *   - Participates in native browser constraint validation.
+     *   - Sets the underlying input's `required`.
+     *   - Browser may show native validation bubbles when submit/reportValidity happens.
+     * - **`silent`**
+     *   - Does **not** set native `required` (prevents browser bubble).
+     *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+     * - **`none`**
+     *   - Value-only mode: submits value but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * - `touched` becomes true after first user interaction
+     * - `submitAttempted` becomes true when the parent form emits `submit`
+     * ## Value behavior
+     * - When checked → submits `value` (default: `"on"`).
+     * - When unchecked → submits no value (`null`).
+     * - When disabled → no submission and no validity participation.
+     * ## Shadow Parts
+     * - `checkbox`  → root container
+     * - `control`   → visual checkbox box
+     * - `icon`      → icon container (check or minus)
+     * - `label`     → label text
+     * - `caption`   → helper/error text (silent mode UI)
+     * - `input`     → hidden native input
+     * @example Basic usage
+     * <bcm-checkbox name="terms" required>
+     * I agree to the terms and conditions
+     * </bcm-checkbox>
+     * @example Silent validation (no native bubble)
+     * <form>
+     * <bcm-checkbox name="newsletter" required validation-mode="silent">
+     * Subscribe to newsletter
+     * </bcm-checkbox>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Value-only mode
+     * <bcm-checkbox name="analytics" validation-mode="none">
+     * Allow analytics
+     * </bcm-checkbox>
      */
     interface BcmCheckbox {
         /**
-          * Unique ID for the component. Automatically generated if not specified.
+          * Unique ID for the component. Automatically generated if not specified. Used to bind the visible label to the internal input.
           * @default generateId('bcm-checkbox')
          */
         "_id"?: string;
         /**
-          * Determines if the checkbox is checked
+          * Helper / error caption (silent mode UI)
+         */
+        "caption"?: string;
+        /**
+          * Checked state
           * @default false
          */
         "checked"?: boolean;
         /**
-          * Determines if the checkbox is disabled
+          * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Indicates if the checkbox is in an error state. This affects the visual styling of the component.
+          * Visual error state. - In `silent` mode this can be managed internally. - In other modes you can set it externally as well.
           * @default false
          */
         "error"?: boolean;
         /**
-          * Full width checkbox
+          * Makes checkbox occupy full width (if your styles support it).
           * @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.
+          * Indeterminate (mixed) state. Useful when a group selection is partially selected.
           * @default false
          */
         "indeterminate"?: boolean;
         /**
-          * Label text to display next to the checkbox
+          * Visible label text (optional). You can also use the default slot.
          */
         "label"?: string;
         /**
-          * Controls the position of the label relative to the checkbox
+          * Label position relative to the checkbox control.
           * @default 'right'
          */
         "labelPosition"?: 'left' | 'right';
         /**
-          * Name attribute for the checkbox when used in a form
+          * Form field name
          */
         "name"?: string;
         /**
-          * Event emitted when the checked state changes
+          * Fired whenever the checked state changes.
+         */
+        "onBcmCheckboxChange"?: (event: BcmCheckboxCustomEvent<{ element: HTMLInputElement; checked: boolean }>) => void;
+        /**
+          * Optional readonly support
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Required state
+          * @default false
          */
-        "onBcmCheckboxChange"?: (event: BcmCheckboxCustomEvent<{ element: any; checked: boolean }>) => void;
+        "required"?: boolean;
         /**
-          * Size variant of the checkbox
+          * Size variant (affects control + typography).
           * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
+        /**
+          * @default 'native'
+         */
+        "validationMode"?: 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
+         */
+        "value"?: string;
     }
     /**
      * @component BcmChip
@@ -3096,29 +3984,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;
@@ -3145,6 +4114,61 @@ declare namespace LocalJSX {
         "selected"?: boolean;
         "text"?: string;
     }
+    interface BcmFileUpload {
+        /**
+          * @default '.xls,.pdf'
+         */
+        "accept"?: string;
+        /**
+          * @default ''
+         */
+        "caption"?: string;
+        /**
+          * Allows consumers to override default error messages.
+         */
+        "customErrorMessages"?: BcmUploadErrorMessages;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Maximum number of files allowed in total. Only applied when `multiple` is true.
+         */
+        "maxFileCount"?: number;
+        /**
+          * @default 2
+         */
+        "maxSize"?: number;
+        /**
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * @default 'file'
+         */
+        "name"?: string;
+        "onBcmBlur"?: (event: BcmFileUploadCustomEvent<FocusEvent>) => void;
+        "onBcmFileChange"?: (event: BcmFileUploadCustomEvent<File[]>) => void;
+        "onBcmFileRemoved"?: (event: BcmFileUploadCustomEvent<BcmUploadItem>) => void;
+        "onBcmFocus"?: (event: BcmFileUploadCustomEvent<FocusEvent>) => void;
+        "onBcmUploadCanceled"?: (event: BcmFileUploadCustomEvent<BcmUploadItem>) => void;
+        /**
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * @default 'medium'
+         */
+        "size"?: 'medium' | 'small';
+        /**
+          * Reserved for future backend upload integration. Currently does not affect component behavior.
+         */
+        "uploadUrl"?: string;
+    }
     interface BcmInput {
         /**
           * Input id
@@ -3271,220 +4295,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 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 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;
         /**
-          * 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.
-         */
-        "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
@@ -3494,8 +4755,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
@@ -3503,29 +4765,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.
          */
-        "onBcmPopoverClose"?: (event: BcmPopoverCustomEvent<void>) => void;
+        "onBcmBeforeClose"?: (event: BcmPopoverCustomEvent<void>) => void;
         /**
-          * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened. Useful for tracking when the popover becomes visible.
+          * @event bcmBeforeOpen - Emitted before the popover opens. Useful for performing actions before the popover becomes visible.
          */
-        "onBcmPopoverOpen"?: (event: BcmPopoverCustomEvent<void>) => void;
+        "onBcmBeforeOpen"?: (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 bcmClose - Emitted when the popover is closed. Useful for tracking when the popover is hidden.
+         */
+        "onBcmClose"?: (event: BcmPopoverCustomEvent<void>) => void;
+        /**
+          * @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;
@@ -3534,18 +4819,27 @@ 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 {
+        /**
+          * @default generateId('bcm-radio')
+         */
+        "_id"?: string;
         /**
           * Whether the radio button is selected.
           * @prop 
@@ -3591,6 +4885,11 @@ declare namespace LocalJSX {
           * @defaultValue false
          */
         "readonly"?: boolean;
+        /**
+          * Whether at least one radio in this group is required. (HTML)
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * Defines the size of the radio button: 'small' | 'medium' | 'large'.
           * @prop 
@@ -3661,58 +4960,85 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface BcmSegmentedPicker {
+    /**
+     * Individual segment option component
+     */
+    interface BcmSegment {
+        /**
+          * Index of currently active segment (inherited from parent)
+          * @default 0
+         */
+        "activeIndex"?: number;
         /**
           * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Full width component
-          * @default false
+          * Index of this segment (inherited from parent)
+          * @default 0
          */
-        "fullWidth"?: boolean;
+        "index"?: number;
         /**
-          * Change event
+          * Internal event emitted when segment is clicked
          */
-        "onBcmChange"?: (event: BcmSegmentedPickerCustomEvent<{ value: string }>) => void;
+        "onBcmSegmentClick"?: (event: BcmSegmentCustomEvent<string>) => void;
         /**
-          * Controls the component size
+          * Selected state (controlled by parent)
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Size variant (inherited from parent)
           * @default 'medium'
          */
-        "size"?: SegmentedPickerSize;
+        "size"?: 'small' | 'medium' | 'large';
         /**
-          * The selected option value
+          * Unique identifier for this segment
          */
-        "value"?: string;
+        "value": string;
     }
-    interface BcmSegmentedPickerOption {
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface BcmSegmentedPicker {
         /**
-          * Whether this option is disabled
+          * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Option display label
+          * Full width flag
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Name attribute for form association
          */
-        "label"?: string;
+        "name"?: string;
         /**
-          * Click event
+          * Emits when selected segment changes
          */
-        "onBcmOptionClick"?: (event: BcmSegmentedPickerOptionCustomEvent<string>) => void;
+        "onBcmSegmentChange"?: (event: BcmSegmentedPickerCustomEvent<{ value: string; previousValue: string }>) => void;
         /**
-          * Whether this option is selected
+          * Whether this field is required in a form
           * @default false
          */
-        "selected"?: boolean;
+        "required"?: boolean;
         /**
-          * Controls the option size
+          * Enable shadow on container
+          * @default false
          */
-        "size"?: SegmentedPickerSize;
+        "shadow"?: boolean;
         /**
-          * Option value
+          * Size variant
+          * @default 'medium'
          */
-        "value": string;
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Selected segment value
+         */
+        "value"?: string;
     }
     interface BcmShortcut {
         "hotkey"?: string;
@@ -3723,178 +5049,181 @@ declare namespace LocalJSX {
     }
     /**
      * @component BcmSwitch
-     * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-     * Supports different sizes, label positions, error states, and accessibility features.
+     * @description A form-associated toggle switch component representing a boolean choice.
+     * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+     * This component supports **three validation strategies** via `validation-mode`:
+     * - **`native`**:
+     *   - Uses native browser constraint validation.
+     *   - Sets the underlying input's `required` attribute.
+     *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+     * - **`silent`**:
+     *   - Does **not** rely on native `required` (prevents the browser bubble).
+     *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+     * - **`none`**:
+     *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * To avoid showing errors on initial render, the component tracks:
+     * - `touched`: set after the first user interaction
+     * - `submitAttempted`: set when the parent form emits `submit`
+     * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+     * ## Value behavior
+     * - When checked, the component submits its `value` (default: `"on"`).
+     * - When unchecked, no value is submitted.
+     * - When disabled, the component does not participate in submission or validity.
      * @example Basic usage
-     * <bcm-switch label="Enable notifications"></bcm-switch>
-     * @example With error state
+     * <bcm-switch name="newsletter" label="Receive newsletter?" />
+     * @example Required with silent validation (no native bubble)
+     * <form>
      * <bcm-switch
+     * name="terms"
      * label="Accept terms"
-     * error={true}
-     * caption="You must accept the terms to continue">
-     * </bcm-switch>
-     * @example Disabled state
-     * <bcm-switch
-     * label="Advanced features"
-     * disabled={true}>
-     * </bcm-switch>
-     * @example With custom size and label position
-     * <bcm-switch
-     * label="Dark mode"
-     * size="large"
-     * labelPosition="left">
+     * required
+     * validation-mode="silent">
      * </bcm-switch>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Native validation mode (may show native bubble)
+     * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+     * @example Value-only mode (no validation)
+     * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+     * @csspart base - Root container
+     * @csspart switch-wrapper - Wrapper containing label + track
+     * @csspart input - Hidden native input
+     * @csspart label - Text label
+     * @csspart dot-container - Switch track
+     * @csspart dot - Switch knob
+     * @csspart caption - Helper/error text
      */
     interface BcmSwitch {
         /**
-          * Text to display as an error message when error is true
+          * Unique id (optional). Generated by default.
+          * @default generateId('bcm-switch')
+         */
+        "_id"?: string;
+        /**
+          * Helper / error text shown under the switch
          */
         "caption"?: string;
         /**
-          * Whether the switch is checked or not
+          * Checked state
           * @default false
          */
         "checked"?: boolean;
         /**
-          * Whether the switch is disabled
+          * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Whether to display the switch in an error state
+          * Visual error state (manual/external). In silent mode this can be auto-managed.
           * @default false
          */
         "error"?: boolean;
         /**
-          * Text label for the switch
+          * Visible label text
          */
-        "label"?: string;
+        "label": string;
         /**
           * Position of the label relative to the switch
           * @default 'right'
          */
         "labelPosition"?: 'left' | 'right';
         /**
-          * The name attribute for the hidden input element
+          * Form field name
          */
         "name"?: string;
         /**
-          * Emitted when the switch state changes
+          * Emitted when the switch toggles
          */
         "onBcmSwitchChange"?: (event: BcmSwitchCustomEvent<boolean>) => void;
         /**
-          * Whether the switch is in readonly mode
+          * Optional readonly support
           * @default false
          */
         "readonly"?: boolean;
         /**
-          * Whether the switch is required in a form
+          * Required state
           * @default false
          */
         "required"?: boolean;
         /**
-          * Size variant of the switch
+          * Size variant
           * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
-          * The value attribute for the hidden input element
+          * @default 'native'
+         */
+        "validationMode"?: 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
          */
         "value"?: string;
     }
     /**
-     * @description Tab interface component
+     * Individual tab component - self-contained with label and content panel
      */
-    interface BcmTabs {
-        /**
-          * Default active tab value
-         */
-        "defaultValue"?: string;
-        /**
-          * Triggers when tab changes
-         */
-        "onBcmTabChange"?: (event: BcmTabsCustomEvent<{
-    activeTab: string;
-    element: HTMLBcmTabsTriggerElement;
-    previousTab?: string;
-  }>) => void;
+    interface BcmTab {
         /**
-          * Tab size
-          * @default 'medium'
+          * Active state (controlled by parent)
+          * @default false
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "active"?: boolean;
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Disabled state
+          * @default false
          */
-        "smooth"?: boolean;
+        "disabled"?: boolean;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Label text to display in tab button
          */
-        "variant"?: 'full-width' | 'auto-width';
-    }
-    /**
-     * @description Tab content panel component that displays when its corresponding tab is selected
-     */
-    interface BcmTabsContent {
+        "label": string;
         /**
-          * Unique identifier that matches a tab trigger's value Used to associate this content with its corresponding tab
+          * Internal event emitted when tab button is clicked
          */
-        "value"?: string;
-    }
-    /**
-     * @description Container component for tab triggers that includes the sliding indicator (inkbar)
-     */
-    interface BcmTabsList {
+        "onBcmTabClick"?: (event: BcmTabCustomEvent<string>) => void;
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Size variant (inherited from parent)
+          * @default 'md'
          */
-        "smooth"?: boolean;
+        "size"?: 'sm' | 'md' | 'lg';
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Unique identifier for this tab
          */
-        "variant"?: 'full-width' | 'auto-width';
+        "value": string;
     }
     /**
-     * @description Tab trigger component that functions as a clickable tab button
+     * Modern Tabs component with CSS-first approach
      */
-    interface BcmTabsTrigger {
+    interface BcmTabs {
         /**
-          * Whether the tab is currently active
-          * @default false
+          * Emits when active tab changes
          */
-        "active"?: boolean;
+        "onBcmTabChange"?: (event: BcmTabsCustomEvent<{
+    value: string;
+    previousValue: string;
+  }>) => void;
         /**
-          * Whether the tab is disabled
+          * Enable shadow on main container
           * @default false
          */
-        "disabled"?: boolean;
-        /**
-          * Event emitted when this tab is selected
-         */
-        "onBcmTabSelected"?: (event: BcmTabsTriggerCustomEvent<string>) => void;
-        /**
-          * Size of the tab
-          * @default 'medium'
-         */
-        "size"?: 'small' | 'medium' | 'large';
+        "shadow"?: boolean;
         /**
-          * Whether to enable smooth animations for transitions
-          * @default true
+          * Tab size variant
+          * @default 'md'
          */
-        "smooth"?: boolean;
+        "size"?: 'sm' | 'md' | 'lg';
         /**
-          * Unique identifier value for the tab
+          * Active tab value
          */
         "value"?: string;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Visual variant
+          * @default 'line'
          */
-        "variant"?: 'full-width' | 'auto-width';
+        "variant"?: 'line' | 'enclosed';
     }
     interface BcmText {
         /**
@@ -4039,49 +5368,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;
@@ -4098,6 +5479,7 @@ declare namespace LocalJSX {
         "bcm-drawer": BcmDrawer;
         "bcm-dropdown": BcmDropdown;
         "bcm-dropdown-item": BcmDropdownItem;
+        "bcm-file-upload": BcmFileUpload;
         "bcm-input": BcmInput;
         "bcm-linked": BcmLinked;
         "bcm-modal": BcmModal;
@@ -4105,14 +5487,12 @@ declare namespace LocalJSX {
         "bcm-popover": BcmPopover;
         "bcm-radio": BcmRadio;
         "bcm-radio-group": BcmRadioGroup;
+        "bcm-segment": BcmSegment;
         "bcm-segmented-picker": BcmSegmentedPicker;
-        "bcm-segmented-picker-option": BcmSegmentedPickerOption;
         "bcm-shortcut": BcmShortcut;
         "bcm-switch": BcmSwitch;
+        "bcm-tab": BcmTab;
         "bcm-tabs": BcmTabs;
-        "bcm-tabs-content": BcmTabsContent;
-        "bcm-tabs-list": BcmTabsList;
-        "bcm-tabs-trigger": BcmTabsTrigger;
         "bcm-text": BcmText;
         "bcm-textarea": BcmTextarea;
         "bcm-tooltip": BcmTooltip;
@@ -4258,8 +5638,49 @@ declare module "@stencil/core" {
             "bcm-button": LocalJSX.BcmButton & JSXBase.HTMLAttributes<HTMLBcmButtonElement>;
             "bcm-button-group": LocalJSX.BcmButtonGroup & JSXBase.HTMLAttributes<HTMLBcmButtonGroupElement>;
             /**
-             * @description A checkbox component that allows users to select or deselect an option.
-             * It also supports an indeterminate state.
+             * @component BcmCheckbox
+             * @description A form-associated checkbox component representing a boolean choice.
+             * Integrates with native HTML forms via ElementInternals while supporting
+             * **three validation strategies** via `validation-mode`:
+             * - **`native`**
+             *   - Participates in native browser constraint validation.
+             *   - Sets the underlying input's `required`.
+             *   - Browser may show native validation bubbles when submit/reportValidity happens.
+             * - **`silent`**
+             *   - Does **not** set native `required` (prevents browser bubble).
+             *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+             *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+             * - **`none`**
+             *   - Value-only mode: submits value but never becomes invalid.
+             * ## UI error gating (silent mode)
+             * - `touched` becomes true after first user interaction
+             * - `submitAttempted` becomes true when the parent form emits `submit`
+             * ## Value behavior
+             * - When checked → submits `value` (default: `"on"`).
+             * - When unchecked → submits no value (`null`).
+             * - When disabled → no submission and no validity participation.
+             * ## Shadow Parts
+             * - `checkbox`  → root container
+             * - `control`   → visual checkbox box
+             * - `icon`      → icon container (check or minus)
+             * - `label`     → label text
+             * - `caption`   → helper/error text (silent mode UI)
+             * - `input`     → hidden native input
+             * @example Basic usage
+             * <bcm-checkbox name="terms" required>
+             * I agree to the terms and conditions
+             * </bcm-checkbox>
+             * @example Silent validation (no native bubble)
+             * <form>
+             * <bcm-checkbox name="newsletter" required validation-mode="silent">
+             * Subscribe to newsletter
+             * </bcm-checkbox>
+             * <button type="submit">Submit</button>
+             * </form>
+             * @example Value-only mode
+             * <bcm-checkbox name="analytics" validation-mode="none">
+             * Allow analytics
+             * </bcm-checkbox>
              */
             "bcm-checkbox": LocalJSX.BcmCheckbox & JSXBase.HTMLAttributes<HTMLBcmCheckboxElement>;
             /**
@@ -4291,72 +5712,259 @@ 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-file-upload": LocalJSX.BcmFileUpload & JSXBase.HTMLAttributes<HTMLBcmFileUploadElement>;
             "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 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>
+             * ```
              */
             "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
@@ -4366,8 +5974,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
@@ -4377,71 +5986,120 @@ declare module "@stencil/core" {
             "bcm-popover": LocalJSX.BcmPopover & JSXBase.HTMLAttributes<HTMLBcmPopoverElement>;
             "bcm-radio": LocalJSX.BcmRadio & JSXBase.HTMLAttributes<HTMLBcmRadioElement>;
             "bcm-radio-group": LocalJSX.BcmRadioGroup & JSXBase.HTMLAttributes<HTMLBcmRadioGroupElement>;
+            /**
+             * Individual segment option component
+             */
+            "bcm-segment": LocalJSX.BcmSegment & JSXBase.HTMLAttributes<HTMLBcmSegmentElement>;
+            /**
+             * Modern Segmented Picker component with CSS Grid-based indicator
+             */
             "bcm-segmented-picker": LocalJSX.BcmSegmentedPicker & JSXBase.HTMLAttributes<HTMLBcmSegmentedPickerElement>;
-            "bcm-segmented-picker-option": LocalJSX.BcmSegmentedPickerOption & JSXBase.HTMLAttributes<HTMLBcmSegmentedPickerOptionElement>;
             "bcm-shortcut": LocalJSX.BcmShortcut & JSXBase.HTMLAttributes<HTMLBcmShortcutElement>;
             /**
              * @component BcmSwitch
-             * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-             * Supports different sizes, label positions, error states, and accessibility features.
+             * @description A form-associated toggle switch component representing a boolean choice.
+             * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+             * This component supports **three validation strategies** via `validation-mode`:
+             * - **`native`**:
+             *   - Uses native browser constraint validation.
+             *   - Sets the underlying input's `required` attribute.
+             *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+             * - **`silent`**:
+             *   - Does **not** rely on native `required` (prevents the browser bubble).
+             *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+             *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+             * - **`none`**:
+             *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+             * ## UI error gating (silent mode)
+             * To avoid showing errors on initial render, the component tracks:
+             * - `touched`: set after the first user interaction
+             * - `submitAttempted`: set when the parent form emits `submit`
+             * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+             * ## Value behavior
+             * - When checked, the component submits its `value` (default: `"on"`).
+             * - When unchecked, no value is submitted.
+             * - When disabled, the component does not participate in submission or validity.
              * @example Basic usage
-             * <bcm-switch label="Enable notifications"></bcm-switch>
-             * @example With error state
+             * <bcm-switch name="newsletter" label="Receive newsletter?" />
+             * @example Required with silent validation (no native bubble)
+             * <form>
              * <bcm-switch
+             * name="terms"
              * label="Accept terms"
-             * error={true}
-             * caption="You must accept the terms to continue">
-             * </bcm-switch>
-             * @example Disabled state
-             * <bcm-switch
-             * label="Advanced features"
-             * disabled={true}>
-             * </bcm-switch>
-             * @example With custom size and label position
-             * <bcm-switch
-             * label="Dark mode"
-             * size="large"
-             * labelPosition="left">
+             * required
+             * validation-mode="silent">
              * </bcm-switch>
+             * <button type="submit">Submit</button>
+             * </form>
+             * @example Native validation mode (may show native bubble)
+             * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+             * @example Value-only mode (no validation)
+             * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+             * @csspart base - Root container
+             * @csspart switch-wrapper - Wrapper containing label + track
+             * @csspart input - Hidden native input
+             * @csspart label - Text label
+             * @csspart dot-container - Switch track
+             * @csspart dot - Switch knob
+             * @csspart caption - Helper/error text
              */
             "bcm-switch": LocalJSX.BcmSwitch & JSXBase.HTMLAttributes<HTMLBcmSwitchElement>;
             /**
-             * @description Tab interface component
-             */
-            "bcm-tabs": LocalJSX.BcmTabs & JSXBase.HTMLAttributes<HTMLBcmTabsElement>;
-            /**
-             * @description Tab content panel component that displays when its corresponding tab is selected
+             * Individual tab component - self-contained with label and content panel
              */
-            "bcm-tabs-content": LocalJSX.BcmTabsContent & JSXBase.HTMLAttributes<HTMLBcmTabsContentElement>;
+            "bcm-tab": LocalJSX.BcmTab & JSXBase.HTMLAttributes<HTMLBcmTabElement>;
             /**
-             * @description Container component for tab triggers that includes the sliding indicator (inkbar)
+             * Modern Tabs component with CSS-first approach
              */
-            "bcm-tabs-list": LocalJSX.BcmTabsList & JSXBase.HTMLAttributes<HTMLBcmTabsListElement>;
-            /**
-             * @description Tab trigger component that functions as a clickable tab button
-             */
-            "bcm-tabs-trigger": LocalJSX.BcmTabsTrigger & JSXBase.HTMLAttributes<HTMLBcmTabsTriggerElement>;
+            "bcm-tabs": LocalJSX.BcmTabs & JSXBase.HTMLAttributes<HTMLBcmTabsElement>;
             "bcm-text": LocalJSX.BcmText & JSXBase.HTMLAttributes<HTMLBcmTextElement>;
             "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>;
         }