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

package/dist/types/components.d.ts

@@ -6,293 +6,1833 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IBanner } from "./components/feedback/bds-banner/types/IBanner";
+import { IButton } from "./components/actions/bds-button/types/IButton";
+import { CheckboxChangeDetail } from "./components/forms/bds-checkbox/types/ICheckbox";
+import { IDialog } from "./components/overlays/bds-dialog/types";
+import { IFlag } from "./components/forms/bds-flag/interfaces/IFlag";
+import { IPopover } from "./components/overlays/bds-popover/types/IPopover";
+import { ISpinner } from "./components/feedback/bds-spinner/types/ISpinner";
+import { IFormValidator } from "./types/index";
+import { TextFieldType, TextFieldValidationTiming, TextFieldVariant } from "./components/forms/bds-text-field/types";
+import { Event } from "./stencil-public-runtime";
+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 { IBanner } from "./components/feedback/bds-banner/types/IBanner";
+export { IButton } from "./components/actions/bds-button/types/IButton";
+export { CheckboxChangeDetail } from "./components/forms/bds-checkbox/types/ICheckbox";
+export { IDialog } from "./components/overlays/bds-dialog/types";
+export { IFlag } from "./components/forms/bds-flag/interfaces/IFlag";
+export { IPopover } from "./components/overlays/bds-popover/types/IPopover";
+export { ISpinner } from "./components/feedback/bds-spinner/types/ISpinner";
+export { IFormValidator } from "./types/index";
+export { TextFieldType, TextFieldValidationTiming, TextFieldVariant } from "./components/forms/bds-text-field/types";
+export { Event } from "./stencil-public-runtime";
+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 {
     /**
      * 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} enable-close - When true, renders a close button that triggers the close event.
-     * @attr {string} idComponent - Unique identifier for the banner element.
-     * @property {string} idComponent - Unique identifier for the banner element.
+     * @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} enableClose - Shows a close button that allows users to dismiss the banner. Defaults to false.
-     * @fires close - Emitted when the banner is closed via the close button or `closeBanner` method.
-     * @method closeBanner - Programmatic method to close the banner and emit the `close` event.
+     * @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.
      */
     interface BdsBanner {
         /**
-          * Programmatic method to close the banner and emit the `close` event
+          * Shows a close button that allows users to close the banner.
+          * @default false
+         */
+        "closable": boolean;
+        /**
+          * Programmatic method to close the banner and emit the `bdsClose` event
+         */
+        "closeBanner": () => Promise<void>;
+        /**
+          * The aria label for the close button.
+          * @default ""
+         */
+        "closeButtonLabel": IBanner['closeButtonLabel'];
+        /**
+          * 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 '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
+     */
+    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 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'];
+        /**
+          * size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+          * @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'];
+    }
+    /**
+     * 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;
+        /**
+          * 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;
+        /**
+          * Marks the control as required for form submission.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Value submitted with the form data when checked.
+          * @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.
+     */
+    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'];
+        /**
+          * Closes the dialog programmatically. This method triggers the close functionality to hide the dialog.
+         */
+        "close": () => Promise<void>;
+        /**
+          * 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'];
+        /**
+          * Opens the dialog programmatically. This method triggers the show functionality to display the dialog.
+         */
+        "open": () => Promise<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'];
+    }
+    /**
+     * 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'];
+    }
+    /**
+     * @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 {
+        /**
+          * If true, displays a close button inside the header. Requires `header` to be true.
+          * @default false
+         */
+        "closable"?: boolean;
+        /**
+          * If true, disables the popover.
+          * @default false
+         */
+        "disabled"?: IPopover['disabled'];
+        /**
+          * 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
+         */
+        "footer"?: boolean;
+        /**
+          * If true, displays the header section with icon and title slots.
+          * @default false
+         */
+        "header"?: boolean;
+        /**
+          * 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'];
+    }
+    /**
+     * 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'];
+    }
+    /**
+     * 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;
+        /**
+          * Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`).
+          * @default ''
+         */
+        "icon": string;
+        /**
+          * Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop.
+          * @default ''
+         */
+        "info": string;
+        /**
+          * Label text rendered above the input.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Maximum character count. `0` means no maximum.
+          * @default 0
+         */
+        "maxLength": number;
+        /**
+          * Minimum character count. `0` means no minimum.
+          * @default 0
+         */
+        "minLength": number;
+        /**
+          * The name submitted with the form.
+          * @default ''
+         */
+        "name": string;
+        /**
+          * 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.
+          * @default ''
+         */
+        "pattern": string;
+        /**
+          * Native `placeholder` attribute forwarded to the inner `<input>`.
+          * @default ''
+         */
+        "placeholder": string;
+        /**
+          * Makes the input read-only. The value is still submitted with the form.
+          * @default false
+         */
+        "readOnly": boolean;
+        /**
+          * Returns `true` if the element's value passes all constraints; `false` otherwise. Shows the browser's native validation UI when constraints are violated.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * Marks the input as required for form validation.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Sublabel rendered inside the input container, before the text area.
+          * @default ''
+         */
+        "sublabel": string;
+        /**
+          * The input type. Use `'password'` to enable the visibility toggle.
+          * @default TEXT_FIELD_TYPES.TEXT
+         */
+        "type": TextFieldType;
+        /**
+          * Controls when built-in validation runs: `'blur'` | `'input'` | `'submit'` | `'change'`.
+          * @default TEXT_FIELD_VALIDATION_TIMING.BLUR
+         */
+        "validationTiming": TextFieldValidationTiming;
+        /**
+          * The current value of the input.
+          * @default ''
+         */
+        "value": string;
+        /**
+          * Visual style of the input container. `'outline'` shows a border; `'plain'` hides it at rest.
+          * @default TEXT_FIELD_VARIANTS.OUTLINE
+         */
+        "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.
+     */
+    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} 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
+     * @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
+     * @property {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
+     * @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} 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 {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.
+     * @property {string} customClass - Additional custom CSS class
+     * @default 'display' - Default variant value
+     * @default 'p' - Default element value
+     * @default 'start' - Default align value
+     * @default 'md' - Default size value
+     * @default 'default' - Default state value
+     * @default false - Default isRequired 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 'download' - Default filename value
+     * @default '' - Default tooltipText value
+     */
+    interface BdsTypography {
+        /**
+          * Text alignment.
+          * @default ALIGNMENT.START
+         */
+        "align": ITypography['align'];
+        /**
+          * Additional custom CSS class.
+          * @default ''
+         */
+        "customClass": string;
+        /**
+          * HTML tag used for rendering.
+          * @default TAG_ELEMENT.P
+         */
+        "element": ITypography['element'];
+        /**
+          * Enables text ellipsis.
+          * @default false
+         */
+        "ellipsis": ITypography['ellipsis'];
+        /**
+          * Suggested download filename.
+          * @default FILENAME
+         */
+        "filename": ITypography['filename'];
+        /**
+          * Link href when rendered as anchor.
+          * @default null
+         */
+        "href": ITypography['href'];
+        /**
+          * For attribute when rendered as a label.
+          * @default undefined
+         */
+        "htmlFor": ITypography['htmlFor'];
+        /**
+          * Enables download behavior for anchor.
+          * @default false
+         */
+        "isDownloadable": ITypography['isDownloadable'];
+        /**
+          * Marks the field as required.
+          * @default false
+         */
+        "isRequired": ITypography['isRequired'];
+        /**
+          * Max lines when ellipsis is enabled.
+          * @default 1
+         */
+        "maxLines": ITypography['maxLines'];
+        /**
+          * Typography size token.
+          * @default SIZES.M
+         */
+        "size": ITypography['size'];
+        /**
+          * Visual state (if supported by variant).
+          * @default COMPONENT_STATES.DEFAULT
+         */
+        "state": ITypography['state'];
+        /**
+          * Anchor target.
+          * @default null
+         */
+        "target": ITypography['target'];
+        /**
+          * Tooltip text (variant must support it).
+          * @default ''
+         */
+        "tooltipText": ITypography['tooltipText'];
+        /**
+          * Typography visual variant.
+          * @default VARIANT_TYPOGRAPHY.DISPLAY
+         */
+        "variant": ITypography['variant'];
+    }
+}
+export interface BdsBannerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsBannerElement;
+}
+export interface BdsButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsButtonElement;
+}
+export interface BdsCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsCheckboxElement;
+}
+export interface BdsDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsDialogElement;
+}
+export interface BdsTextFieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsTextFieldElement;
+}
+declare global {
+    interface HTMLBdsBannerElementEventMap {
+        "bdsClose": void;
+    }
+    /**
+     * 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.
+     */
+    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;
+        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 HTMLBdsBannerElementEventMap>(type: K, listener: (this: HTMLBdsBannerElement, ev: BdsBannerCustomEvent<HTMLBdsBannerElementEventMap[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 HTMLBdsBannerElement: {
+        prototype: HTMLBdsBannerElement;
+        new (): HTMLBdsBannerElement;
+    };
+    interface HTMLBdsButtonElementEventMap {
+        "bdsClick": UIEvent;
+    }
+    /**
+     * 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
+     */
+    interface HTMLBdsButtonElement extends Components.BdsButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsButtonElementEventMap>(type: K, listener: (this: HTMLBdsButtonElement, ev: BdsButtonCustomEvent<HTMLBdsButtonElementEventMap[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 HTMLBdsButtonElementEventMap>(type: K, listener: (this: HTMLBdsButtonElement, ev: BdsButtonCustomEvent<HTMLBdsButtonElementEventMap[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 HTMLBdsButtonElement: {
+        prototype: HTMLBdsButtonElement;
+        new (): HTMLBdsButtonElement;
+    };
+    interface HTMLBdsCheckboxElementEventMap {
+        "valueChange": boolean;
+        "bdsChange": CheckboxChangeDetail;
+    }
+    /**
+     * 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 HTMLBdsCheckboxElement extends Components.BdsCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsCheckboxElementEventMap>(type: K, listener: (this: HTMLBdsCheckboxElement, ev: BdsCheckboxCustomEvent<HTMLBdsCheckboxElementEventMap[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 HTMLBdsCheckboxElementEventMap>(type: K, listener: (this: HTMLBdsCheckboxElement, ev: BdsCheckboxCustomEvent<HTMLBdsCheckboxElementEventMap[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 HTMLBdsCheckboxElement: {
+        prototype: HTMLBdsCheckboxElement;
+        new (): HTMLBdsCheckboxElement;
+    };
+    interface HTMLBdsDialogElementEventMap {
+        "bdsOpen": void;
+        "bdsClose": void;
+        "bdsMaximize": void;
+    }
+    /**
+     * 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 HTMLBdsDialogElement extends Components.BdsDialog, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsDialogElementEventMap>(type: K, listener: (this: HTMLBdsDialogElement, ev: BdsDialogCustomEvent<HTMLBdsDialogElementEventMap[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 HTMLBdsDialogElementEventMap>(type: K, listener: (this: HTMLBdsDialogElement, ev: BdsDialogCustomEvent<HTMLBdsDialogElementEventMap[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 HTMLBdsDialogElement: {
+        prototype: HTMLBdsDialogElement;
+        new (): HTMLBdsDialogElement;
+    };
+    /**
+     * 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 HTMLBdsFlagElement extends Components.BdsFlag, HTMLStencilElement {
+    }
+    var HTMLBdsFlagElement: {
+        prototype: HTMLBdsFlagElement;
+        new (): HTMLBdsFlagElement;
+    };
+    /**
+     * @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 HTMLBdsPopoverElement extends Components.BdsPopover, HTMLStencilElement {
+    }
+    var HTMLBdsPopoverElement: {
+        prototype: HTMLBdsPopoverElement;
+        new (): HTMLBdsPopoverElement;
+    };
+    /**
+     * 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 HTMLBdsSpinnerElement extends Components.BdsSpinner, HTMLStencilElement {
+    }
+    var HTMLBdsSpinnerElement: {
+        prototype: HTMLBdsSpinnerElement;
+        new (): HTMLBdsSpinnerElement;
+    };
+    interface HTMLBdsTextFieldElementEventMap {
+        "valueChange": string;
+        "bdsInput": { value: string; event: InputEvent };
+        "bdsChange": { value: string; event: Event };
+        "bdsFocus": { event: FocusEvent };
+        "bdsBlur": { event: FocusEvent };
+        "bdsClear": void;
+        "bdsValidationChange": {
+    valid: boolean;
+    validity: ValidityState;
+    value: string;
+    touched: boolean;
+    dirty: boolean;
+  };
+    }
+    /**
+     * 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 HTMLBdsTextFieldElement extends Components.BdsTextField, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBdsTextFieldElementEventMap>(type: K, listener: (this: HTMLBdsTextFieldElement, ev: BdsTextFieldCustomEvent<HTMLBdsTextFieldElementEventMap[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 HTMLBdsTextFieldElementEventMap>(type: K, listener: (this: HTMLBdsTextFieldElement, ev: BdsTextFieldCustomEvent<HTMLBdsTextFieldElementEventMap[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 HTMLBdsTextFieldElement: {
+        prototype: HTMLBdsTextFieldElement;
+        new (): HTMLBdsTextFieldElement;
+    };
+    /**
+     * 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 HTMLBdsTooltipElement extends Components.BdsTooltip, HTMLStencilElement {
+    }
+    var HTMLBdsTooltipElement: {
+        prototype: HTMLBdsTooltipElement;
+        new (): HTMLBdsTooltipElement;
+    };
+    /**
+     * 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
+     * @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
+     * @property {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
+     * @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} 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 {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.
+     * @property {string} customClass - Additional custom CSS class
+     * @default 'display' - Default variant value
+     * @default 'p' - Default element value
+     * @default 'start' - Default align value
+     * @default 'md' - Default size value
+     * @default 'default' - Default state value
+     * @default false - Default isRequired 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 'download' - Default filename value
+     * @default '' - Default tooltipText value
+     */
+    interface HTMLBdsTypographyElement extends Components.BdsTypography, HTMLStencilElement {
+    }
+    var HTMLBdsTypographyElement: {
+        prototype: HTMLBdsTypographyElement;
+        new (): HTMLBdsTypographyElement;
+    };
+    interface HTMLElementTagNameMap {
+        "bds-banner": HTMLBdsBannerElement;
+        "bds-button": HTMLBdsButtonElement;
+        "bds-checkbox": HTMLBdsCheckboxElement;
+        "bds-dialog": HTMLBdsDialogElement;
+        "bds-flag": HTMLBdsFlagElement;
+        "bds-popover": HTMLBdsPopoverElement;
+        "bds-spinner": HTMLBdsSpinnerElement;
+        "bds-text-field": HTMLBdsTextFieldElement;
+        "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 };
+
+    /**
+     * 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.
+     */
+    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 closeBanner 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 '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
+     */
+    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 'small', 'medium', or 'large'. Default is 'medium'.
+          * @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'];
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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'];
+    }
+    /**
+     * 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'];
+    }
+    /**
+     * @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 {
+        /**
+          * If true, displays a close button inside the header. Requires `header` to be true.
+          * @default false
+         */
+        "closable"?: boolean;
+        /**
+          * If true, disables the popover.
+          * @default false
+         */
+        "disabled"?: IPopover['disabled'];
+        /**
+          * 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
+         */
+        "footer"?: boolean;
+        /**
+          * If true, displays the header section with icon and title slots.
+          * @default false
+         */
+        "header"?: boolean;
+        /**
+          * 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'];
+    }
+    /**
+     * 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'];
+    }
+    /**
+     * 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;
+        /**
+          * Shows a clear button that is hidden at rest and revealed when the user hovers over the field.
+          * @default false
          */
-        "closeBanner": () => Promise<void>;
+        "clearOnHover"?: boolean;
+        /**
+          * Shows a clear button when the input has a value.
+          * @default false
+         */
+        "clearable"?: boolean;
         /**
-          * Shows a close button that allows users to dismiss the banner.
+          * Enables the character counter in the footer. Requires `charCount` to be set.
           * @default false
          */
-        "enableClose": IBanner['enableClose'];
+        "counter"?: boolean;
+        /**
+          * Additional validators merged with the built-in ones.
+          * @default []
+         */
+        "customValidators"?: IFormValidator[];
         /**
-          * Unique identifier for the banner element.
+          * Sets a custom width via the `--bds-text-field-width` CSS custom property.
           * @default ''
          */
-        "idComponent": string;
+        "customWidth"?: string;
         /**
-          * Visual style variant: 'info', 'success', 'warning', or 'danger'.
-          * @default "info"
+          * Disables the input. Also toggled by `formDisabledCallback` via the mixin.
+          * @default false
          */
-        "variant": IBanner['variant'];
-    }
-    /**
-     * 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
-     * @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
-     * @property {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
-     * @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} 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 {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.
-     * @property {string} customClass - Additional custom CSS class
-     * @default 'display' - Default variant value
-     * @default 'p' - Default element value
-     * @default 'start' - Default align value
-     * @default 'md' - Default size value
-     * @default 'default' - Default state value
-     * @default false - Default isRequired 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 'download' - Default filename value
-     * @default '' - Default tooltipText value
-     */
-    interface BdsTypography {
+        "disabled"?: boolean;
         /**
-          * Text alignment.
-          * @default ALIGNMENT.START
+          * When `true`, applies the error visual state.
+          * @default false
          */
-        "align": ITypography['align'];
+        "error"?: boolean;
         /**
-          * Additional custom CSS class.
+          * Message shown below the input when `error` is `true`. Replaces `helperText`.
           * @default ''
          */
-        "customClass": string;
+        "errorMessage"?: string;
         /**
-          * HTML tag used for rendering.
-          * @default TAG_ELEMENT.P
+          * The `id` of a `<form>` element to associate this element with.
          */
-        "element": ITypography['element'];
+        "form"?: string;
         /**
-          * Enables text ellipsis.
-          * @default false
+          * Helper text shown below the input when there is no error.
+          * @default ''
          */
-        "ellipsis": ITypography['ellipsis'];
+        "helperText"?: string;
         /**
-          * Suggested download filename.
-          * @default FILENAME
+          * Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`).
+          * @default ''
          */
-        "filename": ITypography['filename'];
+        "icon"?: string;
         /**
-          * Link href when rendered as anchor.
-          * @default null
+          * Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop.
+          * @default ''
          */
-        "href": ITypography['href'];
+        "info"?: string;
         /**
-          * For attribute when rendered as a label.
-          * @default undefined
+          * Label text rendered above the input.
+          * @default ''
          */
-        "htmlFor": ITypography['htmlFor'];
+        "label"?: string;
         /**
-          * Enables download behavior for anchor.
-          * @default false
+          * Maximum character count. `0` means no maximum.
+          * @default 0
          */
-        "isDownloadable": ITypography['isDownloadable'];
+        "maxLength"?: number;
         /**
-          * Marks the field as required.
+          * Minimum character count. `0` means no minimum.
+          * @default 0
+         */
+        "minLength"?: number;
+        /**
+          * The name submitted with the form.
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onBdsBlur"?: (event: BdsTextFieldCustomEvent<{ event: FocusEvent }>) => void;
+        /**
+          * Emitted when the input loses focus after the value has changed.
+         */
+        "onBdsChange"?: (event: BdsTextFieldCustomEvent<{ value: string; event: Event }>) => void;
+        /**
+          * Emitted when the user activates the clear button.
+         */
+        "onBdsClear"?: (event: BdsTextFieldCustomEvent<void>) => void;
+        /**
+          * Emitted when the input gains focus.
+         */
+        "onBdsFocus"?: (event: BdsTextFieldCustomEvent<{ event: FocusEvent }>) => void;
+        /**
+          * Emitted on every keystroke with the current value and the originating event.
+         */
+        "onBdsInput"?: (event: BdsTextFieldCustomEvent<{ value: string; event: InputEvent }>) => void;
+        /**
+          * Emitted after each validation run with the full validity snapshot.
+         */
+        "onBdsValidationChange"?: (event: BdsTextFieldCustomEvent<{
+    valid: boolean;
+    validity: ValidityState;
+    value: string;
+    touched: boolean;
+    dirty: boolean;
+  }>) => void;
+        /**
+          * Emitted whenever the value changes. Used by framework wrappers for 2-way binding.
+         */
+        "onValueChange"?: (event: BdsTextFieldCustomEvent<string>) => void;
+        /**
+          * 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.
+          * @default ''
+         */
+        "pattern"?: string;
+        /**
+          * Native `placeholder` attribute forwarded to the inner `<input>`.
+          * @default ''
+         */
+        "placeholder"?: string;
+        /**
+          * Makes the input read-only. The value is still submitted with the form.
           * @default false
          */
-        "isRequired": ITypography['isRequired'];
+        "readOnly"?: boolean;
         /**
-          * Max lines when ellipsis is enabled.
-          * @default 1
+          * Marks the input as required for form validation.
+          * @default false
          */
-        "maxLines": ITypography['maxLines'];
+        "required"?: boolean;
         /**
-          * Typography size token.
-          * @default SIZES.M
+          * Sublabel rendered inside the input container, before the text area.
+          * @default ''
          */
-        "size": ITypography['size'];
+        "sublabel"?: string;
         /**
-          * Visual state (if supported by variant).
-          * @default STATES.DEFAULT
+          * The input type. Use `'password'` to enable the visibility toggle.
+          * @default TEXT_FIELD_TYPES.TEXT
          */
-        "state": ITypography['state'];
+        "type"?: TextFieldType;
         /**
-          * Anchor target.
-          * @default null
+          * Controls when built-in validation runs: `'blur'` | `'input'` | `'submit'` | `'change'`.
+          * @default TEXT_FIELD_VALIDATION_TIMING.BLUR
          */
-        "target": ITypography['target'];
+        "validationTiming"?: TextFieldValidationTiming;
         /**
-          * Tooltip text (variant must support it).
+          * The current value of the input.
           * @default ''
          */
-        "tooltipText": ITypography['tooltipText'];
+        "value"?: string;
         /**
-          * Typography visual variant.
-          * @default VARIANT_TYPOGRAPHY.DISPLAY
+          * Visual style of the input container. `'outline'` shows a border; `'plain'` hides it at rest.
+          * @default TEXT_FIELD_VARIANTS.OUTLINE
          */
-        "variant": ITypography['variant'];
-    }
-}
-export interface BdsBannerCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLBdsBannerElement;
-}
-declare global {
-    interface HTMLBdsBannerElementEventMap {
-        "close": void;
-    }
-    /**
-     * 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} enable-close - When true, renders a close button that triggers the close event.
-     * @attr {string} idComponent - Unique identifier for the banner element.
-     * @property {string} idComponent - Unique identifier for the banner element.
-     * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
-     * @property {boolean} enableClose - Shows a close button that allows users to dismiss the banner. Defaults to false.
-     * @fires close - Emitted when the banner is closed via the close button or `closeBanner` method.
-     * @method closeBanner - Programmatic method to close the banner and emit the `close` 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;
-        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 HTMLBdsBannerElementEventMap>(type: K, listener: (this: HTMLBdsBannerElement, ev: BdsBannerCustomEvent<HTMLBdsBannerElementEventMap[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 HTMLBdsBannerElement: {
-        prototype: HTMLBdsBannerElement;
-        new (): HTMLBdsBannerElement;
-    };
-    /**
-     * 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
-     * @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
-     * @property {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
-     * @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} 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 {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.
-     * @property {string} customClass - Additional custom CSS class
-     * @default 'display' - Default variant value
-     * @default 'p' - Default element value
-     * @default 'start' - Default align value
-     * @default 'md' - Default size value
-     * @default 'default' - Default state value
-     * @default false - Default isRequired 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 'download' - Default filename value
-     * @default '' - Default tooltipText value
-     */
-    interface HTMLBdsTypographyElement extends Components.BdsTypography, HTMLStencilElement {
-    }
-    var HTMLBdsTypographyElement: {
-        prototype: HTMLBdsTypographyElement;
-        new (): HTMLBdsTypographyElement;
-    };
-    interface HTMLElementTagNameMap {
-        "bds-banner": HTMLBdsBannerElement;
-        "bds-typography": HTMLBdsTypographyElement;
+        "variant"?: TextFieldVariant;
     }
-}
-declare namespace LocalJSX {
     /**
-     * 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} enable-close - When true, renders a close button that triggers the close event.
-     * @attr {string} idComponent - Unique identifier for the banner element.
-     * @property {string} idComponent - Unique identifier for the banner element.
-     * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
-     * @property {boolean} enableClose - Shows a close button that allows users to dismiss the banner. Defaults to false.
-     * @fires close - Emitted when the banner is closed via the close button or `closeBanner` method.
-     * @method closeBanner - Programmatic method to close the banner and emit the `close` event.
+     * 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 BdsBanner {
+    interface BdsTooltip {
         /**
-          * Shows a close button that allows users to dismiss the banner.
+          * If true, disables the tooltip.
           * @default false
          */
-        "enableClose"?: IBanner['enableClose'];
-        /**
-          * Unique identifier for the banner element.
-          * @default ''
-         */
-        "idComponent"?: string;
+        "disabled"?: ITooltip['disabled'];
         /**
-          * Emitted when the banner is closed via the close button or handleClose method.
+          * Override default options for the floating mixin. This can be overridden by passing a different object to the `floatingOptions` prop.
+          * @default {}
          */
-        "onClose"?: (event: BdsBannerCustomEvent<void>) => void;
+        "floatingOptions"?: Partial<FloatingTooltipProp>;
         /**
-          * Visual style variant: 'info', 'success', 'warning', or 'danger'.
-          * @default "info"
+          * If true, allows multiline content in the tooltip.
+          * @default false
          */
-        "variant"?: IBanner['variant'];
+        "multiline"?: ITooltip['multiline'];
     }
     /**
      * Typography component for displaying text with various styles, sizes, and interactive features.
@@ -399,7 +1939,7 @@ declare namespace LocalJSX {
         "size"?: ITypography['size'];
         /**
           * Visual state (if supported by variant).
-          * @default STATES.DEFAULT
+          * @default COMPONENT_STATES.DEFAULT
          */
         "state"?: ITypography['state'];
         /**
@@ -420,9 +1960,96 @@ declare namespace LocalJSX {
     }
 
     interface BdsBannerAttributes {
-        "idComponent": string;
         "variant": IBanner['variant'];
-        "enableClose": IBanner['enableClose'];
+        "closable": boolean;
+        "closeButtonLabel": IBanner['closeButtonLabel'];
+    }
+    interface BdsButtonAttributes {
+        "label": IButton['label'];
+        "disabled": IButton['disabled'];
+        "name": IButton['name'];
+        "type": IButton['type'];
+        "color": IButton['color'];
+        "variant": IButton['variant'];
+        "size": IButton['size'];
+        "loading": IButton['loading'];
+        "disclosure": IButton['disclosure'];
+    }
+    interface BdsCheckboxAttributes {
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "checked": boolean;
+        "indeterminate": boolean;
+        "error": boolean;
+        "value": string;
+        "label": string;
+    }
+    interface BdsDialogAttributes {
+        "active": IDialog['active'];
+        "preventClose": IDialog['preventClose'];
+        "height": IDialog['height'];
+        "width": IDialog['width'];
+        "layout": IDialog['layout'];
+        "contentPadding": IDialog['contentPadding'];
+        "backdropClose": IDialog['backdropClose'];
+        "escapeClose": IDialog['escapeClose'];
+        "size": IDialog['size'];
+        "variant": IDialog['variant'];
+        "titleDialog": IDialog['titleDialog'];
+        "maximizable": IDialog['maximizable'];
+        "closable": IDialog['closable'];
+    }
+    interface BdsFlagAttributes {
+        "alignFlag": IFlag['alignFlag'];
+        "callSign": IFlag['callSign'];
+        "country": IFlag['country'];
+        "identifier": IFlag['identifier'];
+        "label": IFlag['label'];
+        "shape": IFlag['shape'];
+        "shortName": IFlag['shortName'];
+    }
+    interface BdsPopoverAttributes {
+        "disabled": IPopover['disabled'];
+        "width": string;
+        "header": boolean;
+        "footer": boolean;
+        "closable": boolean;
+    }
+    interface BdsSpinnerAttributes {
+        "size": ISpinner['size'];
+        "label": ISpinner['label'];
+    }
+    interface BdsTextFieldAttributes {
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "value": string;
+        "error": boolean;
+        "errorMessage": string;
+        "validationTiming": TextFieldValidationTiming;
+        "type": TextFieldType;
+        "variant": TextFieldVariant;
+        "placeholder": string;
+        "readOnly": boolean;
+        "autocomplete": string;
+        "pattern": string;
+        "minLength": number;
+        "maxLength": number;
+        "label": string;
+        "sublabel": string;
+        "icon": string;
+        "helperText": string;
+        "info": string;
+        "clearable": boolean;
+        "clearOnHover": boolean;
+        "charCount": number;
+        "counter": boolean;
+        "customWidth": string;
+    }
+    interface BdsTooltipAttributes {
+        "multiline": ITooltip['multiline'];
+        "disabled": ITooltip['disabled'];
     }
     interface BdsTypographyAttributes {
         "variant": ITypography['variant'];
@@ -444,6 +2071,14 @@ declare namespace LocalJSX {
 
     interface IntrinsicElements {
         "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-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-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-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-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-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-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-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] };
     }
 }
@@ -455,15 +2090,196 @@ declare module "@stencil/core" {
              * 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} enable-close - When true, renders a close button that triggers the close event.
-             * @attr {string} idComponent - Unique identifier for the banner element.
-             * @property {string} idComponent - Unique identifier for the banner element.
+             * @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} enableClose - Shows a close button that allows users to dismiss the banner. Defaults to false.
-             * @fires close - Emitted when the banner is closed via the close button or `closeBanner` method.
-             * @method closeBanner - Programmatic method to close the banner and emit the `close` event.
+             * @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.
              */
             "bds-banner": LocalJSX.IntrinsicElements["bds-banner"] & JSXBase.HTMLAttributes<HTMLBdsBannerElement>;
+            /**
+             * 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
+             */
+            "bds-button": LocalJSX.IntrinsicElements["bds-button"] & JSXBase.HTMLAttributes<HTMLBdsButtonElement>;
+            /**
+             * 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 }`.
+             */
+            "bds-checkbox": LocalJSX.IntrinsicElements["bds-checkbox"] & JSXBase.HTMLAttributes<HTMLBdsCheckboxElement>;
+            /**
+             * 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.
+             */
+            "bds-dialog": LocalJSX.IntrinsicElements["bds-dialog"] & JSXBase.HTMLAttributes<HTMLBdsDialogElement>;
+            /**
+             * 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 `[]`.
+             */
+            "bds-flag": LocalJSX.IntrinsicElements["bds-flag"] & JSXBase.HTMLAttributes<HTMLBdsFlagElement>;
+            /**
+             * @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.
+             */
+            "bds-popover": LocalJSX.IntrinsicElements["bds-popover"] & JSXBase.HTMLAttributes<HTMLBdsPopoverElement>;
+            /**
+             * 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.
+             */
+            "bds-spinner": LocalJSX.IntrinsicElements["bds-spinner"] & JSXBase.HTMLAttributes<HTMLBdsSpinnerElement>;
+            /**
+             * 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.
+             */
+            "bds-text-field": LocalJSX.IntrinsicElements["bds-text-field"] & JSXBase.HTMLAttributes<HTMLBdsTextFieldElement>;
+            /**
+             * 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.
+             */
+            "bds-tooltip": LocalJSX.IntrinsicElements["bds-tooltip"] & JSXBase.HTMLAttributes<HTMLBdsTooltipElement>;
             /**
              * 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.