@beeq/core 1.8.0-beta.9 → 1.8.1

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

@@ -1,10 +1,59 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';
 /**
+ * The Tag Component is a UI element used to label and categorize content within an application.
+ * Tags are commonly used to label items with keywords or categories, making it easier to find and organize content.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-tag color="success" size="medium" variant="filled">Success</bq-tag>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/42f8c9-tag
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-icon
+ *
+ * @attr {string} border - The corner radius of the Tag (will override size's predefined border)
+ * @attr {boolean} clickable - If `true`, the Tag can be clickable
+ * @attr {"error" | "gray" | "info" | "success" | "warning"} color - The color style of the Tag
+ * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)
+ * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)
+ * @attr {boolean} removable - If `true`, the Tag component can be removed
+ * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)
+ * @attr {"xsmall" | "small" | "medium"} size - The size of the Tag component
+ * @attr {"outline" | "filled"} variant - The variant of Tag to apply on top of the variant
+ *
+ * @method hide - Method to be called to remove the tag component
+ * @method show - Method to be called to show the tag component
+ *
+ * @event bqClose - Callback handler to be called when the tag is close/hidden
+ * @event bqOpen - Callback handler to be called when the tag is not open/shown
+ * @event bqBlur - Handler to be called when tag loses focus
+ * @event bqClick - Handler to be called when tag is clicked
+ * @event bqFocus - Handler to be called when tag is focused
+ *
+ * @slot prefix - The prefix slot to add an icon or any other content before the text
+ * @slot - The text content of the tag
+ *
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.
  * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).
  * @part text - The `<div>` element containing the text of the tag component.
  * @part btn-close - The close button element to remove the tag component.
+ *
+ * @cssprop --bq-tag--background-color - Tag background color
+ * @cssprop --bq-tag--border-color - Tag border color
+ * @cssprop --bq-tag--border-radius - Tag border radius
+ * @cssprop --bq-tag--border-style - Tag border style
+ * @cssprop --bq-tag--border-width - Tag border width
+ * @cssprop --bq-tag--small-border-radius - Tag small border radius
+ * @cssprop --bq-tag--small-gap - Tag small gap between content
+ * @cssprop --bq-tag--small-padding-x - Tag small padding horizontal
+ * @cssprop --bq-tag--small-padding-y - Tag small padding vertical
+ * @cssprop --bq-tag--medium-gap - Tag medium gap between content
+ * @cssprop --bq-tag--medium-padding-x - Tag medium padding horizontal
+ * @cssprop --bq-tag--medium-padding-y - Tag medium padding vertical
  */
 export declare class BqTag {
     private prefixElem;

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

@@ -2,12 +2,77 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TTextareaAutoCapitalize, TTextareaWrap } from './bq-textarea.types';
 import { TInputValidation } from '../input/bq-input.types';
 /**
+ * The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-textarea maxlength="0" name="textarea" placeholder="Placeholder..." rows="5">
+ *   <label slot="label">Label</label>
+ *   <span class="flex items-center gap-xs" slot="helper-text">
+ *     <bq-icon name="star"></bq-icon>
+ *     Helper text
+ *   </span>
+ * </bq-textarea>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/16792c-textarea
+ * @status stable
+ *
+ * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.
+ * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.
+ * @attr {string} autocorrect - Controls whether or not the textarea field should have autocorrect enabled.
+ * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.
+ * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.
+ * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.
+ * @attr {boolean} disabled - If `true`, the user cannot interact with the textarea.
+ * @attr {boolean} disable-resize - If `true`, it will block the user's ability to resize the textarea.
+ * @attr {string} form - The ID of the form that the textarea field belongs to.
+ * @attr {string} form-validation-message - The native form validation message.
+ * @attr {number} maxlength - The maximum number of characters that can be entered into the textarea (`0`: no limit).
+ * @attr {string} name - The name of the textarea element.
+ * @attr {string} placeholder - The placeholder text to show when there is no value.
+ * @attr {boolean} readonly - If `true`, the textarea field cannot be modified.
+ * @attr {boolean} required - Indicates whether or not the textarea field is required to be filled out before submitting the form.
+ * @attr {number} rows - The number of visible text lines for the control. It must be a positive integer.
+ * @attr {boolean} spellcheck - If `true`, the textarea content may be checked for spelling errors.
+ * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the textarea.
+ * @attr {string} value - The value of the textarea. It can be used to reset the textarea to a previous value.
+ * @attr {"soft" | "hard"} wrap - Specifies how the text in a text area is to be wrapped when submitted in a form.
+ *
+ * @event bqBlur - Handler to be called when the textarea loses focus.
+ * @event bqChange - Handler to be called when the textarea value has changed and the textarea loses focus.
+ * @event bqClear - Handler to be called when the textarea value has been cleared.
+ * @event bqFocus - Handler to be called when the textarea has received focus.
+ * @event bqInput - Handler to be called when the textarea value changes.
+ *
+ * @slot label - The textarea label.
+ * @slot helper-text - The helper text.
+ *
  * @part base - The component's base wrapper.
  * @part input - The textarea element.
  * @part label - The textarea label.
  * @part helper-info - The helper info container.
  * @part helper-text - The helper text.
  * @part helper-counter - The helper counter.
+ *
+ * @cssprop --bq-textarea--background-color - Textarea background color
+ * @cssprop --bq-textarea--border-color - Textarea border color
+ * @cssprop --bq-textarea--border-color-focus - Textarea border color on focus
+ * @cssprop --bq-textarea--border-radius - Textarea border radius
+ * @cssprop --bq-textarea--border-width - Textarea border width
+ * @cssprop --bq-textarea--border-style - Textarea border style
+ * @cssprop --bq-textarea--helper-margin-top - Textarea helper text margin top
+ * @cssprop --bq-textarea--helper-text-color - Textarea helper text color
+ * @cssprop --bq-textarea--helper-text-size - Textarea helper text size
+ * @cssprop --bq-textarea--label-margin-bottom - Textarea label margin bottom
+ * @cssprop --bq-textarea--label-text-color - Textarea label text color
+ * @cssprop --bq-textarea--label-text-size - Textarea label text size
+ * @cssprop --bq-textarea--paddingY - Textarea padding top and bottom
+ * @cssprop --bq-textarea--padding-start - Textarea padding start
+ * @cssprop --bq-textarea--padding-end - Textarea padding end
+ * @cssprop --bq-textarea--text-color - Textarea text color
+ * @cssprop --bq-textarea--text-size - Textarea text size
+ * @cssprop --bq-textarea--text-placeholder-color - Textarea placeholder text color
  */
 export declare class BqTextarea {
     private debounceBqInput;
@@ -15,6 +80,7 @@ export declare class BqTextarea {
     private helperTextElem?;
     private labelElem?;
     private textarea;
+    internals: ElementInternals;
     el: HTMLBqTextareaElement;
     private hasHelperText;
     private hasLabel;
@@ -52,6 +118,8 @@ export declare class BqTextarea {
     disableResize?: boolean;
     /** The ID of the form that the textarea field belongs to. */
     form?: string;
+    /** The native form validation message */
+    formValidationMessage?: string;
     /**
      * The maximum number of characters that can be entered into the textarea (`0`: no limit).
      * When enabled, a character counter will be shown underneath the textarea.
@@ -85,6 +153,7 @@ export declare class BqTextarea {
     /** Specifies how the text in a text area is to be wrapped when submitted in a form */
     wrap: TTextareaWrap;
     handleValueChange(): void;
+    handleRequiredPropChange(): void;
     /** Callback handler emitted when the textarea loses focus */
     bqBlur: EventEmitter<HTMLBqTextareaElement>;
     /**
@@ -108,6 +177,8 @@ export declare class BqTextarea {
         el: HTMLBqTextareaElement;
     }>;
     componentDidLoad(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
     private get numberOfCharacters();
     private handleBlur;
     private handleFocus;
@@ -116,5 +187,8 @@ export declare class BqTextarea {
     private autoResize;
     private handleLabelSlotChange;
     private handleHelperTextSlotChange;
+    private setFormValue;
+    private updateFormValidity;
+    private clearSelection;
     render(): any;
 }

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

@@ -1,13 +1,58 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.types';
 /**
+ * Toasts are time-based components used to display short messages.
+ * Commonly used for errors, confirmations, or progress updates.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-toast type="info">
+ *   This is a message
+ * </bq-toast>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/83da51-toast
+ * @status stable
+ *
+ * @dependency bq-icon
+ *
+ * @attr {"s" | "none" | "xs2" | "xs" | "m" | "l" | "full"} border - The corder radius of the toast component
+ * @attr {"success" | "error" | "loading" | "alert" | "info"} type - Type of toast
+ * @attr {"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"} placement - Placement of toast
+ * @attr {boolean} hide-icon - If true will hide toast icon
+ * @attr {boolean} open - If true, the toast will be shown
+ * @attr {number} time - The length of time, in milliseconds, after which the toast will close itself
+ *
+ * @method show - Method to be called to show the toast component
+ * @method hide - Method to be called to hide the toast component
+ * @method toast - This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically
+ *
+ * @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 content to be displayed in the toast component.
+ * @slot icon - The icon to be displayed in the toast component.
+ *
  * @part wrapper - The component's internal wrapper inside the shadow DOM.
  * @part icon-info - The `<div>` container that holds the icon component.
  * @part base - The `<div>` container of the internal bq-icon component.
  * @part svg - The `<svg>` element of the internal bq-icon component.
  *
- * @slot - The content to be displayed in the toast component.
- * @slot icon - The icon to be displayed in the toast component.
+ * @cssprop --bq-toast--background - Toast background color
+ * @cssprop --bq-toast--box-shadow - Toast box shadow
+ * @cssprop --bq-toast--padding-y - Toast vertical padding
+ * @cssprop --bq-toast--padding-x - Toast horizontal padding
+ * @cssprop --bq-toast--gap - Toast distance between icon and text
+ * @cssprop --bq-toast--border-radius - Toast border radius
+ * @cssprop --bq-toast--border-color - Toast border color
+ * @cssprop --bq-toast--border-style - Toast border style
+ * @cssprop --bq-toast--border-width - Toast border width
+ * @cssprop --bq-toast--icon-color-info - Toast icon color when type is 'info'
+ * @cssprop --bq-toast--icon-color-success - Toast icon color when type is 'success'
+ * @cssprop --bq-toast--icon-color-alert - Toast icon color when type is 'alert'
+ * @cssprop --bq-toast--icon-color-error - Toast icon color when type is 'error'
+ * @cssprop --bq-toast--icon-color-loading - Toast icon color when type is 'loading'
+ * @cssprop --bq-toast--icon-color-custom - Toast icon color when type is 'custom'
  */
 export declare class BqToast {
     private autoDismissDebounce;

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

@@ -1,8 +1,48 @@
 import { Placement } from '../../services/interfaces';
 /**
+ * The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-tooltip visible>
+ *   Yuhu! I'm a tooltip 🙃
+ *   <bq-button slot="trigger">Hover me!</bq-button>
+ * </bq-tooltip>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/64c562-tooltip
+ * @status stable
+ *
+ * @attr {boolean} always-visible - If true, the tooltip will always be visible
+ * @attr {number} distance - Distance between trigger element and tooltip
+ * @attr {boolean} hide-arrow - If true, the arrow on the tooltip content won't be shown
+ * @attr {"top" | "right" | "bottom" | "left"} placement - Defines the position of the tooltip
+ * @attr {boolean} same-width - Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element)
+ * @attr {"click" | "hover"} display-on - Set the action when the tooltip should be displayed, on hover (default) or click
+ * @attr {boolean} visible - Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger
+ *
+ * @method show - Shows the tooltip
+ * @method hide - Hides the tooltip
+ *
+ * @slot trigger - The element which displays tooltip on hover
+ * @slot - The tooltip content
+ *
  * @part base - The component wrapper container inside the shadow DOM
  * @part trigger - The `<div>` container that holds the element which displays tooltip on hover
  * @part panel - The `<div>` container that holds the tooltip content
+ *
+ * @cssprop --bq-tooltip--background-color - Tooltip background color
+ * @cssprop --bq-tooltip--box-shadow - Tooltip box shadow
+ * @cssprop --bq-tooltip--font-size - Tooltip font size
+ * @cssprop --bq-tooltip--line-height - Tooltip line height
+ * @cssprop --bq-tooltip--text-color - Tooltip text color
+ * @cssprop --bq-tooltip--paddingX - Tooltip horizontal padding
+ * @cssprop --bq-tooltip--paddingY - Tooltip vertical padding
+ * @cssprop --bq-tooltip--border-color - Tooltip border color
+ * @cssprop --bq-tooltip--border-radius - Tooltip border radius
+ * @cssprop --bq-tooltip--border-style - Tooltip border style
+ * @cssprop --bq-tooltip--border-width - Tooltip border width
+ * @cssprop --bq-tooltip--z-index: Tooltip z-index
  */
 export declare class BqTooltip {
     private trigger;