@beeq/core 1.10.0-beta.0 → 1.10.0-beta.2

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

@@ -2,43 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "bq-accordion",
-      "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqClick** - Handler to be called when the accordion is clicked\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqClick** - Handler to be called when the accordion is clicked\n\n### **Slots:**\n - _default_ - The accordion panel content\n- **collapse** - The accordion collapse icon\n- **expand** - The accordion expand icon\n- **header** - The accordion header content\n- **prefix** - The accordion prefix content (icon or avatar)\n- **suffix** - The accordion suffix content (icon or avatar)\n\n### **CSS Properties:**\n - **--bq-accordion--small-padding-y** - Accordion small vertical padding _(default: undefined)_\n- **--bq-accordion--small-padding-start** - Accordion small start padding _(default: undefined)_\n- **--bq-accordion--small-padding-end** - Accordion small end padding _(default: undefined)_\n- **--bq-accordion--small-padding-gap** - Accordion small gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--small-radius** - Accordion small border radius _(default: undefined)_\n- **--bq-accordion--medium-padding-y** - Accordion medium vertical padding _(default: undefined)_\n- **--bq-accordion--medium-padding-start** - Accordion medium start padding _(default: undefined)_\n- **--bq-accordion--medium-padding-end** - Accordion medium end padding _(default: undefined)_\n- **--bq-accordion--medium-padding-gap** - Accordion medium gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--medium-radius** - Accordion medium border radius _(default: undefined)_\n- **--bq-accordion--collapsed-border-color** - Accordion collapsed border color _(default: undefined)_\n- **--bq-accordion--collapsed-border-style** - Accordion collapsed border style _(default: undefined)_\n- **--bq-accordion--collapsed-border-width** - Accordion collapsed border width _(default: undefined)_\n- **--bq-accordion--expanded-border-color** - Accordion expanded border color _(default: undefined)_\n- **--bq-accordion--expanded-border-style** - Accordion expanded border style _(default: undefined)_\n- **--bq-accordion--expanded-border-width** - Accordion expanded border width _(default: undefined)_\n- **--bq-accordion--filled-collapsed-background** - Accordion filled collapsed header background _(default: undefined)_\n- **--bq-accordion--filled-collapsed-text-color** - Accordion filled collapsed header text color _(default: undefined)_\n- **--bq-accordion--filled-expanded-background** - Accordion filled expanded header background _(default: undefined)_\n- **--bq-accordion--filled-expanded-collapsed-hover** - Accordion filled expanded header color on hover _(default: undefined)_\n- **--bq-accordion--filled-expanded-text-color** - Accordion filled expanded header text color _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-background** - Accordion ghost collapsed header background _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-text-color** - Accordion ghost collapsed header text color _(default: undefined)_\n- **--bq-accordion--ghost-expanded-background** - Accordion ghost expanded header background _(default: undefined)_\n- **--bq-accordion--ghost-expanded-collapsed-hover** - Accordion ghost expanded header color on hover _(default: undefined)_\n- **--bq-accordion--ghost-expanded-text-color** - Accordion ghost expanded header text color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-color** - Accordion filled panel border color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-style** - Accordion filled panel border style _(default: undefined)_\n- **--bq-accordion--panel-filled-border-width** - Accordion filled panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-y** - Accordion small filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-start** - Accordion small filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-end** - Accordion small filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-y** - Accordion medium filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-start** - Accordion medium filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-end** - Accordion medium filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-color** - Accordion ghost panel border color _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-style** - Accordion ghost panel border style _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-width** - Accordion ghost panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-y** - Accordion small ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-start** - Accordion small ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-end** - Accordion small ghost panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-y** - Accordion medium ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-start** - Accordion medium ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-end** - Accordion medium ghost panel end padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<details>` that holds the accordion content\n- **header** - The `<summary>` that holds the accordion header content\n- **panel** - The `<div>` that holds the accordion panel content\n- **prefix** - The `<div>` that holds the accordion prefix content\n- **suffix** - The `<div>` that holds the accordion suffix content\n- **text** - The `<div>` that holds the accordion header text content",
-      "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance style of the Accordion",
-          "values": [{ "name": "filled" }, { "name": "ghost" }]
-        },
-        {
-          "name": "disabled",
-          "description": "If true, the Accordion is disabled",
-          "values": []
-        },
-        {
-          "name": "expanded",
-          "description": "If true, the Accordion is expanded",
-          "values": []
-        },
-        {
-          "name": "no-animation",
-          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.",
-          "values": []
-        },
-        {
-          "name": "rotate",
-          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the the Accordion",
-          "values": [{ "name": "small" }, { "name": "medium" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-accordion-group",
       "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot where the bq-accordion elements are placed.\n\n### **CSS Properties:**\n - **--bq-accordion-group--gap** - Accordion group distance between elements _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -174,6 +137,43 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-accordion",
+      "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqClick** - Handler to be called when the accordion is clicked\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqClick** - Handler to be called when the accordion is clicked\n\n### **Slots:**\n - _default_ - The accordion panel content\n- **collapse** - The accordion collapse icon\n- **expand** - The accordion expand icon\n- **header** - The accordion header content\n- **prefix** - The accordion prefix content (icon or avatar)\n- **suffix** - The accordion suffix content (icon or avatar)\n\n### **CSS Properties:**\n - **--bq-accordion--small-padding-y** - Accordion small vertical padding _(default: undefined)_\n- **--bq-accordion--small-padding-start** - Accordion small start padding _(default: undefined)_\n- **--bq-accordion--small-padding-end** - Accordion small end padding _(default: undefined)_\n- **--bq-accordion--small-padding-gap** - Accordion small gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--small-radius** - Accordion small border radius _(default: undefined)_\n- **--bq-accordion--medium-padding-y** - Accordion medium vertical padding _(default: undefined)_\n- **--bq-accordion--medium-padding-start** - Accordion medium start padding _(default: undefined)_\n- **--bq-accordion--medium-padding-end** - Accordion medium end padding _(default: undefined)_\n- **--bq-accordion--medium-padding-gap** - Accordion medium gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--medium-radius** - Accordion medium border radius _(default: undefined)_\n- **--bq-accordion--collapsed-border-color** - Accordion collapsed border color _(default: undefined)_\n- **--bq-accordion--collapsed-border-style** - Accordion collapsed border style _(default: undefined)_\n- **--bq-accordion--collapsed-border-width** - Accordion collapsed border width _(default: undefined)_\n- **--bq-accordion--expanded-border-color** - Accordion expanded border color _(default: undefined)_\n- **--bq-accordion--expanded-border-style** - Accordion expanded border style _(default: undefined)_\n- **--bq-accordion--expanded-border-width** - Accordion expanded border width _(default: undefined)_\n- **--bq-accordion--filled-collapsed-background** - Accordion filled collapsed header background _(default: undefined)_\n- **--bq-accordion--filled-collapsed-text-color** - Accordion filled collapsed header text color _(default: undefined)_\n- **--bq-accordion--filled-expanded-background** - Accordion filled expanded header background _(default: undefined)_\n- **--bq-accordion--filled-expanded-collapsed-hover** - Accordion filled expanded header color on hover _(default: undefined)_\n- **--bq-accordion--filled-expanded-text-color** - Accordion filled expanded header text color _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-background** - Accordion ghost collapsed header background _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-text-color** - Accordion ghost collapsed header text color _(default: undefined)_\n- **--bq-accordion--ghost-expanded-background** - Accordion ghost expanded header background _(default: undefined)_\n- **--bq-accordion--ghost-expanded-collapsed-hover** - Accordion ghost expanded header color on hover _(default: undefined)_\n- **--bq-accordion--ghost-expanded-text-color** - Accordion ghost expanded header text color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-color** - Accordion filled panel border color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-style** - Accordion filled panel border style _(default: undefined)_\n- **--bq-accordion--panel-filled-border-width** - Accordion filled panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-y** - Accordion small filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-start** - Accordion small filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-end** - Accordion small filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-y** - Accordion medium filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-start** - Accordion medium filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-end** - Accordion medium filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-color** - Accordion ghost panel border color _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-style** - Accordion ghost panel border style _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-width** - Accordion ghost panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-y** - Accordion small ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-start** - Accordion small ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-end** - Accordion small ghost panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-y** - Accordion medium ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-start** - Accordion medium ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-end** - Accordion medium ghost panel end padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<details>` that holds the accordion content\n- **header** - The `<summary>` that holds the accordion header content\n- **panel** - The `<div>` that holds the accordion panel content\n- **prefix** - The `<div>` that holds the accordion prefix content\n- **suffix** - The `<div>` that holds the accordion suffix content\n- **text** - The `<div>` that holds the accordion header text content",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "The appearance style of the Accordion",
+          "values": [{ "name": "filled" }, { "name": "ghost" }]
+        },
+        {
+          "name": "disabled",
+          "description": "If true, the Accordion is disabled",
+          "values": []
+        },
+        {
+          "name": "expanded",
+          "description": "If true, the Accordion is expanded",
+          "values": []
+        },
+        {
+          "name": "no-animation",
+          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.",
+          "values": []
+        },
+        {
+          "name": "rotate",
+          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the the Accordion",
+          "values": [{ "name": "small" }, { "name": "medium" }]
+        }
+      ],
+      "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.",
@@ -200,6 +200,18 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-breadcrumb",
+      "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n- **separator** - The slot to add a separator between breadcrumb items. Default separator is `/`.\n\n### **CSS Parts:**\n - **navigation** - The `nav` tag that loads the breadcrumb items\n- **separator** - The container that wraps the separator element",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The `aria-label` attribute to describe the type of navigation",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-breadcrumb-item",
       "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
@@ -222,18 +234,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-breadcrumb",
-      "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n- **separator** - The slot to add a separator between breadcrumb items. Default separator is `/`.\n\n### **CSS Parts:**\n - **navigation** - The `nav` tag that loads the breadcrumb items\n- **separator** - The container that wraps the separator element",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The `aria-label` attribute to describe the type of navigation",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-button",
       "description": "Buttons are designed for users to take action on a page or a screen.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n<bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\nGo back\n</bq-button>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when button gets focus\n- **bqClick** - Handler to be called when the button is clicked\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button 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.",
@@ -576,6 +576,65 @@
       ],
       "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.",
+      "attributes": [
+        {
+          "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": "disable-backdrop",
+          "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
+          "values": []
+        },
+        {
+          "name": "disable-close-esc-keydown",
+          "description": "If true, the dialog will not close when the [Esc] key is pressed.",
+          "values": []
+        },
+        {
+          "name": "disable-close-click-outside",
+          "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
+          "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.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "If true, the dialog will be shown as open.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the dialog.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-divider",
       "description": "The Divider component is used to visually separate content in a layout.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n<span slot=\"title\">Divider Title</span>\n</bq-divider>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The title content of the divider.\n\n### **CSS Properties:**\n - **--bq-divider--color** - Divider color _(default: undefined)_\n- **--bq-divider--title-marginX** - Divider space between title and delimiters _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dash-start** - The component's internal svg wrapper for the start line of the divider's stroke.\n- **dash-end** - The component's internal svg wrapper for the end line of the divider's stroke.\n- **dash-start-line** - The component's internal line component of the divider's stroke.\n- **dash-end-line** - The component's internal line component of the divider's stroke.",
@@ -636,65 +695,6 @@
       ],
       "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.",
-      "attributes": [
-        {
-          "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": "disable-backdrop",
-          "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
-          "values": []
-        },
-        {
-          "name": "disable-close-esc-keydown",
-          "description": "If true, the dialog will not close when the [Esc] key is pressed.",
-          "values": []
-        },
-        {
-          "name": "disable-close-click-outside",
-          "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
-          "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.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "If true, the dialog will be shown as open.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the dialog.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-drawer",
       "description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
@@ -728,6 +728,22 @@
       ],
       "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",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The size of the empty state component",
+          "values": [
+            { "name": "large" },
+            { "name": "medium" },
+            { "name": "small" }
+          ]
+        }
+      ],
+      "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.",
@@ -794,22 +810,6 @@
       ],
       "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",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "The size of the empty state component",
-          "values": [
-            { "name": "large" },
-            { "name": "medium" },
-            { "name": "small" }
-          ]
-        }
-      ],
-      "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.",
@@ -1116,88 +1116,88 @@
       "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",
+      "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": "border-shape",
-          "description": "It will set the border style of the progress bar",
-          "values": [{ "name": "rounded" }, { "name": "rounded-full" }]
+          "name": "background-on-hover",
+          "description": "If `true`, the radio displays background on hover",
+          "values": []
         },
         {
-          "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": []
         }
       ],
       "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.",
+      "name": "bq-progress",
+      "description": "The progress bar is a user interface component that visually represents the completion status of a task or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-progress value=\"50\"></bq-progress>\n```\n\n</figure>\n---\n\n\n### **CSS Properties:**\n - **--bq-progress-bar--height** - The progress bars height _(default: undefined)_\n- **--bq-progress-bar--indeterminateWidth** - The progress bar width when its indeterminate _(default: undefined)_\n- **--bq-progress-bar--indicatorColor** - The progress bar color (inside the track area) _(default: undefined)_\n- **--bq-progress-bar--trackColor** - The progress bar track area (the grey one) _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The component wrapper container inside the shadow DOM\n- **progress** - The `<div>` container that holds the native progress element\n- **progress-bar** - The native html for progress element\n- **label** - The `<div>` container that holds the label value (in percentage)\n- **indeterminate** - The `<div>` container that holds the indeterminate progress bar\n- **base** - The base container for the tooltip component inside the shadow DOM when hovering over the progress bar\n- **trigger** - The container holding the element that triggers the tooltip display when hovering over the progress bar\n- **panel** - The container holding the content of the tooltip when hovering over the progress bar",
       "attributes": [
         {
-          "name": "background-on-hover",
-          "description": "If `true`, the radio displays background on hover",
-          "values": []
+          "name": "border-shape",
+          "description": "It will set the border style of the progress bar",
+          "values": [{ "name": "rounded" }, { "name": "rounded-full" }]
         },
         {
-          "name": "checked",
-          "description": "If `true` radio input is checked",
+          "name": "enable-tooltip",
+          "description": "If `true`, a tooltip will be shown displaying the progress value",
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "If `true` radio input is disabled",
+          "name": "indeterminate",
+          "description": "If `true` the indeterminate state of progress bar is enabled",
           "values": []
         },
         {
-          "name": "form-id",
-          "description": "The form ID that the radio input is associated with",
+          "name": "label",
+          "description": "If `true`, a label text showing the value (in percentage) will be shown",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
-          "values": []
+          "name": "thickness",
+          "description": "Progress bar thickness",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         },
         {
-          "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": "type",
+          "description": "Progress type",
+          "values": [{ "name": "default" }, { "name": "error" }]
         },
         {
           "name": "value",
-          "description": "A string representing the value of the radio",
+          "description": "A number representing the current value of the progress bar",
           "values": []
         }
       ],