@beeq/core 1.8.0-beta.9 → 1.8.1

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

@@ -3,6 +3,69 @@ import { Placement } from '../../services/interfaces';
 import { TInputValidation } from '../input/bq-input.types';
 export type TSelectValue = string | string[];
 /**
+ * The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-select placeholder="Placeholder">
+ *   <label slot="label">Select label</label>
+ *   <span slot="helper-text">
+ *     <bq-icon name="star"></bq-icon>
+ *       Helper text
+ *   </span>
+ *
+ *   <bq-option value="1">Option 1</bq-option>
+ *   <bq-option value="2">Option 2</bq-option>
+ *   <bq-option value="3">Option 3</bq-option>
+ * </bq-select>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/41989d-select/b/09d7b1
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-dropdown
+ * @dependency bq-icon
+ * @dependency bq-option-list
+ * @dependency bq-tag
+ *
+ * @attr {boolean} autofocus - If `true`, the Select 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} disable-clear - If `true`, the clear button won't be displayed.
+ * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
+ * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
+ * @attr {string} form - The ID of the form that Select input field belongs to.
+ * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
+ * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
+ * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
+ * @attr {string} name - The Select input name.
+ * @attr {boolean} open - If `true`, the Select panel will be visible.
+ * @attr {string} panel-height - When set, it will override the height of the Select panel.
+ * @attr {string} placeholder - The Select input placeholder text value.
+ * @attr {"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"} placement - Position of the Select panel.
+ * @attr {boolean} readonly - If `true`, the Select input cannot be modified.
+ * @attr {boolean} required - Indicates whether or not the Select input is required to be filled out before submitting the form.
+ * @attr {boolean} same-width - Whether the panel should have the Select same width as the input element.
+ * @attr {number} skidding - Represents the skidding between the Select panel and the input element.
+ * @attr {"absolute" | "fixed"} strategy - Defines the strategy to position the Select panel.
+ * @attr {"error" | "success" | "warning" | "none"} validation-status - The validation status of the Select input.
+ * @attr {"number" | "string" | "string[]"} value - The select input value can be used to reset the field to a previous value.
+ *
+ * @method clear - Method to be called to clear the selected value.
+ *
+ * @event bqBlur - The callback handler is emitted when the Select input loses focus.
+ * @event bqClear - The callback handler is emitted when the selected value has been cleared.
+ * @event bqFocus - A callback handler is emitted when the Select input has received focus.
+ * @event bqSelect - The callback handler is emitted when the selected value has changed.
+ *
+ * @slot label - The label slot container.
+ * @slot prefix - The prefix slot container.
+ * @slot tags - The tags slot container.
+ * @slot clear-icon - The clear icon slot container.
+ * @slot suffix - The suffix slot container.
+ * @slot helper-text - The helper text 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.
@@ -21,6 +84,28 @@ export type TSelectValue = string | string[];
  * @part tag__text - The text slot container of the BqTag for multiple selection.
  * @part tag__btn-close - The close button of the BqTag for multiple selection.
  * @part option-list - The option list container.
+ *
+ * @cssprop --bq-select--background-color - Select background color
+ * @cssprop --bq-select--border-color - Select border color
+ * @cssprop --bq-select--border-color-focus - Select border color on focus
+ * @cssprop --bq-select--border-color-disabled - Select border color when disabled
+ * @cssprop --bq-select--border-radius - Select border radius
+ * @cssprop --bq-select--border-width - Select border width
+ * @cssprop --bq-select--border-style - Select border style
+ * @cssprop --bq-select--gap - Gap between Select content and prefix/suffix
+ * @cssprop --bq-select--helper-margin-top - Helper text margin top
+ * @cssprop --bq-select--helper-text-color - Helper text color
+ * @cssprop --bq-select--helper-text-size - Helper text size
+ * @cssprop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button
+ * @cssprop --bq-select--label-margin-bottom - Select label margin bottom
+ * @cssprop --bq-select--label-text-color - Select label text color
+ * @cssprop --bq-select--label-text-size - Select label text size
+ * @cssprop --bq-select--padding-start - Select padding start
+ * @cssprop --bq-select--padding-end - Select padding end
+ * @cssprop --bq-select--paddingY - Select padding top and bottom
+ * @cssprop --bq-select--text-color - Select text color
+ * @cssprop --bq-select--text-size - Select text size
+ * @cssprop --bq-select--text-placeholder-color - Select placeholder text color
  */
 export declare class BqSelect {
     private helperTextElem?;

package/dist/types/components/side-menu/bq-side-menu.d.ts

@@ -1,10 +1,55 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';
 /**
+ *The default side menu serves as a versatile container for organizing and displaying navigation elements,
+ * with default side menu items providing a clean and straightforward way to represent individual menu options.
+ * Together, they form the foundation for building structured and intuitive side menu layouts.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-side-menu>
+ *   <div slot="logo">
+ *     <h1>Your Logo</h1>
+ *   </div>
+ *   <bq-side-menu-item active>
+ *     <bq-icon name="home" slot="prefix"></bq-icon>
+ *     Home
+ *   </bq-side-menu-item>
+ *   <bq-side-menu-item>
+ *     <bq-icon name="settings" slot="prefix"></bq-icon>
+ *     Settings
+ *   </bq-side-menu-item>
+ *   <bq-side-menu-item disabled>
+ *     <bq-icon name="help" slot="prefix"></bq-icon>
+ *     Help
+ *   </bq-side-menu-item>
+ * </bq-side-menu>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1
+ * @status stable
+ *
+ * @attr {"brand" | "default" | "inverse"} appearance - It sets a predefined appearance of the side menu.
+ * @attr {boolean} collapse - If `true`, the container will reduce its width.
+ * @attr {"medium" | "small"} - size - It sets the size of the navigation menu items.
+ *
+ * @method toggleCollapse - Method to be called to toggle the collapse state of the side menu.
+ *
+ * @event bqCollapse - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.
+ * @event bqSelect - Callback handler to be called when the active/selected menu item changes.
+ *
+ * @slot logo - The section for displaying the logo or brand in the side menu.
+ * @slot The main section that holds all menu items.
+ * @slot footer - The section for adding footer content to the side menu.
+ *
  * @part base - HTML `<aside>` root container
  * @part footer - HTML `<div>` element that holds the footer
  * @part logo - HTML `<div>` element that holds the logo
  * @part nav - HTML `<nav>` element that holds the navigation items
+ *
+ * @cssprop --bq-side-menu--bg-color - Side menu background color
+ * @cssprop --bq-side-menu--brand-color - Side menu logo color
+ * @cssprop --bq-side-menu--border-color - Side menu border color
  */
 export declare class BqSideMenu {
     private menuItemCssSelector;

package/dist/types/components/side-menu-item/bq-side-menu-item.d.ts

@@ -1,11 +1,48 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-side-menu-item>
+ *   <bq-icon name="star-four" slot="prefix"></bq-icon>
+ *   Menu item
+ *   <bq-badge slot="suffix">5</bq-badge>
+ * </bq-side-menu-item>
+ * ```
+ * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1
+ * @status stable
+ *
+ * @dependency bq-tooltip
+ *
+ * @attr {boolean} active - If `true`, the menu item will be shown as active/selected.
+ * @attr {boolean} collapse - If `true`, the item label and suffix will be hidden and the with will be reduced according to its parent.
+ * @attr {boolean} disabled - If `true`, the menu item will be disabled (no interaction allowed).
+ *
+ * @event bqBlur - Handler to be called when the button loses focus.
+ * @event bqClick - Handler to be called when the button gets focused.
+ * @event bqFocus - Handler to be called when the button is clicked.
+ *
+ * @slot prefix - The prefix part of menu item.
+ * @slot - The content of the menu item.
+ * @slot suffix - The suffix part of menu item.
+ *
  * @part base - The component wrapper container inside the shadow DOM
  * @part label - The label slot
  * @part prefix - The prefix slot
  * @part suffix - The suffix slot
  * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)
  * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)
+ *
+ * @cssprop --bq-side-menu-item--bg-default - Side menu item default background color
+ * @cssprop --bq-side-menu-item--bg-hover - Side menu item hover background color
+ * @cssprop --bq-side-menu-item--bg-active - Side menu item active background color
+ * @cssprop --bq-side-menu-item--text-default - Side menu item default text color
+ * @cssprop --bq-side-menu-item--text-hover - Side menu item hover text color
+ * @cssprop --bq-side-menu-item--text-active - Side menu item active text color
+ * @cssprop --bq-side-menu-item--text-disabled - Side menu item disable text color
+ * @cssprop --bq-side-menu-item--paddingX - Side menu item vertical padding
+ * @cssprop --bq-side-menu-item--paddingY - Side menu item horizontal padding
  */
 export declare class BqSideMenuItem {
     private labelElem;

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

@@ -1,6 +1,35 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TSliderType, TSliderValue } from './bq-slider.types';
 /**
+ * Sliders provide a visual representation of adjustable content, enabling users to change values by dragging a handle along a horizontal track.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-slider max="100" value="30"></bq-slider>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/509cbc-slider/b/09d7b1
+ * @status stable
+ *
+ * @dependency bq-tooltip
+ *
+ * @attr {number} debounce-time - The amount of time, in milliseconds, to wait to trigger the bqChange event after each value change.
+ * @attr {boolean} disabled - If `true` the slider is disabled.
+ * @attr {boolean} enable-tooltip - If `true`, a tooltip will be shown displaying the progress value.
+ * @attr {boolean} enable-value-indicator - If `true` it will show the value label on the side of the slider track area.
+ * @attr {number} gap - A number representing the amount to remain between the minimum and maximum values (only for range type).
+ * @attr {number} max - A number representing the max value of the slider.
+ * @attr {number} min - A number representing the min value of the slider.
+ * @attr {number} step - A number represents 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.
+ * @attr {boolean} tooltip-always-visible - If `true`, a tooltip will always display the progress value. It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.
+ * @attr {"range" | "single"} type - It defines the type of slider to display.
+ * @attr {"[number, number]" | "number" | "string"} value - 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).
+ *
+ * @event bqBlur - Handler to be called when the slider loses focus.
+ * @event bqChange - Handler to be called when changing the value on range inputs.
+ * @event bqFocus - Handler to be called when the slider gets focused.
+ *
  * @part base - The component's base wrapper.
  * @part container - The container of the slider.
  * @part track-area - The track area of the slider.
@@ -9,6 +38,12 @@ import { TSliderType, TSliderValue } from './bq-slider.types';
  * @part input-max - The input element for the maximum value.
  * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.
  * @part label-end - The label for maximum value when the slider type is `range`.
+ *
+ * @cssprop --bq-slider--size - The height of the slider track/progress area
+ * @cssprop --bq-slider--border-radius - Slider border radius
+ * @cssprop --bq-slider--thumb-size - Slider hover thumb size
+ * @cssprop --bq-slider--progress-color - Slider progress background color
+ * @cssprop --bq-slider--trackarea-color - Slider track background color
  */
 export declare class BqSlider {
     private inputMinElem;
@@ -18,6 +53,7 @@ export declare class BqSlider {
     private progressElem;
     private trackElem;
     private debounceBqChange;
+    internals: ElementInternals;
     el: HTMLBqSliderElement;
     /**
      * The `minValue` state is the only value when the slider type is `single`
@@ -42,6 +78,8 @@ export declare class BqSlider {
     max: number;
     /** A number representing the min value of the slider. */
     min: number;
+    /** Name of the form control. Submitted with the form as part of a name/value pair */
+    name: string;
     /**
      * 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`.
@@ -74,10 +112,10 @@ export declare class BqSlider {
     bqBlur: EventEmitter<HTMLBqSliderElement>;
     /** Handler to be called when the slider gets focused */
     bqFocus: EventEmitter<HTMLBqSliderElement>;
-    connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    formAssociatedCallback(): void;
     private init;
     private runUpdates;
     private setState;

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

@@ -2,10 +2,36 @@ import { TSpinnerSize, TSpinnerTextPosition } from './bq-spinner.types';
 /**
  * Spinners are designed for users to display data loading.
  *
+ * @example How to use it
+ * ```html
+ * <bq-spinner size="medium" text-position="bellow">
+ *   <span>Loading...</span>
+ * </bq-spinner>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/275f10-spinner/b/09d7b1
+ * @status stable
+ *
+ * @attr {boolean} animation - If `false`, the animation on the icon element will be stopped.
+ * @attr {"small" | "medium" | "large"} size - It defines the size of the icon element displayed.
+ * @attr {"above" | "below" | "left" | "right" | "none"} text-position - It defines the position of the label text.
+ *
+ * @slot icon - The icon slot container.
+ * @slot - The content of the spinner component.
+ *
  * @part base - The div wrapper container used under the hood.
  * @part icon - The `<svg>` icon element used to spin/animate.
  * @part custom-icon - The `<span>` tag element that holds the custom icon element passed.
  * @part text - The `<span>` tag element that renders the label text inside the component.
+ *
+ * @cssprop --bq-spinner--color - Spinner color
+ * @cssprop --bq-spinner--size-large - Spinner large size
+ * @cssprop --bq-spinner--size-medium - Spinner medium size
+ * @cssprop --bq-spinner--size-small - Spinner small size
+ * @cssprop --bq-spinner--large-text-fontSize - Spinner large text font size
+ * @cssprop --bq-spinner--medium-text-fontSize - Spinner medium text font size
+ * @cssprop --bq-spinner--small-text-fontSize - Spinner small text font size
+ * @cssprop --bq-spinner--text-lineHeight - Spinner text line height
  */
 export declare class BqSpinner {
     private iconSlotElem;

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

@@ -1,8 +1,26 @@
 import { TStatusType } from './bq-status.types';
 /**
- * @part base - The component's internal wrapper of the status component
- * @part circle - The colored circle that marks the status type
- * @part text - The `<div>` container that holds the text label of the status component
+ * The Status Component is a UI element that represents the current state or condition of an item, task, or process.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-status type="alert">Alert status</bq-status>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/46c8d5-status/b/09d7b1
+ * @status stable
+ *
+ * @dependency bq-badge
+ *
+ * @attr {"alert" | "danger" | "info" | "neutral" | "success"} type - It defines the type of status to display.
+ *
+ * @slot The content of the status component.
+ *
+ * @part base - The component's internal wrapper of the status component.
+ * @part circle - The colored circle that marks the status type.
+ * @part text - The `<div>` container that holds the text label of the status component.
+ *
+ * @cssprop --bq-status-circ - Status circle size.
  */
 export declare class BqStatus {
     el: HTMLBqStatusElement;

package/dist/types/components/step-item/bq-step-item.d.ts

@@ -2,9 +2,41 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TStepItemStatus } from './bq-step-item.types';
 import { TStepsSize, TStepsType } from '../steps/bq-steps.types';
 /**
+ * The Step Item Component is a UI element used to display a single step or stage in a process or task.
+ * It should be used inside the Steps component.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-step-item status="completed">
+ *   <bq-icon slot="prefix" name="check-circle"></bq-icon>
+ *   <span>Title</span>
+ *   <span slot="description">Description</span>
+ * </bq-step-item>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
+ * @status stable
+ *
+ * @attr {"small" | "medium"} size - It defines prefix size
+ * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
+ * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
+ *
+ * @event bqClick - Callback handler emitted when the step item is clicked
+ *
+ * @slot - The step item content
+ * @slot prefix - The step item prefix
+ * @slot description - The step item description
+ *
  * @part base - The component's base wrapper.
  * @part title - The component's title.
  * @part description - The component's description.
+ *
+ * @cssprop --bq-step-item--prefix-color - Color of the prefix icon
+ * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current
+ * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed
+ * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error
+ * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number
+ * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number
  */
 export declare class BqStepItem {
     el: HTMLBqStepItemElement;

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

@@ -1,9 +1,36 @@
 import { TStepsSize, TStepsType } from './bq-steps.types';
 /**
+ * The Steps Component is a UI element used to display a series of steps or stages in a process or task.
+ * It is used to guide users through a process or task and to indicate their progress.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-steps divider-color="stroke--primary" type="dot" size="medium">
+ *   <bq-step-item status="completed"> ... </bq-step-item>
+ *   <bq-step-item status="error"> ... </bq-step-item>
+ *   <bq-step-item status="current"> ... </bq-step-item>
+ *   <bq-step-item status="default"> ... </bq-step-item>
+ * </bq-steps>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
+ * @status stable
+ *
+ * @dependency bq-divider
+ *
+ * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+ * @attr {"medium" | "small"} size - The size of the steps
+ * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
+ *
+ * @slot - The step items
+ *
  * @part container - The container wrapper of the Steps component
  * @part divider-base - The base wrapper of the divider component
  * @part divider-dash-start - The dash start wrapper of the divider component
  * @part divider-dash-end - The dash end wrapper of the divider component
+ *
+ * @cssprop --bq-steps--divider-color - Divider color
+ * @cssprop --bq-steps--gap - Gap between steps
  */
 export declare class BqSteps {
     private stepElem;

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

@@ -4,17 +4,53 @@ import { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';
  * Toggle switches are digital on/off switches.
  * They should provide immediate results, giving users the freedom to control their preferences as needed.
  *
+ * @example How to use it
+ * ```html
+ * <bq-switch inner-label="default" justify-content="start" name="bq-switch" value="Switch value">
+ *   Toggle me!
+ * </bq-switch>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch
+ * @status stable
+ *
+ * @dependency bq-icon
+ *
+ * @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover
+ * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)
+ * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed
+ * @attr {string} form-validation-message - The native form validation message
+ * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container
+ * @attr {"default" | "icon"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)
+ * @attr {"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"} justify-content - It defines how to distribute the space between and around the control and the label text
+ * @attr {string} name - Name of the 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 switch `ON` the element before the owning form can be submitted
+ * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed
+ * @attr {string} value - The input control's value, submitted as a name/value pair with form data
+ *
+ * @event bqChange - Handler to be called when the switch state changes
+ * @event bqFocus - Handler to be called when the switch gets focus
+ * @event bqBlur - Handler to be called when the switch loses focus
+ *
+ * @slot - The switch label text
+ *
  * @part base - HTML `<label>` root container
  * @part control - HTML `<div>` element for the custom control
  * @part dot - HTML `<div>` element that acts as changing dot
  * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label
  * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label
  * @part label - HTML `<span>` element that holds the label text
+ *
+ * @cssprop --bq-switch--height - Switch height
+ * @cssprop --bq-switch--justify-content - Switch justify content
+ * @cssprop --bq-switch--width - Switch width
+ * @cssprop --bq-switch--dot-size - Switch dot size
  */
 export declare class BqSwitch {
     private labelElem;
     private inputElem;
     private prevCheckedValue;
+    internals: ElementInternals;
     el: HTMLBqSwitchElement;
     hasLabel: boolean;
     /** If true, a background will be displayed on hover */
@@ -23,6 +59,8 @@ export declare class BqSwitch {
     checked?: boolean;
     /** If true, the switch control will be disabled and no interaction will be allowed */
     disabled?: boolean;
+    /** The native form validation message */
+    formValidationMessage?: string;
     /** If true, the component will take the full width space available on the parent container */
     fullWidth?: boolean;
     /** It indicates how to to display the on/off marks inside the control, with icons or none (default)  */
@@ -40,6 +78,7 @@ export declare class BqSwitch {
     reverseOrder?: boolean;
     /** The input control's value, submitted as a name/value pair with form data. */
     value?: string;
+    handleRequiredChange(): void;
     /** Handler to be called when the switch state changes */
     bqChange: EventEmitter<{
         checked: boolean;
@@ -51,6 +90,8 @@ export declare class BqSwitch {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
     /**
      * Simulate a click event on the native `<input>` HTML element used under the hood.
      * Use this method instead of the global `element.click()`.
@@ -70,5 +111,7 @@ export declare class BqSwitch {
     private handleOnFocus;
     private handleOnBlur;
     private handleSlotChange;
+    private setFormValue;
+    private updateFormValidity;
     render(): any;
 }

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

@@ -1,11 +1,53 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';
 /**
+ * The tab is a user interface element that allows users to navigate between different sections of a page.
+ * It should be used inside `<bq-tab-group>` component.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-tab tab-id="1" controls="panel-1">Tab 1</bq-tab>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/775321-tabs
+ * @status stable
+ *
+ * @attr {boolean} active - If `true` tab is active
+ * @attr {string} controls - The tab panel id that the tab controls
+ * @attr {boolean} disabled - If `true` tab is disabled
+ * @attr {string} orientation - The direction that tab should be render
+ * @attr {string} placement - The placement that tab should be render
+ * @attr {string} size - The size of the tab
+ * @attr {string} tab-id - The id of the tab
+ *
+ * @event bqClick - Handler to be called when the tab state changes
+ * @event bqFocus - Handler to be called when the tab gets focus
+ * @event bqBlur - Handler to be called when the tab loses focus
+ * @event bqKeyDown - Handler to be called when the tab key is pressed
+ *
+ * @method vClick - Simulate a click event on the native `<button>` HTML element used under the hood
+ * @method vFocus - Sets focus on the native `<button>` HTML element used under the hood
+ * @method vBlur - Remove focus from the native `<button>` HTML element used under the hood
+ *
  * @part base - The HTML button used under the hood.
  * @part content - The HTML `<div>` element that holds the content.
  * @part icon - The HTML `<div>` element that holds the icon content.
  * @part text - The HTML `<div>` element that holds the text content.
  * @part underline - The HTML `<div>` element that display active state.
+ *
+ * @cssprop --bq-tab--font-size - Font size
+ * @cssprop --bq-tab--font-weight - Font weight
+ * @cssprop --bq-tab--icon-size-large - Icon size for large tab
+ * @cssprop --bq-tab--icon-size-medium - Icon size for medium tab
+ * @cssprop --bq-tab--icon-size-small - Icon size for small tab
+ * @cssprop --bq-tab--label-icon-gap - Gap between label and icon
+ * @cssprop --bq-tab--line-height - Line height
+ * @cssprop --bq-tab--padding-horizontal-large - Horizontal padding for large tab
+ * @cssprop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab
+ * @cssprop --bq-tab--padding-horizontal-small - Horizontal padding for small tab
+ * @cssprop --bq-tab--padding-vertical-large - Vertical padding for large tab
+ * @cssprop --bq-tab--padding-vertical-medium - Vertical padding for medium tab
+ * @cssprop --bq-tab--padding-vertical-small - Vertical padding for small tab
  */
 export declare class BqTab {
     private buttonElement;
@@ -15,18 +57,18 @@ export declare class BqTab {
     hasIcon: boolean;
     /** If true tab is active */
     active?: boolean;
+    /** The tab panel id that the tab controls */
+    controls: string;
     /** If true tab is disabled */
     disabled: boolean;
-    /** The size of the tab */
-    size: TTabSize;
     /** The direction that tab should be render */
     orientation?: TTabOrientation;
     /** The placement that tab should be render */
     placement?: TTabPlacement;
+    /** The size of the tab */
+    size: TTabSize;
     /** The id of the tab */
     tabId: string;
-    /** The tab panel id that the tab controls */
-    controls: string;
     checkPropValues(): void;
     /** Handler to be called when the tab state changes */
     bqClick: EventEmitter<HTMLBqTabElement>;
@@ -53,7 +95,7 @@ export declare class BqTab {
      */
     vBlur(): Promise<void>;
     /**
-     * Sets tabindex on the native `<button>` HTML element used under the hood.
+     * @internal Sets tabindex on the native `<button>` HTML element used under the hood.
      * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused
      */
     enableFocus(value: boolean): Promise<void>;

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

@@ -1,24 +1,50 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TTabOrientation, TTabPlacement, TTabSize } from '../tab/bq-tab.types';
 /**
+ * The tab group is a user interface element that allows users wrap a set of tab items.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-tab-group value="5">
+ *   <bq-tab tab-id="1">Tab</bq-tab>
+ *   <bq-tab tab-id="2" active>Tab</bq-tab>
+ *   <bq-tab tab-id="3">Long Tab name</bq-tab>
+ *   <bq-tab tab-id="4" disabled>Tab</bq-tab>
+ * </bq-tab-group>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/775321-tabs
+ * @status stable
+ *
+ * @attr {number} debounce-time - A number representing the delay value applied to bqChange event handler
+ * @attr {boolean} disable-divider - If true, the underline divider below the tabs won't be shown
+ * @attr {string} orientation - The direction that tab should be render
+ * @attr {string} placement - The placement that tab should be render
+ * @attr {string} size - The size of the tab
+ * @attr {string} value - A string representing the id of the selected tab.
+ *
+ * @event bqChange - Handler to be called when the tab value changes
+ *
+ * @slot - The bq-tab items
+ *
  * @part base - The HTML div wrapper inside the shadow DOM.
  * @part tabs - The HTML div used to hold the tab buttons.
  */
 export declare class BqTabGroup {
     private debouncedBqChange;
     el: HTMLBqTabGroupElement;
-    /** A string representing the id of the selected tab. */
-    value: string;
-    /** The size of the tab */
-    size: TTabSize;
-    /** The direction that tab should be render */
-    orientation?: TTabOrientation;
-    /** The placement that tab should be render */
-    placement?: TTabPlacement;
     /** A number representing the delay value applied to bqChange event handler */
     debounceTime: number;
     /** If true, the underline divider below the tabs won't be shown  */
     disableDivider: boolean;
+    /** The direction that tab should be render */
+    orientation?: TTabOrientation;
+    /** The placement that tab should be render */
+    placement?: TTabPlacement;
+    /** The size of the tab */
+    size: TTabSize;
+    /** A string representing the id of the selected tab. */
+    value: string;
     checkDebounceChange(): void;
     checkPropValues(): void;
     /** Handler to be called when the tab value changes */