@beeq/core 1.10.0-beta.7 → 1.10.0

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

@@ -3,43 +3,70 @@
   "version": 1.1,
   "tags": [
     {
-      "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",
+      "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqClick** - Handler to be called when the accordion is clicked\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqClick** - Handler to be called when the accordion is clicked\n\n### **Slots:**\n - _default_ - The accordion panel content\n- **collapse** - The accordion collapse icon\n- **expand** - The accordion expand icon\n- **header** - The accordion header content\n- **prefix** - The accordion prefix content (icon or avatar)\n- **suffix** - The accordion suffix content (icon or avatar)\n\n### **CSS Properties:**\n - **--bq-accordion--small-padding-y** - Accordion small vertical padding _(default: undefined)_\n- **--bq-accordion--small-padding-start** - Accordion small start padding _(default: undefined)_\n- **--bq-accordion--small-padding-end** - Accordion small end padding _(default: undefined)_\n- **--bq-accordion--small-padding-gap** - Accordion small gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--small-radius** - Accordion small border radius _(default: undefined)_\n- **--bq-accordion--medium-padding-y** - Accordion medium vertical padding _(default: undefined)_\n- **--bq-accordion--medium-padding-start** - Accordion medium start padding _(default: undefined)_\n- **--bq-accordion--medium-padding-end** - Accordion medium end padding _(default: undefined)_\n- **--bq-accordion--medium-padding-gap** - Accordion medium gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--medium-radius** - Accordion medium border radius _(default: undefined)_\n- **--bq-accordion--collapsed-border-color** - Accordion collapsed border color _(default: undefined)_\n- **--bq-accordion--collapsed-border-style** - Accordion collapsed border style _(default: undefined)_\n- **--bq-accordion--collapsed-border-width** - Accordion collapsed border width _(default: undefined)_\n- **--bq-accordion--expanded-border-color** - Accordion expanded border color _(default: undefined)_\n- **--bq-accordion--expanded-border-style** - Accordion expanded border style _(default: undefined)_\n- **--bq-accordion--expanded-border-width** - Accordion expanded border width _(default: undefined)_\n- **--bq-accordion--filled-collapsed-background** - Accordion filled collapsed header background _(default: undefined)_\n- **--bq-accordion--filled-collapsed-text-color** - Accordion filled collapsed header text color _(default: undefined)_\n- **--bq-accordion--filled-expanded-background** - Accordion filled expanded header background _(default: undefined)_\n- **--bq-accordion--filled-expanded-collapsed-hover** - Accordion filled expanded header color on hover _(default: undefined)_\n- **--bq-accordion--filled-expanded-text-color** - Accordion filled expanded header text color _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-background** - Accordion ghost collapsed header background _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-text-color** - Accordion ghost collapsed header text color _(default: undefined)_\n- **--bq-accordion--ghost-expanded-background** - Accordion ghost expanded header background _(default: undefined)_\n- **--bq-accordion--ghost-expanded-collapsed-hover** - Accordion ghost expanded header color on hover _(default: undefined)_\n- **--bq-accordion--ghost-expanded-text-color** - Accordion ghost expanded header text color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-color** - Accordion filled panel border color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-style** - Accordion filled panel border style _(default: undefined)_\n- **--bq-accordion--panel-filled-border-width** - Accordion filled panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-y** - Accordion small filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-start** - Accordion small filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-end** - Accordion small filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-y** - Accordion medium filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-start** - Accordion medium filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-end** - Accordion medium filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-color** - Accordion ghost panel border color _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-style** - Accordion ghost panel border style _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-width** - Accordion ghost panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-y** - Accordion small ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-start** - Accordion small ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-end** - Accordion small ghost panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-y** - Accordion medium ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-start** - Accordion medium ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-end** - Accordion medium ghost panel end padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<details>` that holds the accordion content\n- **header** - The `<summary>` that holds the accordion header content\n- **panel** - The `<div>` that holds the accordion panel content\n- **prefix** - The `<div>` that holds the accordion prefix content\n- **suffix** - The `<div>` that holds the accordion suffix content\n- **text** - The `<div>` that holds the accordion header text content",
       "attributes": [
         {
-          "name": "alt-text",
-          "description": "Alternate text for the avatar image if the image cannot be displayed.",
+          "name": "appearance",
+          "description": "The appearance style of the Accordion",
+          "values": [{ "name": "filled" }, { "name": "ghost" }]
+        },
+        {
+          "name": "disabled",
+          "description": "If true, the Accordion is disabled",
           "values": []
         },
         {
-          "name": "image",
-          "description": "The image source to load on the avatar (this can be also a base64 encoded image).",
+          "name": "expanded",
+          "description": "If true, the Accordion is 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": "rotate",
+          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
           "values": []
         },
         {
-          "name": "shape",
-          "description": "The shape of the avatar.",
-          "values": [{ "name": "circle" }, { "name": "square" }]
+          "name": "size",
+          "description": "The size of the the Accordion",
+          "values": [{ "name": "small" }, { "name": "medium" }]
+        }
+      ],
+      "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.",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "The appearance style of accordion to be applied to all accordions",
+          "values": [{ "name": "filled" }, { "name": "ghost" }]
+        },
+        {
+          "name": "expandAll",
+          "description": "If true all accordions are expanded",
+          "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.",
+          "values": []
+        },
+        {
+          "name": "multiple",
+          "description": "If true multiple accordions can be expanded at the same time",
+          "values": []
         },
         {
           "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": []
@@ -106,70 +133,43 @@
       "references": []
     },
     {
-      "name": "bq-accordion",
-      "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqClick** - Handler to be called when the accordion is clicked\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqClick** - Handler to be called when the accordion is clicked\n\n### **Slots:**\n - _default_ - The accordion panel content\n- **collapse** - The accordion collapse icon\n- **expand** - The accordion expand icon\n- **header** - The accordion header content\n- **prefix** - The accordion prefix content (icon or avatar)\n- **suffix** - The accordion suffix content (icon or avatar)\n\n### **CSS Properties:**\n - **--bq-accordion--small-padding-y** - Accordion small vertical padding _(default: undefined)_\n- **--bq-accordion--small-padding-start** - Accordion small start padding _(default: undefined)_\n- **--bq-accordion--small-padding-end** - Accordion small end padding _(default: undefined)_\n- **--bq-accordion--small-padding-gap** - Accordion small gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--small-radius** - Accordion small border radius _(default: undefined)_\n- **--bq-accordion--medium-padding-y** - Accordion medium vertical padding _(default: undefined)_\n- **--bq-accordion--medium-padding-start** - Accordion medium start padding _(default: undefined)_\n- **--bq-accordion--medium-padding-end** - Accordion medium end padding _(default: undefined)_\n- **--bq-accordion--medium-padding-gap** - Accordion medium gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--medium-radius** - Accordion medium border radius _(default: undefined)_\n- **--bq-accordion--collapsed-border-color** - Accordion collapsed border color _(default: undefined)_\n- **--bq-accordion--collapsed-border-style** - Accordion collapsed border style _(default: undefined)_\n- **--bq-accordion--collapsed-border-width** - Accordion collapsed border width _(default: undefined)_\n- **--bq-accordion--expanded-border-color** - Accordion expanded border color _(default: undefined)_\n- **--bq-accordion--expanded-border-style** - Accordion expanded border style _(default: undefined)_\n- **--bq-accordion--expanded-border-width** - Accordion expanded border width _(default: undefined)_\n- **--bq-accordion--filled-collapsed-background** - Accordion filled collapsed header background _(default: undefined)_\n- **--bq-accordion--filled-collapsed-text-color** - Accordion filled collapsed header text color _(default: undefined)_\n- **--bq-accordion--filled-expanded-background** - Accordion filled expanded header background _(default: undefined)_\n- **--bq-accordion--filled-expanded-collapsed-hover** - Accordion filled expanded header color on hover _(default: undefined)_\n- **--bq-accordion--filled-expanded-text-color** - Accordion filled expanded header text color _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-background** - Accordion ghost collapsed header background _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-text-color** - Accordion ghost collapsed header text color _(default: undefined)_\n- **--bq-accordion--ghost-expanded-background** - Accordion ghost expanded header background _(default: undefined)_\n- **--bq-accordion--ghost-expanded-collapsed-hover** - Accordion ghost expanded header color on hover _(default: undefined)_\n- **--bq-accordion--ghost-expanded-text-color** - Accordion ghost expanded header text color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-color** - Accordion filled panel border color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-style** - Accordion filled panel border style _(default: undefined)_\n- **--bq-accordion--panel-filled-border-width** - Accordion filled panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-y** - Accordion small filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-start** - Accordion small filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-end** - Accordion small filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-y** - Accordion medium filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-start** - Accordion medium filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-end** - Accordion medium filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-color** - Accordion ghost panel border color _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-style** - Accordion ghost panel border style _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-width** - Accordion ghost panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-y** - Accordion small ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-start** - Accordion small ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-end** - Accordion small ghost panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-y** - Accordion medium ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-start** - Accordion medium ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-end** - Accordion medium ghost panel end padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<details>` that holds the accordion content\n- **header** - The `<summary>` that holds the accordion header content\n- **panel** - The `<div>` that holds the accordion panel content\n- **prefix** - The `<div>` that holds the accordion prefix content\n- **suffix** - The `<div>` that holds the accordion suffix content\n- **text** - The `<div>` that holds the accordion header text content",
+      "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 the Accordion",
-          "values": [{ "name": "filled" }, { "name": "ghost" }]
-        },
-        {
-          "name": "disabled",
-          "description": "If true, the Accordion is disabled",
-          "values": []
-        },
-        {
-          "name": "expanded",
-          "description": "If true, the Accordion is expanded",
-          "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": "alt-text",
+          "description": "Alternate text for the avatar image if the image cannot be displayed.",
           "values": []
         },
         {
-          "name": "rotate",
-          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
+          "name": "image",
+          "description": "The image source to load on the avatar (this can be also a base64 encoded image).",
           "values": []
         },
         {
-          "name": "size",
-          "description": "The size of the the Accordion",
-          "values": [{ "name": "small" }, { "name": "medium" }]
-        }
-      ],
-      "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.",
-      "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance style of accordion to be applied to all accordions",
-          "values": [{ "name": "filled" }, { "name": "ghost" }]
-        },
-        {
-          "name": "expandAll",
-          "description": "If true all accordions are expanded",
+          "name": "label",
+          "description": "A text to use for describing the avatar on assistive devices.",
           "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": "initials",
+          "description": "The text to display on avatar.",
           "values": []
         },
         {
-          "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 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": []
@@ -200,6 +200,40 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-breadcrumb",
+      "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n- **separator** - The slot to add a separator between breadcrumb items. Default separator is `/`.\n\n### **CSS Parts:**\n - **navigation** - The `nav` tag that loads the breadcrumb items\n- **separator** - The container that wraps the separator element",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The `aria-label` attribute to describe the type of navigation",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "bq-breadcrumb-item",
+      "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\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\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
+          "values": []
+        }
+      ],
+      "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.",
@@ -293,40 +327,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-breadcrumb-item",
-      "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\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\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
-      "attributes": [
-        {
-          "name": "href",
-          "description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
-          "values": []
-        },
-        {
-          "name": "rel",
-          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "bq-breadcrumb",
-      "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n- **separator** - The slot to add a separator between breadcrumb items. Default separator is `/`.\n\n### **CSS Parts:**\n - **navigation** - The `nav` tag that loads the breadcrumb items\n- **separator** - The container that wraps the separator element",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The `aria-label` attribute to describe the type of navigation",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-card",
       "description": "The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\nIts structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-card type=\"default\" border=\"m\">\n<div class=\"p-m\">\n<h3 class=\"text-xl font-bold\">Card Title</h3>\n<p class=\"text-m\">Card content goes here</p>\n</div>\n</bq-card>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The content of the card component\n\n### **CSS Properties:**\n - **--bq-card--borderColor** - Card border color _(default: undefined)_\n- **--bq-card--borderRadius** - Card border radius _(default: undefined)_\n- **--bq-card--borderStyle** - Card border style _(default: undefined)_\n- **--bq-card--borderWidth** - Card border width _(default: undefined)_\n- **--bq-card--padding** - Card padding _(default: undefined)_\n- **--bq-card--paddingMinimal** - Minimal card padding _(default: undefined)_\n- **--bq-card--background** - Card background color _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -635,39 +635,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-divider",
       "description": "The Divider component is used to visually separate content in a layout.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n<span slot=\"title\">Divider Title</span>\n</bq-divider>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The title content of the divider.\n\n### **CSS Properties:**\n - **--bq-divider--color** - Divider color _(default: undefined)_\n- **--bq-divider--title-marginX** - Divider space between title and delimiters _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dash-start** - The component's internal svg wrapper for the start line of the divider's stroke.\n- **dash-end** - The component's internal svg wrapper for the end line of the divider's stroke.\n- **dash-start-line** - The component's internal line component of the divider's stroke.\n- **dash-end-line** - The component's internal line component of the divider's stroke.",
@@ -728,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.",
@@ -810,6 +810,39 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-icon",
+      "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **svgLoaded** - Callback handler to be called when the SVG has loaded.\n- **svgLoaded** - Callback handler to be called when the SVG has loaded\n\n### **Methods:**\n - **handleWeightChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release\n\n### **CSS Properties:**\n - **--bq-icon--color** - The stroke color of the SVG. _(default: undefined)_\n- **--bq-icon--size** - The size of the SVG. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the icon SVG content.\n- **svg** - The `<svg>` tag element inside the component.",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Label for the icon, used for accessibility.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Set the size of the SVG.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
+          "values": []
+        },
+        { "name": "weight", "values": [{ "name": "TIconWeight" }] }
+      ],
+      "references": []
+    },
     {
       "name": "bq-input",
       "description": "The Input component is a fundamental user interface element that allows users to input data by typing it into a text field.\nIt is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-input name=\"username\" label=\"Username\" placeholder=\"Enter your username\"></bq-input>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Callback handler emitted when the input loses focus.\n- **bqChange** - Callback handler emitted when the input value has changed and the input loses focus.\n- **bqClear** - Callback handler emitted when the input value has been cleared.\n- **bqFocus** - Callback handler emitted when the input has received focus.\n- **bqInput** - Callback handler emitted when the input value changes.\n- **bqBlur** - Callback handler emitted when the input loses focus\n- **bqChange** - Callback handler emitted when the input value has changed and the input loses focus.\nThis handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n- **bqClear** - Callback handler emitted when the input value has been cleared\n- **bqFocus** - Callback handler emitted when the input has received focus\n- **bqInput** - Callback handler emitted when the input value changes.\nThis handler is called whenever the user types or pastes text into the input field.\n\n### **Slots:**\n - **label** - The label slot container.\n- **prefix** - The prefix slot container.\n- **suffix** - The suffix slot container.\n- **helper-text** - The helper text slot container.\n- **clear-icon** - The clear icon slot container.\n\n### **CSS Properties:**\n - **--bq-input--background-color** - Input background color _(default: undefined)_\n- **--bq-input--border-color** - Input border color _(default: undefined)_\n- **--bq-input--border-color-focus** - Input border color on focus _(default: undefined)_\n- **--bq-input--border-radius** - Input border radius _(default: undefined)_\n- **--bq-input--border-width** - Input border width _(default: undefined)_\n- **--bq-input--border-style** - Input border style _(default: undefined)_\n- **--bq-input--gap** - Gap between input content and prefix/suffix _(default: undefined)_\n- **--bq-input--helper-margin-top** - Helper text margin top _(default: undefined)_\n- **--bq-input--helper-text-color** - Helper text color _(default: undefined)_\n- **--bq-input--helper-text-size** - Helper text size _(default: undefined)_\n- **--bq-input--icon-size** - Icon size to use in prefix/suffix and clear button _(default: undefined)_\n- **--bq-input--label-margin-bottom** - Input label margin bottom _(default: undefined)_\n- **--bq-input--label-text-color** - Input label text color _(default: undefined)_\n- **--bq-input--label-text-size** - Input label text size _(default: undefined)_\n- **--bq-input--padding-start** - Input padding start _(default: undefined)_\n- **--bq-input--padding-end** - Input padding end _(default: undefined)_\n- **--bq-input--paddingY** - Input padding top and bottom _(default: undefined)_\n- **--bq-input--text-color** - Input text color _(default: undefined)_\n- **--bq-input--text-size** - Input text size _(default: undefined)_\n- **--bq-input--text-placeholder-color** - Input placeholder text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The native HTML button used under the hood in the clear button.\n- **clear-btn** - The clear button.\n- **control** - The input control wrapper.\n- **helper-text** - The helper text slot container.\n- **label** - The label slot container.\n- **input** - The native HTML input element used under the hood.\n- **prefix** - The prefix slot container.\n- **suffix** - The suffix slot container.",
@@ -943,35 +976,40 @@
       "references": []
     },
     {
-      "name": "bq-icon",
-      "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **svgLoaded** - Callback handler to be called when the SVG has loaded.\n- **svgLoaded** - Callback handler to be called when the SVG has loaded\n\n### **Methods:**\n - **handleWeightChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release\n\n### **CSS Properties:**\n - **--bq-icon--color** - The stroke color of the SVG. _(default: undefined)_\n- **--bq-icon--size** - The size of the SVG. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the icon SVG content.\n- **svg** - The `<svg>` tag element inside the component.",
+      "name": "bq-notification",
+      "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
       "attributes": [
         {
-          "name": "color",
-          "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
+          "name": "auto-dismiss",
+          "description": "If true, the notification will automatically hide after the specified amount of time",
           "values": []
         },
         {
-          "name": "label",
-          "description": "Label for the icon, used for accessibility.",
+          "name": "border",
+          "description": "The corder radius of the notification component",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
+          "name": "disable-close",
+          "description": "If true, the close button at the top right of the notification won't be shown",
           "values": []
         },
         {
-          "name": "size",
-          "description": "Set the size of the SVG.",
+          "name": "hide-icon",
+          "description": "If true, the notification icon won't be shown",
           "values": []
         },
         {
-          "name": "src",
-          "description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
+          "name": "open",
+          "description": "If true, the notification will be shown",
           "values": []
         },
-        { "name": "weight", "values": [{ "name": "TIconWeight" }] }
+        {
+          "name": "time",
+          "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
+          "values": []
+        },
+        { "name": "type", "description": "Type of Notification", "values": [] }
       ],
       "references": []
     },
@@ -1002,44 +1040,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-notification",
-      "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
-      "attributes": [
-        {
-          "name": "auto-dismiss",
-          "description": "If true, the notification will automatically hide after the specified amount of time",
-          "values": []
-        },
-        {
-          "name": "border",
-          "description": "The corder radius of the notification component",
-          "values": []
-        },
-        {
-          "name": "disable-close",
-          "description": "If true, the close button at the top right of the notification won't be shown",
-          "values": []
-        },
-        {
-          "name": "hide-icon",
-          "description": "If true, the notification icon won't be shown",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "If true, the notification will be shown",
-          "values": []
-        },
-        {
-          "name": "time",
-          "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
-          "values": []
-        },
-        { "name": "type", "description": "Type of Notification", "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",
@@ -1396,28 +1396,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-side-menu-item",
-      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - 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 is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
-      "attributes": [
-        {
-          "name": "active",
-          "description": "If `true`, the menu item will be shown as active/selected.",
-          "values": []
-        },
-        {
-          "name": "collapse",
-          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-side-menu",
       "description": "The default side menu serves as a versatile container for organizing and displaying navigation elements,\n with default side menu items providing a clean and straightforward way to represent individual menu options.\n Together, they form the foundation for building structured and intuitive side menu layouts.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu>\n<div slot=\"logo\">\n<h1>Your Logo</h1>\n</div>\n<bq-side-menu-item active>\n<bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\nHome\n</bq-side-menu-item>\n<bq-side-menu-item>\n<bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\nSettings\n</bq-side-menu-item>\n<bq-side-menu-item disabled>\n<bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\nHelp\n</bq-side-menu-item>\n</bq-side-menu>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCollapse** - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.\n- **bqSelect** - Callback handler to be called when the active/selected menu item changes.\n- **bqCollapse** - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa\n- **bqSelect** - Callback handler to be called when the active/selected menu item changes\n\n### **Methods:**\n - **toggleCollapse()** - Toggle the collapse state of the side menu\n\n### **Slots:**\n - **logo** - The section for displaying the logo or brand in the side menu.\n- **The** - main section that holds all menu items.\n- **footer** - The section for adding footer content to the side menu.\n\n### **CSS Properties:**\n - **--bq-side-menu--bg-color** - Side menu background color _(default: undefined)_\n- **--bq-side-menu--brand-color** - Side menu logo color _(default: undefined)_\n- **--bq-side-menu--border-color** - Side menu border color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - HTML `<aside>` root container\n- **footer** - HTML `<div>` element that holds the footer\n- **logo** - HTML `<div>` element that holds the logo\n- **nav** - HTML `<nav>` element that holds the navigation items",
@@ -1444,6 +1422,28 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-side-menu-item",
+      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - 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 is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "If `true`, the menu item will be shown as active/selected.",
+          "values": []
+        },
+        {
+          "name": "collapse",
+          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-slider",
       "description": "Sliders provide a visual representation of adjustable content, enabling users to change values by dragging a handle along a horizontal track.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-slider max=\"100\" value=\"30\"></bq-slider>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the slider loses focus.\n- **bqChange** - Handler to be called when changing the value on range inputs.\n- **bqFocus** - Handler to be called when the slider gets focused.\n- **bqChange** - Handler to be called when change the value on range inputs\n- **bqBlur** - Handler to be called when the slider loses focus\n- **bqFocus** - Handler to be called when the slider gets focused\n\n### **CSS Properties:**\n - **--bq-slider--size** - The height of the slider track/progress area _(default: undefined)_\n- **--bq-slider--border-radius** - Slider border radius _(default: undefined)_\n- **--bq-slider--thumb-size** - Slider hover thumb size _(default: undefined)_\n- **--bq-slider--progress-color** - Slider progress background color _(default: undefined)_\n- **--bq-slider--trackarea-color** - Slider track background color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **container** - The container of the slider.\n- **track-area** - The track area of the slider.\n- **progress-area** - The progress area of the slider.\n- **input-min** - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n- **input-max** - The input element for the maximum value.\n- **label-start** - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n- **label-end** - The label for maximum value when the slider type is `range`.",
@@ -1722,6 +1722,39 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-tab-group",
+      "description": "The tab group is a user interface element that allows users wrap a set of tab items.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tab-group value=\"5\">\n<bq-tab tab-id=\"1\">Tab</bq-tab>\n<bq-tab tab-id=\"2\" active>Tab</bq-tab>\n<bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n<bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n</bq-tab-group>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the tab value changes\n- **bqChange** - Handler to be called when the tab value changes\n\n### **Slots:**\n - _default_ - The bq-tab items\n\n### **CSS Parts:**\n - **base** - The HTML div wrapper inside the shadow DOM.\n- **tabs** - The HTML div used to hold the tab buttons.",
+      "attributes": [
+        {
+          "name": "debounce-time",
+          "description": "A number representing the delay value applied to bqChange event handler",
+          "values": []
+        },
+        {
+          "name": "disable-divider",
+          "description": "If true, the underline divider below the tabs won't be shown",
+          "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "The direction that tab should be render",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The placement that tab should be render",
+          "values": []
+        },
+        { "name": "size", "description": "The size of the tab", "values": [] },
+        {
+          "name": "value",
+          "description": "A string representing the id of the selected tab.",
+          "values": []
+        }
+      ],
+      "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.",
@@ -1784,39 +1817,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-tab-group",
-      "description": "The tab group is a user interface element that allows users wrap a set of tab items.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tab-group value=\"5\">\n<bq-tab tab-id=\"1\">Tab</bq-tab>\n<bq-tab tab-id=\"2\" active>Tab</bq-tab>\n<bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n<bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n</bq-tab-group>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the tab value changes\n- **bqChange** - Handler to be called when the tab value changes\n\n### **Slots:**\n - _default_ - The bq-tab items\n\n### **CSS Parts:**\n - **base** - The HTML div wrapper inside the shadow DOM.\n- **tabs** - The HTML div used to hold the tab buttons.",
-      "attributes": [
-        {
-          "name": "debounce-time",
-          "description": "A number representing the delay value applied to bqChange event handler",
-          "values": []
-        },
-        {
-          "name": "disable-divider",
-          "description": "If true, the underline divider below the tabs won't be shown",
-          "values": []
-        },
-        {
-          "name": "orientation",
-          "description": "The direction that tab should be render",
-          "values": []
-        },
-        {
-          "name": "placement",
-          "description": "The placement that tab should be render",
-          "values": []
-        },
-        { "name": "size", "description": "The size of the tab", "values": [] },
-        {
-          "name": "value",
-          "description": "A string representing the id of the selected tab.",
-          "values": []
-        }
-      ],
-      "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.",