bromcom-ui-next 0.1.29 → 0.1.31

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

@@ -1,103 +1,90 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @description Tab interface component
- * @slot - Default slot for content area
- * @slot tabs-list - Special slot for tab list
+ * Modern Tabs component with CSS-first approach
+ * @slot - Default slot for bcm-tab components
  */
-export declare class BcmTabs implements ComponentInterface {
+export declare class BcmTabs {
     el: HTMLElement;
     /**
-     * Default active tab value
+     * Active tab value
      */
-    defaultValue: string;
+    value: string;
     /**
-     * Tab size
+     * Tab size variant
      */
-    size: 'small' | 'medium' | 'large';
+    size: 'sm' | 'md' | 'lg';
     /**
-     * Tab variant - controls width behavior
+     * Visual variant
      */
-    variant: 'full-width' | 'auto-width';
+    variant: 'line' | 'enclosed';
     /**
-     * Whether to enable smooth animations for inkbar and transitions
+     * Enable shadow on main container
      */
-    smooth: boolean;
+    shadow: boolean;
     /**
-     * Triggers when tab changes
+     * Emits when active tab changes
      */
     bcmTabChange: EventEmitter<{
-        activeTab: string;
-        element: HTMLBcmTabsTriggerElement;
-        previousTab?: string;
+        value: string;
+        previousValue: string;
     }>;
-    /**
-     * Active tab value
-     */
-    activeTab: string;
-    /**
-     * Previous active tab value
-     */
-    previousTab: string;
-    private triggers;
-    private contents;
-    private tabsList;
+    tabs: Array<{
+        value: string;
+        label: string;
+        disabled: boolean;
+    }>;
+    activeIndex: number;
+    private tabElements;
     componentWillLoad(): void;
     componentDidLoad(): void;
     /**
-     * Refreshes DOM element references
+     * Discovers all bcm-tab children
      */
-    private refreshElementReferences;
+    private discoverTabs;
     /**
-     * Establishes relationships between tabs and content
+     * Updates the active index based on current value
      */
-    private setupRelations;
-    private updateTriggerProperties;
-    private updateTabsListProperties;
-    handleSizeChange(): void;
-    handleVariantChange(): void;
-    handleSmoothChange(): void;
-    disableTab(value: string): Promise<void>;
-    enableTab(value: string): Promise<void>;
+    private updateActiveIndex;
     /**
-     * Disables all tabs
+     * Updates active/inactive state of all tab elements
      */
-    disableAllTabs(): Promise<void>;
-    /**
-     * Enables all tabs
-     */
-    enableAllTabs(): Promise<void>;
-    /**
-     * Returns the active tab value
-     */
-    getActiveTab(): Promise<string>;
+    private updateTabStates;
+    handleValueChange(newValue: string, oldValue: string): void;
+    handleSizeChange(): void;
     /**
-     * Sets the active tab
+     * Propagates parent props to child tabs
      */
-    setActiveTab(value: string): Promise<void>;
+    private propagatePropsToTabs;
     /**
-     * Updates tab status
+     * Updates CSS custom properties for inkbar positioning
      */
-    private updateTabStatus;
-    handleResize(): void;
+    private updateCSSVariables;
     /**
-     * Triggered when a tab is selected
+     * Handles tab click events from children
      */
-    handleTabSelected(event: CustomEvent<string>): void;
+    handleTabClick(event: CustomEvent<string>): void;
     /**
-     * Updates content visibility
+     * Keyboard navigation support
      */
-    private updateContentVisibility;
+    handleKeyDown(ev: KeyboardEvent): void;
+    private getNextEnabledTabIndex;
+    private getPreviousEnabledTabIndex;
+    private getFirstEnabledTabIndex;
+    private getLastEnabledTabIndex;
+    private focusTabAtIndex;
     /**
-     * Updates inkbar position
+     * Public method to programmatically set active tab
      */
-    private updateInkbar;
+    setActiveTab(value: string): Promise<void>;
     /**
-     * Updates inkbar position and size
+     * Public method to get active tab value
      */
-    private updateInkbarPosition;
+    getActiveTab(): Promise<string>;
     /**
-     * Tab container class
+     * Tailwind class configuration
      */
-    private tabClass;
+    private containerClass;
+    private tabsListClass;
+    private inkbarClass;
     render(): any;
 }

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

@@ -8,6 +8,7 @@ export declare class BcmTextarea {
     isValid: boolean;
     internalStatus: InputStatus;
     internalErrorMessage: string;
+    internals: ElementInternals;
     /** Textarea value */
     value: string;
     /** Textarea rows */
@@ -73,6 +74,10 @@ export declare class BcmTextarea {
     setFocus(): Promise<void>;
     setBlur(): Promise<void>;
     select(): Promise<void>;
+    /**
+     * When the parent <form> is reset, reset textarea state as well.
+     */
+    formResetCallback(): void;
     private adjustHeight;
     private validateInput;
     private onChange;

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

@@ -1,86 +1,177 @@
-import { ComponentInterface } from '../../stencil-public-runtime';
+export type TooltipTrigger = 'hover' | 'click';
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipSize = 'small' | 'medium' | 'large';
 /**
  * @component BcmTooltip
- * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.
- * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ * @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 Basic Hover Tooltip
- * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
- *   <bcm-button>Hover Me</bcm-button>
+ * @slot - The trigger element that will show the tooltip
+ * @slot content - Custom rich content for the tooltip (overrides message prop)
+ *
+ * @part tooltip - The tooltip container element (for custom styling)
+ * @part arrow - The arrow pointer element
+ * @part content - The content wrapper element
+ *
+ * @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>
  *
- * @example Click Tooltip with Programmatic Control
- * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
- *   <bcm-button>Click Me</bcm-button>
+ * <!-- Click trigger with custom delays -->
+ * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+ *   <span>Click me</span>
+ * </bcm-tooltip>
+ *
+ * <!-- Mouse following mode -->
+ * <bcm-tooltip follow={true} message="I follow your cursor!">
+ *   <div>Move your mouse here</div>
+ * </bcm-tooltip>
+ *
+ * <!-- Programmatic control -->
+ * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+ *   <span>Trigger</span>
  * </bcm-tooltip>
  * <script>
- *   const tooltip = document.querySelector('#my-tooltip');
- *   tooltip.openTooltip(); // Opens the tooltip
- *   tooltip.closeTooltip(); // Closes the tooltip
+ *   const tooltip = document.getElementById('myTooltip');
+ *   tooltip.show();
+ *   setTimeout(() => tooltip.hide(), 2000);
  * </script>
  *
- * @slot - Default slot for the target element that triggers the tooltip
- * @slot tooltip - Slot for custom tooltip content
- *
- * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
- * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+ * <!-- Custom styling with CSS parts -->
+ * <style>
+ *   bcm-tooltip::part(tooltip) {
+ *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *     border-radius: 12px;
+ *   }
+ *   bcm-tooltip::part(arrow) {
+ *     background: #667eea;
+ *   }
+ * </style>
+ * ```
  */
-export declare class Tooltip implements ComponentInterface {
-    el: HTMLElement;
+export declare class BcmTooltip {
+    host: HTMLBcmTooltipElement;
+    private tooltipRef?;
+    private arrowRef?;
+    private triggerRef?;
+    private cleanupAutoUpdate?;
+    private showTimeout?;
+    private hideTimeout?;
+    private mouseX;
+    private mouseY;
+    private rafId?;
+    private tooltipId;
     /**
-     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.
-     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
-     * Default: 'hover'
+     * How the tooltip is triggered
+     * - 'hover': Shows on mouse enter, hides on mouse leave
+     * - 'click': Toggles on click, closes on outside click or Escape key
      */
-    trigger: 'click' | 'hover';
+    trigger: TooltipTrigger;
     /**
-     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.
-     * Default: 'top'
+     * 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
      */
-    placement: 'top' | 'right' | 'bottom' | 'left';
+    placement: TooltipPlacement;
     /**
-     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.
-     * Controls the text size and padding of the tooltip content.
-     * Default: 'medium'
+     * Size variant of the tooltip
+     * - 'small': Compact tooltip with minimal padding (text-size-3, py-1 px-2)
+     * - 'medium': Standard tooltip size (text-size-4, py-1.5 px-3)
+     * - 'large': Larger tooltip for more content (text-size-5, py-2 px-4)
      */
-    size: 'small' | 'medium' | 'large';
+    size: TooltipSize;
     /**
-     * @prop {string} message - Custom text for the tooltip content.
-     * Used as fallback content if the 'tooltip' slot is not provided.
+     * Simple text message to display in the tooltip
+     * Can be overridden by slotting content into the 'content' slot
      */
-    message: string;
+    message?: string;
     /**
-     * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.
-     * Helps prevent flickering on quick mouse movements.
-     * Default: 150
+     * Delay in milliseconds before showing the tooltip
+     * Useful to prevent tooltips from appearing on quick mouse movements
      */
     showDelay: number;
-    open: boolean;
-    private tooltipElement;
-    private arrowElement;
-    private targetElement;
-    private hoverTimeout;
-    private cleanupAutoUpdate;
-    disconnectedCallback(): void;
-    private updateOutsideClickListener;
-    private toggleTooltip;
-    private showTooltip;
-    private hideTooltip;
     /**
-     * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.
-     * Triggers the showTooltip logic with the specified delay.
-     * @returns {Promise<void>} A promise that resolves when the tooltip is opened.
+     * Delay in milliseconds before hiding the tooltip
+     * Provides a grace period for mouse movements
      */
-    openTooltip(): Promise<void>;
+    hideDelay: number;
     /**
-     * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.
-     * Triggers the hideTooltip logic with the specified delay.
-     * @returns {Promise<void>} A promise that resolves when the tooltip is closed.
+     * Whether to show an arrow pointing to the trigger element
+     * Note: Arrow is automatically hidden in 'follow' mode
      */
-    closeTooltip(): Promise<void>;
+    arrow: boolean;
+    /**
+     * Disables the tooltip, preventing it from showing
+     * Useful for conditional tooltips based on application state
+     */
+    disabled: boolean;
+    /**
+     * Distance in pixels between the tooltip and the trigger element
+     * Also used as the offset in 'follow' mode
+     */
+    offset: number;
+    /**
+     * 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
+     */
+    follow: boolean;
+    isOpen: boolean;
+    handleDisabledChange(disabled: boolean): void;
+    handleTriggerChange(): void;
+    handleOpenChange(open: boolean): Promise<void>;
+    /**
+     * Programmatically shows the tooltip
+     * Respects the showDelay prop and disabled state
+     */
+    show(): Promise<void>;
+    /**
+     * Programmatically hides the tooltip
+     * Respects the hideDelay prop
+     */
+    hide(): Promise<void>;
+    /**
+     * Toggles the tooltip visibility
+     * If open, hides it; if closed, shows it
+     */
+    toggle(): Promise<void>;
+    private clearTimeouts;
+    private startAutoUpdate;
+    private stopAutoUpdate;
+    private startFollowing;
+    private stopFollowing;
+    private updatePosition;
+    private setupTriggerListeners;
     private handleSlotChange;
+    private removeTriggerListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleMouseMove;
+    private handleClick;
     private handleOutsideClick;
-    private updatePosition;
+    private handleKeyDown;
+    private handleToggle;
+    private setupOutsideClickListener;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     private tooltipClass;
     render(): any;
 }

package/dist/types/components/upload/file-upload.component.d.ts

@@ -0,0 +1,107 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+export type BcmUploadStatus = 'uploading' | 'uploaded' | 'error';
+export interface BcmUploadItem {
+    id: string;
+    file: File;
+    status: BcmUploadStatus;
+    progress?: number;
+}
+export interface BcmUploadErrorMessages {
+    /**
+     * Error message shown when a file exceeds the maxSize limit.
+     */
+    maxSize?: string;
+    /**
+     * Error message shown when file type is not allowed by `accept`.
+     */
+    type?: string;
+    /**
+     * Error message shown when `maxFileCount` is exceeded.
+     */
+    maxFileCount?: string;
+    /**
+     * Error message used for `required` validation when no file is selected.
+     */
+    required?: string;
+}
+export declare class BcmFileUpload implements ComponentInterface {
+    host: HTMLElement;
+    internals: ElementInternals;
+    private fileInput?;
+    private uploadTimer?;
+    private uploadZoneRef?;
+    name: string;
+    label: string;
+    caption?: string;
+    multiple: boolean;
+    accept: string;
+    maxSize: number;
+    required: boolean;
+    disabled: boolean;
+    size: 'medium' | 'small';
+    /**
+     * Reserved for future backend upload integration.
+     * Currently does not affect component behavior.
+     */
+    uploadUrl?: string;
+    /**
+     * Maximum number of files allowed in total.
+     * Only applied when `multiple` is true.
+     */
+    maxFileCount?: number;
+    /**
+     * Allows consumers to override default error messages.
+     */
+    customErrorMessages?: BcmUploadErrorMessages;
+    private files;
+    private dragActive;
+    private maxSizeError;
+    private typeError;
+    private maxFileCountError;
+    bcmFileChange: EventEmitter<File[]>;
+    bcmFileRemoved: EventEmitter<BcmUploadItem>;
+    bcmUploadCanceled: EventEmitter<BcmUploadItem>;
+    bcmFocus: EventEmitter<FocusEvent>;
+    bcmBlur: EventEmitter<FocusEvent>;
+    private internalMaxSizeInBytes;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    handleMaxSizeChange(): void;
+    /**
+     * Normalize and check a file against the `accept` attribute.
+     */
+    private isFileAccepted;
+    /**
+     * Update form value and validity state for form-associated behavior.
+     */
+    private updateFormValueAndValidity;
+    private emitChange;
+    /**
+     * Simulate upload progress. Replace with real upload logic if needed.
+     */
+    private startFakeUpload;
+    /**
+     * Add files from input or drop.
+     */
+    private addFiles;
+    private removeFile;
+    private cancelUpload;
+    private onFileInputChange;
+    private downloadFile;
+    private handleDrop;
+    private handleDragOver;
+    private handleDragLeave;
+    private openFileDialog;
+    formResetCallback(): void;
+    /**
+     * When the browser or user calls element.focus(),
+     * move focus to the upload zone.
+     */
+    focus(options?: FocusOptions): void;
+    private handleFocus;
+    private handleBlur;
+    private renderErrors;
+    private renderUploadZone;
+    private renderFileRow;
+    render(): any;
+}