/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AccordionChangeEventType } from "./components/accordion/types";
import { AccordionGroupChangeEventType } from "./components/accordion-group/types";
import { AlertKind, AlertSize, AlertStatus } from "./components/alert/types";
import { AttendanceItem } from "./components/attendance/attendance.component";
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 { 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";
export { AttendanceItem } from "./components/attendance/attendance.component";
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 { 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
     * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation
     * and accessibility features. Offers customizable header, content, and footer areas through slots.
     * @example Basic usage
     * <bcm-accordion>
     * <div slot="title">Accordion Title</div>
     * <div>Content goes here</div>
     * </bcm-accordion>
     * @example With all slots and hint text
     * <bcm-accordion hint-text="Additional information">
     * <div slot="title">Title</div>
     * <div slot="actions">
     * <button>Action</button>
     * </div>
     * <div>Main content</div>
     * <div slot="footer">Footer content</div>
     * </bcm-accordion>
     * @example Event handling
     * // Listen to accordion state changes
     * const accordion = document.querySelector('bcm-accordion');
     * accordion.addEventListener('bcmAccordionChange', (event) => {
     * const { expanded, source } = event.detail;
     * console.log('Accordion expanded:', expanded);
     * console.log('Changed accordion:', source);
     * });
     * // Programmatically control accordion
     * await accordion.toggle(); // Toggle state
     * await accordion.expand(); // Expand accordion
     * await accordion.collapse(); // Collapse accordion
     * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)
     * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)
     * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided
     * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes
     * @eventProperty {boolean} expanded - Current expanded state
     * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed
     * @csspart container - The root container element
     * @csspart header - The header section with title and actions
     * @csspart content - The collapsible content section
     * @csspart footer - The footer section with hint text or footer slot
     * @csspart section - Container for header content sections
     * @csspart icon - The expand/collapse chevron icon
     * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)
     * @css {string} --bcm-accordion-bg - Background color of the accordion header
     * @css {string} --bcm-accordion-text - Text color of the accordion
     * @css {string} --bcm-accordion-footer-bg - Background color of the footer section
     * @methods toggle() - Toggles the accordion's expanded state
     * expand() - Expands the accordion if collapsed
     * collapse() - Collapses the accordion if expanded
     */
    interface BcmAccordion {
        /**
          * Collapses the accordion if it's currently expanded.
          * @method 
          * @returns Promise<void>
         */
        "collapse": () => Promise<void>;
        /**
          * Expands the accordion if it's not already expanded.
          * @method 
          * @returns Promise<void>
         */
        "expand": () => Promise<void>;
        /**
          * Controls whether the accordion is expanded or collapsed.
          * @prop 
          * @defaultValue false
         */
        "expanded": boolean;
        /**
          * Indicates if the accordion is part of a group. Used for group behavior coordination.
          * @prop 
          * @defaultValue false
         */
        "group": boolean;
        /**
          * Optional title text to display in the header.
          * @prop 
          * @defaultValue undefined
         */
        "headerTitle"?: string;
        /**
          * Optional text to display in the footer when no footer slot content is provided.
          * @prop
         */
        "hintText"?: string;
        /**
          * Toggles the accordion's expanded state.
          * @method 
          * @returns Promise<void>
         */
        "toggle": () => Promise<void>;
    }
    /**
     * @component BcmAccordionGroup
     * @description A container component that manages a group of accordions. Provides single/multiple expansion 
     * modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.
     * @example Basic usage - Single expansion mode
     * <bcm-accordion-group>
     * <bcm-accordion>
     * <div slot="title">Section 1</div>
     * <div>Content 1</div>
     * </bcm-accordion>
     * <bcm-accordion>
     * <div slot="title">Section 2</div>
     * <div>Content 2</div>
     * </bcm-accordion>
     * </bcm-accordion-group>
     * @example Multiple expansion mode
     * <bcm-accordion-group multi={true}>
     * <bcm-accordion>...</bcm-accordion>
     * <bcm-accordion>...</bcm-accordion>
     * </bcm-accordion-group>
     * @example Event handling
     * // Listen to accordion group changes
     * const accordionGroup = document.querySelector('bcm-accordion-group');
     * accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {
     * const { expanded, changed, expandedItems, expandedCount } = event.detail;
     * console.log('Accordion expanded state:', expanded);
     * console.log('Changed accordion:', changed);
     * console.log('Currently expanded accordions:', expandedItems);
     * console.log('Number of expanded accordions:', expandedCount);
     * });
     * // Using methods
     * await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)
     * await accordionGroup.collapseAll(); // Collapses all accordions
     * const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions
     * @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)
     * @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes
     * @eventProperty {boolean} expanded - Current expanded state of the changed accordion
     * @eventProperty {HTMLElement} changed - The accordion element that triggered the change
     * @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements
     * @eventProperty {number} expandedCount - Number of currently expanded accordions
     * @method expandAll() - Expands all accordions (only available in multi mode)
     * @method collapseAll() - Collapses all accordions
     * @method getExpandedItems() - Returns array of currently expanded accordions
     * @csspart container - The accordion group container element
     * @css {string} --bcm-accordion-border - Border color of the accordion group
     * @css {string} --bcm-accordion-radius - Border radius of the accordion group
     */
    interface BcmAccordionGroup {
        /**
          * Collapses all accordions in the group
         */
        "collapseAll": () => Promise<void>;
        /**
          * Expands all accordions in the group Only available when multi=true
         */
        "expandAll": () => Promise<void>;
        /**
          * Returns an array of currently expanded accordion elements
         */
        "getExpandedItems": () => Promise<HTMLBcmAccordionElement[]>;
        /**
          * Controls whether multiple accordions can be expanded simultaneously
          * @default false
         */
        "multi": boolean;
    }
    /**
     * Alert component that displays messages with different statuses and styles
     * @class BcmAlert
     */
    interface BcmAlert {
        /**
          * Whether alert can be dismissed
          * @default true
         */
        "dismissible"?: boolean;
        /**
          * Alert style variant
          * @default 'filled'
         */
        "kind"?: AlertKind;
        /**
          * Whether to show status icon
          * @default true
         */
        "showStatusIcon"?: boolean;
        /**
          * Alert size variant
          * @default 'medium'
         */
        "size"?: AlertSize;
        /**
          * Alert status type
          * @default 'default'
         */
        "status"?: AlertStatus;
    }
    /**
     * @component BcmAttendance
     * @description Visualizes attendance history (AM/PM status) for a series of days.
     * Supports different status types (present, late, absent, etc.) with color-coded indicators.
     * Can handle data via JSON string or direct object array.
     * @example Basic usage
     * <bcm-attendance data='[{"weekday":"Mon", "am":"present", "pm":"absent"}]'></bcm-attendance>
     * @example With specific statuses
     * <bcm-attendance data='[
     * {"weekday":"Mon", "am":"present", "pm":"present"},
     * {"weekday":"Tue", "am":"late", "pm":"present"}
     * ]'></bcm-attendance>
     */
    interface BcmAttendance {
        /**
          * Data for attendance items to be displayed. Can be passed as a JSON string (HTML attribute) or a JavaScript Array (Property).  Format: Array of objects with `weekday`, `am`, and `pm` properties. Status values: 'present', 'late', 'absent', 'other', 'default'.
          * @type {string | AttendanceItem[]}
          * @default []
         */
        "data": string | AttendanceItem[];
    }
    interface BcmAvatar {
        /**
          * Alternative text for image
         */
        "alt": string;
        /**
          * Status indicator animation
          * @default false
         */
        "blink": boolean;
        /**
          * Custom background color
         */
        "color": string;
        /**
          * Fallback icon class
          * @default 'fas fa-user'
         */
        "icon": string;
        /**
          * Source URL for avatar image
         */
        "image": string;
        /**
          * Display name (used for initials)
         */
        "name": string;
        /**
          * Shape of the avatar (ellipse/square)
          * @default 'ellipse'
         */
        "shape": AvatarShape;
        /**
          * Size of the avatar
          * @default 'medium'
         */
        "size": AvatarSize;
        /**
          * Status indicator type
         */
        "status": AvatarStatus;
    }
    /**
     * @component BcmBadge
     * @description A versatile badge component that can be positioned around its container.
     * Supports different sizes, variants (dot/text), colors, and positioning options.
     * Can display status indicators with optional blinking animation.
     * @example Basic usage
     * <bcm-badge color="primary" position="top-right">
     * <div>Container Content</div>
     * <span slot="badge">New</span>
     * </bcm-badge>
     * @example Status indicator with blink
     * <bcm-badge variant="dot" color="success" blink={true} status="Online">
     * <div>User Profile</div>
     * </bcm-badge>
     */
    interface BcmBadge {
        /**
          * Enables blinking animation for the badge. Useful for drawing attention or indicating active status.
          * @type {boolean}
          * @default false
         */
        "blink": boolean;
        /**
          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
          * @type {string}
          * @optional
         */
        "color"?: string;
        /**
          * Fine-tune the badge position with custom offset. Format: "x,y" in pixels (e.g., "10,-5")
          * @type {string}
          * @optional
         */
        "offset": string;
        /**
          * Sets the position of the badge relative to its container.
          * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
          * @default 'top-right'
         */
        "position": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
        /**
          * Determines the size of the badge.
          * @type {'small' | 'medium' | 'large'}
          * @default 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
          * @type {boolean}
          * @default false
         */
        "soft": boolean;
        /**
          * Status message for accessibility purposes. Will be read by screen readers.
          * @type {string}
          * @optional
         */
        "status"?: string;
        /**
          * Text to be displayed inside the badge. Used when variant is set to 'text'. Can be overridden using the "badge" slot.
          * @type {string}
          * @optional
         */
        "text"?: string;
        /**
          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
          * @type {'dot' | 'text'}
          * @default 'text'
         */
        "variant": 'dot' | 'text';
    }
    /**
     * @component BcmBasicBadge
     * @description A basic badge component that can be used as a status indicator or to highlight content.
     * Supports dot and text variants with different sizes and color options.
     * @example Basic usage
     * <bcm-basic-badge size="medium" color="primary">
     * New
     * </bcm-basic-badge>
     * @example Dot variant
     * <bcm-basic-badge variant="dot" color="success" />
     */
    interface BcmBasicBadge {
        /**
          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
          * @type {string}
          * @optional
         */
        "color"?: string;
        /**
          * Determines the size of the badge.
          * @type {'small' | 'medium' | 'large'}
          * @default 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
          * @type {boolean}
          * @default false
         */
        "soft": boolean;
        /**
          * Text to be displayed inside the badge. Used when variant is set to 'text'.
          * @type {string}
          * @optional
         */
        "text"?: string;
        /**
          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
          * @type {'dot' | 'text'}
          * @default 'text'
         */
        "variant": 'dot' | 'text';
    }
    interface BcmButton {
        /**
          * Active state
          * @default false
         */
        "active": boolean;
        /**
          * ID of controlled element
         */
        "controls": string;
        /**
          * Disabled state
          * @default false
         */
        "disabled": boolean;
        /**
          * Expanded state for expandable content
         */
        "expanded"?: string;
        /**
          * Form association
         */
        "form": string;
        /**
          * Full width button
          * @default false
         */
        "fullWidth": boolean;
        /**
          * Icon class name
         */
        "icon"?: string;
        /**
          * Icon-only button mode
          * @default false
         */
        "iconOnly": boolean;
        /**
          * Icon placement (prefix/suffix)
          * @default 'prefix'
         */
        "iconPosition": IconPosition;
        /**
          * Defines the main visual style of the button
          * @default 'primary'
         */
        "kind": ButtonKind;
        /**
          * Screen reader label
         */
        "label": string;
        /**
          * Loading state
          * @default false
         */
        "loading": boolean;
        "name": string;
        /**
          * Button position in button group (first, middle, last)
         */
        "position"?: ButtonPosition;
        /**
          * Controls the button size
          * @default 'medium'
         */
        "size": ButtonSize;
        /**
          * Defines the button's status/state color
          * @default 'default'
         */
        "status": ButtonStatus;
        /**
          * Button text content
         */
        "text"?: string;
        /**
          * HTML button type
          * @default 'button'
         */
        "type": ButtonType;
        "value": string;
        /**
          * Predefined button variants
         */
        "variant"?: ButtonVariant;
    }
    interface BcmButtonGroup {
        /**
          * Disabled state
         */
        "disabled"?: boolean;
        /**
          * Full width buttons
         */
        "fullWidth"?: boolean;
        /**
          * Defines the main visual style of buttons
         */
        "kind"?: ButtonKind;
        /**
          * Loading state
         */
        "loading"?: boolean;
        /**
          * Button orientation
          * @default 'horizontal'
         */
        "orientation": 'horizontal' | 'vertical';
        /**
          * Controls the button size
         */
        "size"?: ButtonSize;
        /**
          * Defines the button's status/state color
         */
        "status"?: ButtonStatus;
    }
    /**
     * @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. Used to bind the visible label to the internal input.
          * @default generateId('bcm-checkbox')
         */
        "_id"?: string;
        /**
          * Helper / error caption (silent mode UI)
         */
        "caption"?: string;
        /**
          * Checked state
          * @default false
         */
        "checked": boolean;
        /**
          * Disabled state
          * @default false
         */
        "disabled": boolean;
        /**
          * 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;
        /**
          * Makes checkbox occupy full width (if your styles support it).
          * @default false
         */
        "fullWidth": boolean;
        /**
          * Indeterminate (mixed) state. Useful when a group selection is partially selected.
          * @default false
         */
        "indeterminate": boolean;
        /**
          * Visible label text (optional). You can also use the default slot.
         */
        "label"?: string;
        /**
          * Label position relative to the checkbox control.
          * @default 'right'
         */
        "labelPosition": 'left' | 'right';
        /**
          * Form field name
         */
        "name"?: string;
        /**
          * Optional readonly support
          * @default false
         */
        "readonly": boolean;
        /**
          * 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
     * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.
     * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.
     * @example <bcm-chip size="medium" kind="filled" status="success">
     *   Success Chip
     * </bcm-chip>
     * @example Dismissible chip
     * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>
     * Dismissible Chip
     * </bcm-chip>
     * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
     * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
     * @prop {boolean} dismissible - Whether the chip can be dismissed
     * @prop {boolean} disabled - Whether the chip is disabled
     * @prop {string} color - Custom color override for the chip
     * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked
     * @csspart chip - The root chip element
     * @csspart dismiss-icon - The dismiss button icon
     */
    interface BcmChip {
        /**
          * Chip color variant
         */
        "color"?: string;
        /**
          * Whether chip is disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Whether chip can be dismissed
          * @default false
         */
        "dismissible"?: boolean;
        /**
          * Chip style variant
          * @default 'filled'
         */
        "kind"?: ChipKind;
        /**
          * Chip size variant
          * @default 'medium'
         */
        "size"?: ChipSize;
        /**
          * Chip status
          * @default 'default'
         */
        "status"?: ChipStatus;
    }
    /**
     * @component BCM Divider
     * @description A versatile divider component that creates a visual separation between content.
     * It supports horizontal or vertical orientation with customizable styles and sizes.
     * The component uses CSS variables for theming and Tailwind for styling.
     */
    interface BcmDivider {
        /**
          * @prop {('horizontal'|'vertical')} direction
          * @description Determines the orientation of the divider
          * @default 'horizontal'
          * @example <bcm-divider direction="vertical" />
         */
        "direction": 'horizontal' | 'vertical';
        /**
          * @prop {('small'|'medium'|'large')} size
          * @description Controls the thickness of the divider
          * @default 'medium'
          * @values - small: 1px border - medium: 2px border - large: 4px border
          * @example <bcm-divider size="large" />
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * @prop {('solid'|'dashed'|'dotted')} variant
          * @description Sets the border style of the divider
          * @default 'solid'
          * @example <bcm-divider variant="dashed" />
         */
        "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;
    }
    interface BcmDropdownItem {
        /**
          * @default false
         */
        "disabled": boolean;
        /**
          * @default false
         */
        "error": boolean;
        "icon": string;
        "rightIcons": string[];
        /**
          * @default false
         */
        "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
          * @default generateId('input')
         */
        "_id"?: string;
        /**
          * Input autocomplete attribute
         */
        "autocomplete"?: string;
        /**
          * Caption text to display below input
         */
        "captionText"?: string;
        /**
          * ID of associated caption/error text element
         */
        "describedby"?: string;
        /**
          * Whether the input is disabled
          * @default false
         */
        "disabled": boolean;
        /**
          * Error message to display
         */
        "errorMessage"?: string;
        /**
          * Full width input
          * @default false
         */
        "fullWidth": boolean;
        /**
          * Input label for accessibility
         */
        "label"?: string;
        /**
          * ID of associated label element
         */
        "labelledby"?: string;
        /**
          * Max value for number input
         */
        "max"?: number;
        /**
          * Max length for text input
         */
        "maxLength"?: number;
        /**
          * Min value for number input
         */
        "min"?: number;
        /**
          * Min length for text input
         */
        "minLength"?: number;
        /**
          * Input name
         */
        "name"?: string;
        /**
          * Pattern for validation
         */
        "pattern"?: string;
        /**
          * Input placeholder text
         */
        "placeholder"?: string;
        /**
          * Prefix icon class name
         */
        "prefixIcon"?: string;
        /**
          * Whether the input is readonly
          * @default false
         */
        "readonly": boolean;
        /**
          * Whether the input is required
          * @default false
         */
        "required": boolean;
        "select": () => Promise<void>;
        "setBlur": () => Promise<void>;
        "setFocus": () => Promise<void>;
        /**
          * Sets locale and messages for all inputs
         */
        "setLocale": (locale: string, messages: Record<string, string>) => Promise<void>;
        /**
          * Controls the input size
          * @default 'medium'
         */
        "size": InputSize;
        /**
          * Defines the input's status/state
          * @default 'default'
         */
        "status": InputStatus;
        /**
          * Step value for number input
         */
        "step"?: number;
        /**
          * Suffix icon class name
         */
        "suffixIcon"?: string;
        /**
          * HTML input type
          * @default 'text'
         */
        "type": InputType;
        /**
          * Whether to use native form validation If false, component will handle validation internally
          * @default true
         */
        "useNativeValidation": boolean;
        /**
          * Custom validation function
         */
        "validator"?: (value: string) => string | undefined;
        /**
          * Input value
          * @default ''
         */
        "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 {
        /**
          * @prop {boolean} closeOnEscape - Whether to close when pressing Escape key. Default: true
          * @default true
         */
        "closeOnEscape": boolean;
        /**
          * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside. Default: true
          * @default true
         */
        "closeOnOutsideClick": boolean;
        /**
          * @prop {boolean} disabled - Disables the floating element, preventing it from showing. Default: false
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically hides the floating element. Respects the hideDelay prop.
         */
        "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
         */
        "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;
        /**
          * 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;
        /**
          * 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
         */
        "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 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 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();
     * });
     * 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 {
        /**
          * @prop {string} cancelText - Text for the cancel button. Default: 'Cancel'
          * @default 'Cancel'
         */
        "cancelText": string;
        /**
          * @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;
        /**
          * @prop {string} description - Description text displayed in the body section. Can be overridden by using the 'body' slot. Default: ''
          * @default ''
         */
        "description": string;
        /**
          * @prop {string} headerText - Text displayed in the header section. Can be overridden by using the 'header' slot. Default: ''
          * @default ''
         */
        "headerText": string;
        /**
          * Programmatically hides the popconfirm.
          * @returns Promise that resolves when the hide operation begins
         */
        "hide": () => Promise<void>;
        /**
          * @prop {number} offsetDistance - Distance in pixels between the popover and trigger element. Default: 12
          * @default 12
         */
        "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 popconfirm.
          * @returns Promise that resolves when the show operation begins
         */
        "show": () => Promise<void>;
        /**
          * @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": PopConfirmSize;
        /**
          * @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": PopConfirmStatus;
        /**
          * @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;
        /**
          * Toggles the popconfirm visibility. If open, it will close. If closed, it will open.
          * @returns Promise that resolves when the toggle operation completes
         */
        "toggle": () => Promise<void>;
    }
    /**
     * @component BcmPopover
     * @description A flexible popover component that displays contextual information or content relative to a target element.
     * 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 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
     * <bcm-popover id="my-popover" trigger="click">
     * <bcm-button>Toggle Me</bcm-button>
     * <span slot="content">Controlled popover</span>
     * </bcm-popover>
     * <script>
     * const popover = document.querySelector('#my-popover');
     * popover.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
     * @csspart content - The content section of the popover, stylable for the main content area
     * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
     */
    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;
        /**
          * Programmatically hides the popover. Respects the hideDelay prop.
         */
        "hide": () => Promise<void>;
        /**
          * @prop {number} hideDelay - Delay in milliseconds before hiding the popover. Provides a grace period for mouse movements. Default: 0
          * @default 0
         */
        "hideDelay": number;
        /**
          * @prop {string} message - Custom text for the popover content. Used as fallback content if the 'content' slot is not provided.
         */
        "message"?: string;
        /**
          * @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;
        /**
          * @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';
        /**
          * 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' | 'hover focus';
    }
    interface BcmRadio {
        /**
          * @default generateId('bcm-radio')
         */
        "_id"?: string;
        /**
          * Whether the radio button is selected.
          * @prop 
          * @defaultValue false
         */
        "checked": boolean;
        /**
          * Whether the radio button is disabled.
          * @prop 
          * @defaultValue false
         */
        "disabled": boolean;
        /**
          * Whether the radio button is in an error state.
          * @prop 
          * @defaultValue false
         */
        "error": boolean;
        /**
          * The text label to display next to the radio button.
          * @prop 
          * @defaultValue undefined
         */
        "label": string;
        /**
          * Position of the label relative to the radio button: 'right' | 'left'.
          * @prop 
          * @defaultValue 'right'
         */
        "labelPosition": 'right' | 'left';
        /**
          * The name attribute for the radio input, used to group radio buttons.
          * @prop 
          * @defaultValue undefined
         */
        "name": string;
        /**
          * Whether the radio button is readonly.
          * @prop 
          * @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 
          * @defaultValue 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * The value of the radio button, submitted with the form.
          * @prop 
          * @defaultValue undefined
         */
        "value": string;
    }
    interface BcmRadioGroup {
        /**
          * Optional caption text to display below the radio group, often used for error messages or hints.
          * @prop 
          * @defaultValue undefined
         */
        "captionText"?: string;
        /**
          * The layout direction of the radio buttons: 'horizontal' | 'vertical'.
          * @prop 
          * @defaultValue 'vertical'
         */
        "direction": 'horizontal' | 'vertical';
        /**
          * Whether the radio group and its radio buttons are disabled.
          * @prop 
          * @defaultValue false
         */
        "disabled": boolean;
        /**
          * Whether the radio group is in an error state.
          * @prop 
          * @defaultValue false
         */
        "error": boolean;
        /**
          * The label text to display above the radio group.
          * @prop 
          * @defaultValue undefined
         */
        "label": string;
        /**
          * The name attribute for the radio group, used to group radio buttons.
          * @prop 
          * @defaultValue undefined
         */
        "name": string;
        /**
          * Whether the radio group is required in a form.
          * @prop 
          * @defaultValue false
         */
        "required": boolean;
        /**
          * Resets the error state and caption.
          * @method
         */
        "resetCaption": () => Promise<void>;
        /**
          * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.
          * @method
         */
        "setClear": () => Promise<void>;
        /**
          * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
          * @prop 
          * @defaultValue 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * The currently selected value of the radio group.
          * @prop 
          * @defaultValue undefined
         */
        "value": string;
    }
    /**
     * Individual segment option component
     */
    interface BcmSegment {
        /**
          * Index of currently active segment (inherited from parent)
          * @default 0
         */
        "activeIndex": number;
        /**
          * Disabled state
          * @default false
         */
        "disabled": boolean;
        /**
          * Index of this segment (inherited from parent)
          * @default 0
         */
        "index": number;
        /**
          * Selected state (controlled by parent)
          * @default false
         */
        "selected": boolean;
        /**
          * Size variant (inherited from parent)
          * @default 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * Unique identifier for this segment
         */
        "value": string;
    }
    /**
     * Modern Segmented Picker component with CSS Grid-based indicator
     */
    interface BcmSegmentedPicker {
        /**
          * Disabled state
          * @default false
         */
        "disabled": boolean;
        /**
          * Full width flag
          * @default false
         */
        "fullWidth": boolean;
        /**
          * Public method to get active segment value
         */
        "getValue": () => Promise<string>;
        /**
          * Name attribute for form association
         */
        "name": string;
        /**
          * Whether this field is required in a form
          * @default false
         */
        "required": boolean;
        /**
          * Public method to programmatically set active segment
         */
        "setValue": (value: string) => Promise<void>;
        /**
          * Enable shadow on container
          * @default false
         */
        "shadow": boolean;
        /**
          * Size variant
          * @default 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * Selected segment value
         */
        "value": string;
    }
    interface BcmShortcut {
        "hotkey": string;
        /**
          * @default 'small'
         */
        "size": 'small' | 'medium' | 'large';
    }
    /**
     * @component BcmSwitch
     * @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 name="newsletter" label="Receive newsletter?" />
     * @example Required with silent validation (no native bubble)
     * <form>
     * <bcm-switch
     * name="terms"
     * label="Accept terms"
     * 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 {
        /**
          * Unique id (optional). Generated by default.
          * @default generateId('bcm-switch')
         */
        "_id"?: string;
        /**
          * Helper / error text shown under the switch
         */
        "caption"?: string;
        /**
          * Checked state
          * @default false
         */
        "checked": boolean;
        /**
          * Disabled state
          * @default false
         */
        "disabled": boolean;
        /**
          * Visual error state (manual/external). In silent mode this can be auto-managed.
          * @default false
         */
        "error": boolean;
        /**
          * Visible label text
         */
        "label": string;
        /**
          * Position of the label relative to the switch
          * @default 'right'
         */
        "labelPosition": 'left' | 'right';
        /**
          * Form field name
         */
        "name"?: string;
        /**
          * Optional readonly support
          * @default false
         */
        "readonly": boolean;
        /**
          * Required state
          * @default false
         */
        "required": boolean;
        /**
          * Size variant
          * @default 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * @default 'native'
         */
        "validationMode": 'native' | 'silent' | 'none';
        /**
          * Value submitted when checked
          * @default 'on'
         */
        "value": string;
    }
    /**
     * Individual tab component - self-contained with label and content panel
     */
    interface BcmTab {
        /**
          * Active state (controlled by parent)
          * @default false
         */
        "active": boolean;
        /**
          * Disabled state
          * @default false
         */
        "disabled": boolean;
        /**
          * Label text to display in tab button
         */
        "label": string;
        /**
          * Size variant (inherited from parent)
          * @default 'md'
         */
        "size": 'sm' | 'md' | 'lg';
        /**
          * Unique identifier for this tab
         */
        "value": string;
    }
    /**
     * Modern Tabs component with CSS-first approach
     */
    interface BcmTabs {
        /**
          * Public method to get active tab value
         */
        "getActiveTab": () => Promise<string>;
        /**
          * Public method to programmatically set active tab
         */
        "setActiveTab": (value: string) => Promise<void>;
        /**
          * Enable shadow on main container
          * @default false
         */
        "shadow": boolean;
        /**
          * Tab size variant
          * @default 'md'
         */
        "size": 'sm' | 'md' | 'lg';
        /**
          * Active tab value
         */
        "value": string;
        /**
          * Visual variant
          * @default 'line'
         */
        "variant": 'line' | 'enclosed';
    }
    interface BcmText {
        /**
          * Text overflow behavior
          * @default false
         */
        "overflow": boolean;
        /**
          * Text size
          * @default 'medium'
         */
        "size": TextSize;
        /**
          * Text content
         */
        "text": string;
        /**
          * Text variant
          * @default 'body'
         */
        "variant": TextVariant;
    }
    interface BcmTextarea {
        /**
          * Input id
          * @default generateId('textarea')
         */
        "_id"?: string;
        /**
          * Auto grow height based on content
          * @default false
         */
        "autoGrow": boolean;
        /**
          * Caption text to display below textarea
         */
        "captionText"?: string;
        /**
          * Textarea cols
         */
        "cols"?: number;
        /**
          * ID of associated caption/error text element
         */
        "describedby"?: string;
        /**
          * Whether the textarea is disabled
          * @default false
         */
        "disabled": boolean;
        /**
          * Error message to display
         */
        "errorMessage"?: string;
        /**
          * Full width textarea
          * @default false
         */
        "fullWidth": boolean;
        /**
          * Textarea label for accessibility
         */
        "label"?: string;
        /**
          * ID of associated label element
         */
        "labelledby"?: string;
        /**
          * Max length for text input
         */
        "maxLength"?: number;
        /**
          * Maximum height in rows
         */
        "maxRows"?: number;
        /**
          * Min length for text input
         */
        "minLength"?: number;
        /**
          * Minimum height in rows
         */
        "minRows"?: number;
        /**
          * Input name
         */
        "name"?: string;
        /**
          * Input placeholder text
         */
        "placeholder"?: string;
        /**
          * Whether the textarea is readonly
          * @default false
         */
        "readonly": boolean;
        /**
          * Whether the textarea is required
          * @default false
         */
        "required": boolean;
        /**
          * Resize behavior
          * @default 'none'
         */
        "resize": TextareaResize;
        /**
          * Textarea rows
          * @default 3
         */
        "rows"?: number;
        "select": () => Promise<void>;
        "setBlur": () => Promise<void>;
        "setFocus": () => Promise<void>;
        /**
          * Show character counter
          * @default true
         */
        "showCounter": boolean;
        /**
          * Controls the textarea size
          * @default 'medium'
         */
        "size": InputSize1;
        /**
          * Defines the textarea's status/state
          * @default 'default'
         */
        "status": InputStatus1;
        /**
          * Custom validation function
         */
        "validator"?: (value: string) => string | undefined;
        /**
          * Textarea value
          * @default ''
         */
        "value": string;
    }
    /**
     * @component BcmTooltip
     * @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>
     * <!-- 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.getElementById('myTooltip');
     *   tooltip.show();
     *   setTimeout(() => tooltip.hide(), 2000);
     * </script>
     * <!-- 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 {
        /**
          * 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;
        /**
          * Programmatically hides the tooltip Respects the hideDelay prop
         */
        "hide": () => Promise<void>;
        /**
          * Delay in milliseconds before hiding the tooltip Provides a grace period for mouse movements
          * @default 100
         */
        "hideDelay": number;
        /**
          * Simple text message to display in the tooltip Can be overridden by slotting content into the 'content' slot
         */
        "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": TooltipPlacement;
        /**
          * 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;
        /**
          * 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": TooltipSize;
        /**
          * Toggles the tooltip visibility If open, hides it; if closed, shows it
         */
        "toggle": () => Promise<void>;
        /**
          * How the tooltip is triggered - 'hover': Shows on mouse enter, hides on mouse leave - 'click': Toggles on click, closes on outside click or Escape key
          * @default 'hover'
         */
        "trigger": TooltipTrigger;
    }
}
export interface BcmAccordionCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmAccordionElement;
}
export interface BcmAccordionGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmAccordionGroupElement;
}
export interface BcmAlertCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmAlertElement;
}
export interface BcmButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmButtonElement;
}
export interface BcmCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmCheckboxElement;
}
export interface BcmChipCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmChipElement;
}
export interface BcmDrawerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmDrawerElement;
}
export interface BcmDropdownCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmDropdownElement;
}
export interface BcmDropdownItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmDropdownItemElement;
}
export interface BcmFileUploadCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmFileUploadElement;
}
export interface BcmInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmInputElement;
}
export interface BcmLinkedCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmLinkedElement;
}
export interface BcmModalCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmModalElement;
}
export interface BcmPopConfirmCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmPopConfirmElement;
}
export interface BcmPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmPopoverElement;
}
export interface BcmRadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmRadioElement;
}
export interface BcmRadioGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmRadioGroupElement;
}
export interface BcmSegmentCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmSegmentElement;
}
export interface BcmSegmentedPickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmSegmentedPickerElement;
}
export interface BcmSwitchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmSwitchElement;
}
export interface BcmTabCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmTabElement;
}
export interface BcmTabsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmTabsElement;
}
export interface BcmTextareaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLBcmTextareaElement;
}
declare global {
    interface HTMLBcmAccordionElementEventMap {
        "bcmAccordionChange": AccordionChangeEventType;
    }
    /**
     * @component BcmAccordion
     * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation
     * and accessibility features. Offers customizable header, content, and footer areas through slots.
     * @example Basic usage
     * <bcm-accordion>
     * <div slot="title">Accordion Title</div>
     * <div>Content goes here</div>
     * </bcm-accordion>
     * @example With all slots and hint text
     * <bcm-accordion hint-text="Additional information">
     * <div slot="title">Title</div>
     * <div slot="actions">
     * <button>Action</button>
     * </div>
     * <div>Main content</div>
     * <div slot="footer">Footer content</div>
     * </bcm-accordion>
     * @example Event handling
     * // Listen to accordion state changes
     * const accordion = document.querySelector('bcm-accordion');
     * accordion.addEventListener('bcmAccordionChange', (event) => {
     * const { expanded, source } = event.detail;
     * console.log('Accordion expanded:', expanded);
     * console.log('Changed accordion:', source);
     * });
     * // Programmatically control accordion
     * await accordion.toggle(); // Toggle state
     * await accordion.expand(); // Expand accordion
     * await accordion.collapse(); // Collapse accordion
     * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)
     * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)
     * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided
     * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes
     * @eventProperty {boolean} expanded - Current expanded state
     * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed
     * @csspart container - The root container element
     * @csspart header - The header section with title and actions
     * @csspart content - The collapsible content section
     * @csspart footer - The footer section with hint text or footer slot
     * @csspart section - Container for header content sections
     * @csspart icon - The expand/collapse chevron icon
     * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)
     * @css {string} --bcm-accordion-bg - Background color of the accordion header
     * @css {string} --bcm-accordion-text - Text color of the accordion
     * @css {string} --bcm-accordion-footer-bg - Background color of the footer section
     * @methods toggle() - Toggles the accordion's expanded state
     * expand() - Expands the accordion if collapsed
     * collapse() - Collapses the accordion if expanded
     */
    interface HTMLBcmAccordionElement extends Components.BcmAccordion, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmAccordionElementEventMap>(type: K, listener: (this: HTMLBcmAccordionElement, ev: BcmAccordionCustomEvent<HTMLBcmAccordionElementEventMap[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 HTMLBcmAccordionElementEventMap>(type: K, listener: (this: HTMLBcmAccordionElement, ev: BcmAccordionCustomEvent<HTMLBcmAccordionElementEventMap[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 HTMLBcmAccordionElement: {
        prototype: HTMLBcmAccordionElement;
        new (): HTMLBcmAccordionElement;
    };
    interface HTMLBcmAccordionGroupElementEventMap {
        "bcmAccordionGroupChange": AccordionGroupChangeEventType;
    }
    /**
     * @component BcmAccordionGroup
     * @description A container component that manages a group of accordions. Provides single/multiple expansion 
     * modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.
     * @example Basic usage - Single expansion mode
     * <bcm-accordion-group>
     * <bcm-accordion>
     * <div slot="title">Section 1</div>
     * <div>Content 1</div>
     * </bcm-accordion>
     * <bcm-accordion>
     * <div slot="title">Section 2</div>
     * <div>Content 2</div>
     * </bcm-accordion>
     * </bcm-accordion-group>
     * @example Multiple expansion mode
     * <bcm-accordion-group multi={true}>
     * <bcm-accordion>...</bcm-accordion>
     * <bcm-accordion>...</bcm-accordion>
     * </bcm-accordion-group>
     * @example Event handling
     * // Listen to accordion group changes
     * const accordionGroup = document.querySelector('bcm-accordion-group');
     * accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {
     * const { expanded, changed, expandedItems, expandedCount } = event.detail;
     * console.log('Accordion expanded state:', expanded);
     * console.log('Changed accordion:', changed);
     * console.log('Currently expanded accordions:', expandedItems);
     * console.log('Number of expanded accordions:', expandedCount);
     * });
     * // Using methods
     * await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)
     * await accordionGroup.collapseAll(); // Collapses all accordions
     * const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions
     * @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)
     * @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes
     * @eventProperty {boolean} expanded - Current expanded state of the changed accordion
     * @eventProperty {HTMLElement} changed - The accordion element that triggered the change
     * @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements
     * @eventProperty {number} expandedCount - Number of currently expanded accordions
     * @method expandAll() - Expands all accordions (only available in multi mode)
     * @method collapseAll() - Collapses all accordions
     * @method getExpandedItems() - Returns array of currently expanded accordions
     * @csspart container - The accordion group container element
     * @css {string} --bcm-accordion-border - Border color of the accordion group
     * @css {string} --bcm-accordion-radius - Border radius of the accordion group
     */
    interface HTMLBcmAccordionGroupElement extends Components.BcmAccordionGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmAccordionGroupElementEventMap>(type: K, listener: (this: HTMLBcmAccordionGroupElement, ev: BcmAccordionGroupCustomEvent<HTMLBcmAccordionGroupElementEventMap[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 HTMLBcmAccordionGroupElementEventMap>(type: K, listener: (this: HTMLBcmAccordionGroupElement, ev: BcmAccordionGroupCustomEvent<HTMLBcmAccordionGroupElementEventMap[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 HTMLBcmAccordionGroupElement: {
        prototype: HTMLBcmAccordionGroupElement;
        new (): HTMLBcmAccordionGroupElement;
    };
    interface HTMLBcmAlertElementEventMap {
        "bcmDismiss": void;
    }
    /**
     * Alert component that displays messages with different statuses and styles
     * @class BcmAlert
     */
    interface HTMLBcmAlertElement extends Components.BcmAlert, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmAlertElementEventMap>(type: K, listener: (this: HTMLBcmAlertElement, ev: BcmAlertCustomEvent<HTMLBcmAlertElementEventMap[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 HTMLBcmAlertElementEventMap>(type: K, listener: (this: HTMLBcmAlertElement, ev: BcmAlertCustomEvent<HTMLBcmAlertElementEventMap[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 HTMLBcmAlertElement: {
        prototype: HTMLBcmAlertElement;
        new (): HTMLBcmAlertElement;
    };
    /**
     * @component BcmAttendance
     * @description Visualizes attendance history (AM/PM status) for a series of days.
     * Supports different status types (present, late, absent, etc.) with color-coded indicators.
     * Can handle data via JSON string or direct object array.
     * @example Basic usage
     * <bcm-attendance data='[{"weekday":"Mon", "am":"present", "pm":"absent"}]'></bcm-attendance>
     * @example With specific statuses
     * <bcm-attendance data='[
     * {"weekday":"Mon", "am":"present", "pm":"present"},
     * {"weekday":"Tue", "am":"late", "pm":"present"}
     * ]'></bcm-attendance>
     */
    interface HTMLBcmAttendanceElement extends Components.BcmAttendance, HTMLStencilElement {
    }
    var HTMLBcmAttendanceElement: {
        prototype: HTMLBcmAttendanceElement;
        new (): HTMLBcmAttendanceElement;
    };
    interface HTMLBcmAvatarElement extends Components.BcmAvatar, HTMLStencilElement {
    }
    var HTMLBcmAvatarElement: {
        prototype: HTMLBcmAvatarElement;
        new (): HTMLBcmAvatarElement;
    };
    /**
     * @component BcmBadge
     * @description A versatile badge component that can be positioned around its container.
     * Supports different sizes, variants (dot/text), colors, and positioning options.
     * Can display status indicators with optional blinking animation.
     * @example Basic usage
     * <bcm-badge color="primary" position="top-right">
     * <div>Container Content</div>
     * <span slot="badge">New</span>
     * </bcm-badge>
     * @example Status indicator with blink
     * <bcm-badge variant="dot" color="success" blink={true} status="Online">
     * <div>User Profile</div>
     * </bcm-badge>
     */
    interface HTMLBcmBadgeElement extends Components.BcmBadge, HTMLStencilElement {
    }
    var HTMLBcmBadgeElement: {
        prototype: HTMLBcmBadgeElement;
        new (): HTMLBcmBadgeElement;
    };
    /**
     * @component BcmBasicBadge
     * @description A basic badge component that can be used as a status indicator or to highlight content.
     * Supports dot and text variants with different sizes and color options.
     * @example Basic usage
     * <bcm-basic-badge size="medium" color="primary">
     * New
     * </bcm-basic-badge>
     * @example Dot variant
     * <bcm-basic-badge variant="dot" color="success" />
     */
    interface HTMLBcmBasicBadgeElement extends Components.BcmBasicBadge, HTMLStencilElement {
    }
    var HTMLBcmBasicBadgeElement: {
        prototype: HTMLBcmBasicBadgeElement;
        new (): HTMLBcmBasicBadgeElement;
    };
    interface HTMLBcmButtonElementEventMap {
        "bcmClick": MouseEvent;
        "bcmFocus": FocusEvent;
        "bcmBlur": FocusEvent;
    }
    interface HTMLBcmButtonElement extends Components.BcmButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmButtonElementEventMap>(type: K, listener: (this: HTMLBcmButtonElement, ev: BcmButtonCustomEvent<HTMLBcmButtonElementEventMap[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 HTMLBcmButtonElementEventMap>(type: K, listener: (this: HTMLBcmButtonElement, ev: BcmButtonCustomEvent<HTMLBcmButtonElementEventMap[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 HTMLBcmButtonElement: {
        prototype: HTMLBcmButtonElement;
        new (): HTMLBcmButtonElement;
    };
    interface HTMLBcmButtonGroupElement extends Components.BcmButtonGroup, HTMLStencilElement {
    }
    var HTMLBcmButtonGroupElement: {
        prototype: HTMLBcmButtonGroupElement;
        new (): HTMLBcmButtonGroupElement;
    };
    interface HTMLBcmCheckboxElementEventMap {
        "bcmCheckboxChange": { element: HTMLInputElement; checked: boolean };
    }
    /**
     * @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;
        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 HTMLBcmCheckboxElementEventMap>(type: K, listener: (this: HTMLBcmCheckboxElement, ev: BcmCheckboxCustomEvent<HTMLBcmCheckboxElementEventMap[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 HTMLBcmCheckboxElement: {
        prototype: HTMLBcmCheckboxElement;
        new (): HTMLBcmCheckboxElement;
    };
    interface HTMLBcmChipElementEventMap {
        "bcmDismiss": void;
    }
    /**
     * @component BcmChip
     * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.
     * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.
     * @example <bcm-chip size="medium" kind="filled" status="success">
     *   Success Chip
     * </bcm-chip>
     * @example Dismissible chip
     * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>
     * Dismissible Chip
     * </bcm-chip>
     * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
     * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
     * @prop {boolean} dismissible - Whether the chip can be dismissed
     * @prop {boolean} disabled - Whether the chip is disabled
     * @prop {string} color - Custom color override for the chip
     * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked
     * @csspart chip - The root chip element
     * @csspart dismiss-icon - The dismiss button icon
     */
    interface HTMLBcmChipElement extends Components.BcmChip, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmChipElementEventMap>(type: K, listener: (this: HTMLBcmChipElement, ev: BcmChipCustomEvent<HTMLBcmChipElementEventMap[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 HTMLBcmChipElementEventMap>(type: K, listener: (this: HTMLBcmChipElement, ev: BcmChipCustomEvent<HTMLBcmChipElementEventMap[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 HTMLBcmChipElement: {
        prototype: HTMLBcmChipElement;
        new (): HTMLBcmChipElement;
    };
    /**
     * @component BCM Divider
     * @description A versatile divider component that creates a visual separation between content.
     * It supports horizontal or vertical orientation with customizable styles and sizes.
     * The component uses CSS variables for theming and Tailwind for styling.
     */
    interface HTMLBcmDividerElement extends Components.BcmDivider, HTMLStencilElement {
    }
    var HTMLBcmDividerElement: {
        prototype: HTMLBcmDividerElement;
        new (): HTMLBcmDividerElement;
    };
    interface HTMLBcmDrawerElementEventMap {
        "bcmOpen": void;
        "bcmClose": void;
        "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;
        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 HTMLBcmDrawerElementEventMap>(type: K, listener: (this: HTMLBcmDrawerElement, ev: BcmDrawerCustomEvent<HTMLBcmDrawerElementEventMap[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 HTMLBcmDrawerElement: {
        prototype: HTMLBcmDrawerElement;
        new (): HTMLBcmDrawerElement;
    };
    interface HTMLBcmDropdownElementEventMap {
        "bcmDropdownChange": any;
    }
    interface HTMLBcmDropdownElement extends Components.BcmDropdown, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmDropdownElementEventMap>(type: K, listener: (this: HTMLBcmDropdownElement, ev: BcmDropdownCustomEvent<HTMLBcmDropdownElementEventMap[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 HTMLBcmDropdownElementEventMap>(type: K, listener: (this: HTMLBcmDropdownElement, ev: BcmDropdownCustomEvent<HTMLBcmDropdownElementEventMap[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 HTMLBcmDropdownElement: {
        prototype: HTMLBcmDropdownElement;
        new (): HTMLBcmDropdownElement;
    };
    interface HTMLBcmDropdownItemElementEventMap {
        "bcmDropDownItemChange": any;
    }
    interface HTMLBcmDropdownItemElement extends Components.BcmDropdownItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmDropdownItemElementEventMap>(type: K, listener: (this: HTMLBcmDropdownItemElement, ev: BcmDropdownItemCustomEvent<HTMLBcmDropdownItemElementEventMap[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 HTMLBcmDropdownItemElementEventMap>(type: K, listener: (this: HTMLBcmDropdownItemElement, ev: BcmDropdownItemCustomEvent<HTMLBcmDropdownItemElementEventMap[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 HTMLBcmDropdownItemElement: {
        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;
        "bcmFocus": FocusEvent;
        "bcmBlur": FocusEvent;
        "bcmKeyDown": KeyboardEvent;
        "bcmKeyUp": KeyboardEvent;
    }
    interface HTMLBcmInputElement extends Components.BcmInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmInputElementEventMap>(type: K, listener: (this: HTMLBcmInputElement, ev: BcmInputCustomEvent<HTMLBcmInputElementEventMap[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 HTMLBcmInputElementEventMap>(type: K, listener: (this: HTMLBcmInputElement, ev: BcmInputCustomEvent<HTMLBcmInputElementEventMap[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 HTMLBcmInputElement: {
        prototype: HTMLBcmInputElement;
        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;
        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 HTMLBcmLinkedElementEventMap>(type: K, listener: (this: HTMLBcmLinkedElement, ev: BcmLinkedCustomEvent<HTMLBcmLinkedElementEventMap[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 HTMLBcmLinkedElement: {
        prototype: HTMLBcmLinkedElement;
        new (): HTMLBcmLinkedElement;
    };
    interface HTMLBcmModalElementEventMap {
        "bcmOpen": void;
        "bcmClose": void;
        "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;
        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 HTMLBcmModalElementEventMap>(type: K, listener: (this: HTMLBcmModalElement, ev: BcmModalCustomEvent<HTMLBcmModalElementEventMap[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 HTMLBcmModalElement: {
        prototype: HTMLBcmModalElement;
        new (): HTMLBcmModalElement;
    };
    interface HTMLBcmPopConfirmElementEventMap {
        "bcmBeforeOpen": void;
        "bcmOpen": void;
        "bcmBeforeClose": void;
        "bcmClose": void;
        "bcmConfirm": void;
        "bcmCancel": void;
    }
    /**
     * @component BcmPopConfirm
     * @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 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();
     * });
     * 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 HTMLBcmPopConfirmElement extends Components.BcmPopConfirm, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmPopConfirmElementEventMap>(type: K, listener: (this: HTMLBcmPopConfirmElement, ev: BcmPopConfirmCustomEvent<HTMLBcmPopConfirmElementEventMap[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 HTMLBcmPopConfirmElementEventMap>(type: K, listener: (this: HTMLBcmPopConfirmElement, ev: BcmPopConfirmCustomEvent<HTMLBcmPopConfirmElementEventMap[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 HTMLBcmPopConfirmElement: {
        prototype: HTMLBcmPopConfirmElement;
        new (): HTMLBcmPopConfirmElement;
    };
    interface HTMLBcmPopoverElementEventMap {
        "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.
     * 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 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
     * <bcm-popover id="my-popover" trigger="click">
     * <bcm-button>Toggle Me</bcm-button>
     * <span slot="content">Controlled popover</span>
     * </bcm-popover>
     * <script>
     * const popover = document.querySelector('#my-popover');
     * popover.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
     * @csspart content - The content section of the popover, stylable for the main content area
     * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
     */
    interface HTMLBcmPopoverElement extends Components.BcmPopover, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmPopoverElementEventMap>(type: K, listener: (this: HTMLBcmPopoverElement, ev: BcmPopoverCustomEvent<HTMLBcmPopoverElementEventMap[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 HTMLBcmPopoverElementEventMap>(type: K, listener: (this: HTMLBcmPopoverElement, ev: BcmPopoverCustomEvent<HTMLBcmPopoverElementEventMap[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 HTMLBcmPopoverElement: {
        prototype: HTMLBcmPopoverElement;
        new (): HTMLBcmPopoverElement;
    };
    interface HTMLBcmRadioElementEventMap {
        "bcmRadioChange": void;
        "bcmBlur": FocusEvent;
        "bcmFocus": FocusEvent;
    }
    interface HTMLBcmRadioElement extends Components.BcmRadio, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmRadioElementEventMap>(type: K, listener: (this: HTMLBcmRadioElement, ev: BcmRadioCustomEvent<HTMLBcmRadioElementEventMap[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 HTMLBcmRadioElementEventMap>(type: K, listener: (this: HTMLBcmRadioElement, ev: BcmRadioCustomEvent<HTMLBcmRadioElementEventMap[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 HTMLBcmRadioElement: {
        prototype: HTMLBcmRadioElement;
        new (): HTMLBcmRadioElement;
    };
    interface HTMLBcmRadioGroupElementEventMap {
        "bcmRadioGroupChange": any;
    }
    interface HTMLBcmRadioGroupElement extends Components.BcmRadioGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmRadioGroupElementEventMap>(type: K, listener: (this: HTMLBcmRadioGroupElement, ev: BcmRadioGroupCustomEvent<HTMLBcmRadioGroupElementEventMap[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 HTMLBcmRadioGroupElementEventMap>(type: K, listener: (this: HTMLBcmRadioGroupElement, ev: BcmRadioGroupCustomEvent<HTMLBcmRadioGroupElementEventMap[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 HTMLBcmRadioGroupElement: {
        prototype: HTMLBcmRadioGroupElement;
        new (): HTMLBcmRadioGroupElement;
    };
    interface HTMLBcmSegmentElementEventMap {
        "bcmSegmentClick": string;
    }
    /**
     * 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 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 HTMLBcmSegmentElement: {
        prototype: HTMLBcmSegmentElement;
        new (): HTMLBcmSegmentElement;
    };
    interface HTMLBcmSegmentedPickerElementEventMap {
        "bcmSegmentChange": { value: string; previousValue: string };
    }
    /**
     * 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 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 HTMLBcmSegmentedPickerElement: {
        prototype: HTMLBcmSegmentedPickerElement;
        new (): HTMLBcmSegmentedPickerElement;
    };
    interface HTMLBcmShortcutElement extends Components.BcmShortcut, HTMLStencilElement {
    }
    var HTMLBcmShortcutElement: {
        prototype: HTMLBcmShortcutElement;
        new (): HTMLBcmShortcutElement;
    };
    interface HTMLBcmSwitchElementEventMap {
        "bcmSwitchChange": boolean;
    }
    /**
     * @component BcmSwitch
     * @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 name="newsletter" label="Receive newsletter?" />
     * @example Required with silent validation (no native bubble)
     * <form>
     * <bcm-switch
     * name="terms"
     * label="Accept terms"
     * 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;
        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 HTMLBcmSwitchElementEventMap>(type: K, listener: (this: HTMLBcmSwitchElement, ev: BcmSwitchCustomEvent<HTMLBcmSwitchElementEventMap[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 HTMLBcmSwitchElement: {
        prototype: HTMLBcmSwitchElement;
        new (): HTMLBcmSwitchElement;
    };
    interface HTMLBcmTabElementEventMap {
        "bcmTabClick": string;
    }
    /**
     * Individual tab component - self-contained with label and content panel
     */
    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 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 HTMLBcmTabElement: {
        prototype: HTMLBcmTabElement;
        new (): HTMLBcmTabElement;
    };
    interface HTMLBcmTabsElementEventMap {
        "bcmTabChange": {
    value: string;
    previousValue: string;
  };
    }
    /**
     * Modern Tabs component with CSS-first approach
     */
    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 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 HTMLBcmTabsElement: {
        prototype: HTMLBcmTabsElement;
        new (): HTMLBcmTabsElement;
    };
    interface HTMLBcmTextElement extends Components.BcmText, HTMLStencilElement {
    }
    var HTMLBcmTextElement: {
        prototype: HTMLBcmTextElement;
        new (): HTMLBcmTextElement;
    };
    interface HTMLBcmTextareaElementEventMap {
        "bcmInput": InputEvent;
        "bcmChange": Event;
        "bcmFocus": FocusEvent;
        "bcmBlur": FocusEvent;
        "bcmKeyDown": KeyboardEvent;
        "bcmKeyUp": KeyboardEvent;
    }
    interface HTMLBcmTextareaElement extends Components.BcmTextarea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLBcmTextareaElementEventMap>(type: K, listener: (this: HTMLBcmTextareaElement, ev: BcmTextareaCustomEvent<HTMLBcmTextareaElementEventMap[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 HTMLBcmTextareaElementEventMap>(type: K, listener: (this: HTMLBcmTextareaElement, ev: BcmTextareaCustomEvent<HTMLBcmTextareaElementEventMap[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 HTMLBcmTextareaElement: {
        prototype: HTMLBcmTextareaElement;
        new (): HTMLBcmTextareaElement;
    };
    /**
     * @component BcmTooltip
     * @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>
     * <!-- 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.getElementById('myTooltip');
     *   tooltip.show();
     *   setTimeout(() => tooltip.hide(), 2000);
     * </script>
     * <!-- 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 {
    }
    var HTMLBcmTooltipElement: {
        prototype: HTMLBcmTooltipElement;
        new (): HTMLBcmTooltipElement;
    };
    interface HTMLElementTagNameMap {
        "bcm-accordion": HTMLBcmAccordionElement;
        "bcm-accordion-group": HTMLBcmAccordionGroupElement;
        "bcm-alert": HTMLBcmAlertElement;
        "bcm-attendance": HTMLBcmAttendanceElement;
        "bcm-avatar": HTMLBcmAvatarElement;
        "bcm-badge": HTMLBcmBadgeElement;
        "bcm-basic-badge": HTMLBcmBasicBadgeElement;
        "bcm-button": HTMLBcmButtonElement;
        "bcm-button-group": HTMLBcmButtonGroupElement;
        "bcm-checkbox": HTMLBcmCheckboxElement;
        "bcm-chip": HTMLBcmChipElement;
        "bcm-divider": HTMLBcmDividerElement;
        "bcm-drawer": HTMLBcmDrawerElement;
        "bcm-dropdown": HTMLBcmDropdownElement;
        "bcm-dropdown-item": HTMLBcmDropdownItemElement;
        "bcm-file-upload": HTMLBcmFileUploadElement;
        "bcm-input": HTMLBcmInputElement;
        "bcm-linked": HTMLBcmLinkedElement;
        "bcm-modal": HTMLBcmModalElement;
        "bcm-pop-confirm": HTMLBcmPopConfirmElement;
        "bcm-popover": HTMLBcmPopoverElement;
        "bcm-radio": HTMLBcmRadioElement;
        "bcm-radio-group": HTMLBcmRadioGroupElement;
        "bcm-segment": HTMLBcmSegmentElement;
        "bcm-segmented-picker": HTMLBcmSegmentedPickerElement;
        "bcm-shortcut": HTMLBcmShortcutElement;
        "bcm-switch": HTMLBcmSwitchElement;
        "bcm-tab": HTMLBcmTabElement;
        "bcm-tabs": HTMLBcmTabsElement;
        "bcm-text": HTMLBcmTextElement;
        "bcm-textarea": HTMLBcmTextareaElement;
        "bcm-tooltip": HTMLBcmTooltipElement;
    }
}
declare namespace LocalJSX {
    /**
     * @component BcmAccordion
     * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation
     * and accessibility features. Offers customizable header, content, and footer areas through slots.
     * @example Basic usage
     * <bcm-accordion>
     * <div slot="title">Accordion Title</div>
     * <div>Content goes here</div>
     * </bcm-accordion>
     * @example With all slots and hint text
     * <bcm-accordion hint-text="Additional information">
     * <div slot="title">Title</div>
     * <div slot="actions">
     * <button>Action</button>
     * </div>
     * <div>Main content</div>
     * <div slot="footer">Footer content</div>
     * </bcm-accordion>
     * @example Event handling
     * // Listen to accordion state changes
     * const accordion = document.querySelector('bcm-accordion');
     * accordion.addEventListener('bcmAccordionChange', (event) => {
     * const { expanded, source } = event.detail;
     * console.log('Accordion expanded:', expanded);
     * console.log('Changed accordion:', source);
     * });
     * // Programmatically control accordion
     * await accordion.toggle(); // Toggle state
     * await accordion.expand(); // Expand accordion
     * await accordion.collapse(); // Collapse accordion
     * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)
     * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)
     * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided
     * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes
     * @eventProperty {boolean} expanded - Current expanded state
     * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed
     * @csspart container - The root container element
     * @csspart header - The header section with title and actions
     * @csspart content - The collapsible content section
     * @csspart footer - The footer section with hint text or footer slot
     * @csspart section - Container for header content sections
     * @csspart icon - The expand/collapse chevron icon
     * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)
     * @css {string} --bcm-accordion-bg - Background color of the accordion header
     * @css {string} --bcm-accordion-text - Text color of the accordion
     * @css {string} --bcm-accordion-footer-bg - Background color of the footer section
     * @methods toggle() - Toggles the accordion's expanded state
     * expand() - Expands the accordion if collapsed
     * collapse() - Collapses the accordion if expanded
     */
    interface BcmAccordion {
        /**
          * Controls whether the accordion is expanded or collapsed.
          * @prop 
          * @defaultValue false
         */
        "expanded"?: boolean;
        /**
          * Indicates if the accordion is part of a group. Used for group behavior coordination.
          * @prop 
          * @defaultValue false
         */
        "group"?: boolean;
        /**
          * Optional title text to display in the header.
          * @prop 
          * @defaultValue undefined
         */
        "headerTitle"?: string;
        /**
          * Optional text to display in the footer when no footer slot content is provided.
          * @prop
         */
        "hintText"?: string;
        /**
          * Emitted when the accordion's expanded state changes.
          * @event
         */
        "onBcmAccordionChange"?: (event: BcmAccordionCustomEvent<AccordionChangeEventType>) => void;
    }
    /**
     * @component BcmAccordionGroup
     * @description A container component that manages a group of accordions. Provides single/multiple expansion 
     * modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.
     * @example Basic usage - Single expansion mode
     * <bcm-accordion-group>
     * <bcm-accordion>
     * <div slot="title">Section 1</div>
     * <div>Content 1</div>
     * </bcm-accordion>
     * <bcm-accordion>
     * <div slot="title">Section 2</div>
     * <div>Content 2</div>
     * </bcm-accordion>
     * </bcm-accordion-group>
     * @example Multiple expansion mode
     * <bcm-accordion-group multi={true}>
     * <bcm-accordion>...</bcm-accordion>
     * <bcm-accordion>...</bcm-accordion>
     * </bcm-accordion-group>
     * @example Event handling
     * // Listen to accordion group changes
     * const accordionGroup = document.querySelector('bcm-accordion-group');
     * accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {
     * const { expanded, changed, expandedItems, expandedCount } = event.detail;
     * console.log('Accordion expanded state:', expanded);
     * console.log('Changed accordion:', changed);
     * console.log('Currently expanded accordions:', expandedItems);
     * console.log('Number of expanded accordions:', expandedCount);
     * });
     * // Using methods
     * await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)
     * await accordionGroup.collapseAll(); // Collapses all accordions
     * const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions
     * @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)
     * @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes
     * @eventProperty {boolean} expanded - Current expanded state of the changed accordion
     * @eventProperty {HTMLElement} changed - The accordion element that triggered the change
     * @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements
     * @eventProperty {number} expandedCount - Number of currently expanded accordions
     * @method expandAll() - Expands all accordions (only available in multi mode)
     * @method collapseAll() - Collapses all accordions
     * @method getExpandedItems() - Returns array of currently expanded accordions
     * @csspart container - The accordion group container element
     * @css {string} --bcm-accordion-border - Border color of the accordion group
     * @css {string} --bcm-accordion-radius - Border radius of the accordion group
     */
    interface BcmAccordionGroup {
        /**
          * Controls whether multiple accordions can be expanded simultaneously
          * @default false
         */
        "multi"?: boolean;
        /**
          * Event emitted when any accordion's expanded state changes
         */
        "onBcmAccordionGroupChange"?: (event: BcmAccordionGroupCustomEvent<AccordionGroupChangeEventType>) => void;
    }
    /**
     * Alert component that displays messages with different statuses and styles
     * @class BcmAlert
     */
    interface BcmAlert {
        /**
          * Whether alert can be dismissed
          * @default true
         */
        "dismissible"?: boolean;
        /**
          * Alert style variant
          * @default 'filled'
         */
        "kind"?: AlertKind;
        "onBcmDismiss"?: (event: BcmAlertCustomEvent<void>) => void;
        /**
          * Whether to show status icon
          * @default true
         */
        "showStatusIcon"?: boolean;
        /**
          * Alert size variant
          * @default 'medium'
         */
        "size"?: AlertSize;
        /**
          * Alert status type
          * @default 'default'
         */
        "status"?: AlertStatus;
    }
    /**
     * @component BcmAttendance
     * @description Visualizes attendance history (AM/PM status) for a series of days.
     * Supports different status types (present, late, absent, etc.) with color-coded indicators.
     * Can handle data via JSON string or direct object array.
     * @example Basic usage
     * <bcm-attendance data='[{"weekday":"Mon", "am":"present", "pm":"absent"}]'></bcm-attendance>
     * @example With specific statuses
     * <bcm-attendance data='[
     * {"weekday":"Mon", "am":"present", "pm":"present"},
     * {"weekday":"Tue", "am":"late", "pm":"present"}
     * ]'></bcm-attendance>
     */
    interface BcmAttendance {
        /**
          * Data for attendance items to be displayed. Can be passed as a JSON string (HTML attribute) or a JavaScript Array (Property).  Format: Array of objects with `weekday`, `am`, and `pm` properties. Status values: 'present', 'late', 'absent', 'other', 'default'.
          * @type {string | AttendanceItem[]}
          * @default []
         */
        "data"?: string | AttendanceItem[];
    }
    interface BcmAvatar {
        /**
          * Alternative text for image
         */
        "alt"?: string;
        /**
          * Status indicator animation
          * @default false
         */
        "blink"?: boolean;
        /**
          * Custom background color
         */
        "color"?: string;
        /**
          * Fallback icon class
          * @default 'fas fa-user'
         */
        "icon"?: string;
        /**
          * Source URL for avatar image
         */
        "image"?: string;
        /**
          * Display name (used for initials)
         */
        "name"?: string;
        /**
          * Shape of the avatar (ellipse/square)
          * @default 'ellipse'
         */
        "shape"?: AvatarShape;
        /**
          * Size of the avatar
          * @default 'medium'
         */
        "size"?: AvatarSize;
        /**
          * Status indicator type
         */
        "status"?: AvatarStatus;
    }
    /**
     * @component BcmBadge
     * @description A versatile badge component that can be positioned around its container.
     * Supports different sizes, variants (dot/text), colors, and positioning options.
     * Can display status indicators with optional blinking animation.
     * @example Basic usage
     * <bcm-badge color="primary" position="top-right">
     * <div>Container Content</div>
     * <span slot="badge">New</span>
     * </bcm-badge>
     * @example Status indicator with blink
     * <bcm-badge variant="dot" color="success" blink={true} status="Online">
     * <div>User Profile</div>
     * </bcm-badge>
     */
    interface BcmBadge {
        /**
          * Enables blinking animation for the badge. Useful for drawing attention or indicating active status.
          * @type {boolean}
          * @default false
         */
        "blink"?: boolean;
        /**
          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
          * @type {string}
          * @optional
         */
        "color"?: string;
        /**
          * Fine-tune the badge position with custom offset. Format: "x,y" in pixels (e.g., "10,-5")
          * @type {string}
          * @optional
         */
        "offset"?: string;
        /**
          * Sets the position of the badge relative to its container.
          * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
          * @default 'top-right'
         */
        "position"?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
        /**
          * Determines the size of the badge.
          * @type {'small' | 'medium' | 'large'}
          * @default 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
          * @type {boolean}
          * @default false
         */
        "soft"?: boolean;
        /**
          * Status message for accessibility purposes. Will be read by screen readers.
          * @type {string}
          * @optional
         */
        "status"?: string;
        /**
          * Text to be displayed inside the badge. Used when variant is set to 'text'. Can be overridden using the "badge" slot.
          * @type {string}
          * @optional
         */
        "text"?: string;
        /**
          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
          * @type {'dot' | 'text'}
          * @default 'text'
         */
        "variant"?: 'dot' | 'text';
    }
    /**
     * @component BcmBasicBadge
     * @description A basic badge component that can be used as a status indicator or to highlight content.
     * Supports dot and text variants with different sizes and color options.
     * @example Basic usage
     * <bcm-basic-badge size="medium" color="primary">
     * New
     * </bcm-basic-badge>
     * @example Dot variant
     * <bcm-basic-badge variant="dot" color="success" />
     */
    interface BcmBasicBadge {
        /**
          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
          * @type {string}
          * @optional
         */
        "color"?: string;
        /**
          * Determines the size of the badge.
          * @type {'small' | 'medium' | 'large'}
          * @default 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
          * @type {boolean}
          * @default false
         */
        "soft"?: boolean;
        /**
          * Text to be displayed inside the badge. Used when variant is set to 'text'.
          * @type {string}
          * @optional
         */
        "text"?: string;
        /**
          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
          * @type {'dot' | 'text'}
          * @default 'text'
         */
        "variant"?: 'dot' | 'text';
    }
    interface BcmButton {
        /**
          * Active state
          * @default false
         */
        "active"?: boolean;
        /**
          * ID of controlled element
         */
        "controls"?: string;
        /**
          * Disabled state
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Expanded state for expandable content
         */
        "expanded"?: string;
        /**
          * Form association
         */
        "form"?: string;
        /**
          * Full width button
          * @default false
         */
        "fullWidth"?: boolean;
        /**
          * Icon class name
         */
        "icon"?: string;
        /**
          * Icon-only button mode
          * @default false
         */
        "iconOnly"?: boolean;
        /**
          * Icon placement (prefix/suffix)
          * @default 'prefix'
         */
        "iconPosition"?: IconPosition;
        /**
          * Defines the main visual style of the button
          * @default 'primary'
         */
        "kind"?: ButtonKind;
        /**
          * Screen reader label
         */
        "label"?: string;
        /**
          * Loading state
          * @default false
         */
        "loading"?: boolean;
        "name"?: string;
        "onBcmBlur"?: (event: BcmButtonCustomEvent<FocusEvent>) => void;
        "onBcmClick"?: (event: BcmButtonCustomEvent<MouseEvent>) => void;
        "onBcmFocus"?: (event: BcmButtonCustomEvent<FocusEvent>) => void;
        /**
          * Button position in button group (first, middle, last)
         */
        "position"?: ButtonPosition;
        /**
          * Controls the button size
          * @default 'medium'
         */
        "size"?: ButtonSize;
        /**
          * Defines the button's status/state color
          * @default 'default'
         */
        "status"?: ButtonStatus;
        /**
          * Button text content
         */
        "text"?: string;
        /**
          * HTML button type
          * @default 'button'
         */
        "type"?: ButtonType;
        "value"?: string;
        /**
          * Predefined button variants
         */
        "variant"?: ButtonVariant;
    }
    interface BcmButtonGroup {
        /**
          * Disabled state
         */
        "disabled"?: boolean;
        /**
          * Full width buttons
         */
        "fullWidth"?: boolean;
        /**
          * Defines the main visual style of buttons
         */
        "kind"?: ButtonKind;
        /**
          * Loading state
         */
        "loading"?: boolean;
        /**
          * Button orientation
          * @default 'horizontal'
         */
        "orientation"?: 'horizontal' | 'vertical';
        /**
          * Controls the button size
         */
        "size"?: ButtonSize;
        /**
          * Defines the button's status/state color
         */
        "status"?: ButtonStatus;
    }
    /**
     * @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. Used to bind the visible label to the internal input.
          * @default generateId('bcm-checkbox')
         */
        "_id"?: string;
        /**
          * Helper / error caption (silent mode UI)
         */
        "caption"?: string;
        /**
          * Checked state
          * @default false
         */
        "checked"?: boolean;
        /**
          * Disabled state
          * @default false
         */
        "disabled"?: boolean;
        /**
          * 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;
        /**
          * Makes checkbox occupy full width (if your styles support it).
          * @default false
         */
        "fullWidth"?: boolean;
        /**
          * Indeterminate (mixed) state. Useful when a group selection is partially selected.
          * @default false
         */
        "indeterminate"?: boolean;
        /**
          * Visible label text (optional). You can also use the default slot.
         */
        "label"?: string;
        /**
          * Label position relative to the checkbox control.
          * @default 'right'
         */
        "labelPosition"?: 'left' | 'right';
        /**
          * Form field name
         */
        "name"?: string;
        /**
          * 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
         */
        "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
     * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.
     * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.
     * @example <bcm-chip size="medium" kind="filled" status="success">
     *   Success Chip
     * </bcm-chip>
     * @example Dismissible chip
     * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>
     * Dismissible Chip
     * </bcm-chip>
     * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
     * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
     * @prop {boolean} dismissible - Whether the chip can be dismissed
     * @prop {boolean} disabled - Whether the chip is disabled
     * @prop {string} color - Custom color override for the chip
     * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked
     * @csspart chip - The root chip element
     * @csspart dismiss-icon - The dismiss button icon
     */
    interface BcmChip {
        /**
          * Chip color variant
         */
        "color"?: string;
        /**
          * Whether chip is disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Whether chip can be dismissed
          * @default false
         */
        "dismissible"?: boolean;
        /**
          * Chip style variant
          * @default 'filled'
         */
        "kind"?: ChipKind;
        "onBcmDismiss"?: (event: BcmChipCustomEvent<void>) => void;
        /**
          * Chip size variant
          * @default 'medium'
         */
        "size"?: ChipSize;
        /**
          * Chip status
          * @default 'default'
         */
        "status"?: ChipStatus;
    }
    /**
     * @component BCM Divider
     * @description A versatile divider component that creates a visual separation between content.
     * It supports horizontal or vertical orientation with customizable styles and sizes.
     * The component uses CSS variables for theming and Tailwind for styling.
     */
    interface BcmDivider {
        /**
          * @prop {('horizontal'|'vertical')} direction
          * @description Determines the orientation of the divider
          * @default 'horizontal'
          * @example <bcm-divider direction="vertical" />
         */
        "direction"?: 'horizontal' | 'vertical';
        /**
          * @prop {('small'|'medium'|'large')} size
          * @description Controls the thickness of the divider
          * @default 'medium'
          * @values - small: 1px border - medium: 2px border - large: 4px border
          * @example <bcm-divider size="large" />
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * @prop {('solid'|'dashed'|'dotted')} variant
          * @description Sets the border style of the divider
          * @default 'solid'
          * @example <bcm-divider variant="dashed" />
         */
        "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;
    }
    interface BcmDropdown {
        "onBcmDropdownChange"?: (event: BcmDropdownCustomEvent<any>) => void;
        "text"?: string;
    }
    interface BcmDropdownItem {
        /**
          * @default false
         */
        "disabled"?: boolean;
        /**
          * @default false
         */
        "error"?: boolean;
        "icon"?: string;
        "onBcmDropDownItemChange"?: (event: BcmDropdownItemCustomEvent<any>) => void;
        "rightIcons"?: string[];
        /**
          * @default false
         */
        "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
          * @default generateId('input')
         */
        "_id"?: string;
        /**
          * Input autocomplete attribute
         */
        "autocomplete"?: string;
        /**
          * Caption text to display below input
         */
        "captionText"?: string;
        /**
          * ID of associated caption/error text element
         */
        "describedby"?: string;
        /**
          * Whether the input is disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message to display
         */
        "errorMessage"?: string;
        /**
          * Full width input
          * @default false
         */
        "fullWidth"?: boolean;
        /**
          * Input label for accessibility
         */
        "label"?: string;
        /**
          * ID of associated label element
         */
        "labelledby"?: string;
        /**
          * Max value for number input
         */
        "max"?: number;
        /**
          * Max length for text input
         */
        "maxLength"?: number;
        /**
          * Min value for number input
         */
        "min"?: number;
        /**
          * Min length for text input
         */
        "minLength"?: number;
        /**
          * Input name
         */
        "name"?: string;
        "onBcmBlur"?: (event: BcmInputCustomEvent<FocusEvent>) => void;
        "onBcmChange"?: (event: BcmInputCustomEvent<Event>) => void;
        "onBcmFocus"?: (event: BcmInputCustomEvent<FocusEvent>) => void;
        "onBcmInput"?: (event: BcmInputCustomEvent<InputEvent>) => void;
        "onBcmKeyDown"?: (event: BcmInputCustomEvent<KeyboardEvent>) => void;
        "onBcmKeyUp"?: (event: BcmInputCustomEvent<KeyboardEvent>) => void;
        /**
          * Pattern for validation
         */
        "pattern"?: string;
        /**
          * Input placeholder text
         */
        "placeholder"?: string;
        /**
          * Prefix icon class name
         */
        "prefixIcon"?: string;
        /**
          * Whether the input is readonly
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Whether the input is required
          * @default false
         */
        "required"?: boolean;
        /**
          * Controls the input size
          * @default 'medium'
         */
        "size"?: InputSize;
        /**
          * Defines the input's status/state
          * @default 'default'
         */
        "status"?: InputStatus;
        /**
          * Step value for number input
         */
        "step"?: number;
        /**
          * Suffix icon class name
         */
        "suffixIcon"?: string;
        /**
          * HTML input type
          * @default 'text'
         */
        "type"?: InputType;
        /**
          * Whether to use native form validation If false, component will handle validation internally
          * @default true
         */
        "useNativeValidation"?: boolean;
        /**
          * Custom validation function
         */
        "validator"?: (value: string) => string | undefined;
        /**
          * Input value
          * @default ''
         */
        "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 {
        /**
          * @prop {boolean} closeOnEscape - Whether to close when pressing Escape key. Default: true
          * @default true
         */
        "closeOnEscape"?: boolean;
        /**
          * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside. Default: true
          * @default true
         */
        "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
         */
        "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;
        /**
          * @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;
        /**
          * @prop {boolean} visible - Controls the visibility state of the floating element. Can be set programmatically or toggled by user interaction. Default: false
          * @default false
         */
        "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 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 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();
     * });
     * 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 {
        /**
          * @prop {string} cancelText - Text for the cancel button. Default: 'Cancel'
          * @default 'Cancel'
         */
        "cancelText"?: string;
        /**
          * @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;
        /**
          * @prop {string} description - Description text displayed in the body section. Can be overridden by using the 'body' slot. Default: ''
          * @default ''
         */
        "description"?: string;
        /**
          * @prop {string} headerText - Text displayed in the header section. Can be overridden by using the 'header' slot. Default: ''
          * @default ''
         */
        "headerText"?: string;
        /**
          * @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;
        /**
          * @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;
        /**
          * @event bcmOpen - Emitted when the popover is opened. Useful for tracking when the popover becomes visible.
         */
        "onBcmOpen"?: (event: BcmPopConfirmCustomEvent<void>) => void;
        /**
          * @prop {PopConfirmPlacement} placement - Position of the popover relative to the trigger element. Automatically flips if there's not enough space. Default: 'top'
          * @default 'top'
         */
        "placement"?: PopConfirmPlacement;
        /**
          * @prop {boolean} showArrow - Whether to show the arrow pointing to the trigger. Default: true
          * @default true
         */
        "showArrow"?: boolean;
        /**
          * @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"?: PopConfirmSize;
        /**
          * @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"?: PopConfirmStatus;
        /**
          * @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;
    }
    /**
     * @component BcmPopover
     * @description A flexible popover component that displays contextual information or content relative to a target element.
     * 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 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
     * <bcm-popover id="my-popover" trigger="click">
     * <bcm-button>Toggle Me</bcm-button>
     * <span slot="content">Controlled popover</span>
     * </bcm-popover>
     * <script>
     * const popover = document.querySelector('#my-popover');
     * popover.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
     * @csspart content - The content section of the popover, stylable for the main content area
     * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
     */
    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} 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;
        /**
          * @event bcmBeforeClose - Emitted before the popover closes. Useful for performing actions before the popover is hidden.
         */
        "onBcmBeforeClose"?: (event: BcmPopoverCustomEvent<void>) => void;
        /**
          * @event bcmBeforeOpen - Emitted before the popover opens. Useful for performing actions before the popover becomes visible.
         */
        "onBcmBeforeOpen"?: (event: BcmPopoverCustomEvent<void>) => void;
        /**
          * @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;
        /**
          * @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';
        /**
          * @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' | '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' | 'hover focus';
    }
    interface BcmRadio {
        /**
          * @default generateId('bcm-radio')
         */
        "_id"?: string;
        /**
          * Whether the radio button is selected.
          * @prop 
          * @defaultValue false
         */
        "checked"?: boolean;
        /**
          * Whether the radio button is disabled.
          * @prop 
          * @defaultValue false
         */
        "disabled"?: boolean;
        /**
          * Whether the radio button is in an error state.
          * @prop 
          * @defaultValue false
         */
        "error"?: boolean;
        /**
          * The text label to display next to the radio button.
          * @prop 
          * @defaultValue undefined
         */
        "label"?: string;
        /**
          * Position of the label relative to the radio button: 'right' | 'left'.
          * @prop 
          * @defaultValue 'right'
         */
        "labelPosition"?: 'right' | 'left';
        /**
          * The name attribute for the radio input, used to group radio buttons.
          * @prop 
          * @defaultValue undefined
         */
        "name"?: string;
        "onBcmBlur"?: (event: BcmRadioCustomEvent<FocusEvent>) => void;
        "onBcmFocus"?: (event: BcmRadioCustomEvent<FocusEvent>) => void;
        "onBcmRadioChange"?: (event: BcmRadioCustomEvent<void>) => void;
        /**
          * Whether the radio button is readonly.
          * @prop 
          * @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 
          * @defaultValue 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * The value of the radio button, submitted with the form.
          * @prop 
          * @defaultValue undefined
         */
        "value"?: string;
    }
    interface BcmRadioGroup {
        /**
          * Optional caption text to display below the radio group, often used for error messages or hints.
          * @prop 
          * @defaultValue undefined
         */
        "captionText"?: string;
        /**
          * The layout direction of the radio buttons: 'horizontal' | 'vertical'.
          * @prop 
          * @defaultValue 'vertical'
         */
        "direction"?: 'horizontal' | 'vertical';
        /**
          * Whether the radio group and its radio buttons are disabled.
          * @prop 
          * @defaultValue false
         */
        "disabled"?: boolean;
        /**
          * Whether the radio group is in an error state.
          * @prop 
          * @defaultValue false
         */
        "error"?: boolean;
        /**
          * The label text to display above the radio group.
          * @prop 
          * @defaultValue undefined
         */
        "label"?: string;
        /**
          * The name attribute for the radio group, used to group radio buttons.
          * @prop 
          * @defaultValue undefined
         */
        "name"?: string;
        "onBcmRadioGroupChange"?: (event: BcmRadioGroupCustomEvent<any>) => void;
        /**
          * Whether the radio group is required in a form.
          * @prop 
          * @defaultValue false
         */
        "required"?: boolean;
        /**
          * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
          * @prop 
          * @defaultValue 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * The currently selected value of the radio group.
          * @prop 
          * @defaultValue undefined
         */
        "value"?: string;
    }
    /**
     * Individual segment option component
     */
    interface BcmSegment {
        /**
          * Index of currently active segment (inherited from parent)
          * @default 0
         */
        "activeIndex"?: number;
        /**
          * Disabled state
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Index of this segment (inherited from parent)
          * @default 0
         */
        "index"?: number;
        /**
          * Internal event emitted when segment is clicked
         */
        "onBcmSegmentClick"?: (event: BcmSegmentCustomEvent<string>) => void;
        /**
          * Selected state (controlled by parent)
          * @default false
         */
        "selected"?: boolean;
        /**
          * Size variant (inherited from parent)
          * @default 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * Unique identifier for this segment
         */
        "value": string;
    }
    /**
     * Modern Segmented Picker component with CSS Grid-based indicator
     */
    interface BcmSegmentedPicker {
        /**
          * Disabled state
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Full width flag
          * @default false
         */
        "fullWidth"?: boolean;
        /**
          * Name attribute for form association
         */
        "name"?: string;
        /**
          * Emits when selected segment changes
         */
        "onBcmSegmentChange"?: (event: BcmSegmentedPickerCustomEvent<{ value: string; previousValue: string }>) => void;
        /**
          * Whether this field is required in a form
          * @default false
         */
        "required"?: boolean;
        /**
          * Enable shadow on container
          * @default false
         */
        "shadow"?: boolean;
        /**
          * Size variant
          * @default 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * Selected segment value
         */
        "value"?: string;
    }
    interface BcmShortcut {
        "hotkey"?: string;
        /**
          * @default 'small'
         */
        "size"?: 'small' | 'medium' | 'large';
    }
    /**
     * @component BcmSwitch
     * @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 name="newsletter" label="Receive newsletter?" />
     * @example Required with silent validation (no native bubble)
     * <form>
     * <bcm-switch
     * name="terms"
     * label="Accept terms"
     * 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 {
        /**
          * Unique id (optional). Generated by default.
          * @default generateId('bcm-switch')
         */
        "_id"?: string;
        /**
          * Helper / error text shown under the switch
         */
        "caption"?: string;
        /**
          * Checked state
          * @default false
         */
        "checked"?: boolean;
        /**
          * Disabled state
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Visual error state (manual/external). In silent mode this can be auto-managed.
          * @default false
         */
        "error"?: boolean;
        /**
          * Visible label text
         */
        "label": string;
        /**
          * Position of the label relative to the switch
          * @default 'right'
         */
        "labelPosition"?: 'left' | 'right';
        /**
          * Form field name
         */
        "name"?: string;
        /**
          * Emitted when the switch toggles
         */
        "onBcmSwitchChange"?: (event: BcmSwitchCustomEvent<boolean>) => void;
        /**
          * Optional readonly support
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Required state
          * @default false
         */
        "required"?: boolean;
        /**
          * Size variant
          * @default 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * @default 'native'
         */
        "validationMode"?: 'native' | 'silent' | 'none';
        /**
          * Value submitted when checked
          * @default 'on'
         */
        "value"?: string;
    }
    /**
     * Individual tab component - self-contained with label and content panel
     */
    interface BcmTab {
        /**
          * Active state (controlled by parent)
          * @default false
         */
        "active"?: boolean;
        /**
          * Disabled state
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Label text to display in tab button
         */
        "label": string;
        /**
          * Internal event emitted when tab button is clicked
         */
        "onBcmTabClick"?: (event: BcmTabCustomEvent<string>) => void;
        /**
          * Size variant (inherited from parent)
          * @default 'md'
         */
        "size"?: 'sm' | 'md' | 'lg';
        /**
          * Unique identifier for this tab
         */
        "value": string;
    }
    /**
     * Modern Tabs component with CSS-first approach
     */
    interface BcmTabs {
        /**
          * Emits when active tab changes
         */
        "onBcmTabChange"?: (event: BcmTabsCustomEvent<{
    value: string;
    previousValue: string;
  }>) => void;
        /**
          * Enable shadow on main container
          * @default false
         */
        "shadow"?: boolean;
        /**
          * Tab size variant
          * @default 'md'
         */
        "size"?: 'sm' | 'md' | 'lg';
        /**
          * Active tab value
         */
        "value"?: string;
        /**
          * Visual variant
          * @default 'line'
         */
        "variant"?: 'line' | 'enclosed';
    }
    interface BcmText {
        /**
          * Text overflow behavior
          * @default false
         */
        "overflow"?: boolean;
        /**
          * Text size
          * @default 'medium'
         */
        "size"?: TextSize;
        /**
          * Text content
         */
        "text"?: string;
        /**
          * Text variant
          * @default 'body'
         */
        "variant"?: TextVariant;
    }
    interface BcmTextarea {
        /**
          * Input id
          * @default generateId('textarea')
         */
        "_id"?: string;
        /**
          * Auto grow height based on content
          * @default false
         */
        "autoGrow"?: boolean;
        /**
          * Caption text to display below textarea
         */
        "captionText"?: string;
        /**
          * Textarea cols
         */
        "cols"?: number;
        /**
          * ID of associated caption/error text element
         */
        "describedby"?: string;
        /**
          * Whether the textarea is disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message to display
         */
        "errorMessage"?: string;
        /**
          * Full width textarea
          * @default false
         */
        "fullWidth"?: boolean;
        /**
          * Textarea label for accessibility
         */
        "label"?: string;
        /**
          * ID of associated label element
         */
        "labelledby"?: string;
        /**
          * Max length for text input
         */
        "maxLength"?: number;
        /**
          * Maximum height in rows
         */
        "maxRows"?: number;
        /**
          * Min length for text input
         */
        "minLength"?: number;
        /**
          * Minimum height in rows
         */
        "minRows"?: number;
        /**
          * Input name
         */
        "name"?: string;
        "onBcmBlur"?: (event: BcmTextareaCustomEvent<FocusEvent>) => void;
        "onBcmChange"?: (event: BcmTextareaCustomEvent<Event>) => void;
        "onBcmFocus"?: (event: BcmTextareaCustomEvent<FocusEvent>) => void;
        "onBcmInput"?: (event: BcmTextareaCustomEvent<InputEvent>) => void;
        "onBcmKeyDown"?: (event: BcmTextareaCustomEvent<KeyboardEvent>) => void;
        "onBcmKeyUp"?: (event: BcmTextareaCustomEvent<KeyboardEvent>) => void;
        /**
          * Input placeholder text
         */
        "placeholder"?: string;
        /**
          * Whether the textarea is readonly
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Whether the textarea is required
          * @default false
         */
        "required"?: boolean;
        /**
          * Resize behavior
          * @default 'none'
         */
        "resize"?: TextareaResize;
        /**
          * Textarea rows
          * @default 3
         */
        "rows"?: number;
        /**
          * Show character counter
          * @default true
         */
        "showCounter"?: boolean;
        /**
          * Controls the textarea size
          * @default 'medium'
         */
        "size"?: InputSize1;
        /**
          * Defines the textarea's status/state
          * @default 'default'
         */
        "status"?: InputStatus1;
        /**
          * Custom validation function
         */
        "validator"?: (value: string) => string | undefined;
        /**
          * Textarea value
          * @default ''
         */
        "value"?: string;
    }
    /**
     * @component BcmTooltip
     * @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>
     * <!-- 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.getElementById('myTooltip');
     *   tooltip.show();
     *   setTimeout(() => tooltip.hide(), 2000);
     * </script>
     * <!-- 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 {
        /**
          * 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;
        /**
          * 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"?: TooltipPlacement;
        /**
          * Delay in milliseconds before showing the tooltip Useful to prevent tooltips from appearing on quick mouse movements
          * @default 150
         */
        "showDelay"?: number;
        /**
          * 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"?: TooltipSize;
        /**
          * 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"?: TooltipTrigger;
    }
    interface IntrinsicElements {
        "bcm-accordion": BcmAccordion;
        "bcm-accordion-group": BcmAccordionGroup;
        "bcm-alert": BcmAlert;
        "bcm-attendance": BcmAttendance;
        "bcm-avatar": BcmAvatar;
        "bcm-badge": BcmBadge;
        "bcm-basic-badge": BcmBasicBadge;
        "bcm-button": BcmButton;
        "bcm-button-group": BcmButtonGroup;
        "bcm-checkbox": BcmCheckbox;
        "bcm-chip": BcmChip;
        "bcm-divider": BcmDivider;
        "bcm-drawer": BcmDrawer;
        "bcm-dropdown": BcmDropdown;
        "bcm-dropdown-item": BcmDropdownItem;
        "bcm-file-upload": BcmFileUpload;
        "bcm-input": BcmInput;
        "bcm-linked": BcmLinked;
        "bcm-modal": BcmModal;
        "bcm-pop-confirm": BcmPopConfirm;
        "bcm-popover": BcmPopover;
        "bcm-radio": BcmRadio;
        "bcm-radio-group": BcmRadioGroup;
        "bcm-segment": BcmSegment;
        "bcm-segmented-picker": BcmSegmentedPicker;
        "bcm-shortcut": BcmShortcut;
        "bcm-switch": BcmSwitch;
        "bcm-tab": BcmTab;
        "bcm-tabs": BcmTabs;
        "bcm-text": BcmText;
        "bcm-textarea": BcmTextarea;
        "bcm-tooltip": BcmTooltip;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            /**
             * @component BcmAccordion
             * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation
             * and accessibility features. Offers customizable header, content, and footer areas through slots.
             * @example Basic usage
             * <bcm-accordion>
             * <div slot="title">Accordion Title</div>
             * <div>Content goes here</div>
             * </bcm-accordion>
             * @example With all slots and hint text
             * <bcm-accordion hint-text="Additional information">
             * <div slot="title">Title</div>
             * <div slot="actions">
             * <button>Action</button>
             * </div>
             * <div>Main content</div>
             * <div slot="footer">Footer content</div>
             * </bcm-accordion>
             * @example Event handling
             * // Listen to accordion state changes
             * const accordion = document.querySelector('bcm-accordion');
             * accordion.addEventListener('bcmAccordionChange', (event) => {
             * const { expanded, source } = event.detail;
             * console.log('Accordion expanded:', expanded);
             * console.log('Changed accordion:', source);
             * });
             * // Programmatically control accordion
             * await accordion.toggle(); // Toggle state
             * await accordion.expand(); // Expand accordion
             * await accordion.collapse(); // Collapse accordion
             * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)
             * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)
             * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided
             * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes
             * @eventProperty {boolean} expanded - Current expanded state
             * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed
             * @csspart container - The root container element
             * @csspart header - The header section with title and actions
             * @csspart content - The collapsible content section
             * @csspart footer - The footer section with hint text or footer slot
             * @csspart section - Container for header content sections
             * @csspart icon - The expand/collapse chevron icon
             * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)
             * @css {string} --bcm-accordion-bg - Background color of the accordion header
             * @css {string} --bcm-accordion-text - Text color of the accordion
             * @css {string} --bcm-accordion-footer-bg - Background color of the footer section
             * @methods toggle() - Toggles the accordion's expanded state
             * expand() - Expands the accordion if collapsed
             * collapse() - Collapses the accordion if expanded
             */
            "bcm-accordion": LocalJSX.BcmAccordion & JSXBase.HTMLAttributes<HTMLBcmAccordionElement>;
            /**
             * @component BcmAccordionGroup
             * @description A container component that manages a group of accordions. Provides single/multiple expansion 
             * modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.
             * @example Basic usage - Single expansion mode
             * <bcm-accordion-group>
             * <bcm-accordion>
             * <div slot="title">Section 1</div>
             * <div>Content 1</div>
             * </bcm-accordion>
             * <bcm-accordion>
             * <div slot="title">Section 2</div>
             * <div>Content 2</div>
             * </bcm-accordion>
             * </bcm-accordion-group>
             * @example Multiple expansion mode
             * <bcm-accordion-group multi={true}>
             * <bcm-accordion>...</bcm-accordion>
             * <bcm-accordion>...</bcm-accordion>
             * </bcm-accordion-group>
             * @example Event handling
             * // Listen to accordion group changes
             * const accordionGroup = document.querySelector('bcm-accordion-group');
             * accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {
             * const { expanded, changed, expandedItems, expandedCount } = event.detail;
             * console.log('Accordion expanded state:', expanded);
             * console.log('Changed accordion:', changed);
             * console.log('Currently expanded accordions:', expandedItems);
             * console.log('Number of expanded accordions:', expandedCount);
             * });
             * // Using methods
             * await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)
             * await accordionGroup.collapseAll(); // Collapses all accordions
             * const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions
             * @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)
             * @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes
             * @eventProperty {boolean} expanded - Current expanded state of the changed accordion
             * @eventProperty {HTMLElement} changed - The accordion element that triggered the change
             * @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements
             * @eventProperty {number} expandedCount - Number of currently expanded accordions
             * @method expandAll() - Expands all accordions (only available in multi mode)
             * @method collapseAll() - Collapses all accordions
             * @method getExpandedItems() - Returns array of currently expanded accordions
             * @csspart container - The accordion group container element
             * @css {string} --bcm-accordion-border - Border color of the accordion group
             * @css {string} --bcm-accordion-radius - Border radius of the accordion group
             */
            "bcm-accordion-group": LocalJSX.BcmAccordionGroup & JSXBase.HTMLAttributes<HTMLBcmAccordionGroupElement>;
            /**
             * Alert component that displays messages with different statuses and styles
             * @class BcmAlert
             */
            "bcm-alert": LocalJSX.BcmAlert & JSXBase.HTMLAttributes<HTMLBcmAlertElement>;
            /**
             * @component BcmAttendance
             * @description Visualizes attendance history (AM/PM status) for a series of days.
             * Supports different status types (present, late, absent, etc.) with color-coded indicators.
             * Can handle data via JSON string or direct object array.
             * @example Basic usage
             * <bcm-attendance data='[{"weekday":"Mon", "am":"present", "pm":"absent"}]'></bcm-attendance>
             * @example With specific statuses
             * <bcm-attendance data='[
             * {"weekday":"Mon", "am":"present", "pm":"present"},
             * {"weekday":"Tue", "am":"late", "pm":"present"}
             * ]'></bcm-attendance>
             */
            "bcm-attendance": LocalJSX.BcmAttendance & JSXBase.HTMLAttributes<HTMLBcmAttendanceElement>;
            "bcm-avatar": LocalJSX.BcmAvatar & JSXBase.HTMLAttributes<HTMLBcmAvatarElement>;
            /**
             * @component BcmBadge
             * @description A versatile badge component that can be positioned around its container.
             * Supports different sizes, variants (dot/text), colors, and positioning options.
             * Can display status indicators with optional blinking animation.
             * @example Basic usage
             * <bcm-badge color="primary" position="top-right">
             * <div>Container Content</div>
             * <span slot="badge">New</span>
             * </bcm-badge>
             * @example Status indicator with blink
             * <bcm-badge variant="dot" color="success" blink={true} status="Online">
             * <div>User Profile</div>
             * </bcm-badge>
             */
            "bcm-badge": LocalJSX.BcmBadge & JSXBase.HTMLAttributes<HTMLBcmBadgeElement>;
            /**
             * @component BcmBasicBadge
             * @description A basic badge component that can be used as a status indicator or to highlight content.
             * Supports dot and text variants with different sizes and color options.
             * @example Basic usage
             * <bcm-basic-badge size="medium" color="primary">
             * New
             * </bcm-basic-badge>
             * @example Dot variant
             * <bcm-basic-badge variant="dot" color="success" />
             */
            "bcm-basic-badge": LocalJSX.BcmBasicBadge & JSXBase.HTMLAttributes<HTMLBcmBasicBadgeElement>;
            "bcm-button": LocalJSX.BcmButton & JSXBase.HTMLAttributes<HTMLBcmButtonElement>;
            "bcm-button-group": LocalJSX.BcmButtonGroup & JSXBase.HTMLAttributes<HTMLBcmButtonGroupElement>;
            /**
             * @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>;
            /**
             * @component BcmChip
             * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.
             * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.
             * @example <bcm-chip size="medium" kind="filled" status="success">
             *   Success Chip
             * </bcm-chip>
             * @example Dismissible chip
             * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>
             * Dismissible Chip
             * </bcm-chip>
             * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
             * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
             * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
             * @prop {boolean} dismissible - Whether the chip can be dismissed
             * @prop {boolean} disabled - Whether the chip is disabled
             * @prop {string} color - Custom color override for the chip
             * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked
             * @csspart chip - The root chip element
             * @csspart dismiss-icon - The dismiss button icon
             */
            "bcm-chip": LocalJSX.BcmChip & JSXBase.HTMLAttributes<HTMLBcmChipElement>;
            /**
             * @component BCM Divider
             * @description A versatile divider component that creates a visual separation between content.
             * It supports horizontal or vertical orientation with customizable styles and sizes.
             * 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 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 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();
             * });
             * document.getElementById('hideBtn').addEventListener('click', () => {
             * popconfirm.hide();
             * });
             * </script>
             * ```
             * @example Without Status Icon
             * ```html
             * <bcm-pop-confirm
             * header-text="Simple Confirmation"
             * description="No status icon shown"
             * status-icon={false}
             * >
             * <bcm-button>Click Me</bcm-button>
             * </bcm-pop-confirm>
             * ```
             * @example Different Placements
             * ```html
             * <bcm-pop-confirm placement="top" header-text="Top" description="Opens above">
             * <bcm-button>Top</bcm-button>
             * </bcm-pop-confirm>
             * <bcm-pop-confirm placement="right" header-text="Right" description="Opens to the right">
             * <bcm-button>Right</bcm-button>
             * </bcm-pop-confirm>
             * <bcm-pop-confirm placement="bottom" header-text="Bottom" description="Opens below">
             * <bcm-button>Bottom</bcm-button>
             * </bcm-pop-confirm>
             * <bcm-pop-confirm placement="left" header-text="Left" description="Opens to the left">
             * <bcm-button>Left</bcm-button>
             * </bcm-pop-confirm>
             * ```
             */
            "bcm-pop-confirm": LocalJSX.BcmPopConfirm & JSXBase.HTMLAttributes<HTMLBcmPopConfirmElement>;
            /**
             * @component BcmPopover
             * @description A flexible popover component that displays contextual information or content relative to a target element.
             * 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 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
             * <bcm-popover id="my-popover" trigger="click">
             * <bcm-button>Toggle Me</bcm-button>
             * <span slot="content">Controlled popover</span>
             * </bcm-popover>
             * <script>
             * const popover = document.querySelector('#my-popover');
             * popover.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
             * @csspart content - The content section of the popover, stylable for the main content area
             * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
             */
            "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-shortcut": LocalJSX.BcmShortcut & JSXBase.HTMLAttributes<HTMLBcmShortcutElement>;
            /**
             * @component BcmSwitch
             * @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 name="newsletter" label="Receive newsletter?" />
             * @example Required with silent validation (no native bubble)
             * <form>
             * <bcm-switch
             * name="terms"
             * label="Accept terms"
             * 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>;
            /**
             * Individual tab component - self-contained with label and content panel
             */
            "bcm-tab": LocalJSX.BcmTab & JSXBase.HTMLAttributes<HTMLBcmTabElement>;
            /**
             * Modern Tabs component with CSS-first approach
             */
            "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 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>
             * <!-- 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.getElementById('myTooltip');
             *   tooltip.show();
             *   setTimeout(() => tooltip.hide(), 2000);
             * </script>
             * <!-- 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>;
        }
    }
}