bromcom-ui-next 0.1.30 → 0.1.31

package/dist/types/components.d.ts

@@ -12,13 +12,13 @@ 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 { SegmentedPickerSize } from "./components/segmented-picker/types";
 import { TextSize, TextVariant } from "./components/text/text.types";
 import { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
 import { TooltipPlacement, TooltipSize, TooltipTrigger } from "./components/tooltip/tooltip.component";
@@ -29,13 +29,13 @@ 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 { SegmentedPickerSize } from "./components/segmented-picker/types";
 export { TextSize, TextVariant } from "./components/text/text.types";
 export { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
 export { TooltipPlacement, TooltipSize, TooltipTrigger } from "./components/tooltip/tooltip.component";
@@ -504,58 +504,122 @@ export namespace Components {
         "status"?: ButtonStatus;
     }
     /**
-     * @description A checkbox component that allows users to select or deselect an option.
-     * It also supports an indeterminate state.
+     * @component BcmCheckbox
+     * @description A form-associated checkbox component representing a boolean choice.
+     * Integrates with native HTML forms via ElementInternals while supporting
+     * **three validation strategies** via `validation-mode`:
+     * - **`native`**
+     *   - Participates in native browser constraint validation.
+     *   - Sets the underlying input's `required`.
+     *   - Browser may show native validation bubbles when submit/reportValidity happens.
+     * - **`silent`**
+     *   - Does **not** set native `required` (prevents browser bubble).
+     *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+     * - **`none`**
+     *   - Value-only mode: submits value but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * - `touched` becomes true after first user interaction
+     * - `submitAttempted` becomes true when the parent form emits `submit`
+     * ## Value behavior
+     * - When checked → submits `value` (default: `"on"`).
+     * - When unchecked → submits no value (`null`).
+     * - When disabled → no submission and no validity participation.
+     * ## Shadow Parts
+     * - `checkbox`  → root container
+     * - `control`   → visual checkbox box
+     * - `icon`      → icon container (check or minus)
+     * - `label`     → label text
+     * - `caption`   → helper/error text (silent mode UI)
+     * - `input`     → hidden native input
+     * @example Basic usage
+     * <bcm-checkbox name="terms" required>
+     * I agree to the terms and conditions
+     * </bcm-checkbox>
+     * @example Silent validation (no native bubble)
+     * <form>
+     * <bcm-checkbox name="newsletter" required validation-mode="silent">
+     * Subscribe to newsletter
+     * </bcm-checkbox>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Value-only mode
+     * <bcm-checkbox name="analytics" validation-mode="none">
+     * Allow analytics
+     * </bcm-checkbox>
      */
     interface BcmCheckbox {
         /**
-          * Unique ID for the component. Automatically generated if not specified.
+          * Unique ID for the component. Automatically generated if not specified. Used to bind the visible label to the internal input.
           * @default generateId('bcm-checkbox')
          */
         "_id"?: string;
         /**
-          * Determines if the checkbox is checked
+          * Helper / error caption (silent mode UI)
+         */
+        "caption"?: string;
+        /**
+          * Checked state
           * @default false
          */
         "checked": boolean;
         /**
-          * Determines if the checkbox is disabled
+          * Disabled state
           * @default false
          */
         "disabled": boolean;
         /**
-          * Indicates if the checkbox is in an error state. This affects the visual styling of the component.
+          * Visual error state. - In `silent` mode this can be managed internally. - In other modes you can set it externally as well.
           * @default false
          */
         "error": boolean;
         /**
-          * Full width checkbox
+          * Makes checkbox occupy full width (if your styles support it).
           * @default false
          */
         "fullWidth": boolean;
         /**
-          * Determines if the checkbox is in an indeterminate state. This is useful when some items in a group of checkboxes are selected and others are not.
+          * Indeterminate (mixed) state. Useful when a group selection is partially selected.
           * @default false
          */
         "indeterminate": boolean;
         /**
-          * Label text to display next to the checkbox
+          * Visible label text (optional). You can also use the default slot.
          */
         "label"?: string;
         /**
-          * Controls the position of the label relative to the checkbox
+          * Label position relative to the checkbox control.
           * @default 'right'
          */
         "labelPosition": 'left' | 'right';
         /**
-          * Name attribute for the checkbox when used in a form
+          * Form field name
          */
-        "name": string;
+        "name"?: string;
+        /**
+          * Optional readonly support
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Required state
+          * @default false
+         */
+        "required": boolean;
         /**
-          * Size variant of the checkbox
+          * Size variant (affects control + typography).
           * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
+        /**
+          * @default 'native'
+         */
+        "validationMode": 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
+         */
+        "value": string;
     }
     /**
      * @component BcmChip
@@ -763,6 +827,56 @@ export namespace Components {
         "selected": boolean;
         "text": string;
     }
+    interface BcmFileUpload {
+        /**
+          * @default '.xls,.pdf'
+         */
+        "accept": string;
+        /**
+          * @default ''
+         */
+        "caption"?: string;
+        /**
+          * Allows consumers to override default error messages.
+         */
+        "customErrorMessages"?: BcmUploadErrorMessages;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Maximum number of files allowed in total. Only applied when `multiple` is true.
+         */
+        "maxFileCount"?: number;
+        /**
+          * @default 2
+         */
+        "maxSize": number;
+        /**
+          * @default false
+         */
+        "multiple": boolean;
+        /**
+          * @default 'file'
+         */
+        "name": string;
+        /**
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * @default 'medium'
+         */
+        "size": 'medium' | 'small';
+        /**
+          * Reserved for future backend upload integration. Currently does not affect component behavior.
+         */
+        "uploadUrl"?: string;
+    }
     interface BcmInput {
         /**
           * Input id
@@ -1406,6 +1520,10 @@ export namespace Components {
         "trigger": 'click' | 'hover' | 'hover focus';
     }
     interface BcmRadio {
+        /**
+          * @default generateId('bcm-radio')
+         */
+        "_id"?: string;
         /**
           * Whether the radio button is selected.
           * @prop 
@@ -1448,6 +1566,11 @@ export namespace Components {
           * @defaultValue false
          */
         "readonly": boolean;
+        /**
+          * Whether at least one radio in this group is required. (HTML)
+          * @default false
+         */
+        "required": boolean;
         /**
           * Defines the size of the radio button: 'small' | 'medium' | 'large'.
           * @prop 
@@ -1527,49 +1650,83 @@ export namespace Components {
          */
         "value": string;
     }
-    interface BcmSegmentedPicker {
+    /**
+     * Individual segment option component
+     */
+    interface BcmSegment {
+        /**
+          * Index of currently active segment (inherited from parent)
+          * @default 0
+         */
+        "activeIndex": number;
         /**
           * Disabled state
           * @default false
          */
         "disabled": boolean;
         /**
-          * Full width component
+          * Index of this segment (inherited from parent)
+          * @default 0
+         */
+        "index": number;
+        /**
+          * Selected state (controlled by parent)
           * @default false
          */
-        "fullWidth": boolean;
+        "selected": boolean;
         /**
-          * Controls the component size
+          * Size variant (inherited from parent)
           * @default 'medium'
          */
-        "size": SegmentedPickerSize;
+        "size": 'small' | 'medium' | 'large';
         /**
-          * The selected option value
+          * Unique identifier for this segment
          */
-        "value"?: string;
+        "value": string;
     }
-    interface BcmSegmentedPickerOption {
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface BcmSegmentedPicker {
         /**
-          * Whether this option is disabled
+          * Disabled state
           * @default false
          */
         "disabled": boolean;
-        "getWidth": () => Promise<number>;
         /**
-          * Option display label
+          * Full width flag
+          * @default false
          */
-        "label"?: string;
+        "fullWidth": boolean;
         /**
-          * Whether this option is selected
+          * 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
          */
-        "selected": boolean;
+        "required": boolean;
+        /**
+          * Public method to programmatically set active segment
+         */
+        "setValue": (value: string) => Promise<void>;
         /**
-          * Controls the option size
+          * Enable shadow on container
+          * @default false
          */
-        "size"?: SegmentedPickerSize;
+        "shadow": boolean;
         /**
-          * Option value
+          * Size variant
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Selected segment value
          */
         "value": string;
     }
@@ -1582,50 +1739,79 @@ export namespace Components {
     }
     /**
      * @component BcmSwitch
-     * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-     * Supports different sizes, label positions, error states, and accessibility features.
+     * @description A form-associated toggle switch component representing a boolean choice.
+     * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+     * This component supports **three validation strategies** via `validation-mode`:
+     * - **`native`**:
+     *   - Uses native browser constraint validation.
+     *   - Sets the underlying input's `required` attribute.
+     *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+     * - **`silent`**:
+     *   - Does **not** rely on native `required` (prevents the browser bubble).
+     *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+     * - **`none`**:
+     *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * To avoid showing errors on initial render, the component tracks:
+     * - `touched`: set after the first user interaction
+     * - `submitAttempted`: set when the parent form emits `submit`
+     * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+     * ## Value behavior
+     * - When checked, the component submits its `value` (default: `"on"`).
+     * - When unchecked, no value is submitted.
+     * - When disabled, the component does not participate in submission or validity.
      * @example Basic usage
-     * <bcm-switch label="Enable notifications"></bcm-switch>
-     * @example With error state
+     * <bcm-switch name="newsletter" label="Receive newsletter?" />
+     * @example Required with silent validation (no native bubble)
+     * <form>
      * <bcm-switch
+     * name="terms"
      * label="Accept terms"
-     * error={true}
-     * caption="You must accept the terms to continue">
-     * </bcm-switch>
-     * @example Disabled state
-     * <bcm-switch
-     * label="Advanced features"
-     * disabled={true}>
-     * </bcm-switch>
-     * @example With custom size and label position
-     * <bcm-switch
-     * label="Dark mode"
-     * size="large"
-     * labelPosition="left">
+     * required
+     * validation-mode="silent">
      * </bcm-switch>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Native validation mode (may show native bubble)
+     * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+     * @example Value-only mode (no validation)
+     * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+     * @csspart base - Root container
+     * @csspart switch-wrapper - Wrapper containing label + track
+     * @csspart input - Hidden native input
+     * @csspart label - Text label
+     * @csspart dot-container - Switch track
+     * @csspart dot - Switch knob
+     * @csspart caption - Helper/error text
      */
     interface BcmSwitch {
         /**
-          * Text to display as an error message when error is true
+          * Unique id (optional). Generated by default.
+          * @default generateId('bcm-switch')
+         */
+        "_id"?: string;
+        /**
+          * Helper / error text shown under the switch
          */
         "caption"?: string;
         /**
-          * Whether the switch is checked or not
+          * Checked state
           * @default false
          */
         "checked": boolean;
         /**
-          * Whether the switch is disabled
+          * Disabled state
           * @default false
          */
         "disabled": boolean;
         /**
-          * Whether to display the switch in an error state
+          * Visual error state (manual/external). In silent mode this can be auto-managed.
           * @default false
          */
         "error": boolean;
         /**
-          * Text label for the switch
+          * Visible label text
          */
         "label": string;
         /**
@@ -1634,128 +1820,93 @@ export namespace Components {
          */
         "labelPosition": 'left' | 'right';
         /**
-          * The name attribute for the hidden input element
+          * Form field name
          */
-        "name": string;
+        "name"?: string;
         /**
-          * Whether the switch is in readonly mode
+          * Optional readonly support
           * @default false
          */
         "readonly": boolean;
         /**
-          * Whether the switch is required in a form
+          * Required state
           * @default false
          */
         "required": boolean;
         /**
-          * Size variant of the switch
+          * Size variant
           * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
-          * The value attribute for the hidden input element
+          * @default 'native'
+         */
+        "validationMode": 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
          */
         "value": string;
     }
     /**
-     * @description Tab interface component
+     * Individual tab component - self-contained with label and content panel
      */
-    interface BcmTabs {
-        /**
-          * Default active tab value
-         */
-        "defaultValue": string;
-        /**
-          * Disables all tabs
-         */
-        "disableAllTabs": () => Promise<void>;
-        "disableTab": (value: string) => Promise<void>;
-        /**
-          * Enables all tabs
-         */
-        "enableAllTabs": () => Promise<void>;
-        "enableTab": (value: string) => Promise<void>;
-        /**
-          * Returns the active tab value
-         */
-        "getActiveTab": () => Promise<string>;
+    interface BcmTab {
         /**
-          * Sets the active tab
+          * Active state (controlled by parent)
+          * @default false
          */
-        "setActiveTab": (value: string) => Promise<void>;
+        "active": boolean;
         /**
-          * Tab size
-          * @default 'medium'
+          * Disabled state
+          * @default false
          */
-        "size": 'small' | 'medium' | 'large';
+        "disabled": boolean;
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Label text to display in tab button
          */
-        "smooth": boolean;
+        "label": string;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Size variant (inherited from parent)
+          * @default 'md'
          */
-        "variant": 'full-width' | 'auto-width';
-    }
-    /**
-     * @description Tab content panel component that displays when its corresponding tab is selected
-     */
-    interface BcmTabsContent {
+        "size": 'sm' | 'md' | 'lg';
         /**
-          * Unique identifier that matches a tab trigger's value Used to associate this content with its corresponding tab
+          * Unique identifier for this tab
          */
         "value": string;
     }
     /**
-     * @description Container component for tab triggers that includes the sliding indicator (inkbar)
+     * Modern Tabs component with CSS-first approach
      */
-    interface BcmTabsList {
+    interface BcmTabs {
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Public method to get active tab value
          */
-        "smooth": boolean;
+        "getActiveTab": () => Promise<string>;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Public method to programmatically set active tab
          */
-        "variant": 'full-width' | 'auto-width';
-    }
-    /**
-     * @description Tab trigger component that functions as a clickable tab button
-     */
-    interface BcmTabsTrigger {
+        "setActiveTab": (value: string) => Promise<void>;
         /**
-          * Whether the tab is currently active
+          * Enable shadow on main container
           * @default false
          */
-        "active": boolean;
+        "shadow": boolean;
         /**
-          * Whether the tab is disabled
-          * @default false
+          * Tab size variant
+          * @default 'md'
          */
-        "disabled": boolean;
+        "size": 'sm' | 'md' | 'lg';
         /**
-          * Size of the tab
-          * @default 'medium'
-         */
-        "size": 'small' | 'medium' | 'large';
-        /**
-          * Whether to enable smooth animations for transitions
-          * @default true
-         */
-        "smooth": boolean;
-        /**
-          * Unique identifier value for the tab
+          * Active tab value
          */
         "value": string;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Visual variant
+          * @default 'line'
          */
-        "variant": 'full-width' | 'auto-width';
+        "variant": 'line' | 'enclosed';
     }
     interface BcmText {
         /**
@@ -2042,6 +2193,10 @@ 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;
@@ -2070,25 +2225,25 @@ export interface BcmRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmRadioGroupElement;
 }
-export interface BcmSegmentedPickerCustomEvent<T> extends CustomEvent<T> {
+export interface BcmSegmentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmSegmentedPickerElement;
+    target: HTMLBcmSegmentElement;
 }
-export interface BcmSegmentedPickerOptionCustomEvent<T> extends CustomEvent<T> {
+export interface BcmSegmentedPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmSegmentedPickerOptionElement;
+    target: HTMLBcmSegmentedPickerElement;
 }
 export interface BcmSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmSwitchElement;
 }
-export interface BcmTabsCustomEvent<T> extends CustomEvent<T> {
+export interface BcmTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmTabsElement;
+    target: HTMLBcmTabElement;
 }
-export interface BcmTabsTriggerCustomEvent<T> extends CustomEvent<T> {
+export interface BcmTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBcmTabsTriggerElement;
+    target: HTMLBcmTabsElement;
 }
 export interface BcmTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -2317,11 +2472,52 @@ declare global {
         new (): HTMLBcmButtonGroupElement;
     };
     interface HTMLBcmCheckboxElementEventMap {
-        "bcmCheckboxChange": { element: any; checked: boolean };
+        "bcmCheckboxChange": { element: HTMLInputElement; checked: boolean };
     }
     /**
-     * @description A checkbox component that allows users to select or deselect an option.
-     * It also supports an indeterminate state.
+     * @component BcmCheckbox
+     * @description A form-associated checkbox component representing a boolean choice.
+     * Integrates with native HTML forms via ElementInternals while supporting
+     * **three validation strategies** via `validation-mode`:
+     * - **`native`**
+     *   - Participates in native browser constraint validation.
+     *   - Sets the underlying input's `required`.
+     *   - Browser may show native validation bubbles when submit/reportValidity happens.
+     * - **`silent`**
+     *   - Does **not** set native `required` (prevents browser bubble).
+     *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+     * - **`none`**
+     *   - Value-only mode: submits value but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * - `touched` becomes true after first user interaction
+     * - `submitAttempted` becomes true when the parent form emits `submit`
+     * ## Value behavior
+     * - When checked → submits `value` (default: `"on"`).
+     * - When unchecked → submits no value (`null`).
+     * - When disabled → no submission and no validity participation.
+     * ## Shadow Parts
+     * - `checkbox`  → root container
+     * - `control`   → visual checkbox box
+     * - `icon`      → icon container (check or minus)
+     * - `label`     → label text
+     * - `caption`   → helper/error text (silent mode UI)
+     * - `input`     → hidden native input
+     * @example Basic usage
+     * <bcm-checkbox name="terms" required>
+     * I agree to the terms and conditions
+     * </bcm-checkbox>
+     * @example Silent validation (no native bubble)
+     * <form>
+     * <bcm-checkbox name="newsletter" required validation-mode="silent">
+     * Subscribe to newsletter
+     * </bcm-checkbox>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Value-only mode
+     * <bcm-checkbox name="analytics" validation-mode="none">
+     * Allow analytics
+     * </bcm-checkbox>
      */
     interface HTMLBcmCheckboxElement extends Components.BcmCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmCheckboxElementEventMap>(type: K, listener: (this: HTMLBcmCheckboxElement, ev: BcmCheckboxCustomEvent<HTMLBcmCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2473,6 +2669,27 @@ declare global {
         prototype: HTMLBcmDropdownItemElement;
         new (): HTMLBcmDropdownItemElement;
     };
+    interface HTMLBcmFileUploadElementEventMap {
+        "bcmFileChange": File[];
+        "bcmFileRemoved": BcmUploadItem;
+        "bcmUploadCanceled": BcmUploadItem;
+        "bcmFocus": FocusEvent;
+        "bcmBlur": FocusEvent;
+    }
+    interface HTMLBcmFileUploadElement extends Components.BcmFileUpload, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmFileUploadElementEventMap>(type: K, listener: (this: HTMLBcmFileUploadElement, ev: BcmFileUploadCustomEvent<HTMLBcmFileUploadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmFileUploadElementEventMap>(type: K, listener: (this: HTMLBcmFileUploadElement, ev: BcmFileUploadCustomEvent<HTMLBcmFileUploadElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBcmFileUploadElement: {
+        prototype: HTMLBcmFileUploadElement;
+        new (): HTMLBcmFileUploadElement;
+    };
     interface HTMLBcmInputElementEventMap {
         "bcmInput": InputEvent;
         "bcmChange": Event;
@@ -2846,39 +3063,45 @@ declare global {
         prototype: HTMLBcmRadioGroupElement;
         new (): HTMLBcmRadioGroupElement;
     };
-    interface HTMLBcmSegmentedPickerElementEventMap {
-        "bcmChange": { value: string };
+    interface HTMLBcmSegmentElementEventMap {
+        "bcmSegmentClick": string;
     }
-    interface HTMLBcmSegmentedPickerElement extends Components.BcmSegmentedPicker, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Individual segment option component
+     */
+    interface HTMLBcmSegmentElement extends Components.BcmSegment, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmSegmentElementEventMap>(type: K, listener: (this: HTMLBcmSegmentElement, ev: BcmSegmentCustomEvent<HTMLBcmSegmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmSegmentElementEventMap>(type: K, listener: (this: HTMLBcmSegmentElement, ev: BcmSegmentCustomEvent<HTMLBcmSegmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmSegmentedPickerElement: {
-        prototype: HTMLBcmSegmentedPickerElement;
-        new (): HTMLBcmSegmentedPickerElement;
+    var HTMLBcmSegmentElement: {
+        prototype: HTMLBcmSegmentElement;
+        new (): HTMLBcmSegmentElement;
     };
-    interface HTMLBcmSegmentedPickerOptionElementEventMap {
-        "bcmOptionClick": string;
+    interface HTMLBcmSegmentedPickerElementEventMap {
+        "bcmSegmentChange": { value: string; previousValue: string };
     }
-    interface HTMLBcmSegmentedPickerOptionElement extends Components.BcmSegmentedPickerOption, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmSegmentedPickerOptionElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerOptionElement, ev: BcmSegmentedPickerOptionCustomEvent<HTMLBcmSegmentedPickerOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface HTMLBcmSegmentedPickerElement extends Components.BcmSegmentedPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmSegmentedPickerOptionElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerOptionElement, ev: BcmSegmentedPickerOptionCustomEvent<HTMLBcmSegmentedPickerOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmSegmentedPickerElementEventMap>(type: K, listener: (this: HTMLBcmSegmentedPickerElement, ev: BcmSegmentedPickerCustomEvent<HTMLBcmSegmentedPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmSegmentedPickerOptionElement: {
-        prototype: HTMLBcmSegmentedPickerOptionElement;
-        new (): HTMLBcmSegmentedPickerOptionElement;
+    var HTMLBcmSegmentedPickerElement: {
+        prototype: HTMLBcmSegmentedPickerElement;
+        new (): HTMLBcmSegmentedPickerElement;
     };
     interface HTMLBcmShortcutElement extends Components.BcmShortcut, HTMLStencilElement {
     }
@@ -2891,27 +3114,51 @@ declare global {
     }
     /**
      * @component BcmSwitch
-     * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-     * Supports different sizes, label positions, error states, and accessibility features.
+     * @description A form-associated toggle switch component representing a boolean choice.
+     * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+     * This component supports **three validation strategies** via `validation-mode`:
+     * - **`native`**:
+     *   - Uses native browser constraint validation.
+     *   - Sets the underlying input's `required` attribute.
+     *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+     * - **`silent`**:
+     *   - Does **not** rely on native `required` (prevents the browser bubble).
+     *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+     * - **`none`**:
+     *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * To avoid showing errors on initial render, the component tracks:
+     * - `touched`: set after the first user interaction
+     * - `submitAttempted`: set when the parent form emits `submit`
+     * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+     * ## Value behavior
+     * - When checked, the component submits its `value` (default: `"on"`).
+     * - When unchecked, no value is submitted.
+     * - When disabled, the component does not participate in submission or validity.
      * @example Basic usage
-     * <bcm-switch label="Enable notifications"></bcm-switch>
-     * @example With error state
+     * <bcm-switch name="newsletter" label="Receive newsletter?" />
+     * @example Required with silent validation (no native bubble)
+     * <form>
      * <bcm-switch
+     * name="terms"
      * label="Accept terms"
-     * error={true}
-     * caption="You must accept the terms to continue">
-     * </bcm-switch>
-     * @example Disabled state
-     * <bcm-switch
-     * label="Advanced features"
-     * disabled={true}>
-     * </bcm-switch>
-     * @example With custom size and label position
-     * <bcm-switch
-     * label="Dark mode"
-     * size="large"
-     * labelPosition="left">
+     * required
+     * validation-mode="silent">
      * </bcm-switch>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Native validation mode (may show native bubble)
+     * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+     * @example Value-only mode (no validation)
+     * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+     * @csspart base - Root container
+     * @csspart switch-wrapper - Wrapper containing label + track
+     * @csspart input - Hidden native input
+     * @csspart label - Text label
+     * @csspart dot-container - Switch track
+     * @csspart dot - Switch knob
+     * @csspart caption - Helper/error text
      */
     interface HTMLBcmSwitchElement extends Components.BcmSwitch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBcmSwitchElementEventMap>(type: K, listener: (this: HTMLBcmSwitchElement, ev: BcmSwitchCustomEvent<HTMLBcmSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2927,67 +3174,48 @@ declare global {
         prototype: HTMLBcmSwitchElement;
         new (): HTMLBcmSwitchElement;
     };
-    interface HTMLBcmTabsElementEventMap {
-        "bcmTabChange": {
-    activeTab: string;
-    element: HTMLBcmTabsTriggerElement;
-    previousTab?: string;
-  };
+    interface HTMLBcmTabElementEventMap {
+        "bcmTabClick": string;
     }
     /**
-     * @description Tab interface component
+     * Individual tab component - self-contained with label and content panel
      */
-    interface HTMLBcmTabsElement extends Components.BcmTabs, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLBcmTabElement extends Components.BcmTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmTabElementEventMap>(type: K, listener: (this: HTMLBcmTabElement, ev: BcmTabCustomEvent<HTMLBcmTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmTabElementEventMap>(type: K, listener: (this: HTMLBcmTabElement, ev: BcmTabCustomEvent<HTMLBcmTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmTabsElement: {
-        prototype: HTMLBcmTabsElement;
-        new (): HTMLBcmTabsElement;
-    };
-    /**
-     * @description Tab content panel component that displays when its corresponding tab is selected
-     */
-    interface HTMLBcmTabsContentElement extends Components.BcmTabsContent, HTMLStencilElement {
-    }
-    var HTMLBcmTabsContentElement: {
-        prototype: HTMLBcmTabsContentElement;
-        new (): HTMLBcmTabsContentElement;
-    };
-    /**
-     * @description Container component for tab triggers that includes the sliding indicator (inkbar)
-     */
-    interface HTMLBcmTabsListElement extends Components.BcmTabsList, HTMLStencilElement {
-    }
-    var HTMLBcmTabsListElement: {
-        prototype: HTMLBcmTabsListElement;
-        new (): HTMLBcmTabsListElement;
+    var HTMLBcmTabElement: {
+        prototype: HTMLBcmTabElement;
+        new (): HTMLBcmTabElement;
     };
-    interface HTMLBcmTabsTriggerElementEventMap {
-        "bcmTabSelected": string;
+    interface HTMLBcmTabsElementEventMap {
+        "bcmTabChange": {
+    value: string;
+    previousValue: string;
+  };
     }
     /**
-     * @description Tab trigger component that functions as a clickable tab button
+     * Modern Tabs component with CSS-first approach
      */
-    interface HTMLBcmTabsTriggerElement extends Components.BcmTabsTrigger, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBcmTabsTriggerElementEventMap>(type: K, listener: (this: HTMLBcmTabsTriggerElement, ev: BcmTabsTriggerCustomEvent<HTMLBcmTabsTriggerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLBcmTabsElement extends Components.BcmTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBcmTabsTriggerElementEventMap>(type: K, listener: (this: HTMLBcmTabsTriggerElement, ev: BcmTabsTriggerCustomEvent<HTMLBcmTabsTriggerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmTabsElementEventMap>(type: K, listener: (this: HTMLBcmTabsElement, ev: BcmTabsCustomEvent<HTMLBcmTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBcmTabsTriggerElement: {
-        prototype: HTMLBcmTabsTriggerElement;
-        new (): HTMLBcmTabsTriggerElement;
+    var HTMLBcmTabsElement: {
+        prototype: HTMLBcmTabsElement;
+        new (): HTMLBcmTabsElement;
     };
     interface HTMLBcmTextElement extends Components.BcmText, HTMLStencilElement {
     }
@@ -3085,6 +3313,7 @@ declare global {
         "bcm-drawer": HTMLBcmDrawerElement;
         "bcm-dropdown": HTMLBcmDropdownElement;
         "bcm-dropdown-item": HTMLBcmDropdownItemElement;
+        "bcm-file-upload": HTMLBcmFileUploadElement;
         "bcm-input": HTMLBcmInputElement;
         "bcm-linked": HTMLBcmLinkedElement;
         "bcm-modal": HTMLBcmModalElement;
@@ -3092,14 +3321,12 @@ declare global {
         "bcm-popover": HTMLBcmPopoverElement;
         "bcm-radio": HTMLBcmRadioElement;
         "bcm-radio-group": HTMLBcmRadioGroupElement;
+        "bcm-segment": HTMLBcmSegmentElement;
         "bcm-segmented-picker": HTMLBcmSegmentedPickerElement;
-        "bcm-segmented-picker-option": HTMLBcmSegmentedPickerOptionElement;
         "bcm-shortcut": HTMLBcmShortcutElement;
         "bcm-switch": HTMLBcmSwitchElement;
+        "bcm-tab": HTMLBcmTabElement;
         "bcm-tabs": HTMLBcmTabsElement;
-        "bcm-tabs-content": HTMLBcmTabsContentElement;
-        "bcm-tabs-list": HTMLBcmTabsListElement;
-        "bcm-tabs-trigger": HTMLBcmTabsTriggerElement;
         "bcm-text": HTMLBcmTextElement;
         "bcm-textarea": HTMLBcmTextareaElement;
         "bcm-tooltip": HTMLBcmTooltipElement;
@@ -3553,62 +3780,126 @@ declare namespace LocalJSX {
         "status"?: ButtonStatus;
     }
     /**
-     * @description A checkbox component that allows users to select or deselect an option.
-     * It also supports an indeterminate state.
+     * @component BcmCheckbox
+     * @description A form-associated checkbox component representing a boolean choice.
+     * Integrates with native HTML forms via ElementInternals while supporting
+     * **three validation strategies** via `validation-mode`:
+     * - **`native`**
+     *   - Participates in native browser constraint validation.
+     *   - Sets the underlying input's `required`.
+     *   - Browser may show native validation bubbles when submit/reportValidity happens.
+     * - **`silent`**
+     *   - Does **not** set native `required` (prevents browser bubble).
+     *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+     * - **`none`**
+     *   - Value-only mode: submits value but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * - `touched` becomes true after first user interaction
+     * - `submitAttempted` becomes true when the parent form emits `submit`
+     * ## Value behavior
+     * - When checked → submits `value` (default: `"on"`).
+     * - When unchecked → submits no value (`null`).
+     * - When disabled → no submission and no validity participation.
+     * ## Shadow Parts
+     * - `checkbox`  → root container
+     * - `control`   → visual checkbox box
+     * - `icon`      → icon container (check or minus)
+     * - `label`     → label text
+     * - `caption`   → helper/error text (silent mode UI)
+     * - `input`     → hidden native input
+     * @example Basic usage
+     * <bcm-checkbox name="terms" required>
+     * I agree to the terms and conditions
+     * </bcm-checkbox>
+     * @example Silent validation (no native bubble)
+     * <form>
+     * <bcm-checkbox name="newsletter" required validation-mode="silent">
+     * Subscribe to newsletter
+     * </bcm-checkbox>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Value-only mode
+     * <bcm-checkbox name="analytics" validation-mode="none">
+     * Allow analytics
+     * </bcm-checkbox>
      */
     interface BcmCheckbox {
         /**
-          * Unique ID for the component. Automatically generated if not specified.
+          * Unique ID for the component. Automatically generated if not specified. Used to bind the visible label to the internal input.
           * @default generateId('bcm-checkbox')
          */
         "_id"?: string;
         /**
-          * Determines if the checkbox is checked
+          * Helper / error caption (silent mode UI)
+         */
+        "caption"?: string;
+        /**
+          * Checked state
           * @default false
          */
         "checked"?: boolean;
         /**
-          * Determines if the checkbox is disabled
+          * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Indicates if the checkbox is in an error state. This affects the visual styling of the component.
+          * Visual error state. - In `silent` mode this can be managed internally. - In other modes you can set it externally as well.
           * @default false
          */
         "error"?: boolean;
         /**
-          * Full width checkbox
+          * Makes checkbox occupy full width (if your styles support it).
           * @default false
          */
         "fullWidth"?: boolean;
         /**
-          * Determines if the checkbox is in an indeterminate state. This is useful when some items in a group of checkboxes are selected and others are not.
+          * Indeterminate (mixed) state. Useful when a group selection is partially selected.
           * @default false
          */
         "indeterminate"?: boolean;
         /**
-          * Label text to display next to the checkbox
+          * Visible label text (optional). You can also use the default slot.
          */
         "label"?: string;
         /**
-          * Controls the position of the label relative to the checkbox
+          * Label position relative to the checkbox control.
           * @default 'right'
          */
         "labelPosition"?: 'left' | 'right';
         /**
-          * Name attribute for the checkbox when used in a form
+          * Form field name
          */
         "name"?: string;
         /**
-          * Event emitted when the checked state changes
+          * Fired whenever the checked state changes.
+         */
+        "onBcmCheckboxChange"?: (event: BcmCheckboxCustomEvent<{ element: HTMLInputElement; checked: boolean }>) => void;
+        /**
+          * Optional readonly support
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Required state
+          * @default false
          */
-        "onBcmCheckboxChange"?: (event: BcmCheckboxCustomEvent<{ element: any; checked: boolean }>) => void;
+        "required"?: boolean;
         /**
-          * Size variant of the checkbox
+          * Size variant (affects control + typography).
           * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
+        /**
+          * @default 'native'
+         */
+        "validationMode"?: 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
+         */
+        "value"?: string;
     }
     /**
      * @component BcmChip
@@ -3823,6 +4114,61 @@ declare namespace LocalJSX {
         "selected"?: boolean;
         "text"?: string;
     }
+    interface BcmFileUpload {
+        /**
+          * @default '.xls,.pdf'
+         */
+        "accept"?: string;
+        /**
+          * @default ''
+         */
+        "caption"?: string;
+        /**
+          * Allows consumers to override default error messages.
+         */
+        "customErrorMessages"?: BcmUploadErrorMessages;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Maximum number of files allowed in total. Only applied when `multiple` is true.
+         */
+        "maxFileCount"?: number;
+        /**
+          * @default 2
+         */
+        "maxSize"?: number;
+        /**
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * @default 'file'
+         */
+        "name"?: string;
+        "onBcmBlur"?: (event: BcmFileUploadCustomEvent<FocusEvent>) => void;
+        "onBcmFileChange"?: (event: BcmFileUploadCustomEvent<File[]>) => void;
+        "onBcmFileRemoved"?: (event: BcmFileUploadCustomEvent<BcmUploadItem>) => void;
+        "onBcmFocus"?: (event: BcmFileUploadCustomEvent<FocusEvent>) => void;
+        "onBcmUploadCanceled"?: (event: BcmFileUploadCustomEvent<BcmUploadItem>) => void;
+        /**
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * @default 'medium'
+         */
+        "size"?: 'medium' | 'small';
+        /**
+          * Reserved for future backend upload integration. Currently does not affect component behavior.
+         */
+        "uploadUrl"?: string;
+    }
     interface BcmInput {
         /**
           * Input id
@@ -4490,6 +4836,10 @@ declare namespace LocalJSX {
         "trigger"?: 'click' | 'hover' | 'hover focus';
     }
     interface BcmRadio {
+        /**
+          * @default generateId('bcm-radio')
+         */
+        "_id"?: string;
         /**
           * Whether the radio button is selected.
           * @prop 
@@ -4535,6 +4885,11 @@ declare namespace LocalJSX {
           * @defaultValue false
          */
         "readonly"?: boolean;
+        /**
+          * Whether at least one radio in this group is required. (HTML)
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * Defines the size of the radio button: 'small' | 'medium' | 'large'.
           * @prop 
@@ -4605,58 +4960,85 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface BcmSegmentedPicker {
+    /**
+     * Individual segment option component
+     */
+    interface BcmSegment {
+        /**
+          * Index of currently active segment (inherited from parent)
+          * @default 0
+         */
+        "activeIndex"?: number;
         /**
           * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Full width component
-          * @default false
+          * Index of this segment (inherited from parent)
+          * @default 0
          */
-        "fullWidth"?: boolean;
+        "index"?: number;
+        /**
+          * Internal event emitted when segment is clicked
+         */
+        "onBcmSegmentClick"?: (event: BcmSegmentCustomEvent<string>) => void;
         /**
-          * Change event
+          * Selected state (controlled by parent)
+          * @default false
          */
-        "onBcmChange"?: (event: BcmSegmentedPickerCustomEvent<{ value: string }>) => void;
+        "selected"?: boolean;
         /**
-          * Controls the component size
+          * Size variant (inherited from parent)
           * @default 'medium'
          */
-        "size"?: SegmentedPickerSize;
+        "size"?: 'small' | 'medium' | 'large';
         /**
-          * The selected option value
+          * Unique identifier for this segment
          */
-        "value"?: string;
+        "value": string;
     }
-    interface BcmSegmentedPickerOption {
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface BcmSegmentedPicker {
         /**
-          * Whether this option is disabled
+          * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Option display label
+          * Full width flag
+          * @default false
          */
-        "label"?: string;
+        "fullWidth"?: boolean;
         /**
-          * Click event
+          * Name attribute for form association
          */
-        "onBcmOptionClick"?: (event: BcmSegmentedPickerOptionCustomEvent<string>) => void;
+        "name"?: string;
+        /**
+          * Emits when selected segment changes
+         */
+        "onBcmSegmentChange"?: (event: BcmSegmentedPickerCustomEvent<{ value: string; previousValue: string }>) => void;
         /**
-          * Whether this option is selected
+          * Whether this field is required in a form
           * @default false
          */
-        "selected"?: boolean;
+        "required"?: boolean;
+        /**
+          * Enable shadow on container
+          * @default false
+         */
+        "shadow"?: boolean;
         /**
-          * Controls the option size
+          * Size variant
+          * @default 'medium'
          */
-        "size"?: SegmentedPickerSize;
+        "size"?: 'small' | 'medium' | 'large';
         /**
-          * Option value
+          * Selected segment value
          */
-        "value": string;
+        "value"?: string;
     }
     interface BcmShortcut {
         "hotkey"?: string;
@@ -4667,178 +5049,181 @@ declare namespace LocalJSX {
     }
     /**
      * @component BcmSwitch
-     * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-     * Supports different sizes, label positions, error states, and accessibility features.
+     * @description A form-associated toggle switch component representing a boolean choice.
+     * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+     * This component supports **three validation strategies** via `validation-mode`:
+     * - **`native`**:
+     *   - Uses native browser constraint validation.
+     *   - Sets the underlying input's `required` attribute.
+     *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+     * - **`silent`**:
+     *   - Does **not** rely on native `required` (prevents the browser bubble).
+     *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+     *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+     * - **`none`**:
+     *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+     * ## UI error gating (silent mode)
+     * To avoid showing errors on initial render, the component tracks:
+     * - `touched`: set after the first user interaction
+     * - `submitAttempted`: set when the parent form emits `submit`
+     * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+     * ## Value behavior
+     * - When checked, the component submits its `value` (default: `"on"`).
+     * - When unchecked, no value is submitted.
+     * - When disabled, the component does not participate in submission or validity.
      * @example Basic usage
-     * <bcm-switch label="Enable notifications"></bcm-switch>
-     * @example With error state
+     * <bcm-switch name="newsletter" label="Receive newsletter?" />
+     * @example Required with silent validation (no native bubble)
+     * <form>
      * <bcm-switch
+     * name="terms"
      * label="Accept terms"
-     * error={true}
-     * caption="You must accept the terms to continue">
-     * </bcm-switch>
-     * @example Disabled state
-     * <bcm-switch
-     * label="Advanced features"
-     * disabled={true}>
-     * </bcm-switch>
-     * @example With custom size and label position
-     * <bcm-switch
-     * label="Dark mode"
-     * size="large"
-     * labelPosition="left">
+     * required
+     * validation-mode="silent">
      * </bcm-switch>
+     * <button type="submit">Submit</button>
+     * </form>
+     * @example Native validation mode (may show native bubble)
+     * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+     * @example Value-only mode (no validation)
+     * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+     * @csspart base - Root container
+     * @csspart switch-wrapper - Wrapper containing label + track
+     * @csspart input - Hidden native input
+     * @csspart label - Text label
+     * @csspart dot-container - Switch track
+     * @csspart dot - Switch knob
+     * @csspart caption - Helper/error text
      */
     interface BcmSwitch {
         /**
-          * Text to display as an error message when error is true
+          * Unique id (optional). Generated by default.
+          * @default generateId('bcm-switch')
+         */
+        "_id"?: string;
+        /**
+          * Helper / error text shown under the switch
          */
         "caption"?: string;
         /**
-          * Whether the switch is checked or not
+          * Checked state
           * @default false
          */
         "checked"?: boolean;
         /**
-          * Whether the switch is disabled
+          * Disabled state
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Whether to display the switch in an error state
+          * Visual error state (manual/external). In silent mode this can be auto-managed.
           * @default false
          */
         "error"?: boolean;
         /**
-          * Text label for the switch
+          * Visible label text
          */
-        "label"?: string;
+        "label": string;
         /**
           * Position of the label relative to the switch
           * @default 'right'
          */
         "labelPosition"?: 'left' | 'right';
         /**
-          * The name attribute for the hidden input element
+          * Form field name
          */
         "name"?: string;
         /**
-          * Emitted when the switch state changes
+          * Emitted when the switch toggles
          */
         "onBcmSwitchChange"?: (event: BcmSwitchCustomEvent<boolean>) => void;
         /**
-          * Whether the switch is in readonly mode
+          * Optional readonly support
           * @default false
          */
         "readonly"?: boolean;
         /**
-          * Whether the switch is required in a form
+          * Required state
           * @default false
          */
         "required"?: boolean;
         /**
-          * Size variant of the switch
+          * Size variant
           * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
-          * The value attribute for the hidden input element
+          * @default 'native'
+         */
+        "validationMode"?: 'native' | 'silent' | 'none';
+        /**
+          * Value submitted when checked
+          * @default 'on'
          */
         "value"?: string;
     }
     /**
-     * @description Tab interface component
+     * Individual tab component - self-contained with label and content panel
      */
-    interface BcmTabs {
-        /**
-          * Default active tab value
-         */
-        "defaultValue"?: string;
+    interface BcmTab {
         /**
-          * Triggers when tab changes
-         */
-        "onBcmTabChange"?: (event: BcmTabsCustomEvent<{
-    activeTab: string;
-    element: HTMLBcmTabsTriggerElement;
-    previousTab?: string;
-  }>) => void;
-        /**
-          * Tab size
-          * @default 'medium'
+          * Active state (controlled by parent)
+          * @default false
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "active"?: boolean;
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Disabled state
+          * @default false
          */
-        "smooth"?: boolean;
+        "disabled"?: boolean;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Label text to display in tab button
          */
-        "variant"?: 'full-width' | 'auto-width';
-    }
-    /**
-     * @description Tab content panel component that displays when its corresponding tab is selected
-     */
-    interface BcmTabsContent {
+        "label": string;
         /**
-          * Unique identifier that matches a tab trigger's value Used to associate this content with its corresponding tab
+          * Internal event emitted when tab button is clicked
          */
-        "value"?: string;
-    }
-    /**
-     * @description Container component for tab triggers that includes the sliding indicator (inkbar)
-     */
-    interface BcmTabsList {
+        "onBcmTabClick"?: (event: BcmTabCustomEvent<string>) => void;
         /**
-          * Whether to enable smooth animations for inkbar and transitions
-          * @default true
+          * Size variant (inherited from parent)
+          * @default 'md'
          */
-        "smooth"?: boolean;
+        "size"?: 'sm' | 'md' | 'lg';
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Unique identifier for this tab
          */
-        "variant"?: 'full-width' | 'auto-width';
+        "value": string;
     }
     /**
-     * @description Tab trigger component that functions as a clickable tab button
+     * Modern Tabs component with CSS-first approach
      */
-    interface BcmTabsTrigger {
+    interface BcmTabs {
         /**
-          * Whether the tab is currently active
-          * @default false
+          * Emits when active tab changes
          */
-        "active"?: boolean;
+        "onBcmTabChange"?: (event: BcmTabsCustomEvent<{
+    value: string;
+    previousValue: string;
+  }>) => void;
         /**
-          * Whether the tab is disabled
+          * Enable shadow on main container
           * @default false
          */
-        "disabled"?: boolean;
-        /**
-          * Event emitted when this tab is selected
-         */
-        "onBcmTabSelected"?: (event: BcmTabsTriggerCustomEvent<string>) => void;
-        /**
-          * Size of the tab
-          * @default 'medium'
-         */
-        "size"?: 'small' | 'medium' | 'large';
+        "shadow"?: boolean;
         /**
-          * Whether to enable smooth animations for transitions
-          * @default true
+          * Tab size variant
+          * @default 'md'
          */
-        "smooth"?: boolean;
+        "size"?: 'sm' | 'md' | 'lg';
         /**
-          * Unique identifier value for the tab
+          * Active tab value
          */
         "value"?: string;
         /**
-          * Tab variant - controls width behavior
-          * @default 'full-width'
+          * Visual variant
+          * @default 'line'
          */
-        "variant"?: 'full-width' | 'auto-width';
+        "variant"?: 'line' | 'enclosed';
     }
     interface BcmText {
         /**
@@ -5094,6 +5479,7 @@ declare namespace LocalJSX {
         "bcm-drawer": BcmDrawer;
         "bcm-dropdown": BcmDropdown;
         "bcm-dropdown-item": BcmDropdownItem;
+        "bcm-file-upload": BcmFileUpload;
         "bcm-input": BcmInput;
         "bcm-linked": BcmLinked;
         "bcm-modal": BcmModal;
@@ -5101,14 +5487,12 @@ declare namespace LocalJSX {
         "bcm-popover": BcmPopover;
         "bcm-radio": BcmRadio;
         "bcm-radio-group": BcmRadioGroup;
+        "bcm-segment": BcmSegment;
         "bcm-segmented-picker": BcmSegmentedPicker;
-        "bcm-segmented-picker-option": BcmSegmentedPickerOption;
         "bcm-shortcut": BcmShortcut;
         "bcm-switch": BcmSwitch;
+        "bcm-tab": BcmTab;
         "bcm-tabs": BcmTabs;
-        "bcm-tabs-content": BcmTabsContent;
-        "bcm-tabs-list": BcmTabsList;
-        "bcm-tabs-trigger": BcmTabsTrigger;
         "bcm-text": BcmText;
         "bcm-textarea": BcmTextarea;
         "bcm-tooltip": BcmTooltip;
@@ -5254,8 +5638,49 @@ declare module "@stencil/core" {
             "bcm-button": LocalJSX.BcmButton & JSXBase.HTMLAttributes<HTMLBcmButtonElement>;
             "bcm-button-group": LocalJSX.BcmButtonGroup & JSXBase.HTMLAttributes<HTMLBcmButtonGroupElement>;
             /**
-             * @description A checkbox component that allows users to select or deselect an option.
-             * It also supports an indeterminate state.
+             * @component BcmCheckbox
+             * @description A form-associated checkbox component representing a boolean choice.
+             * Integrates with native HTML forms via ElementInternals while supporting
+             * **three validation strategies** via `validation-mode`:
+             * - **`native`**
+             *   - Participates in native browser constraint validation.
+             *   - Sets the underlying input's `required`.
+             *   - Browser may show native validation bubbles when submit/reportValidity happens.
+             * - **`silent`**
+             *   - Does **not** set native `required` (prevents browser bubble).
+             *   - Computes "missing required" internally and exposes it via `error` + `caption`.
+             *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.
+             * - **`none`**
+             *   - Value-only mode: submits value but never becomes invalid.
+             * ## UI error gating (silent mode)
+             * - `touched` becomes true after first user interaction
+             * - `submitAttempted` becomes true when the parent form emits `submit`
+             * ## Value behavior
+             * - When checked → submits `value` (default: `"on"`).
+             * - When unchecked → submits no value (`null`).
+             * - When disabled → no submission and no validity participation.
+             * ## Shadow Parts
+             * - `checkbox`  → root container
+             * - `control`   → visual checkbox box
+             * - `icon`      → icon container (check or minus)
+             * - `label`     → label text
+             * - `caption`   → helper/error text (silent mode UI)
+             * - `input`     → hidden native input
+             * @example Basic usage
+             * <bcm-checkbox name="terms" required>
+             * I agree to the terms and conditions
+             * </bcm-checkbox>
+             * @example Silent validation (no native bubble)
+             * <form>
+             * <bcm-checkbox name="newsletter" required validation-mode="silent">
+             * Subscribe to newsletter
+             * </bcm-checkbox>
+             * <button type="submit">Submit</button>
+             * </form>
+             * @example Value-only mode
+             * <bcm-checkbox name="analytics" validation-mode="none">
+             * Allow analytics
+             * </bcm-checkbox>
              */
             "bcm-checkbox": LocalJSX.BcmCheckbox & JSXBase.HTMLAttributes<HTMLBcmCheckboxElement>;
             /**
@@ -5322,6 +5747,7 @@ declare module "@stencil/core" {
             "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
@@ -5560,50 +5986,72 @@ declare module "@stencil/core" {
             "bcm-popover": LocalJSX.BcmPopover & JSXBase.HTMLAttributes<HTMLBcmPopoverElement>;
             "bcm-radio": LocalJSX.BcmRadio & JSXBase.HTMLAttributes<HTMLBcmRadioElement>;
             "bcm-radio-group": LocalJSX.BcmRadioGroup & JSXBase.HTMLAttributes<HTMLBcmRadioGroupElement>;
+            /**
+             * Individual segment option component
+             */
+            "bcm-segment": LocalJSX.BcmSegment & JSXBase.HTMLAttributes<HTMLBcmSegmentElement>;
+            /**
+             * Modern Segmented Picker component with CSS Grid-based indicator
+             */
             "bcm-segmented-picker": LocalJSX.BcmSegmentedPicker & JSXBase.HTMLAttributes<HTMLBcmSegmentedPickerElement>;
-            "bcm-segmented-picker-option": LocalJSX.BcmSegmentedPickerOption & JSXBase.HTMLAttributes<HTMLBcmSegmentedPickerOptionElement>;
             "bcm-shortcut": LocalJSX.BcmShortcut & JSXBase.HTMLAttributes<HTMLBcmShortcutElement>;
             /**
              * @component BcmSwitch
-             * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
-             * Supports different sizes, label positions, error states, and accessibility features.
+             * @description A form-associated toggle switch component representing a boolean choice.
+             * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+             * This component supports **three validation strategies** via `validation-mode`:
+             * - **`native`**:
+             *   - Uses native browser constraint validation.
+             *   - Sets the underlying input's `required` attribute.
+             *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+             * - **`silent`**:
+             *   - Does **not** rely on native `required` (prevents the browser bubble).
+             *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+             *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+             * - **`none`**:
+             *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+             * ## UI error gating (silent mode)
+             * To avoid showing errors on initial render, the component tracks:
+             * - `touched`: set after the first user interaction
+             * - `submitAttempted`: set when the parent form emits `submit`
+             * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+             * ## Value behavior
+             * - When checked, the component submits its `value` (default: `"on"`).
+             * - When unchecked, no value is submitted.
+             * - When disabled, the component does not participate in submission or validity.
              * @example Basic usage
-             * <bcm-switch label="Enable notifications"></bcm-switch>
-             * @example With error state
+             * <bcm-switch name="newsletter" label="Receive newsletter?" />
+             * @example Required with silent validation (no native bubble)
+             * <form>
              * <bcm-switch
+             * name="terms"
              * label="Accept terms"
-             * error={true}
-             * caption="You must accept the terms to continue">
-             * </bcm-switch>
-             * @example Disabled state
-             * <bcm-switch
-             * label="Advanced features"
-             * disabled={true}>
-             * </bcm-switch>
-             * @example With custom size and label position
-             * <bcm-switch
-             * label="Dark mode"
-             * size="large"
-             * labelPosition="left">
+             * required
+             * validation-mode="silent">
              * </bcm-switch>
+             * <button type="submit">Submit</button>
+             * </form>
+             * @example Native validation mode (may show native bubble)
+             * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
+             * @example Value-only mode (no validation)
+             * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
+             * @csspart base - Root container
+             * @csspart switch-wrapper - Wrapper containing label + track
+             * @csspart input - Hidden native input
+             * @csspart label - Text label
+             * @csspart dot-container - Switch track
+             * @csspart dot - Switch knob
+             * @csspart caption - Helper/error text
              */
             "bcm-switch": LocalJSX.BcmSwitch & JSXBase.HTMLAttributes<HTMLBcmSwitchElement>;
             /**
-             * @description Tab interface component
+             * Individual tab component - self-contained with label and content panel
              */
-            "bcm-tabs": LocalJSX.BcmTabs & JSXBase.HTMLAttributes<HTMLBcmTabsElement>;
+            "bcm-tab": LocalJSX.BcmTab & JSXBase.HTMLAttributes<HTMLBcmTabElement>;
             /**
-             * @description Tab content panel component that displays when its corresponding tab is selected
+             * Modern Tabs component with CSS-first approach
              */
-            "bcm-tabs-content": LocalJSX.BcmTabsContent & JSXBase.HTMLAttributes<HTMLBcmTabsContentElement>;
-            /**
-             * @description Container component for tab triggers that includes the sliding indicator (inkbar)
-             */
-            "bcm-tabs-list": LocalJSX.BcmTabsList & JSXBase.HTMLAttributes<HTMLBcmTabsListElement>;
-            /**
-             * @description Tab trigger component that functions as a clickable tab button
-             */
-            "bcm-tabs-trigger": LocalJSX.BcmTabsTrigger & JSXBase.HTMLAttributes<HTMLBcmTabsTriggerElement>;
+            "bcm-tabs": LocalJSX.BcmTabs & JSXBase.HTMLAttributes<HTMLBcmTabsElement>;
             "bcm-text": LocalJSX.BcmText & JSXBase.HTMLAttributes<HTMLBcmTextElement>;
             "bcm-textarea": LocalJSX.BcmTextarea & JSXBase.HTMLAttributes<HTMLBcmTextareaElement>;
             /**