@beeq/core 1.8.0-beta.9 → 1.8.1

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

@@ -1,6 +1,36 @@
 import { TCardBorderRadius, TCardType } from './bq-card.types';
 /**
- *  @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
+ * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.
+ * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-card type="default" border="m">
+ *   <div class="p-m">
+ *     <h3 class="text-xl font-bold">Card Title</h3>
+ *     <p class="text-m">Card content goes here</p>
+ *   </div>
+ * </bq-card>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/522abb-card
+ * @status stable
+ *
+ * @attr {"default" | "minimal"} type - Type of card component
+ * @attr {"none" | "xs2" | "xs" | "s" | "m" | "l" | "full"} border - The corner radius of the card component
+ *
+ * @slot - The content of the card component
+ *
+ * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
+ *
+ * @cssprop --bq-card--borderColor - Card border color
+ * @cssprop --bq-card--borderRadius - Card border radius
+ * @cssprop --bq-card--borderStyle - Card border style
+ * @cssprop --bq-card--borderWidth - Card border width
+ *
+ * @cssprop --bq-card--padding - Card padding
+ * @cssprop --bq-card--paddingMinimal - Minimal card padding
+ * @cssprop --bq-card--background - Card background color
  */
 export declare class BqCard {
     el: HTMLBqCardElement;

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

@@ -1,10 +1,47 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * The checkbox is a UI component that allows users to select one or more options from a list of choices.
+ * It is commonly used in forms, surveys, and settings pages.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-checkbox name="bq-checkbox" value="checkbox-value" background-on-hover>
+ *   Checkbox label
+ * </bq-checkbox>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox
+ * @status stable
+ *
+ * @attr {boolean} background-on-hover - If true checkbox displays background on hover
+ * @attr {string} form-id - The form ID that the checkbox is associated with
+ * @attr {string} form-validation-message - The native form validation message
+ * @attr {boolean} checked - If true checkbox is checked
+ * @attr {boolean} disabled - If true checkbox is disabled
+ * @attr {boolean} indeterminate - A state that is neither checked nor unchecked
+ * @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 checkbox before the owning form can be submitted
+ * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name
+ *
+ * @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 checkbox state changes
+ * @event bqFocus - Handler to be called when the checkbox gets focus
+ * @event bqBlur - Handler to be called when the checkbox loses focus
+ *
+ * @slot - The content of the checkbox component
+ *
  * @part base - The component's internal wrapper of the checkbox component.
  * @part control - The container `<div>` element that holds the custom checkbox.
  * @part input - The native HTML `<input type="checkbox">` used under the hood.
  * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.
  * @part label - The `<span>` element that holds the text content.
+ *
+ * @cssprop --bq-checkbox--size - Checkbox size
+ * @cssprop --bq-checkbox--border-radius - Checkbox border radius
+ * @cssprop --bq-checkbox--border-width - Checkbox border width
  */
 export declare class BqCheckbox {
     private inputElem;
@@ -60,7 +97,6 @@ export declare class BqCheckbox {
     vBlur(): Promise<void>;
     private setFormValue;
     private updateFormValidity;
-    private clearSelection;
     private handleChange;
     private handleOnFocus;
     private handleOnBlur;

package/dist/types/components/date-picker/bq-date-picker.d.ts

@@ -3,8 +3,95 @@ import { DaysOfWeek, TDatePickerType } from './bq-date-picker.types';
 import { Placement } from '../../services/interfaces';
 import { TInputValidation } from '../input/bq-input.types';
 /**
+ * The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-date-picker
+ *   first-day-of-week="1"
+ *   locale="en-GB"
+ *   months-per-view="single"
+ *   months="2"
+ *   name="bq-date-picker"
+ *   placeholder="Enter your date"
+ *   placement="bottom-end"
+ *   show-outside-days="false"
+ *   type="range"
+ *   validation-status="none"
+ *   value="2024-05-25"
+ * >
+ *   <label class="flex flex-grow items-center" slot="label">
+ *     Date picker label
+ *   </label>
+ * </bq-date-picker>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-dropdown
+ * @dependency bq-icon
+ *
+ * @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.
+ * @attr {string} clear-button-label - The clear button aria label.
+ * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.
+ * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.
+ * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.
+ * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
+ * @attr {Intl.DateTimeFormatOptions} format-options - 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
+ * @attr {string} form - The ID of the form that the Date picker input belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
+ * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
+ * @attr {Intl.LocalesArgument} locale - 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
+ * @attr {string} max - The latest date that can be selected.
+ * @attr {string} min - The earliest date that can be selected.
+ * @attr {number} months - Number of months to show when range is `true`.
+ * @attr {string} name - The Date picker input name.
+ * @attr {boolean} open - If `true`, the Date picker panel will be visible.
+ * @attr {string} panel-height - When set, it will override the height of the Date picker panel.
+ * @attr {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} placement - Position of the Date picker panel.
+ * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.
+ * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.
+ * @attr {boolean} show-outside-days - Whether to show days outside the month.
+ * @attr {string} strategy - Defines the strategy to position the Date picker panel.
+ * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.
+ * @attr {"single" | "multi" | "range"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.
+ * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the Select input.
+ * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
+ *
+ * @method clear - Clears the selected 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.
+ *
  * @part base - The component's base wrapper.
  * @part button - The native HTML button used under the hood in the clear button.
+ * @part calendar__button - Any button used in the calendar-month component.
+ * @part calendar__button - Any button within the calendar-range component.
+ * @part calendar__container - The calendar-range container for the entire component.
+ * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.
+ * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.
+ * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.
+ * @part calendar__head - The calendar-month table's header row.
+ * @part calendar__header - The calendar-range container for the heading and buttons.
+ * @part calendar__heading - The calendar-month heading container that labels the month.
+ * @part calendar__heading - The calendar-range heading containing the month and year.
+ * @part calendar__next - The next page button on the calendar-range component.
+ * @part calendar__outside - Any days which are outside the current month.
+ * @part calendar__previous - The previous page button on the calendar-range component.
+ * @part calendar__range-end - The day at the end of a date range.
+ * @part calendar__range-inner - Any days between the start and end of a date range.
+ * @part calendar__range-start - The day at the start of a date range.
+ * @part calendar__selected - Any days which are selected.
+ * @part calendar__table - The calendar-month <table> element.
+ * @part calendar__td - The calendar-month table's body cells.
+ * @part calendar__th - The calendar-month table's header cells.
+ * @part calendar__today - The Today's day.
+ * @part calendar__tr - Any row within the table on the calendar-month component.
+ * @part calendar__week - The calendar-month table's body rows.
  * @part clear-btn - The clear button.
  * @part control - The input control wrapper.
  * @part input - The native HTML input element used under the hood.
@@ -12,33 +99,30 @@ import { TInputValidation } from '../input/bq-input.types';
  * @part panel - The date picker panel container
  * @part prefix - The prefix slot container.
  * @part suffix - The suffix slot container.
-
-// Parts from the Cally library for calendar-date and calendar-range components:
- * @part calendar__container - The container for the entire component.
- * @part calendar__header - The container for heading and button's.
- * @part calendar__button - Any button within the component.
- * @part calendar__previous - The previous page button.
- * @part calendar__next - The next page button.
- * @part calendar__disabled - A button that is disabled due to min/max.
- * @part calendar__heading - The heading containing the month and year.
-
-// Parts specific to the calendar-month component:
- * @part calendar__heading - The heading that labels the month.
- * @part calendar__table - The <table> element.
- * @part calendar__tr - Any row within the table.
- * @part calendar__head - The table's header row.
- * @part calendar__week - The table's body rows.
- * @part calendar__th - The table's header cells.
- * @part calendar__td - The table's body cells.
- * @part calendar__button - Any button used in the component.
- * @part calendar__day - The buttons corresponding to each day in the grid.
- * @part calendar__selected - Any days which are selected.
- * @part calendar__today - Today's day.
- * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.
- * @part calendar__outside - Any days which are outside the current month.
- * @part calendar__range-start - The day at the start of a date range.
- * @part calendar__range-end - The day at the end of a date range.
- * @part calendar__range-inner - Any days between the start and end of a date range.
+ *
+ * @cssprop --bq-date-picker--background-color - Date picker background color.
+ * @cssprop --bq-date-picker--border-color - Date picker border color.
+ * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.
+ * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.
+ * @cssprop --bq-date-picker--border-radius - Date picker border radius.
+ * @cssprop --bq-date-picker--border-style - Date picker border style.
+ * @cssprop --bq-date-picker--border-width - Date picker border width.
+ * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.
+ * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.
+ * @cssprop --bq-date-picker--day-size - Date picker button day size.
+ * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.
+ * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.
+ * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.
+ * @cssprop --bq-date-picker--label-text-color - Date picker label text color.
+ * @cssprop --bq-date-picker--label-text-size - Date picker label text size.
+ * @cssprop --bq-date-picker--padding-end - Date picker padding end.
+ * @cssprop --bq-date-picker--padding-start - Date picker padding start.
+ * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.
+ * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.
+ * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.
+ * @cssprop --bq-date-picker--text-color - Date picker text color.
+ * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.
+ * @cssprop --bq-date-picker--text-size - Date picker text size.
  */
 export declare class BqDatePicker {
     private callyElem?;
@@ -49,6 +133,7 @@ export declare class BqDatePicker {
     private fallbackInputId;
     private readonly COMMON_EXPORT_PARTS;
     private readonly BUTTON_EXPORT_PARTS;
+    internals: ElementInternals;
     el: HTMLBqDatePickerElement;
     focusedDate: string;
     displayDate: string;
@@ -78,6 +163,8 @@ export declare class BqDatePicker {
     formatOptions: Intl.DateTimeFormatOptions;
     /** The ID of the form that the Date picker input belongs to. */
     form?: string;
+    /** The native form validation message (mandatory if `required` is set) */
+    formValidationMessage?: string;
     /** A function that takes a date and returns true if the date should not be selectable */
     isDateDisallowed?: (date: Date) => boolean;
     /** The locale for formatting dates. If not set, will use the browser's locale.
@@ -148,8 +235,10 @@ export declare class BqDatePicker {
     bqClear: EventEmitter<HTMLBqDatePickerElement>;
     /** Callback handler emitted when the input has received focus */
     bqFocus: EventEmitter<HTMLBqDatePickerElement>;
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     componentWillLoad(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
     handleOpenChange(ev: CustomEvent<{
         open: boolean;
     }>): void;
@@ -197,6 +286,7 @@ export declare class BqDatePicker {
      */
     private formatFocusedDate;
     private formatDisplayValue;
+    private updateFormValidity;
     private get CalendarType();
     render(): any;
 }

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

@@ -1,13 +1,81 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TDialogBorderRadius, TDialogFooterAppearance, TDialogSize } from './bq-dialog.types';
 /**
- * @part body - The `<main>` that holds the dialog body content
- * @part button-close - The button that close the dialog on click
- * @part content - The `<div>` container that holds the dialog title and body content
- * @part dialog - The `<dialog>` wrapper container inside the shadow DOM
- * @part footer - The `<footer>` that holds footer content
- * @part header - The `<header>` that holds the icon, title, description and close button
- * @part title - The `<div>` that holds the title content
+ * The Dialog component is used to display additional content or prompt a user for action.
+ * It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-dialog footer-appearance="standard" border="m" size="medium">
+ *   <h5 class="bold flex items-center gap-s" slot="title">
+ *     <bq-icon name="info" size="30" color="text--accent" role="img" title="Info"></bq-icon>
+ *     Title
+ *   </h5>
+ *   <p>
+ *     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+ *     standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+ *     type specimen book.
+ *   </p>
+ *   <div class="flex gap-xs" slot="footer">
+ *     <bq-button appearance="link">Button</bq-button>
+ *     <bq-button variant="ghost">Button</bq-button>
+ *     <bq-button variant="standard" slot="footer">Button</bq-button>
+ *   </div>
+ * </bq-dialog>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/15b6fc-dialog
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-icon
+ *
+ * @attr {"none" | "xs2" | "xs" | "s" | "m" | "l" | "full"} border - Border radius of the dialog component.
+ * @attr {boolean} disable-backdrop - If true, the backdrop overlay won't be shown when the dialog opens.
+ * @attr {boolean} disable-close-esc-keydown - If true, the dialog will not close when the [Esc] key is pressed.
+ * @attr {boolean} disable-close-click-outside - If true, the dialog will not close when clicking on the backdrop overlay.
+ * @attr {"standard" | "highlight"} footer-appearance - The appearance of the footer.
+ * @attr {boolean} hide-close-button - If true, it hides the close button.
+ * @attr {boolean} open - If true, the dialog will be shown as open.
+ * @attr {"small" | "medium" | "large"} size - The size of the dialog.
+ *
+ * @method show - Open the dialog.
+ * @method hide - Closes the dialog.
+ * @method cancel - Dismiss or cancel the dialog.
+ *
+ * @event bqCancel - Callback handler emitted when the dialog has been canceled or dismissed.
+ * @event bqClose - Callback handler emitted when the dialog will close.
+ * @event bqOpen - Callback handler emitted when the dialog will open.
+ * @event bqAfterOpen - Callback handler emitted when the dialog finish opening.
+ * @event bqAfterClose - Callback handler emitted when the dialog finish closing.
+ *
+ * @slot title - The title content of the dialog.
+ * @slot - The body content of the dialog.
+ * @slot footer - The footer content of the dialog.
+ * @slot button-close - The close button content of the dialog.
+ *
+ * @part body - The `<main>` that holds the dialog body content.
+ * @part button-close - The button that closes the dialog on click.
+ * @part content - The `<div>` container that holds the dialog title and body content.
+ * @part dialog - The `<dialog>` wrapper container inside the shadow DOM.
+ * @part footer - The `<footer>` that holds footer content.
+ * @part header - The `<header>` that holds the icon, title, description and close button.
+ * @part title - The `<div>` that holds the title content.
+ *
+ * @cssprop --bq-dialog--background - Dialog background color
+ * @cssprop --bq-dialog--background-backdrop - Dialog backdrop background color
+ * @cssprop --bq-dialog--box-shadow - Dialog box shadow
+ * @cssprop --bq-dialog--border-color - Dialog border color
+ * @cssprop --bq-dialog--border-style - Dialog border style
+ * @cssprop --bq-dialog--border-width - Dialog border width
+ * @cssprop --bq-dialog--border-radius - Dialog border radius
+ * @cssprop --bq-dialog--padding - Dialog padding
+ * @cssprop --bq-dialog--content-footer-gap - Dialog gap distance between content and footer elements
+ * @cssprop --bq-dialog--title-body-gap - Dialog gap distance between title and body elements
+ * @cssprop --bq-dialog--width-small - Dialog small width
+ * @cssprop --bq-dialog--width-medium - Dialog medium width
+ * @cssprop --bq-dialog--width-large - Dialog large width
+ * @cssprop --bq-dialog-z-index - Dialog z-index applied when opened
  */
 export declare class BqDialog {
     private dialogElem;
@@ -18,7 +86,7 @@ export declare class BqDialog {
     el: HTMLBqDialogElement;
     private hasContent;
     private hasFooter;
-    /** Corder radius of the dialog component */
+    /** Border radius of the dialog component */
     border: TDialogBorderRadius;
     /** If true, the backdrop overlay won't be shown when the dialog opens */
     disableBackdrop: boolean;

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

@@ -1,10 +1,37 @@
 import { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from './bq-divider.types';
 /**
+ * The Divider component is used to visually separate content in a layout.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-divider orientation="horizontal" stroke-color="stroke--primary" title-alignment="middle">
+ *   <span slot="title">Divider Title</span>
+ * </bq-divider>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/53dfe6-divider
+ * @status stable
+ *
+ * @attr {boolean} dashed - If true, the divider has a dashed pattern.
+ * @attr {"horizontal" | "vertical"} orientation - The default orientation of the divider.
+ * @attr {string} stroke-color - Set the stroke color of the divider. The value should be a valid value of the palette color.
+ * @attr {"start" | "middle" | "end"} title-alignment - Set the alignment of the title on the main axis of the divider (horizontal / vertical).
+ * @attr {number} stroke-dash-width - Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.
+ * @attr {number} stroke-dash-gap - Set the gap of the divider's stroke. This is applicable when the stroke is dashed.
+ * @attr {number} stroke-thickness - Set the thickness of the divider's stroke. Value expressed in px.
+ * @attr {number} stroke-basis - Set the min width of the divider's stroke when text is not centered. Value expressed in px.
+ * @attr {"square" | "round" | "butt"} stroke-linecap - Set the line of the divider's stroke. This is applicable when the stroke is dashed.
+ *
+ * @slot - The title content of the divider.
+ *
  * @part base - The component's internal wrapper.
- * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke
- * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke
- * @part dash-start-line - The component's internal line component of the divider's stroke
- * @part dash-end-line - The component's internal line component of the divider's stroke
+ * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke.
+ * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke.
+ * @part dash-start-line - The component's internal line component of the divider's stroke.
+ * @part dash-end-line - The component's internal line component of the divider's stroke.
+ *
+ * @cssprop --bq-divider--color - Divider color
+ * @cssprop --bq-divider--title-marginX - Divider space between title and delimiters
  */
 export declare class BqDivider {
     private titleElem;

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

@@ -1,15 +1,65 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TDrawerPlacement, TDrawerPosition } from './bq-drawer.types';
 /**
- * @part backdrop - The `<div>` that holds the backdrop overlay
- * @part button-close - The BqButton that closes the drawer
- * @part button-close__btn - The native button used under the hood that closes the drawer
- * @part button-close__label - The text inside the native button that closes the drawer
- * @part panel - The `<div>` that holds the drawer entire content
- * @part header - The `<header>` that holds the icon, title, and close button
- * @part title - The `<div>` that holds the title content
- * @part body - The `<main>` that holds the drawer body content
- * @part footer - The `<footer>` that holds footer content
+ * The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-drawer position="end">
+ *   <div class="flex gap-xs" slot="title">Title</div>
+ *   <div class="...">
+ *     Content
+ *   </div>
+ *   <div class="flex flex-1 justify-center gap-xs" slot="footer">
+ *     <bq-button appearance="primary" block="" size="small">Button</bq-button>
+ *     <bq-button appearance="link" block="" size="small">Button</bq-button>
+ *   </div>
+ * </bq-drawer>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/871139-drawer
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-icon
+ * @dependency bq-divider
+ *
+ * @attr {boolean} enable-backdrop - If true, the backdrop overlay will be shown when the drawer opens.
+ * @attr {boolean} close-on-click-outside - If true, the drawer will not close when clicking outside the panel.
+ * @attr {boolean} close-on-esc - If true, the drawer will not close when the [Esc] key is pressed.
+ * @attr {boolean} open - If true, the drawer component will be shown.
+ * @attr {"start" | "end"} position - Defines the position of the drawer.
+ *
+ * @method show - Method to be called to show the drawer component.
+ * @method hide - Method to be called to hide the drawer component.
+ *
+ * @event bqClose - Callback handler to be called when the drawer is closed.
+ * @event bqOpen - Callback handler to be called when the drawer is opened.
+ * @event bqAfterOpen - Callback handler to be called after the drawer has been opened.
+ * @event bqAfterClose - Callback handler to be called after the drawer has been closed.
+ *
+ * @slot title - The title content of the drawer.
+ * @slot - The body content of the drawer.
+ * @slot footer - The footer content of the drawer.
+ * @slot button-close - The close button content of the drawer.
+ * @slot footer-divider - The footer divider content of the drawer.
+ *
+ * @part backdrop - The `<div>` that holds the backdrop overlay.
+ * @part button-close - The BqButton that closes the drawer.
+ * @part button-close__btn - The native button used under the hood that closes the drawer.
+ * @part button-close__label - The text inside the native button that closes the drawer.
+ * @part panel - The `<div>` that holds the drawer entire content.
+ * @part header - The `<header>` that holds the icon, title, and close button.
+ * @part title - The `<div>` that holds the title content.
+ * @part body - The `<main>` that holds the drawer body content.
+ * @part footer - The `<footer>` that holds footer content.
+ *
+ * @cssprop --bq-drawer--backgroundBackdrop - Background color of the backdrop
+ * @cssprop --bq-drawer--gap - Gap between the drawer and the viewport
+ * @cssprop --bq-drawer--width - Width of the drawer
+ * @cssprop --bq-drawer--paddingX - Padding left and right of the drawer
+ * @cssprop --bq-drawer--paddingY - Padding top and bottom of the drawer
+ * @cssprop --bq-drawer--zIndex - Z-index of the drawer component
  */
 export declare class BqDrawer {
     private footerElem;

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

@@ -1,10 +1,58 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '../../services/interfaces';
 /**
+ * The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.
+ * They provide an efficient way to save space and present a long list of options in a compact and organized manner.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-dropdown placement="bottom-start">
+ *   <bq-button slot="trigger">Dropdown</bq-button>
+ *   <bq-option-list>
+ *     <bq-option value="users">...</bq-option>
+ *     <bq-option value="user">...</bq-option>
+ *     <bq-option value="dashboard">...</bq-option>
+ *     <bq-option value="settings">...</bq-option>
+ *     <bq-option value="logout">...</bq-option>
+ *   </bq-option-list>
+ * </bq-dropdown>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/47ff4b-dropdown
+ * @status stable
+ *
+ * @dependency bq-panel
+ *
+ * @attr {boolean} disabled - If true, the dropdown panel will be visible and won't be shown.
+ * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.
+ * @attr {boolean} keep-open-on-select - If true, the panel will remain open after a selection is made.
+ * @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 {string} panel-height - When set, it will override the height of the dropdown panel.
+ * @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.
+ *
+ * @event bqOpen - Callback handler to be called when the dropdown panel is opened or closed.
+ *
+ * @slot trigger - The trigger element that opens the dropdown panel.
+ * @slot - The content of the dropdown panel.
+ *
  * @part base - The component's internal wrapper.
- * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel
- * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element
- * @part trigger - The `<div>` element that hosts the trigger element
+ * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel.
+ * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.
+ * @part trigger - The `<div>` element that hosts the trigger element.
+ *
+ * @cssprop --bq-panel--background - Panel background color
+ * @cssprop --bq-panel--border-color - Panel border color
+ * @cssprop --bq-panel--border-radius - Panel border radius
+ * @cssprop --bq-panel--border-style - Panel border style
+ * @cssprop --bq-panel--border-width - Panel border width
+ * @cssprop --bq-panel--box-shadow - Panel box shadow
+ * @cssprop --bq-panel--padding - Panel padding
+ * @cssprop --bq-panel--height - Panel height
+ * @cssprop --bq-panel--width - Panel width
+ * @cssprop --bq-panel-z-index - Panel z-index applied when opened
  */
 export declare class BqDropdown {
     private dropdownPanelId;

package/dist/types/components/empty-state/bq-empty-state.d.ts

@@ -1,5 +1,23 @@
 import { TEmptyStateSize } from './bq-empty-state.types';
 /**
+ * An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-empty-state size="medium">Title</bq-empty-state>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/673ae0-empty-state/b/09d7b1
+ * @status stable
+ *
+ * @dependency bq-icon
+ *
+ * @attr {"large" | "medium" | "small"} size - The size of the empty state component
+ *
+ * @slot thumbnail - The element that wraps the thumbnail element
+ * @slot body - The content to be displayed after the thumbnail section
+ * @slot footer - The content to be displayed after the body section as footer
+ *
  * @part body - The container `<div>` that wraps the alert description content
  * @part footer - The container `<div>` that wraps the alert footer content
  * @part icon - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)

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

@@ -1,10 +1,30 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TIconWeight } from './bq-icon.types';
 /**
- * Icons are simplified images that graphically explain the meaning of an object on the screen.
+ * The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.
+ * It is a small graphical element that is used to enhance the user interface and improve user experience.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-icon color="text--brand" name="bell-ringing" size="24"></bq-icon>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/675fad-icon
+ * @status stable
+ *
+ * @attr {string} color - Set the stroke color of the SVG. The value should be a valid value of the palette color.
+ * @attr {string} label - Label for the icon, used for accessibility.
+ * @attr {string} name - Icon name to load. Please check all available icons [here](https://phosphoricons.com/).
+ * @attr {string | number} size - Set the size of the SVG.
+ * @attr {string} src - Set the source of the SVG. If the source is set, the name property will be ignored.
+ *
+ * @event svgLoaded - Callback handler to be called when the SVG has loaded.
  *
  * @part base - The component's internal wrapper that holds the icon SVG content.
  * @part svg - The `<svg>` tag element inside the component.
+ *
+ * @cssprop --bq-icon--color - The stroke color of the SVG.
+ * @cssprop --bq-icon--size - The size of the SVG.
  */
 export declare class BqIcon {
     private _svgContent;