@beeq/core 1.10.0-beta.4 → 1.10.0-beta.5

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

@@ -63,38 +63,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-avatar",
       "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **badge** - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.\n\n### **CSS Properties:**\n - **--bq-avatar--background** - Avatar background color _(default: undefined)_\n- **--bq-avatar--border-color** - Avatar border color _(default: undefined)_\n- **--bq-avatar--border-style** - Avatar border style _(default: undefined)_\n- **--bq-avatar--border-width** - Avatar border width _(default: undefined)_\n- **--bq-avatar--border-radius-circle** - Avatar border radius for circle & any size _(default: undefined)_\n- **--bq-avatar--border-radius-squareXs** - Avatar border radius for square & size xsmall _(default: undefined)_\n- **--bq-avatar--border-radius-squareS** - Avatar border radius for square & size small _(default: undefined)_\n- **--bq-avatar--border-radius-squareM** - Avatar border radius for square & size medium/large _(default: undefined)_\n- **--bq-avatar--size-xsmall** - Avatar xsmall size _(default: undefined)_\n- **--bq-avatar--size-small** - Avatar small size _(default: undefined)_\n- **--bq-avatar--size-medium** - Avatar medium size _(default: undefined)_\n- **--bq-avatar--size-large** - Avatar large size _(default: undefined)_\n- **--bq-avatar--badge-top-square** - Badge top position shape square _(default: undefined)_\n- **--bq-avatar--badge-left-square** - Badge left position shape square _(default: undefined)_\n- **--bq-avatar--badge-top-circle** - Badge top position shape circle _(default: undefined)_\n- **--bq-avatar--badge-left-circle** - Badge left position shape circle _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **img** - The `<image>` tag element that load the image source.\n- **text** - The `<span>` tag element that rendered the `Initials` text string.\n- **badge** - The container that wraps the badge slot element.",
@@ -175,23 +143,33 @@
       "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",
+      "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": "href",
-          "description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
+          "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": "target",
-          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
+          "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": "rel",
-          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
+          "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": []
@@ -208,6 +186,28 @@
       ],
       "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.",
@@ -236,7 +236,7 @@
     },
     {
       "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.",
+      "description": "Buttons are designed for users to take action on a page or a screen.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n<bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\nGo back\n</bq-button>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when button gets focus\n- **bqClick** - Handler to be called when the button is clicked\n- **bqBlur** - Handler to be called when the button loses focus.\n- **bqFocus** - Handler to be called when the button gets focus.\n- **bqClick** - Handler to be called when the button is clicked.\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the button label\n- _default_ - The button label content\n- **suffix** - The suffix content to be displayed after the button label\n\n### **CSS Properties:**\n - **--bq-button--border-color** - Button border color _(default: undefined)_\n- **--bq-button--border-radius** - Button border radius _(default: undefined)_\n- **--bq-button--border-style** - Button border style _(default: undefined)_\n- **--bq-button--border-width** - Button border width _(default: undefined)_\n- **--bq-button--small-height** - Button small height _(default: undefined)_\n- **--bq-button--small-paddingX** - Button small padding block (top and bottom) _(default: undefined)_\n- **--bq-button--small-paddingY** - Button small padding inline (left and right) _(default: undefined)_\n- **--bq-button--small-font-size** - Button small font size _(default: undefined)_\n- **--bq-button--medium-height** - Button medium height _(default: undefined)_\n- **--bq-button--medium-paddingX** - Button medium padding block (top and bottom) _(default: undefined)_\n- **--bq-button--medium-paddingY** - Button medium padding inline (left and right) _(default: undefined)_\n- **--bq-button--medium-font-size** - Button medium font size _(default: undefined)_\n- **--bq-button--large-height** - Button large height _(default: undefined)_\n- **--bq-button--large-paddingX** - Button large padding block (top and bottom) _(default: undefined)_\n- **--bq-button--large-paddingY** - Button large padding inline (left and right) _(default: undefined)_\n- **--bq-button--large-font-size** - Button large font size _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The `<a>` or `<button>` HTML element used under the hood.\n- **prefix** - The `<span>` tag element that acts as prefix container.\n- **label** - The `<span>` tag element that renders the text of the button.\n- **suffix** - The `<span>` tag element that acts as suffix container.",
       "attributes": [
         {
           "name": "appearance",
@@ -327,31 +327,6 @@
       ],
       "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",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "Type of card component",
-          "values": [{ "name": "default" }, { "name": "minimal" }]
-        },
-        {
-          "name": "border",
-          "description": "The corner radius of the card component",
-          "values": [
-            { "name": "none" },
-            { "name": "xs2" },
-            { "name": "xs" },
-            { "name": "s" },
-            { "name": "m" },
-            { "name": "l" },
-            { "name": "full" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-checkbox",
       "description": "The checkbox is a UI component that allows users to select one or more options from a list of choices.\nIt is commonly used in forms, surveys, and settings pages.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\nCheckbox label\n</bq-checkbox>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n- **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\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\n### **Slots:**\n - _default_ - The content of the checkbox component\n\n### **CSS Properties:**\n - **--bq-checkbox--size** - Checkbox size _(default: undefined)_\n- **--bq-checkbox--border-radius** - Checkbox border radius _(default: undefined)_\n- **--bq-checkbox--border-width** - Checkbox border width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the checkbox component.\n- **control** - The container `<div>` element that holds the custom checkbox.\n- **input** - The native HTML `<input type=\"checkbox\">` used under the hood.\n- **checkbox** - The `<span>` element that renders the custom checked/indeterminate state.\n- **label** - The `<span>` element that holds the text content.",
@@ -404,6 +379,31 @@
       ],
       "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",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "Type of card component",
+          "values": [{ "name": "default" }, { "name": "minimal" }]
+        },
+        {
+          "name": "border",
+          "description": "The corner radius of the card component",
+          "values": [
+            { "name": "none" },
+            { "name": "xs2" },
+            { "name": "xs" },
+            { "name": "s" },
+            { "name": "m" },
+            { "name": "l" },
+            { "name": "full" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-date-picker",
       "description": "The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-date-picker\nfirst-day-of-week=\"1\"\nlocale=\"en-GB\"\nmonths-per-view=\"single\"\nmonths=\"2\"\nname=\"bq-date-picker\"\nplaceholder=\"Enter your date\"\nplacement=\"bottom-end\"\nshow-outside-days=\"false\"\ntype=\"range\"\nvalidation-status=\"none\"\nvalue=\"2024-05-25\"\n>\n<label class=\"flex flex-grow items-center\" slot=\"label\">\nDate picker label\n</label>\n</bq-date-picker>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Callback handler emitted when the input loses focus.\n- **bqChange** - Callback handler emitted when the input value has changed and the input loses focus.\n- **bqClear** - Callback handler emitted when the input value has been cleared.\n- **bqFocus** - Callback handler emitted when the input has received focus.\n- **bqBlur** - Callback handler emitted when the input loses focus\n- **bqChange** - Callback handler emitted when the input value has changed and the input loses focus.\nThis handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n- **bqClear** - Callback handler emitted when the input value has been cleared\n- **bqFocus** - Callback handler emitted when the input has received focus\n\n### **Methods:**\n - **clear(): _Promise<void>_** - Clears the selected value.\n\n### **CSS Properties:**\n - **--bq-date-picker--background-color** - Date picker background color. _(default: undefined)_\n- **--bq-date-picker--border-color** - Date picker border color. _(default: undefined)_\n- **--bq-date-picker--border-color-disabled** - Date picker border color when disabled. _(default: undefined)_\n- **--bq-date-picker--border-color-focus** - Date picker border color on focus. _(default: undefined)_\n- **--bq-date-picker--border-radius** - Date picker border radius. _(default: undefined)_\n- **--bq-date-picker--border-style** - Date picker border style. _(default: undefined)_\n- **--bq-date-picker--border-width** - Date picker border width. _(default: undefined)_\n- **--bq-date-picker--currentDate-border-color** - Date picker border color for current date. _(default: undefined)_\n- **--bq-date-picker--currentDate-border-width** - Date picker border width for current date. _(default: undefined)_\n- **--bq-date-picker--day-size** - Date picker button day size. _(default: undefined)_\n- **--bq-date-picker--gap** - Gap between Date picker content and prefix/suffix. _(default: undefined)_\n- **--bq-date-picker--icon-size** - Icon size to use in prefix/suffix and clear button. _(default: undefined)_\n- **--bq-date-picker--label-margin-bottom** - Date picker label margin bottom. _(default: undefined)_\n- **--bq-date-picker--label-text-color** - Date picker label text color. _(default: undefined)_\n- **--bq-date-picker--label-text-size** - Date picker label text size. _(default: undefined)_\n- **--bq-date-picker--padding-end** - Date picker padding end. _(default: undefined)_\n- **--bq-date-picker--padding-start** - Date picker padding start. _(default: undefined)_\n- **--bq-date-picker--paddingY** - Date picker padding top and bottom. _(default: undefined)_\n- **--bq-date-picker--range-background-color** - Background color for the selected date range in the date picker. _(default: undefined)_\n- **--bq-date-picker--range-inner-background-color** - Background color for the selected dates inside the date range in the date picker. _(default: undefined)_\n- **--bq-date-picker--text-color** - Date picker text color. _(default: undefined)_\n- **--bq-date-picker--text-placeholder-color** - Date picker placeholder text color. _(default: undefined)_\n- **--bq-date-picker--text-size** - Date picker text size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The native HTML button used under the hood in the clear button.\n- **calendar__button** - Any button used in the calendar-month component.\n- **calendar__button** - Any button within the calendar-range component.\n- **calendar__container** - The calendar-range container for the entire component.\n- **calendar__day** - The buttons corresponding to each day in the calendar-month grid.\n- **calendar__disabled** - A button that is disabled due to min/max on the calendar-range component.\n- **calendar__disallowed** - Any day that has been disallowed via isDateDisallowed.\n- **calendar__head** - The calendar-month table's header row.\n- **calendar__header** - The calendar-range container for the heading and buttons.\n- **calendar__heading** - The calendar-month heading container that labels the month.\n- **calendar__heading** - The calendar-range heading containing the month and year.\n- **calendar__next** - The next page button on the calendar-range component.\n- **calendar__outside** - Any days which are outside the current month.\n- **calendar__previous** - The previous page button on the calendar-range component.\n- **calendar__range-end** - The day at the end of a date range.\n- **calendar__range-inner** - Any days between the start and end of a date range.\n- **calendar__range-start** - The day at the start of a date range.\n- **calendar__selected** - Any days which are selected.\n- **calendar__table** - The calendar-month <table> element.\n- **calendar__td** - The calendar-month table's body cells.\n- **calendar__th** - The calendar-month table's header cells.\n- **calendar__today** - The Today's day.\n- **calendar__tr** - Any row within the table on the calendar-month component.\n- **calendar__week** - The calendar-month table's body rows.\n- **clear-btn** - The clear button.\n- **control** - The input control wrapper.\n- **input** - The native HTML input element used under the hood.\n- **label** - The label slot container.\n- **panel** - The date picker panel container\n- **prefix** - The prefix slot container.\n- **suffix** - The suffix slot container.",
@@ -577,68 +577,61 @@
       "references": []
     },
     {
-      "name": "bq-dropdown",
-      "description": "The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\nThey provide an efficient way to save space and present a long list of options in a compact and organized manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dropdown placement=\"bottom-start\">\n<bq-button slot=\"trigger\">Dropdown</bq-button>\n<bq-option-list>\n<bq-option value=\"users\">...</bq-option>\n<bq-option value=\"user\">...</bq-option>\n<bq-option value=\"dashboard\">...</bq-option>\n<bq-option value=\"settings\">...</bq-option>\n<bq-option value=\"logout\">...</bq-option>\n</bq-option-list>\n</bq-dropdown>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n- **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n\n### **Methods:**\n - **onClickOutside(event: _MouseEvent_)** - Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component.\n\n### **Slots:**\n - **trigger** - The trigger element that opens the dropdown panel.\n- _default_ - The content of the dropdown panel.\n\n### **CSS Properties:**\n - **--bq-panel--background** - Panel background color _(default: undefined)_\n- **--bq-panel--border-color** - Panel border color _(default: undefined)_\n- **--bq-panel--border-radius** - Panel border radius _(default: undefined)_\n- **--bq-panel--border-style** - Panel border style _(default: undefined)_\n- **--bq-panel--border-width** - Panel border width _(default: undefined)_\n- **--bq-panel--box-shadow** - Panel box shadow _(default: undefined)_\n- **--bq-panel--padding** - Panel padding _(default: undefined)_\n- **--bq-panel--height** - Panel height _(default: undefined)_\n- **--bq-panel--width** - Panel width _(default: undefined)_\n- **--bq-panel-z-index** - Panel z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dropdown** - The `<bq-panel>` element used under the hood to display the dropdown panel.\n- **panel** - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n- **trigger** - The `<div>` element that hosts the trigger element.",
+      "name": "bq-dialog",
+      "description": "The Dialog component is used to display additional content or prompt a user for action.\nIt provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n<h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n<bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\nTitle\n</h5>\n<p>\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\nstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\ntype specimen book.\n</p>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"link\">Button</bq-button>\n<bq-button variant=\"ghost\">Button</bq-button>\n<bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n</div>\n</bq-dialog>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed.\n- **bqClose** - Callback handler emitted when the dialog will close.\n- **bqOpen** - Callback handler emitted when the dialog will open.\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening.\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing.\n- **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed\n- **bqClose** - Callback handler emitted when the dialog will close\n- **bqOpen** - Callback handler emitted when the dialog will open\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing\n\n### **Methods:**\n - **show()** - Open the dialog\n- **hide()** - Closes the dialog\n- **cancel()** - Dismiss or cancel the dialog\n\n### **Slots:**\n - **title** - The title content of the dialog.\n- _default_ - The body content of the dialog.\n- **footer** - The footer content of the dialog.\n- **button-close** - The close button content of the dialog.\n\n### **CSS Properties:**\n - **--bq-dialog--background** - Dialog background color _(default: undefined)_\n- **--bq-dialog--background-backdrop** - Dialog backdrop background color _(default: undefined)_\n- **--bq-dialog--box-shadow** - Dialog box shadow _(default: undefined)_\n- **--bq-dialog--border-color** - Dialog border color _(default: undefined)_\n- **--bq-dialog--border-style** - Dialog border style _(default: undefined)_\n- **--bq-dialog--border-width** - Dialog border width _(default: undefined)_\n- **--bq-dialog--border-radius** - Dialog border radius _(default: undefined)_\n- **--bq-dialog--padding** - Dialog padding _(default: undefined)_\n- **--bq-dialog--content-footer-gap** - Dialog gap distance between content and footer elements _(default: undefined)_\n- **--bq-dialog--title-body-gap** - Dialog gap distance between title and body elements _(default: undefined)_\n- **--bq-dialog--width-small** - Dialog small width _(default: undefined)_\n- **--bq-dialog--width-medium** - Dialog medium width _(default: undefined)_\n- **--bq-dialog--width-large** - Dialog large width _(default: undefined)_\n- **--bq-dialog-z-index** - Dialog z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - The `<main>` that holds the dialog body content.\n- **button-close** - The button that closes the dialog on click.\n- **content** - The `<div>` container that holds the dialog title and body content.\n- **dialog** - The `<dialog>` wrapper container inside the shadow DOM.\n- **footer** - The `<footer>` that holds footer content.\n- **header** - The `<header>` that holds the icon, title, description and close button.\n- **title** - The `<div>` that holds the title content.",
       "attributes": [
         {
-          "name": "disabled",
-          "description": "If true, the dropdown panel will be visible and won't be shown.",
-          "values": []
+          "name": "border",
+          "description": "Border radius of the dialog component.",
+          "values": [
+            { "name": "none" },
+            { "name": "xs2" },
+            { "name": "xs" },
+            { "name": "s" },
+            { "name": "m" },
+            { "name": "l" },
+            { "name": "full" }
+          ]
         },
         {
-          "name": "distance",
-          "description": "Represents the distance (gutter or margin) between the panel and the trigger element.",
+          "name": "disable-backdrop",
+          "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
           "values": []
         },
         {
-          "name": "keep-open-on-select",
-          "description": "If true, the panel will remain open after a selection is made.",
+          "name": "disable-close-esc-keydown",
+          "description": "If true, the dialog will not close when the [Esc] key is pressed.",
           "values": []
         },
         {
-          "name": "placement",
-          "description": "Position of the panel.",
-          "values": [
-            { "name": "top" },
-            { "name": "bottom" },
-            { "name": "left" },
-            { "name": "right" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" },
-            { "name": "left-start" },
-            { "name": "left-end" },
-            { "name": "right-start" },
-            { "name": "right-end" }
-          ]
-        },
-        {
-          "name": "open",
-          "description": "If true, the panel will be visible.",
+          "name": "disable-close-click-outside",
+          "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
           "values": []
         },
         {
-          "name": "panel-height",
-          "description": "When set, it will override the height of the dropdown panel.",
-          "values": []
+          "name": "footer-appearance",
+          "description": "The appearance of the footer.",
+          "values": [{ "name": "standard" }, { "name": "highlight" }]
         },
         {
-          "name": "same-width",
-          "description": "Whether the panel should have the same width as the trigger element.",
+          "name": "hide-close-button",
+          "description": "If true, it hides the close button.",
           "values": []
         },
         {
-          "name": "skidding",
-          "description": "Represents the skidding between the panel and the trigger element.",
+          "name": "open",
+          "description": "If true, the dialog will be shown as open.",
           "values": []
         },
         {
-          "name": "strategy",
-          "description": "Defines the strategy to position the panel.",
-          "values": [{ "name": "fixed" }, { "name": "absolute" }]
-        },
-        { "name": "disable-scroll-lock", "values": [] }
+          "name": "size",
+          "description": "The size of the dialog.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
       ],
       "references": []
     },
@@ -703,61 +696,84 @@
       "references": []
     },
     {
-      "name": "bq-dialog",
-      "description": "The Dialog component is used to display additional content or prompt a user for action.\nIt provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n<h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n<bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\nTitle\n</h5>\n<p>\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\nstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\ntype specimen book.\n</p>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"link\">Button</bq-button>\n<bq-button variant=\"ghost\">Button</bq-button>\n<bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n</div>\n</bq-dialog>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed.\n- **bqClose** - Callback handler emitted when the dialog will close.\n- **bqOpen** - Callback handler emitted when the dialog will open.\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening.\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing.\n- **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed\n- **bqClose** - Callback handler emitted when the dialog will close\n- **bqOpen** - Callback handler emitted when the dialog will open\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing\n\n### **Methods:**\n - **show()** - Open the dialog\n- **hide()** - Closes the dialog\n- **cancel()** - Dismiss or cancel the dialog\n\n### **Slots:**\n - **title** - The title content of the dialog.\n- _default_ - The body content of the dialog.\n- **footer** - The footer content of the dialog.\n- **button-close** - The close button content of the dialog.\n\n### **CSS Properties:**\n - **--bq-dialog--background** - Dialog background color _(default: undefined)_\n- **--bq-dialog--background-backdrop** - Dialog backdrop background color _(default: undefined)_\n- **--bq-dialog--box-shadow** - Dialog box shadow _(default: undefined)_\n- **--bq-dialog--border-color** - Dialog border color _(default: undefined)_\n- **--bq-dialog--border-style** - Dialog border style _(default: undefined)_\n- **--bq-dialog--border-width** - Dialog border width _(default: undefined)_\n- **--bq-dialog--border-radius** - Dialog border radius _(default: undefined)_\n- **--bq-dialog--padding** - Dialog padding _(default: undefined)_\n- **--bq-dialog--content-footer-gap** - Dialog gap distance between content and footer elements _(default: undefined)_\n- **--bq-dialog--title-body-gap** - Dialog gap distance between title and body elements _(default: undefined)_\n- **--bq-dialog--width-small** - Dialog small width _(default: undefined)_\n- **--bq-dialog--width-medium** - Dialog medium width _(default: undefined)_\n- **--bq-dialog--width-large** - Dialog large width _(default: undefined)_\n- **--bq-dialog-z-index** - Dialog z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - The `<main>` that holds the dialog body content.\n- **button-close** - The button that closes the dialog on click.\n- **content** - The `<div>` container that holds the dialog title and body content.\n- **dialog** - The `<dialog>` wrapper container inside the shadow DOM.\n- **footer** - The `<footer>` that holds footer content.\n- **header** - The `<header>` that holds the icon, title, description and close button.\n- **title** - The `<div>` that holds the title content.",
+      "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",
       "attributes": [
         {
-          "name": "border",
-          "description": "Border radius of the dialog component.",
+          "name": "size",
+          "description": "The size of the empty state component",
           "values": [
-            { "name": "none" },
-            { "name": "xs2" },
-            { "name": "xs" },
-            { "name": "s" },
-            { "name": "m" },
-            { "name": "l" },
-            { "name": "full" }
+            { "name": "large" },
+            { "name": "medium" },
+            { "name": "small" }
           ]
-        },
-        {
-          "name": "disable-backdrop",
-          "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
-          "values": []
-        },
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "bq-dropdown",
+      "description": "The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\nThey provide an efficient way to save space and present a long list of options in a compact and organized manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dropdown placement=\"bottom-start\">\n<bq-button slot=\"trigger\">Dropdown</bq-button>\n<bq-option-list>\n<bq-option value=\"users\">...</bq-option>\n<bq-option value=\"user\">...</bq-option>\n<bq-option value=\"dashboard\">...</bq-option>\n<bq-option value=\"settings\">...</bq-option>\n<bq-option value=\"logout\">...</bq-option>\n</bq-option-list>\n</bq-dropdown>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n- **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n\n### **Methods:**\n - **onClickOutside(event: _MouseEvent_)** - Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component.\n\n### **Slots:**\n - **trigger** - The trigger element that opens the dropdown panel.\n- _default_ - The content of the dropdown panel.\n\n### **CSS Properties:**\n - **--bq-panel--background** - Panel background color _(default: undefined)_\n- **--bq-panel--border-color** - Panel border color _(default: undefined)_\n- **--bq-panel--border-radius** - Panel border radius _(default: undefined)_\n- **--bq-panel--border-style** - Panel border style _(default: undefined)_\n- **--bq-panel--border-width** - Panel border width _(default: undefined)_\n- **--bq-panel--box-shadow** - Panel box shadow _(default: undefined)_\n- **--bq-panel--padding** - Panel padding _(default: undefined)_\n- **--bq-panel--height** - Panel height _(default: undefined)_\n- **--bq-panel--width** - Panel width _(default: undefined)_\n- **--bq-panel-z-index** - Panel z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dropdown** - The `<bq-panel>` element used under the hood to display the dropdown panel.\n- **panel** - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n- **trigger** - The `<div>` element that hosts the trigger element.",
+      "attributes": [
         {
-          "name": "disable-close-esc-keydown",
-          "description": "If true, the dialog will not close when the [Esc] key is pressed.",
+          "name": "disabled",
+          "description": "If true, the dropdown panel will be visible and won't be shown.",
           "values": []
         },
         {
-          "name": "disable-close-click-outside",
-          "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
+          "name": "distance",
+          "description": "Represents the distance (gutter or margin) between the panel and the trigger element.",
           "values": []
         },
         {
-          "name": "footer-appearance",
-          "description": "The appearance of the footer.",
-          "values": [{ "name": "standard" }, { "name": "highlight" }]
-        },
-        {
-          "name": "hide-close-button",
-          "description": "If true, it hides the close button.",
+          "name": "keep-open-on-select",
+          "description": "If true, the panel will remain open after a selection is made.",
           "values": []
         },
         {
-          "name": "open",
-          "description": "If true, the dialog will be shown as open.",
+          "name": "placement",
+          "description": "Position of the panel.",
+          "values": [
+            { "name": "top" },
+            { "name": "bottom" },
+            { "name": "left" },
+            { "name": "right" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" },
+            { "name": "left-start" },
+            { "name": "left-end" },
+            { "name": "right-start" },
+            { "name": "right-end" }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "If true, the panel will be visible.",
           "values": []
         },
         {
-          "name": "size",
-          "description": "The size of the dialog.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        }
+          "name": "panel-height",
+          "description": "When set, it will override the height of the dropdown panel.",
+          "values": []
+        },
+        {
+          "name": "same-width",
+          "description": "Whether the panel should have the same width as the trigger element.",
+          "values": []
+        },
+        {
+          "name": "skidding",
+          "description": "Represents the skidding between the panel and the trigger element.",
+          "values": []
+        },
+        {
+          "name": "strategy",
+          "description": "Defines the strategy to position the panel.",
+          "values": [{ "name": "fixed" }, { "name": "absolute" }]
+        },
+        { "name": "disable-scroll-lock", "values": [] }
       ],
       "references": []
     },
@@ -795,18 +811,35 @@
       "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",
+      "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": "The size of the empty state component",
-          "values": [
-            { "name": "large" },
-            { "name": "medium" },
-            { "name": "small" }
-          ]
-        }
+          "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": []
     },
@@ -943,35 +976,40 @@
       "references": []
     },
     {
-      "name": "bq-icon",
-      "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **svgLoaded** - Callback handler to be called when the SVG has loaded.\n- **svgLoaded** - Callback handler to be called when the SVG has loaded\n\n### **Methods:**\n - **handleWeightChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release\n\n### **CSS Properties:**\n - **--bq-icon--color** - The stroke color of the SVG. _(default: undefined)_\n- **--bq-icon--size** - The size of the SVG. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the icon SVG content.\n- **svg** - The `<svg>` tag element inside the component.",
+      "name": "bq-notification",
+      "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
       "attributes": [
         {
-          "name": "color",
-          "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
+          "name": "auto-dismiss",
+          "description": "If true, the notification will automatically hide after the specified amount of time",
           "values": []
         },
         {
-          "name": "label",
-          "description": "Label for the icon, used for accessibility.",
+          "name": "border",
+          "description": "The corder radius of the notification component",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
+          "name": "disable-close",
+          "description": "If true, the close button at the top right of the notification won't be shown",
           "values": []
         },
         {
-          "name": "size",
-          "description": "Set the size of the SVG.",
+          "name": "hide-icon",
+          "description": "If true, the notification icon won't be shown",
           "values": []
         },
         {
-          "name": "src",
-          "description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
+          "name": "open",
+          "description": "If true, the notification will be shown",
           "values": []
         },
-        { "name": "weight", "values": [{ "name": "TIconWeight" }] }
+        {
+          "name": "time",
+          "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
+          "values": []
+        },
+        { "name": "type", "description": "Type of Notification", "values": [] }
       ],
       "references": []
     },
@@ -1009,40 +1047,118 @@
       "references": []
     },
     {
-      "name": "bq-notification",
-      "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
+      "name": "bq-option-list",
+      "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
       "attributes": [
         {
-          "name": "auto-dismiss",
-          "description": "If true, the notification will automatically hide after the specified amount of time",
+          "name": "aria-label",
+          "description": "Aria label for the list.",
           "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "bq-page-title",
+      "description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
+      "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": "border",
-          "description": "The corder radius of the notification component",
+          "name": "enable-tooltip",
+          "description": "If `true`, a tooltip will be shown displaying the progress value",
           "values": []
         },
         {
-          "name": "disable-close",
-          "description": "If true, the close button at the top right of the notification won't be shown",
+          "name": "indeterminate",
+          "description": "If `true` the indeterminate state of progress bar is enabled",
           "values": []
         },
         {
-          "name": "hide-icon",
-          "description": "If true, the notification icon won't be shown",
+          "name": "label",
+          "description": "If `true`, a label text showing the value (in percentage) will be shown",
           "values": []
         },
         {
-          "name": "open",
-          "description": "If true, the notification will be shown",
+          "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-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": "background-on-hover",
+          "description": "If `true`, the radio displays background on hover",
           "values": []
         },
         {
-          "name": "time",
-          "description": "The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`",
+          "name": "debounce-time",
+          "description": "A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change",
           "values": []
         },
-        { "name": "type", "description": "Type of Notification", "values": [] }
+        {
+          "name": "disabled",
+          "description": "If `true` radio inputs are disabled",
+          "values": []
+        },
+        {
+          "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": []
     },
@@ -1098,66 +1214,45 @@
       "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.",
+      "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.",
       "attributes": [
         {
-          "name": "aria-label",
-          "description": "Aria label for the list.",
+          "name": "background-on-hover",
+          "description": "If `true`, the radio displays background on hover",
           "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "bq-page-title",
-      "description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
-      "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",
+          "name": "checked",
+          "description": "If `true` radio input is checked",
           "values": []
         },
         {
-          "name": "indeterminate",
-          "description": "If `true` the indeterminate state of progress bar is enabled",
+          "name": "disabled",
+          "description": "If `true` radio input is disabled",
           "values": []
         },
         {
-          "name": "label",
-          "description": "If `true`, a label text showing the value (in percentage) will be shown",
+          "name": "form-id",
+          "description": "The form ID that the radio input is associated with",
           "values": []
         },
         {
-          "name": "thickness",
-          "description": "Progress bar thickness",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
+          "name": "name",
+          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
+          "values": []
         },
         {
-          "name": "type",
-          "description": "Progress type",
-          "values": [{ "name": "default" }, { "name": "error" }]
+          "name": "required",
+          "description": "If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted",
+          "values": []
         },
         {
           "name": "value",
-          "description": "A number representing the current value of the progress bar",
+          "description": "A string representing the value of the radio",
           "values": []
-        }
+        },
+        { "name": "force-disabled", "values": [] }
       ],
       "references": []
     },
@@ -1187,49 +1282,6 @@
       ],
       "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.",
-      "attributes": [
-        {
-          "name": "background-on-hover",
-          "description": "If `true`, the radio displays background on hover",
-          "values": []
-        },
-        {
-          "name": "checked",
-          "description": "If `true` radio input is checked",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "If `true` radio input is disabled",
-          "values": []
-        },
-        {
-          "name": "form-id",
-          "description": "The form ID that the radio input is associated with",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "A string representing the value of the radio",
-          "values": []
-        },
-        { "name": "force-disabled", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "bq-select",
       "description": "The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-select placeholder=\"Placeholder\">\n<label slot=\"label\">Select label</label>\n<span slot=\"helper-text\">\n<bq-icon name=\"star\"></bq-icon>\nHelper text\n</span>\n\n<bq-option value=\"1\">Option 1</bq-option>\n<bq-option value=\"2\">Option 2</bq-option>\n<bq-option value=\"3\">Option 3</bq-option>\n</bq-select>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - The callback handler is emitted when the Select input loses focus.\n- **bqClear** - The callback handler is emitted when the selected value has been cleared.\n- **bqFocus** - A callback handler is emitted when the Select input has received focus.\n- **bqSelect** - The callback handler is emitted when the selected value has changed.\n- **bqBlur** - Callback handler emitted when the Select input loses focus\n- **bqClear** - Callback handler emitted when the selected value has been cleared\n- **bqFocus** - Callback handler emitted when the Select input has received focus\n- **bqSelect** - Callback handler emitted when the selected value has changed\n- **bqInput** - Callback handler emitted when the Select input changes its value while typing\n\n### **Methods:**\n - **clear(): _Promise<void>_** - Clears the selected value.\n- **reset(value: _TSelectValue_): _Promise<void>_** - Resets the Select input to a previous value.\n\n### **Slots:**\n - **label** - The label slot container.\n- **prefix** - The prefix slot container.\n- **tags** - The tags slot container.\n- **clear-icon** - The clear icon slot container.\n- **suffix** - The suffix slot container.\n- **helper-text** - The helper text slot container.\n\n### **CSS Properties:**\n - **--bq-select--background-color** - Select background color _(default: undefined)_\n- **--bq-select--border-color** - Select border color _(default: undefined)_\n- **--bq-select--border-color-focus** - Select border color on focus _(default: undefined)_\n- **--bq-select--border-color-disabled** - Select border color when disabled _(default: undefined)_\n- **--bq-select--border-radius** - Select border radius _(default: undefined)_\n- **--bq-select--border-width** - Select border width _(default: undefined)_\n- **--bq-select--border-style** - Select border style _(default: undefined)_\n- **--bq-select--gap** - Gap between Select content and prefix/suffix _(default: undefined)_\n- **--bq-select--helper-margin-top** - Helper text margin top _(default: undefined)_\n- **--bq-select--helper-text-color** - Helper text color _(default: undefined)_\n- **--bq-select--helper-text-size** - Helper text size _(default: undefined)_\n- **--bq-select--icon-size** - Icon size to use in prefix/suffix and clear button _(default: undefined)_\n- **--bq-select--label-margin-bottom** - Select label margin bottom _(default: undefined)_\n- **--bq-select--label-text-color** - Select label text color _(default: undefined)_\n- **--bq-select--label-text-size** - Select label text size _(default: undefined)_\n- **--bq-select--padding-start** - Select padding start _(default: undefined)_\n- **--bq-select--padding-end** - Select padding end _(default: undefined)_\n- **--bq-select--paddingY** - Select padding top and bottom _(default: undefined)_\n- **--bq-select--text-color** - Select text color _(default: undefined)_\n- **--bq-select--text-size** - Select text size _(default: undefined)_\n- **--bq-select--text-placeholder-color** - Select placeholder text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The native HTML button used under the hood in the clear button.\n- **clear-btn** - The clear button.\n- **control** - The input control wrapper.\n- **input-outline** - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n- **helper-text** - The helper text slot container.\n- **input** - The native HTML input element used under the hood.\n- **label** - The label slot container.\n- **panel** - The select panel container\n- **prefix** - The prefix slot container.\n- **suffix** - The suffix slot container.\n- **tags** - The tags container of the BqTags for multiple selection.\n- **tag** - The tag container of the BqTag for multiple selection.\n- **tag__base** - The base wrapper of the BqTag for multiple selection.\n- **tag__prefix** - The prefix slot container of the BqTag for multiple selection.\n- **tag__text** - The text slot container of the BqTag for multiple selection.\n- **tag__btn-close** - The close button of the BqTag for multiple selection.\n- **option-list** - The option list container.",
@@ -1371,52 +1423,22 @@
       "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-side-menu-item",
+      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - Handler to be called when the button is clicked.\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
       "attributes": [
         {
-          "name": "background-on-hover",
-          "description": "If `true`, the radio displays background on hover",
+          "name": "active",
+          "description": "If `true`, the menu item will be shown as active/selected.",
           "values": []
         },
         {
-          "name": "debounce-time",
-          "description": "A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change",
+          "name": "collapse",
+          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
           "values": []
         },
         {
           "name": "disabled",
-          "description": "If `true` radio inputs are disabled",
-          "values": []
-        },
-        {
-          "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",
+          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
           "values": []
         }
       ],
@@ -1522,40 +1544,44 @@
       "references": []
     },
     {
-      "name": "bq-side-menu-item",
-      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - Handler to be called when the button is clicked.\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
+      "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": "active",
-          "description": "If `true`, the menu item will be shown as active/selected.",
-          "values": []
-        },
-        {
-          "name": "collapse",
-          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
-          "values": []
+          "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-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.",
+      "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### **Methods:**\n - **setCurrentStepItem(newCurrentStep: _HTMLBqStepItemElement_): _Promise<void>_** - Set the current step item.\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",
       "attributes": [
+        {
+          "name": "divider-color",
+          "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the steps",
+          "values": [{ "name": "medium" }, { "name": "small" }]
+        },
         {
           "name": "type",
-          "description": "It defines the type of status to display.",
+          "description": "The type of prefix element to use on the step items",
           "values": [
-            { "name": "alert" },
-            { "name": "danger" },
-            { "name": "info" },
-            { "name": "neutral" },
-            { "name": "success" }
+            { "name": "numeric" },
+            { "name": "icon" },
+            { "name": "dot" }
           ]
         }
       ],
@@ -1630,64 +1656,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-step-item",
-      "description": "The Step Item Component is a UI element used to display a single step or stage in a process or task.\nIt should be used inside the Steps component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-step-item status=\"completed\">\n<bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n<span>Title</span>\n<span slot=\"description\">Description</span>\n</bq-step-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Callback handler emitted when the step item is clicked\n- **bqClick** - Callback handler triggered when the step item is clicked\n- **bqFocus** - Callback handler triggered when the step item is focused\n- **bqBlur** - Callback handler triggered when the step item loses focus\n\n### **Slots:**\n - _default_ - The step item content\n- **prefix** - The step item prefix\n- **description** - The step item description\n\n### **CSS Properties:**\n - **--bq-step-item--prefix-color** - Color of the prefix icon _(default: undefined)_\n- **--bq-step-item--prefix-color-current** - Color of the prefix icon when current _(default: undefined)_\n- **--bq-step-item--prefix-color-completed** - Color of the prefix icon when completed _(default: undefined)_\n- **--bq-step-item--prefix-color-error** - Color of the prefix icon when error _(default: undefined)_\n- **--bq-step-item--prefix-num-size** - Size of the prefix number _(default: undefined)_\n- **--bq-step-item--prefix-num-bg-color** - Background color of the prefix number _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The component's title.\n- **description** - The component's description.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "It defines prefix size",
-          "values": [{ "name": "small" }, { "name": "medium" }]
-        },
-        {
-          "name": "status",
-          "description": "It defines step item appearance based on its status",
-          "values": [
-            { "name": "completed" },
-            { "name": "current" },
-            { "name": "error" },
-            { "name": "default" },
-            { "name": "disabled" }
-          ]
-        },
-        {
-          "name": "type",
-          "description": "It defines the step item type used",
-          "values": [
-            { "name": "numeric" },
-            { "name": "icon" },
-            { "name": "dot" }
-          ]
-        }
-      ],
-      "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### **Methods:**\n - **setCurrentStepItem(newCurrentStep: _HTMLBqStepItemElement_): _Promise<void>_** - Set the current step item.\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",
-      "attributes": [
-        {
-          "name": "divider-color",
-          "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the steps",
-          "values": [{ "name": "medium" }, { "name": "small" }]
-        },
-        {
-          "name": "type",
-          "description": "The type of prefix element to use on the step items",
-          "values": [
-            { "name": "numeric" },
-            { "name": "icon" },
-            { "name": "dot" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-tab",
       "description": "The tab is a user interface element that allows users to navigate between different sections of a page.\nIt should be used inside `<bq-tab-group>` component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Handler to be called when the tab state changes\n- **bqFocus** - Handler to be called when the tab gets focus\n- **bqBlur** - Handler to be called when the tab loses focus\n- **bqKeyDown** - Handler to be called when the tab key is pressed\n- **bqClick** - Handler to be called when the tab state changes\n- **bqFocus** - Handler to be called when the tab gets focus\n- **bqBlur** - Handler to be called when the tab loses focus\n- **bqKeyDown** - Handler to be called when the tab key is pressed\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<button>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<button>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<button>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n\n### **CSS Properties:**\n - **--bq-tab--font-size** - Font size _(default: undefined)_\n- **--bq-tab--font-weight** - Font weight _(default: undefined)_\n- **--bq-tab--icon-size-large** - Icon size for large tab _(default: undefined)_\n- **--bq-tab--icon-size-medium** - Icon size for medium tab _(default: undefined)_\n- **--bq-tab--icon-size-small** - Icon size for small tab _(default: undefined)_\n- **--bq-tab--label-icon-gap** - Gap between label and icon _(default: undefined)_\n- **--bq-tab--line-height** - Line height _(default: undefined)_\n- **--bq-tab--padding-horizontal-large** - Horizontal padding for large tab _(default: undefined)_\n- **--bq-tab--padding-horizontal-medium** - Horizontal padding for medium tab _(default: undefined)_\n- **--bq-tab--padding-horizontal-small** - Horizontal padding for small tab _(default: undefined)_\n- **--bq-tab--padding-vertical-large** - Vertical padding for large tab _(default: undefined)_\n- **--bq-tab--padding-vertical-medium** - Vertical padding for medium tab _(default: undefined)_\n- **--bq-tab--padding-vertical-small** - Vertical padding for small tab _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The HTML button used under the hood.\n- **content** - The HTML `<div>` element that holds the content.\n- **icon** - The HTML `<div>` element that holds the icon content.\n- **text** - The HTML `<div>` element that holds the text content.\n- **underline** - The HTML `<div>` element that display active state.",
@@ -1723,96 +1691,33 @@
       "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.",
+      "name": "bq-step-item",
+      "description": "The Step Item Component is a UI element used to display a single step or stage in a process or task.\nIt should be used inside the Steps component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-step-item status=\"completed\">\n<bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n<span>Title</span>\n<span slot=\"description\">Description</span>\n</bq-step-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Callback handler emitted when the step item is clicked\n- **bqClick** - Callback handler triggered when the step item is clicked\n- **bqFocus** - Callback handler triggered when the step item is focused\n- **bqBlur** - Callback handler triggered when the step item loses focus\n\n### **Slots:**\n - _default_ - The step item content\n- **prefix** - The step item prefix\n- **description** - The step item description\n\n### **CSS Properties:**\n - **--bq-step-item--prefix-color** - Color of the prefix icon _(default: undefined)_\n- **--bq-step-item--prefix-color-current** - Color of the prefix icon when current _(default: undefined)_\n- **--bq-step-item--prefix-color-completed** - Color of the prefix icon when completed _(default: undefined)_\n- **--bq-step-item--prefix-color-error** - Color of the prefix icon when error _(default: undefined)_\n- **--bq-step-item--prefix-num-size** - Size of the prefix number _(default: undefined)_\n- **--bq-step-item--prefix-num-bg-color** - Background color of the prefix number _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The component's title.\n- **description** - The component's description.",
       "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": "size",
+          "description": "It defines prefix size",
+          "values": [{ "name": "small" }, { "name": "medium" }]
         },
         {
-          "name": "color",
-          "description": "The color style of the Tag",
+          "name": "status",
+          "description": "It defines step item appearance based on its status",
           "values": [
+            { "name": "completed" },
+            { "name": "current" },
             { "name": "error" },
-            { "name": "gray" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "warning" }
+            { "name": "default" },
+            { "name": "disabled" }
           ]
         },
         {
-          "name": "disabled",
-          "description": "If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)",
-          "values": []
-        },
-        {
-          "name": "hidden",
-          "description": "If `true`, the Tag component will hidden (only if removable = `true`)",
-          "values": []
-        },
-        {
-          "name": "removable",
-          "description": "If `true`, the Tag component can be removed",
-          "values": []
-        },
-        {
-          "name": "selected",
-          "description": "If `true`, the Tag is selected (only if clickable = `true`)",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the Tag component",
+          "name": "type",
+          "description": "It defines the step item type used",
           "values": [
-            { "name": "xsmall" },
-            { "name": "small" },
-            { "name": "medium" }
+            { "name": "numeric" },
+            { "name": "icon" },
+            { "name": "dot" }
           ]
-        },
-        {
-          "name": "variant",
-          "description": "The variant of Tag to apply on top of the variant",
-          "values": [{ "name": "outline" }, { "name": "filled" }]
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "bq-tab-group",
-      "description": "The tab group is a user interface element that allows users wrap a set of tab items.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tab-group value=\"5\">\n<bq-tab tab-id=\"1\">Tab</bq-tab>\n<bq-tab tab-id=\"2\" active>Tab</bq-tab>\n<bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n<bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n</bq-tab-group>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the tab value changes\n- **bqChange** - Handler to be called when the tab value changes\n\n### **Slots:**\n - _default_ - The bq-tab items\n\n### **CSS Parts:**\n - **base** - The HTML div wrapper inside the shadow DOM.\n- **tabs** - The HTML div used to hold the tab buttons.",
-      "attributes": [
-        {
-          "name": "debounce-time",
-          "description": "A number representing the delay value applied to bqChange event handler",
-          "values": []
-        },
-        {
-          "name": "disable-divider",
-          "description": "If true, the underline divider below the tabs won't be shown",
-          "values": []
-        },
-        {
-          "name": "orientation",
-          "description": "The direction that tab should be render",
-          "values": []
-        },
-        {
-          "name": "placement",
-          "description": "The placement that tab should be render",
-          "values": []
-        },
-        { "name": "size", "description": "The size of the tab", "values": [] },
-        {
-          "name": "value",
-          "description": "A string representing the id of the selected tab.",
-          "values": []
         }
       ],
       "references": []
@@ -1929,6 +1834,68 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-tag",
+      "description": "The Tag Component is a UI element used to label and categorize content within an application.\nTags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n- **bqClose** - Callback handler to be called when the tag is close/hidden\n- **bqOpen** - Callback handler to be called when the tag is not open/shown\n- **bqBlur** - Handler to be called when tag loses focus\n- **bqClick** - Handler to be called when tag is clicked\n- **bqFocus** - Handler to be called when tag is focused\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to remove the tag component\n- **show(): _Promise<void>_** - Method to be called to show the tag component\n\n### **Slots:**\n - **prefix** - The prefix slot to add an icon or any other content before the text\n- _default_ - The text content of the tag\n\n### **CSS Properties:**\n - **--bq-tag--background-color** - Tag background color _(default: undefined)_\n- **--bq-tag--border-color** - Tag border color _(default: undefined)_\n- **--bq-tag--border-radius** - Tag border radius _(default: undefined)_\n- **--bq-tag--border-style** - Tag border style _(default: undefined)_\n- **--bq-tag--border-width** - Tag border width _(default: undefined)_\n- **--bq-tag--small-border-radius** - Tag small border radius _(default: undefined)_\n- **--bq-tag--small-gap** - Tag small gap between content _(default: undefined)_\n- **--bq-tag--small-padding-x** - Tag small padding horizontal _(default: undefined)_\n- **--bq-tag--small-padding-y** - Tag small padding vertical _(default: undefined)_\n- **--bq-tag--medium-gap** - Tag medium gap between content _(default: undefined)_\n- **--bq-tag--medium-padding-x** - Tag medium padding horizontal _(default: undefined)_\n- **--bq-tag--medium-padding-y** - Tag medium padding vertical _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM.\n- **prefix** - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n- **text** - The `<div>` element containing the text of the tag component.\n- **btn-close** - The close button element to remove the tag component.",
+      "attributes": [
+        {
+          "name": "border",
+          "description": "The corner radius of the Tag (will override size's predefined border)",
+          "values": []
+        },
+        {
+          "name": "clickable",
+          "description": "If `true`, the Tag can be clickable",
+          "values": []
+        },
+        {
+          "name": "color",
+          "description": "The color style of the Tag",
+          "values": [
+            { "name": "error" },
+            { "name": "gray" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)",
+          "values": []
+        },
+        {
+          "name": "hidden",
+          "description": "If `true`, the Tag component will hidden (only if removable = `true`)",
+          "values": []
+        },
+        {
+          "name": "removable",
+          "description": "If `true`, the Tag component can be removed",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "If `true`, the Tag is selected (only if clickable = `true`)",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the Tag component",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The variant of Tag to apply on top of the variant",
+          "values": [{ "name": "outline" }, { "name": "filled" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-toast",
       "description": "Toasts are time-based components used to display short messages.\nCommonly used for errors, confirmations, or progress updates.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-toast type=\"info\">\nThis is a message\n</bq-toast>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n\n### **Methods:**\n - **show(): _Promise<void>_** - Method to be called to show the toast component\n- **hide(): _Promise<void>_** - Method to be called to hide the toast component\n- **toast()** - This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically\n\n### **Slots:**\n - _default_ - The content to be displayed in the toast component.\n- **icon** - The icon to be displayed in the toast component.\n\n### **CSS Properties:**\n - **--bq-toast--background** - Toast background color _(default: undefined)_\n- **--bq-toast--box-shadow** - Toast box shadow _(default: undefined)_\n- **--bq-toast--padding-y** - Toast vertical padding _(default: undefined)_\n- **--bq-toast--padding-x** - Toast horizontal padding _(default: undefined)_\n- **--bq-toast--gap** - Toast distance between icon and text _(default: undefined)_\n- **--bq-toast--border-radius** - Toast border radius _(default: undefined)_\n- **--bq-toast--border-color** - Toast border color _(default: undefined)_\n- **--bq-toast--border-style** - Toast border style _(default: undefined)_\n- **--bq-toast--border-width** - Toast border width _(default: undefined)_\n- **--bq-toast--icon-color-info** - Toast icon color when type is 'info' _(default: undefined)_\n- **--bq-toast--icon-color-success** - Toast icon color when type is 'success' _(default: undefined)_\n- **--bq-toast--icon-color-alert** - Toast icon color when type is 'alert' _(default: undefined)_\n- **--bq-toast--icon-color-error** - Toast icon color when type is 'error' _(default: undefined)_\n- **--bq-toast--icon-color-loading** - Toast icon color when type is 'loading' _(default: undefined)_\n- **--bq-toast--icon-color-custom** - Toast icon color when type is 'custom' _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The component's internal wrapper inside the shadow DOM.\n- **icon-info** - The `<div>` container that holds the icon component.\n- **base** - The `<div>` container of the internal bq-icon component.\n- **svg** - The `<svg>` element of the internal bq-icon component.",
@@ -2033,6 +2000,39 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "bq-tab-group",
+      "description": "The tab group is a user interface element that allows users wrap a set of tab items.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tab-group value=\"5\">\n<bq-tab tab-id=\"1\">Tab</bq-tab>\n<bq-tab tab-id=\"2\" active>Tab</bq-tab>\n<bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n<bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n</bq-tab-group>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the tab value changes\n- **bqChange** - Handler to be called when the tab value changes\n\n### **Slots:**\n - _default_ - The bq-tab items\n\n### **CSS Parts:**\n - **base** - The HTML div wrapper inside the shadow DOM.\n- **tabs** - The HTML div used to hold the tab buttons.",
+      "attributes": [
+        {
+          "name": "debounce-time",
+          "description": "A number representing the delay value applied to bqChange event handler",
+          "values": []
+        },
+        {
+          "name": "disable-divider",
+          "description": "If true, the underline divider below the tabs won't be shown",
+          "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "The direction that tab should be render",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The placement that tab should be render",
+          "values": []
+        },
+        { "name": "size", "description": "The size of the tab", "values": [] },
+        {
+          "name": "value",
+          "description": "A string representing the id of the selected tab.",
+          "values": []
+        }
+      ],
+      "references": []
     }
   ]
 }