@beeq/core 1.10.0-beta.1 → 1.10.0-beta.3

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

@@ -39,38 +39,6 @@
       ],
       "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 accordion to be applied to all accordions",
-          "values": [{ "name": "small" }, { "name": "medium" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-alert",
       "description": "The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\nIt can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-alert>\n<bq-icon name=\"star\" slot=\"icon\"></bq-icon>\nTitle\n<span slot=\"body\">\nDescription\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div 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-alert>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqHide** - Callback handler to be called when the alert is hidden\n- **bqShow** - Callback handler to be called when the alert is shown\n- **bqAfterShow** - Callback handler to be called after the alert has been shown\n- **bqAfterHide** - Callback handler to be called after the alert has been hidden\n- **bqHide** - Callback handler to be called when the alert is hidden\n- **bqShow** - Callback handler to be called when the alert is shown\n- **bqAfterShow** - Callback handler to be called after the alert has been shown\n- **bqAfterHide** - Callback handler to be called after the alert has been hidden\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the alert component\n- **show(): _Promise<void>_** - Method to be called to show the alert component\n\n### **Slots:**\n - _default_ - The alert title content (no slot name required)\n- **body** - The alert description content\n- **footer** - The alert footer content\n- **icon** - The predefined icon based on the alert type (info, success, warning, error, default)\n- **btn-close** - The close button of the alert\n\n### **CSS Properties:**\n - **--bq-alert--background** - The alert background color _(default: undefined)_\n- **--bq-alert--border-radius** - The alert border radius _(default: undefined)_\n- **--bq-alert--content-footer-gap** - The alert content and footer gap _(default: undefined)_\n- **--bq-alert--title-body-gap** - The alert title and body gap _(default: undefined)_\n- **--bq-alert--border-color** - The alert border color _(default: undefined)_\n- **--bq-alert--border-style** - The alert border style _(default: undefined)_\n- **--bq-alert--border-width** - The alert border width _(default: undefined)_\n- **--bq-alert--background-info** - The alert background color for info type _(default: undefined)_\n- **--bq-alert--background-success** - The alert background color for success type _(default: undefined)_\n- **--bq-alert--background-warning** - The alert background color for warning type _(default: undefined)_\n- **--bq-alert--background-error** - The alert background color for error type _(default: undefined)_\n- **--bq-alert--border-info** - The alert border color for info type _(default: undefined)_\n- **--bq-alert--border-success** - The alert border color for success type _(default: undefined)_\n- **--bq-alert--border-warning** - The alert border color for warning type _(default: undefined)_\n- **--bq-alert--border-error** - The alert border color for error type _(default: undefined)_\n- **--bq-alert--icon-color-info** - The alert icon color for info type _(default: undefined)_\n- **--bq-alert--icon-color-success** - The alert icon color for success type _(default: undefined)_\n- **--bq-alert--icon-color-warning** - The alert icon color for warning type _(default: undefined)_\n- **--bq-alert--icon-color-error** - The alert icon color for error type _(default: undefined)_\n- **--bq-alert--padding** - The alert padding _(default: undefined)_\n- **--bq-alert--min-width** - The alert 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 alert description content\n- **btn-close** - The `bq-button` used to close the alert\n- **content** - The container `<div>` that wraps all the alert content (title, description, footer)\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the alert main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component\n- **title** - The container `<div>` that wraps the alert title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -175,27 +143,33 @@
       "references": []
     },
     {
-      "name": "bq-badge",
-      "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the badge. The content can be a number or a text.\n\n### **CSS Properties:**\n - **--bq-badge--background-color** - The badge background color _(default: undefined)_\n- **--bq-badge--box-shadow** - The badge box shadow _(default: undefined)_\n- **--bq-badge--border-color** - The badge border color _(default: undefined)_\n- **--bq-badge--border-radius** - The badge border radius _(default: undefined)_\n- **--bq-badge--border-style** - The badge border style _(default: undefined)_\n- **--bq-badge--border-width** - The badge border width _(default: undefined)_\n- **--bq-badge--size-small** - The badge small size _(default: undefined)_\n- **--bq-badge--size-medium** - The badge medium size _(default: undefined)_\n- **--bq-badge--size-large** - The badge large size _(default: undefined)_\n- **--bq-badge--text-color** - The badge text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the count.\n- **number** - The component's internal wrapper that holds the slot.",
+      "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": "background-color",
-          "description": "Badge background color. The value should be a valid value of the palette color.",
+          "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": "text-color",
-          "description": "Badge number color. The value should be a valid value of the palette color.",
+          "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 badge. Relevant if badge has no content.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
+          "description": "The size of accordion to be applied to all accordions",
+          "values": [{ "name": "small" }, { "name": "medium" }]
         }
       ],
       "references": []
@@ -212,28 +186,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-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 is clicked\n- **bqClick** - Handler to be called when button gets focus\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.",
@@ -327,6 +279,54 @@
       ],
       "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-badge",
+      "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the badge. The content can be a number or a text.\n\n### **CSS Properties:**\n - **--bq-badge--background-color** - The badge background color _(default: undefined)_\n- **--bq-badge--box-shadow** - The badge box shadow _(default: undefined)_\n- **--bq-badge--border-color** - The badge border color _(default: undefined)_\n- **--bq-badge--border-radius** - The badge border radius _(default: undefined)_\n- **--bq-badge--border-style** - The badge border style _(default: undefined)_\n- **--bq-badge--border-width** - The badge border width _(default: undefined)_\n- **--bq-badge--size-small** - The badge small size _(default: undefined)_\n- **--bq-badge--size-medium** - The badge medium size _(default: undefined)_\n- **--bq-badge--size-large** - The badge large size _(default: undefined)_\n- **--bq-badge--text-color** - The badge text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the count.\n- **number** - The component's internal wrapper that holds the slot.",
+      "attributes": [
+        {
+          "name": "background-color",
+          "description": "Badge background color. The value should be a valid value of the palette color.",
+          "values": []
+        },
+        {
+          "name": "text-color",
+          "description": "Badge number color. The value should be a valid value of the palette color.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the badge. Relevant if badge has no content.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-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",
@@ -761,39 +761,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-drawer",
-      "description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
-      "attributes": [
-        {
-          "name": "enable-backdrop",
-          "description": "If true, the backdrop overlay will be shown when the drawer opens.",
-          "values": []
-        },
-        {
-          "name": "close-on-click-outside",
-          "description": "If true, the drawer will not close when clicking outside the panel.",
-          "values": []
-        },
-        {
-          "name": "close-on-esc",
-          "description": "If true, the drawer will not close when the [Esc] key is pressed.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "If true, the drawer component will be shown.",
-          "values": []
-        },
-        {
-          "name": "position",
-          "description": "Defines the position of the drawer.",
-          "values": [{ "name": "start" }, { "name": "end" }]
-        },
-        { "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
-      ],
-      "references": []
-    },
     {
       "name": "bq-empty-state",
       "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -811,35 +778,35 @@
       "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-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": "color",
-          "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
+          "name": "enable-backdrop",
+          "description": "If true, the backdrop overlay will be shown when the drawer opens.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "Label for the icon, used for accessibility.",
+          "name": "close-on-click-outside",
+          "description": "If true, the drawer will not close when clicking outside the panel.",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
+          "name": "close-on-esc",
+          "description": "If true, the drawer will not close when the [Esc] key is pressed.",
           "values": []
         },
         {
-          "name": "size",
-          "description": "Set the size of the SVG.",
+          "name": "open",
+          "description": "If true, the drawer component will be shown.",
           "values": []
         },
         {
-          "name": "src",
-          "description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
-          "values": []
+          "name": "position",
+          "description": "Defines the position of the drawer.",
+          "values": [{ "name": "start" }, { "name": "end" }]
         },
-        { "name": "weight", "values": [{ "name": "TIconWeight" }] }
+        { "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
       ],
       "references": []
     },
@@ -1013,6 +980,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-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`).",
@@ -1040,12 +1040,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-option-group",
-      "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "bq-option-list",
       "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
@@ -1058,6 +1052,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",
@@ -1109,58 +1115,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",
-      "attributes": [
-        {
-          "name": "border-shape",
-          "description": "It will set the border style of the progress bar",
-          "values": [{ "name": "rounded" }, { "name": "rounded-full" }]
-        },
-        {
-          "name": "enable-tooltip",
-          "description": "If `true`, a tooltip will be shown displaying the progress value",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "If `true` the indeterminate state of progress bar is enabled",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "If `true`, a label text showing the value (in percentage) will be shown",
-          "values": []
-        },
-        {
-          "name": "thickness",
-          "description": "Progress bar thickness",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "type",
-          "description": "Progress type",
-          "values": [{ "name": "default" }, { "name": "error" }]
-        },
-        {
-          "name": "value",
-          "description": "A number representing the current value of the progress bar",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-radio",
       "description": "The radio button is a user interface element that allows users to select a single option.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the radio loses focus\n- **bqClick** - Handler to be called when the radio state changes\n- **bqFocus** - Handler to be called when the radio gets focused\n- **bqKeyDown** - The handler is to be called when the radio key is pressed\n- **bqClick** - Handler to be called when the radio state changes\n- **bqFocus** - Handler to be called when the radio gets focus\n- **bqBlur** - Handler to be called when the radio loses focus\n- **bqKeyDown** - Handler to be called when the radio key is pressed\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n- **getNativeInput()** - Returns the native `<input>` HTML element used under the hood.\n\n### **Slots:**\n - _default_ - The bq-radio item\n\n### **CSS Properties:**\n - **--bq-radio--size** - Radio size _(default: undefined)_\n- **--bq-radio--border-width** - Radio border width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the radio component.\n- **input** - The native HTML `<input type=\"radio\">` used under the hood.\n- **radio** - The component's internal wrapper of the radio component.\n- **label** - The `<span>` element that holds the text content.",
@@ -1204,52 +1158,46 @@
       "references": []
     },
     {
-      "name": "bq-radio-group",
-      "description": "The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio-group fieldset value=\"option1\">\n<span slot=\"label\">radio group</span>\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n<bq-radio value=\"option2\">Radio option 2</bq-radio>\n<bq-radio value=\"option3\">Radio option 3</bq-radio>\n</bq-radio-group>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the radio state changes\n- **bqChange** - Handler to be called when the radio state changes\n\n### **Slots:**\n - _default_ - The bq-radio items to group\n- **label** - The label content of radio group\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the radio components.\n- **label** - The `<legend>` element that holds the text content.\n- **group** - The `<div>` element that holds the radio inputs.",
+      "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",
       "attributes": [
         {
-          "name": "background-on-hover",
-          "description": "If `true`, the radio displays background on hover",
-          "values": []
-        },
-        {
-          "name": "debounce-time",
-          "description": "A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change",
-          "values": []
+          "name": "border-shape",
+          "description": "It will set the border style of the progress bar",
+          "values": [{ "name": "rounded" }, { "name": "rounded-full" }]
         },
         {
-          "name": "disabled",
-          "description": "If `true` radio inputs are disabled",
+          "name": "enable-tooltip",
+          "description": "If `true`, a tooltip will be shown displaying the progress value",
           "values": []
         },
         {
-          "name": "fieldset",
-          "description": "If `true` displays fieldset",
+          "name": "indeterminate",
+          "description": "If `true` the indeterminate state of progress bar is enabled",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
+          "name": "label",
+          "description": "If `true`, a label text showing the value (in percentage) will be shown",
           "values": []
         },
         {
-          "name": "orientation",
-          "description": "The display orientation of the radio inputs",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-        },
-        {
-          "name": "required",
-          "description": "If `true`, the radio group is required",
-          "values": []
+          "name": "thickness",
+          "description": "Progress bar thickness",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         },
         {
-          "name": "required-validation-message",
-          "description": "The native form validation message when the radio group is required",
-          "values": []
+          "name": "type",
+          "description": "Progress type",
+          "values": [{ "name": "default" }, { "name": "error" }]
         },
         {
           "name": "value",
-          "description": "The display orientation of the radio inputs",
+          "description": "A number representing the current value of the progress bar",
           "values": []
         }
       ],
@@ -1396,28 +1344,54 @@
       "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",
+      "name": "bq-radio-group",
+      "description": "The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-radio-group fieldset value=\"option1\">\n<span slot=\"label\">radio group</span>\n<bq-radio value=\"option1\">Radio option 1</bq-radio>\n<bq-radio value=\"option2\">Radio option 2</bq-radio>\n<bq-radio value=\"option3\">Radio option 3</bq-radio>\n</bq-radio-group>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the radio state changes\n- **bqChange** - Handler to be called when the radio state changes\n\n### **Slots:**\n - _default_ - The bq-radio items to group\n- **label** - The label content of radio group\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the radio components.\n- **label** - The `<legend>` element that holds the text content.\n- **group** - The `<div>` element that holds the radio inputs.",
       "attributes": [
         {
-          "name": "appearance",
-          "description": "It sets a predefined appearance of the side menu.",
-          "values": [
-            { "name": "brand" },
-            { "name": "default" },
-            { "name": "inverse" }
-          ]
+          "name": "background-on-hover",
+          "description": "If `true`, the radio displays background on hover",
+          "values": []
         },
         {
-          "name": "collapse",
-          "description": "If `true`, the container will reduce its width.",
+          "name": "debounce-time",
+          "description": "A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change",
           "values": []
         },
         {
-          "description": "size - It sets the size of the navigation menu items.",
-          "values": [{ "name": "medium" }, { "name": "small" }]
+          "name": "disabled",
+          "description": "If `true` radio inputs are disabled",
+          "values": []
         },
-        { "name": "size", "values": [{ "name": "TSideMenuSize" }] }
+        {
+          "name": "fieldset",
+          "description": "If `true` displays fieldset",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
+          "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "The display orientation of the radio inputs",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "required",
+          "description": "If `true`, the radio group is required",
+          "values": []
+        },
+        {
+          "name": "required-validation-message",
+          "description": "The native form validation message when the radio group is required",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The display orientation of the radio inputs",
+          "values": []
+        }
       ],
       "references": []
     },
@@ -1443,6 +1417,32 @@
       ],
       "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",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "It sets a predefined appearance of the side menu.",
+          "values": [
+            { "name": "brand" },
+            { "name": "default" },
+            { "name": "inverse" }
+          ]
+        },
+        {
+          "name": "collapse",
+          "description": "If `true`, the container will reduce its width.",
+          "values": []
+        },
+        {
+          "description": "size - It sets the size of the navigation menu items.",
+          "values": [{ "name": "medium" }, { "name": "small" }]
+        },
+        { "name": "size", "values": [{ "name": "TSideMenuSize" }] }
+      ],
+      "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`.",
@@ -1542,6 +1542,24 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-status",
+      "description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "It defines the type of status to display.",
+          "values": [
+            { "name": "alert" },
+            { "name": "danger" },
+            { "name": "info" },
+            { "name": "neutral" },
+            { "name": "success" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-step-item",
       "description": "The Step Item Component is a UI element used to display a single step or stage in a process or task.\nIt should be used inside the Steps component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-step-item status=\"completed\">\n<bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n<span>Title</span>\n<span slot=\"description\">Description</span>\n</bq-step-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Callback handler emitted when the step item is clicked\n- **bqClick** - Callback handler emitted when the step item is clicked\n\n### **Slots:**\n - _default_ - The step item content\n- **prefix** - The step item prefix\n- **description** - The step item description\n\n### **CSS Properties:**\n - **--bq-step-item--prefix-color** - Color of the prefix icon _(default: undefined)_\n- **--bq-step-item--prefix-color-current** - Color of the prefix icon when current _(default: undefined)_\n- **--bq-step-item--prefix-color-completed** - Color of the prefix icon when completed _(default: undefined)_\n- **--bq-step-item--prefix-color-error** - Color of the prefix icon when error _(default: undefined)_\n- **--bq-step-item--prefix-num-size** - Size of the prefix number _(default: undefined)_\n- **--bq-step-item--prefix-num-bg-color** - Background color of the prefix number _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The component's title.\n- **description** - The component's description.",
@@ -1574,24 +1592,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-status",
-      "description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "It defines the type of status to display.",
-          "values": [
-            { "name": "alert" },
-            { "name": "danger" },
-            { "name": "info" },
-            { "name": "neutral" },
-            { "name": "success" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-steps",
       "description": "The Steps Component is a UI element used to display a series of steps or stages in a process or task.\nIt is used to guide users through a process or task and to indicate their progress.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n<bq-step-item status=\"completed\"> ... </bq-step-item>\n<bq-step-item status=\"error\"> ... </bq-step-item>\n<bq-step-item status=\"current\"> ... </bq-step-item>\n<bq-step-item status=\"default\"> ... </bq-step-item>\n</bq-steps>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The step items\n\n### **CSS Properties:**\n - **--bq-steps--divider-color** - Divider color _(default: undefined)_\n- **--bq-steps--gap** - Gap between steps _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The container wrapper of the Steps component\n- **divider-base** - The base wrapper of the divider component\n- **divider-dash-start** - The dash start wrapper of the divider component\n- **divider-dash-end** - The dash end wrapper of the divider component",