@beeq/core 1.12.4-beta.1 → 1.12.4-beta.2

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

@@ -3,69 +3,69 @@
   "version": 1.1,
   "tags": [
     {
-      "name": "bq-accordion-group",
-      "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot where the bq-accordion elements are placed.\n\n### **CSS Properties:**\n - **--bq-accordion-group--gap** - Accordion group distance between elements _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "bq-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": "appearance",
-          "description": "The appearance style of accordion to be applied to all accordions",
+          "description": "The appearance style of the Accordion",
           "values": [{ "name": "filled" }, { "name": "ghost" }]
         },
         {
-          "name": "expandAll",
-          "description": "If true all accordions are expanded",
+          "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.",
+          "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",
+          "name": "rotate",
+          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
           "values": []
         },
         {
           "name": "size",
-          "description": "The size of accordion to be applied to all accordions",
+          "description": "The size of the the Accordion",
           "values": [{ "name": "small" }, { "name": "medium" }]
         }
       ],
       "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-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 the Accordion",
+          "description": "The appearance style of accordion to be applied to all accordions",
           "values": [{ "name": "filled" }, { "name": "ghost" }]
         },
         {
-          "name": "disabled",
-          "description": "If true, the Accordion is disabled",
-          "values": []
-        },
-        {
-          "name": "expanded",
-          "description": "If true, the Accordion is expanded",
+          "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.",
+          "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": "rotate",
-          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
+          "name": "multiple",
+          "description": "If true multiple accordions can be expanded at the same time",
           "values": []
         },
         {
           "name": "size",
-          "description": "The size of the the Accordion",
+          "description": "The size of accordion to be applied to all accordions",
           "values": [{ "name": "small" }, { "name": "medium" }]
         }
       ],
@@ -200,6 +200,18 @@
       ],
       "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",
@@ -222,18 +234,6 @@
       ],
       "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-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-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-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-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.",
@@ -813,39 +813,6 @@
       ],
       "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-empty-state",
       "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -990,34 +957,35 @@
       "references": []
     },
     {
-      "name": "bq-option",
-      "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when item loses focus.\n- **bqFocus** - Handler to be called when item is focused.\n- **bqClick** - Handler to be called when item is clicked.\n- **bqEnter** - Handler to be called on enter key press.\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqEnter** - Handler to be called on enter key press\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the label.\n- _default_ - The label content to be displayed.\n\n### **CSS Properties:**\n - **--bq-option--background** - background color _(default: undefined)_\n- **--bq-option--font-size** - font size _(default: undefined)_\n- **--bq-option--border-color** - border color _(default: undefined)_\n- **--bq-option--border-style** - border style _(default: undefined)_\n- **--bq-option--border-width** - border width _(default: undefined)_\n- **--bq-option--border-radius** - border radius _(default: undefined)_\n- **--bq-option--box-shadow** - box shadow _(default: undefined)_\n- **--bq-option--gap-start** - gap space between prefix and label _(default: undefined)_\n- **--bq-option--gap-end** - gap space between label and suffix _(default: undefined)_\n- **--bq-option--paddingY** - padding Y axis _(default: undefined)_\n- **--bq-option--padding-start** - option label padding start _(default: undefined)_\n- **--bq-option--padding-end** - option label padding end _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **label** - The `span` element in which the label text is displayed.\n- **prefix** - The `span` element in which the prefix is displayed (generally `bq-icon`).\n- **suffix** - The `span` element in which the suffix is displayed (generally `bq-icon`).",
+      "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": "disabled",
-          "description": "If true, the option is disabled.",
+          "name": "color",
+          "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
           "values": []
         },
         {
-          "name": "hidden",
-          "description": "If true, the option is hidden.",
+          "name": "label",
+          "description": "Label for the icon, used for accessibility.",
           "values": []
         },
         {
-          "name": "value",
-          "description": "A string representing the value of the option. Can be used to identify the item.",
+          "name": "name",
+          "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
           "values": []
         },
         {
-          "name": "selected",
-          "description": "If true, the option is selected and active.",
+          "name": "size",
+          "description": "Set the size of the SVG.",
           "values": []
         },
         {
-          "name": "display-value",
-          "description": "The display value of the option. It can be used to override the default displayed value.",
+          "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": []
     },
@@ -1060,9 +1028,35 @@
       "references": []
     },
     {
-      "name": "bq-option-group",
-      "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
-      "attributes": [],
+      "name": "bq-option",
+      "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when item loses focus.\n- **bqFocus** - Handler to be called when item is focused.\n- **bqClick** - Handler to be called when item is clicked.\n- **bqEnter** - Handler to be called on enter key press.\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqEnter** - Handler to be called on enter key press\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the label.\n- _default_ - The label content to be displayed.\n\n### **CSS Properties:**\n - **--bq-option--background** - background color _(default: undefined)_\n- **--bq-option--font-size** - font size _(default: undefined)_\n- **--bq-option--border-color** - border color _(default: undefined)_\n- **--bq-option--border-style** - border style _(default: undefined)_\n- **--bq-option--border-width** - border width _(default: undefined)_\n- **--bq-option--border-radius** - border radius _(default: undefined)_\n- **--bq-option--box-shadow** - box shadow _(default: undefined)_\n- **--bq-option--gap-start** - gap space between prefix and label _(default: undefined)_\n- **--bq-option--gap-end** - gap space between label and suffix _(default: undefined)_\n- **--bq-option--paddingY** - padding Y axis _(default: undefined)_\n- **--bq-option--padding-start** - option label padding start _(default: undefined)_\n- **--bq-option--padding-end** - option label padding end _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **label** - The `span` element in which the label text is displayed.\n- **prefix** - The `span` element in which the prefix is displayed (generally `bq-icon`).\n- **suffix** - The `span` element in which the suffix is displayed (generally `bq-icon`).",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If true, the option is disabled.",
+          "values": []
+        },
+        {
+          "name": "hidden",
+          "description": "If true, the option is hidden.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A string representing the value of the option. Can be used to identify the item.",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "If true, the option is selected and active.",
+          "values": []
+        },
+        {
+          "name": "display-value",
+          "description": "The display value of the option. It can be used to override the default displayed value.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -1077,6 +1071,18 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-option-group",
+      "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "bq-page-title",
+      "description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "bq-panel",
       "description": "The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-panel open>\n<div>Panel content</div>\n</bq-panel>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The content of the panel.\n\n### **CSS Parts:**\n - **panel** - The `<div>` element used to display and style the panel",
@@ -1132,12 +1138,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-page-title",
-      "description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "bq-progress",
       "description": "The progress bar is a user interface component that visually represents the completion status of a task or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-progress value=\"50\"></bq-progress>\n```\n\n</figure>\n---\n\n\n### **CSS Properties:**\n - **--bq-progress-bar--height** - The progress bars height _(default: undefined)_\n- **--bq-progress-bar--indeterminateWidth** - The progress bar width when its indeterminate _(default: undefined)_\n- **--bq-progress-bar--indicatorColor** - The progress bar color (inside the track area) _(default: undefined)_\n- **--bq-progress-bar--trackColor** - The progress bar track area (the grey one) _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The component wrapper container inside the shadow DOM\n- **progress** - The `<div>` container that holds the native progress element\n- **progress-bar** - The native html for progress element\n- **label** - The `<div>` container that holds the label value (in percentage)\n- **indeterminate** - The `<div>` container that holds the indeterminate progress bar\n- **base** - The base container for the tooltip component inside the shadow DOM when hovering over the progress bar\n- **trigger** - The container holding the element that triggers the tooltip display when hovering over the progress bar\n- **panel** - The container holding the content of the tooltip when hovering over the progress bar",
@@ -1475,38 +1475,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-spinner",
-      "description": "Spinners are designed for users to display data loading.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-spinner size=\"medium\" text-position=\"bellow\">\n<span>Loading...</span>\n</bq-spinner>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **icon** - The icon slot container.\n- _default_ - The content of the spinner component.\n\n### **CSS Properties:**\n - **--bq-spinner--color** - Spinner color _(default: undefined)_\n- **--bq-spinner--size-large** - Spinner large size _(default: undefined)_\n- **--bq-spinner--size-medium** - Spinner medium size _(default: undefined)_\n- **--bq-spinner--size-small** - Spinner small size _(default: undefined)_\n- **--bq-spinner--large-text-fontSize** - Spinner large text font size _(default: undefined)_\n- **--bq-spinner--medium-text-fontSize** - Spinner medium text font size _(default: undefined)_\n- **--bq-spinner--small-text-fontSize** - Spinner small text font size _(default: undefined)_\n- **--bq-spinner--text-lineHeight** - Spinner text line height _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The div wrapper container used under the hood.\n- **icon** - The `<svg>` icon element used to spin/animate.\n- **custom-icon** - The `<span>` tag element that holds the custom icon element passed.\n- **text** - The `<span>` tag element that renders the label text inside the component.",
-      "attributes": [
-        {
-          "name": "animation",
-          "description": "If `false`, the animation on the icon element will be stopped.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "It defines the size of the icon element displayed.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "text-position",
-          "description": "It defines the position of the label text.",
-          "values": [
-            { "name": "above" },
-            { "name": "below" },
-            { "name": "left" },
-            { "name": "right" },
-            { "name": "none" }
-          ]
-        }
-      ],
-      "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`.",
@@ -1578,6 +1546,38 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-spinner",
+      "description": "Spinners are designed for users to display data loading.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-spinner size=\"medium\" text-position=\"bellow\">\n<span>Loading...</span>\n</bq-spinner>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **icon** - The icon slot container.\n- _default_ - The content of the spinner component.\n\n### **CSS Properties:**\n - **--bq-spinner--color** - Spinner color _(default: undefined)_\n- **--bq-spinner--size-large** - Spinner large size _(default: undefined)_\n- **--bq-spinner--size-medium** - Spinner medium size _(default: undefined)_\n- **--bq-spinner--size-small** - Spinner small size _(default: undefined)_\n- **--bq-spinner--large-text-fontSize** - Spinner large text font size _(default: undefined)_\n- **--bq-spinner--medium-text-fontSize** - Spinner medium text font size _(default: undefined)_\n- **--bq-spinner--small-text-fontSize** - Spinner small text font size _(default: undefined)_\n- **--bq-spinner--text-lineHeight** - Spinner text line height _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The div wrapper container used under the hood.\n- **icon** - The `<svg>` icon element used to spin/animate.\n- **custom-icon** - The `<span>` tag element that holds the custom icon element passed.\n- **text** - The `<span>` tag element that renders the label text inside the component.",
+      "attributes": [
+        {
+          "name": "animation",
+          "description": "If `false`, the animation on the icon element will be stopped.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "It defines the size of the icon element displayed.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "text-position",
+          "description": "It defines the position of the label text.",
+          "values": [
+            { "name": "above" },
+            { "name": "below" },
+            { "name": "left" },
+            { "name": "right" },
+            { "name": "none" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-status",
       "description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
@@ -1806,6 +1806,68 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-tag",
+      "description": "The Tag Component is a UI element used to label and categorize content within an application.\nTags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n- **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to remove the tag component\n- **show(): _Promise<void>_** - Method to be called to show the tag component\n\n### **Slots:**\n - **prefix** - The prefix slot to add an icon or any other content before the text\n- _default_ - The text content of the tag\n\n### **CSS Properties:**\n - **--bq-tag--background-color** - Tag background color _(default: undefined)_\n- **--bq-tag--border-color** - Tag border color _(default: undefined)_\n- **--bq-tag--border-radius** - Tag border radius _(default: undefined)_\n- **--bq-tag--border-style** - Tag border style _(default: undefined)_\n- **--bq-tag--border-width** - Tag border width _(default: undefined)_\n- **--bq-tag--small-border-radius** - Tag small border radius _(default: undefined)_\n- **--bq-tag--small-gap** - Tag small gap between content _(default: undefined)_\n- **--bq-tag--small-padding-x** - Tag small padding horizontal _(default: undefined)_\n- **--bq-tag--small-padding-y** - Tag small padding vertical _(default: undefined)_\n- **--bq-tag--medium-gap** - Tag medium gap between content _(default: undefined)_\n- **--bq-tag--medium-padding-x** - Tag medium padding horizontal _(default: undefined)_\n- **--bq-tag--medium-padding-y** - Tag medium padding vertical _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM.\n- **prefix** - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n- **text** - The `<div>` element containing the text of the tag component.\n- **btn-close** - The close button element to remove the tag component.",
+      "attributes": [
+        {
+          "name": "border",
+          "description": "The corner radius of the Tag (will override size's predefined border)",
+          "values": []
+        },
+        {
+          "name": "clickable",
+          "description": "If `true`, the Tag can be clickable",
+          "values": []
+        },
+        {
+          "name": "color",
+          "description": "The color style of the Tag",
+          "values": [
+            { "name": "error" },
+            { "name": "gray" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)",
+          "values": []
+        },
+        {
+          "name": "hidden",
+          "description": "If `true`, the Tag component will be hidden",
+          "values": []
+        },
+        {
+          "name": "removable",
+          "description": "If `true`, the Tag component can be removed",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, the Tag is selected (only if clickable = `true`)",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the Tag component",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The variant of Tag to apply on top of the variant",
+          "values": [{ "name": "outline" }, { "name": "filled" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-textarea",
       "description": "The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-textarea maxlength=\"0\" name=\"textarea\" placeholder=\"Placeholder...\" rows=\"5\">\n<label slot=\"label\">Label</label>\n<span class=\"flex items-center gap-xs\" slot=\"helper-text\">\n<bq-icon name=\"star\"></bq-icon>\nHelper text\n</span>\n</bq-textarea>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the textarea loses focus.\n- **bqChange** - Handler to be called when the textarea value has changed and the textarea loses focus.\n- **bqClear** - Handler to be called when the textarea value has been cleared.\n- **bqFocus** - Handler to be called when the textarea has received focus.\n- **bqInput** - Handler to be called when the textarea value changes.\n- **bqBlur** - Callback handler emitted when the textarea loses focus\n- **bqChange** - Callback handler emitted when the textarea value has changed and the textarea loses focus.\nThis handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n- **bqClear** - Callback handler emitted when the textarea value has been cleared\n- **bqFocus** - Callback handler emitted when the textarea has received focus\n- **bqInput** - Callback handler emitted when the textarea value changes.\nThis handler is called whenever the user types or pastes text into the textarea field.\n\n### **Slots:**\n - **label** - The textarea label.\n- **helper-text** - The helper text.\n\n### **CSS Properties:**\n - **--bq-textarea--background-color** - Textarea background color _(default: undefined)_\n- **--bq-textarea--border-color** - Textarea border color _(default: undefined)_\n- **--bq-textarea--border-color-focus** - Textarea border color on focus _(default: undefined)_\n- **--bq-textarea--border-radius** - Textarea border radius _(default: undefined)_\n- **--bq-textarea--border-width** - Textarea border width _(default: undefined)_\n- **--bq-textarea--border-style** - Textarea border style _(default: undefined)_\n- **--bq-textarea--helper-margin-top** - Textarea helper text margin top _(default: undefined)_\n- **--bq-textarea--helper-text-color** - Textarea helper text color _(default: undefined)_\n- **--bq-textarea--helper-text-size** - Textarea helper text size _(default: undefined)_\n- **--bq-textarea--label-margin-bottom** - Textarea label margin bottom _(default: undefined)_\n- **--bq-textarea--label-text-color** - Textarea label text color _(default: undefined)_\n- **--bq-textarea--label-text-size** - Textarea label text size _(default: undefined)_\n- **--bq-textarea--paddingY** - Textarea padding top and bottom _(default: undefined)_\n- **--bq-textarea--padding-start** - Textarea padding start _(default: undefined)_\n- **--bq-textarea--padding-end** - Textarea padding end _(default: undefined)_\n- **--bq-textarea--text-color** - Textarea text color _(default: undefined)_\n- **--bq-textarea--text-size** - Textarea text size _(default: undefined)_\n- **--bq-textarea--text-placeholder-color** - Textarea placeholder text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input** - The textarea element.\n- **label** - The textarea label.\n- **helper-info** - The helper info container.\n- **helper-text** - The helper text.\n- **helper-counter** - The helper counter.",
@@ -1971,68 +2033,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-tag",
-      "description": "The Tag Component is a UI element used to label and categorize content within an application.\nTags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n- **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to remove the tag component\n- **show(): _Promise<void>_** - Method to be called to show the tag component\n\n### **Slots:**\n - **prefix** - The prefix slot to add an icon or any other content before the text\n- _default_ - The text content of the tag\n\n### **CSS Properties:**\n - **--bq-tag--background-color** - Tag background color _(default: undefined)_\n- **--bq-tag--border-color** - Tag border color _(default: undefined)_\n- **--bq-tag--border-radius** - Tag border radius _(default: undefined)_\n- **--bq-tag--border-style** - Tag border style _(default: undefined)_\n- **--bq-tag--border-width** - Tag border width _(default: undefined)_\n- **--bq-tag--small-border-radius** - Tag small border radius _(default: undefined)_\n- **--bq-tag--small-gap** - Tag small gap between content _(default: undefined)_\n- **--bq-tag--small-padding-x** - Tag small padding horizontal _(default: undefined)_\n- **--bq-tag--small-padding-y** - Tag small padding vertical _(default: undefined)_\n- **--bq-tag--medium-gap** - Tag medium gap between content _(default: undefined)_\n- **--bq-tag--medium-padding-x** - Tag medium padding horizontal _(default: undefined)_\n- **--bq-tag--medium-padding-y** - Tag medium padding vertical _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM.\n- **prefix** - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n- **text** - The `<div>` element containing the text of the tag component.\n- **btn-close** - The close button element to remove the tag component.",
-      "attributes": [
-        {
-          "name": "border",
-          "description": "The corner radius of the Tag (will override size's predefined border)",
-          "values": []
-        },
-        {
-          "name": "clickable",
-          "description": "If `true`, the Tag can be clickable",
-          "values": []
-        },
-        {
-          "name": "color",
-          "description": "The color style of the Tag",
-          "values": [
-            { "name": "error" },
-            { "name": "gray" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "warning" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)",
-          "values": []
-        },
-        {
-          "name": "hidden",
-          "description": "If `true`, the Tag component will be hidden",
-          "values": []
-        },
-        {
-          "name": "removable",
-          "description": "If `true`, the Tag component can be removed",
-          "values": []
-        },
-        {
-          "name": "selected",
-          "description": "If `true`, the Tag is selected (only if clickable = `true`)",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the Tag component",
-          "values": [
-            { "name": "xsmall" },
-            { "name": "small" },
-            { "name": "medium" }
-          ]
-        },
-        {
-          "name": "variant",
-          "description": "The variant of Tag to apply on top of the variant",
-          "values": [{ "name": "outline" }, { "name": "filled" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-tooltip",
       "description": "The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tooltip visible>\nYuhu! I'm a tooltip 🙃\n<bq-button slot=\"trigger\">Hover me!</bq-button>\n</bq-tooltip>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Emitted when the tooltip trigger is clicked\n- **bqFocusIn** - Emitted when the tooltip trigger is focused in\n- **bqFocusOut** - Emitted when the tooltip trigger is focused out\n- **bqHoverIn** - Emitted when the tooltip trigger is hovered in\n- **bqHoverOut** - Emitted when the tooltip trigger is hovered out\n\n### **Methods:**\n - **show()** - Shows the tooltip\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - **trigger** - The element which displays tooltip on hover\n- _default_ - The tooltip content\n\n### **CSS Properties:**\n - **--bq-tooltip--background-color** - Tooltip background color _(default: undefined)_\n- **--bq-tooltip--box-shadow** - Tooltip box shadow _(default: undefined)_\n- **--bq-tooltip--font-size** - Tooltip font size _(default: undefined)_\n- **--bq-tooltip--line-height** - Tooltip line height _(default: undefined)_\n- **--bq-tooltip--text-color** - Tooltip text color _(default: undefined)_\n- **--bq-tooltip--paddingX** - Tooltip horizontal padding _(default: undefined)_\n- **--bq-tooltip--paddingY** - Tooltip vertical padding _(default: undefined)_\n- **--bq-tooltip--border-color** - Tooltip border color _(default: undefined)_\n- **--bq-tooltip--border-radius** - Tooltip border radius _(default: undefined)_\n- **--bq-tooltip--border-style** - Tooltip border style _(default: undefined)_\n- **--bq-tooltip--border-width** - Tooltip border width _(default: undefined)_\n- **--bq-tooltip--z-index:** - Tooltip z-index _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover\n- **panel** - The `<div>` container that holds the tooltip content",