@beeq/core 1.10.0-beta.6 → 1.10.0

package/dist/beeq.html-custom-data.json

@@ -40,43 +40,33 @@
       "references": []
     },
     {
-      "name": "bq-avatar",
-      "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **badge** - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.\n\n### **CSS Properties:**\n - **--bq-avatar--background** - Avatar background color _(default: undefined)_\n- **--bq-avatar--border-color** - Avatar border color _(default: undefined)_\n- **--bq-avatar--border-style** - Avatar border style _(default: undefined)_\n- **--bq-avatar--border-width** - Avatar border width _(default: undefined)_\n- **--bq-avatar--border-radius-circle** - Avatar border radius for circle & any size _(default: undefined)_\n- **--bq-avatar--border-radius-squareXs** - Avatar border radius for square & size xsmall _(default: undefined)_\n- **--bq-avatar--border-radius-squareS** - Avatar border radius for square & size small _(default: undefined)_\n- **--bq-avatar--border-radius-squareM** - Avatar border radius for square & size medium/large _(default: undefined)_\n- **--bq-avatar--size-xsmall** - Avatar xsmall size _(default: undefined)_\n- **--bq-avatar--size-small** - Avatar small size _(default: undefined)_\n- **--bq-avatar--size-medium** - Avatar medium size _(default: undefined)_\n- **--bq-avatar--size-large** - Avatar large size _(default: undefined)_\n- **--bq-avatar--badge-top-square** - Badge top position shape square _(default: undefined)_\n- **--bq-avatar--badge-left-square** - Badge left position shape square _(default: undefined)_\n- **--bq-avatar--badge-top-circle** - Badge top position shape circle _(default: undefined)_\n- **--bq-avatar--badge-left-circle** - Badge left position shape circle _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **img** - The `<image>` tag element that load the image source.\n- **text** - The `<span>` tag element that rendered the `Initials` text string.\n- **badge** - The container that wraps the badge slot element.",
+      "name": "bq-accordion-group",
+      "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot where the bq-accordion elements are placed.\n\n### **CSS Properties:**\n - **--bq-accordion-group--gap** - Accordion group distance between elements _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
-          "name": "alt-text",
-          "description": "Alternate text for the avatar image if the image cannot be displayed.",
-          "values": []
+          "name": "appearance",
+          "description": "The appearance style of accordion to be applied to all accordions",
+          "values": [{ "name": "filled" }, { "name": "ghost" }]
         },
         {
-          "name": "image",
-          "description": "The image source to load on the avatar (this can be also a base64 encoded image).",
+          "name": "expandAll",
+          "description": "If true all accordions are expanded",
           "values": []
         },
         {
-          "name": "label",
-          "description": "A text to use for describing the avatar on assistive devices.",
+          "name": "no-animation",
+          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.",
           "values": []
         },
         {
-          "name": "initials",
-          "description": "The text to display on avatar.",
+          "name": "multiple",
+          "description": "If true multiple accordions can be expanded at the same time",
           "values": []
         },
-        {
-          "name": "shape",
-          "description": "The shape of the avatar.",
-          "values": [{ "name": "circle" }, { "name": "square" }]
-        },
         {
           "name": "size",
-          "description": "The size of the avatar.",
-          "values": [
-            { "name": "xsmall" },
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
+          "description": "The size of accordion to be applied to all accordions",
+          "values": [{ "name": "small" }, { "name": "medium" }]
         }
       ],
       "references": []
@@ -143,33 +133,69 @@
       "references": []
     },
     {
-      "name": "bq-accordion-group",
-      "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot where the bq-accordion elements are placed.\n\n### **CSS Properties:**\n - **--bq-accordion-group--gap** - Accordion group distance between elements _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "bq-avatar",
+      "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **badge** - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.\n\n### **CSS Properties:**\n - **--bq-avatar--background** - Avatar background color _(default: undefined)_\n- **--bq-avatar--border-color** - Avatar border color _(default: undefined)_\n- **--bq-avatar--border-style** - Avatar border style _(default: undefined)_\n- **--bq-avatar--border-width** - Avatar border width _(default: undefined)_\n- **--bq-avatar--border-radius-circle** - Avatar border radius for circle & any size _(default: undefined)_\n- **--bq-avatar--border-radius-squareXs** - Avatar border radius for square & size xsmall _(default: undefined)_\n- **--bq-avatar--border-radius-squareS** - Avatar border radius for square & size small _(default: undefined)_\n- **--bq-avatar--border-radius-squareM** - Avatar border radius for square & size medium/large _(default: undefined)_\n- **--bq-avatar--size-xsmall** - Avatar xsmall size _(default: undefined)_\n- **--bq-avatar--size-small** - Avatar small size _(default: undefined)_\n- **--bq-avatar--size-medium** - Avatar medium size _(default: undefined)_\n- **--bq-avatar--size-large** - Avatar large size _(default: undefined)_\n- **--bq-avatar--badge-top-square** - Badge top position shape square _(default: undefined)_\n- **--bq-avatar--badge-left-square** - Badge left position shape square _(default: undefined)_\n- **--bq-avatar--badge-top-circle** - Badge top position shape circle _(default: undefined)_\n- **--bq-avatar--badge-left-circle** - Badge left position shape circle _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **img** - The `<image>` tag element that load the image source.\n- **text** - The `<span>` tag element that rendered the `Initials` text string.\n- **badge** - The container that wraps the badge slot element.",
       "attributes": [
         {
-          "name": "appearance",
-          "description": "The appearance style of accordion to be applied to all accordions",
-          "values": [{ "name": "filled" }, { "name": "ghost" }]
+          "name": "alt-text",
+          "description": "Alternate text for the avatar image if the image cannot be displayed.",
+          "values": []
         },
         {
-          "name": "expandAll",
-          "description": "If true all accordions are expanded",
+          "name": "image",
+          "description": "The image source to load on the avatar (this can be also a base64 encoded image).",
           "values": []
         },
         {
-          "name": "no-animation",
-          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.",
+          "name": "label",
+          "description": "A text to use for describing the avatar on assistive devices.",
           "values": []
         },
         {
-          "name": "multiple",
-          "description": "If true multiple accordions can be expanded at the same time",
+          "name": "initials",
+          "description": "The text to display on avatar.",
           "values": []
         },
+        {
+          "name": "shape",
+          "description": "The shape of the avatar.",
+          "values": [{ "name": "circle" }, { "name": "square" }]
+        },
         {
           "name": "size",
-          "description": "The size of accordion to be applied to all accordions",
-          "values": [{ "name": "small" }, { "name": "medium" }]
+          "description": "The size of the avatar.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "bq-badge",
+      "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the badge. The content can be a number or a text.\n\n### **CSS Properties:**\n - **--bq-badge--background-color** - The badge background color _(default: undefined)_\n- **--bq-badge--box-shadow** - The badge box shadow _(default: undefined)_\n- **--bq-badge--border-color** - The badge border color _(default: undefined)_\n- **--bq-badge--border-radius** - The badge border radius _(default: undefined)_\n- **--bq-badge--border-style** - The badge border style _(default: undefined)_\n- **--bq-badge--border-width** - The badge border width _(default: undefined)_\n- **--bq-badge--size-small** - The badge small size _(default: undefined)_\n- **--bq-badge--size-medium** - The badge medium size _(default: undefined)_\n- **--bq-badge--size-large** - The badge large size _(default: undefined)_\n- **--bq-badge--text-color** - The badge text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the count.\n- **number** - The component's internal wrapper that holds the slot.",
+      "attributes": [
+        {
+          "name": "background-color",
+          "description": "Badge background color. The value should be a valid value of the palette color.",
+          "values": []
+        },
+        {
+          "name": "text-color",
+          "description": "Badge number color. The value should be a valid value of the palette color.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the badge. Relevant if badge has no content.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         }
       ],
       "references": []
@@ -208,32 +234,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-badge",
-      "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the badge. The content can be a number or a text.\n\n### **CSS Properties:**\n - **--bq-badge--background-color** - The badge background color _(default: undefined)_\n- **--bq-badge--box-shadow** - The badge box shadow _(default: undefined)_\n- **--bq-badge--border-color** - The badge border color _(default: undefined)_\n- **--bq-badge--border-radius** - The badge border radius _(default: undefined)_\n- **--bq-badge--border-style** - The badge border style _(default: undefined)_\n- **--bq-badge--border-width** - The badge border width _(default: undefined)_\n- **--bq-badge--size-small** - The badge small size _(default: undefined)_\n- **--bq-badge--size-medium** - The badge medium size _(default: undefined)_\n- **--bq-badge--size-large** - The badge large size _(default: undefined)_\n- **--bq-badge--text-color** - The badge text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the count.\n- **number** - The component's internal wrapper that holds the slot.",
-      "attributes": [
-        {
-          "name": "background-color",
-          "description": "Badge background color. The value should be a valid value of the palette color.",
-          "values": []
-        },
-        {
-          "name": "text-color",
-          "description": "Badge number color. The value should be a valid value of the palette color.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the badge. Relevant if badge has no content.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-button",
       "description": "Buttons are designed for users to take action on a page or a screen.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n<bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\nGo back\n</bq-button>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when button gets focus\n- **bqClick** - Handler to be called when the button is clicked\n- **bqBlur** - Handler to be called when the button loses focus.\n- **bqFocus** - Handler to be called when the button gets focus.\n- **bqClick** - Handler to be called when the button is clicked.\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the button label\n- _default_ - The button label content\n- **suffix** - The suffix content to be displayed after the button label\n\n### **CSS Properties:**\n - **--bq-button--border-color** - Button border color _(default: undefined)_\n- **--bq-button--border-radius** - Button border radius _(default: undefined)_\n- **--bq-button--border-style** - Button border style _(default: undefined)_\n- **--bq-button--border-width** - Button border width _(default: undefined)_\n- **--bq-button--small-height** - Button small height _(default: undefined)_\n- **--bq-button--small-paddingX** - Button small padding block (top and bottom) _(default: undefined)_\n- **--bq-button--small-paddingY** - Button small padding inline (left and right) _(default: undefined)_\n- **--bq-button--small-font-size** - Button small font size _(default: undefined)_\n- **--bq-button--medium-height** - Button medium height _(default: undefined)_\n- **--bq-button--medium-paddingX** - Button medium padding block (top and bottom) _(default: undefined)_\n- **--bq-button--medium-paddingY** - Button medium padding inline (left and right) _(default: undefined)_\n- **--bq-button--medium-font-size** - Button medium font size _(default: undefined)_\n- **--bq-button--large-height** - Button large height _(default: undefined)_\n- **--bq-button--large-paddingX** - Button large padding block (top and bottom) _(default: undefined)_\n- **--bq-button--large-paddingY** - Button large padding inline (left and right) _(default: undefined)_\n- **--bq-button--large-font-size** - Button large font size _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The `<a>` or `<button>` HTML element used under the hood.\n- **prefix** - The `<span>` tag element that acts as prefix container.\n- **label** - The `<span>` tag element that renders the text of the button.\n- **suffix** - The `<span>` tag element that acts as suffix container.",
@@ -695,6 +695,39 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-drawer",
+      "description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
+      "attributes": [
+        {
+          "name": "enable-backdrop",
+          "description": "If true, the backdrop overlay will be shown when the drawer opens.",
+          "values": []
+        },
+        {
+          "name": "close-on-click-outside",
+          "description": "If true, the drawer will not close when clicking outside the panel.",
+          "values": []
+        },
+        {
+          "name": "close-on-esc",
+          "description": "If true, the drawer will not close when the [Esc] key is pressed.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "If true, the drawer component will be shown.",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "Defines the position of the drawer.",
+          "values": [{ "name": "start" }, { "name": "end" }]
+        },
+        { "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
+      ],
+      "references": []
+    },
     {
       "name": "bq-dropdown",
       "description": "The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\nThey provide an efficient way to save space and present a long list of options in a compact and organized manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dropdown placement=\"bottom-start\">\n<bq-button slot=\"trigger\">Dropdown</bq-button>\n<bq-option-list>\n<bq-option value=\"users\">...</bq-option>\n<bq-option value=\"user\">...</bq-option>\n<bq-option value=\"dashboard\">...</bq-option>\n<bq-option value=\"settings\">...</bq-option>\n<bq-option value=\"logout\">...</bq-option>\n</bq-option-list>\n</bq-dropdown>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n- **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n\n### **Methods:**\n - **onClickOutside(event: _MouseEvent_)** - Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component.\n\n### **Slots:**\n - **trigger** - The trigger element that opens the dropdown panel.\n- _default_ - The content of the dropdown panel.\n\n### **CSS Properties:**\n - **--bq-panel--background** - Panel background color _(default: undefined)_\n- **--bq-panel--border-color** - Panel border color _(default: undefined)_\n- **--bq-panel--border-radius** - Panel border radius _(default: undefined)_\n- **--bq-panel--border-style** - Panel border style _(default: undefined)_\n- **--bq-panel--border-width** - Panel border width _(default: undefined)_\n- **--bq-panel--box-shadow** - Panel box shadow _(default: undefined)_\n- **--bq-panel--padding** - Panel padding _(default: undefined)_\n- **--bq-panel--height** - Panel height _(default: undefined)_\n- **--bq-panel--width** - Panel width _(default: undefined)_\n- **--bq-panel-z-index** - Panel z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dropdown** - The `<bq-panel>` element used under the hood to display the dropdown panel.\n- **panel** - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n- **trigger** - The `<div>` element that hosts the trigger element.",
@@ -761,39 +794,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-drawer",
-      "description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
-      "attributes": [
-        {
-          "name": "enable-backdrop",
-          "description": "If true, the backdrop overlay will be shown when the drawer opens.",
-          "values": []
-        },
-        {
-          "name": "close-on-click-outside",
-          "description": "If true, the drawer will not close when clicking outside the panel.",
-          "values": []
-        },
-        {
-          "name": "close-on-esc",
-          "description": "If true, the drawer will not close when the [Esc] key is pressed.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "If true, the drawer component will be shown.",
-          "values": []
-        },
-        {
-          "name": "position",
-          "description": "Defines the position of the drawer.",
-          "values": [{ "name": "start" }, { "name": "end" }]
-        },
-        { "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
-      ],
-      "references": []
-    },
     {
       "name": "bq-empty-state",
       "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -1013,24 +1013,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-option-list",
-      "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-      "attributes": [
-        {
-          "name": "aria-label",
-          "description": "Aria label for the list.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "bq-option-group",
-      "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "bq-option",
       "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt 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.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when item loses focus.\n- **bqFocus** - Handler to be called when item is focused.\n- **bqClick** - Handler to be called when item is clicked.\n- **bqEnter** - Handler to be called on enter key press.\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqEnter** - Handler to be called on enter key press\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the label.\n- _default_ - The label content to be displayed.\n\n### **CSS Properties:**\n - **--bq-option--background** - background color _(default: undefined)_\n- **--bq-option--font-size** - font size _(default: undefined)_\n- **--bq-option--border-color** - border color _(default: undefined)_\n- **--bq-option--border-style** - border style _(default: undefined)_\n- **--bq-option--border-width** - border width _(default: undefined)_\n- **--bq-option--border-radius** - border radius _(default: undefined)_\n- **--bq-option--box-shadow** - box shadow _(default: undefined)_\n- **--bq-option--gap-start** - gap space between prefix and label _(default: undefined)_\n- **--bq-option--gap-end** - gap space between label and suffix _(default: undefined)_\n- **--bq-option--paddingY** - padding Y axis _(default: undefined)_\n- **--bq-option--padding-start** - option label padding start _(default: undefined)_\n- **--bq-option--padding-end** - option label padding end _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **label** - The `span` element in which the label text is displayed.\n- **prefix** - The `span` element in which the prefix is displayed (generally `bq-icon`).\n- **suffix** - The `span` element in which the suffix is displayed (generally `bq-icon`).",
@@ -1058,6 +1040,24 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-option-group",
+      "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "bq-option-list",
+      "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+      "attributes": [
+        {
+          "name": "aria-label",
+          "description": "Aria label for the list.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-page-title",
       "description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
@@ -1511,24 +1511,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-status",
-      "description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "It defines the type of status to display.",
-          "values": [
-            { "name": "alert" },
-            { "name": "danger" },
-            { "name": "info" },
-            { "name": "neutral" },
-            { "name": "success" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-spinner",
       "description": "Spinners are designed for users to display data loading.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-spinner size=\"medium\" text-position=\"bellow\">\n<span>Loading...</span>\n</bq-spinner>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **icon** - The icon slot container.\n- _default_ - The content of the spinner component.\n\n### **CSS Properties:**\n - **--bq-spinner--color** - Spinner color _(default: undefined)_\n- **--bq-spinner--size-large** - Spinner large size _(default: undefined)_\n- **--bq-spinner--size-medium** - Spinner medium size _(default: undefined)_\n- **--bq-spinner--size-small** - Spinner small size _(default: undefined)_\n- **--bq-spinner--large-text-fontSize** - Spinner large text font size _(default: undefined)_\n- **--bq-spinner--medium-text-fontSize** - Spinner medium text font size _(default: undefined)_\n- **--bq-spinner--small-text-fontSize** - Spinner small text font size _(default: undefined)_\n- **--bq-spinner--text-lineHeight** - Spinner text line height _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The div wrapper container used under the hood.\n- **icon** - The `<svg>` icon element used to spin/animate.\n- **custom-icon** - The `<span>` tag element that holds the custom icon element passed.\n- **text** - The `<span>` tag element that renders the label text inside the component.",
@@ -1561,6 +1543,24 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-status",
+      "description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "It defines the type of status to display.",
+          "values": [
+            { "name": "alert" },
+            { "name": "danger" },
+            { "name": "info" },
+            { "name": "neutral" },
+            { "name": "success" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-step-item",
       "description": "The Step Item Component is a UI element used to display a single step or stage in a process or task.\nIt should be used inside the Steps component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-step-item status=\"completed\">\n<bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n<span>Title</span>\n<span slot=\"description\">Description</span>\n</bq-step-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Callback handler emitted when the step item is clicked\n- **bqClick** - Callback handler triggered when the step item is clicked\n- **bqFocus** - Callback handler triggered when the step item is focused\n- **bqBlur** - Callback handler triggered when the step item loses focus\n\n### **Slots:**\n - _default_ - The step item content\n- **prefix** - The step item prefix\n- **description** - The step item description\n\n### **CSS Properties:**\n - **--bq-step-item--prefix-color** - Color of the prefix icon _(default: undefined)_\n- **--bq-step-item--prefix-color-current** - Color of the prefix icon when current _(default: undefined)_\n- **--bq-step-item--prefix-color-completed** - Color of the prefix icon when completed _(default: undefined)_\n- **--bq-step-item--prefix-color-error** - Color of the prefix icon when error _(default: undefined)_\n- **--bq-step-item--prefix-num-size** - Size of the prefix number _(default: undefined)_\n- **--bq-step-item--prefix-num-bg-color** - Background color of the prefix number _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The component's title.\n- **description** - The component's description.",
@@ -1755,6 +1755,68 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-tag",
+      "description": "The Tag Component is a UI element used to label and categorize content within an application.\nTags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n- **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to remove the tag component\n- **show(): _Promise<void>_** - Method to be called to show the tag component\n\n### **Slots:**\n - **prefix** - The prefix slot to add an icon or any other content before the text\n- _default_ - The text content of the tag\n\n### **CSS Properties:**\n - **--bq-tag--background-color** - Tag background color _(default: undefined)_\n- **--bq-tag--border-color** - Tag border color _(default: undefined)_\n- **--bq-tag--border-radius** - Tag border radius _(default: undefined)_\n- **--bq-tag--border-style** - Tag border style _(default: undefined)_\n- **--bq-tag--border-width** - Tag border width _(default: undefined)_\n- **--bq-tag--small-border-radius** - Tag small border radius _(default: undefined)_\n- **--bq-tag--small-gap** - Tag small gap between content _(default: undefined)_\n- **--bq-tag--small-padding-x** - Tag small padding horizontal _(default: undefined)_\n- **--bq-tag--small-padding-y** - Tag small padding vertical _(default: undefined)_\n- **--bq-tag--medium-gap** - Tag medium gap between content _(default: undefined)_\n- **--bq-tag--medium-padding-x** - Tag medium padding horizontal _(default: undefined)_\n- **--bq-tag--medium-padding-y** - Tag medium padding vertical _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM.\n- **prefix** - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n- **text** - The `<div>` element containing the text of the tag component.\n- **btn-close** - The close button element to remove the tag component.",
+      "attributes": [
+        {
+          "name": "border",
+          "description": "The corner radius of the Tag (will override size's predefined border)",
+          "values": []
+        },
+        {
+          "name": "clickable",
+          "description": "If `true`, the Tag can be clickable",
+          "values": []
+        },
+        {
+          "name": "color",
+          "description": "The color style of the Tag",
+          "values": [
+            { "name": "error" },
+            { "name": "gray" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)",
+          "values": []
+        },
+        {
+          "name": "hidden",
+          "description": "If `true`, the Tag component will hidden (only if removable = `true`)",
+          "values": []
+        },
+        {
+          "name": "removable",
+          "description": "If `true`, the Tag component can be removed",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, the Tag is selected (only if clickable = `true`)",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the Tag component",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The variant of Tag to apply on top of the variant",
+          "values": [{ "name": "outline" }, { "name": "filled" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-textarea",
       "description": "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.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-textarea maxlength=\"0\" name=\"textarea\" placeholder=\"Placeholder...\" rows=\"5\">\n<label slot=\"label\">Label</label>\n<span class=\"flex items-center gap-xs\" slot=\"helper-text\">\n<bq-icon name=\"star\"></bq-icon>\nHelper text\n</span>\n</bq-textarea>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the textarea loses focus.\n- **bqChange** - Handler to be called when the textarea value has changed and the textarea loses focus.\n- **bqClear** - Handler to be called when the textarea value has been cleared.\n- **bqFocus** - Handler to be called when the textarea has received focus.\n- **bqInput** - Handler to be called when the textarea value changes.\n- **bqBlur** - Callback handler emitted when the textarea loses focus\n- **bqChange** - Callback handler emitted when the textarea value has changed and the textarea loses focus.\nThis handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n- **bqClear** - Callback handler emitted when the textarea value has been cleared\n- **bqFocus** - Callback handler emitted when the textarea has received focus\n- **bqInput** - Callback handler emitted when the textarea value changes.\nThis handler is called whenever the user types or pastes text into the textarea field.\n\n### **Slots:**\n - **label** - The textarea label.\n- **helper-text** - The helper text.\n\n### **CSS Properties:**\n - **--bq-textarea--background-color** - Textarea background color _(default: undefined)_\n- **--bq-textarea--border-color** - Textarea border color _(default: undefined)_\n- **--bq-textarea--border-color-focus** - Textarea border color on focus _(default: undefined)_\n- **--bq-textarea--border-radius** - Textarea border radius _(default: undefined)_\n- **--bq-textarea--border-width** - Textarea border width _(default: undefined)_\n- **--bq-textarea--border-style** - Textarea border style _(default: undefined)_\n- **--bq-textarea--helper-margin-top** - Textarea helper text margin top _(default: undefined)_\n- **--bq-textarea--helper-text-color** - Textarea helper text color _(default: undefined)_\n- **--bq-textarea--helper-text-size** - Textarea helper text size _(default: undefined)_\n- **--bq-textarea--label-margin-bottom** - Textarea label margin bottom _(default: undefined)_\n- **--bq-textarea--label-text-color** - Textarea label text color _(default: undefined)_\n- **--bq-textarea--label-text-size** - Textarea label text size _(default: undefined)_\n- **--bq-textarea--paddingY** - Textarea padding top and bottom _(default: undefined)_\n- **--bq-textarea--padding-start** - Textarea padding start _(default: undefined)_\n- **--bq-textarea--padding-end** - Textarea padding end _(default: undefined)_\n- **--bq-textarea--text-color** - Textarea text color _(default: undefined)_\n- **--bq-textarea--text-size** - Textarea text size _(default: undefined)_\n- **--bq-textarea--text-placeholder-color** - Textarea placeholder text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input** - The textarea element.\n- **label** - The textarea label.\n- **helper-info** - The helper info container.\n- **helper-text** - The helper text.\n- **helper-counter** - The helper counter.",
@@ -1971,68 +2033,6 @@
         }
       ],
       "references": []
-    },
-    {
-      "name": "bq-tag",
-      "description": "The Tag Component is a UI element used to label and categorize content within an application.\nTags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n- **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to remove the tag component\n- **show(): _Promise<void>_** - Method to be called to show the tag component\n\n### **Slots:**\n - **prefix** - The prefix slot to add an icon or any other content before the text\n- _default_ - The text content of the tag\n\n### **CSS Properties:**\n - **--bq-tag--background-color** - Tag background color _(default: undefined)_\n- **--bq-tag--border-color** - Tag border color _(default: undefined)_\n- **--bq-tag--border-radius** - Tag border radius _(default: undefined)_\n- **--bq-tag--border-style** - Tag border style _(default: undefined)_\n- **--bq-tag--border-width** - Tag border width _(default: undefined)_\n- **--bq-tag--small-border-radius** - Tag small border radius _(default: undefined)_\n- **--bq-tag--small-gap** - Tag small gap between content _(default: undefined)_\n- **--bq-tag--small-padding-x** - Tag small padding horizontal _(default: undefined)_\n- **--bq-tag--small-padding-y** - Tag small padding vertical _(default: undefined)_\n- **--bq-tag--medium-gap** - Tag medium gap between content _(default: undefined)_\n- **--bq-tag--medium-padding-x** - Tag medium padding horizontal _(default: undefined)_\n- **--bq-tag--medium-padding-y** - Tag medium padding vertical _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM.\n- **prefix** - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n- **text** - The `<div>` element containing the text of the tag component.\n- **btn-close** - The close button element to remove the tag component.",
-      "attributes": [
-        {
-          "name": "border",
-          "description": "The corner radius of the Tag (will override size's predefined border)",
-          "values": []
-        },
-        {
-          "name": "clickable",
-          "description": "If `true`, the Tag can be clickable",
-          "values": []
-        },
-        {
-          "name": "color",
-          "description": "The color style of the Tag",
-          "values": [
-            { "name": "error" },
-            { "name": "gray" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "warning" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)",
-          "values": []
-        },
-        {
-          "name": "hidden",
-          "description": "If `true`, the Tag component will hidden (only if removable = `true`)",
-          "values": []
-        },
-        {
-          "name": "removable",
-          "description": "If `true`, the Tag component can be removed",
-          "values": []
-        },
-        {
-          "name": "selected",
-          "description": "If `true`, the Tag is selected (only if clickable = `true`)",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the Tag component",
-          "values": [
-            { "name": "xsmall" },
-            { "name": "small" },
-            { "name": "medium" }
-          ]
-        },
-        {
-          "name": "variant",
-          "description": "The variant of Tag to apply on top of the variant",
-          "values": [{ "name": "outline" }, { "name": "filled" }]
-        }
-      ],
-      "references": []
     }
   ]
 }