bromcom-ui-next 0.1.29 → 0.1.31

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

@@ -2,7 +2,8 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
  * @component BcmPopover
  * @description A flexible popover component that displays contextual information or content relative to a target element.
- * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ * 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">
@@ -11,8 +12,8 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
  *   <span slot="content">This is a simple popover content.</span>
  * </bcm-popover>
  *
- * @example Hover Popover with Props
- * <bcm-popover trigger="hover" hover-delay="200" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
+ * @example Hover Popover with Delays
+ * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
  *   <bcm-button>Hover Me</bcm-button>
  * </bcm-popover>
  *
@@ -23,8 +24,9 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
  * </bcm-popover>
  * <script>
  *   const popover = document.querySelector('#my-popover');
- *   popover.openPopup(); // Opens the popover
- *   popover.closePopup(); // Closes the popover
+ *   popover.show(); // Opens the popover
+ *   popover.hide(); // Closes the popover
+ *   popover.toggle(); // Toggles the popover
  * </script>
  *
  * @slot - Default slot for the target element that triggers the popover
@@ -37,12 +39,14 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
  * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
  */
 export declare class Popover implements ComponentInterface {
-    el: HTMLElement;
-    private targetElement;
-    private popoverElement;
-    private arrowElement;
-    private hoverTimeout;
-    private cleanupAutoUpdate;
+    host: HTMLElement;
+    private triggerRef?;
+    private popoverRef?;
+    private arrowRef?;
+    private cleanupAutoUpdate?;
+    private showTimeout?;
+    private hideTimeout?;
+    private popoverId;
     /**
      * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.
      * Controls the text size and padding of the popover content.
@@ -56,62 +60,113 @@ export declare class Popover implements ComponentInterface {
      */
     placement: 'top' | 'right' | 'bottom' | 'left';
     /**
-     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.
-     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+     * @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'
      */
-    trigger: 'click' | 'hover';
+    trigger: 'click' | 'hover' | 'hover focus';
     /**
-     * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.
-     * Adds a delay to prevent flickering on quick mouse movements.
-     * Default: 150
+     * @prop {number} showDelay - Delay in milliseconds before showing the popover.
+     * Useful to prevent popovers from appearing on quick mouse movements.
+     * Default: 0
      */
-    hoverDelay: number;
+    showDelay: number;
     /**
-     * @prop {boolean} open - Indicates whether the popover is currently open.
-     * Can be set programmatically or toggled by user interaction. Mutable.
+     * @prop {number} hideDelay - Delay in milliseconds before hiding the popover.
+     * Provides a grace period for mouse movements.
+     * Default: 0
+     */
+    hideDelay: number;
+    /**
+     * @prop {boolean} open - Controls the open state of the popover.
+     * Can be set programmatically or toggled by user interaction.
      * Default: false
      */
     open: boolean;
+    /**
+     * @prop {boolean} closeOnOutsideClick - Whether to close the popover when clicking outside.
+     * Default: true
+     */
+    closeOnOutsideClick: boolean;
+    /**
+     * @prop {boolean} closeOnEscape - Whether to close the popover when pressing Escape key.
+     * Default: true
+     */
+    closeOnEscape: boolean;
     /**
      * @prop {string} headerText - Custom text for the popover header.
      * Used as fallback content if the 'header' slot is not provided.
      */
-    headerText: string;
+    headerText?: string;
     /**
      * @prop {string} message - Custom text for the popover content.
      * Used as fallback content if the 'content' slot is not provided.
      */
-    message: string;
+    message?: string;
+    /**
+     * @prop {boolean} arrow - Whether to show an arrow pointing to the trigger element.
+     * Default: true
+     */
+    arrow: boolean;
+    isOpen: boolean;
     /**
-     * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.
+     * @event bcmBeforeOpen - Emitted before the popover opens.
+     * Useful for performing actions before the popover becomes visible.
+     */
+    bcmBeforeOpen: EventEmitter<void>;
+    /**
+     * @event bcmOpen - Emitted when the popover is opened.
      * Useful for tracking when the popover becomes visible.
      */
-    bcmPopoverOpen: EventEmitter<void>;
+    bcmOpen: EventEmitter<void>;
+    /**
+     * @event bcmBeforeClose - Emitted before the popover closes.
+     * Useful for performing actions before the popover is hidden.
+     */
+    bcmBeforeClose: EventEmitter<void>;
     /**
-     * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.
+     * @event bcmClose - Emitted when the popover is closed.
      * Useful for tracking when the popover is hidden.
      */
-    bcmPopoverClose: EventEmitter<void>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private togglePopover;
-    private showPopover;
-    private hidePopover;
+    bcmClose: EventEmitter<void>;
+    handleOpenChange(newValue: boolean): void;
+    private showInternal;
+    private hideInternal;
+    /**
+     * Programmatically shows the popover.
+     * Respects the showDelay prop.
+     */
+    show(): Promise<void>;
     /**
-     * @method {Promise<void>} openPopup - Programmatically opens the popover.
-     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
-     * @returns {Promise<void>} A promise that resolves when the popover is opened.
+     * Programmatically hides the popover.
+     * Respects the hideDelay prop.
      */
-    openPopup(): Promise<void>;
+    hide(): Promise<void>;
     /**
-     * @method {Promise<void>} closePopup - Programmatically closes the popover.
-     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
-     * @returns {Promise<void>} A promise that resolves when the popover is closed.
+     * Toggles the popover visibility.
      */
-    closePopup(): Promise<void>;
+    toggle(): Promise<void>;
+    private clearTimeouts;
+    private startAutoUpdate;
+    private stopAutoUpdate;
     private handleSlotChange;
+    private setupTriggerListeners;
+    private removeTriggerListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handlePopoverMouseEnter;
+    private handlePopoverMouseLeave;
+    private handleTriggerClick;
+    private handleFocus;
+    private handleBlur;
+    private setupAriaAttributes;
+    handleKeyDown(event: KeyboardEvent): void;
     private handleOutsideClick;
+    private addOutsideClickListener;
+    private removeOutsideClickListener;
+    private handleToggle;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     private updatePosition;
     private popoverClass;
     render(): any;

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

@@ -41,6 +41,8 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 export declare class BcmRadio implements ComponentInterface {
     host: HTMLBcmRadioElement;
+    internals: ElementInternals;
+    _id?: string;
     /**
      * The text label to display next to the radio button.
      * @prop
@@ -95,10 +97,29 @@ export declare class BcmRadio implements ComponentInterface {
      * @defaultValue false
      */
     error: boolean;
+    /**
+     * Whether at least one radio in this group is required.
+     * (HTML)
+     */
+    required: boolean;
+    /** Internal checked state to control visuals + form internals */
+    internalChecked: boolean;
     bcmRadioChange: EventEmitter<void>;
     bcmBlur: EventEmitter<FocusEvent>;
     bcmFocus: EventEmitter<FocusEvent>;
+    private inputEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     private handleClick;
+    private updateFormValueAndValidity;
+    private isGroupRequired;
+    private isGroupChecked;
+    private isGroupLeader;
+    formResetCallback(): void;
+    onCheckedChange(newVal: boolean): void;
+    onInternalCheckedChange(): void;
+    private syncNativeChecked;
+    private uncheckSiblings;
     private getRadioStyle;
     private getRadioClass;
     render(): any;

package/dist/types/components/segmented-picker/segment.component.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Individual segment option component
+ * @slot - Default slot for segment label content
+ */
+export declare class BcmSegment {
+    el: HTMLElement;
+    /**
+     * Unique identifier for this segment
+     */
+    value: string;
+    /**
+     * Disabled state
+     */
+    disabled: boolean;
+    /**
+     * Selected state (controlled by parent)
+     */
+    selected: boolean;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Index of this segment (inherited from parent)
+     */
+    index: number;
+    /**
+     * Index of currently active segment (inherited from parent)
+     */
+    activeIndex: number;
+    /**
+     * Internal event emitted when segment is clicked
+     */
+    bcmSegmentClick: EventEmitter<string>;
+    private handleClick;
+    /**
+     * Tailwind class configuration
+     */
+    private segmentClass;
+    render(): any;
+}

package/dist/types/components/segmented-picker/segmented-picker.component.d.ts

@@ -1,35 +1,102 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { SegmentedPickerSize } from './types';
+/**
+ * Modern Segmented Picker component with CSS Grid-based indicator
+ * @slot - Default slot for bcm-segment components
+ */
 export declare class BcmSegmentedPicker {
-    host: HTMLElement;
-    /** Controls the component size */
-    size: SegmentedPickerSize;
-    /** The selected option value */
-    value?: string;
-    /** Disabled state */
-    disabled: boolean;
-    /** Full width component */
+    el: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Selected segment value
+     */
+    value: string;
+    /**
+     * Name attribute for form association
+     */
+    name: string;
+    /**
+     * Whether this field is required in a form
+     */
+    required: boolean;
+    /**
+     * Size variant
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Full width flag
+     */
     fullWidth: boolean;
-    /** Change event */
-    bcmChange: EventEmitter<{
+    /**
+     * Disabled state
+     */
+    disabled: boolean;
+    /**
+     * Enable shadow on container
+     */
+    shadow: boolean;
+    /**
+     * Emits when selected segment changes
+     */
+    bcmSegmentChange: EventEmitter<{
         value: string;
+        previousValue: string;
     }>;
-    options: Array<{
+    segments: Array<{
         value: string;
-        label: string;
+        disabled: boolean;
     }>;
-    indicatorStyles: {
-        left: string;
-        width: string;
-        transition: string;
-    };
+    activeIndex: number;
+    private segmentElements;
+    private hiddenInput;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    componentDidUpdate(): void;
-    valueChanged(): void;
-    handleOptionClick(event: CustomEvent<string>): void;
-    private parseOptions;
-    private updateIndicatorPosition;
-    private segmentedClass;
+    /**
+     * When the parent <form> is reset, reset the segmented picker state
+     */
+    formResetCallback(): void;
+    /**
+     * Discovers all bcm-segment children
+     */
+    private discoverSegments;
+    /**
+     * Updates the active index based on current value
+     */
+    private updateActiveIndex;
+    /**
+     * Updates ElementInternals form value and validity
+     */
+    private updateFormValueAndValidity;
+    /**
+     * Updates selected state of all segment elements
+     */
+    private updateSegmentStates;
+    /**
+     * Updates CSS custom properties for indicator positioning
+     */
+    private updateCSSVariables;
+    handleValueChange(newValue: string, oldValue: string): void;
+    handleValidationPropsChange(): void;
+    handleSizeChange(): void;
+    /**
+     * Propagates parent props to child segments
+     */
+    private propagatePropsToSegments;
+    /**
+     * Handles segment click events from children
+     */
+    handleSegmentClick(event: CustomEvent<string>): void;
+    /**
+     * Public method to programmatically set active segment
+     */
+    setValue(value: string): Promise<void>;
+    /**
+     * Public method to get active segment value
+     */
+    getValue(): Promise<string>;
+    /**
+     * Tailwind class configuration
+     */
+    private containerClass;
+    private indicatorClass;
     render(): any;
 }

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

@@ -1,60 +1,100 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+import { BaseChoiceControl } from '../_shared/form/base-choice-control';
 /**
  * @component BcmSwitch
- * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
- * Supports different sizes, label positions, error states, and accessibility features.
+ * @description
+ * A form-associated toggle switch component representing a boolean choice.
+ * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+ *
+ * This component supports **three validation strategies** via `validation-mode`:
+ *
+ * - **`native`**:
+ *   - Uses native browser constraint validation.
+ *   - Sets the underlying input's `required` attribute.
+ *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+ *
+ * - **`silent`**:
+ *   - Does **not** rely on native `required` (prevents the browser bubble).
+ *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+ *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+ *
+ * - **`none`**:
+ *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+ *
+ * ## UI error gating (silent mode)
+ * To avoid showing errors on initial render, the component tracks:
+ * - `touched`: set after the first user interaction
+ * - `submitAttempted`: set when the parent form emits `submit`
+ *
+ * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+ *
+ * ## Value behavior
+ * - When checked, the component submits its `value` (default: `"on"`).
+ * - When unchecked, no value is submitted.
+ * - When disabled, the component does not participate in submission or validity.
  *
  * @example Basic usage
- * <bcm-switch label="Enable notifications"></bcm-switch>
- *
- * @example With error state
- * <bcm-switch
- *   label="Accept terms"
- *   error={true}
- *   caption="You must accept the terms to continue">
- * </bcm-switch>
- *
- * @example Disabled state
- * <bcm-switch
- *   label="Advanced features"
- *   disabled={true}>
- * </bcm-switch>
- *
- * @example With custom size and label position
- * <bcm-switch
- *   label="Dark mode"
- *   size="large"
- *   labelPosition="left">
- * </bcm-switch>
+ * <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
  */
-export declare class BcmSwitch implements ComponentInterface {
-    /** Reference to the host element */
+export declare class BcmSwitch extends BaseChoiceControl implements ComponentInterface {
     el: HTMLElement;
-    /** Whether the switch is checked or not */
-    checked: boolean;
-    /** Whether the switch is disabled */
-    disabled: boolean;
-    /** The name attribute for the hidden input element */
-    name: string;
-    /** The value attribute for the hidden input element */
-    value: string;
-    /** Text label for the switch */
+    internals: ElementInternals;
+    /** Unique id (optional). Generated by default. */
+    _id?: string;
+    /** Visible label text */
     label: string;
     /** Position of the label relative to the switch */
     labelPosition: 'left' | 'right';
-    /** Whether to display the switch in an error state */
+    /** Visual error state (manual/external). In silent mode this can be auto-managed. */
     error: boolean;
-    /** Text to display as an error message when error is true */
+    /** Helper / error text shown under the switch */
     caption?: string;
-    /** Size variant of the switch */
+    /** Size variant */
     size: 'small' | 'medium' | 'large';
-    /** Whether the switch is in readonly mode */
-    readonly: boolean;
-    /** Whether the switch is required in a form */
-    required: boolean;
-    /** Emitted when the switch state changes */
+    /** Internal checked mirror for UI (kept to preserve old DOM/class behavior) */
+    internalChecked: boolean;
+    /** Gate for silent-mode error UI */
+    private touched;
+    /** Gate for silent-mode error UI */
+    private submitAttempted;
+    /** Emitted when the switch toggles */
     bcmSwitchChange: EventEmitter<boolean>;
-    private switchId;
+    private inputEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private onFormSubmit;
+    formResetCallback(): void;
+    protected onBaseCheckedChange(newVal: boolean): void;
+    private syncNativeInput;
+    protected updateFormValueAndValidity(opts?: {
+        setUi?: boolean;
+    }): void;
     private toggleSwitch;
     private switchStyle;
     private switchClass;

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Individual tab component - self-contained with label and content panel
+ * @slot - Default slot for tab content
+ */
+export declare class BcmTab {
+    el: HTMLElement;
+    /**
+     * Unique identifier for this tab
+     */
+    value: string;
+    /**
+     * Label text to display in tab button
+     */
+    label: string;
+    /**
+     * Disabled state
+     */
+    disabled: boolean;
+    /**
+     * Active state (controlled by parent)
+     */
+    active: boolean;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Internal event emitted when tab button is clicked
+     */
+    bcmTabClick: EventEmitter<string>;
+    render(): any;
+}