@beeq/angular 1.8.0-beta.15 → 1.8.0-beta.17

package/directives/components.d.ts

@@ -4,32 +4,32 @@ import type { TSliderValue as IBqSliderTSliderValue } from '@beeq/core';
 import * as i0 from "@angular/core";
 export declare class BqAccordion {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqAccordionElement;
     /**
-   * The appearance style of accordion
+   * The appearance style of the Accordion
    */
-    appearance: Components.BqAccordion['appearance'];
+    set appearance(_: Components.BqAccordion['appearance']);
     /**
-   * If true accordion is disabled
+   * If true, the Accordion is disabled
    */
-    disabled: Components.BqAccordion['disabled'];
+    set disabled(_: Components.BqAccordion['disabled']);
     /**
-   * If true accordion is expanded
+   * If true, the Accordion is expanded
    */
-    expanded: Components.BqAccordion['expanded'];
+    set expanded(_: Components.BqAccordion['expanded']);
     /**
    * Animation is set through JS when the browser does not support CSS calc-size()
-If true, the accordion animation, will be disabled. No animation will be applied.
+If true, the Accordion animation, will be disabled. No animation will be applied.
    */
-    noAnimation: Components.BqAccordion['noAnimation'];
+    set noAnimation(_: Components.BqAccordion['noAnimation']);
     /**
-   * If true accordion expand icon is rotate 180deg when expanded
+   * If true, the Accordion expand icon is rotate 180deg when expanded
    */
-    rotate: Components.BqAccordion['rotate'];
+    set rotate(_: Components.BqAccordion['rotate']);
     /**
-   * The size of accordion
+   * The size of the Accordion
    */
-    size: Components.BqAccordion['size'];
+    set size(_: Components.BqAccordion['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqAccordion, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqAccordion, "bq-accordion", never, { "appearance": { "alias": "appearance"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "noAnimation": { "alias": "noAnimation"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -59,31 +59,35 @@ export declare interface BqAccordion extends Components.BqAccordion {
      * Handler to be called after the accordion is closed
      */
     bqAfterClose: EventEmitter<CustomEvent<HTMLBqAccordionElement>>;
+    /**
+     * Handler to be called when the accordion is clicked
+     */
+    bqClick: EventEmitter<CustomEvent<HTMLBqAccordionElement>>;
 }
 export declare class BqAccordionGroup {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqAccordionGroupElement;
     /**
    * The appearance style of accordion to be applied to all accordions
    */
-    appearance: Components.BqAccordionGroup['appearance'];
+    set appearance(_: Components.BqAccordionGroup['appearance']);
     /**
    * If true all accordions are expanded
    */
-    expandAll: Components.BqAccordionGroup['expandAll'];
+    set expandAll(_: Components.BqAccordionGroup['expandAll']);
     /**
    * Animation is set through JS when the browser does not support CSS calc-size()
 If true, the accordion animation, will be disabled. No animation will be applied.
    */
-    noAnimation: Components.BqAccordionGroup['noAnimation'];
+    set noAnimation(_: Components.BqAccordionGroup['noAnimation']);
     /**
    * If true multiple accordions can be expanded at the same time
    */
-    multiple: Components.BqAccordionGroup['multiple'];
+    set multiple(_: Components.BqAccordionGroup['multiple']);
     /**
    * The size of accordion to be applied to all accordions
    */
-    size: Components.BqAccordionGroup['size'];
+    set size(_: Components.BqAccordionGroup['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqAccordionGroup, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqAccordionGroup, "bq-accordion-group", never, { "appearance": { "alias": "appearance"; "required": false; }; "expandAll": { "alias": "expandAll"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "noAnimation": { "alias": "noAnimation"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -92,39 +96,39 @@ export declare interface BqAccordionGroup extends Components.BqAccordionGroup {
 }
 export declare class BqAlert {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqAlertElement;
     /**
    * If true, the alert will automatically hide after the specified amount of time
    */
-    autoDismiss: Components.BqAlert['autoDismiss'];
+    set autoDismiss(_: Components.BqAlert['autoDismiss']);
     /**
    * The corner radius of the alert component
    */
-    border: Components.BqAlert['border'];
+    set border(_: Components.BqAlert['border']);
     /**
    * If true, the close button at the top right of the alert won't be shown
    */
-    disableClose: Components.BqAlert['disableClose'];
+    set disableClose(_: Components.BqAlert['disableClose']);
     /**
    * If true, the alert icon won't be shown
    */
-    hideIcon: Components.BqAlert['hideIcon'];
+    set hideIcon(_: Components.BqAlert['hideIcon']);
     /**
    * If true, the alert will be shown
    */
-    open: Components.BqAlert['open'];
+    set open(_: Components.BqAlert['open']);
     /**
    * The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss="true"`
    */
-    time: Components.BqAlert['time'];
+    set time(_: Components.BqAlert['time']);
     /**
    * Type of Alert
    */
-    type: Components.BqAlert['type'];
+    set type(_: Components.BqAlert['type']);
     /**
    * If true, the alert component will remain fixed at the top of the page, occupying the full viewport
    */
-    sticky: Components.BqAlert['sticky'];
+    set sticky(_: Components.BqAlert['sticky']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqAlert, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqAlert, "bq-alert", never, { "autoDismiss": { "alias": "autoDismiss"; "required": false; }; "border": { "alias": "border"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "time": { "alias": "time"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -149,31 +153,31 @@ export declare interface BqAlert extends Components.BqAlert {
 }
 export declare class BqAvatar {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqAvatarElement;
     /**
    * Alternate text for the avatar image if the image cannot be displayed
    */
-    altText: Components.BqAvatar['altText'];
+    set altText(_: Components.BqAvatar['altText']);
     /**
    * The image source to load on the avatar (this can be also a base64 encoded image)
    */
-    image: Components.BqAvatar['image'];
+    set image(_: Components.BqAvatar['image']);
     /**
    * A text to use for describing the avatar on assistive devices
    */
-    label: Components.BqAvatar['label'];
+    set label(_: Components.BqAvatar['label']);
     /**
    * The text to display on avatar
    */
-    initials: Components.BqAvatar['initials'];
+    set initials(_: Components.BqAvatar['initials']);
     /**
    * The shape of the avatar
    */
-    shape: Components.BqAvatar['shape'];
+    set shape(_: Components.BqAvatar['shape']);
     /**
    * The size of the avatar
    */
-    size: Components.BqAvatar['size'];
+    set size(_: Components.BqAvatar['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqAvatar, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqAvatar, "bq-avatar", never, { "altText": { "alias": "altText"; "required": false; }; "image": { "alias": "image"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "label": { "alias": "label"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -182,19 +186,19 @@ export declare interface BqAvatar extends Components.BqAvatar {
 }
 export declare class BqBadge {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqBadgeElement;
     /**
    * Badge background color. The value should be a valid value of the palette color
    */
-    backgroundColor: Components.BqBadge['backgroundColor'];
+    set backgroundColor(_: Components.BqBadge['backgroundColor']);
     /**
    * Badge number color. The value should be a valid value of the palette color
    */
-    textColor: Components.BqBadge['textColor'];
+    set textColor(_: Components.BqBadge['textColor']);
     /**
    * The size of the badge. Relevant if badge has no content.
    */
-    size: Components.BqBadge['size'];
+    set size(_: Components.BqBadge['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqBadge, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqBadge, "bq-badge", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -203,56 +207,35 @@ export declare interface BqBadge extends Components.BqBadge {
 }
 export declare class BqBreadcrumb {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqBreadcrumbElement;
     /**
    * The `aria-label` attribute to describe the type of navigation
    */
-    ariaLabel: Components.BqBreadcrumb['ariaLabel'];
+    set label(_: Components.BqBreadcrumb['label']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqBreadcrumb, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqBreadcrumb, "bq-breadcrumb", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqBreadcrumb, "bq-breadcrumb", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqBreadcrumb extends Components.BqBreadcrumb {
-    /**
-     * Handler to be called when `bq-breadcrumb-item` item loses focus.
-     */
-    bqBreadcrumbBlur: EventEmitter<CustomEvent<HTMLBqBreadcrumbItemElement>>;
-    /**
-     * Handler to be called when `bq-breadcrumb-item` item gets focus.
-     */
-    bqBreadcrumbFocus: EventEmitter<CustomEvent<HTMLBqBreadcrumbItemElement>>;
-    /**
-     * Handler to be called when `bq-breadcrumb-item` is selected (on click/enter press).
-     */
-    bqBreadcrumbClick: EventEmitter<CustomEvent<HTMLBqBreadcrumbItemElement>>;
 }
 export declare class BqBreadcrumbItem {
     protected z: NgZone;
-    protected el: HTMLElement;
-    /**
-   * The aria-label that corresponds to the full title of the destination page.
-This won't be shown in the page, but it will be used by screen readers and other assistive devices.
-   */
-    ariaLabel: Components.BqBreadcrumbItem['ariaLabel'];
-    /**
-   * If true, the item is the last element inside breadcrumb
-   */
-    isLastItem: Components.BqBreadcrumbItem['isLastItem'];
+    protected el: HTMLBqBreadcrumbItemElement;
     /**
    * If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.
    */
-    href: Components.BqBreadcrumbItem['href'];
+    set href(_: Components.BqBreadcrumbItem['href']);
     /**
    * Where to display the link in the browser context. Relevant only if `href` is set.
    */
-    target: Components.BqBreadcrumbItem['target'];
+    set target(_: Components.BqBreadcrumbItem['target']);
     /**
    * Where to display the link in the browser context. Relevant only if `href` is set.
    */
-    rel: Components.BqBreadcrumbItem['rel'];
+    set rel(_: Components.BqBreadcrumbItem['rel']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqBreadcrumbItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqBreadcrumbItem, "bq-breadcrumb-item", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "href": { "alias": "href"; "required": false; }; "isLastItem": { "alias": "isLastItem"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqBreadcrumbItem, "bq-breadcrumb-item", never, { "href": { "alias": "href"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqBreadcrumbItem extends Components.BqBreadcrumbItem {
     /**
@@ -270,57 +253,57 @@ export declare interface BqBreadcrumbItem extends Components.BqBreadcrumbItem {
 }
 export declare class BqButton {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqButtonElement;
     /**
    * The appearance style to apply to the button
    */
-    appearance: Components.BqButton['appearance'];
+    set appearance(_: Components.BqButton['appearance']);
     /**
    * If `true`, it will make the button fit to its parent width.
    */
-    block: Components.BqButton['block'];
+    set block(_: Components.BqButton['block']);
     /**
    * The corner radius of the button
    */
-    border: Components.BqButton['border'];
+    set border(_: Components.BqButton['border']);
     /**
    * If true, the button will be disabled (no interaction allowed)
    */
-    disabled: Components.BqButton['disabled'];
+    set disabled(_: Components.BqButton['disabled']);
     /**
    * Tells the browser to treat the linked URL as a download. Only used when `href` is set.
 Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
    */
-    download: Components.BqButton['download'];
+    set download(_: Components.BqButton['download']);
     /**
    * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
    */
-    href: Components.BqButton['href'];
+    set href(_: Components.BqButton['href']);
     /**
    * It determinate how the content should be aligned
    */
-    justifyContent: Components.BqButton['justifyContent'];
+    set justifyContent(_: Components.BqButton['justifyContent']);
     /**
    * If `true` it will display the button in a loading state
    */
-    loading: Components.BqButton['loading'];
+    set loading(_: Components.BqButton['loading']);
     /**
    * The size of the button
    */
-    size: Components.BqButton['size'];
+    set size(_: Components.BqButton['size']);
     /**
    * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)
 Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
    */
-    target: Components.BqButton['target'];
+    set target(_: Components.BqButton['target']);
     /**
    * The default behavior of the button
    */
-    type: Components.BqButton['type'];
+    set type(_: Components.BqButton['type']);
     /**
    * The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`)
    */
-    variant: Components.BqButton['variant'];
+    set variant(_: Components.BqButton['variant']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqButton, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqButton, "bq-button", never, { "appearance": { "alias": "appearance"; "required": false; }; "block": { "alias": "block"; "required": false; }; "border": { "alias": "border"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "download": { "alias": "download"; "required": false; }; "href": { "alias": "href"; "required": false; }; "justifyContent": { "alias": "justifyContent"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "size": { "alias": "size"; "required": false; }; "target": { "alias": "target"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -341,15 +324,15 @@ export declare interface BqButton extends Components.BqButton {
 }
 export declare class BqCard {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqCardElement;
     /**
    * Type of card component
    */
-    type: Components.BqCard['type'];
+    set type(_: Components.BqCard['type']);
     /**
    * The corner radius of the card component
    */
-    border: Components.BqCard['border'];
+    set border(_: Components.BqCard['border']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqCard, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqCard, "bq-card", never, { "border": { "alias": "border"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -358,43 +341,43 @@ export declare interface BqCard extends Components.BqCard {
 }
 export declare class BqCheckbox {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqCheckboxElement;
     /**
    * If true checkbox displays background on hover
    */
-    backgroundOnHover: Components.BqCheckbox['backgroundOnHover'];
+    set backgroundOnHover(_: Components.BqCheckbox['backgroundOnHover']);
     /**
    * The form ID that the checkbox is associated with
    */
-    formId: Components.BqCheckbox['formId'];
+    set formId(_: Components.BqCheckbox['formId']);
     /**
    * The native form validation message
    */
-    formValidationMessage: Components.BqCheckbox['formValidationMessage'];
+    set formValidationMessage(_: Components.BqCheckbox['formValidationMessage']);
     /**
    * If true checkbox is checked
    */
-    checked: Components.BqCheckbox['checked'];
+    set checked(_: Components.BqCheckbox['checked']);
     /**
    * If true checkbox is disabled
    */
-    disabled: Components.BqCheckbox['disabled'];
+    set disabled(_: Components.BqCheckbox['disabled']);
     /**
    * A state that is neither checked nor unchecked
    */
-    indeterminate: Components.BqCheckbox['indeterminate'];
+    set indeterminate(_: Components.BqCheckbox['indeterminate']);
     /**
    * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
    */
-    name: Components.BqCheckbox['name'];
+    set name(_: Components.BqCheckbox['name']);
     /**
    * If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted
    */
-    required: Components.BqCheckbox['required'];
+    set required(_: Components.BqCheckbox['required']);
     /**
    * A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.
    */
-    value: Components.BqCheckbox['value'];
+    set value(_: Components.BqCheckbox['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqCheckbox, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqCheckbox, "bq-checkbox", never, { "backgroundOnHover": { "alias": "backgroundOnHover"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -417,112 +400,112 @@ export declare interface BqCheckbox extends Components.BqCheckbox {
 }
 export declare class BqDatePicker {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqDatePickerElement;
     /**
    * If `true`, the Date picker input will be focused on component render
    */
-    autofocus: Components.BqDatePicker['autofocus'];
+    set autofocus(_: Components.BqDatePicker['autofocus']);
     /**
    * The clear button aria label
    */
-    clearButtonLabel: Components.BqDatePicker['clearButtonLabel'];
+    set clearButtonLabel(_: Components.BqDatePicker['clearButtonLabel']);
     /**
    * If `true`, the clear button won't be displayed
    */
-    disableClear: Components.BqDatePicker['disableClear'];
+    set disableClear(_: Components.BqDatePicker['disableClear']);
     /**
    * Indicates whether the Date picker input is disabled or not.
 If `true`, the Date picker is disabled and cannot be interacted with.
    */
-    disabled: Components.BqDatePicker['disabled'];
+    set disabled(_: Components.BqDatePicker['disabled']);
     /**
    * Represents the distance (gutter or margin) between the Date picker panel and the input element.
    */
-    distance: Components.BqDatePicker['distance'];
+    set distance(_: Components.BqDatePicker['distance']);
     /**
    * The first day of the week, where Sunday is 0, Monday is 1, etc
    */
-    firstDayOfWeek: Components.BqDatePicker['firstDayOfWeek'];
+    set firstDayOfWeek(_: Components.BqDatePicker['firstDayOfWeek']);
     /**
    * The options to use when formatting the displayed value.
 Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
    */
-    formatOptions: Components.BqDatePicker['formatOptions'];
+    set formatOptions(_: Components.BqDatePicker['formatOptions']);
     /**
    * The ID of the form that the Date picker input belongs to.
    */
-    form: Components.BqDatePicker['form'];
+    set form(_: Components.BqDatePicker['form']);
     /**
    * A function that takes a date and returns true if the date should not be selectable
    */
-    isDateDisallowed: Components.BqDatePicker['isDateDisallowed'];
+    set isDateDisallowed(_: Components.BqDatePicker['isDateDisallowed']);
     /**
    * The locale for formatting dates. If not set, will use the browser's locale.
 Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
    */
-    locale: Components.BqDatePicker['locale'];
+    set locale(_: Components.BqDatePicker['locale']);
     /**
    * The latest date that can be selected
    */
-    max: Components.BqDatePicker['max'];
+    set max(_: Components.BqDatePicker['max']);
     /**
    * The earliest date that can be selected
    */
-    min: Components.BqDatePicker['min'];
+    set min(_: Components.BqDatePicker['min']);
     /**
    * Number of months to show when range is `true`
    */
-    months: Components.BqDatePicker['months'];
+    set months(_: Components.BqDatePicker['months']);
     /**
    * Specifies how the next/previous buttons should navigate the calendar.
 - single: The buttons will navigate by a single month at a time.
 - months: The buttons will navigate by the number of months displayed per view.
    */
-    monthsPerView: Components.BqDatePicker['monthsPerView'];
+    set monthsPerView(_: Components.BqDatePicker['monthsPerView']);
     /**
    * The Date picker input name.
    */
-    name: Components.BqDatePicker['name'];
+    set name(_: Components.BqDatePicker['name']);
     /**
    * If `true`, the Date picker panel will be visible.
    */
-    open: Components.BqDatePicker['open'];
+    set open(_: Components.BqDatePicker['open']);
     /**
    * When set, it will override the height of the Date picker panel.
    */
-    panelHeight: Components.BqDatePicker['panelHeight'];
+    set panelHeight(_: Components.BqDatePicker['panelHeight']);
     /**
    * The Date picker input placeholder text value
    */
-    placeholder: Components.BqDatePicker['placeholder'];
+    set placeholder(_: Components.BqDatePicker['placeholder']);
     /**
    * Position of the Date picker panel
    */
-    placement: Components.BqDatePicker['placement'];
+    set placement(_: Components.BqDatePicker['placement']);
     /**
    * Indicates whether or not the Date picker input is required to be filled out before submitting the form.
    */
-    required: Components.BqDatePicker['required'];
+    set required(_: Components.BqDatePicker['required']);
     /**
    * Represents the skidding between the Date picker panel and the input element.
    */
-    skidding: Components.BqDatePicker['skidding'];
+    set skidding(_: Components.BqDatePicker['skidding']);
     /**
    * Whether to show days outside the month
    */
-    showOutsideDays: Components.BqDatePicker['showOutsideDays'];
+    set showOutsideDays(_: Components.BqDatePicker['showOutsideDays']);
     /**
    * Defines the strategy to position the Date picker panel
    */
-    strategy: Components.BqDatePicker['strategy'];
+    set strategy(_: Components.BqDatePicker['strategy']);
     /**
    * The date that is tentatively selected e.g. the start of a range selection
    */
-    tentative: Components.BqDatePicker['tentative'];
+    set tentative(_: Components.BqDatePicker['tentative']);
     /**
    * It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection
    */
-    type: Components.BqDatePicker['type'];
+    set type(_: Components.BqDatePicker['type']);
     /**
    * The validation status of the Select input. @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values:
 - `'none'`: No validation status is set.
@@ -530,12 +513,12 @@ Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globa
 - `'warning'`: The input has a validation warning.
 - `'success'`: The input has passed validation.
    */
-    validationStatus: Components.BqDatePicker['validationStatus'];
+    set validationStatus(_: Components.BqDatePicker['validationStatus']);
     /**
    * The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
 All dates are expected in ISO-8601 format (YYYY-MM-DD).
    */
-    value: Components.BqDatePicker['value'];
+    set value(_: Components.BqDatePicker['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDatePicker, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqDatePicker, "bq-date-picker", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "isDateDisallowed": { "alias": "isDateDisallowed"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "months": { "alias": "months"; "required": false; }; "monthsPerView": { "alias": "monthsPerView"; "required": false; }; "name": { "alias": "name"; "required": false; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "tentative": { "alias": "tentative"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -564,39 +547,39 @@ export declare interface BqDatePicker extends Components.BqDatePicker {
 }
 export declare class BqDialog {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqDialogElement;
     /**
-   * Corder radius of the dialog component
+   * Border radius of the dialog component
    */
-    border: Components.BqDialog['border'];
+    set border(_: Components.BqDialog['border']);
     /**
    * If true, the backdrop overlay won't be shown when the dialog opens
    */
-    disableBackdrop: Components.BqDialog['disableBackdrop'];
+    set disableBackdrop(_: Components.BqDialog['disableBackdrop']);
     /**
    * If true, the dialog will not close when the [Esc] key is press
    */
-    disableCloseEscKeydown: Components.BqDialog['disableCloseEscKeydown'];
+    set disableCloseEscKeydown(_: Components.BqDialog['disableCloseEscKeydown']);
     /**
    * If true, the dialog will not close when clicking on the backdrop overlay
    */
-    disableCloseClickOutside: Components.BqDialog['disableCloseClickOutside'];
+    set disableCloseClickOutside(_: Components.BqDialog['disableCloseClickOutside']);
     /**
    * The appearance of footer
    */
-    footerAppearance: Components.BqDialog['footerAppearance'];
+    set footerAppearance(_: Components.BqDialog['footerAppearance']);
     /**
    * If true, it hides the close button
    */
-    hideCloseButton: Components.BqDialog['hideCloseButton'];
+    set hideCloseButton(_: Components.BqDialog['hideCloseButton']);
     /**
    * If true, the dialog will be shown as open
    */
-    open: Components.BqDialog['open'];
+    set open(_: Components.BqDialog['open']);
     /**
    * The size of the dialog
    */
-    size: Components.BqDialog['size'];
+    set size(_: Components.BqDialog['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDialog, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqDialog, "bq-dialog", never, { "border": { "alias": "border"; "required": false; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; }; "disableCloseClickOutside": { "alias": "disableCloseClickOutside"; "required": false; }; "disableCloseEscKeydown": { "alias": "disableCloseEscKeydown"; "required": false; }; "footerAppearance": { "alias": "footerAppearance"; "required": false; }; "hideCloseButton": { "alias": "hideCloseButton"; "required": false; }; "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -625,43 +608,43 @@ export declare interface BqDialog extends Components.BqDialog {
 }
 export declare class BqDivider {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqDividerElement;
     /**
    * If true, the divider has a dashed pattern
    */
-    dashed: Components.BqDivider['dashed'];
+    set dashed(_: Components.BqDivider['dashed']);
     /**
    * The default orientation of the divider
    */
-    orientation: Components.BqDivider['orientation'];
+    set orientation(_: Components.BqDivider['orientation']);
     /**
    * Set the stroke color of the divider. The value should be a valid value of the palette color
    */
-    strokeColor: Components.BqDivider['strokeColor'];
+    set strokeColor(_: Components.BqDivider['strokeColor']);
     /**
    * Set the alignment of the title on the main axis of the divider (horizontal / vertical)
    */
-    titleAlignment: Components.BqDivider['titleAlignment'];
+    set titleAlignment(_: Components.BqDivider['titleAlignment']);
     /**
    * Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed
    */
-    strokeDashWidth: Components.BqDivider['strokeDashWidth'];
+    set strokeDashWidth(_: Components.BqDivider['strokeDashWidth']);
     /**
    * Set the gap of the divider's stroke. This is applicable when the stroke is dashed
    */
-    strokeDashGap: Components.BqDivider['strokeDashGap'];
+    set strokeDashGap(_: Components.BqDivider['strokeDashGap']);
     /**
    * Set the thickness of the divider's stroke. Value expressed in px
    */
-    strokeThickness: Components.BqDivider['strokeThickness'];
+    set strokeThickness(_: Components.BqDivider['strokeThickness']);
     /**
    * Set the min width of the divider's stroke when text is not centered. Value expressed in px
    */
-    strokeBasis: Components.BqDivider['strokeBasis'];
+    set strokeBasis(_: Components.BqDivider['strokeBasis']);
     /**
    * Set the line of the divider's stroke. This is applicable when the stroke is dashed
    */
-    strokeLinecap: Components.BqDivider['strokeLinecap'];
+    set strokeLinecap(_: Components.BqDivider['strokeLinecap']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDivider, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqDivider, "bq-divider", never, { "dashed": { "alias": "dashed"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "strokeBasis": { "alias": "strokeBasis"; "required": false; }; "strokeColor": { "alias": "strokeColor"; "required": false; }; "strokeDashGap": { "alias": "strokeDashGap"; "required": false; }; "strokeDashWidth": { "alias": "strokeDashWidth"; "required": false; }; "strokeLinecap": { "alias": "strokeLinecap"; "required": false; }; "strokeThickness": { "alias": "strokeThickness"; "required": false; }; "titleAlignment": { "alias": "titleAlignment"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -670,31 +653,31 @@ export declare interface BqDivider extends Components.BqDivider {
 }
 export declare class BqDrawer {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqDrawerElement;
     /**
    * If true, the backdrop overlay will be shown when the drawer opens
    */
-    enableBackdrop: Components.BqDrawer['enableBackdrop'];
+    set enableBackdrop(_: Components.BqDrawer['enableBackdrop']);
     /**
    * If true, the drawer will not close when clicking outside the panel
    */
-    closeOnClickOutside: Components.BqDrawer['closeOnClickOutside'];
+    set closeOnClickOutside(_: Components.BqDrawer['closeOnClickOutside']);
     /**
    * If true, the dialog will not close when the [Esc] key is pressed
    */
-    closeOnEsc: Components.BqDrawer['closeOnEsc'];
+    set closeOnEsc(_: Components.BqDrawer['closeOnEsc']);
     /**
    * If true, the drawer component will be shown
    */
-    open: Components.BqDrawer['open'];
+    set open(_: Components.BqDrawer['open']);
     /**
    *  @deprecated Defines the position of the drawer
    */
-    placement: Components.BqDrawer['placement'];
+    set placement(_: Components.BqDrawer['placement']);
     /**
    * Defines the position of the drawer
    */
-    position: Components.BqDrawer['position'];
+    set position(_: Components.BqDrawer['position']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDrawer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqDrawer, "bq-drawer", never, { "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "closeOnEsc": { "alias": "closeOnEsc"; "required": false; }; "enableBackdrop": { "alias": "enableBackdrop"; "required": false; }; "open": { "alias": "open"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -719,43 +702,43 @@ export declare interface BqDrawer extends Components.BqDrawer {
 }
 export declare class BqDropdown {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqDropdownElement;
     /**
    * If true, the dropdown panel will be visible and won't be shown.
    */
-    disabled: Components.BqDropdown['disabled'];
+    set disabled(_: Components.BqDropdown['disabled']);
     /**
    * Represents the distance (gutter or margin) between the panel and the trigger element.
    */
-    distance: Components.BqDropdown['distance'];
+    set distance(_: Components.BqDropdown['distance']);
     /**
    * If true, the panel will remain open after a selection is made.
    */
-    keepOpenOnSelect: Components.BqDropdown['keepOpenOnSelect'];
+    set keepOpenOnSelect(_: Components.BqDropdown['keepOpenOnSelect']);
     /**
    * Position of the panel
    */
-    placement: Components.BqDropdown['placement'];
+    set placement(_: Components.BqDropdown['placement']);
     /**
    * If true, the panel will be visible.
    */
-    open: Components.BqDropdown['open'];
+    set open(_: Components.BqDropdown['open']);
     /**
    * When set, it will override the height of the dropdown panel
    */
-    panelHeight: Components.BqDropdown['panelHeight'];
+    set panelHeight(_: Components.BqDropdown['panelHeight']);
     /**
    * Whether the panel should have the same width as the trigger element
    */
-    sameWidth: Components.BqDropdown['sameWidth'];
+    set sameWidth(_: Components.BqDropdown['sameWidth']);
     /**
    * Represents the skidding between the panel and the trigger element.
    */
-    skidding: Components.BqDropdown['skidding'];
+    set skidding(_: Components.BqDropdown['skidding']);
     /**
    * Defines the strategy to position the panel
    */
-    strategy: Components.BqDropdown['strategy'];
+    set strategy(_: Components.BqDropdown['strategy']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqDropdown, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqDropdown, "bq-dropdown", never, { "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "keepOpenOnSelect": { "alias": "keepOpenOnSelect"; "required": false; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "sameWidth": { "alias": "sameWidth"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -770,11 +753,11 @@ export declare interface BqDropdown extends Components.BqDropdown {
 }
 export declare class BqEmptyState {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqEmptyStateElement;
     /**
    * The size of the empty state component
    */
-    size: Components.BqEmptyState['size'];
+    set size(_: Components.BqEmptyState['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqEmptyState, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqEmptyState, "bq-empty-state", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -783,31 +766,31 @@ export declare interface BqEmptyState extends Components.BqEmptyState {
 }
 export declare class BqIcon {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqIconElement;
     /**
    * Label for the icon, used for accessibility
    */
-    label: Components.BqIcon['label'];
+    set label(_: Components.BqIcon['label']);
     /**
    * Set the stroke color of the SVG. The value should be a valid value of the palette color
    */
-    color: Components.BqIcon['color'];
+    set color(_: Components.BqIcon['color']);
     /**
    * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
    */
-    name: Components.BqIcon['name'];
+    set name(_: Components.BqIcon['name']);
     /**
    * Set the size of the SVG
    */
-    size: Components.BqIcon['size'];
+    set size(_: Components.BqIcon['size']);
     /**
    * Set the source of the SVG. If the source is set, the name property will be ignored
    */
-    src: Components.BqIcon['src'];
+    set src(_: Components.BqIcon['src']);
     /**
    *  @deprecated It set the icon weight/style
    */
-    weight: Components.BqIcon['weight'];
+    set weight(_: Components.BqIcon['weight']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqIcon, "bq-icon", never, { "color": { "alias": "color"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "src": { "alias": "src"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -820,106 +803,110 @@ export declare interface BqIcon extends Components.BqIcon {
 }
 export declare class BqInput {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqInputElement;
     /**
    * Controls whether or not the input field should be capitalized and how.
 Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
    */
-    autocapitalize: Components.BqInput['autocapitalize'];
+    set autocapitalize(_: Components.BqInput['autocapitalize']);
     /**
    * Specifies whether or not the input field should have autocomplete enabled.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
    */
-    autocomplete: Components.BqInput['autocomplete'];
+    set autocomplete(_: Components.BqInput['autocomplete']);
     /**
    * Controls whether or not the input field should have autocorrect enabled.
 Possible values are 'on' and 'off'.
    */
-    autocorrect: Components.BqInput['autocorrect'];
+    set autocorrect(_: Components.BqInput['autocorrect']);
     /**
    * If true, the input will be focused on component render
    */
-    autofocus: Components.BqInput['autofocus'];
+    set autofocus(_: Components.BqInput['autofocus']);
     /**
    * The clear button aria label
    */
-    clearButtonLabel: Components.BqInput['clearButtonLabel'];
+    set clearButtonLabel(_: Components.BqInput['clearButtonLabel']);
     /**
    * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
 A value of 0 means no debouncing will occur.
    */
-    debounceTime: Components.BqInput['debounceTime'];
+    set debounceTime(_: Components.BqInput['debounceTime']);
     /**
    * Indicates whether the input is disabled or not.
 If `true`, the input is disabled and cannot be interacted with.
    */
-    disabled: Components.BqInput['disabled'];
+    set disabled(_: Components.BqInput['disabled']);
     /**
    * If true, the clear button won't be displayed
    */
-    disableClear: Components.BqInput['disableClear'];
+    set disableClear(_: Components.BqInput['disableClear']);
     /**
    * The ID of the form that the input field belongs to.
    */
-    form: Components.BqInput['form'];
+    set form(_: Components.BqInput['form']);
+    /**
+   * The native form validation message (mandatory if `required` is set)
+   */
+    set formValidationMessage(_: Components.BqInput['formValidationMessage']);
     /**
    * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.
 This allows a browser to display an appropriate virtual keyboard while editing.
 Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.
    */
-    inputmode: Components.BqInput['inputmode'];
+    set inputmode(_: Components.BqInput['inputmode']);
     /**
    * The maximum value that the input field can accept.
 Only applies to date and number input types.
    */
-    max: Components.BqInput['max'];
+    set max(_: Components.BqInput['max']);
     /**
    * The maximum number of characters that the input field can accept.
    */
-    maxlength: Components.BqInput['maxlength'];
+    set maxlength(_: Components.BqInput['maxlength']);
     /**
    * The minimum value that the input field can accept.
 Only applies to date and number input types.
    */
-    min: Components.BqInput['min'];
+    set min(_: Components.BqInput['min']);
     /**
    * The minimum number of characters that the input field can accept.
    */
-    minlength: Components.BqInput['minlength'];
+    set minlength(_: Components.BqInput['minlength']);
     /**
    * The input field name.
    */
-    name: Components.BqInput['name'];
+    set name(_: Components.BqInput['name']);
     /**
    * Specifies a regular expression the form control's value should match.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
    */
-    pattern: Components.BqInput['pattern'];
+    set pattern(_: Components.BqInput['pattern']);
     /**
    * The input placeholder text value
    */
-    placeholder: Components.BqInput['placeholder'];
+    set placeholder(_: Components.BqInput['placeholder']);
     /**
    * If true, the input field cannot be modified.
    */
-    readonly: Components.BqInput['readonly'];
+    set readonly(_: Components.BqInput['readonly']);
     /**
    * Indicates whether or not the input field is required to be filled out before submitting the form.
    */
-    required: Components.BqInput['required'];
+    set required(_: Components.BqInput['required']);
     /**
    * A number that specifies the granularity that the value must adhere to.
 Valid for date, month, week, time, datetime-local, number, and range.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
    */
-    step: Components.BqInput['step'];
+    set step(_: Components.BqInput['step']);
     /**
    * The type attribute specifies the type of input field to display.
 Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
    */
-    type: Components.BqInput['type'];
+    set type(_: Components.BqInput['type']);
     /**
    * The validation status of the input. @remarks This property is used to indicate the validation status of the input. It can be set to one of the following values:
 - `'none'`: No validation status is set.
@@ -927,14 +914,14 @@ See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
 - `'warning'`: The input has a validation warning.
 - `'success'`: The input has passed validation.
    */
-    validationStatus: Components.BqInput['validationStatus'];
+    set validationStatus(_: Components.BqInput['validationStatus']);
     /**
    * The input value, it can be used to reset the input to a previous value
    */
-    value: Components.BqInput['value'];
+    set value(_: Components.BqInput['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqInput, "bq-input", never, { "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "name": { "alias": "name"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqInput, "bq-input", never, { "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "name": { "alias": "name"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "type": { "alias": "type"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqInput extends Components.BqInput {
     /**
@@ -968,35 +955,35 @@ export declare interface BqInput extends Components.BqInput {
 }
 export declare class BqNotification {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqNotificationElement;
     /**
    * If true, the notification will automatically hide after the specified amount of time
    */
-    autoDismiss: Components.BqNotification['autoDismiss'];
+    set autoDismiss(_: Components.BqNotification['autoDismiss']);
     /**
    * The corder radius of the notification component
    */
-    border: Components.BqNotification['border'];
+    set border(_: Components.BqNotification['border']);
     /**
    * If true, the close button at the top right of the notification won't be shown
    */
-    disableClose: Components.BqNotification['disableClose'];
+    set disableClose(_: Components.BqNotification['disableClose']);
     /**
    * If true, the notification icon won't be shown
    */
-    hideIcon: Components.BqNotification['hideIcon'];
+    set hideIcon(_: Components.BqNotification['hideIcon']);
     /**
    * If true, the notification will be shown
    */
-    open: Components.BqNotification['open'];
+    set open(_: Components.BqNotification['open']);
     /**
    * The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"`
    */
-    time: Components.BqNotification['time'];
+    set time(_: Components.BqNotification['time']);
     /**
    * Type of Notification
    */
-    type: Components.BqNotification['type'];
+    set type(_: Components.BqNotification['type']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqNotification, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqNotification, "bq-notification", never, { "autoDismiss": { "alias": "autoDismiss"; "required": false; }; "border": { "alias": "border"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "open": { "alias": "open"; "required": false; }; "time": { "alias": "time"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1021,23 +1008,23 @@ export declare interface BqNotification extends Components.BqNotification {
 }
 export declare class BqOption {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqOptionElement;
     /**
    * If true, the option is hidden.
    */
-    hidden: Components.BqOption['hidden'];
+    set hidden(_: Components.BqOption['hidden']);
     /**
    * If true, the option is disabled.
    */
-    disabled: Components.BqOption['disabled'];
+    set disabled(_: Components.BqOption['disabled']);
     /**
    * A string representing the value of the option. Can be used to identify the item
    */
-    value: Components.BqOption['value'];
+    set value(_: Components.BqOption['value']);
     /**
    * If true, the option is selected and active.
    */
-    selected: Components.BqOption['selected'];
+    set selected(_: Components.BqOption['selected']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqOption, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqOption, "bq-option", never, { "disabled": { "alias": "disabled"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1062,7 +1049,7 @@ export declare interface BqOption extends Components.BqOption {
 }
 export declare class BqOptionGroup {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqOptionGroupElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqOptionGroup, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqOptionGroup, "bq-option-group", never, {}, {}, never, ["*"], false, never>;
@@ -1071,11 +1058,11 @@ export declare interface BqOptionGroup extends Components.BqOptionGroup {
 }
 export declare class BqOptionList {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqOptionListElement;
     /**
    * Aria label for the list.
    */
-    ariaLabel: Components.BqOptionList['ariaLabel'];
+    set ariaLabel(_: Components.BqOptionList['ariaLabel']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqOptionList, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqOptionList, "bq-option-list", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1091,7 +1078,7 @@ export declare interface BqOptionList extends Components.BqOptionList {
 }
 export declare class BqPageTitle {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqPageTitleElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqPageTitle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqPageTitle, "bq-page-title", never, {}, {}, never, ["*"], false, never>;
@@ -1100,31 +1087,31 @@ export declare interface BqPageTitle extends Components.BqPageTitle {
 }
 export declare class BqPanel {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqPanelElement;
     /**
    * Represents the distance (gutter or margin) between the panel and the trigger element.
    */
-    distance: Components.BqPanel['distance'];
+    set distance(_: Components.BqPanel['distance']);
     /**
    * Position of the panel
    */
-    placement: Components.BqPanel['placement'];
+    set placement(_: Components.BqPanel['placement']);
     /**
    * If true, the panel will be visible.
    */
-    open: Components.BqPanel['open'];
+    set open(_: Components.BqPanel['open']);
     /**
    * Whether the panel should have the same width as the trigger element
    */
-    sameWidth: Components.BqPanel['sameWidth'];
+    set sameWidth(_: Components.BqPanel['sameWidth']);
     /**
    * Represents the skidding between the panel and the trigger element.
    */
-    skidding: Components.BqPanel['skidding'];
+    set skidding(_: Components.BqPanel['skidding']);
     /**
    * Defines the strategy to position the panel
    */
-    strategy: Components.BqPanel['strategy'];
+    set strategy(_: Components.BqPanel['strategy']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqPanel, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqPanel, "bq-panel", never, { "distance": { "alias": "distance"; "required": false; }; "open": { "alias": "open"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "sameWidth": { "alias": "sameWidth"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1133,35 +1120,35 @@ export declare interface BqPanel extends Components.BqPanel {
 }
 export declare class BqProgress {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqProgressElement;
     /**
-   * If `true` the indeterminate state of progress bar is enabled
+   * It will set the border style of the progress bar
    */
-    indeterminate: Components.BqProgress['indeterminate'];
+    set borderShape(_: Components.BqProgress['borderShape']);
     /**
-   * A number representing the current value of the progress bar
+   * If `true`, a tooltip will be shown displaying the progress value
    */
-    value: Components.BqProgress['value'];
+    set enableTooltip(_: Components.BqProgress['enableTooltip']);
     /**
-   * Progress bar thickness
+   * If `true` the indeterminate state of progress bar is enabled
    */
-    thickness: Components.BqProgress['thickness'];
+    set indeterminate(_: Components.BqProgress['indeterminate']);
     /**
-   * Progress type
+   * If `true, a label text showing the value (in percentage) will be shown
    */
-    type: Components.BqProgress['type'];
+    set label(_: Components.BqProgress['label']);
     /**
-   * It will set the border style of the progress bar
+   * Progress bar thickness
    */
-    borderShape: Components.BqProgress['borderShape'];
+    set thickness(_: Components.BqProgress['thickness']);
     /**
-   * If `true`, a label text showing the value (in percentage) will be shown
+   * Progress type
    */
-    label: Components.BqProgress['label'];
+    set type(_: Components.BqProgress['type']);
     /**
-   * If `true`, a tooltip will be shown displaying the progress value
+   * A number representing the current value of the progress bar
    */
-    enableTooltip: Components.BqProgress['enableTooltip'];
+    set value(_: Components.BqProgress['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqProgress, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqProgress, "bq-progress", never, { "borderShape": { "alias": "borderShape"; "required": false; }; "enableTooltip": { "alias": "enableTooltip"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "label": { "alias": "label"; "required": false; }; "thickness": { "alias": "thickness"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1170,35 +1157,35 @@ export declare interface BqProgress extends Components.BqProgress {
 }
 export declare class BqRadio {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqRadioElement;
     /**
    * If true radio input is checked
    */
-    checked: Components.BqRadio['checked'];
+    set checked(_: Components.BqRadio['checked']);
     /**
    * If true radio input is disabled
    */
-    disabled: Components.BqRadio['disabled'];
+    set disabled(_: Components.BqRadio['disabled']);
     /**
    * If true radio displays background on hover
    */
-    backgroundOnHover: Components.BqRadio['backgroundOnHover'];
+    set backgroundOnHover(_: Components.BqRadio['backgroundOnHover']);
     /**
    * The form ID that the radio input is associated with
    */
-    formId: Components.BqRadio['formId'];
+    set formId(_: Components.BqRadio['formId']);
     /**
    * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
    */
-    name: Components.BqRadio['name'];
+    set name(_: Components.BqRadio['name']);
     /**
    * If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted
    */
-    required: Components.BqRadio['required'];
+    set required(_: Components.BqRadio['required']);
     /**
    * A string representing the value of the radio.
    */
-    value: Components.BqRadio['value'];
+    set value(_: Components.BqRadio['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqRadio, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqRadio, "bq-radio", never, { "backgroundOnHover": { "alias": "backgroundOnHover"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1223,38 +1210,46 @@ export declare interface BqRadio extends Components.BqRadio {
 }
 export declare class BqRadioGroup {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqRadioGroupElement;
     /**
    * If true, all radio inputs in the group will display a background on hover
    */
-    backgroundOnHover: Components.BqRadioGroup['backgroundOnHover'];
-    /**
-   * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
-   */
-    name: Components.BqRadioGroup['name'];
+    set backgroundOnHover(_: Components.BqRadioGroup['backgroundOnHover']);
     /**
-   * A string representing the value of the radio.
+   * A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change
    */
-    value: Components.BqRadioGroup['value'];
+    set debounceTime(_: Components.BqRadioGroup['debounceTime']);
     /**
    * If true radio inputs are disabled
    */
-    disabled: Components.BqRadioGroup['disabled'];
+    set disabled(_: Components.BqRadioGroup['disabled']);
     /**
    * If true displays fieldset
    */
-    fieldset: Components.BqRadioGroup['fieldset'];
+    set fieldset(_: Components.BqRadioGroup['fieldset']);
+    /**
+   * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
+   */
+    set name(_: Components.BqRadioGroup['name']);
     /**
    * The display orientation of the radio inputs
    */
-    orientation: Components.BqRadioGroup['orientation'];
+    set orientation(_: Components.BqRadioGroup['orientation']);
     /**
-   * A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change
+   * If true, the radio group is required
+   */
+    set required(_: Components.BqRadioGroup['required']);
+    /**
+   * The native form validation message when the radio group is required
    */
-    debounceTime: Components.BqRadioGroup['debounceTime'];
+    set requiredValidationMessage(_: Components.BqRadioGroup['requiredValidationMessage']);
+    /**
+   * A string representing the value of the radio.
+   */
+    set value(_: Components.BqRadioGroup['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqRadioGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqRadioGroup, "bq-radio-group", never, { "backgroundOnHover": { "alias": "backgroundOnHover"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fieldset": { "alias": "fieldset"; "required": false; }; "name": { "alias": "name"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqRadioGroup, "bq-radio-group", never, { "backgroundOnHover": { "alias": "backgroundOnHover"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fieldset": { "alias": "fieldset"; "required": false; }; "name": { "alias": "name"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredValidationMessage": { "alias": "requiredValidationMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqRadioGroup extends Components.BqRadioGroup {
     /**
@@ -1267,89 +1262,89 @@ export declare interface BqRadioGroup extends Components.BqRadioGroup {
 }
 export declare class BqSelect {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqSelectElement;
     /**
    * If true, the Select input will be focused on component render
    */
-    autofocus: Components.BqSelect['autofocus'];
+    set autofocus(_: Components.BqSelect['autofocus']);
     /**
    * The clear button aria label
    */
-    clearButtonLabel: Components.BqSelect['clearButtonLabel'];
+    set clearButtonLabel(_: Components.BqSelect['clearButtonLabel']);
     /**
    * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
 A value of 0 means no debouncing will occur.
    */
-    debounceTime: Components.BqSelect['debounceTime'];
+    set debounceTime(_: Components.BqSelect['debounceTime']);
     /**
    * Indicates whether the Select input is disabled or not.
 If `true`, the Select is disabled and cannot be interacted with.
    */
-    disabled: Components.BqSelect['disabled'];
+    set disabled(_: Components.BqSelect['disabled']);
     /**
    * If true, the clear button won't be displayed
    */
-    disableClear: Components.BqSelect['disableClear'];
+    set disableClear(_: Components.BqSelect['disableClear']);
     /**
    * Represents the distance (gutter or margin) between the Select panel and the input element.
    */
-    distance: Components.BqSelect['distance'];
+    set distance(_: Components.BqSelect['distance']);
     /**
    * The ID of the form that the Select input belongs to.
    */
-    form: Components.BqSelect['form'];
+    set form(_: Components.BqSelect['form']);
     /**
    * If true, the Select panel will remain open after a selection is made.
    */
-    keepOpenOnSelect: Components.BqSelect['keepOpenOnSelect'];
+    set keepOpenOnSelect(_: Components.BqSelect['keepOpenOnSelect']);
     /**
    * The Select input name.
    */
-    name: Components.BqSelect['name'];
+    set name(_: Components.BqSelect['name']);
     /**
    * The maximum number of tags to display when multiple selection is enabled
    */
-    maxTagsVisible: Components.BqSelect['maxTagsVisible'];
+    set maxTagsVisible(_: Components.BqSelect['maxTagsVisible']);
     /**
    * If true, the Select input will allow multiple selections.
    */
-    multiple: Components.BqSelect['multiple'];
+    set multiple(_: Components.BqSelect['multiple']);
     /**
    * If true, the Select panel will be visible.
    */
-    open: Components.BqSelect['open'];
+    set open(_: Components.BqSelect['open']);
     /**
    * When set, it will override the height of the Select panel.
    */
-    panelHeight: Components.BqSelect['panelHeight'];
+    set panelHeight(_: Components.BqSelect['panelHeight']);
     /**
    * The Select input placeholder text value
    */
-    placeholder: Components.BqSelect['placeholder'];
+    set placeholder(_: Components.BqSelect['placeholder']);
     /**
    * Position of the Select panel
    */
-    placement: Components.BqSelect['placement'];
+    set placement(_: Components.BqSelect['placement']);
     /**
    * If true, the list of options cannot be filtered (searching won't be available)
    */
-    readonly: Components.BqSelect['readonly'];
+    set readonly(_: Components.BqSelect['readonly']);
     /**
    * Indicates whether or not the Select input is required to be filled out before submitting the form.
    */
-    required: Components.BqSelect['required'];
+    set required(_: Components.BqSelect['required']);
     /**
    * Whether the panel should have the Select same width as the input element
    */
-    sameWidth: Components.BqSelect['sameWidth'];
+    set sameWidth(_: Components.BqSelect['sameWidth']);
     /**
    * Represents the skidding between the Select panel and the input element.
    */
-    skidding: Components.BqSelect['skidding'];
+    set skidding(_: Components.BqSelect['skidding']);
     /**
    * Defines the strategy to position the Select panel
    */
-    strategy: Components.BqSelect['strategy'];
+    set strategy(_: Components.BqSelect['strategy']);
     /**
    * The validation status of the Select input. @remarks This property is used to indicate the validation status of the select input. It can be set to one of the following values:
 - `'none'`: No validation status is set.
@@ -1357,11 +1352,11 @@ If `true`, the Select is disabled and cannot be interacted with.
 - `'warning'`: The input has a validation warning.
 - `'success'`: The input has passed validation.
    */
-    validationStatus: Components.BqSelect['validationStatus'];
+    set validationStatus(_: Components.BqSelect['validationStatus']);
     /**
    * The select input value, it can be used to reset the field to a previous value
    */
-    value: Components.BqSelect['value'];
+    set value(_: Components.BqSelect['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSelect, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqSelect, "bq-select", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "form": { "alias": "form"; "required": false; }; "keepOpenOnSelect": { "alias": "keepOpenOnSelect"; "required": false; }; "maxTagsVisible": { "alias": "maxTagsVisible"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "name": { "alias": "name"; "required": false; }; "open": { "alias": "open"; "required": false; }; "panelHeight": { "alias": "panelHeight"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "sameWidth": { "alias": "sameWidth"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1389,19 +1384,19 @@ export declare interface BqSelect extends Components.BqSelect {
 }
 export declare class BqSideMenu {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqSideMenuElement;
     /**
    * It sets a predefined appearance of the side menu
    */
-    appearance: Components.BqSideMenu['appearance'];
+    set appearance(_: Components.BqSideMenu['appearance']);
     /**
    * If true, the container will reduce its width
    */
-    collapse: Components.BqSideMenu['collapse'];
+    set collapse(_: Components.BqSideMenu['collapse']);
     /**
    * It sets the size of the navigation menu items
    */
-    size: Components.BqSideMenu['size'];
+    set size(_: Components.BqSideMenu['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSideMenu, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqSideMenu, "bq-side-menu", never, { "appearance": { "alias": "appearance"; "required": false; }; "collapse": { "alias": "collapse"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1420,19 +1415,19 @@ export declare interface BqSideMenu extends Components.BqSideMenu {
 }
 export declare class BqSideMenuItem {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqSideMenuItemElement;
     /**
    * If true, the menu item will be shown as active/selected.
    */
-    active: Components.BqSideMenuItem['active'];
+    set active(_: Components.BqSideMenuItem['active']);
     /**
    * If true, the item label and suffix will be hidden and the with will be reduce according to its parent
    */
-    collapse: Components.BqSideMenuItem['collapse'];
+    set collapse(_: Components.BqSideMenuItem['collapse']);
     /**
    * If true, the menu item will be disabled (no interaction allowed)
    */
-    disabled: Components.BqSideMenuItem['disabled'];
+    set disabled(_: Components.BqSideMenuItem['disabled']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSideMenuItem, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqSideMenuItem, "bq-side-menu-item", never, { "active": { "alias": "active"; "required": false; }; "collapse": { "alias": "collapse"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1453,58 +1448,62 @@ export declare interface BqSideMenuItem extends Components.BqSideMenuItem {
 }
 export declare class BqSlider {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqSliderElement;
     /**
    * The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change.
    */
-    debounceTime: Components.BqSlider['debounceTime'];
+    set debounceTime(_: Components.BqSlider['debounceTime']);
     /**
    * If `true` the slider is disabled.
    */
-    disabled: Components.BqSlider['disabled'];
+    set disabled(_: Components.BqSlider['disabled']);
     /**
    * If `true` it will show the value label on a side of the slider track area
    */
-    enableValueIndicator: Components.BqSlider['enableValueIndicator'];
+    set enableValueIndicator(_: Components.BqSlider['enableValueIndicator']);
     /**
    * A number representing the amount to remain between the minimum and maximum values (only for range type).
    */
-    gap: Components.BqSlider['gap'];
+    set gap(_: Components.BqSlider['gap']);
     /**
    * A number representing the max value of the slider.
    */
-    max: Components.BqSlider['max'];
+    set max(_: Components.BqSlider['max']);
     /**
    * A number representing the min value of the slider.
    */
-    min: Components.BqSlider['min'];
+    set min(_: Components.BqSlider['min']);
+    /**
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   */
+    set name(_: Components.BqSlider['name']);
     /**
    * A number representing the step of the slider.
 ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.
    */
-    step: Components.BqSlider['step'];
+    set step(_: Components.BqSlider['step']);
     /**
    * It defines the type of slider to display
    */
-    type: Components.BqSlider['type'];
+    set type(_: Components.BqSlider['type']);
     /**
    * The value of the slider.
 - If the slider type is `single`, the value is a number.
 - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).
    */
-    value: Components.BqSlider['value'];
+    set value(_: Components.BqSlider['value']);
     /**
    * If `true`, a tooltip will be shown displaying the progress value
    */
-    enableTooltip: Components.BqSlider['enableTooltip'];
+    set enableTooltip(_: Components.BqSlider['enableTooltip']);
     /**
    * If `true`, a tooltip will always display the progress value.
 It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.
    */
-    tooltipAlwaysVisible: Components.BqSlider['tooltipAlwaysVisible'];
+    set tooltipAlwaysVisible(_: Components.BqSlider['tooltipAlwaysVisible']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSlider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqSlider, "bq-slider", never, { "debounceTime": { "alias": "debounceTime"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "enableTooltip": { "alias": "enableTooltip"; "required": false; }; "enableValueIndicator": { "alias": "enableValueIndicator"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "tooltipAlwaysVisible": { "alias": "tooltipAlwaysVisible"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqSlider, "bq-slider", never, { "debounceTime": { "alias": "debounceTime"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "enableTooltip": { "alias": "enableTooltip"; "required": false; }; "enableValueIndicator": { "alias": "enableValueIndicator"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "name": { "alias": "name"; "required": false; }; "step": { "alias": "step"; "required": false; }; "tooltipAlwaysVisible": { "alias": "tooltipAlwaysVisible"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqSlider extends Components.BqSlider {
     /**
@@ -1525,19 +1524,19 @@ export declare interface BqSlider extends Components.BqSlider {
 }
 export declare class BqSpinner {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqSpinnerElement;
     /**
    * If `false`, the animation on the icon element will be stopped
    */
-    animation: Components.BqSpinner['animation'];
+    set animation(_: Components.BqSpinner['animation']);
     /**
    * It defines the position of the label text
    */
-    textPosition: Components.BqSpinner['textPosition'];
+    set textPosition(_: Components.BqSpinner['textPosition']);
     /**
    * It defines the size of the icon element displayed
    */
-    size: Components.BqSpinner['size'];
+    set size(_: Components.BqSpinner['size']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSpinner, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqSpinner, "bq-spinner", never, { "animation": { "alias": "animation"; "required": false; }; "size": { "alias": "size"; "required": false; }; "textPosition": { "alias": "textPosition"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1546,11 +1545,11 @@ export declare interface BqSpinner extends Components.BqSpinner {
 }
 export declare class BqStatus {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqStatusElement;
     /**
    * It defines the type of status to display
    */
-    type: Components.BqStatus['type'];
+    set type(_: Components.BqStatus['type']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqStatus, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqStatus, "bq-status", never, { "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1559,19 +1558,19 @@ export declare interface BqStatus extends Components.BqStatus {
 }
 export declare class BqStepItem {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqStepItemElement;
     /**
    * It defines prefix size
    */
-    size: Components.BqStepItem['size'];
+    set size(_: Components.BqStepItem['size']);
     /**
    * It defines step item appearance based on its status
    */
-    status: Components.BqStepItem['status'];
+    set status(_: Components.BqStepItem['status']);
     /**
    * It defines the step item type used
    */
-    type: Components.BqStepItem['type'];
+    set type(_: Components.BqStepItem['type']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqStepItem, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqStepItem, "bq-step-item", never, { "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1587,19 +1586,19 @@ export declare interface BqStepItem extends Components.BqStepItem {
 }
 export declare class BqSteps {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqStepsElement;
     /**
    * The color of the line that connects the steps. It should be a valid declarative color token.
    */
-    dividerColor: Components.BqSteps['dividerColor'];
+    set dividerColor(_: Components.BqSteps['dividerColor']);
     /**
    * The size of the steps
    */
-    size: Components.BqSteps['size'];
+    set size(_: Components.BqSteps['size']);
     /**
    * The type of prefix element to use on the step items
    */
-    type: Components.BqSteps['type'];
+    set type(_: Components.BqSteps['type']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSteps, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqSteps, "bq-steps", never, { "dividerColor": { "alias": "dividerColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1608,51 +1607,55 @@ export declare interface BqSteps extends Components.BqSteps {
 }
 export declare class BqSwitch {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqSwitchElement;
     /**
    * If true, a background will be displayed on hover
    */
-    backgroundOnHover: Components.BqSwitch['backgroundOnHover'];
+    set backgroundOnHover(_: Components.BqSwitch['backgroundOnHover']);
     /**
    * It indicates whether if the switch is `ON` by default (when the page loads)
    */
-    checked: Components.BqSwitch['checked'];
+    set checked(_: Components.BqSwitch['checked']);
     /**
    * If true, the switch control will be disabled and no interaction will be allowed
    */
-    disabled: Components.BqSwitch['disabled'];
+    set disabled(_: Components.BqSwitch['disabled']);
+    /**
+   * The native form validation message
+   */
+    set formValidationMessage(_: Components.BqSwitch['formValidationMessage']);
     /**
    * If true, the component will take the full width space available on the parent container
    */
-    fullWidth: Components.BqSwitch['fullWidth'];
+    set fullWidth(_: Components.BqSwitch['fullWidth']);
     /**
    * It indicates how to to display the on/off marks inside the control, with icons or none (default)
    */
-    innerLabel: Components.BqSwitch['innerLabel'];
+    set innerLabel(_: Components.BqSwitch['innerLabel']);
     /**
    * It defines how to distribute the space between and around the control and the label text
 (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
    */
-    justifyContent: Components.BqSwitch['justifyContent'];
+    set justifyContent(_: Components.BqSwitch['justifyContent']);
     /**
    * Name of the form control. Submitted with the form as part of a name/value pair
    */
-    name: Components.BqSwitch['name'];
+    set name(_: Components.BqSwitch['name']);
     /**
    * If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted
    */
-    required: Components.BqSwitch['required'];
+    set required(_: Components.BqSwitch['required']);
     /**
    * If true, the order of the control and the label text will be changed
    */
-    reverseOrder: Components.BqSwitch['reverseOrder'];
+    set reverseOrder(_: Components.BqSwitch['reverseOrder']);
     /**
    * The input control's value, submitted as a name/value pair with form data.
    */
-    value: Components.BqSwitch['value'];
+    set value(_: Components.BqSwitch['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqSwitch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqSwitch, "bq-switch", never, { "backgroundOnHover": { "alias": "backgroundOnHover"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "innerLabel": { "alias": "innerLabel"; "required": false; }; "justifyContent": { "alias": "justifyContent"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "reverseOrder": { "alias": "reverseOrder"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqSwitch, "bq-switch", never, { "backgroundOnHover": { "alias": "backgroundOnHover"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "innerLabel": { "alias": "innerLabel"; "required": false; }; "justifyContent": { "alias": "justifyContent"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "reverseOrder": { "alias": "reverseOrder"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqSwitch extends Components.BqSwitch {
     /**
@@ -1672,35 +1675,35 @@ export declare interface BqSwitch extends Components.BqSwitch {
 }
 export declare class BqTab {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqTabElement;
     /**
    * If true tab is active
    */
-    active: Components.BqTab['active'];
+    set active(_: Components.BqTab['active']);
     /**
-   * If true tab is disabled
+   * The tab panel id that the tab controls
    */
-    disabled: Components.BqTab['disabled'];
+    set controls(_: Components.BqTab['controls']);
     /**
-   * The size of the tab
+   * If true tab is disabled
    */
-    size: Components.BqTab['size'];
+    set disabled(_: Components.BqTab['disabled']);
     /**
    * The direction that tab should be render
    */
-    orientation: Components.BqTab['orientation'];
+    set orientation(_: Components.BqTab['orientation']);
     /**
    * The placement that tab should be render
    */
-    placement: Components.BqTab['placement'];
+    set placement(_: Components.BqTab['placement']);
     /**
-   * The id of the tab
+   * The size of the tab
    */
-    tabId: Components.BqTab['tabId'];
+    set size(_: Components.BqTab['size']);
     /**
-   * The tab panel id that the tab controls
+   * The id of the tab
    */
-    controls: Components.BqTab['controls'];
+    set tabId(_: Components.BqTab['tabId']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqTab, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqTab, "bq-tab", never, { "active": { "alias": "active"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1725,31 +1728,31 @@ export declare interface BqTab extends Components.BqTab {
 }
 export declare class BqTabGroup {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqTabGroupElement;
     /**
-   * A string representing the id of the selected tab.
+   * A number representing the delay value applied to bqChange event handler
    */
-    value: Components.BqTabGroup['value'];
+    set debounceTime(_: Components.BqTabGroup['debounceTime']);
     /**
-   * The size of the tab
+   * If true, the underline divider below the tabs won't be shown
    */
-    size: Components.BqTabGroup['size'];
+    set disableDivider(_: Components.BqTabGroup['disableDivider']);
     /**
    * The direction that tab should be render
    */
-    orientation: Components.BqTabGroup['orientation'];
+    set orientation(_: Components.BqTabGroup['orientation']);
     /**
    * The placement that tab should be render
    */
-    placement: Components.BqTabGroup['placement'];
+    set placement(_: Components.BqTabGroup['placement']);
     /**
-   * A number representing the delay value applied to bqChange event handler
+   * The size of the tab
    */
-    debounceTime: Components.BqTabGroup['debounceTime'];
+    set size(_: Components.BqTabGroup['size']);
     /**
-   * If true, the underline divider below the tabs won't be shown
+   * A string representing the id of the selected tab.
    */
-    disableDivider: Components.BqTabGroup['disableDivider'];
+    set value(_: Components.BqTabGroup['value']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqTabGroup, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqTabGroup, "bq-tab-group", never, { "debounceTime": { "alias": "debounceTime"; "required": false; }; "disableDivider": { "alias": "disableDivider"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1765,43 +1768,43 @@ export declare interface BqTabGroup extends Components.BqTabGroup {
 }
 export declare class BqTag {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqTagElement;
     /**
    * The corner radius of the Tag (will override size's predefined border)
    */
-    border: Components.BqTag['border'];
+    set border(_: Components.BqTag['border']);
     /**
    * If true, the Tag can be clickable
    */
-    clickable: Components.BqTag['clickable'];
+    set clickable(_: Components.BqTag['clickable']);
     /**
    * The color style of the Tag
    */
-    color: Components.BqTag['color'];
+    set color(_: Components.BqTag['color']);
     /**
    * If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
    */
-    disabled: Components.BqTag['disabled'];
+    set disabled(_: Components.BqTag['disabled']);
     /**
    * If true, the Tag component will hidden (only if removable = `true`)
    */
-    hidden: Components.BqTag['hidden'];
+    set hidden(_: Components.BqTag['hidden']);
     /**
    * If true, the Tag component can be removed
    */
-    removable: Components.BqTag['removable'];
+    set removable(_: Components.BqTag['removable']);
     /**
    * If true, the Tag is selected (only if clickable = `true`)
    */
-    selected: Components.BqTag['selected'];
+    set selected(_: Components.BqTag['selected']);
     /**
    * The size of the Tag component
    */
-    size: Components.BqTag['size'];
+    set size(_: Components.BqTag['size']);
     /**
    * The variant of Tag to apply on top of the variant
    */
-    variant: Components.BqTag['variant'];
+    set variant(_: Components.BqTag['variant']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqTag, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqTag, "bq-tag", never, { "border": { "alias": "border"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1830,78 +1833,82 @@ export declare interface BqTag extends Components.BqTag {
 }
 export declare class BqTextarea {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqTextareaElement;
     /**
    * Controls whether or not the textarea field should be capitalized and how.
 Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
    */
-    autocapitalize: Components.BqTextarea['autocapitalize'];
+    set autocapitalize(_: Components.BqTextarea['autocapitalize']);
     /**
    * Specifies whether or not the textarea field should have autocomplete enabled.
 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
    */
-    autocomplete: Components.BqTextarea['autocomplete'];
+    set autocomplete(_: Components.BqTextarea['autocomplete']);
     /**
    * Controls whether or not the textarea field should have autocorrect enabled.
 Possible values are 'on' and 'off'.
    */
-    autocorrect: Components.BqTextarea['autocorrect'];
+    set autocorrect(_: Components.BqTextarea['autocorrect']);
     /**
    * If true, the textarea will be focused on component render
    */
-    autofocus: Components.BqTextarea['autofocus'];
+    set autofocus(_: Components.BqTextarea['autofocus']);
     /**
    * If `true`, the textarea will automatically grow and shrink to fit its contents.
 If `false`, the textarea will have a fixed height specified by the `rows` property.
    */
-    autoGrow: Components.BqTextarea['autoGrow'];
+    set autoGrow(_: Components.BqTextarea['autoGrow']);
     /**
    * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.
 A value of 0 means no debouncing will occur.
    */
-    debounceTime: Components.BqTextarea['debounceTime'];
+    set debounceTime(_: Components.BqTextarea['debounceTime']);
     /**
    * If `true`, the user cannot interact with the textarea.
    */
-    disabled: Components.BqTextarea['disabled'];
+    set disabled(_: Components.BqTextarea['disabled']);
     /**
    * If `true`, it will block the user's ability to resize the textarea.
    */
-    disableResize: Components.BqTextarea['disableResize'];
+    set disableResize(_: Components.BqTextarea['disableResize']);
     /**
    * The ID of the form that the textarea field belongs to.
    */
-    form: Components.BqTextarea['form'];
+    set form(_: Components.BqTextarea['form']);
+    /**
+   * The native form validation message
+   */
+    set formValidationMessage(_: Components.BqTextarea['formValidationMessage']);
     /**
    * The maximum number of characters that can be entered into the textarea (`0`: no limit).
 When enabled, a character counter will be shown underneath the textarea.
    */
-    maxlength: Components.BqTextarea['maxlength'];
+    set maxlength(_: Components.BqTextarea['maxlength']);
     /**
    * The name of the textarea element.
    */
-    name: Components.BqTextarea['name'];
+    set name(_: Components.BqTextarea['name']);
     /**
    * The placeholder text to show when there is no value.
    */
-    placeholder: Components.BqTextarea['placeholder'];
+    set placeholder(_: Components.BqTextarea['placeholder']);
     /**
    * If true, the textarea field cannot be modified.
    */
-    readonly: Components.BqTextarea['readonly'];
+    set readonly(_: Components.BqTextarea['readonly']);
     /**
    * Indicates whether or not the textarea field is required to be filled out before submitting the form.
    */
-    required: Components.BqTextarea['required'];
+    set required(_: Components.BqTextarea['required']);
     /**
    * The number of visible text lines for the control. It must be a positive integer.
    */
-    rows: Components.BqTextarea['rows'];
+    set rows(_: Components.BqTextarea['rows']);
     /**
    * If true, the textarea content may be checked for spelling errors.
    */
-    spellcheck: Components.BqTextarea['spellcheck'];
+    set spellcheck(_: Components.BqTextarea['spellcheck']);
     /**
    * The validation status of the textarea. @remarks This property is used to indicate the validation status of the textarea. It can be set to one of the following values:
 - `'none'`: No validation status is set.
@@ -1909,18 +1916,18 @@ When enabled, a character counter will be shown underneath the textarea.
 - `'warning'`: The textarea has a validation warning.
 - `'success'`: The textarea has passed validation.
    */
-    validationStatus: Components.BqTextarea['validationStatus'];
+    set validationStatus(_: Components.BqTextarea['validationStatus']);
     /**
    * The value of the textarea. It can be used to reset the textarea to a previous value.
    */
-    value: Components.BqTextarea['value'];
+    set value(_: Components.BqTextarea['value']);
     /**
    * Specifies how the text in a text area is to be wrapped when submitted in a form
    */
-    wrap: Components.BqTextarea['wrap'];
+    set wrap(_: Components.BqTextarea['wrap']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqTextarea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BqTextarea, "bq-textarea", never, { "autoGrow": { "alias": "autoGrow"; "required": false; }; "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disableResize": { "alias": "disableResize"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BqTextarea, "bq-textarea", never, { "autoGrow": { "alias": "autoGrow"; "required": false; }; "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disableResize": { "alias": "disableResize"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formValidationMessage": { "alias": "formValidationMessage"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "validationStatus": { "alias": "validationStatus"; "required": false; }; "value": { "alias": "value"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface BqTextarea extends Components.BqTextarea {
     /**
@@ -1954,31 +1961,31 @@ export declare interface BqTextarea extends Components.BqTextarea {
 }
 export declare class BqToast {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqToastElement;
     /**
    * The corder radius of the toast component
    */
-    border: Components.BqToast['border'];
+    set border(_: Components.BqToast['border']);
     /**
    * Type of toast
    */
-    type: Components.BqToast['type'];
+    set type(_: Components.BqToast['type']);
     /**
    * Placement of toast
    */
-    placement: Components.BqToast['placement'];
+    set placement(_: Components.BqToast['placement']);
     /**
    * If true will hide toast icon
    */
-    hideIcon: Components.BqToast['hideIcon'];
+    set hideIcon(_: Components.BqToast['hideIcon']);
     /**
    * If true, the toast will be shown
    */
-    open: Components.BqToast['open'];
+    set open(_: Components.BqToast['open']);
     /**
    * The length of time, in milliseconds, after which the toast will close itself
    */
-    time: Components.BqToast['time'];
+    set time(_: Components.BqToast['time']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqToast, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqToast, "bq-toast", never, { "border": { "alias": "border"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "open": { "alias": "open"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "time": { "alias": "time"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
@@ -1995,34 +2002,34 @@ export declare interface BqToast extends Components.BqToast {
 }
 export declare class BqTooltip {
     protected z: NgZone;
-    protected el: HTMLElement;
+    protected el: HTMLBqTooltipElement;
     /**
    * If true, the tooltip will always be visible
    */
-    alwaysVisible: Components.BqTooltip['alwaysVisible'];
+    set alwaysVisible(_: Components.BqTooltip['alwaysVisible']);
     /**
    * Distance between trigger element and tooltip
    */
-    distance: Components.BqTooltip['distance'];
+    set distance(_: Components.BqTooltip['distance']);
     /**
    * If true, the arrow on the tooltip content won't be shown
    */
-    hideArrow: Components.BqTooltip['hideArrow'];
-    placement: Components.BqTooltip['placement'];
+    set hideArrow(_: Components.BqTooltip['hideArrow']);
+    set placement(_: Components.BqTooltip['placement']);
     /**
    * Whether the tooltip should have the same width as the trigger element
 (applicable only for content shorter than the trigger element)
    */
-    sameWidth: Components.BqTooltip['sameWidth'];
+    set sameWidth(_: Components.BqTooltip['sameWidth']);
     /**
    * Set the action when the tooltip should be displayed, on hover (default) or click
    */
-    displayOn: Components.BqTooltip['displayOn'];
+    set displayOn(_: Components.BqTooltip['displayOn']);
     /**
    * Indicates whether or not the tooltip is visible when the component is first rendered,
 and when interacting with the trigger
    */
-    visible: Components.BqTooltip['visible'];
+    set visible(_: Components.BqTooltip['visible']);
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<BqTooltip, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BqTooltip, "bq-tooltip", never, { "alwaysVisible": { "alias": "alwaysVisible"; "required": false; }; "displayOn": { "alias": "displayOn"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "hideArrow": { "alias": "hideArrow"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "sameWidth": { "alias": "sameWidth"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, {}, never, ["*"], false, never>;