@beeq/core 1.8.0-beta.9 → 1.8.1

package/dist/types/components/input/bq-input.d.ts

@@ -1,6 +1,57 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TInputType, TInputValidation, TInputValue } from './bq-input.types';
 /**
+ * The Input component is a fundamental user interface element that allows users to input data by typing it into a text field.
+ * It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-input name="username" label="Username" placeholder="Enter your username"></bq-input>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/980362-input
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-icon
+ *
+ * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.
+ * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.
+ * @attr {string} autocorrect - Controls whether or not the input field should have autocorrect enabled.
+ * @attr {boolean} autofocus - If true, the input will be focused on component render.
+ * @attr {string} clear-button-label - The clear button aria label.
+ * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.
+ * @attr {boolean} disabled - Indicates whether the input is disabled or not.
+ * @attr {boolean} disable-clear - If true, the clear button won't be displayed.
+ * @attr {string} form - The ID of the form that the input field belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
+ * @attr {string} inputmode - The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.
+ * @attr {number | string} max - The maximum value that the input field can accept.
+ * @attr {number} maxlength - The maximum number of characters that the input field can accept.
+ * @attr {number | string} min - The minimum value that the input field can accept.
+ * @attr {number} minlength - The minimum number of characters that the input field can accept.
+ * @attr {string} name - The input field name.
+ * @attr {string} pattern - Specifies a regular expression the form control's value should match.
+ * @attr {string} placeholder - The input placeholder text value.
+ * @attr {boolean} readonly - If true, the input field cannot be modified.
+ * @attr {boolean} required - Indicates whether or not the input field is required to be filled out before submitting the form.
+ * @attr {number | 'any'} step - A number that specifies the granularity that the value must adhere to.
+ * @attr {string} type - The type attribute specifies the type of input field to display.
+ * @attr {'none' | 'error' | 'warning' | 'success'} validation-status - The validation status of the input.
+ * @attr {string | number | string[]} value - The input value, it can be used to reset the input to a previous value.
+ *
+ * @event bqBlur - Callback handler emitted when the input loses focus.
+ * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
+ * @event bqClear - Callback handler emitted when the input value has been cleared.
+ * @event bqFocus - Callback handler emitted when the input has received focus.
+ * @event bqInput - Callback handler emitted when the input value changes.
+ *
+ * @slot label - The label slot container.
+ * @slot prefix - The prefix slot container.
+ * @slot suffix - The suffix slot container.
+ * @slot helper-text - The helper text slot container.
+ * @slot clear-icon - The clear icon slot container.
+ *
  * @part base - The component's base wrapper.
  * @part button - The native HTML button used under the hood in the clear button.
  * @part clear-btn - The clear button.
@@ -10,6 +61,27 @@ import { TInputType, TInputValidation, TInputValue } from './bq-input.types';
  * @part input - The native HTML input element used under the hood.
  * @part prefix - The prefix slot container.
  * @part suffix - The suffix slot container.
+ *
+ * @cssprop --bq-input--background-color - Input background color
+ * @cssprop --bq-input--border-color - Input border color
+ * @cssprop --bq-input--border-color-focus - Input border color on focus
+ * @cssprop --bq-input--border-radius - Input border radius
+ * @cssprop --bq-input--border-width - Input border width
+ * @cssprop --bq-input--border-style - Input border style
+ * @cssprop --bq-input--gap - Gap between input content and prefix/suffix
+ * @cssprop --bq-input--helper-margin-top - Helper text margin top
+ * @cssprop --bq-input--helper-text-color - Helper text color
+ * @cssprop --bq-input--helper-text-size - Helper text size
+ * @cssprop --bq-input--icon-size - Icon size to use in prefix/suffix and clear button
+ * @cssprop --bq-input--label-margin-bottom - Input label margin bottom
+ * @cssprop --bq-input--label-text-color - Input label text color
+ * @cssprop --bq-input--label-text-size - Input label text size
+ * @cssprop --bq-input--padding-start - Input padding start
+ * @cssprop --bq-input--padding-end - Input padding end
+ * @cssprop --bq-input--paddingY - Input padding top and bottom
+ * @cssprop --bq-input--text-color - Input text color
+ * @cssprop --bq-input--text-size - Input text size
+ * @cssprop --bq-input--text-placeholder-color - Input placeholder text color
  */
 export declare class BqInput {
     private helperTextElem?;
@@ -60,6 +132,8 @@ export declare class BqInput {
     disableClear?: boolean;
     /** The ID of the form that the input field belongs to. */
     form?: string;
+    /** The native form validation message (mandatory if `required` is set) */
+    formValidationMessage?: string;
     /**
      * 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.
@@ -142,6 +216,7 @@ export declare class BqInput {
         el: HTMLBqInputElement;
     }>;
     componentWillLoad(): void;
+    formAssociatedCallback(): void;
     formResetCallback(): void;
     private handleBlur;
     private handleFocus;
@@ -149,6 +224,8 @@ export declare class BqInput {
     private handleChange;
     private handleClear;
     private handleClearClick;
+    private setFormValue;
+    private updateFormValidity;
     private handleLabelSlotChange;
     private handlePrefixSlotChange;
     private handleSuffixSlotChange;

package/dist/types/components/notification/bq-notification.d.ts

@@ -1,6 +1,48 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TNotificationBorderRadius, TNotificationType } from './bq-notification.types';
 /**
+ * The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-notification border="s" time="3000" type="info">
+ *   Title
+ *   <span slot="body">
+ *     This is some description text text
+ *     <a class="bq-link" href="https://example.com">Link</a>
+ *   </span>
+ *   <div class="flex gap-xs" slot="footer">
+ *     <bq-button appearance="primary" size="small">Button</bq-button>
+ *     <bq-button appearance="link" size="small">Button</bq-button>
+ *   </div>
+ * </bq-notification>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/945cb6-notification
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-icon
+ *
+ * @attr {boolean} auto-dismiss - If true, the notification will automatically hide after the specified amount of time
+ * @attr {string} border - The corder radius of the notification component
+ * @attr {boolean} disable-close - If true, the close button at the top right of the notification won't be shown
+ * @attr {boolean} hide-icon - If true, the notification icon won't be shown
+ * @attr {boolean} open - If true, the notification will be shown
+ * @attr {number} time - The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss="true"`
+ * @attr {string} type - Type of Notification
+ *
+ * @event bqAfterClose - Callback handler to be called after the notification has been closed
+ * @event bqAfterOpen - Callback handler to be called after the notification has been opened
+ * @event bqHide - Callback handler to be called when the notification is hidden
+ * @event bqShow - Callback handler to be called when the notification is shown
+ *
+ * @slot - The notification title content
+ * @slot body - The notification description content
+ * @slot footer - The notification footer content
+ * @slot icon - The icon to be displayed in the notification
+ * @slot btn-close - The close button of the notification
+ *
  * @part base - The `<div>` container of the predefined bq-icon component.
  * @part body - The container `<div>` that wraps the notification description content
  * @part btn-close - The `bq-button` used to close the notification
@@ -13,11 +55,21 @@ import { TNotificationBorderRadius, TNotificationType } from './bq-notification.
  * @part title - The container `<div>` that wraps the notification title content
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
  *
- * @slot - The notification title content
- * @slot body - The notification description content
- * @slot footer - The notification footer content
- * @slot icon - The icon to be displayed in the notification
- * @slot btn-close - The close button of the notification
+ * @cssprop --bq-notification--background - The notification background color
+ * @cssprop --bq-notification--box-shadow - The notification box shadow
+ * @cssprop --bq-notification--border-color - The notification border color
+ * @cssprop --bq-notification--border-radius - The notification border radius
+ * @cssprop --bq-notification--border-style - The notification border style
+ * @cssprop --bq-notification--border-width - The notification border width
+ * @cssprop --bq-notification--content-footer-gap - The notification content and footer gap
+ * @cssprop --bq-notification--title-body-gap - The notification title and body gap
+ * @cssprop --bq-notification--icon-color-error - The notification icon color for error type
+ * @cssprop --bq-notification--icon-color-info - The notification icon color for info type
+ * @cssprop --bq-notification--icon-color-neutral - The notification icon color for neutral type
+ * @cssprop --bq-notification--icon-color-success - The notification icon color for success type
+ * @cssprop --bq-notification--icon-color-warning - The notification icon color for warning type
+ * @cssprop --bq-notification--padding - The notification padding
+ * @cssprop --bq-notification--min-width - The notification min width
  */
 export declare class BqNotification {
     private autoDismissDebounce;

package/dist/types/components/option/bq-option.d.ts

@@ -1,9 +1,49 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.
+ * It can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-option value="user">
+ *   <span>User profile</span>
+ *   <bq-icon slot="suffix" name="user"></bq-icon>
+ * </bq-option>
+ * ```
+ *
+ * @documentation https://storybook.beeq.design/?path=/story/components-option--with-option-group
+ * @status stable
+ *
+ * @attr {boolean} disabled - If true, the option is disabled.
+ * @attr {boolean} hidden - If true, the option is hidden.
+ * @attr {string} value - A string representing the value of the option. Can be used to identify the item.
+ * @attr {boolean} selected - If true, the option is selected and active.
+ *
+ * @event bqBlur - Handler to be called when item loses focus.
+ * @event bqFocus - Handler to be called when item is focused.
+ * @event bqClick - Handler to be called when item is clicked.
+ * @event bqEnter - Handler to be called on enter key press.
+ *
+ * @slot prefix - The prefix content to be displayed before the label.
+ * @slot - The label content to be displayed.
+ *
  * @part base - The component's internal wrapper.
  * @part label - The `span` element in which the label text is displayed.
  * @part prefix - The `span` element in which the prefix is displayed (generally `bq-icon`).
  * @part suffix - The `span` element in which the suffix is displayed (generally `bq-icon`).
+ *
+ * @cssprop --bq-option--background - background color
+ * @cssprop --bq-option--font-size - font size
+ * @cssprop --bq-option--border-color - border color
+ * @cssprop --bq-option--border-style - border style
+ * @cssprop --bq-option--border-width - border width
+ * @cssprop --bq-option--border-radius - border radius
+ * @cssprop --bq-option--box-shadow - box shadow
+ * @cssprop --bq-option--gap-start - gap space between prefix and label
+ * @cssprop --bq-option--gap-end - gap space between label and suffix
+ * @cssprop --bq-option--paddingY - padding Y axis
+ * @cssprop --bq-option--padding-start - option label padding start
+ * @cssprop --bq-option--padding-end - option label padding end
  */
 export declare class BqOption {
     private prefixElem;

package/dist/types/components/option-group/bq-option-group.d.ts

@@ -1,9 +1,40 @@
 /**
+ * The option group component is a container for multiple option elements.
+ * It allows to manage the appearance and size of all options at once.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-option-group class="hydrated">
+ *   <span slot="header-label">Sport</span>
+ *   <bq-option value="football">Football</bq-option>
+ *   <bq-option value="basketball">Basketball</bq-option>
+ *   <bq-option value="tennis">Tennis</bq-option>
+ * </bq-option-group>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/3b1b7b-option-group
+ * @status stable
+ *
+ * @slot header-label - The label of the option group
+ * @slot header-prefix - The prefix of the label
+ * @slot header-suffix - The suffix of the label
+ * @slot - The option items
+ *
  * @part label - The `legend` tag element which acts as a container for the label
  * @part prefix - The prefix of the label
  * @part label - The text of the label
  * @part suffix - The suffix of the label
  * @part group - The `div` element which holds the option items
+ *
+ * @cssprop --bq-option-group--background - option group background color
+ * @cssprop --bq-option-group--font-size - option group font size
+ * @cssprop --bq-option-group--line-height - option group line height
+ * @cssprop --bq-option-group--label-padding-start - option group header padding start
+ * @cssprop --bq-option-group--label-padding-end - option group header padding start
+ * @cssprop --bq-option-group--label-paddingY - option group header padding Y axis
+ * @cssprop --bq-option-group--label-text-padding-start - option group text within label padding start
+ * @cssprop --bq-option-group--label-text-padding-end - option group text within label padding start
+ * @cssprop --bq-option-group--container-padding-start - option group container padding start
  */
 export declare class BqOptionGroup {
     el: HTMLElement;

package/dist/types/components/option-list/bq-option-list.d.ts

@@ -1,6 +1,27 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * The option list component is a container for multiple option elements.
+ * It allows to manage the appearance and size of all options at once.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-option-list>
+ *   <bq-option value="football">Football</bq-option>
+ *   <bq-option value="basketball">Basketball</bq-option>
+ *   <bq-option value="tennis">Tennis</bq-option>
+ * </bq-option-list>
+ * ```
+ *
+ * @documentation https://storybook.beeq.design/?path=/story/components-option--default
+ * @status stable
+ *
+ * @attr {string} aria-label - Aria label for the list.
+ *
+ * @slot - The option items
+ *
  * @part base - The component's internal wrapper.
+ *
+ * @cssprop --bq-option-group--gapY-list - Option group gap between items Y axis
  */
 export declare class BqOptionList {
     el: HTMLBqOptionListElement;

package/dist/types/components/page-title/bq-page-title.d.ts

@@ -1,4 +1,31 @@
 /**
+ * The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-page-title>
+ *   <bq-button appearance="link" slot="back">
+ *     <bq-icon
+ *       color="text--primary"
+ *       name="arrow-left"
+ *       weight="bold"
+ *       role="img"
+ *       title="Navigate back to the previous page"
+ *     ></bq-icon>
+ *   </bq-button>
+ *   Title
+ *   <div slot="sub-title">Sub-title</div>
+ * </bq-page-title>
+ * ```
+ *
+ * @documentation https://storybook.beeq.design/?path=/docs/components-page-title--overview
+ * @status stable
+ *
+ * @slot back - The back navigation button.
+ * @slot - The main title content.
+ * @slot sub-title - The sub-title content.
+ * @slot suffix - The suffix content.
+ *
  * @part base - The inner container `<div>`of element that contains the base page title component.
  * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.
  * @part title-suffix - Defines the container that holds the title and any suffix content.
@@ -6,6 +33,16 @@
  * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.
  * @part suffix - The `<div>` page title element that acts as suffix slot container.
  * @part sub-title - The `<div>` page title element that acts as sub-title slot container.
+ *
+ * @cssprop --paddingY - Padding top and bottom of the page title wrapper
+ * @cssprop --subtitle-borderBlockEnd - Page title border end color
+ * @cssprop --subtitle-fontWeight - Page title font weight for subtitle
+ * @cssprop --subtitle-textColor - Page title color for sub-title
+ * @cssprop --subtitle-textSize - Page title text size for subtitle
+ * @cssprop --title-fontWeight - Page title font weight for title
+ * @cssprop --title-lineHeight - Page title text line height
+ * @cssprop --title-textColor - Page title color for title
+ * @cssprop --title-textSize - Page title text size for title
  */
 export declare class BqPageTitle {
     private backNavigationElem;

package/dist/types/components/panel/bq-panel.d.ts

@@ -1,6 +1,37 @@
 import { Placement } from '../../services/interfaces';
 /**
+ * The Panel component is a versatile and essential element used to wrap and display content in a floating panel.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-panel open>
+ *   <div>Panel content</div>
+ * </bq-panel>
+ * ```
+ *
+ * @status stable
+ *
+ * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.
+ * @attr {"top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end"} placement - Position of the panel.
+ * @attr {boolean} open - If true, the panel will be visible.
+ * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.
+ * @attr {number} skidding - Represents the skidding between the panel and the trigger element.
+ * @attr {"fixed" | "absolute"} strategy - Defines the strategy to position the panel.
+ *
+ * @slot - The content of the panel.
+ *
  * @part panel - The `<div>` element used to display and style the panel
+ *
+ * @prop --bq-panel--background - Panel background color
+ * @prop --bq-panel--border-color - Panel border color
+ * @prop --bq-panel--border-radius - Panel border radius
+ * @prop --bq-panel--border-style - Panel border style
+ * @prop --bq-panel--border-width - Panel border width
+ * @prop --bq-panel--box-shadow - Panel box shadow
+ * @prop --bq-panel--padding - Panel padding
+ * @prop --bq-panel--height - Panel height
+ * @prop --bq-panel--width - Panel width
+ * @prop --bq-panel-z-index - Panel z-index applied when opened
  */
 export declare class BqPanel {
     private panel;

package/dist/types/components/progress/bq-progress.d.ts

@@ -1,31 +1,55 @@
 import { TProgressBorderShape, TProgressThickness, TProgressType } from './bq-progress.types';
 /**
+ * The progress bar is a user interface component that visually represents the completion status of a task or process.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-progress value="50"></bq-progress>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/691cb3-progress
+ * @status stable
+ *
+ * @dependency bq-tooltip
+ *
+ * @attr {"rounded" | "rounded-full"} border-shape - It will set the border style of the progress bar
+ * @attr {boolean} enable-tooltip - If `true`, a tooltip will be shown displaying the progress value
+ * @attr {boolean} indeterminate - If `true` the indeterminate state of progress bar is enabled
+ * @attr {boolean} label - If `true`, a label text showing the value (in percentage) will be shown
+ * @attr {"small" | "medium" | "large"} thickness - Progress bar thickness
+ * @attr {"default" | "error"} type - Progress type
+ * @attr {number} value - A number representing the current value of the progress bar
+ *
  * @part wrapper - The component wrapper container inside the shadow DOM
  * @part progress - The `<div>` container that holds the native progress element
  * @part progress-bar - The native html for progress element
  * @part label - The `<div>` container that holds the label value (in percentage)
  * @part indeterminate - The `<div>` container that holds the indeterminate progress bar
- *
  * @part base - The base container for the tooltip component inside the shadow DOM when hovering over the progress bar
  * @part trigger - The container holding the element that triggers the tooltip display when hovering over the progress bar
  * @part panel - The container holding the content of the tooltip when hovering over the progress bar
+ *
+ * @cssprop --bq-progress-bar--height - The progress bars height
+ * @cssprop --bq-progress-bar--indeterminateWidth - The progress bar width when its indeterminate
+ * @cssprop --bq-progress-bar--indicatorColor - The progress bar color (inside the track area)
+ * @cssprop --bq-progress-bar--trackColor - The progress bar track area (the grey one)
  */
 export declare class BqProgress {
     el: HTMLBqProgressElement;
+    /** It will set the border style of the progress bar */
+    borderShape: TProgressBorderShape;
+    /** If `true`, a tooltip will be shown displaying the progress value */
+    enableTooltip: boolean;
     /** If `true` the indeterminate state of progress bar is enabled */
     indeterminate: boolean;
-    /** A number representing the current value of the progress bar */
-    value: number;
+    /** If `true, a label text showing the value (in percentage) will be shown */
+    label: boolean;
     /** Progress bar thickness */
     thickness: TProgressThickness;
     /** Progress type */
     type: TProgressType;
-    /** It will set the border style of the progress bar */
-    borderShape: TProgressBorderShape;
-    /** If `true`, a label text showing the value (in percentage) will be shown */
-    label: boolean;
-    /** If `true`, a tooltip will be shown displaying the progress value */
-    enableTooltip: boolean;
+    /** A number representing the current value of the progress bar */
+    value: number;
     handleTypePropChange(): void;
     handleValuePropChange(newValue: number): void;
     componentWillLoad(): void;

package/dist/types/components/radio/bq-radio.d.ts

@@ -1,9 +1,42 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * The radio button is a user interface element that allows users to select a single option.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-radio value="option1">Radio option 1</bq-radio>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1
+ * @status stable
+ *
+ * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover
+ * @attr {boolean} checked - If `true` radio input is checked
+ * @attr {boolean} disabled - If `true` radio input is disabled
+ * @attr {string} form-id - The form ID that the radio input is associated with
+ * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair
+ * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted
+ * @attr {boolean} value - A string representing the value of the radio
+ *
+ * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
+ * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
+ * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood
+ * @method getNativeInput - Returns the native `<input>` HTML element used under the hood
+ *
+ * @event bqBlur - Handler to be called when the radio loses focus
+ * @event bqClick - Handler to be called when the radio state changes
+ * @event bqFocus - Handler to be called when the radio gets focused
+ * @event bqKeyDown - The handler is to be called when the radio key is pressed
+ *
+ * @slot - The bq-radio item
+ *
  * @part base - The component's internal wrapper of the radio component.
  * @part input - The native HTML `<input type="radio">` used under the hood.
  * @part radio - The component's internal wrapper of the radio component.
  * @part label - The `<span>` element that holds the text content.
+ *
+ * @cssprop --bq-radio--size - Radio size
+ * @cssprop --bq-radio--border-width - Radio border width
  */
 export declare class BqRadio {
     private inputElement;
@@ -45,6 +78,10 @@ export declare class BqRadio {
      * Use this method instead of the global `element.blur()`.
      */
     vBlur(): Promise<void>;
+    /**
+     * Returns the native `<input>` HTML element used under the hood.
+     */
+    getNativeInput(): Promise<HTMLInputElement>;
     private handleClick;
     private handleOnFocus;
     private handleOnBlur;

package/dist/types/components/radio-group/bq-radio-group.d.ts

@@ -1,6 +1,40 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TRadioGroupOrientation } from './bq-radio-group.types';
 /**
+ * The radio group is a user interface component that groups radio buttons to enable a single selection within the group.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-radio-group fieldset value="option1">
+ *   <span slot="label">radio group</span>
+ *   <bq-radio value="option1">Radio option 1</bq-radio>
+ *   <bq-radio value="option2">Radio option 2</bq-radio>
+ *   <bq-radio value="option3">Radio option 3</bq-radio>
+ * </bq-radio-group>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1
+ * @status stable
+ *
+ * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover
+ * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change
+ * @attr {boolean} disabled - If `true` radio inputs are disabled
+ * @attr {boolean} fieldset - If `true` displays fieldset
+ * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair
+ * @attr {"horizontal" | "vertical"} orientation - The display orientation of the radio inputs
+ * @attr {boolean} required - If `true`, the radio group is required
+ * @attr {string} required-validation-message - The native form validation message when the radio group is required
+ * @attr {string} value - The display orientation of the radio inputs
+ *
+ * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
+ * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
+ * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood
+ *
+ * @event bqChange - Handler to be called when the radio state changes
+ *
+ * @slot - The bq-radio items to group
+ * @slot label - The label content of radio group
+ *
  * @part base - The component's internal wrapper of the radio components.
  * @part label - The `<legend>` element that holds the text content.
  * @part group - The `<div>` element that holds the radio inputs.
@@ -8,24 +42,30 @@ import { TRadioGroupOrientation } from './bq-radio-group.types';
 export declare class BqRadioGroup {
     private focusedBqRadio;
     private debouncedBqChange;
+    internals: ElementInternals;
     el: HTMLBqRadioGroupElement;
     /** If true, all radio inputs in the group will display a background on hover */
     backgroundOnHover?: boolean;
-    /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */
-    name: string;
-    /** A string representing the value of the radio. */
-    value?: string;
+    /** A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change */
+    debounceTime: number;
     /** If true radio inputs are disabled */
     disabled?: boolean;
     /** If true displays fieldset */
     fieldset?: boolean;
+    /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */
+    name: string;
     /** The display orientation of the radio inputs */
-    orientation: TRadioGroupOrientation;
-    /** A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change */
-    debounceTime: number;
+    orientation?: TRadioGroupOrientation;
+    /** If true, the radio group is required */
+    required?: boolean;
+    /** The native form validation message when the radio group is required */
+    requiredValidationMessage?: string;
+    /** A string representing the value of the radio. */
+    value?: string;
     handleGroupProperties(): void;
     checkPropValues(): void;
     checkDebounceChange(): void;
+    handleRequiredChange(): Promise<void>;
     /** Handler to be called when the radio state changes */
     bqChange: EventEmitter<{
         value: string;
@@ -33,14 +73,17 @@ export declare class BqRadioGroup {
     }>;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    formAssociatedCallback(): Promise<void>;
+    formResetCallback(): void;
     onMouseDown(event: MouseEvent): void;
     onBqClick(event: CustomEvent<HTMLBqRadioElement>): void;
     onBqKeyDown(event: CustomEvent<KeyboardEvent>): void;
     onBqFocus(event: CustomEvent<HTMLBqRadioElement>): void;
     onBqBlur(event: CustomEvent<HTMLBqRadioElement>): void;
-    private get bqRadioElements();
-    private focusRadioInputSibbling;
+    private focusRadioInputSibling;
+    private setCheckedRadioItem;
     private getNextRadioElement;
-    private checkRadioInput;
+    private updateFormValidity;
+    private get bqRadioElements();
     render(): any;
 }