@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/types/components.d.ts

@@ -5,33 +5,126 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { IAvatar } from "./components/images-icons/bds-avatar/types";
+import { IBadge } from "./components/feedback/bds-badge/types/IBadge";
 import { IBanner } from "./components/feedback/bds-banner/types/IBanner";
 import { IButton } from "./components/actions/bds-button/types/IButton";
+import { IButtonGroup } from "./components/actions/bds-button-group/types/IButtonGroup";
 import { CheckboxChangeDetail } from "./components/forms/bds-checkbox/types/ICheckbox";
+import { ICheckboxCard } from "./components/forms/bds-checkbox-card/types/ICheckboxCard";
 import { IDialog } from "./components/overlays/bds-dialog/types";
+import { IDivider } from "./components/helpers/bds-divider/types/IDivider";
 import { IFlag } from "./components/forms/bds-flag/interfaces/IFlag";
+import { IGrid } from "./components/layouts/bds-grid/grid/types";
+import { IGridItem } from "./components/layouts/bds-grid/grid-item/types";
+import { IListMenu, ListMenuChangeDetail } from "./components/actions/bds-list-menu/bds-list-menu/types/IListMenu";
+import { IListMenuItem, IListMenuItemEvent } from "./components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem";
 import { IPopover } from "./components/overlays/bds-popover/types/IPopover";
+import { RadioChangeDetail } from "./components/forms/bds-radio/types/IRadio";
+import { RadioButtonChangeDetail } from "./components/forms/bds-radio-button/types/IRadioButton";
+import { IRadioCard, RadioCardChangeDetail } from "./components/forms/bds-radio-card/types/IRadioCard";
+import { IFormValidator, Orientation } from "./types/index";
+import { RadioGroupType } from "./components/forms/bds-radio-group/types/types";
+import { RadioGroupChangeDetail } from "./components/forms/bds-radio-group/types/IRadioGroup";
 import { ISpinner } from "./components/feedback/bds-spinner/types/ISpinner";
-import { IFormValidator } from "./types/index";
+import { IStatus } from "./components/feedback/bds-status/types/IStatus";
+import { ITag, TagEventPayload } from "./components/feedback/bds-tag/types";
 import { TextFieldType, TextFieldValidationTiming, TextFieldVariant } from "./components/forms/bds-text-field/types";
 import { Event } from "./stencil-public-runtime";
+import { IToggle } from "./components/actions/bds-toggle/types";
+import { IToggleEventChange } from "./components/actions/bds-toggle/types/IEventChange";
 import { ITooltip } from "./components/overlays/bds-tooltip/types/ITooltip";
 import { FloatingTooltipProp } from "./services/index";
 import { ITypography } from "./components/titles-text/bds-typography/types/ITypography";
+export { IAvatar } from "./components/images-icons/bds-avatar/types";
+export { IBadge } from "./components/feedback/bds-badge/types/IBadge";
 export { IBanner } from "./components/feedback/bds-banner/types/IBanner";
 export { IButton } from "./components/actions/bds-button/types/IButton";
+export { IButtonGroup } from "./components/actions/bds-button-group/types/IButtonGroup";
 export { CheckboxChangeDetail } from "./components/forms/bds-checkbox/types/ICheckbox";
+export { ICheckboxCard } from "./components/forms/bds-checkbox-card/types/ICheckboxCard";
 export { IDialog } from "./components/overlays/bds-dialog/types";
+export { IDivider } from "./components/helpers/bds-divider/types/IDivider";
 export { IFlag } from "./components/forms/bds-flag/interfaces/IFlag";
+export { IGrid } from "./components/layouts/bds-grid/grid/types";
+export { IGridItem } from "./components/layouts/bds-grid/grid-item/types";
+export { IListMenu, ListMenuChangeDetail } from "./components/actions/bds-list-menu/bds-list-menu/types/IListMenu";
+export { IListMenuItem, IListMenuItemEvent } from "./components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem";
 export { IPopover } from "./components/overlays/bds-popover/types/IPopover";
+export { RadioChangeDetail } from "./components/forms/bds-radio/types/IRadio";
+export { RadioButtonChangeDetail } from "./components/forms/bds-radio-button/types/IRadioButton";
+export { IRadioCard, RadioCardChangeDetail } from "./components/forms/bds-radio-card/types/IRadioCard";
+export { IFormValidator, Orientation } from "./types/index";
+export { RadioGroupType } from "./components/forms/bds-radio-group/types/types";
+export { RadioGroupChangeDetail } from "./components/forms/bds-radio-group/types/IRadioGroup";
 export { ISpinner } from "./components/feedback/bds-spinner/types/ISpinner";
-export { IFormValidator } from "./types/index";
+export { IStatus } from "./components/feedback/bds-status/types/IStatus";
+export { ITag, TagEventPayload } from "./components/feedback/bds-tag/types";
 export { TextFieldType, TextFieldValidationTiming, TextFieldVariant } from "./components/forms/bds-text-field/types";
 export { Event } from "./stencil-public-runtime";
+export { IToggle } from "./components/actions/bds-toggle/types";
+export { IToggleEventChange } from "./components/actions/bds-toggle/types/IEventChange";
 export { ITooltip } from "./components/overlays/bds-tooltip/types/ITooltip";
 export { FloatingTooltipProp } from "./services/index";
 export { ITypography } from "./components/titles-text/bds-typography/types/ITypography";
 export namespace Components {
+    /**
+     * Avatar component used to display user initials or names for visual identification.
+     * @summary Displays a circular avatar with user initials and optional name label.
+     * Uses Boreal Design System tokens for consistent styling across platforms.
+     * @attr {string} username - The full name used to generate initials or display as label.
+     * @attr {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+     * @attr {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+     * @attr {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+     * @property {string} username - The full name used to generate initials or display as label.
+     * @property {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+     * @property {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+     * @property {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+     * @cssprop --bds-avatar-background - Custom background color HEX code.
+     * @cssprop --bds-avatar-initials-color - Custom text color HEX code.
+     */
+    interface BdsAvatar {
+        /**
+          * Custom background color as hex code. If not provided, defaults to Boreal success color *
+          * @default ''
+         */
+        "background": IAvatar['background'];
+        /**
+          * Custom text color as hex code. If not provided, defaults to white *
+          * @default ''
+         */
+        "initialsColor": IAvatar['initialsColor'];
+        /**
+          * The full name used to generate initials or display as label *
+          * @default ''
+         */
+        "username": IAvatar['username'];
+        /**
+          * Controls which avatar elements are displayed: icon (initials), name, or both.
+          * @default 'full'
+         */
+        "variant": IAvatar['variant'];
+    }
+    /**
+     * Badge component for displaying contextual status information with optional icon support.
+     * @summary A compact label component that communicates status or category using color-coded variants. Supports an optional icon slot and a disabled state.
+     * @attr {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+     * @attr {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+     * @property {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+     * @property {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+     */
+    interface BdsBadge {
+        /**
+          * Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+          * @default false
+         */
+        "disabled": IBadge['disabled'];
+        /**
+          * Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+          * @default BADGE_VARIANT.DEFAULT
+         */
+        "variant": IBadge['variant'];
+    }
     /**
      * Banner component used to display important messages with different status variants.
      * @summary Displays a dismissible banner with an icon, title, body content, and optional actions.
@@ -40,8 +133,8 @@ export namespace Components {
      * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
      * @property {boolean} closable - Shows a close button that allows users to close the banner. Defaults to false.
      * @property {boolean} closeButtonLabel - Aria label for the close button when visible.
-     * @fires bdsClose - Emitted when the banner is closed via the close button or `closeBanner` method.
-     * @method closeBanner - Programmatic method to close the banner and emit the `bdsClose` event.
+     * @fires bdsClose - Emitted when the banner is closed via the close button or `close` method.
+     * @method close - Programmatic method to close the banner and emit the `bdsClose` event.
      */
     interface BdsBanner {
         /**
@@ -52,12 +145,16 @@ export namespace Components {
         /**
           * Programmatic method to close the banner and emit the `bdsClose` event
          */
-        "closeBanner": () => Promise<void>;
+        "close": () => Promise<void>;
         /**
           * The aria label for the close button.
           * @default ""
          */
         "closeButtonLabel": IBanner['closeButtonLabel'];
+        /**
+          * Programmatic method to close the banner and emit the `bdsClose` event
+         */
+        "open": () => Promise<void>;
         /**
           * Visual style variant: 'info', 'success', 'warning', or 'danger'.
           * @default "info"
@@ -73,7 +170,7 @@ export namespace Components {
      * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
      * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
      * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-     * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+     * @attr {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
      * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
      * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
      * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
@@ -82,13 +179,13 @@ export namespace Components {
      * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
      * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
      * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-     * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+     * @property {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
      * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
      * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
      * @default 'button' - Default type value
      * @default 'default' - Default color value
      * @default 'default' - Default variant value
-     * @default 'medium' - Default size value
+     * @default 'md' - Default size value
      * @default 'default' - Default status value
      * @default false - Default disabled value
      * @default '' - Default label value
@@ -128,7 +225,7 @@ export namespace Components {
          */
         "name": IButton['name'];
         /**
-          * size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+          * size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
           * @default BUTTON_SIZES.MEDIUM
          */
         "size": IButton['size'];
@@ -143,6 +240,36 @@ export namespace Components {
          */
         "variant": IButton['variant'];
     }
+    /**
+     * Button group component for grouping related buttons together in a unified visual unit.
+     */
+    interface BdsButtonGroup {
+        /**
+          * Controls the color applied to all child `<bds-button>` elements. Accepted values: see `CoreColors`. Default is `default`.
+          * @default CORE_COLORS.DEFAULT
+         */
+        "color": IButtonGroup['color'];
+        /**
+          * Provides an accessible label for the button group.
+          * @default 'Button group'
+         */
+        "label": IButtonGroup['label'];
+        /**
+          * Controls the layout direction of the grouped buttons. Accepted values: `'horizontal'`, `'vertical'`. Default is `'horizontal'`.
+          * @default ORIENTATIONS.HORIZONTAL
+         */
+        "orientation": IButtonGroup['orientation'];
+        /**
+          * Controls the size applied to all child `<bds-button>` elements. Accepted values: `'sm'`, `'md'`, `'lg'`. Default is `'md'`.
+          * @default BUTTON_SIZES.MEDIUM
+         */
+        "size": IButtonGroup['size'];
+        /**
+          * Controls the variant applied to all child `<bds-button>` elements. Accepted values: `'default'`, `'outline'`, `'plain'`. Default is `'default'`.
+          * @default BUTTON_VARIANTS.DEFAULT
+         */
+        "variant": IButtonGroup['variant'];
+    }
     /**
      * Checkbox component for boolean selection with three visual states.
      * @summary A checkbox form control with default, selected, and indeterminate states.
@@ -195,6 +322,63 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Checkbox card component is a selectable card-based checkbox option.
+     * It presents a non-exclusive choice with optional descriptive text and icon,
+     * supporting checked, indeterminate, disabled, and error states.
+     * Can be used standalone or within a checkbox group for orchestration.
+     * @property {string}  name          - Name of the form control, submitted as a key in the form data.
+     * @property {boolean} disabled      - Disables the control. Defaults to `false`.
+     * @property {boolean} required      - Marks the control as required for form submission. Defaults to `false`.
+     * @property {string}  value         - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @property {string}  label         - Label displayed next to the checkbox. If not provided, the default slot is used.
+     * @property {boolean} checked       - Whether the checkbox card is selected. Defaults to `false`.
+     * @property {boolean} indeterminate - Whether the checkbox card shows an indeterminate ("mixed") visual state. Defaults to `false`.
+     * @property {boolean} error         - Whether the checkbox card is in an error state. Defaults to `false`.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+     * @fires bdsChange   - Emitted when the user toggles the checkbox card. Payload: `{ checked: boolean, value: string }`.
+     */
+    interface BdsCheckboxCard {
+        /**
+          * Whether this checkbox card is selected.
+          * @default false
+         */
+        "checked": ICheckboxCard['checked'];
+        /**
+          * Disables the control.
+          * @default false
+         */
+        "disabled": ICheckboxCard['disabled'];
+        /**
+          * Whether the checkbox card is in an error state.
+          * @default false
+         */
+        "error": ICheckboxCard['error'];
+        /**
+          * Whether the checkbox card shows an indeterminate visual state.
+          * @default false
+         */
+        "indeterminate": ICheckboxCard['indeterminate'];
+        /**
+          * Label text displayed next to the checkbox indicator. Falls back to the default slot when empty.
+          * @default ''
+         */
+        "label": ICheckboxCard['label'];
+        /**
+          * Name of the form control, submitted as a key in the form data.
+         */
+        "name": ICheckboxCard['name'];
+        /**
+          * Marks the control as required for form submission.
+          * @default false
+         */
+        "required": ICheckboxCard['required'];
+        /**
+          * Value submitted with the form when this checkbox is selected.
+          * @default 'on'
+         */
+        "value": ICheckboxCard['value'];
+    }
     /**
      * Modal dialog component for displaying content in an overlay.
      * @summary Modal overlay for alerts, forms, and confirmations with customizable layout and behavior.
@@ -305,6 +489,20 @@ export namespace Components {
          */
         "width": IDialog['width'];
     }
+    /**
+     * Divider component for creating visual separators between content sections.
+     * @summary A simple visual separator that can be oriented horizontally or vertically.
+     * @csspart divider - A divider element that visually separates content.
+     * @attr {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+     * @property {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+     */
+    interface BdsDivider {
+        /**
+          * The orientation of the divider. Allowed values: horizontal | vertical
+          * @default DIVIDER_ORIENTATIONS.HORIZONTAL
+         */
+        "orientation": IDivider['orientation'];
+    }
     /**
      * Flag component used to display a country flag together with its corresponding label.
      * @summary Renders a flag icon based on a country identifier and optionally displays
@@ -369,6 +567,184 @@ export namespace Components {
          */
         "shortName": IFlag['shortName'];
     }
+    /**
+     * 12-column CSS Grid layout container with 5 responsive breakpoints.
+     * Minimum browser support: Chrome/Edge (last 2), Firefox (last 2), Safari (last 2).
+     */
+    interface BdsGrid {
+        /**
+          * `'fluid'` fills full width; `'fixed'` caps the column area at 960px and centres the container.
+          * @default GRID_LAYOUT.FLUID
+         */
+        "layout": IGrid['layout'];
+        /**
+          * Overrides the row gap independently of the column gutter.
+         */
+        "rowGap": IGrid['rowGap'];
+    }
+    /**
+     * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+     */
+    interface BdsGridItem {
+        /**
+          * Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`).
+          * @default GRID_ITEM_COL_SPAN.DEFAULT
+         */
+        "colSpan": IGridItem['colSpan'];
+        /**
+          * Override col-span at the `2xl` breakpoint (≥1344px).
+         */
+        "colSpan2xl": IGridItem['colSpan2xl'];
+        /**
+          * Override col-span at the `lg` breakpoint (≥960px).
+         */
+        "colSpanLg": IGridItem['colSpanLg'];
+        /**
+          * Override col-span at the `md` breakpoint (≥769px).
+         */
+        "colSpanMd": IGridItem['colSpanMd'];
+        /**
+          * Override col-span at the `sm` breakpoint (≥320px).
+         */
+        "colSpanSm": IGridItem['colSpanSm'];
+        /**
+          * Override col-span at the `xl` breakpoint (≥1152px).
+         */
+        "colSpanXl": IGridItem['colSpanXl'];
+        /**
+          * Column offset: shifts the item right by N columns (0–11).
+          * @default 0
+         */
+        "offset": IGridItem['offset'];
+        /**
+          * Row span. `'full'` maps to `grid-row: 1 / -1`.
+         */
+        "rowSpan": IGridItem['rowSpan'];
+    }
+    /**
+     * Container component that manages a list of menu items.
+     * It handles selection logic (single/multiple) and maintains the data state.
+     * @summary A list menu component that can contain multiple menu items and manage their selection state.
+     * @fires bdsChange - Emitted when the selection changes, providing the current selected value(s).
+     * @fires bdsSelect - Emmited when item is selected in menu-role="menu" is clicked
+     * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
+     * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
+     */
+    interface BdsListMenu {
+        /**
+          * Retrieves the currently selected value(s) programmatically.
+          * @method getSelectedValues
+          * @returns The selected value(s) based on the 'multiple' prop.
+         */
+        "getSelectedValues": () => Promise<string | string[]>;
+        /**
+          * Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
+          * @default MENU_ROLES.MENU
+         */
+        "menuRole": IListMenu['menuRole'];
+        /**
+          * Determines if the menu items have selectall/deselectall controls
+          * @default false
+         */
+        "selectControls": IListMenu['selectControls'];
+        /**
+          * The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'.
+          * @default LIST_MENU_SELECTION_MODE.SINGLE
+         */
+        "selectionMode": IListMenu['selectionMode'];
+        /**
+          * Sets the selected values programmatically. Useful for initializing the menu from an external data source or form reset.
+          * @method setSelectedValues
+          * @param values - The value or values to be marked as selected.
+         */
+        "setSelectedValues": (values: string | string[]) => Promise<void>;
+    }
+    /**
+     * Component representing an individual item within a list menu for navigations and selection.
+     * @summary A menu item component that supports different variants, disabled state, and selection state, it also supports link behavior when the href prop is provided.
+     * @attr {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+     * @attr {string} name - The name of the list menu item.
+     * @attr {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+     * @attr {boolean} selected - If true, the menu item is styled as selected.
+     * @attr {boolean} activeItem - If true, the menu item is styled as active.
+     * @attr {string} value - The value associated with the menu item, emitted in events when activated.\
+     * @attr {string} href - The URL for the link. If provided, the menu item will behave as a link.
+     * @attr {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+     * @attr {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+     * @attr {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+     * @property {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+     * @property {string} name - The name of the list menu item.
+     * @property {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+     * @property {boolean} selected - If true, the menu item is styled as selected.
+     * @property {boolean} activeItem - If true, the menu item is styled as active.
+     * @property {string} value - The value associated with the menu item, emitted in events when activated.
+     * @property {string} href - The URL for the link. If provided, the menu item will behave as a link.
+     * @property {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+     * @property {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+     * @property {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+     * @default 'button' - The default variant for the menu item is 'button', which is a standard clickable item.
+     * @default '' - By default, the name of the menu item is an empty string.
+     * @default false - By default, the menu item is not disabled and is interactive.
+     * @default false - By default, the menu item is not selected.
+     * @default false - By default, the menu item is not active.
+     * @default '' - By default, the value of the menu item is an empty string.
+     * @default '' - By default, the href is an empty string, meaning the menu item will not behave as a link.
+     * @default false - By default, the newTab property is false, meaning links will open in the same tab.
+     * @default false - By default, the downloadable property is false, meaning links will not be treated as download links.
+     * @default '' - By default, the filename is an empty string, meaning no suggested filename for downloads.
+     */
+    interface BdsListMenuItem {
+        /**
+          * Active state item
+          * @default false
+         */
+        "activeItem": IListMenuItem['activeItem'];
+        /**
+          * Checkable state item, if is activated should be visible a checkbox
+          * @default false
+         */
+        "checkable": IListMenuItem['checkable'];
+        /**
+          * Disabled state item
+          * @default false
+         */
+        "disabled": IListMenuItem['disabled'];
+        /**
+          * Makes the link downloadable if true
+          * @default ''
+         */
+        "download": IListMenuItem['download'];
+        /**
+          * Link behavior props
+          * @default ''
+         */
+        "href": IListMenuItem['href'];
+        /**
+          * The name of the list menu item
+          * @default ''
+         */
+        "name": IListMenuItem['name'];
+        /**
+          * Opens the link in a new tab if true
+          * @default false
+         */
+        "newTab": IListMenuItem['newTab'];
+        /**
+          * Selected item state
+          * @default false
+         */
+        "selected": IListMenuItem['selected'];
+        /**
+          * Value associated with the menu item
+          * @default ''
+         */
+        "value": IListMenuItem['value'];
+        /**
+          * Defines the visual style of the list menu item. - 'button': A standard clickable item. - 'label': A non-interactive label, typically used for grouping items.
+          * @default LIST_MENU_ITEM_VARIANTS.BUTTON
+         */
+        "variant": IListMenuItem['variant'];
+    }
     /**
      * @attr {boolean} disabled - When true, prevents the popover from being shown.
      * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
@@ -415,122 +791,371 @@ export namespace Components {
         "width"?: IPopover['width'];
     }
     /**
-     * Spinner component used to indicate a loading or processing state.
-     * @summary Displays an animated circular spinner to communicate that content is loading.
-     * @attr {"small"|"medium"|"large"} size - Size of the spinner. Defaults to "small".
-     * @attr {string} label - Accessible label announced by screen readers. Defaults to "Loading".
-     * @property {"small"|"medium"|"large"} size - Controls the visual size of the spinner.
-     * @property {string} label - Text used as the accessible label for screen readers.
+     * Radio button component for single-selection within a group.
+     * Use inside `bds-radio-group` for managed selection and form binding.
+     * Can also be used standalone with the `name`, `value`, and `checked` props.
      */
-    interface BdsSpinner {
+    interface BdsRadio {
         /**
-          * Accessible label announced by screen readers to describe the loading state.
-          * @default "Loading"
+          * Whether this radio is selected. Managed by bds-radio-group; can be set directly when used standalone.
+          * @default false
          */
-        "label": ISpinner['label'];
+        "checked": boolean;
         /**
-          * Controls the visual size of the spinner.
-          * @default "small"
+          * Disables the radio, preventing interaction and selection.
+          * @default false
          */
-        "size": ISpinner['size'];
-    }
-    /**
-     * Text field component for user input with validation and form integration.
-     * @summary Single-line text input with label, validation, password toggle, and clear action.
-     * @attr {string} name - The name submitted with the form.
-     * @attr {string} value - The current value of the input.
-     * @attr {boolean} disabled - Disables the input.
-     * @attr {boolean} required - Marks the input as required.
-     * @attr {boolean} error - Applies the error visual state.
-     * @attr {"text"|"password"} type - Input type.
-     * @attr {"outline"|"plain"} variant - Visual style of the container.
-     * @attr {boolean} readonly - Makes the input read-only. The value is still submitted with the form.
-     * @property {string} label - Label text rendered above the input.
-     * @property {string} sublabel - Sublabel rendered inside the input container, before the text area.
-     * @property {string} placeholder - Native placeholder forwarded to the inner `<input>`.
-     * @property {string} helperText - Assistive text shown below the input when there is no error.
-     * @property {string} errorMessage - Error message shown below the input when `error` is `true`. Replaces `helperText`.
-     * @property {string} info - Tooltip content attached to the label.
-     * @property {string} icon - Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`).
-     * @property {boolean} clearable - Shows a clear button when the input has a value.
-     * @property {boolean} clearOnHover - Shows a clear button that is hidden at rest and revealed on hover.
-     * @property {boolean} readOnly - Makes the input readonly. The value is still submitted with the form.
-     * @property {string} autocomplete - Native `autocomplete` attribute forwarded to the inner `<input>`.
-     * @property {string} pattern - Native `pattern` attribute forwarded to the inner `<input>`.
-     * @property {number} minLength - Minimum character count. `0` means no minimum.
-     * @property {number} maxLength - Maximum character count. `0` means no maximum.
-     * @property {boolean} counter - Enables the character counter in the footer. Requires `charCount`.
-     * @property {number} charCount - Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`.
-     * @property {IFormValidator[]} customValidators - Additional validators merged with the built-in ones.
-     * @property {"blur"|"input"|"submit"|"change"} validationTiming - When built-in validation runs.
-     * @property {string} pattern - Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation.
-     * @property {string} customWidth - Sets a custom width via the `--bds-text-field-width` CSS custom property.
-     * @fires valueChange - Emitted on every value change; used for framework 2-way binding.
-     * @fires bdsInput - Emitted on every keystroke with `{ value, event }`.
-     * @fires bdsChange - Emitted when focus leaves after the value changed, with `{ value, event }`.
-     * @fires bdsFocus - Emitted when the input gains focus, with `{ event }`.
-     * @fires bdsBlur - Emitted when the input loses focus, with `{ event }`.
-     * @fires bdsClear - Emitted when the user activates the clear button.
-     * @fires bdsValidationChange - Emitted after each validation run with `{ valid, validity, value, touched, dirty }`.
-     * @cssprop --bds-text-field-width - Sets a custom width for the component.
-     */
-    interface BdsTextField {
+        "disabled": boolean;
         /**
-          * Native `autocomplete` attribute forwarded to the inner `<input>`.
-          * @default 'off'
+          * Shows error styling on the radio indicator. Propagated by bds-radio-group.
+          * @default false
          */
-        "autocomplete": string;
+        "error": boolean;
         /**
-          * Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`.
-          * @default 0
+          * Tooltip text shown on an info icon next to the label.
+          * @default ''
          */
-        "charCount": number;
+        "info": string;
         /**
-          * Returns `true` if the element's value passes all constraints; `false` otherwise. Also fires an `invalid` event if constraints are violated.
+          * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
+          * @default ''
          */
-        "checkValidity": () => Promise<boolean>;
+        "label": string;
         /**
-          * Shows a clear button that is hidden at rest and revealed when the user hovers over the field.
-          * @default false
+          * Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone.
+          * @default ''
          */
-        "clearOnHover": boolean;
+        "name": string;
         /**
-          * Shows a clear button when the input has a value.
-          * @default false
+          * Value submitted with the form when this radio is selected.
+          * @default 'on'
          */
-        "clearable": boolean;
+        "value": string;
+    }
+    /**
+     * Button-shaped radio option for use inside `bds-radio-group[type="radiobutton"]`.
+     * Creates a segmented control appearance when grouped. Not form-associated — the parent
+     * `bds-radio-group` owns form state and single-selection enforcement.
+     */
+    interface BdsRadioButton {
         /**
-          * Enables the character counter in the footer. Requires `charCount` to be set.
+          * Whether this button is selected. Managed by bds-radio-group; can be set directly when used standalone.
           * @default false
          */
-        "counter": boolean;
-        /**
-          * Additional validators merged with the built-in ones.
-          * @default []
-         */
-        "customValidators": IFormValidator[];
-        /**
-          * Sets a custom width via the `--bds-text-field-width` CSS custom property.
-          * @default ''
-         */
-        "customWidth": string;
+        "checked": boolean;
         /**
-          * Disables the input. Also toggled by `formDisabledCallback` via the mixin.
+          * Disables the button, preventing interaction and selection.
           * @default false
          */
         "disabled": boolean;
         /**
-          * When `true`, applies the error visual state.
+          * Shows error styling on the button. Propagated by bds-radio-group.
           * @default false
          */
         "error": boolean;
         /**
-          * Message shown below the input when `error` is `true`. Replaces `helperText`.
+          * Tooltip text shown on an info icon next to the label.
           * @default ''
          */
-        "errorMessage": string;
+        "info": string;
         /**
-          * Helper text shown below the input when there is no error.
+          * Label text displayed inside the button. Falls back to the default slot when empty.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Value submitted with the form when this button is selected.
+          * @default 'on'
+         */
+        "value": string;
+    }
+    /**
+     * Radio card component is a selectable card-based radio option.
+     * It presents a mutually exclusive choice with optional descriptive text and icon,
+     * designed for integration with bds-radio-group for orchestration.
+     * Can also be used standalone with the `name`, `value`, and `checked` props.
+     * @fires bdsChange - Emitted when the user selects this radio card. Listened to by the parent bds-radio-group to enforce single selection.
+     */
+    interface BdsRadioCard {
+        /**
+          * Whether this radio card is selected. Managed by bds-radio-group; can be set directly when used standalone.
+          * @default false
+         */
+        "checked": IRadioCard['checked'];
+        /**
+          * Disables the radio card, preventing it from being selected and interacted with.
+          * @default false
+         */
+        "disabled": IRadioCard['disabled'];
+        /**
+          * Whether the radio card is in an error state.
+          * @default false
+         */
+        "error": IRadioCard['error'];
+        /**
+          * Tooltip content attached to the radio card content. If empty, the info icon will not be rendered.
+          * @default ''
+         */
+        "info": IRadioCard['info'];
+        /**
+          * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
+          * @default ''
+         */
+        "label": IRadioCard['label'];
+        /**
+          * Name attribute stamped by the parent bds-radio-group. Set directly when used standalone.
+          * @default ''
+         */
+        "name": IRadioCard['name'];
+        /**
+          * Value submitted with the form when this radio is selected.
+          * @default 'on'
+         */
+        "value": IRadioCard['value'];
+    }
+    /**
+     * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
+     */
+    interface BdsRadioGroup {
+        /**
+          * Returns whether the group's current value satisfies the browser's built-in constraint validation.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Disables all child radios and prevents selection. Also mirrored to isDisabled
+          * @State for form-level disable support.
+          * @default false
+         */
+        "disabled": false;
+        /**
+          * Shows error styling on the group helper text. Propagated to all child radios.
+          * @default false
+         */
+        "error": false;
+        /**
+          * Error message rendered below the radio options when error is true. Replaces helperText.
+          * @default ''
+         */
+        "errorMessage": "";
+        /**
+          * Helper text rendered below the radio options. Shown in default state; replaced by errorMessage in error state.
+          * @default ''
+         */
+        "helperText": "";
+        /**
+          * Tooltip text shown on the group label info icon.
+          * @default ''
+         */
+        "info": "";
+        /**
+          * Group label rendered above the radio options.
+          * @default ''
+         */
+        "label": "";
+        /**
+          * Name of the form control; submitted as the field key in FormData.
+         */
+        "name": string;
+        /**
+          * Layout direction of the radio options.
+          * @default ORIENTATIONS.VERTICAL
+         */
+        "orientation": Orientation;
+        /**
+          * Reports the group's validity state to the user, showing native validation UI if invalid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Marks the group as required for form submission. Triggers validity error when no radio is selected.
+          * @default false
+         */
+        "required": false;
+        /**
+          * Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element.
+          * @default RADIO_GROUP_TYPES.RADIO
+         */
+        "type": RadioGroupType;
+        /**
+          * Currently selected radio value. Synced to children on change.
+          * @default ''
+         */
+        "value": string;
+    }
+    /**
+     * Spinner component used to indicate a loading or processing state.
+     * @summary Displays an animated circular spinner to communicate that content is loading.
+     * @attr {"small"|"medium"|"large"} size - Size of the spinner. Defaults to "small".
+     * @attr {string} label - Accessible label announced by screen readers. Defaults to "Loading".
+     * @property {"small"|"medium"|"large"} size - Controls the visual size of the spinner.
+     * @property {string} label - Text used as the accessible label for screen readers.
+     */
+    interface BdsSpinner {
+        /**
+          * Accessible label announced by screen readers to describe the loading state.
+          * @default "Loading"
+         */
+        "label": ISpinner['label'];
+        /**
+          * Controls the visual size of the spinner.
+          * @default "small"
+         */
+        "size": ISpinner['size'];
+    }
+    /**
+     * Status badge component for communicating the current state of an item or process.
+     */
+    interface BdsStatus {
+        /**
+          * indicator is a string attribute. Controls the type of indicator rendered before the slotted label. An invalid value falls back to `"none"` and a warning is set on the host element.
+          * @default INDICATOR_TYPES.NONE
+         */
+        "indicator": IStatus['indicator'];
+        /**
+          * state is a string attribute. Controls the visual state variant of the status badge. Determines the background, accent, and text colors applied to the element. An invalid value falls back to `"neutral"` and a warning is set on the host element.
+          * @default PROCESS_STATUS.NEUTRAL
+         */
+        "state": IStatus['state'];
+    }
+    /**
+     * Tag component used to represent categories, metadata, or removable filters.
+     * @summary Displays a label with optional leading/trailing icons and dismissal capability.
+     * @fires bdsClose - Emitted when the tag is closed via the close button or Delete key.
+     * @fires bdsSelect - Emitted when the tag is selected via a click or Space/Enter key.
+     */
+    interface BdsTag {
+        /**
+          * Aria label for the close button when visible.
+          * @default 'Close tag'
+         */
+        "closeButtonLabel": ITag['closeButtonLabel'];
+        /**
+          * Visual color variant: 'gray', 'cyan', 'cobalt', 'teal', 'lime', 'orange', 'rose', or 'purple'.
+          * @default "gray"
+         */
+        "color": ITag['color'];
+        /**
+          * Disables interaction with the tag. Reduces opacity and prevents interactions.
+          * @default false
+         */
+        "disabled": ITag['disabled'];
+        /**
+          * Whether the tag is selectable or not.
+          * @default false
+         */
+        "multiselect": ITag['multiselect'];
+        /**
+          * Hides the close button that allows users to dismiss the tag.
+          * @default false
+         */
+        "readonly": ITag['readonly'];
+        /**
+          * Whether the tag is selected or not.
+          * @default false
+         */
+        "selected": ITag['selected'];
+    }
+    /**
+     * Text field component for user input with validation and form integration.
+     * @summary Single-line text input with label, validation, password toggle, and clear action.
+     * @attr {string} name - The name submitted with the form.
+     * @attr {string} value - The current value of the input.
+     * @attr {boolean} disabled - Disables the input.
+     * @attr {boolean} required - Marks the input as required.
+     * @attr {boolean} error - Applies the error visual state.
+     * @attr {"text"|"password"} type - Input type.
+     * @attr {"outline"|"plain"} variant - Visual style of the container.
+     * @attr {boolean} readonly - Makes the input read-only. The value is still submitted with the form.
+     * @property {string} label - Label text rendered above the input.
+     * @property {string} sublabel - Sublabel rendered inside the input container, before the text area.
+     * @property {string} placeholder - Native placeholder forwarded to the inner `<input>`.
+     * @property {string} helperText - Assistive text shown below the input when there is no error.
+     * @property {string} errorMessage - Error message shown below the input when `error` is `true`. Replaces `helperText`.
+     * @property {string} info - Tooltip content attached to the label.
+     * @property {string} icon - Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`).
+     * @property {boolean} clearable - Shows a clear button when the input has a value.
+     * @property {boolean} clearOnHover - Shows a clear button that is hidden at rest and revealed on hover.
+     * @property {boolean} readOnly - Makes the input readonly. The value is still submitted with the form.
+     * @property {string} autocomplete - Native `autocomplete` attribute forwarded to the inner `<input>`.
+     * @property {string} pattern - Native `pattern` attribute forwarded to the inner `<input>`.
+     * @property {number} minLength - Minimum character count. `0` means no minimum.
+     * @property {number} maxLength - Maximum character count. `0` means no maximum.
+     * @property {boolean} counter - Enables the character counter in the footer. Requires `charCount`.
+     * @property {number} charCount - Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`.
+     * @property {IFormValidator[]} customValidators - Additional validators merged with the built-in ones.
+     * @property {"blur"|"input"|"submit"|"change"} validationTiming - When built-in validation runs.
+     * @property {string} pattern - Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation.
+     * @property {string} customWidth - Sets a custom width via the `--bds-text-field-width` CSS custom property.
+     * @fires valueChange - Emitted on every value change; used for framework 2-way binding.
+     * @fires bdsInput - Emitted on every keystroke with `{ value, event }`.
+     * @fires bdsChange - Emitted when focus leaves after the value changed, with `{ value, event }`.
+     * @fires bdsFocus - Emitted when the input gains focus, with `{ event }`.
+     * @fires bdsBlur - Emitted when the input loses focus, with `{ event }`.
+     * @fires bdsClear - Emitted when the user activates the clear button.
+     * @fires bdsValidationChange - Emitted after each validation run with `{ valid, validity, value, touched, dirty }`.
+     * @cssprop --bds-text-field-width - Sets a custom width for the component.
+     */
+    interface BdsTextField {
+        /**
+          * Native `autocomplete` attribute forwarded to the inner `<input>`.
+          * @default 'off'
+         */
+        "autocomplete": string;
+        /**
+          * Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`.
+          * @default 0
+         */
+        "charCount": number;
+        /**
+          * Returns `true` if the element's value passes all constraints; `false` otherwise. Also fires an `invalid` event if constraints are violated.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Shows a clear button that is hidden at rest and revealed when the user hovers over the field.
+          * @default false
+         */
+        "clearOnHover": boolean;
+        /**
+          * Shows a clear button when the input has a value.
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * Enables the character counter in the footer. Requires `charCount` to be set.
+          * @default false
+         */
+        "counter": boolean;
+        /**
+          * Additional validators merged with the built-in ones.
+          * @default []
+         */
+        "customValidators": IFormValidator[];
+        /**
+          * Sets a custom width via the `--bds-text-field-width` CSS custom property.
+          * @default ''
+         */
+        "customWidth": string;
+        /**
+          * Disables the input. Also toggled by `formDisabledCallback` via the mixin.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * When `true`, applies the error visual state.
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Message shown below the input when `error` is `true`. Replaces `helperText`.
+          * @default ''
+         */
+        "errorMessage": string;
+        /**
+          * Helper text shown below the input when there is no error.
           * @default ''
          */
         "helperText": string;
@@ -615,51 +1240,121 @@ export namespace Components {
         "variant": TextFieldVariant;
     }
     /**
-     * Tooltip component that displays a short label anchored to a trigger element on hover.
-     * @summary Displays a floating tooltip anchored to a trigger element on mouseenter/mouseleave,
-     * with configurable placement, optional arrow, and multiline support.
-     * @attr {boolean} disabled - When true, prevents the tooltip from being shown.
-     * @attr {boolean} multiline - When true, allows the tooltip content to wrap across multiple lines.
-     * @attr {Partial<FloatingTooltipProp>} floating-options - Configuration object for floating behavior.
-     * @csspart arrow - The arrow element pointing toward the trigger.
-     * @csspart tooltip-content - The inner content wrapper inside the tooltip.
-     * @cssprop data-placement - Reflects the resolved placement on the tooltip container element.
-     * @cssprop data-hidearrow - Reflects the hideArrow option on the tooltip container element.
-     * @cssprop data-multiline - Reflects the multiline prop on the tooltip container element.
+     * Toggle/Switch component for boolean selection.
+     * @summary A toggle switch form control with label positioning support.
+     * @property {string}  name        - Name of the form control, submitted as a key in the form data.
+     * @property {boolean} disabled    - Disables the control. Defaults to `false`.
+     * @property {boolean} required    - Marks the control as required for form submission. Defaults to `false`.
+     * @property {boolean} checked     - Whether the toggle is on. Defaults to `false`.
+     * @property {string}  placement   - Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `"left"`.
+     * @property {string}  label       - Label displayed next to the toggle. Defaults to `""`.
+     * @property {string}  helperText  - Help text displayed below the toggle. Defaults to `""`.
+     * @property {string}  value       - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+     * @fires bdsChange   - Emitted when the user toggles the switch. Payload: `IToggleEventChange`.
      */
-    interface BdsTooltip {
+    interface BdsToggle {
         /**
-          * If true, disables the tooltip.
+          * Whether the toggle is on. Defaults to `false`.
           * @default false
          */
-        "disabled"?: ITooltip['disabled'];
+        "checked": IToggle['checked'];
         /**
-          * Override default options for the floating mixin. This can be overridden by passing a different object to the `floatingOptions` prop.
-          * @default {}
+          * Disables the control. Defaults to `false`.
+          * @default false
          */
-        "floatingOptions": Partial<FloatingTooltipProp>;
+        "disabled": IToggle['disabled'];
         /**
-          * If true, allows multiline content in the tooltip.
+          * When `true`, applies the error visual state.
           * @default false
          */
-        "multiline"?: ITooltip['multiline'];
-    }
-    /**
-     * Typography component for displaying text with various styles, sizes, and interactive features.
-     * @summary A comprehensive typography component that supports multiple text variants, sizes, alignments, states, and link functionality.
-     * @attr {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
-     * @attr {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
-     * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
-     * @attr {string} align - The text alignment. Options: start, center, end, inherit
-     * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-     * @attr {boolean} is-required - Shows a required indicator when used with `label` variant.
-     * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
-     * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
-     * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
-     * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-     * @attr {boolean} is-downloadable - Makes the `link` download a file.
-     * @attr {string} filename - Suggested filename when downloading a file from the `link`.
-     * @attr {string} html-for - The for attribute when rendered as a label
+        "error": IToggle['error'];
+        /**
+          * Message shown below the input when `error` is `true`. Replaces `helperText`.
+          * @default ''
+         */
+        "errorMessage": IToggle['errorMessage'];
+        /**
+          * Help text displayed below the toggle. Defaults to `""`.
+          * @default ''
+         */
+        "helperText": IToggle['helperText'];
+        /**
+          * Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop.
+          * @default ''
+         */
+        "info": IToggle['info'];
+        /**
+          * Label displayed next to the toggle. Defaults to `""`.
+          * @default ''
+         */
+        "label": IToggle['label'];
+        /**
+          * Name of the form control, submitted as a key in the form data.
+         */
+        "name": IToggle['name'];
+        /**
+          * Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `TOGGLE_PLACEMENT.LEFT`.
+          * @default TOGGLE_PLACEMENT.LEFT
+         */
+        "placement": IToggle['placement'];
+        /**
+          * Marks the control as required for form submission. Defaults to `false`.
+          * @default false
+         */
+        "required": IToggle['required'];
+        /**
+          * Value submitted with the form data when checked. Behaves like the `value` attribute of a native `<input type="checkbox">`. Defaults to `"on"`.
+          * @default 'on'
+         */
+        "value": IToggle['value'];
+    }
+    /**
+     * Tooltip component that displays a short label anchored to a trigger element on hover.
+     * @summary Displays a floating tooltip anchored to a trigger element on mouseenter/mouseleave,
+     * with configurable placement, optional arrow, and multiline support.
+     * @attr {boolean} disabled - When true, prevents the tooltip from being shown.
+     * @attr {boolean} multiline - When true, allows the tooltip content to wrap across multiple lines.
+     * @attr {Partial<FloatingTooltipProp>} floating-options - Configuration object for floating behavior.
+     * @csspart arrow - The arrow element pointing toward the trigger.
+     * @csspart tooltip-content - The inner content wrapper inside the tooltip.
+     * @cssprop data-placement - Reflects the resolved placement on the tooltip container element.
+     * @cssprop data-hidearrow - Reflects the hideArrow option on the tooltip container element.
+     * @cssprop data-multiline - Reflects the multiline prop on the tooltip container element.
+     */
+    interface BdsTooltip {
+        /**
+          * If true, disables the tooltip.
+          * @default false
+         */
+        "disabled"?: ITooltip['disabled'];
+        /**
+          * Override default options for the floating mixin. This can be overridden by passing a different object to the `floatingOptions` prop.
+          * @default {}
+         */
+        "floatingOptions": Partial<FloatingTooltipProp>;
+        /**
+          * If true, allows multiline content in the tooltip.
+          * @default false
+         */
+        "multiline"?: ITooltip['multiline'];
+    }
+    /**
+     * Typography component for displaying text with various styles, sizes, and interactive features.
+     * @summary A comprehensive typography component that supports multiple text variants, sizes, alignments, states, and link functionality.
+     * @attr {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
+     * @attr {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
+     * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
+     * @attr {string} align - The text alignment. Options: start, center, end, inherit
+     * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
+     * @attr {boolean} required - Shows a required indicator when used with `label` variant.
+     * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
+     * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
+     * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
+     * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
+     * @attr {boolean} downloadable - Makes the `link` download a file.
+     * @attr {string} filename - Suggested filename when downloading a file from the `link`.
+     * @attr {string} html-for - The for attribute when rendered as a label
      * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
      * @attr {string} custom-class - Additional custom CSS class
      * @property {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
@@ -667,12 +1362,12 @@ export namespace Components {
      * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
      * @property {string} align - The text alignment. Options: start, center, end, inherit
      * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-     * @property {boolean} isRequired - Shows a required indicator when used with `label` variant.
+     * @property {boolean} required - Shows a required indicator when used with `label` variant.
      * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
      * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
      * @property {string} href - URL when the typography is an `a` element and a `link` variant.
      * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-     * @property {boolean} isDownloadable - Makes the `link` download a file.
+     * @property {boolean} downloadable - Makes the `link` download a file.
      * @property {string} filename - Suggested filename when downloading a file from the `link`.
      * @property {string} htmlFor - The for attribute when rendered as a label
      * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -682,12 +1377,12 @@ export namespace Components {
      * @default 'start' - Default align value
      * @default 'md' - Default size value
      * @default 'default' - Default state value
-     * @default false - Default isRequired state
+     * @default false - Default required state
      * @default false - Default ellipsis state
      * @default 1 - Default maxLines value
      * @default '' - Default href value
      * @default '' - Default target value
-     * @default false - Default isDownloadable state
+     * @default false - Default downloadable state
      * @default 'download' - Default filename value
      * @default '' - Default tooltipText value
      */
@@ -702,6 +1397,11 @@ export namespace Components {
           * @default ''
          */
         "customClass": string;
+        /**
+          * Enables download behavior for anchor.
+          * @default false
+         */
+        "downloadable": ITypography['downloadable'];
         /**
           * HTML tag used for rendering.
           * @default TAG_ELEMENT.P
@@ -728,20 +1428,15 @@ export namespace Components {
          */
         "htmlFor": ITypography['htmlFor'];
         /**
-          * Enables download behavior for anchor.
-          * @default false
+          * Max lines when ellipsis is enabled.
+          * @default 1
          */
-        "isDownloadable": ITypography['isDownloadable'];
+        "maxLines": ITypography['maxLines'];
         /**
           * Marks the field as required.
           * @default false
          */
-        "isRequired": ITypography['isRequired'];
-        /**
-          * Max lines when ellipsis is enabled.
-          * @default 1
-         */
-        "maxLines": ITypography['maxLines'];
+        "required": ITypography['required'];
         /**
           * Typography size token.
           * @default SIZES.M
@@ -781,15 +1476,86 @@ export interface BdsCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBdsCheckboxElement;
 }
+export interface BdsCheckboxCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsCheckboxCardElement;
+}
 export interface BdsDialogCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBdsDialogElement;
 }
+export interface BdsListMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsListMenuElement;
+}
+export interface BdsListMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsListMenuItemElement;
+}
+export interface BdsRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsRadioElement;
+}
+export interface BdsRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsRadioButtonElement;
+}
+export interface BdsRadioCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsRadioCardElement;
+}
+export interface BdsRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsRadioGroupElement;
+}
+export interface BdsTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsTagElement;
+}
 export interface BdsTextFieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBdsTextFieldElement;
 }
+export interface BdsToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsToggleElement;
+}
 declare global {
+    /**
+     * Avatar component used to display user initials or names for visual identification.
+     * @summary Displays a circular avatar with user initials and optional name label.
+     * Uses Boreal Design System tokens for consistent styling across platforms.
+     * @attr {string} username - The full name used to generate initials or display as label.
+     * @attr {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+     * @attr {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+     * @attr {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+     * @property {string} username - The full name used to generate initials or display as label.
+     * @property {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+     * @property {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+     * @property {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+     * @cssprop --bds-avatar-background - Custom background color HEX code.
+     * @cssprop --bds-avatar-initials-color - Custom text color HEX code.
+     */
+    interface HTMLBdsAvatarElement extends Components.BdsAvatar, HTMLStencilElement {
+    }
+    var HTMLBdsAvatarElement: {
+        prototype: HTMLBdsAvatarElement;
+        new (): HTMLBdsAvatarElement;
+    };
+    /**
+     * Badge component for displaying contextual status information with optional icon support.
+     * @summary A compact label component that communicates status or category using color-coded variants. Supports an optional icon slot and a disabled state.
+     * @attr {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+     * @attr {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+     * @property {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+     * @property {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+     */
+    interface HTMLBdsBadgeElement extends Components.BdsBadge, HTMLStencilElement {
+    }
+    var HTMLBdsBadgeElement: {
+        prototype: HTMLBdsBadgeElement;
+        new (): HTMLBdsBadgeElement;
+    };
     interface HTMLBdsBannerElementEventMap {
         "bdsClose": void;
     }
@@ -801,8 +1567,8 @@ declare global {
      * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
      * @property {boolean} closable - Shows a close button that allows users to close the banner. Defaults to false.
      * @property {boolean} closeButtonLabel - Aria label for the close button when visible.
-     * @fires bdsClose - Emitted when the banner is closed via the close button or `closeBanner` method.
-     * @method closeBanner - Programmatic method to close the banner and emit the `bdsClose` event.
+     * @fires bdsClose - Emitted when the banner is closed via the close button or `close` method.
+     * @method close - Programmatic method to close the banner and emit the `bdsClose` event.
      */
     interface HTMLBdsBannerElement extends Components.BdsBanner, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBdsBannerElementEventMap>(type: K, listener: (this: HTMLBdsBannerElement, ev: BdsBannerCustomEvent<HTMLBdsBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -830,7 +1596,7 @@ declare global {
      * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
      * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
      * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-     * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+     * @attr {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
      * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
      * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
      * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
@@ -839,13 +1605,13 @@ declare global {
      * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
      * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
      * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-     * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+     * @property {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
      * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
      * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
      * @default 'button' - Default type value
      * @default 'default' - Default color value
      * @default 'default' - Default variant value
-     * @default 'medium' - Default size value
+     * @default 'md' - Default size value
      * @default 'default' - Default status value
      * @default false - Default disabled value
      * @default '' - Default label value
@@ -867,6 +1633,15 @@ declare global {
         prototype: HTMLBdsButtonElement;
         new (): HTMLBdsButtonElement;
     };
+    /**
+     * Button group component for grouping related buttons together in a unified visual unit.
+     */
+    interface HTMLBdsButtonGroupElement extends Components.BdsButtonGroup, HTMLStencilElement {
+    }
+    var HTMLBdsButtonGroupElement: {
+        prototype: HTMLBdsButtonGroupElement;
+        new (): HTMLBdsButtonGroupElement;
+    };
     interface HTMLBdsCheckboxElementEventMap {
         "valueChange": boolean;
         "bdsChange": CheckboxChangeDetail;
@@ -896,6 +1671,40 @@ declare global {
         prototype: HTMLBdsCheckboxElement;
         new (): HTMLBdsCheckboxElement;
     };
+    interface HTMLBdsCheckboxCardElementEventMap {
+        "valueChange": any;
+        "bdsChange": any;
+    }
+    /**
+     * Checkbox card component is a selectable card-based checkbox option.
+     * It presents a non-exclusive choice with optional descriptive text and icon,
+     * supporting checked, indeterminate, disabled, and error states.
+     * Can be used standalone or within a checkbox group for orchestration.
+     * @property {string}  name          - Name of the form control, submitted as a key in the form data.
+     * @property {boolean} disabled      - Disables the control. Defaults to `false`.
+     * @property {boolean} required      - Marks the control as required for form submission. Defaults to `false`.
+     * @property {string}  value         - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @property {string}  label         - Label displayed next to the checkbox. If not provided, the default slot is used.
+     * @property {boolean} checked       - Whether the checkbox card is selected. Defaults to `false`.
+     * @property {boolean} indeterminate - Whether the checkbox card shows an indeterminate ("mixed") visual state. Defaults to `false`.
+     * @property {boolean} error         - Whether the checkbox card is in an error state. Defaults to `false`.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+     * @fires bdsChange   - Emitted when the user toggles the checkbox card. Payload: `{ checked: boolean, value: string }`.
+     */
+    interface HTMLBdsCheckboxCardElement extends Components.BdsCheckboxCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsCheckboxCardElementEventMap>(type: K, listener: (this: HTMLBdsCheckboxCardElement, ev: BdsCheckboxCardCustomEvent<HTMLBdsCheckboxCardElementEventMap[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 HTMLBdsCheckboxCardElementEventMap>(type: K, listener: (this: HTMLBdsCheckboxCardElement, ev: BdsCheckboxCardCustomEvent<HTMLBdsCheckboxCardElementEventMap[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 HTMLBdsCheckboxCardElement: {
+        prototype: HTMLBdsCheckboxCardElement;
+        new (): HTMLBdsCheckboxCardElement;
+    };
     interface HTMLBdsDialogElementEventMap {
         "bdsOpen": void;
         "bdsClose": void;
@@ -950,6 +1759,19 @@ declare global {
         prototype: HTMLBdsDialogElement;
         new (): HTMLBdsDialogElement;
     };
+    /**
+     * Divider component for creating visual separators between content sections.
+     * @summary A simple visual separator that can be oriented horizontally or vertically.
+     * @csspart divider - A divider element that visually separates content.
+     * @attr {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+     * @property {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+     */
+    interface HTMLBdsDividerElement extends Components.BdsDivider, HTMLStencilElement {
+    }
+    var HTMLBdsDividerElement: {
+        prototype: HTMLBdsDividerElement;
+        new (): HTMLBdsDividerElement;
+    };
     /**
      * Flag component used to display a country flag together with its corresponding label.
      * @summary Renders a flag icon based on a country identifier and optionally displays
@@ -978,6 +1800,103 @@ declare global {
         prototype: HTMLBdsFlagElement;
         new (): HTMLBdsFlagElement;
     };
+    /**
+     * 12-column CSS Grid layout container with 5 responsive breakpoints.
+     * Minimum browser support: Chrome/Edge (last 2), Firefox (last 2), Safari (last 2).
+     */
+    interface HTMLBdsGridElement extends Components.BdsGrid, HTMLStencilElement {
+    }
+    var HTMLBdsGridElement: {
+        prototype: HTMLBdsGridElement;
+        new (): HTMLBdsGridElement;
+    };
+    /**
+     * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+     */
+    interface HTMLBdsGridItemElement extends Components.BdsGridItem, HTMLStencilElement {
+    }
+    var HTMLBdsGridItemElement: {
+        prototype: HTMLBdsGridItemElement;
+        new (): HTMLBdsGridItemElement;
+    };
+    interface HTMLBdsListMenuElementEventMap {
+        "bdsChange": string | string[];
+        "bdsSelect": ListMenuChangeDetail;
+    }
+    /**
+     * Container component that manages a list of menu items.
+     * It handles selection logic (single/multiple) and maintains the data state.
+     * @summary A list menu component that can contain multiple menu items and manage their selection state.
+     * @fires bdsChange - Emitted when the selection changes, providing the current selected value(s).
+     * @fires bdsSelect - Emmited when item is selected in menu-role="menu" is clicked
+     * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
+     * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
+     */
+    interface HTMLBdsListMenuElement extends Components.BdsListMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsListMenuElementEventMap>(type: K, listener: (this: HTMLBdsListMenuElement, ev: BdsListMenuCustomEvent<HTMLBdsListMenuElementEventMap[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 HTMLBdsListMenuElementEventMap>(type: K, listener: (this: HTMLBdsListMenuElement, ev: BdsListMenuCustomEvent<HTMLBdsListMenuElementEventMap[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 HTMLBdsListMenuElement: {
+        prototype: HTMLBdsListMenuElement;
+        new (): HTMLBdsListMenuElement;
+    };
+    interface HTMLBdsListMenuItemElementEventMap {
+        "bdsSelectItem": IListMenuItemEvent;
+    }
+    /**
+     * Component representing an individual item within a list menu for navigations and selection.
+     * @summary A menu item component that supports different variants, disabled state, and selection state, it also supports link behavior when the href prop is provided.
+     * @attr {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+     * @attr {string} name - The name of the list menu item.
+     * @attr {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+     * @attr {boolean} selected - If true, the menu item is styled as selected.
+     * @attr {boolean} activeItem - If true, the menu item is styled as active.
+     * @attr {string} value - The value associated with the menu item, emitted in events when activated.\
+     * @attr {string} href - The URL for the link. If provided, the menu item will behave as a link.
+     * @attr {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+     * @attr {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+     * @attr {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+     * @property {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+     * @property {string} name - The name of the list menu item.
+     * @property {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+     * @property {boolean} selected - If true, the menu item is styled as selected.
+     * @property {boolean} activeItem - If true, the menu item is styled as active.
+     * @property {string} value - The value associated with the menu item, emitted in events when activated.
+     * @property {string} href - The URL for the link. If provided, the menu item will behave as a link.
+     * @property {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+     * @property {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+     * @property {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+     * @default 'button' - The default variant for the menu item is 'button', which is a standard clickable item.
+     * @default '' - By default, the name of the menu item is an empty string.
+     * @default false - By default, the menu item is not disabled and is interactive.
+     * @default false - By default, the menu item is not selected.
+     * @default false - By default, the menu item is not active.
+     * @default '' - By default, the value of the menu item is an empty string.
+     * @default '' - By default, the href is an empty string, meaning the menu item will not behave as a link.
+     * @default false - By default, the newTab property is false, meaning links will open in the same tab.
+     * @default false - By default, the downloadable property is false, meaning links will not be treated as download links.
+     * @default '' - By default, the filename is an empty string, meaning no suggested filename for downloads.
+     */
+    interface HTMLBdsListMenuItemElement extends Components.BdsListMenuItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsListMenuItemElementEventMap>(type: K, listener: (this: HTMLBdsListMenuItemElement, ev: BdsListMenuItemCustomEvent<HTMLBdsListMenuItemElementEventMap[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 HTMLBdsListMenuItemElementEventMap>(type: K, listener: (this: HTMLBdsListMenuItemElement, ev: BdsListMenuItemCustomEvent<HTMLBdsListMenuItemElementEventMap[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 HTMLBdsListMenuItemElement: {
+        prototype: HTMLBdsListMenuItemElement;
+        new (): HTMLBdsListMenuItemElement;
+    };
     /**
      * @attr {boolean} disabled - When true, prevents the popover from being shown.
      * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
@@ -997,6 +1916,95 @@ declare global {
         prototype: HTMLBdsPopoverElement;
         new (): HTMLBdsPopoverElement;
     };
+    interface HTMLBdsRadioElementEventMap {
+        "bdsChange": RadioChangeDetail;
+    }
+    /**
+     * Radio button component for single-selection within a group.
+     * Use inside `bds-radio-group` for managed selection and form binding.
+     * Can also be used standalone with the `name`, `value`, and `checked` props.
+     */
+    interface HTMLBdsRadioElement extends Components.BdsRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsRadioElementEventMap>(type: K, listener: (this: HTMLBdsRadioElement, ev: BdsRadioCustomEvent<HTMLBdsRadioElementEventMap[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 HTMLBdsRadioElementEventMap>(type: K, listener: (this: HTMLBdsRadioElement, ev: BdsRadioCustomEvent<HTMLBdsRadioElementEventMap[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 HTMLBdsRadioElement: {
+        prototype: HTMLBdsRadioElement;
+        new (): HTMLBdsRadioElement;
+    };
+    interface HTMLBdsRadioButtonElementEventMap {
+        "bdsChange": RadioButtonChangeDetail;
+    }
+    /**
+     * Button-shaped radio option for use inside `bds-radio-group[type="radiobutton"]`.
+     * Creates a segmented control appearance when grouped. Not form-associated — the parent
+     * `bds-radio-group` owns form state and single-selection enforcement.
+     */
+    interface HTMLBdsRadioButtonElement extends Components.BdsRadioButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsRadioButtonElementEventMap>(type: K, listener: (this: HTMLBdsRadioButtonElement, ev: BdsRadioButtonCustomEvent<HTMLBdsRadioButtonElementEventMap[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 HTMLBdsRadioButtonElementEventMap>(type: K, listener: (this: HTMLBdsRadioButtonElement, ev: BdsRadioButtonCustomEvent<HTMLBdsRadioButtonElementEventMap[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 HTMLBdsRadioButtonElement: {
+        prototype: HTMLBdsRadioButtonElement;
+        new (): HTMLBdsRadioButtonElement;
+    };
+    interface HTMLBdsRadioCardElementEventMap {
+        "bdsChange": RadioCardChangeDetail;
+    }
+    /**
+     * Radio card component is a selectable card-based radio option.
+     * It presents a mutually exclusive choice with optional descriptive text and icon,
+     * designed for integration with bds-radio-group for orchestration.
+     * Can also be used standalone with the `name`, `value`, and `checked` props.
+     * @fires bdsChange - Emitted when the user selects this radio card. Listened to by the parent bds-radio-group to enforce single selection.
+     */
+    interface HTMLBdsRadioCardElement extends Components.BdsRadioCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsRadioCardElementEventMap>(type: K, listener: (this: HTMLBdsRadioCardElement, ev: BdsRadioCardCustomEvent<HTMLBdsRadioCardElementEventMap[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 HTMLBdsRadioCardElementEventMap>(type: K, listener: (this: HTMLBdsRadioCardElement, ev: BdsRadioCardCustomEvent<HTMLBdsRadioCardElementEventMap[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 HTMLBdsRadioCardElement: {
+        prototype: HTMLBdsRadioCardElement;
+        new (): HTMLBdsRadioCardElement;
+    };
+    interface HTMLBdsRadioGroupElementEventMap {
+        "bdsChange": RadioGroupChangeDetail;
+        "valueChange": string;
+    }
+    /**
+     * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
+     */
+    interface HTMLBdsRadioGroupElement extends Components.BdsRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsRadioGroupElementEventMap>(type: K, listener: (this: HTMLBdsRadioGroupElement, ev: BdsRadioGroupCustomEvent<HTMLBdsRadioGroupElementEventMap[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 HTMLBdsRadioGroupElementEventMap>(type: K, listener: (this: HTMLBdsRadioGroupElement, ev: BdsRadioGroupCustomEvent<HTMLBdsRadioGroupElementEventMap[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 HTMLBdsRadioGroupElement: {
+        prototype: HTMLBdsRadioGroupElement;
+        new (): HTMLBdsRadioGroupElement;
+    };
     /**
      * Spinner component used to indicate a loading or processing state.
      * @summary Displays an animated circular spinner to communicate that content is loading.
@@ -1011,6 +2019,39 @@ declare global {
         prototype: HTMLBdsSpinnerElement;
         new (): HTMLBdsSpinnerElement;
     };
+    /**
+     * Status badge component for communicating the current state of an item or process.
+     */
+    interface HTMLBdsStatusElement extends Components.BdsStatus, HTMLStencilElement {
+    }
+    var HTMLBdsStatusElement: {
+        prototype: HTMLBdsStatusElement;
+        new (): HTMLBdsStatusElement;
+    };
+    interface HTMLBdsTagElementEventMap {
+        "bdsClose": TagEventPayload;
+        "bdsSelect": TagEventPayload;
+    }
+    /**
+     * Tag component used to represent categories, metadata, or removable filters.
+     * @summary Displays a label with optional leading/trailing icons and dismissal capability.
+     * @fires bdsClose - Emitted when the tag is closed via the close button or Delete key.
+     * @fires bdsSelect - Emitted when the tag is selected via a click or Space/Enter key.
+     */
+    interface HTMLBdsTagElement extends Components.BdsTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsTagElementEventMap>(type: K, listener: (this: HTMLBdsTagElement, ev: BdsTagCustomEvent<HTMLBdsTagElementEventMap[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 HTMLBdsTagElementEventMap>(type: K, listener: (this: HTMLBdsTagElement, ev: BdsTagCustomEvent<HTMLBdsTagElementEventMap[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 HTMLBdsTagElement: {
+        prototype: HTMLBdsTagElement;
+        new (): HTMLBdsTagElement;
+    };
     interface HTMLBdsTextFieldElementEventMap {
         "valueChange": string;
         "bdsInput": { value: string; event: InputEvent };
@@ -1080,6 +2121,38 @@ declare global {
         prototype: HTMLBdsTextFieldElement;
         new (): HTMLBdsTextFieldElement;
     };
+    interface HTMLBdsToggleElementEventMap {
+        "valueChange": boolean;
+        "bdsChange": IToggleEventChange;
+    }
+    /**
+     * Toggle/Switch component for boolean selection.
+     * @summary A toggle switch form control with label positioning support.
+     * @property {string}  name        - Name of the form control, submitted as a key in the form data.
+     * @property {boolean} disabled    - Disables the control. Defaults to `false`.
+     * @property {boolean} required    - Marks the control as required for form submission. Defaults to `false`.
+     * @property {boolean} checked     - Whether the toggle is on. Defaults to `false`.
+     * @property {string}  placement   - Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `"left"`.
+     * @property {string}  label       - Label displayed next to the toggle. Defaults to `""`.
+     * @property {string}  helperText  - Help text displayed below the toggle. Defaults to `""`.
+     * @property {string}  value       - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+     * @fires bdsChange   - Emitted when the user toggles the switch. Payload: `IToggleEventChange`.
+     */
+    interface HTMLBdsToggleElement extends Components.BdsToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsToggleElementEventMap>(type: K, listener: (this: HTMLBdsToggleElement, ev: BdsToggleCustomEvent<HTMLBdsToggleElementEventMap[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 HTMLBdsToggleElementEventMap>(type: K, listener: (this: HTMLBdsToggleElement, ev: BdsToggleCustomEvent<HTMLBdsToggleElementEventMap[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 HTMLBdsToggleElement: {
+        prototype: HTMLBdsToggleElement;
+        new (): HTMLBdsToggleElement;
+    };
     /**
      * Tooltip component that displays a short label anchored to a trigger element on hover.
      * @summary Displays a floating tooltip anchored to a trigger element on mouseenter/mouseleave,
@@ -1107,12 +2180,12 @@ declare global {
      * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
      * @attr {string} align - The text alignment. Options: start, center, end, inherit
      * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-     * @attr {boolean} is-required - Shows a required indicator when used with `label` variant.
+     * @attr {boolean} required - Shows a required indicator when used with `label` variant.
      * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
      * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
      * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
      * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-     * @attr {boolean} is-downloadable - Makes the `link` download a file.
+     * @attr {boolean} downloadable - Makes the `link` download a file.
      * @attr {string} filename - Suggested filename when downloading a file from the `link`.
      * @attr {string} html-for - The for attribute when rendered as a label
      * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -1122,12 +2195,12 @@ declare global {
      * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
      * @property {string} align - The text alignment. Options: start, center, end, inherit
      * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-     * @property {boolean} isRequired - Shows a required indicator when used with `label` variant.
+     * @property {boolean} required - Shows a required indicator when used with `label` variant.
      * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
      * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
      * @property {string} href - URL when the typography is an `a` element and a `link` variant.
      * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-     * @property {boolean} isDownloadable - Makes the `link` download a file.
+     * @property {boolean} downloadable - Makes the `link` download a file.
      * @property {string} filename - Suggested filename when downloading a file from the `link`.
      * @property {string} htmlFor - The for attribute when rendered as a label
      * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -1137,12 +2210,12 @@ declare global {
      * @default 'start' - Default align value
      * @default 'md' - Default size value
      * @default 'default' - Default state value
-     * @default false - Default isRequired state
+     * @default false - Default required state
      * @default false - Default ellipsis state
      * @default 1 - Default maxLines value
      * @default '' - Default href value
      * @default '' - Default target value
-     * @default false - Default isDownloadable state
+     * @default false - Default downloadable state
      * @default 'download' - Default filename value
      * @default '' - Default tooltipText value
      */
@@ -1153,426 +2226,1002 @@ declare global {
         new (): HTMLBdsTypographyElement;
     };
     interface HTMLElementTagNameMap {
+        "bds-avatar": HTMLBdsAvatarElement;
+        "bds-badge": HTMLBdsBadgeElement;
         "bds-banner": HTMLBdsBannerElement;
         "bds-button": HTMLBdsButtonElement;
+        "bds-button-group": HTMLBdsButtonGroupElement;
         "bds-checkbox": HTMLBdsCheckboxElement;
+        "bds-checkbox-card": HTMLBdsCheckboxCardElement;
         "bds-dialog": HTMLBdsDialogElement;
+        "bds-divider": HTMLBdsDividerElement;
         "bds-flag": HTMLBdsFlagElement;
+        "bds-grid": HTMLBdsGridElement;
+        "bds-grid-item": HTMLBdsGridItemElement;
+        "bds-list-menu": HTMLBdsListMenuElement;
+        "bds-list-menu-item": HTMLBdsListMenuItemElement;
         "bds-popover": HTMLBdsPopoverElement;
+        "bds-radio": HTMLBdsRadioElement;
+        "bds-radio-button": HTMLBdsRadioButtonElement;
+        "bds-radio-card": HTMLBdsRadioCardElement;
+        "bds-radio-group": HTMLBdsRadioGroupElement;
         "bds-spinner": HTMLBdsSpinnerElement;
+        "bds-status": HTMLBdsStatusElement;
+        "bds-tag": HTMLBdsTagElement;
         "bds-text-field": HTMLBdsTextFieldElement;
+        "bds-toggle": HTMLBdsToggleElement;
         "bds-tooltip": HTMLBdsTooltipElement;
         "bds-typography": HTMLBdsTypographyElement;
     }
-}
-declare namespace LocalJSX {
-    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
-
+}
+declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
+    /**
+     * Avatar component used to display user initials or names for visual identification.
+     * @summary Displays a circular avatar with user initials and optional name label.
+     * Uses Boreal Design System tokens for consistent styling across platforms.
+     * @attr {string} username - The full name used to generate initials or display as label.
+     * @attr {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+     * @attr {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+     * @attr {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+     * @property {string} username - The full name used to generate initials or display as label.
+     * @property {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+     * @property {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+     * @property {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+     * @cssprop --bds-avatar-background - Custom background color HEX code.
+     * @cssprop --bds-avatar-initials-color - Custom text color HEX code.
+     */
+    interface BdsAvatar {
+        /**
+          * Custom background color as hex code. If not provided, defaults to Boreal success color *
+          * @default ''
+         */
+        "background"?: IAvatar['background'];
+        /**
+          * Custom text color as hex code. If not provided, defaults to white *
+          * @default ''
+         */
+        "initialsColor"?: IAvatar['initialsColor'];
+        /**
+          * The full name used to generate initials or display as label *
+          * @default ''
+         */
+        "username"?: IAvatar['username'];
+        /**
+          * Controls which avatar elements are displayed: icon (initials), name, or both.
+          * @default 'full'
+         */
+        "variant"?: IAvatar['variant'];
+    }
+    /**
+     * Badge component for displaying contextual status information with optional icon support.
+     * @summary A compact label component that communicates status or category using color-coded variants. Supports an optional icon slot and a disabled state.
+     * @attr {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+     * @attr {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+     * @property {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+     * @property {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+     */
+    interface BdsBadge {
+        /**
+          * Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+          * @default false
+         */
+        "disabled"?: IBadge['disabled'];
+        /**
+          * Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+          * @default BADGE_VARIANT.DEFAULT
+         */
+        "variant"?: IBadge['variant'];
+    }
+    /**
+     * Banner component used to display important messages with different status variants.
+     * @summary Displays a dismissible banner with an icon, title, body content, and optional actions.
+     * @attr {"info"|"success"|"warning"|"danger"} variant - Status variant of the banner, affects color and icon. Defaults to "info".
+     * @attr {boolean} closable - When true, renders a close button that triggers the close event.
+     * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
+     * @property {boolean} closable - Shows a close button that allows users to close the banner. Defaults to false.
+     * @property {boolean} closeButtonLabel - Aria label for the close button when visible.
+     * @fires bdsClose - Emitted when the banner is closed via the close button or `close` method.
+     * @method close - Programmatic method to close the banner and emit the `bdsClose` event.
+     */
+    interface BdsBanner {
+        /**
+          * Shows a close button that allows users to close the banner.
+          * @default false
+         */
+        "closable"?: boolean;
+        /**
+          * The aria label for the close button.
+          * @default ""
+         */
+        "closeButtonLabel"?: IBanner['closeButtonLabel'];
+        /**
+          * Emitted when the banner is closed via the close button or close method.
+         */
+        "onBdsClose"?: (event: BdsBannerCustomEvent<void>) => void;
+        /**
+          * Visual style variant: 'info', 'success', 'warning', or 'danger'.
+          * @default "info"
+         */
+        "variant"?: IBanner['variant'];
+    }
+    /**
+     * Button component for user interactions, form submissions, supporting various styles, sizes, and states.
+     * @summary A versatile button component that can be customized with different colors, sizes, variants and states to fit various use cases in the application.
+     * @attr {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+     * @attr {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
+     * @attr {string} name - The name attribute for the button, useful for form submissions.
+     * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+     * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+     * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+     * @attr {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
+     * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+     * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
+     * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+     * @property {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
+     * @property {string} name - The name attribute for the button, useful for form submissions.
+     * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+     * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+     * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+     * @property {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
+     * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+     * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
+     * @default 'button' - Default type value
+     * @default 'default' - Default color value
+     * @default 'default' - Default variant value
+     * @default 'md' - Default size value
+     * @default 'default' - Default status value
+     * @default false - Default disabled value
+     * @default '' - Default label value
+     * @default '' - Default name value
+     * @default false - Default loading value
+     * @default false - Default disclosure value
+     */
+    interface BdsButton {
+        /**
+          * color is a string attribute. The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+          * @default CORE_COLORS.DEFAULT
+         */
+        "color"?: IButton['color'];
+        /**
+          * disabled is a boolean attribute. Disables the button when true, preventing user interaction and applying disabled styles.
+          * @default false
+         */
+        "disabled"?: IButton['disabled'];
+        /**
+          * disclosure is a boolean attribute. Used to show a chevron down at the of the content
+          * @default false
+         */
+        "disclosure"?: IButton['disclosure'];
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+          * @default ''
+         */
+        "label"?: IButton['label'];
+        /**
+          * loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+          * @default false
+         */
+        "loading"?: IButton['loading'];
+        /**
+          * name is a string attribute. The name attribute for the button, useful for form submissions.
+          * @default ''
+         */
+        "name"?: IButton['name'];
+        /**
+          * emit event to click
+         */
+        "onBdsClick"?: (event: BdsButtonCustomEvent<UIEvent>) => void;
+        /**
+          * size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
+          * @default BUTTON_SIZES.MEDIUM
+         */
+        "size"?: IButton['size'];
+        /**
+          * type is a string attribute. The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+          * @default BUTTON_TYPES.BUTTON
+         */
+        "type"?: IButton['type'];
+        /**
+          * variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+          * @default BUTTON_VARIANTS.DEFAULT
+         */
+        "variant"?: IButton['variant'];
+    }
+    /**
+     * Button group component for grouping related buttons together in a unified visual unit.
+     */
+    interface BdsButtonGroup {
+        /**
+          * Controls the color applied to all child `<bds-button>` elements. Accepted values: see `CoreColors`. Default is `default`.
+          * @default CORE_COLORS.DEFAULT
+         */
+        "color"?: IButtonGroup['color'];
+        /**
+          * Provides an accessible label for the button group.
+          * @default 'Button group'
+         */
+        "label"?: IButtonGroup['label'];
+        /**
+          * Controls the layout direction of the grouped buttons. Accepted values: `'horizontal'`, `'vertical'`. Default is `'horizontal'`.
+          * @default ORIENTATIONS.HORIZONTAL
+         */
+        "orientation"?: IButtonGroup['orientation'];
+        /**
+          * Controls the size applied to all child `<bds-button>` elements. Accepted values: `'sm'`, `'md'`, `'lg'`. Default is `'md'`.
+          * @default BUTTON_SIZES.MEDIUM
+         */
+        "size"?: IButtonGroup['size'];
+        /**
+          * Controls the variant applied to all child `<bds-button>` elements. Accepted values: `'default'`, `'outline'`, `'plain'`. Default is `'default'`.
+          * @default BUTTON_VARIANTS.DEFAULT
+         */
+        "variant"?: IButtonGroup['variant'];
+    }
+    /**
+     * Checkbox component for boolean selection with three visual states.
+     * @summary A checkbox form control with default, selected, and indeterminate states.
+     * @property {boolean} checked - Whether the checkbox is selected. Defaults to `false`.
+     * @property {boolean} indeterminate - Whether the checkbox shows an indeterminate ("mixed") visual state. Defaults to `false`.
+     * @property {boolean} error - Shows error styling on the checkbox. Defaults to `false`.
+     * @property {string}  value - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @property {string}  label - Label displayed next to the checkbox. If not provided, the default slot is used.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model).
+     * @fires bdsChange - Emitted when the user toggles the checkbox. Payload: `{ checked: boolean, value: string }`.
+     */
+    interface BdsCheckbox {
+        /**
+          * Whether the checkbox is selected.
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Disables the control.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Shows error styling on the checkbox.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Whether the checkbox shows an indeterminate ("mixed") visual state.
+          * @default false
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Label displayed next to the checkbox. If not provided, the default slot is used.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Name of the form control, submitted as a key in the form data.
+         */
+        "name": string;
+        /**
+          * Emitted when the user toggles the checkbox.
+         */
+        "onBdsChange"?: (event: BdsCheckboxCustomEvent<CheckboxChangeDetail>) => void;
+        /**
+          * Emitted when the checked state changes (for 2-way binding / v-model).
+         */
+        "onValueChange"?: (event: BdsCheckboxCustomEvent<boolean>) => void;
+        /**
+          * Marks the control as required for form submission.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Value submitted with the form data when checked.
+          * @default 'on'
+         */
+        "value"?: string;
+    }
+    /**
+     * Checkbox card component is a selectable card-based checkbox option.
+     * It presents a non-exclusive choice with optional descriptive text and icon,
+     * supporting checked, indeterminate, disabled, and error states.
+     * Can be used standalone or within a checkbox group for orchestration.
+     * @property {string}  name          - Name of the form control, submitted as a key in the form data.
+     * @property {boolean} disabled      - Disables the control. Defaults to `false`.
+     * @property {boolean} required      - Marks the control as required for form submission. Defaults to `false`.
+     * @property {string}  value         - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @property {string}  label         - Label displayed next to the checkbox. If not provided, the default slot is used.
+     * @property {boolean} checked       - Whether the checkbox card is selected. Defaults to `false`.
+     * @property {boolean} indeterminate - Whether the checkbox card shows an indeterminate ("mixed") visual state. Defaults to `false`.
+     * @property {boolean} error         - Whether the checkbox card is in an error state. Defaults to `false`.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+     * @fires bdsChange   - Emitted when the user toggles the checkbox card. Payload: `{ checked: boolean, value: string }`.
+     */
+    interface BdsCheckboxCard {
+        /**
+          * Whether this checkbox card is selected.
+          * @default false
+         */
+        "checked"?: ICheckboxCard['checked'];
+        /**
+          * Disables the control.
+          * @default false
+         */
+        "disabled"?: ICheckboxCard['disabled'];
+        /**
+          * Whether the checkbox card is in an error state.
+          * @default false
+         */
+        "error"?: ICheckboxCard['error'];
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Whether the checkbox card shows an indeterminate visual state.
+          * @default false
+         */
+        "indeterminate"?: ICheckboxCard['indeterminate'];
+        /**
+          * Label text displayed next to the checkbox indicator. Falls back to the default slot when empty.
+          * @default ''
+         */
+        "label"?: ICheckboxCard['label'];
+        /**
+          * Name of the form control, submitted as a key in the form data.
+         */
+        "name": ICheckboxCard['name'];
+        /**
+          * Emitted when the user toggles this checkbox card.
+         */
+        "onBdsChange"?: (event: BdsCheckboxCardCustomEvent<any>) => void;
+        /**
+          * Emitted when the checked state changes. Useful for 2-way binding / v-model.
+         */
+        "onValueChange"?: (event: BdsCheckboxCardCustomEvent<any>) => void;
+        /**
+          * Marks the control as required for form submission.
+          * @default false
+         */
+        "required"?: ICheckboxCard['required'];
+        /**
+          * Value submitted with the form when this checkbox is selected.
+          * @default 'on'
+         */
+        "value"?: ICheckboxCard['value'];
+    }
+    /**
+     * Modal dialog component for displaying content in an overlay.
+     * @summary Modal overlay for alerts, forms, and confirmations with customizable layout and behavior.
+     * @attr {boolean} active - Controls dialog visibility.
+     * @attr {boolean} prevent-close - Disables closing the dialog.
+     * @attr {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
+     * @attr {string} content-padding - Content padding: 'default' or 'none'.
+     * @attr {boolean} backdrop-close - Close on backdrop click.
+     * @attr {boolean} escape-close - Close on Escape key.
+     * @attr {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
+     * @attr {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+     * @attr {string} title-dialog - Dialog title text.
+     * @attr {boolean} maximizable - Show maximize button.
+     * @attr {boolean} closable - Show close button.
+     * @attr {string} width - Custom width for the dialog.
+     * @attr {string} height - Custom height for the dialog.
+     * @property {boolean} active - Controls whether the dialog is open.
+     * @property {boolean} preventClose - Disables closing the dialog.
+     * @property {string} height - Custom height for the dialog.
+     * @property {string} width - Custom width for the dialog.
+     * @property {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
+     * @property {string} contentPadding - Content padding: 'default' or 'none'.
+     * @property {boolean} backdropClose - Close dialog when clicking the backdrop.
+     * @property {boolean} escapeClose - Close dialog when pressing Escape.
+     * @property {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
+     * @property {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+     * @property {string} titleDialog - Title text displayed in the header.
+     * @property {boolean} maximizable - Show maximize button.
+     * @property {boolean} closable - Hide the close button in the header.
+     * @fires bdsOpen - Emitted when the dialog opens.
+     * @fires bdsClose - Emitted when the dialog closes.
+     * @fires bdsMaximize - Emitted when the maximize button is clicked.
+     * @cssprop --bds-dialog-width - Custom width for the dialog.
+     * @cssprop --bds-dialog-height - Custom height for the dialog.
+     */
+    interface BdsDialog {
+        /**
+          * Controls whether the dialog is open.
+          * @default false
+         */
+        "active"?: IDialog['active'];
+        /**
+          * Close dialog when clicking the backdrop.
+          * @default false
+         */
+        "backdropClose"?: IDialog['backdropClose'];
+        /**
+          * Hide the close button in the header.
+          * @default false
+         */
+        "closable"?: IDialog['closable'];
+        /**
+          * Content padding: 'default' or 'none'.
+          * @default DIALOG_CONTENT_PADDING.DEFAULT
+         */
+        "contentPadding"?: IDialog['contentPadding'];
+        /**
+          * Close dialog when pressing Escape.
+          * @default false
+         */
+        "escapeClose"?: IDialog['escapeClose'];
+        /**
+          * Dialog custom height
+          * @default ''
+         */
+        "height"?: IDialog['height'];
+        /**
+          * Layout type: 'default', 'headerless', or 'footerless'.
+          * @default DIALOG_LAYOUT.DEFAULT
+         */
+        "layout"?: IDialog['layout'];
+        /**
+          * Show maximize button to toggle full-screen.
+          * @default false
+         */
+        "maximizable"?: IDialog['maximizable'];
+        /**
+          * Emitted when the dialog closes.
+         */
+        "onBdsClose"?: (event: BdsDialogCustomEvent<void>) => void;
+        /**
+          * Emitted when the dialog maximize button is clicked.
+         */
+        "onBdsMaximize"?: (event: BdsDialogCustomEvent<void>) => void;
+        /**
+          * Emitted when the dialog opens.
+         */
+        "onBdsOpen"?: (event: BdsDialogCustomEvent<void>) => void;
+        /**
+          * Controls whether the dialog is closable.
+          * @default false
+         */
+        "preventClose"?: IDialog['preventClose'];
+        /**
+          * Dialog size: 'small', 'medium', 'large', or 'full'.
+          * @default DIALOG_SIZES.MEDIUM
+         */
+        "size"?: IDialog['size'];
+        /**
+          * Title text displayed in the header.
+          * @default ''
+         */
+        "titleDialog"?: IDialog['titleDialog'];
+        /**
+          * Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+          * @default DIALOG_VARIANT.DEFAULT
+         */
+        "variant"?: IDialog['variant'];
+        /**
+          * Dialog custom width
+          * @default ''
+         */
+        "width"?: IDialog['width'];
+    }
+    /**
+     * Divider component for creating visual separators between content sections.
+     * @summary A simple visual separator that can be oriented horizontally or vertically.
+     * @csspart divider - A divider element that visually separates content.
+     * @attr {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+     * @property {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+     */
+    interface BdsDivider {
+        /**
+          * The orientation of the divider. Allowed values: horizontal | vertical
+          * @default DIVIDER_ORIENTATIONS.HORIZONTAL
+         */
+        "orientation"?: IDivider['orientation'];
+    }
+    /**
+     * Flag component used to display a country flag together with its corresponding label.
+     * @summary Renders a flag icon based on a country identifier and optionally displays
+     * the country name, short name, or call sign. Supports custom flag sources, different
+     * shapes, and flag alignment on either side of the label.
+     * @attr {boolean} label - When true, displays a textual label next to the flag.
+     * @attr {boolean} short-name - When true, displays the abbreviated country name (ISO2/ISO3) instead of the full name.
+     * @attr {boolean} call-sign - When true, displays the country calling code next to the label.
+     * @attr {string} country - Country value used to resolve the flag and label.
+     * @attr {AlignFlag} align-flag - Controls whether the flag is rendered on the left or right side.
+     * @attr {FlagIdentifier} identifier - Defines which country field is used to resolve the value.
+     * @attr {Shape} shape - Visual shape of the rendered flag.
+     * @attr {ICountry[]} custom-flags - Additional custom flag definitions that can override defaults.
+     * @property {boolean} label - Whether the country label should be displayed. Defaults to false.
+     * @property {boolean} shortName - Whether to display the abbreviated country name. Defaults to false.
+     * @property {boolean} callSign - Whether to display the country calling code. Defaults to false.
+     * @property {string} country - Country value used to find the matching flag entry. Defaults to ''.
+     * @property {AlignFlag} alignFlag - Position of the flag relative to the label. Defaults to `AlignFlag.LEFT`.
+     * @property {FlagIdentifier} identifier - Identifier used to resolve the country value. Defaults to `FlagIdentifier.CODE`.
+     * @property {Shape} shape - Shape variant used for the flag. Defaults to `Shape.RECTANGLE`.
+     * @property {ICountry[]} customFlags - List of custom flag definitions merged with the default catalog. Defaults to `[]`.
+     */
+    interface BdsFlag {
+        /**
+          * Determines whether the flag is displayed on the left or right side of the label.
+          * @default AlignFlag.LEFT
+         */
+        "alignFlag"?: IFlag['alignFlag'];
+        /**
+          * Whether the country calling code should be displayed next to the label.
+          * @default false
+         */
+        "callSign"?: IFlag['callSign'];
+        /**
+          * Country value used to resolve the matching flag entry.  The expected value depends on the configured `identifier`.
+          * @default ''
+         */
+        "country"?: IFlag['country'];
+        /**
+          * Custom flag definitions merged with the default country catalog.  Custom entries can override default asset sources when the same `iso2` is used.
+          * @default []
+         */
+        "customFlags"?: IFlag['customFlags'];
+        /**
+          * Defines which field should be used to identify the country. For example, code, iso2, or iso3.
+          * @default FlagIdentifier.CODE
+         */
+        "identifier"?: IFlag['identifier'];
+        /**
+          * Whether the country name label should be displayed next to the flag.
+          * @default false
+         */
+        "label"?: IFlag['label'];
+        /**
+          * Visual shape used to render the flag.
+          * @default Shape.RECTANGLE
+         */
+        "shape"?: IFlag['shape'];
+        /**
+          * Whether the abbreviated country name (ISO2/ISO3) should be displayed instead of the full name.
+          * @default false
+         */
+        "shortName"?: IFlag['shortName'];
+    }
+    /**
+     * 12-column CSS Grid layout container with 5 responsive breakpoints.
+     * Minimum browser support: Chrome/Edge (last 2), Firefox (last 2), Safari (last 2).
+     */
+    interface BdsGrid {
+        /**
+          * `'fluid'` fills full width; `'fixed'` caps the column area at 960px and centres the container.
+          * @default GRID_LAYOUT.FLUID
+         */
+        "layout"?: IGrid['layout'];
+        /**
+          * Overrides the row gap independently of the column gutter.
+         */
+        "rowGap"?: IGrid['rowGap'];
+    }
+    /**
+     * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+     */
+    interface BdsGridItem {
+        /**
+          * Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`).
+          * @default GRID_ITEM_COL_SPAN.DEFAULT
+         */
+        "colSpan"?: IGridItem['colSpan'];
+        /**
+          * Override col-span at the `2xl` breakpoint (≥1344px).
+         */
+        "colSpan2xl"?: IGridItem['colSpan2xl'];
+        /**
+          * Override col-span at the `lg` breakpoint (≥960px).
+         */
+        "colSpanLg"?: IGridItem['colSpanLg'];
+        /**
+          * Override col-span at the `md` breakpoint (≥769px).
+         */
+        "colSpanMd"?: IGridItem['colSpanMd'];
+        /**
+          * Override col-span at the `sm` breakpoint (≥320px).
+         */
+        "colSpanSm"?: IGridItem['colSpanSm'];
+        /**
+          * Override col-span at the `xl` breakpoint (≥1152px).
+         */
+        "colSpanXl"?: IGridItem['colSpanXl'];
+        /**
+          * Column offset: shifts the item right by N columns (0–11).
+          * @default 0
+         */
+        "offset"?: IGridItem['offset'];
+        /**
+          * Row span. `'full'` maps to `grid-row: 1 / -1`.
+         */
+        "rowSpan"?: IGridItem['rowSpan'];
+    }
     /**
-     * Banner component used to display important messages with different status variants.
-     * @summary Displays a dismissible banner with an icon, title, body content, and optional actions.
-     * @attr {"info"|"success"|"warning"|"danger"} variant - Status variant of the banner, affects color and icon. Defaults to "info".
-     * @attr {boolean} closable - When true, renders a close button that triggers the close event.
-     * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
-     * @property {boolean} closable - Shows a close button that allows users to close the banner. Defaults to false.
-     * @property {boolean} closeButtonLabel - Aria label for the close button when visible.
-     * @fires bdsClose - Emitted when the banner is closed via the close button or `closeBanner` method.
-     * @method closeBanner - Programmatic method to close the banner and emit the `bdsClose` event.
+     * Container component that manages a list of menu items.
+     * It handles selection logic (single/multiple) and maintains the data state.
+     * @summary A list menu component that can contain multiple menu items and manage their selection state.
+     * @fires bdsChange - Emitted when the selection changes, providing the current selected value(s).
+     * @fires bdsSelect - Emmited when item is selected in menu-role="menu" is clicked
+     * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
+     * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
      */
-    interface BdsBanner {
+    interface BdsListMenu {
         /**
-          * Shows a close button that allows users to close the banner.
-          * @default false
+          * Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
+          * @default MENU_ROLES.MENU
          */
-        "closable"?: boolean;
+        "menuRole"?: IListMenu['menuRole'];
         /**
-          * The aria label for the close button.
-          * @default ""
+          * Emitted when the selection changes, providing the current selected value(s).
          */
-        "closeButtonLabel"?: IBanner['closeButtonLabel'];
+        "onBdsChange"?: (event: BdsListMenuCustomEvent<string | string[]>) => void;
         /**
-          * Emitted when the banner is closed via the close button or closeBanner method.
+          * Emitted when the selection changes, providing the current selected value(s).
          */
-        "onBdsClose"?: (event: BdsBannerCustomEvent<void>) => void;
+        "onBdsSelect"?: (event: BdsListMenuCustomEvent<ListMenuChangeDetail>) => void;
         /**
-          * Visual style variant: 'info', 'success', 'warning', or 'danger'.
-          * @default "info"
+          * Determines if the menu items have selectall/deselectall controls
+          * @default false
          */
-        "variant"?: IBanner['variant'];
+        "selectControls"?: IListMenu['selectControls'];
+        /**
+          * The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'.
+          * @default LIST_MENU_SELECTION_MODE.SINGLE
+         */
+        "selectionMode"?: IListMenu['selectionMode'];
     }
     /**
-     * Button component for user interactions, form submissions, supporting various styles, sizes, and states.
-     * @summary A versatile button component that can be customized with different colors, sizes, variants and states to fit various use cases in the application.
-     * @attr {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
-     * @attr {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
-     * @attr {string} name - The name attribute for the button, useful for form submissions.
-     * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
-     * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
-     * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-     * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
-     * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
-     * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
-     * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
-     * @property {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
-     * @property {string} name - The name attribute for the button, useful for form submissions.
-     * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
-     * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
-     * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-     * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
-     * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
-     * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
-     * @default 'button' - Default type value
-     * @default 'default' - Default color value
-     * @default 'default' - Default variant value
-     * @default 'medium' - Default size value
-     * @default 'default' - Default status value
-     * @default false - Default disabled value
-     * @default '' - Default label value
-     * @default '' - Default name value
-     * @default false - Default loading value
-     * @default false - Default disclosure value
+     * Component representing an individual item within a list menu for navigations and selection.
+     * @summary A menu item component that supports different variants, disabled state, and selection state, it also supports link behavior when the href prop is provided.
+     * @attr {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+     * @attr {string} name - The name of the list menu item.
+     * @attr {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+     * @attr {boolean} selected - If true, the menu item is styled as selected.
+     * @attr {boolean} activeItem - If true, the menu item is styled as active.
+     * @attr {string} value - The value associated with the menu item, emitted in events when activated.\
+     * @attr {string} href - The URL for the link. If provided, the menu item will behave as a link.
+     * @attr {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+     * @attr {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+     * @attr {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+     * @property {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+     * @property {string} name - The name of the list menu item.
+     * @property {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+     * @property {boolean} selected - If true, the menu item is styled as selected.
+     * @property {boolean} activeItem - If true, the menu item is styled as active.
+     * @property {string} value - The value associated with the menu item, emitted in events when activated.
+     * @property {string} href - The URL for the link. If provided, the menu item will behave as a link.
+     * @property {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+     * @property {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+     * @property {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+     * @default 'button' - The default variant for the menu item is 'button', which is a standard clickable item.
+     * @default '' - By default, the name of the menu item is an empty string.
+     * @default false - By default, the menu item is not disabled and is interactive.
+     * @default false - By default, the menu item is not selected.
+     * @default false - By default, the menu item is not active.
+     * @default '' - By default, the value of the menu item is an empty string.
+     * @default '' - By default, the href is an empty string, meaning the menu item will not behave as a link.
+     * @default false - By default, the newTab property is false, meaning links will open in the same tab.
+     * @default false - By default, the downloadable property is false, meaning links will not be treated as download links.
+     * @default '' - By default, the filename is an empty string, meaning no suggested filename for downloads.
      */
-    interface BdsButton {
+    interface BdsListMenuItem {
         /**
-          * color is a string attribute. The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
-          * @default CORE_COLORS.DEFAULT
+          * Active state item
+          * @default false
          */
-        "color"?: IButton['color'];
+        "activeItem"?: IListMenuItem['activeItem'];
         /**
-          * disabled is a boolean attribute. Disables the button when true, preventing user interaction and applying disabled styles.
+          * Checkable state item, if is activated should be visible a checkbox
           * @default false
          */
-        "disabled"?: IButton['disabled'];
+        "checkable"?: IListMenuItem['checkable'];
         /**
-          * disclosure is a boolean attribute. Used to show a chevron down at the of the content
+          * Disabled state item
           * @default false
          */
-        "disclosure"?: IButton['disclosure'];
+        "disabled"?: IListMenuItem['disabled'];
         /**
-          * The `id` of a `<form>` element to associate this element with.
+          * Makes the link downloadable if true
+          * @default ''
          */
-        "form"?: string;
+        "download"?: IListMenuItem['download'];
         /**
-          * The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+          * Link behavior props
           * @default ''
          */
-        "label"?: IButton['label'];
+        "href"?: IListMenuItem['href'];
         /**
-          * loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
-          * @default false
+          * The name of the list menu item
+          * @default ''
          */
-        "loading"?: IButton['loading'];
+        "name"?: IListMenuItem['name'];
         /**
-          * name is a string attribute. The name attribute for the button, useful for form submissions.
-          * @default ''
+          * Opens the link in a new tab if true
+          * @default false
          */
-        "name"?: IButton['name'];
+        "newTab"?: IListMenuItem['newTab'];
         /**
-          * emit event to click
+          * Event handler for activation
          */
-        "onBdsClick"?: (event: BdsButtonCustomEvent<UIEvent>) => void;
+        "onBdsSelectItem"?: (event: BdsListMenuItemCustomEvent<IListMenuItemEvent>) => void;
         /**
-          * size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
-          * @default BUTTON_SIZES.MEDIUM
+          * Selected item state
+          * @default false
          */
-        "size"?: IButton['size'];
+        "selected"?: IListMenuItem['selected'];
         /**
-          * type is a string attribute. The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
-          * @default BUTTON_TYPES.BUTTON
+          * Value associated with the menu item
+          * @default ''
          */
-        "type"?: IButton['type'];
+        "value"?: IListMenuItem['value'];
         /**
-          * variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-          * @default BUTTON_VARIANTS.DEFAULT
+          * Defines the visual style of the list menu item. - 'button': A standard clickable item. - 'label': A non-interactive label, typically used for grouping items.
+          * @default LIST_MENU_ITEM_VARIANTS.BUTTON
          */
-        "variant"?: IButton['variant'];
+        "variant"?: IListMenuItem['variant'];
     }
     /**
-     * Checkbox component for boolean selection with three visual states.
-     * @summary A checkbox form control with default, selected, and indeterminate states.
-     * @property {boolean} checked - Whether the checkbox is selected. Defaults to `false`.
-     * @property {boolean} indeterminate - Whether the checkbox shows an indeterminate ("mixed") visual state. Defaults to `false`.
-     * @property {boolean} error - Shows error styling on the checkbox. Defaults to `false`.
-     * @property {string}  value - Value submitted with the form data when checked. Defaults to `"on"`.
-     * @property {string}  label - Label displayed next to the checkbox. If not provided, the default slot is used.
-     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model).
-     * @fires bdsChange - Emitted when the user toggles the checkbox. Payload: `{ checked: boolean, value: string }`.
+     * @attr {boolean} disabled - When true, prevents the popover from being shown.
+     * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
+     * @attr {boolean} header - When true, displays the popover header.
+     * @attr {boolean} footer - When true, displays the popover footer.
+     * @attr {boolean} closable - When true, displays the close button in the header.
+     * @attr {IPopoverFloatingOptions} floatingOptions - Configuration object for floating behavior.
+     * @csspart popover-content - The main popover container element.
+     * @csspart arrow - The arrow element pointing toward the trigger.
+     * @csspart popover-trigger - The trigger element for the popover.
+     * @cssprop data-placement - Reflects the resolved placement on the popover element.
+     * @cssprop data-hidearrow - Reflects the hideArrow option.
      */
-    interface BdsCheckbox {
+    interface BdsPopover {
         /**
-          * Whether the checkbox is selected.
+          * If true, displays a close button inside the header. Requires `header` to be true.
           * @default false
          */
-        "checked"?: boolean;
+        "closable"?: boolean;
         /**
-          * Disables the control.
+          * If true, disables the popover.
           * @default false
          */
-        "disabled"?: boolean;
+        "disabled"?: IPopover['disabled'];
         /**
-          * Shows error styling on the checkbox.
+          * Override default options for the floating mixin. This can be overridden by passing a different object to the `floatingOptions` prop.
+          * @default {}
+         */
+        "floatingOptions"?: IPopover['floatingOptions'];
+        /**
+          * If true, displays the footer section with helper and button slots.
           * @default false
          */
-        "error"?: boolean;
+        "footer"?: boolean;
         /**
-          * The `id` of a `<form>` element to associate this element with.
+          * If true, displays the header section with icon and title slots.
+          * @default false
          */
-        "form"?: string;
+        "header"?: boolean;
         /**
-          * Whether the checkbox shows an indeterminate ("mixed") visual state.
+          * Width of the popover content. - number: width in pixels (e.g. 320 → "320px") - 'full': 100% of the trigger/parent width - 'auto': fits the content
+          * @default 320
+         */
+        "width"?: IPopover['width'];
+    }
+    /**
+     * Radio button component for single-selection within a group.
+     * Use inside `bds-radio-group` for managed selection and form binding.
+     * Can also be used standalone with the `name`, `value`, and `checked` props.
+     */
+    interface BdsRadio {
+        /**
+          * Whether this radio is selected. Managed by bds-radio-group; can be set directly when used standalone.
           * @default false
          */
-        "indeterminate"?: boolean;
+        "checked"?: boolean;
         /**
-          * Label displayed next to the checkbox. If not provided, the default slot is used.
-          * @default ''
+          * Disables the radio, preventing interaction and selection.
+          * @default false
          */
-        "label"?: string;
+        "disabled"?: boolean;
         /**
-          * Name of the form control, submitted as a key in the form data.
+          * Shows error styling on the radio indicator. Propagated by bds-radio-group.
+          * @default false
          */
-        "name": string;
+        "error"?: boolean;
         /**
-          * Emitted when the user toggles the checkbox.
+          * Tooltip text shown on an info icon next to the label.
+          * @default ''
          */
-        "onBdsChange"?: (event: BdsCheckboxCustomEvent<CheckboxChangeDetail>) => void;
+        "info"?: string;
         /**
-          * Emitted when the checked state changes (for 2-way binding / v-model).
+          * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
+          * @default ''
          */
-        "onValueChange"?: (event: BdsCheckboxCustomEvent<boolean>) => void;
+        "label"?: string;
         /**
-          * Marks the control as required for form submission.
-          * @default false
+          * Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone.
+          * @default ''
          */
-        "required"?: boolean;
+        "name"?: string;
         /**
-          * Value submitted with the form data when checked.
+          * Emitted when the user selects this radio. Listened to by the parent bds-radio-group to enforce single selection.
+         */
+        "onBdsChange"?: (event: BdsRadioCustomEvent<RadioChangeDetail>) => void;
+        /**
+          * Value submitted with the form when this radio is selected.
           * @default 'on'
          */
         "value"?: string;
     }
     /**
-     * Modal dialog component for displaying content in an overlay.
-     * @summary Modal overlay for alerts, forms, and confirmations with customizable layout and behavior.
-     * @attr {boolean} active - Controls dialog visibility.
-     * @attr {boolean} prevent-close - Disables closing the dialog.
-     * @attr {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
-     * @attr {string} content-padding - Content padding: 'default' or 'none'.
-     * @attr {boolean} backdrop-close - Close on backdrop click.
-     * @attr {boolean} escape-close - Close on Escape key.
-     * @attr {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
-     * @attr {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
-     * @attr {string} title-dialog - Dialog title text.
-     * @attr {boolean} maximizable - Show maximize button.
-     * @attr {boolean} closable - Show close button.
-     * @attr {string} width - Custom width for the dialog.
-     * @attr {string} height - Custom height for the dialog.
-     * @property {boolean} active - Controls whether the dialog is open.
-     * @property {boolean} preventClose - Disables closing the dialog.
-     * @property {string} height - Custom height for the dialog.
-     * @property {string} width - Custom width for the dialog.
-     * @property {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
-     * @property {string} contentPadding - Content padding: 'default' or 'none'.
-     * @property {boolean} backdropClose - Close dialog when clicking the backdrop.
-     * @property {boolean} escapeClose - Close dialog when pressing Escape.
-     * @property {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
-     * @property {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
-     * @property {string} titleDialog - Title text displayed in the header.
-     * @property {boolean} maximizable - Show maximize button.
-     * @property {boolean} closable - Hide the close button in the header.
-     * @fires bdsOpen - Emitted when the dialog opens.
-     * @fires bdsClose - Emitted when the dialog closes.
-     * @fires bdsMaximize - Emitted when the maximize button is clicked.
-     * @cssprop --bds-dialog-width - Custom width for the dialog.
-     * @cssprop --bds-dialog-height - Custom height for the dialog.
+     * Button-shaped radio option for use inside `bds-radio-group[type="radiobutton"]`.
+     * Creates a segmented control appearance when grouped. Not form-associated — the parent
+     * `bds-radio-group` owns form state and single-selection enforcement.
      */
-    interface BdsDialog {
+    interface BdsRadioButton {
         /**
-          * Controls whether the dialog is open.
+          * Whether this button is selected. Managed by bds-radio-group; can be set directly when used standalone.
           * @default false
          */
-        "active"?: IDialog['active'];
+        "checked"?: boolean;
         /**
-          * Close dialog when clicking the backdrop.
+          * Disables the button, preventing interaction and selection.
           * @default false
          */
-        "backdropClose"?: IDialog['backdropClose'];
+        "disabled"?: boolean;
         /**
-          * Hide the close button in the header.
+          * Shows error styling on the button. Propagated by bds-radio-group.
           * @default false
          */
-        "closable"?: IDialog['closable'];
-        /**
-          * Content padding: 'default' or 'none'.
-          * @default DIALOG_CONTENT_PADDING.DEFAULT
-         */
-        "contentPadding"?: IDialog['contentPadding'];
+        "error"?: boolean;
         /**
-          * Close dialog when pressing Escape.
-          * @default false
+          * Tooltip text shown on an info icon next to the label.
+          * @default ''
          */
-        "escapeClose"?: IDialog['escapeClose'];
+        "info"?: string;
         /**
-          * Dialog custom height
+          * Label text displayed inside the button. Falls back to the default slot when empty.
           * @default ''
          */
-        "height"?: IDialog['height'];
+        "label"?: string;
         /**
-          * Layout type: 'default', 'headerless', or 'footerless'.
-          * @default DIALOG_LAYOUT.DEFAULT
+          * Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone.
+          * @default ''
          */
-        "layout"?: IDialog['layout'];
+        "name"?: string;
         /**
-          * Show maximize button to toggle full-screen.
-          * @default false
+          * Emitted when the user selects this button. Listened to by the parent bds-radio-group to enforce single selection.
          */
-        "maximizable"?: IDialog['maximizable'];
+        "onBdsChange"?: (event: BdsRadioButtonCustomEvent<RadioButtonChangeDetail>) => void;
         /**
-          * Emitted when the dialog closes.
+          * Value submitted with the form when this button is selected.
+          * @default 'on'
          */
-        "onBdsClose"?: (event: BdsDialogCustomEvent<void>) => void;
+        "value"?: string;
+    }
+    /**
+     * Radio card component is a selectable card-based radio option.
+     * It presents a mutually exclusive choice with optional descriptive text and icon,
+     * designed for integration with bds-radio-group for orchestration.
+     * Can also be used standalone with the `name`, `value`, and `checked` props.
+     * @fires bdsChange - Emitted when the user selects this radio card. Listened to by the parent bds-radio-group to enforce single selection.
+     */
+    interface BdsRadioCard {
         /**
-          * Emitted when the dialog maximize button is clicked.
+          * Whether this radio card is selected. Managed by bds-radio-group; can be set directly when used standalone.
+          * @default false
          */
-        "onBdsMaximize"?: (event: BdsDialogCustomEvent<void>) => void;
+        "checked"?: IRadioCard['checked'];
         /**
-          * Emitted when the dialog opens.
+          * Disables the radio card, preventing it from being selected and interacted with.
+          * @default false
          */
-        "onBdsOpen"?: (event: BdsDialogCustomEvent<void>) => void;
+        "disabled"?: IRadioCard['disabled'];
         /**
-          * Controls whether the dialog is closable.
+          * Whether the radio card is in an error state.
           * @default false
          */
-        "preventClose"?: IDialog['preventClose'];
+        "error"?: IRadioCard['error'];
         /**
-          * Dialog size: 'small', 'medium', 'large', or 'full'.
-          * @default DIALOG_SIZES.MEDIUM
+          * Tooltip content attached to the radio card content. If empty, the info icon will not be rendered.
+          * @default ''
          */
-        "size"?: IDialog['size'];
+        "info"?: IRadioCard['info'];
         /**
-          * Title text displayed in the header.
+          * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
           * @default ''
          */
-        "titleDialog"?: IDialog['titleDialog'];
+        "label"?: IRadioCard['label'];
         /**
-          * Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
-          * @default DIALOG_VARIANT.DEFAULT
+          * Name attribute stamped by the parent bds-radio-group. Set directly when used standalone.
+          * @default ''
          */
-        "variant"?: IDialog['variant'];
+        "name"?: IRadioCard['name'];
         /**
-          * Dialog custom width
-          * @default ''
+          * Emitted when the user selects this radio. Listened to by the parent bds-radio-group to enforce single selection.
          */
-        "width"?: IDialog['width'];
+        "onBdsChange"?: (event: BdsRadioCardCustomEvent<RadioCardChangeDetail>) => void;
+        /**
+          * Value submitted with the form when this radio is selected.
+          * @default 'on'
+         */
+        "value"?: IRadioCard['value'];
     }
     /**
-     * Flag component used to display a country flag together with its corresponding label.
-     * @summary Renders a flag icon based on a country identifier and optionally displays
-     * the country name, short name, or call sign. Supports custom flag sources, different
-     * shapes, and flag alignment on either side of the label.
-     * @attr {boolean} label - When true, displays a textual label next to the flag.
-     * @attr {boolean} short-name - When true, displays the abbreviated country name (ISO2/ISO3) instead of the full name.
-     * @attr {boolean} call-sign - When true, displays the country calling code next to the label.
-     * @attr {string} country - Country value used to resolve the flag and label.
-     * @attr {AlignFlag} align-flag - Controls whether the flag is rendered on the left or right side.
-     * @attr {FlagIdentifier} identifier - Defines which country field is used to resolve the value.
-     * @attr {Shape} shape - Visual shape of the rendered flag.
-     * @attr {ICountry[]} custom-flags - Additional custom flag definitions that can override defaults.
-     * @property {boolean} label - Whether the country label should be displayed. Defaults to false.
-     * @property {boolean} shortName - Whether to display the abbreviated country name. Defaults to false.
-     * @property {boolean} callSign - Whether to display the country calling code. Defaults to false.
-     * @property {string} country - Country value used to find the matching flag entry. Defaults to ''.
-     * @property {AlignFlag} alignFlag - Position of the flag relative to the label. Defaults to `AlignFlag.LEFT`.
-     * @property {FlagIdentifier} identifier - Identifier used to resolve the country value. Defaults to `FlagIdentifier.CODE`.
-     * @property {Shape} shape - Shape variant used for the flag. Defaults to `Shape.RECTANGLE`.
-     * @property {ICountry[]} customFlags - List of custom flag definitions merged with the default catalog. Defaults to `[]`.
+     * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
      */
-    interface BdsFlag {
+    interface BdsRadioGroup {
         /**
-          * Determines whether the flag is displayed on the left or right side of the label.
-          * @default AlignFlag.LEFT
+          * Disables all child radios and prevents selection. Also mirrored to isDisabled
+          * @State for form-level disable support.
+          * @default false
          */
-        "alignFlag"?: IFlag['alignFlag'];
+        "disabled"?: false;
         /**
-          * Whether the country calling code should be displayed next to the label.
+          * Shows error styling on the group helper text. Propagated to all child radios.
           * @default false
          */
-        "callSign"?: IFlag['callSign'];
+        "error"?: false;
         /**
-          * Country value used to resolve the matching flag entry.  The expected value depends on the configured `identifier`.
+          * Error message rendered below the radio options when error is true. Replaces helperText.
           * @default ''
          */
-        "country"?: IFlag['country'];
+        "errorMessage"?: "";
         /**
-          * Custom flag definitions merged with the default country catalog.  Custom entries can override default asset sources when the same `iso2` is used.
-          * @default []
+          * The `id` of a `<form>` element to associate this element with.
          */
-        "customFlags"?: IFlag['customFlags'];
+        "form"?: string;
         /**
-          * Defines which field should be used to identify the country. For example, code, iso2, or iso3.
-          * @default FlagIdentifier.CODE
+          * Helper text rendered below the radio options. Shown in default state; replaced by errorMessage in error state.
+          * @default ''
          */
-        "identifier"?: IFlag['identifier'];
+        "helperText"?: "";
         /**
-          * Whether the country name label should be displayed next to the flag.
-          * @default false
+          * Tooltip text shown on the group label info icon.
+          * @default ''
          */
-        "label"?: IFlag['label'];
+        "info"?: "";
         /**
-          * Visual shape used to render the flag.
-          * @default Shape.RECTANGLE
+          * Group label rendered above the radio options.
+          * @default ''
          */
-        "shape"?: IFlag['shape'];
+        "label"?: "";
         /**
-          * Whether the abbreviated country name (ISO2/ISO3) should be displayed instead of the full name.
-          * @default false
+          * Name of the form control; submitted as the field key in FormData.
          */
-        "shortName"?: IFlag['shortName'];
-    }
-    /**
-     * @attr {boolean} disabled - When true, prevents the popover from being shown.
-     * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
-     * @attr {boolean} header - When true, displays the popover header.
-     * @attr {boolean} footer - When true, displays the popover footer.
-     * @attr {boolean} closable - When true, displays the close button in the header.
-     * @attr {IPopoverFloatingOptions} floatingOptions - Configuration object for floating behavior.
-     * @csspart popover-content - The main popover container element.
-     * @csspart arrow - The arrow element pointing toward the trigger.
-     * @csspart popover-trigger - The trigger element for the popover.
-     * @cssprop data-placement - Reflects the resolved placement on the popover element.
-     * @cssprop data-hidearrow - Reflects the hideArrow option.
-     */
-    interface BdsPopover {
+        "name": string;
         /**
-          * If true, displays a close button inside the header. Requires `header` to be true.
-          * @default false
+          * Emitted when the selected radio changes. Payload includes the new value.
          */
-        "closable"?: boolean;
+        "onBdsChange"?: (event: BdsRadioGroupCustomEvent<RadioGroupChangeDetail>) => void;
         /**
-          * If true, disables the popover.
-          * @default false
+          * Emitted when the selected radio changes. Used for v-model two-way binding in Vue.
          */
-        "disabled"?: IPopover['disabled'];
+        "onValueChange"?: (event: BdsRadioGroupCustomEvent<string>) => void;
         /**
-          * Override default options for the floating mixin. This can be overridden by passing a different object to the `floatingOptions` prop.
-          * @default {}
+          * Layout direction of the radio options.
+          * @default ORIENTATIONS.VERTICAL
          */
-        "floatingOptions"?: IPopover['floatingOptions'];
+        "orientation"?: Orientation;
         /**
-          * If true, displays the footer section with helper and button slots.
+          * Marks the group as required for form submission. Triggers validity error when no radio is selected.
           * @default false
          */
-        "footer"?: boolean;
+        "required"?: false;
         /**
-          * If true, displays the header section with icon and title slots.
-          * @default false
+          * Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element.
+          * @default RADIO_GROUP_TYPES.RADIO
          */
-        "header"?: boolean;
+        "type"?: RadioGroupType;
         /**
-          * Width of the popover content. - number: width in pixels (e.g. 320 → "320px") - 'full': 100% of the trigger/parent width - 'auto': fits the content
-          * @default 320
+          * Currently selected radio value. Synced to children on change.
+          * @default ''
          */
-        "width"?: IPopover['width'];
+        "value"?: string;
     }
     /**
      * Spinner component used to indicate a loading or processing state.
@@ -1594,6 +3243,67 @@ declare namespace LocalJSX {
          */
         "size"?: ISpinner['size'];
     }
+    /**
+     * Status badge component for communicating the current state of an item or process.
+     */
+    interface BdsStatus {
+        /**
+          * indicator is a string attribute. Controls the type of indicator rendered before the slotted label. An invalid value falls back to `"none"` and a warning is set on the host element.
+          * @default INDICATOR_TYPES.NONE
+         */
+        "indicator"?: IStatus['indicator'];
+        /**
+          * state is a string attribute. Controls the visual state variant of the status badge. Determines the background, accent, and text colors applied to the element. An invalid value falls back to `"neutral"` and a warning is set on the host element.
+          * @default PROCESS_STATUS.NEUTRAL
+         */
+        "state"?: IStatus['state'];
+    }
+    /**
+     * Tag component used to represent categories, metadata, or removable filters.
+     * @summary Displays a label with optional leading/trailing icons and dismissal capability.
+     * @fires bdsClose - Emitted when the tag is closed via the close button or Delete key.
+     * @fires bdsSelect - Emitted when the tag is selected via a click or Space/Enter key.
+     */
+    interface BdsTag {
+        /**
+          * Aria label for the close button when visible.
+          * @default 'Close tag'
+         */
+        "closeButtonLabel"?: ITag['closeButtonLabel'];
+        /**
+          * Visual color variant: 'gray', 'cyan', 'cobalt', 'teal', 'lime', 'orange', 'rose', or 'purple'.
+          * @default "gray"
+         */
+        "color"?: ITag['color'];
+        /**
+          * Disables interaction with the tag. Reduces opacity and prevents interactions.
+          * @default false
+         */
+        "disabled"?: ITag['disabled'];
+        /**
+          * Whether the tag is selectable or not.
+          * @default false
+         */
+        "multiselect"?: ITag['multiselect'];
+        /**
+          * Emitted when the tag is closed via the close button or Delete key.
+         */
+        "onBdsClose"?: (event: BdsTagCustomEvent<TagEventPayload>) => void;
+        /**
+          * Emitted when the tag is selected via a click or Space/Enter key.
+         */
+        "onBdsSelect"?: (event: BdsTagCustomEvent<TagEventPayload>) => void;
+        /**
+          * Hides the close button that allows users to dismiss the tag.
+          * @default false
+         */
+        "readonly"?: ITag['readonly'];
+        /**
+          * Whether the tag is selected or not.
+          * @default false
+         */
+        "selected"?: ITag['selected'];
+    }
     /**
      * Text field component for user input with validation and form integration.
      * @summary Single-line text input with label, validation, password toggle, and clear action.
@@ -1804,6 +3514,88 @@ declare namespace LocalJSX {
          */
         "variant"?: TextFieldVariant;
     }
+    /**
+     * Toggle/Switch component for boolean selection.
+     * @summary A toggle switch form control with label positioning support.
+     * @property {string}  name        - Name of the form control, submitted as a key in the form data.
+     * @property {boolean} disabled    - Disables the control. Defaults to `false`.
+     * @property {boolean} required    - Marks the control as required for form submission. Defaults to `false`.
+     * @property {boolean} checked     - Whether the toggle is on. Defaults to `false`.
+     * @property {string}  placement   - Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `"left"`.
+     * @property {string}  label       - Label displayed next to the toggle. Defaults to `""`.
+     * @property {string}  helperText  - Help text displayed below the toggle. Defaults to `""`.
+     * @property {string}  value       - Value submitted with the form data when checked. Defaults to `"on"`.
+     * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+     * @fires bdsChange   - Emitted when the user toggles the switch. Payload: `IToggleEventChange`.
+     */
+    interface BdsToggle {
+        /**
+          * Whether the toggle is on. Defaults to `false`.
+          * @default false
+         */
+        "checked"?: IToggle['checked'];
+        /**
+          * Disables the control. Defaults to `false`.
+          * @default false
+         */
+        "disabled"?: IToggle['disabled'];
+        /**
+          * When `true`, applies the error visual state.
+          * @default false
+         */
+        "error"?: IToggle['error'];
+        /**
+          * Message shown below the input when `error` is `true`. Replaces `helperText`.
+          * @default ''
+         */
+        "errorMessage"?: IToggle['errorMessage'];
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Help text displayed below the toggle. Defaults to `""`.
+          * @default ''
+         */
+        "helperText"?: IToggle['helperText'];
+        /**
+          * Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop.
+          * @default ''
+         */
+        "info"?: IToggle['info'];
+        /**
+          * Label displayed next to the toggle. Defaults to `""`.
+          * @default ''
+         */
+        "label"?: IToggle['label'];
+        /**
+          * Name of the form control, submitted as a key in the form data.
+         */
+        "name": IToggle['name'];
+        /**
+          * Emitted when the user toggles the switch. Payload: `{ checked: boolean, value: string }`.
+         */
+        "onBdsChange"?: (event: BdsToggleCustomEvent<IToggleEventChange>) => void;
+        /**
+          * Emitted when the checked state changes. Useful for 2-way binding / v-model. Payload: `boolean`.
+         */
+        "onValueChange"?: (event: BdsToggleCustomEvent<boolean>) => void;
+        /**
+          * Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `TOGGLE_PLACEMENT.LEFT`.
+          * @default TOGGLE_PLACEMENT.LEFT
+         */
+        "placement"?: IToggle['placement'];
+        /**
+          * Marks the control as required for form submission. Defaults to `false`.
+          * @default false
+         */
+        "required"?: IToggle['required'];
+        /**
+          * Value submitted with the form data when checked. Behaves like the `value` attribute of a native `<input type="checkbox">`. Defaults to `"on"`.
+          * @default 'on'
+         */
+        "value"?: IToggle['value'];
+    }
     /**
      * Tooltip component that displays a short label anchored to a trigger element on hover.
      * @summary Displays a floating tooltip anchored to a trigger element on mouseenter/mouseleave,
@@ -1842,12 +3634,12 @@ declare namespace LocalJSX {
      * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
      * @attr {string} align - The text alignment. Options: start, center, end, inherit
      * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-     * @attr {boolean} is-required - Shows a required indicator when used with `label` variant.
+     * @attr {boolean} required - Shows a required indicator when used with `label` variant.
      * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
      * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
      * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
      * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-     * @attr {boolean} is-downloadable - Makes the `link` download a file.
+     * @attr {boolean} downloadable - Makes the `link` download a file.
      * @attr {string} filename - Suggested filename when downloading a file from the `link`.
      * @attr {string} html-for - The for attribute when rendered as a label
      * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -1857,12 +3649,12 @@ declare namespace LocalJSX {
      * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
      * @property {string} align - The text alignment. Options: start, center, end, inherit
      * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-     * @property {boolean} isRequired - Shows a required indicator when used with `label` variant.
+     * @property {boolean} required - Shows a required indicator when used with `label` variant.
      * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
      * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
      * @property {string} href - URL when the typography is an `a` element and a `link` variant.
      * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-     * @property {boolean} isDownloadable - Makes the `link` download a file.
+     * @property {boolean} downloadable - Makes the `link` download a file.
      * @property {string} filename - Suggested filename when downloading a file from the `link`.
      * @property {string} htmlFor - The for attribute when rendered as a label
      * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -1872,12 +3664,12 @@ declare namespace LocalJSX {
      * @default 'start' - Default align value
      * @default 'md' - Default size value
      * @default 'default' - Default state value
-     * @default false - Default isRequired state
+     * @default false - Default required state
      * @default false - Default ellipsis state
      * @default 1 - Default maxLines value
      * @default '' - Default href value
      * @default '' - Default target value
-     * @default false - Default isDownloadable state
+     * @default false - Default downloadable state
      * @default 'download' - Default filename value
      * @default '' - Default tooltipText value
      */
@@ -1892,6 +3684,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "customClass"?: string;
+        /**
+          * Enables download behavior for anchor.
+          * @default false
+         */
+        "downloadable"?: ITypography['downloadable'];
         /**
           * HTML tag used for rendering.
           * @default TAG_ELEMENT.P
@@ -1918,20 +3715,15 @@ declare namespace LocalJSX {
          */
         "htmlFor"?: ITypography['htmlFor'];
         /**
-          * Enables download behavior for anchor.
-          * @default false
+          * Max lines when ellipsis is enabled.
+          * @default 1
          */
-        "isDownloadable"?: ITypography['isDownloadable'];
+        "maxLines"?: ITypography['maxLines'];
         /**
           * Marks the field as required.
           * @default false
          */
-        "isRequired"?: ITypography['isRequired'];
-        /**
-          * Max lines when ellipsis is enabled.
-          * @default 1
-         */
-        "maxLines"?: ITypography['maxLines'];
+        "required"?: ITypography['required'];
         /**
           * Typography size token.
           * @default SIZES.M
@@ -1959,6 +3751,16 @@ declare namespace LocalJSX {
         "variant"?: ITypography['variant'];
     }
 
+    interface BdsAvatarAttributes {
+        "username": IAvatar['username'];
+        "variant": IAvatar['variant'];
+        "background": IAvatar['background'];
+        "initialsColor": IAvatar['initialsColor'];
+    }
+    interface BdsBadgeAttributes {
+        "variant": IBadge['variant'];
+        "disabled": IBadge['disabled'];
+    }
     interface BdsBannerAttributes {
         "variant": IBanner['variant'];
         "closable": boolean;
@@ -1975,6 +3777,13 @@ declare namespace LocalJSX {
         "loading": IButton['loading'];
         "disclosure": IButton['disclosure'];
     }
+    interface BdsButtonGroupAttributes {
+        "size": IButtonGroup['size'];
+        "orientation": IButtonGroup['orientation'];
+        "label": IButtonGroup['label'];
+        "color": IButtonGroup['color'];
+        "variant": IButtonGroup['variant'];
+    }
     interface BdsCheckboxAttributes {
         "name": string;
         "disabled": boolean;
@@ -1985,6 +3794,16 @@ declare namespace LocalJSX {
         "value": string;
         "label": string;
     }
+    interface BdsCheckboxCardAttributes {
+        "name": ICheckboxCard['name'];
+        "disabled": ICheckboxCard['disabled'];
+        "required": ICheckboxCard['required'];
+        "value": ICheckboxCard['value'];
+        "label": ICheckboxCard['label'];
+        "checked": ICheckboxCard['checked'];
+        "indeterminate": ICheckboxCard['indeterminate'];
+        "error": ICheckboxCard['error'];
+    }
     interface BdsDialogAttributes {
         "active": IDialog['active'];
         "preventClose": IDialog['preventClose'];
@@ -2000,6 +3819,9 @@ declare namespace LocalJSX {
         "maximizable": IDialog['maximizable'];
         "closable": IDialog['closable'];
     }
+    interface BdsDividerAttributes {
+        "orientation": IDivider['orientation'];
+    }
     interface BdsFlagAttributes {
         "alignFlag": IFlag['alignFlag'];
         "callSign": IFlag['callSign'];
@@ -2009,6 +3831,37 @@ declare namespace LocalJSX {
         "shape": IFlag['shape'];
         "shortName": IFlag['shortName'];
     }
+    interface BdsGridAttributes {
+        "layout": IGrid['layout'];
+        "rowGap": IGrid['rowGap'];
+    }
+    interface BdsGridItemAttributes {
+        "colSpan": string;
+        "colSpanSm": string;
+        "colSpanMd": string;
+        "colSpanLg": string;
+        "colSpanXl": string;
+        "colSpan2xl": string;
+        "rowSpan": string;
+        "offset": IGridItem['offset'];
+    }
+    interface BdsListMenuAttributes {
+        "selectionMode": IListMenu['selectionMode'];
+        "menuRole": IListMenu['menuRole'];
+        "selectControls": IListMenu['selectControls'];
+    }
+    interface BdsListMenuItemAttributes {
+        "variant": IListMenuItem['variant'];
+        "name": IListMenuItem['name'];
+        "disabled": IListMenuItem['disabled'];
+        "selected": IListMenuItem['selected'];
+        "value": IListMenuItem['value'];
+        "checkable": IListMenuItem['checkable'];
+        "activeItem": IListMenuItem['activeItem'];
+        "href": IListMenuItem['href'];
+        "newTab": IListMenuItem['newTab'];
+        "download": IListMenuItem['download'];
+    }
     interface BdsPopoverAttributes {
         "disabled": IPopover['disabled'];
         "width": string;
@@ -2016,10 +3869,62 @@ declare namespace LocalJSX {
         "footer": boolean;
         "closable": boolean;
     }
+    interface BdsRadioAttributes {
+        "checked": boolean;
+        "disabled": boolean;
+        "value": string;
+        "name": string;
+        "label": string;
+        "error": boolean;
+        "info": string;
+    }
+    interface BdsRadioButtonAttributes {
+        "checked": boolean;
+        "disabled": boolean;
+        "error": boolean;
+        "value": string;
+        "name": string;
+        "label": string;
+        "info": string;
+    }
+    interface BdsRadioCardAttributes {
+        "value": IRadioCard['value'];
+        "info": IRadioCard['info'];
+        "name": IRadioCard['name'];
+        "label": IRadioCard['label'];
+        "checked": IRadioCard['checked'];
+        "disabled": IRadioCard['disabled'];
+        "error": IRadioCard['error'];
+    }
+    interface BdsRadioGroupAttributes {
+        "disabled": false;
+        "error": false;
+        "errorMessage": "";
+        "helperText": "";
+        "info": "";
+        "label": "";
+        "name": string;
+        "orientation": Orientation;
+        "required": false;
+        "type": RadioGroupType;
+        "value": string;
+    }
     interface BdsSpinnerAttributes {
         "size": ISpinner['size'];
         "label": ISpinner['label'];
     }
+    interface BdsStatusAttributes {
+        "state": IStatus['state'];
+        "indicator": IStatus['indicator'];
+    }
+    interface BdsTagAttributes {
+        "multiselect": ITag['multiselect'];
+        "selected": ITag['selected'];
+        "closeButtonLabel": ITag['closeButtonLabel'];
+        "color": ITag['color'];
+        "readonly": ITag['readonly'];
+        "disabled": ITag['disabled'];
+    }
     interface BdsTextFieldAttributes {
         "name": string;
         "disabled": boolean;
@@ -2047,6 +3952,19 @@ declare namespace LocalJSX {
         "counter": boolean;
         "customWidth": string;
     }
+    interface BdsToggleAttributes {
+        "name": IToggle['name'];
+        "disabled": IToggle['disabled'];
+        "required": IToggle['required'];
+        "info": IToggle['info'];
+        "error": IToggle['error'];
+        "errorMessage": IToggle['errorMessage'];
+        "checked": IToggle['checked'];
+        "placement": IToggle['placement'];
+        "label": IToggle['label'];
+        "helperText": IToggle['helperText'];
+        "value": IToggle['value'];
+    }
     interface BdsTooltipAttributes {
         "multiline": ITooltip['multiline'];
         "disabled": ITooltip['disabled'];
@@ -2061,23 +3979,39 @@ declare namespace LocalJSX {
         "ellipsis": ITypography['ellipsis'];
         "maxLines": ITypography['maxLines'];
         "tooltipText": ITypography['tooltipText'];
-        "isRequired": ITypography['isRequired'];
+        "required": ITypography['required'];
         "htmlFor": ITypography['htmlFor'];
         "href": ITypography['href'];
         "target": ITypography['target'];
-        "isDownloadable": ITypography['isDownloadable'];
+        "downloadable": ITypography['downloadable'];
         "filename": ITypography['filename'];
     }
 
     interface IntrinsicElements {
+        "bds-avatar": Omit<BdsAvatar, keyof BdsAvatarAttributes> & { [K in keyof BdsAvatar & keyof BdsAvatarAttributes]?: BdsAvatar[K] } & { [K in keyof BdsAvatar & keyof BdsAvatarAttributes as `attr:${K}`]?: BdsAvatarAttributes[K] } & { [K in keyof BdsAvatar & keyof BdsAvatarAttributes as `prop:${K}`]?: BdsAvatar[K] };
+        "bds-badge": Omit<BdsBadge, keyof BdsBadgeAttributes> & { [K in keyof BdsBadge & keyof BdsBadgeAttributes]?: BdsBadge[K] } & { [K in keyof BdsBadge & keyof BdsBadgeAttributes as `attr:${K}`]?: BdsBadgeAttributes[K] } & { [K in keyof BdsBadge & keyof BdsBadgeAttributes as `prop:${K}`]?: BdsBadge[K] };
         "bds-banner": Omit<BdsBanner, keyof BdsBannerAttributes> & { [K in keyof BdsBanner & keyof BdsBannerAttributes]?: BdsBanner[K] } & { [K in keyof BdsBanner & keyof BdsBannerAttributes as `attr:${K}`]?: BdsBannerAttributes[K] } & { [K in keyof BdsBanner & keyof BdsBannerAttributes as `prop:${K}`]?: BdsBanner[K] };
         "bds-button": Omit<BdsButton, keyof BdsButtonAttributes> & { [K in keyof BdsButton & keyof BdsButtonAttributes]?: BdsButton[K] } & { [K in keyof BdsButton & keyof BdsButtonAttributes as `attr:${K}`]?: BdsButtonAttributes[K] } & { [K in keyof BdsButton & keyof BdsButtonAttributes as `prop:${K}`]?: BdsButton[K] };
+        "bds-button-group": Omit<BdsButtonGroup, keyof BdsButtonGroupAttributes> & { [K in keyof BdsButtonGroup & keyof BdsButtonGroupAttributes]?: BdsButtonGroup[K] } & { [K in keyof BdsButtonGroup & keyof BdsButtonGroupAttributes as `attr:${K}`]?: BdsButtonGroupAttributes[K] } & { [K in keyof BdsButtonGroup & keyof BdsButtonGroupAttributes as `prop:${K}`]?: BdsButtonGroup[K] };
         "bds-checkbox": Omit<BdsCheckbox, keyof BdsCheckboxAttributes> & { [K in keyof BdsCheckbox & keyof BdsCheckboxAttributes]?: BdsCheckbox[K] } & { [K in keyof BdsCheckbox & keyof BdsCheckboxAttributes as `attr:${K}`]?: BdsCheckboxAttributes[K] } & { [K in keyof BdsCheckbox & keyof BdsCheckboxAttributes as `prop:${K}`]?: BdsCheckbox[K] } & OneOf<"name", BdsCheckbox["name"], BdsCheckboxAttributes["name"]>;
+        "bds-checkbox-card": Omit<BdsCheckboxCard, keyof BdsCheckboxCardAttributes> & { [K in keyof BdsCheckboxCard & keyof BdsCheckboxCardAttributes]?: BdsCheckboxCard[K] } & { [K in keyof BdsCheckboxCard & keyof BdsCheckboxCardAttributes as `attr:${K}`]?: BdsCheckboxCardAttributes[K] } & { [K in keyof BdsCheckboxCard & keyof BdsCheckboxCardAttributes as `prop:${K}`]?: BdsCheckboxCard[K] } & OneOf<"name", BdsCheckboxCard["name"], BdsCheckboxCardAttributes["name"]>;
         "bds-dialog": Omit<BdsDialog, keyof BdsDialogAttributes> & { [K in keyof BdsDialog & keyof BdsDialogAttributes]?: BdsDialog[K] } & { [K in keyof BdsDialog & keyof BdsDialogAttributes as `attr:${K}`]?: BdsDialogAttributes[K] } & { [K in keyof BdsDialog & keyof BdsDialogAttributes as `prop:${K}`]?: BdsDialog[K] };
+        "bds-divider": Omit<BdsDivider, keyof BdsDividerAttributes> & { [K in keyof BdsDivider & keyof BdsDividerAttributes]?: BdsDivider[K] } & { [K in keyof BdsDivider & keyof BdsDividerAttributes as `attr:${K}`]?: BdsDividerAttributes[K] } & { [K in keyof BdsDivider & keyof BdsDividerAttributes as `prop:${K}`]?: BdsDivider[K] };
         "bds-flag": Omit<BdsFlag, keyof BdsFlagAttributes> & { [K in keyof BdsFlag & keyof BdsFlagAttributes]?: BdsFlag[K] } & { [K in keyof BdsFlag & keyof BdsFlagAttributes as `attr:${K}`]?: BdsFlagAttributes[K] } & { [K in keyof BdsFlag & keyof BdsFlagAttributes as `prop:${K}`]?: BdsFlag[K] };
+        "bds-grid": Omit<BdsGrid, keyof BdsGridAttributes> & { [K in keyof BdsGrid & keyof BdsGridAttributes]?: BdsGrid[K] } & { [K in keyof BdsGrid & keyof BdsGridAttributes as `attr:${K}`]?: BdsGridAttributes[K] } & { [K in keyof BdsGrid & keyof BdsGridAttributes as `prop:${K}`]?: BdsGrid[K] };
+        "bds-grid-item": Omit<BdsGridItem, keyof BdsGridItemAttributes> & { [K in keyof BdsGridItem & keyof BdsGridItemAttributes]?: BdsGridItem[K] } & { [K in keyof BdsGridItem & keyof BdsGridItemAttributes as `attr:${K}`]?: BdsGridItemAttributes[K] } & { [K in keyof BdsGridItem & keyof BdsGridItemAttributes as `prop:${K}`]?: BdsGridItem[K] };
+        "bds-list-menu": Omit<BdsListMenu, keyof BdsListMenuAttributes> & { [K in keyof BdsListMenu & keyof BdsListMenuAttributes]?: BdsListMenu[K] } & { [K in keyof BdsListMenu & keyof BdsListMenuAttributes as `attr:${K}`]?: BdsListMenuAttributes[K] } & { [K in keyof BdsListMenu & keyof BdsListMenuAttributes as `prop:${K}`]?: BdsListMenu[K] };
+        "bds-list-menu-item": Omit<BdsListMenuItem, keyof BdsListMenuItemAttributes> & { [K in keyof BdsListMenuItem & keyof BdsListMenuItemAttributes]?: BdsListMenuItem[K] } & { [K in keyof BdsListMenuItem & keyof BdsListMenuItemAttributes as `attr:${K}`]?: BdsListMenuItemAttributes[K] } & { [K in keyof BdsListMenuItem & keyof BdsListMenuItemAttributes as `prop:${K}`]?: BdsListMenuItem[K] };
         "bds-popover": Omit<BdsPopover, keyof BdsPopoverAttributes> & { [K in keyof BdsPopover & keyof BdsPopoverAttributes]?: BdsPopover[K] } & { [K in keyof BdsPopover & keyof BdsPopoverAttributes as `attr:${K}`]?: BdsPopoverAttributes[K] } & { [K in keyof BdsPopover & keyof BdsPopoverAttributes as `prop:${K}`]?: BdsPopover[K] };
+        "bds-radio": Omit<BdsRadio, keyof BdsRadioAttributes> & { [K in keyof BdsRadio & keyof BdsRadioAttributes]?: BdsRadio[K] } & { [K in keyof BdsRadio & keyof BdsRadioAttributes as `attr:${K}`]?: BdsRadioAttributes[K] } & { [K in keyof BdsRadio & keyof BdsRadioAttributes as `prop:${K}`]?: BdsRadio[K] };
+        "bds-radio-button": Omit<BdsRadioButton, keyof BdsRadioButtonAttributes> & { [K in keyof BdsRadioButton & keyof BdsRadioButtonAttributes]?: BdsRadioButton[K] } & { [K in keyof BdsRadioButton & keyof BdsRadioButtonAttributes as `attr:${K}`]?: BdsRadioButtonAttributes[K] } & { [K in keyof BdsRadioButton & keyof BdsRadioButtonAttributes as `prop:${K}`]?: BdsRadioButton[K] };
+        "bds-radio-card": Omit<BdsRadioCard, keyof BdsRadioCardAttributes> & { [K in keyof BdsRadioCard & keyof BdsRadioCardAttributes]?: BdsRadioCard[K] } & { [K in keyof BdsRadioCard & keyof BdsRadioCardAttributes as `attr:${K}`]?: BdsRadioCardAttributes[K] } & { [K in keyof BdsRadioCard & keyof BdsRadioCardAttributes as `prop:${K}`]?: BdsRadioCard[K] };
+        "bds-radio-group": Omit<BdsRadioGroup, keyof BdsRadioGroupAttributes> & { [K in keyof BdsRadioGroup & keyof BdsRadioGroupAttributes]?: BdsRadioGroup[K] } & { [K in keyof BdsRadioGroup & keyof BdsRadioGroupAttributes as `attr:${K}`]?: BdsRadioGroupAttributes[K] } & { [K in keyof BdsRadioGroup & keyof BdsRadioGroupAttributes as `prop:${K}`]?: BdsRadioGroup[K] } & OneOf<"name", BdsRadioGroup["name"], BdsRadioGroupAttributes["name"]>;
         "bds-spinner": Omit<BdsSpinner, keyof BdsSpinnerAttributes> & { [K in keyof BdsSpinner & keyof BdsSpinnerAttributes]?: BdsSpinner[K] } & { [K in keyof BdsSpinner & keyof BdsSpinnerAttributes as `attr:${K}`]?: BdsSpinnerAttributes[K] } & { [K in keyof BdsSpinner & keyof BdsSpinnerAttributes as `prop:${K}`]?: BdsSpinner[K] };
+        "bds-status": Omit<BdsStatus, keyof BdsStatusAttributes> & { [K in keyof BdsStatus & keyof BdsStatusAttributes]?: BdsStatus[K] } & { [K in keyof BdsStatus & keyof BdsStatusAttributes as `attr:${K}`]?: BdsStatusAttributes[K] } & { [K in keyof BdsStatus & keyof BdsStatusAttributes as `prop:${K}`]?: BdsStatus[K] };
+        "bds-tag": Omit<BdsTag, keyof BdsTagAttributes> & { [K in keyof BdsTag & keyof BdsTagAttributes]?: BdsTag[K] } & { [K in keyof BdsTag & keyof BdsTagAttributes as `attr:${K}`]?: BdsTagAttributes[K] } & { [K in keyof BdsTag & keyof BdsTagAttributes as `prop:${K}`]?: BdsTag[K] };
         "bds-text-field": Omit<BdsTextField, keyof BdsTextFieldAttributes> & { [K in keyof BdsTextField & keyof BdsTextFieldAttributes]?: BdsTextField[K] } & { [K in keyof BdsTextField & keyof BdsTextFieldAttributes as `attr:${K}`]?: BdsTextFieldAttributes[K] } & { [K in keyof BdsTextField & keyof BdsTextFieldAttributes as `prop:${K}`]?: BdsTextField[K] };
+        "bds-toggle": Omit<BdsToggle, keyof BdsToggleAttributes> & { [K in keyof BdsToggle & keyof BdsToggleAttributes]?: BdsToggle[K] } & { [K in keyof BdsToggle & keyof BdsToggleAttributes as `attr:${K}`]?: BdsToggleAttributes[K] } & { [K in keyof BdsToggle & keyof BdsToggleAttributes as `prop:${K}`]?: BdsToggle[K] } & OneOf<"name", BdsToggle["name"], BdsToggleAttributes["name"]>;
         "bds-tooltip": Omit<BdsTooltip, keyof BdsTooltipAttributes> & { [K in keyof BdsTooltip & keyof BdsTooltipAttributes]?: BdsTooltip[K] } & { [K in keyof BdsTooltip & keyof BdsTooltipAttributes as `attr:${K}`]?: BdsTooltipAttributes[K] } & { [K in keyof BdsTooltip & keyof BdsTooltipAttributes as `prop:${K}`]?: BdsTooltip[K] };
         "bds-typography": Omit<BdsTypography, keyof BdsTypographyAttributes> & { [K in keyof BdsTypography & keyof BdsTypographyAttributes]?: BdsTypography[K] } & { [K in keyof BdsTypography & keyof BdsTypographyAttributes as `attr:${K}`]?: BdsTypographyAttributes[K] } & { [K in keyof BdsTypography & keyof BdsTypographyAttributes as `prop:${K}`]?: BdsTypography[K] };
     }
@@ -2086,6 +4020,31 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * Avatar component used to display user initials or names for visual identification.
+             * @summary Displays a circular avatar with user initials and optional name label.
+             * Uses Boreal Design System tokens for consistent styling across platforms.
+             * @attr {string} username - The full name used to generate initials or display as label.
+             * @attr {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+             * @attr {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+             * @attr {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+             * @property {string} username - The full name used to generate initials or display as label.
+             * @property {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+             * @property {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+             * @property {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+             * @cssprop --bds-avatar-background - Custom background color HEX code.
+             * @cssprop --bds-avatar-initials-color - Custom text color HEX code.
+             */
+            "bds-avatar": LocalJSX.IntrinsicElements["bds-avatar"] & JSXBase.HTMLAttributes<HTMLBdsAvatarElement>;
+            /**
+             * Badge component for displaying contextual status information with optional icon support.
+             * @summary A compact label component that communicates status or category using color-coded variants. Supports an optional icon slot and a disabled state.
+             * @attr {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+             * @attr {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+             * @property {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+             * @property {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+             */
+            "bds-badge": LocalJSX.IntrinsicElements["bds-badge"] & JSXBase.HTMLAttributes<HTMLBdsBadgeElement>;
             /**
              * Banner component used to display important messages with different status variants.
              * @summary Displays a dismissible banner with an icon, title, body content, and optional actions.
@@ -2094,8 +4053,8 @@ declare module "@stencil/core" {
              * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
              * @property {boolean} closable - Shows a close button that allows users to close the banner. Defaults to false.
              * @property {boolean} closeButtonLabel - Aria label for the close button when visible.
-             * @fires bdsClose - Emitted when the banner is closed via the close button or `closeBanner` method.
-             * @method closeBanner - Programmatic method to close the banner and emit the `bdsClose` event.
+             * @fires bdsClose - Emitted when the banner is closed via the close button or `close` method.
+             * @method close - Programmatic method to close the banner and emit the `bdsClose` event.
              */
             "bds-banner": LocalJSX.IntrinsicElements["bds-banner"] & JSXBase.HTMLAttributes<HTMLBdsBannerElement>;
             /**
@@ -2107,7 +4066,7 @@ declare module "@stencil/core" {
              * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
              * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
              * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-             * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+             * @attr {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
              * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
              * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
              * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
@@ -2116,13 +4075,13 @@ declare module "@stencil/core" {
              * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
              * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
              * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
-             * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+             * @property {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
              * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
              * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
              * @default 'button' - Default type value
              * @default 'default' - Default color value
              * @default 'default' - Default variant value
-             * @default 'medium' - Default size value
+             * @default 'md' - Default size value
              * @default 'default' - Default status value
              * @default false - Default disabled value
              * @default '' - Default label value
@@ -2131,6 +4090,10 @@ declare module "@stencil/core" {
              * @default false - Default disclosure value
              */
             "bds-button": LocalJSX.IntrinsicElements["bds-button"] & JSXBase.HTMLAttributes<HTMLBdsButtonElement>;
+            /**
+             * Button group component for grouping related buttons together in a unified visual unit.
+             */
+            "bds-button-group": LocalJSX.IntrinsicElements["bds-button-group"] & JSXBase.HTMLAttributes<HTMLBdsButtonGroupElement>;
             /**
              * Checkbox component for boolean selection with three visual states.
              * @summary A checkbox form control with default, selected, and indeterminate states.
@@ -2143,6 +4106,23 @@ declare module "@stencil/core" {
              * @fires bdsChange - Emitted when the user toggles the checkbox. Payload: `{ checked: boolean, value: string }`.
              */
             "bds-checkbox": LocalJSX.IntrinsicElements["bds-checkbox"] & JSXBase.HTMLAttributes<HTMLBdsCheckboxElement>;
+            /**
+             * Checkbox card component is a selectable card-based checkbox option.
+             * It presents a non-exclusive choice with optional descriptive text and icon,
+             * supporting checked, indeterminate, disabled, and error states.
+             * Can be used standalone or within a checkbox group for orchestration.
+             * @property {string}  name          - Name of the form control, submitted as a key in the form data.
+             * @property {boolean} disabled      - Disables the control. Defaults to `false`.
+             * @property {boolean} required      - Marks the control as required for form submission. Defaults to `false`.
+             * @property {string}  value         - Value submitted with the form data when checked. Defaults to `"on"`.
+             * @property {string}  label         - Label displayed next to the checkbox. If not provided, the default slot is used.
+             * @property {boolean} checked       - Whether the checkbox card is selected. Defaults to `false`.
+             * @property {boolean} indeterminate - Whether the checkbox card shows an indeterminate ("mixed") visual state. Defaults to `false`.
+             * @property {boolean} error         - Whether the checkbox card is in an error state. Defaults to `false`.
+             * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+             * @fires bdsChange   - Emitted when the user toggles the checkbox card. Payload: `{ checked: boolean, value: string }`.
+             */
+            "bds-checkbox-card": LocalJSX.IntrinsicElements["bds-checkbox-card"] & JSXBase.HTMLAttributes<HTMLBdsCheckboxCardElement>;
             /**
              * Modal dialog component for displaying content in an overlay.
              * @summary Modal overlay for alerts, forms, and confirmations with customizable layout and behavior.
@@ -2179,6 +4159,14 @@ declare module "@stencil/core" {
              * @cssprop --bds-dialog-height - Custom height for the dialog.
              */
             "bds-dialog": LocalJSX.IntrinsicElements["bds-dialog"] & JSXBase.HTMLAttributes<HTMLBdsDialogElement>;
+            /**
+             * Divider component for creating visual separators between content sections.
+             * @summary A simple visual separator that can be oriented horizontally or vertically.
+             * @csspart divider - A divider element that visually separates content.
+             * @attr {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+             * @property {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+             */
+            "bds-divider": LocalJSX.IntrinsicElements["bds-divider"] & JSXBase.HTMLAttributes<HTMLBdsDividerElement>;
             /**
              * Flag component used to display a country flag together with its corresponding label.
              * @summary Renders a flag icon based on a country identifier and optionally displays
@@ -2202,6 +4190,60 @@ declare module "@stencil/core" {
              * @property {ICountry[]} customFlags - List of custom flag definitions merged with the default catalog. Defaults to `[]`.
              */
             "bds-flag": LocalJSX.IntrinsicElements["bds-flag"] & JSXBase.HTMLAttributes<HTMLBdsFlagElement>;
+            /**
+             * 12-column CSS Grid layout container with 5 responsive breakpoints.
+             * Minimum browser support: Chrome/Edge (last 2), Firefox (last 2), Safari (last 2).
+             */
+            "bds-grid": LocalJSX.IntrinsicElements["bds-grid"] & JSXBase.HTMLAttributes<HTMLBdsGridElement>;
+            /**
+             * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+             */
+            "bds-grid-item": LocalJSX.IntrinsicElements["bds-grid-item"] & JSXBase.HTMLAttributes<HTMLBdsGridItemElement>;
+            /**
+             * Container component that manages a list of menu items.
+             * It handles selection logic (single/multiple) and maintains the data state.
+             * @summary A list menu component that can contain multiple menu items and manage their selection state.
+             * @fires bdsChange - Emitted when the selection changes, providing the current selected value(s).
+             * @fires bdsSelect - Emmited when item is selected in menu-role="menu" is clicked
+             * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
+             * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
+             */
+            "bds-list-menu": LocalJSX.IntrinsicElements["bds-list-menu"] & JSXBase.HTMLAttributes<HTMLBdsListMenuElement>;
+            /**
+             * Component representing an individual item within a list menu for navigations and selection.
+             * @summary A menu item component that supports different variants, disabled state, and selection state, it also supports link behavior when the href prop is provided.
+             * @attr {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+             * @attr {string} name - The name of the list menu item.
+             * @attr {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+             * @attr {boolean} selected - If true, the menu item is styled as selected.
+             * @attr {boolean} activeItem - If true, the menu item is styled as active.
+             * @attr {string} value - The value associated with the menu item, emitted in events when activated.\
+             * @attr {string} href - The URL for the link. If provided, the menu item will behave as a link.
+             * @attr {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+             * @attr {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+             * @attr {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+             * @property {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+             * @property {string} name - The name of the list menu item.
+             * @property {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+             * @property {boolean} selected - If true, the menu item is styled as selected.
+             * @property {boolean} activeItem - If true, the menu item is styled as active.
+             * @property {string} value - The value associated with the menu item, emitted in events when activated.
+             * @property {string} href - The URL for the link. If provided, the menu item will behave as a link.
+             * @property {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+             * @property {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+             * @property {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+             * @default 'button' - The default variant for the menu item is 'button', which is a standard clickable item.
+             * @default '' - By default, the name of the menu item is an empty string.
+             * @default false - By default, the menu item is not disabled and is interactive.
+             * @default false - By default, the menu item is not selected.
+             * @default false - By default, the menu item is not active.
+             * @default '' - By default, the value of the menu item is an empty string.
+             * @default '' - By default, the href is an empty string, meaning the menu item will not behave as a link.
+             * @default false - By default, the newTab property is false, meaning links will open in the same tab.
+             * @default false - By default, the downloadable property is false, meaning links will not be treated as download links.
+             * @default '' - By default, the filename is an empty string, meaning no suggested filename for downloads.
+             */
+            "bds-list-menu-item": LocalJSX.IntrinsicElements["bds-list-menu-item"] & JSXBase.HTMLAttributes<HTMLBdsListMenuItemElement>;
             /**
              * @attr {boolean} disabled - When true, prevents the popover from being shown.
              * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
@@ -2216,6 +4258,30 @@ declare module "@stencil/core" {
              * @cssprop data-hidearrow - Reflects the hideArrow option.
              */
             "bds-popover": LocalJSX.IntrinsicElements["bds-popover"] & JSXBase.HTMLAttributes<HTMLBdsPopoverElement>;
+            /**
+             * Radio button component for single-selection within a group.
+             * Use inside `bds-radio-group` for managed selection and form binding.
+             * Can also be used standalone with the `name`, `value`, and `checked` props.
+             */
+            "bds-radio": LocalJSX.IntrinsicElements["bds-radio"] & JSXBase.HTMLAttributes<HTMLBdsRadioElement>;
+            /**
+             * Button-shaped radio option for use inside `bds-radio-group[type="radiobutton"]`.
+             * Creates a segmented control appearance when grouped. Not form-associated — the parent
+             * `bds-radio-group` owns form state and single-selection enforcement.
+             */
+            "bds-radio-button": LocalJSX.IntrinsicElements["bds-radio-button"] & JSXBase.HTMLAttributes<HTMLBdsRadioButtonElement>;
+            /**
+             * Radio card component is a selectable card-based radio option.
+             * It presents a mutually exclusive choice with optional descriptive text and icon,
+             * designed for integration with bds-radio-group for orchestration.
+             * Can also be used standalone with the `name`, `value`, and `checked` props.
+             * @fires bdsChange - Emitted when the user selects this radio card. Listened to by the parent bds-radio-group to enforce single selection.
+             */
+            "bds-radio-card": LocalJSX.IntrinsicElements["bds-radio-card"] & JSXBase.HTMLAttributes<HTMLBdsRadioCardElement>;
+            /**
+             * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
+             */
+            "bds-radio-group": LocalJSX.IntrinsicElements["bds-radio-group"] & JSXBase.HTMLAttributes<HTMLBdsRadioGroupElement>;
             /**
              * Spinner component used to indicate a loading or processing state.
              * @summary Displays an animated circular spinner to communicate that content is loading.
@@ -2225,6 +4291,17 @@ declare module "@stencil/core" {
              * @property {string} label - Text used as the accessible label for screen readers.
              */
             "bds-spinner": LocalJSX.IntrinsicElements["bds-spinner"] & JSXBase.HTMLAttributes<HTMLBdsSpinnerElement>;
+            /**
+             * Status badge component for communicating the current state of an item or process.
+             */
+            "bds-status": LocalJSX.IntrinsicElements["bds-status"] & JSXBase.HTMLAttributes<HTMLBdsStatusElement>;
+            /**
+             * Tag component used to represent categories, metadata, or removable filters.
+             * @summary Displays a label with optional leading/trailing icons and dismissal capability.
+             * @fires bdsClose - Emitted when the tag is closed via the close button or Delete key.
+             * @fires bdsSelect - Emitted when the tag is selected via a click or Space/Enter key.
+             */
+            "bds-tag": LocalJSX.IntrinsicElements["bds-tag"] & JSXBase.HTMLAttributes<HTMLBdsTagElement>;
             /**
              * Text field component for user input with validation and form integration.
              * @summary Single-line text input with label, validation, password toggle, and clear action.
@@ -2266,6 +4343,21 @@ declare module "@stencil/core" {
              * @cssprop --bds-text-field-width - Sets a custom width for the component.
              */
             "bds-text-field": LocalJSX.IntrinsicElements["bds-text-field"] & JSXBase.HTMLAttributes<HTMLBdsTextFieldElement>;
+            /**
+             * Toggle/Switch component for boolean selection.
+             * @summary A toggle switch form control with label positioning support.
+             * @property {string}  name        - Name of the form control, submitted as a key in the form data.
+             * @property {boolean} disabled    - Disables the control. Defaults to `false`.
+             * @property {boolean} required    - Marks the control as required for form submission. Defaults to `false`.
+             * @property {boolean} checked     - Whether the toggle is on. Defaults to `false`.
+             * @property {string}  placement   - Position of the label relative to the switch. Accepts `TOGGLE_PLACEMENT` values. Defaults to `"left"`.
+             * @property {string}  label       - Label displayed next to the toggle. Defaults to `""`.
+             * @property {string}  helperText  - Help text displayed below the toggle. Defaults to `""`.
+             * @property {string}  value       - Value submitted with the form data when checked. Defaults to `"on"`.
+             * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
+             * @fires bdsChange   - Emitted when the user toggles the switch. Payload: `IToggleEventChange`.
+             */
+            "bds-toggle": LocalJSX.IntrinsicElements["bds-toggle"] & JSXBase.HTMLAttributes<HTMLBdsToggleElement>;
             /**
              * Tooltip component that displays a short label anchored to a trigger element on hover.
              * @summary Displays a floating tooltip anchored to a trigger element on mouseenter/mouseleave,
@@ -2288,12 +4380,12 @@ declare module "@stencil/core" {
              * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
              * @attr {string} align - The text alignment. Options: start, center, end, inherit
              * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-             * @attr {boolean} is-required - Shows a required indicator when used with `label` variant.
+             * @attr {boolean} required - Shows a required indicator when used with `label` variant.
              * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
              * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
              * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
              * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-             * @attr {boolean} is-downloadable - Makes the `link` download a file.
+             * @attr {boolean} downloadable - Makes the `link` download a file.
              * @attr {string} filename - Suggested filename when downloading a file from the `link`.
              * @attr {string} html-for - The for attribute when rendered as a label
              * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -2303,12 +4395,12 @@ declare module "@stencil/core" {
              * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
              * @property {string} align - The text alignment. Options: start, center, end, inherit
              * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
-             * @property {boolean} isRequired - Shows a required indicator when used with `label` variant.
+             * @property {boolean} required - Shows a required indicator when used with `label` variant.
              * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
              * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
              * @property {string} href - URL when the typography is an `a` element and a `link` variant.
              * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
-             * @property {boolean} isDownloadable - Makes the `link` download a file.
+             * @property {boolean} downloadable - Makes the `link` download a file.
              * @property {string} filename - Suggested filename when downloading a file from the `link`.
              * @property {string} htmlFor - The for attribute when rendered as a label
              * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -2318,12 +4410,12 @@ declare module "@stencil/core" {
              * @default 'start' - Default align value
              * @default 'md' - Default size value
              * @default 'default' - Default state value
-             * @default false - Default isRequired state
+             * @default false - Default required state
              * @default false - Default ellipsis state
              * @default 1 - Default maxLines value
              * @default '' - Default href value
              * @default '' - Default target value
-             * @default false - Default isDownloadable state
+             * @default false - Default downloadable state
              * @default 'download' - Default filename value
              * @default '' - Default tooltipText value
              */