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

package/dist/custom-elements.json

@@ -2062,6 +2062,147 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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>",
+          "name": "BqBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The `nav` tag that loads the breadcrumb items",
+              "name": "navigation"
+            },
+            {
+              "description": "The container that wraps the separator element",
+              "name": "separator"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.",
+              "name": ""
+            },
+            {
+              "description": "The slot to add a separator between breadcrumb items. Default separator is `/`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "navElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "spanElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqBreadcrumbElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumbs'",
+              "description": "The `aria-label` attribute to describe the type of navigation"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "getSeparatorElem",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "separatorFromSlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "breadcrumbItems",
+              "type": {
+                "text": "HTMLBqBreadcrumbItemElement[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The `aria-label` attribute to describe the type of navigation",
+              "name": "label"
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-breadcrumb",
+          "csspart": [
+            {
+              "name": "navigation",
+              "description": "The `nav` tag that loads the breadcrumb items"
+            },
+            {
+              "name": "separator",
+              "description": "The container that wraps the separator element"
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqBreadcrumb",
+          "declaration": {
+            "name": "BqBreadcrumb",
+            "module": "components/bq-breadcrumb.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-breadcrumb",
+          "declaration": {
+            "name": "BqBreadcrumb",
+            "module": "components/bq-breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-breadcrumb-item.js",
@@ -2335,36 +2476,114 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-breadcrumb.js",
+      "path": "components/bq-button.js",
       "declarations": [
         {
           "kind": "class",
-          "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>",
-          "name": "BqBreadcrumb",
+          "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>",
+          "name": "BqButton",
+          "cssProperties": [
+            {
+              "description": "Button border color",
+              "name": "--bq-button--border-color"
+            },
+            {
+              "description": "Button border radius",
+              "name": "--bq-button--border-radius"
+            },
+            {
+              "description": "Button border style",
+              "name": "--bq-button--border-style"
+            },
+            {
+              "description": "Button border width",
+              "name": "--bq-button--border-width"
+            },
+            {
+              "description": "Button small height",
+              "name": "--bq-button--small-height"
+            },
+            {
+              "description": "Button small padding block (top and bottom)",
+              "name": "--bq-button--small-paddingX"
+            },
+            {
+              "description": "Button small padding inline (left and right)",
+              "name": "--bq-button--small-paddingY"
+            },
+            {
+              "description": "Button small font size",
+              "name": "--bq-button--small-font-size"
+            },
+            {
+              "description": "Button medium height",
+              "name": "--bq-button--medium-height"
+            },
+            {
+              "description": "Button medium padding block (top and bottom)",
+              "name": "--bq-button--medium-paddingX"
+            },
+            {
+              "description": "Button medium padding inline (left and right)",
+              "name": "--bq-button--medium-paddingY"
+            },
+            {
+              "description": "Button medium font size",
+              "name": "--bq-button--medium-font-size"
+            },
+            {
+              "description": "Button large height",
+              "name": "--bq-button--large-height"
+            },
+            {
+              "description": "Button large padding block (top and bottom)",
+              "name": "--bq-button--large-paddingX"
+            },
+            {
+              "description": "Button large padding inline (left and right)",
+              "name": "--bq-button--large-paddingY"
+            },
+            {
+              "description": "Button large font size",
+              "name": "--bq-button--large-font-size"
+            }
+          ],
           "cssParts": [
             {
-              "description": "The `nav` tag that loads the breadcrumb items",
-              "name": "navigation"
+              "description": "The `<a>` or `<button>` HTML element used under the hood.",
+              "name": "button"
             },
             {
-              "description": "The container that wraps the separator element",
-              "name": "separator"
+              "description": "The `<span>` tag element that acts as prefix container.",
+              "name": "prefix"
+            },
+            {
+              "description": "The `<span>` tag element that renders the text of the button.",
+              "name": "label"
+            },
+            {
+              "description": "The `<span>` tag element that acts as suffix container.",
+              "name": "suffix"
             }
           ],
           "slots": [
             {
-              "description": "The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.",
+              "description": "The prefix content to be displayed before the button label",
+              "name": "prefix"
+            },
+            {
+              "description": "The button label content",
               "name": ""
             },
             {
-              "description": "The slot to add a separator between breadcrumb items. Default separator is `/`.",
-              "name": "separator"
+              "description": "The suffix content to be displayed after the button label",
+              "name": "suffix"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "navElem",
+              "name": "prefixElem",
               "type": {
                 "text": "HTMLElement"
               },
@@ -2372,7 +2591,7 @@
             },
             {
               "kind": "field",
-              "name": "spanElem",
+              "name": "suffixElem",
               "type": {
                 "text": "HTMLElement"
               },
@@ -2382,234 +2601,15 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqBreadcrumbElement"
+                "text": "HTMLBqButtonElement"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "internals",
               "type": {
-                "text": "string"
-              },
-              "default": "'Breadcrumbs'",
-              "description": "The `aria-label` attribute to describe the type of navigation"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "getSeparatorElem",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "separatorFromSlot",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "breadcrumbItems",
-              "type": {
-                "text": "HTMLBqBreadcrumbItemElement[]"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "The `aria-label` attribute to describe the type of navigation",
-              "name": "label"
-            },
-            {
-              "name": "label",
-              "fieldName": "label",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "bq-breadcrumb",
-          "csspart": [
-            {
-              "name": "navigation",
-              "description": "The `nav` tag that loads the breadcrumb items"
-            },
-            {
-              "name": "separator",
-              "description": "The container that wraps the separator element"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqBreadcrumb",
-          "declaration": {
-            "name": "BqBreadcrumb",
-            "module": "components/bq-breadcrumb.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-breadcrumb",
-          "declaration": {
-            "name": "BqBreadcrumb",
-            "module": "components/bq-breadcrumb.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-button.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "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>",
-          "name": "BqButton",
-          "cssProperties": [
-            {
-              "description": "Button border color",
-              "name": "--bq-button--border-color"
-            },
-            {
-              "description": "Button border radius",
-              "name": "--bq-button--border-radius"
-            },
-            {
-              "description": "Button border style",
-              "name": "--bq-button--border-style"
-            },
-            {
-              "description": "Button border width",
-              "name": "--bq-button--border-width"
-            },
-            {
-              "description": "Button small height",
-              "name": "--bq-button--small-height"
-            },
-            {
-              "description": "Button small padding block (top and bottom)",
-              "name": "--bq-button--small-paddingX"
-            },
-            {
-              "description": "Button small padding inline (left and right)",
-              "name": "--bq-button--small-paddingY"
-            },
-            {
-              "description": "Button small font size",
-              "name": "--bq-button--small-font-size"
-            },
-            {
-              "description": "Button medium height",
-              "name": "--bq-button--medium-height"
-            },
-            {
-              "description": "Button medium padding block (top and bottom)",
-              "name": "--bq-button--medium-paddingX"
-            },
-            {
-              "description": "Button medium padding inline (left and right)",
-              "name": "--bq-button--medium-paddingY"
-            },
-            {
-              "description": "Button medium font size",
-              "name": "--bq-button--medium-font-size"
-            },
-            {
-              "description": "Button large height",
-              "name": "--bq-button--large-height"
-            },
-            {
-              "description": "Button large padding block (top and bottom)",
-              "name": "--bq-button--large-paddingX"
-            },
-            {
-              "description": "Button large padding inline (left and right)",
-              "name": "--bq-button--large-paddingY"
-            },
-            {
-              "description": "Button large font size",
-              "name": "--bq-button--large-font-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The `<a>` or `<button>` HTML element used under the hood.",
-              "name": "button"
-            },
-            {
-              "description": "The `<span>` tag element that acts as prefix container.",
-              "name": "prefix"
-            },
-            {
-              "description": "The `<span>` tag element that renders the text of the button.",
-              "name": "label"
-            },
-            {
-              "description": "The `<span>` tag element that acts as suffix container.",
-              "name": "suffix"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The prefix content to be displayed before the button label",
-              "name": "prefix"
-            },
-            {
-              "description": "The button label content",
-              "name": ""
-            },
-            {
-              "description": "The suffix content to be displayed after the button label",
-              "name": "suffix"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "prefixElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "suffixElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqButtonElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "internals",
-              "type": {
-                "text": "ElementInternals"
-              }
+                "text": "ElementInternals"
+              }
             },
             {
               "kind": "field",
@@ -5015,162 +5015,264 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-divider.js",
+      "path": "components/bq-dialog.js",
       "declarations": [
         {
           "kind": "class",
-          "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>",
-          "name": "BqDivider",
+          "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>",
+          "name": "BqDialog",
           "cssProperties": [
             {
-              "description": "Divider color",
-              "name": "--bq-divider--color"
+              "description": "Dialog background color",
+              "name": "--bq-dialog--background"
             },
             {
-              "description": "Divider space between title and delimiters",
-              "name": "--bq-divider--title-marginX"
-            }
-          ],
-          "cssParts": [
+              "description": "Dialog backdrop background color",
+              "name": "--bq-dialog--background-backdrop"
+            },
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
+              "description": "Dialog box shadow",
+              "name": "--bq-dialog--box-shadow"
             },
             {
-              "description": "The component's internal svg wrapper for the start line of the divider's stroke.",
-              "name": "dash-start"
+              "description": "Dialog border color",
+              "name": "--bq-dialog--border-color"
             },
             {
-              "description": "The component's internal svg wrapper for the end line of the divider's stroke.",
-              "name": "dash-end"
+              "description": "Dialog border style",
+              "name": "--bq-dialog--border-style"
             },
             {
-              "description": "The component's internal line component of the divider's stroke.",
-              "name": "dash-start-line"
+              "description": "Dialog border width",
+              "name": "--bq-dialog--border-width"
             },
             {
-              "description": "The component's internal line component of the divider's stroke.",
-              "name": "dash-end-line"
-            }
-          ],
-          "slots": [
+              "description": "Dialog border radius",
+              "name": "--bq-dialog--border-radius"
+            },
             {
-              "description": "The title content of the divider.",
+              "description": "Dialog padding",
+              "name": "--bq-dialog--padding"
+            },
+            {
+              "description": "Dialog gap distance between content and footer elements",
+              "name": "--bq-dialog--content-footer-gap"
+            },
+            {
+              "description": "Dialog gap distance between title and body elements",
+              "name": "--bq-dialog--title-body-gap"
+            },
+            {
+              "description": "Dialog small width",
+              "name": "--bq-dialog--width-small"
+            },
+            {
+              "description": "Dialog medium width",
+              "name": "--bq-dialog--width-medium"
+            },
+            {
+              "description": "Dialog large width",
+              "name": "--bq-dialog--width-large"
+            },
+            {
+              "description": "Dialog z-index applied when opened",
+              "name": "--bq-dialog-z-index"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The `<main>` that holds the dialog body content.",
+              "name": "body"
+            },
+            {
+              "description": "The button that closes the dialog on click.",
+              "name": "button-close"
+            },
+            {
+              "description": "The `<div>` container that holds the dialog title and body content.",
+              "name": "content"
+            },
+            {
+              "description": "The `<dialog>` wrapper container inside the shadow DOM.",
+              "name": "dialog"
+            },
+            {
+              "description": "The `<footer>` that holds footer content.",
+              "name": "footer"
+            },
+            {
+              "description": "The `<header>` that holds the icon, title, description and close button.",
+              "name": "header"
+            },
+            {
+              "description": "The `<div>` that holds the title content.",
+              "name": "title"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The title content of the dialog.",
+              "name": "title"
+            },
+            {
+              "description": "The body content of the dialog.",
               "name": ""
+            },
+            {
+              "description": "The footer content of the dialog.",
+              "name": "footer"
+            },
+            {
+              "description": "The close button content of the dialog.",
+              "name": "button-close"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "titleElem",
+              "name": "dialogElem",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "HTMLDialogElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "contentElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "footerElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "closeSlotElem",
+              "type": {
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "OPEN_CSS_CLASS",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'bq-dialog--open'"
+            },
             {
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqDividerElement"
+                "text": "HTMLBqDialogElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasTitle",
+              "name": "hasContent",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "dashed",
+              "name": "hasFooter",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the divider has a dashed pattern"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "border",
               "type": {
-                "text": "TDividerOrientation"
+                "text": "TDialogBorderRadius"
               },
-              "default": "'horizontal'",
-              "description": "The default orientation of the divider",
+              "default": "'m'",
+              "description": "Border radius of the dialog component",
               "parsedType": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
               }
             },
             {
               "kind": "field",
-              "name": "strokeColor",
+              "name": "disableBackdrop",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "default": "'stroke--primary'",
-              "description": "Set the stroke color of the divider. The value should be a valid value of the palette color"
+              "default": "false",
+              "description": "If true, the backdrop overlay won't be shown when the dialog opens"
             },
             {
               "kind": "field",
-              "name": "titleAlignment",
+              "name": "disableCloseEscKeydown",
               "type": {
-                "text": "TDividerTitleAlignment | undefined"
+                "text": "boolean"
               },
-              "default": "'middle'",
-              "description": "Set the alignment of the title on the main axis of the divider (horizontal / vertical)",
-              "parsedType": {
-                "text": "'start' | 'middle' | 'end' | undefined"
-              }
+              "default": "false",
+              "description": "If true, the dialog will not close when the [Esc] key is press"
             },
             {
               "kind": "field",
-              "name": "strokeDashWidth",
+              "name": "disableCloseClickOutside",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "default": "12",
-              "description": "Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed"
+              "default": "false",
+              "description": "If true, the dialog will not close when clicking on the backdrop overlay"
             },
             {
               "kind": "field",
-              "name": "strokeDashGap",
+              "name": "footerAppearance",
               "type": {
-                "text": "number | undefined"
+                "text": "TDialogFooterAppearance"
               },
-              "default": "7",
-              "description": "Set the gap of the divider's stroke. This is applicable when the stroke is dashed"
+              "default": "'standard'",
+              "description": "The appearance of footer",
+              "parsedType": {
+                "text": "'standard' | 'highlight'"
+              }
             },
             {
               "kind": "field",
-              "name": "strokeThickness",
+              "name": "hideCloseButton",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "Set the thickness of the divider's stroke. Value expressed in px"
+              "default": "false",
+              "description": "If true, it hides the close button"
             },
             {
               "kind": "field",
-              "name": "strokeBasis",
+              "name": "open",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "Set the min width of the divider's stroke when text is not centered. Value expressed in px"
+              "default": "false",
+              "description": "If true, the dialog will be shown as open"
             },
             {
               "kind": "field",
-              "name": "strokeLinecap",
+              "name": "size",
               "type": {
-                "text": "TDividerStrokeLinecap | undefined"
+                "text": "TDialogSize"
               },
-              "default": "'butt'",
-              "description": "Set the line of the divider's stroke. This is applicable when the stroke is dashed",
+              "default": "'medium'",
+              "description": "The size of the dialog",
               "parsedType": {
-                "text": "'square' | 'round' | 'butt' | undefined"
+                "text": "'small' | 'medium' | 'large'"
               }
             },
             {
@@ -5178,998 +5280,880 @@
               "name": "checkPropValues"
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "kind": "field",
-              "name": "strokeAttributes",
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "handleMouseClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "strokeDrawPositions",
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "handleKeyDown",
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "strokeDasharray",
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "show",
+              "description": "Open the dialog"
             },
             {
               "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
+              "name": "hide",
+              "description": "Closes the dialog"
+            },
             {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the divider has a dashed pattern.",
-              "name": "dashed"
+              "kind": "method",
+              "name": "cancel",
+              "description": "Dismiss or cancel the dialog"
             },
             {
-              "type": {
-                "text": "\"horizontal\" | \"vertical\""
-              },
-              "description": "The default orientation of the divider.",
-              "name": "orientation"
+              "kind": "field",
+              "name": "handleClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTransitionEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "description": "Callback handler emitted when the dialog has been canceled or dismissed.",
+              "name": "bqCancel"
+            },
+            {
+              "description": "Callback handler emitted when the dialog will close.",
+              "name": "bqClose"
+            },
+            {
+              "description": "Callback handler emitted when the dialog will open.",
+              "name": "bqOpen"
+            },
+            {
+              "description": "Callback handler emitted when the dialog finish opening.",
+              "name": "bqAfterOpen"
+            },
+            {
+              "description": "Callback handler emitted when the dialog finish closing.",
+              "name": "bqAfterClose"
+            },
+            {
+              "name": "bqCancel",
               "type": {
-                "text": "string"
+                "text": "EventEmitter<void>"
               },
-              "description": "Set the stroke color of the divider. The value should be a valid value of the palette color.",
-              "name": "stroke-color"
+              "description": "Callback handler emitted when the dialog has been canceled or dismissed"
             },
             {
+              "name": "bqClose",
               "type": {
-                "text": "\"start\" | \"middle\" | \"end\""
+                "text": "EventEmitter<void>"
               },
-              "description": "Set the alignment of the title on the main axis of the divider (horizontal / vertical).",
-              "name": "title-alignment"
+              "description": "Callback handler emitted when the dialog will close"
             },
             {
+              "name": "bqOpen",
               "type": {
-                "text": "number"
+                "text": "EventEmitter<void>"
               },
-              "description": "Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.",
-              "name": "stroke-dash-width"
+              "description": "Callback handler emitted when the dialog will open"
             },
             {
+              "name": "bqAfterOpen",
               "type": {
-                "text": "number"
+                "text": "EventEmitter<void>"
               },
-              "description": "Set the gap of the divider's stroke. This is applicable when the stroke is dashed.",
-              "name": "stroke-dash-gap"
+              "description": "Callback handler emitted when the dialog finish opening"
             },
             {
+              "name": "bqAfterClose",
               "type": {
-                "text": "number"
+                "text": "EventEmitter<void>"
               },
-              "description": "Set the thickness of the divider's stroke. Value expressed in px.",
-              "name": "stroke-thickness"
+              "description": "Callback handler emitted when the dialog finish closing"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\""
+              },
+              "description": "Border radius of the dialog component.",
+              "name": "border"
             },
             {
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "Set the min width of the divider's stroke when text is not centered. Value expressed in px.",
-              "name": "stroke-basis"
+              "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
+              "name": "disable-backdrop"
             },
             {
               "type": {
-                "text": "\"square\" | \"round\" | \"butt\""
+                "text": "boolean"
               },
-              "description": "Set the line of the divider's stroke. This is applicable when the stroke is dashed.",
-              "name": "stroke-linecap"
+              "description": "If true, the dialog will not close when the [Esc] key is pressed.",
+              "name": "disable-close-esc-keydown"
             },
             {
-              "name": "dashed",
-              "fieldName": "dashed"
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
+              "name": "disable-close-click-outside"
             },
             {
-              "name": "orientation",
-              "fieldName": "orientation",
               "type": {
-                "text": "TDividerOrientation"
+                "text": "\"standard\" | \"highlight\""
               },
-              "parsedType": {
-                "text": "'horizontal' | 'vertical'"
-              }
+              "description": "The appearance of the footer.",
+              "name": "footer-appearance"
             },
             {
-              "name": "stroke-color",
-              "fieldName": "strokeColor",
               "type": {
-                "text": "string"
-              }
+                "text": "boolean"
+              },
+              "description": "If true, it hides the close button.",
+              "name": "hide-close-button"
             },
             {
-              "name": "title-alignment",
-              "fieldName": "titleAlignment",
               "type": {
-                "text": "TDividerTitleAlignment"
+                "text": "boolean"
               },
-              "parsedType": {
-                "text": "'start' | 'middle' | 'end'"
-              }
+              "description": "If true, the dialog will be shown as open.",
+              "name": "open"
             },
             {
-              "name": "stroke-dash-width",
-              "fieldName": "strokeDashWidth",
               "type": {
-                "text": "number"
-              }
+                "text": "\"small\" | \"medium\" | \"large\""
+              },
+              "description": "The size of the dialog.",
+              "name": "size"
             },
             {
-              "name": "stroke-dash-gap",
-              "fieldName": "strokeDashGap",
+              "name": "border",
+              "fieldName": "border",
               "type": {
-                "text": "number"
+                "text": "TDialogBorderRadius"
+              },
+              "parsedType": {
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
               }
             },
             {
-              "name": "stroke-thickness",
-              "fieldName": "strokeThickness",
+              "name": "disable-backdrop",
+              "fieldName": "disableBackdrop"
+            },
+            {
+              "name": "disable-close-esc-keydown",
+              "fieldName": "disableCloseEscKeydown"
+            },
+            {
+              "name": "disable-close-click-outside",
+              "fieldName": "disableCloseClickOutside"
+            },
+            {
+              "name": "footer-appearance",
+              "fieldName": "footerAppearance",
               "type": {
-                "text": "number"
+                "text": "TDialogFooterAppearance"
+              },
+              "parsedType": {
+                "text": "'standard' | 'highlight'"
               }
             },
             {
-              "name": "stroke-basis",
-              "fieldName": "strokeBasis",
+              "name": "hide-close-button",
+              "fieldName": "hideCloseButton"
+            },
+            {
+              "name": "open",
+              "fieldName": "open",
               "type": {
-                "text": "number"
+                "text": "boolean"
               }
             },
             {
-              "name": "stroke-linecap",
-              "fieldName": "strokeLinecap",
+              "name": "size",
+              "fieldName": "size",
               "type": {
-                "text": "TDividerStrokeLinecap"
+                "text": "TDialogSize"
               },
               "parsedType": {
-                "text": "'square' | 'round' | 'butt'"
+                "text": "'small' | 'medium' | 'large'"
               }
             }
           ],
-          "tagName": "bq-divider",
+          "tagName": "bq-dialog",
+          "dependencies": [
+            {
+              "name": "bq-button",
+              "description": ""
+            },
+            {
+              "name": "bq-icon",
+              "description": ""
+            }
+          ],
           "csspart": [
             {
-              "name": "base",
-              "description": "The component's internal wrapper."
+              "name": "body",
+              "description": "The `<main>` that holds the dialog body content."
             },
             {
-              "name": "dash-start",
-              "description": "The component's internal svg wrapper for the start line of the divider's stroke."
+              "name": "button-close",
+              "description": "The button that closes the dialog on click."
             },
             {
-              "name": "dash-end",
-              "description": "The component's internal svg wrapper for the end line of the divider's stroke."
+              "name": "content",
+              "description": "The `<div>` container that holds the dialog title and body content."
             },
             {
-              "name": "dash-start-line",
-              "description": "The component's internal line component of the divider's stroke."
+              "name": "dialog",
+              "description": "The `<dialog>` wrapper container inside the shadow DOM."
             },
             {
-              "name": "dash-end-line",
-              "description": "The component's internal line component of the divider's stroke."
+              "name": "footer",
+              "description": "The `<footer>` that holds footer content."
+            },
+            {
+              "name": "header",
+              "description": "The `<header>` that holds the icon, title, description and close button."
+            },
+            {
+              "name": "title",
+              "description": "The `<div>` that holds the title content."
             }
           ],
-          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BqDivider",
+          "name": "BqDialog",
           "declaration": {
-            "name": "BqDivider",
-            "module": "components/bq-divider.js"
+            "name": "BqDialog",
+            "module": "components/bq-dialog.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-divider",
+          "name": "bq-dialog",
           "declaration": {
-            "name": "BqDivider",
-            "module": "components/bq-divider.js"
+            "name": "BqDialog",
+            "module": "components/bq-dialog.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-dialog.js",
+      "path": "components/bq-divider.js",
       "declarations": [
         {
           "kind": "class",
-          "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>",
-          "name": "BqDialog",
+          "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>",
+          "name": "BqDivider",
           "cssProperties": [
             {
-              "description": "Dialog background color",
-              "name": "--bq-dialog--background"
-            },
-            {
-              "description": "Dialog backdrop background color",
-              "name": "--bq-dialog--background-backdrop"
-            },
-            {
-              "description": "Dialog box shadow",
-              "name": "--bq-dialog--box-shadow"
-            },
-            {
-              "description": "Dialog border color",
-              "name": "--bq-dialog--border-color"
-            },
-            {
-              "description": "Dialog border style",
-              "name": "--bq-dialog--border-style"
-            },
-            {
-              "description": "Dialog border width",
-              "name": "--bq-dialog--border-width"
-            },
-            {
-              "description": "Dialog border radius",
-              "name": "--bq-dialog--border-radius"
-            },
-            {
-              "description": "Dialog padding",
-              "name": "--bq-dialog--padding"
-            },
-            {
-              "description": "Dialog gap distance between content and footer elements",
-              "name": "--bq-dialog--content-footer-gap"
-            },
-            {
-              "description": "Dialog gap distance between title and body elements",
-              "name": "--bq-dialog--title-body-gap"
-            },
-            {
-              "description": "Dialog small width",
-              "name": "--bq-dialog--width-small"
-            },
-            {
-              "description": "Dialog medium width",
-              "name": "--bq-dialog--width-medium"
-            },
-            {
-              "description": "Dialog large width",
-              "name": "--bq-dialog--width-large"
+              "description": "Divider color",
+              "name": "--bq-divider--color"
             },
             {
-              "description": "Dialog z-index applied when opened",
-              "name": "--bq-dialog-z-index"
+              "description": "Divider space between title and delimiters",
+              "name": "--bq-divider--title-marginX"
             }
           ],
           "cssParts": [
             {
-              "description": "The `<main>` that holds the dialog body content.",
-              "name": "body"
-            },
-            {
-              "description": "The button that closes the dialog on click.",
-              "name": "button-close"
-            },
-            {
-              "description": "The `<div>` container that holds the dialog title and body content.",
-              "name": "content"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             },
             {
-              "description": "The `<dialog>` wrapper container inside the shadow DOM.",
-              "name": "dialog"
+              "description": "The component's internal svg wrapper for the start line of the divider's stroke.",
+              "name": "dash-start"
             },
             {
-              "description": "The `<footer>` that holds footer content.",
-              "name": "footer"
+              "description": "The component's internal svg wrapper for the end line of the divider's stroke.",
+              "name": "dash-end"
             },
             {
-              "description": "The `<header>` that holds the icon, title, description and close button.",
-              "name": "header"
+              "description": "The component's internal line component of the divider's stroke.",
+              "name": "dash-start-line"
             },
             {
-              "description": "The `<div>` that holds the title content.",
-              "name": "title"
+              "description": "The component's internal line component of the divider's stroke.",
+              "name": "dash-end-line"
             }
           ],
           "slots": [
             {
-              "description": "The title content of the dialog.",
-              "name": "title"
-            },
-            {
-              "description": "The body content of the dialog.",
-              "name": ""
-            },
-            {
-              "description": "The footer content of the dialog.",
-              "name": "footer"
-            },
-            {
-              "description": "The close button content of the dialog.",
-              "name": "button-close"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dialogElem",
-              "type": {
-                "text": "HTMLDialogElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "contentElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "footerElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
+              "description": "The title content of the divider.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "closeSlotElem",
+              "name": "titleElem",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "OPEN_CSS_CLASS",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "'bq-dialog--open'"
-            },
             {
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqDialogElement"
+                "text": "HTMLBqDividerElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasContent",
+              "name": "hasTitle",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasFooter",
+              "name": "dashed",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "If true, the divider has a dashed pattern"
             },
             {
               "kind": "field",
-              "name": "border",
+              "name": "orientation",
               "type": {
-                "text": "TDialogBorderRadius"
+                "text": "TDividerOrientation"
               },
-              "default": "'m'",
-              "description": "Border radius of the dialog component",
+              "default": "'horizontal'",
+              "description": "The default orientation of the divider",
               "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+                "text": "'horizontal' | 'vertical'"
               }
             },
             {
               "kind": "field",
-              "name": "disableBackdrop",
+              "name": "strokeColor",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "If true, the backdrop overlay won't be shown when the dialog opens"
+              "default": "'stroke--primary'",
+              "description": "Set the stroke color of the divider. The value should be a valid value of the palette color"
             },
             {
               "kind": "field",
-              "name": "disableCloseEscKeydown",
+              "name": "titleAlignment",
               "type": {
-                "text": "boolean"
+                "text": "TDividerTitleAlignment | undefined"
               },
-              "default": "false",
-              "description": "If true, the dialog will not close when the [Esc] key is press"
+              "default": "'middle'",
+              "description": "Set the alignment of the title on the main axis of the divider (horizontal / vertical)",
+              "parsedType": {
+                "text": "'start' | 'middle' | 'end' | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "disableCloseClickOutside",
+              "name": "strokeDashWidth",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "If true, the dialog will not close when clicking on the backdrop overlay"
+              "default": "12",
+              "description": "Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed"
             },
             {
               "kind": "field",
-              "name": "footerAppearance",
+              "name": "strokeDashGap",
               "type": {
-                "text": "TDialogFooterAppearance"
+                "text": "number | undefined"
               },
-              "default": "'standard'",
-              "description": "The appearance of footer",
-              "parsedType": {
-                "text": "'standard' | 'highlight'"
-              }
+              "default": "7",
+              "description": "Set the gap of the divider's stroke. This is applicable when the stroke is dashed"
             },
             {
               "kind": "field",
-              "name": "hideCloseButton",
+              "name": "strokeThickness",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "If true, it hides the close button"
+              "default": "1",
+              "description": "Set the thickness of the divider's stroke. Value expressed in px"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "strokeBasis",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "If true, the dialog will be shown as open"
+              "default": "0",
+              "description": "Set the min width of the divider's stroke when text is not centered. Value expressed in px"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "strokeLinecap",
               "type": {
-                "text": "TDialogSize"
+                "text": "TDividerStrokeLinecap | undefined"
               },
-              "default": "'medium'",
-              "description": "The size of the dialog",
+              "default": "'butt'",
+              "description": "Set the line of the divider's stroke. This is applicable when the stroke is dashed",
               "parsedType": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'square' | 'round' | 'butt' | undefined"
               }
             },
             {
               "kind": "method",
               "name": "checkPropValues"
             },
-            {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "description": "Open the dialog"
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "description": "Closes the dialog"
-            },
-            {
-              "kind": "method",
-              "name": "cancel",
-              "description": "Dismiss or cancel the dialog"
-            },
             {
               "kind": "field",
-              "name": "handleClose",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleOpen",
-              "privacy": "private"
+              "name": "strokeAttributes",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "handleTransitionEnd",
-              "privacy": "private"
+              "name": "strokeDrawPositions",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "strokeDasharray",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
               "name": "render"
             }
           ],
-          "events": [
-            {
-              "description": "Callback handler emitted when the dialog has been canceled or dismissed.",
-              "name": "bqCancel"
-            },
-            {
-              "description": "Callback handler emitted when the dialog will close.",
-              "name": "bqClose"
-            },
-            {
-              "description": "Callback handler emitted when the dialog will open.",
-              "name": "bqOpen"
-            },
-            {
-              "description": "Callback handler emitted when the dialog finish opening.",
-              "name": "bqAfterOpen"
-            },
-            {
-              "description": "Callback handler emitted when the dialog finish closing.",
-              "name": "bqAfterClose"
-            },
-            {
-              "name": "bqCancel",
-              "type": {
-                "text": "EventEmitter<void>"
-              },
-              "description": "Callback handler emitted when the dialog has been canceled or dismissed"
-            },
-            {
-              "name": "bqClose",
-              "type": {
-                "text": "EventEmitter<void>"
-              },
-              "description": "Callback handler emitted when the dialog will close"
-            },
+          "attributes": [
             {
-              "name": "bqOpen",
               "type": {
-                "text": "EventEmitter<void>"
+                "text": "boolean"
               },
-              "description": "Callback handler emitted when the dialog will open"
+              "description": "If true, the divider has a dashed pattern.",
+              "name": "dashed"
             },
             {
-              "name": "bqAfterOpen",
               "type": {
-                "text": "EventEmitter<void>"
+                "text": "\"horizontal\" | \"vertical\""
               },
-              "description": "Callback handler emitted when the dialog finish opening"
+              "description": "The default orientation of the divider.",
+              "name": "orientation"
             },
-            {
-              "name": "bqAfterClose",
-              "type": {
-                "text": "EventEmitter<void>"
-              },
-              "description": "Callback handler emitted when the dialog finish closing"
-            }
-          ],
-          "attributes": [
             {
               "type": {
-                "text": "\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\""
+                "text": "string"
               },
-              "description": "Border radius of the dialog component.",
-              "name": "border"
+              "description": "Set the stroke color of the divider. The value should be a valid value of the palette color.",
+              "name": "stroke-color"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "\"start\" | \"middle\" | \"end\""
               },
-              "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
-              "name": "disable-backdrop"
+              "description": "Set the alignment of the title on the main axis of the divider (horizontal / vertical).",
+              "name": "title-alignment"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "If true, the dialog will not close when the [Esc] key is pressed.",
-              "name": "disable-close-esc-keydown"
+              "description": "Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.",
+              "name": "stroke-dash-width"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
-              "name": "disable-close-click-outside"
+              "description": "Set the gap of the divider's stroke. This is applicable when the stroke is dashed.",
+              "name": "stroke-dash-gap"
             },
             {
               "type": {
-                "text": "\"standard\" | \"highlight\""
+                "text": "number"
               },
-              "description": "The appearance of the footer.",
-              "name": "footer-appearance"
+              "description": "Set the thickness of the divider's stroke. Value expressed in px.",
+              "name": "stroke-thickness"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "If true, it hides the close button.",
-              "name": "hide-close-button"
+              "description": "Set the min width of the divider's stroke when text is not centered. Value expressed in px.",
+              "name": "stroke-basis"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "\"square\" | \"round\" | \"butt\""
               },
-              "description": "If true, the dialog will be shown as open.",
-              "name": "open"
+              "description": "Set the line of the divider's stroke. This is applicable when the stroke is dashed.",
+              "name": "stroke-linecap"
             },
             {
-              "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
-              },
-              "description": "The size of the dialog.",
-              "name": "size"
+              "name": "dashed",
+              "fieldName": "dashed"
             },
             {
-              "name": "border",
-              "fieldName": "border",
+              "name": "orientation",
+              "fieldName": "orientation",
               "type": {
-                "text": "TDialogBorderRadius"
+                "text": "TDividerOrientation"
               },
               "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+                "text": "'horizontal' | 'vertical'"
               }
             },
             {
-              "name": "disable-backdrop",
-              "fieldName": "disableBackdrop"
+              "name": "stroke-color",
+              "fieldName": "strokeColor",
+              "type": {
+                "text": "string"
+              }
             },
             {
-              "name": "disable-close-esc-keydown",
-              "fieldName": "disableCloseEscKeydown"
+              "name": "title-alignment",
+              "fieldName": "titleAlignment",
+              "type": {
+                "text": "TDividerTitleAlignment"
+              },
+              "parsedType": {
+                "text": "'start' | 'middle' | 'end'"
+              }
             },
             {
-              "name": "disable-close-click-outside",
-              "fieldName": "disableCloseClickOutside"
+              "name": "stroke-dash-width",
+              "fieldName": "strokeDashWidth",
+              "type": {
+                "text": "number"
+              }
             },
             {
-              "name": "footer-appearance",
-              "fieldName": "footerAppearance",
+              "name": "stroke-dash-gap",
+              "fieldName": "strokeDashGap",
               "type": {
-                "text": "TDialogFooterAppearance"
-              },
-              "parsedType": {
-                "text": "'standard' | 'highlight'"
+                "text": "number"
               }
             },
             {
-              "name": "hide-close-button",
-              "fieldName": "hideCloseButton"
+              "name": "stroke-thickness",
+              "fieldName": "strokeThickness",
+              "type": {
+                "text": "number"
+              }
             },
             {
-              "name": "open",
-              "fieldName": "open",
+              "name": "stroke-basis",
+              "fieldName": "strokeBasis",
               "type": {
-                "text": "boolean"
+                "text": "number"
               }
             },
             {
-              "name": "size",
-              "fieldName": "size",
+              "name": "stroke-linecap",
+              "fieldName": "strokeLinecap",
               "type": {
-                "text": "TDialogSize"
+                "text": "TDividerStrokeLinecap"
               },
               "parsedType": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'square' | 'round' | 'butt'"
               }
             }
           ],
-          "tagName": "bq-dialog",
-          "dependencies": [
-            {
-              "name": "bq-button",
-              "description": ""
-            },
-            {
-              "name": "bq-icon",
-              "description": ""
-            }
-          ],
+          "tagName": "bq-divider",
           "csspart": [
             {
-              "name": "body",
-              "description": "The `<main>` that holds the dialog body content."
-            },
-            {
-              "name": "button-close",
-              "description": "The button that closes the dialog on click."
-            },
-            {
-              "name": "content",
-              "description": "The `<div>` container that holds the dialog title and body content."
+              "name": "base",
+              "description": "The component's internal wrapper."
             },
             {
-              "name": "dialog",
-              "description": "The `<dialog>` wrapper container inside the shadow DOM."
+              "name": "dash-start",
+              "description": "The component's internal svg wrapper for the start line of the divider's stroke."
             },
             {
-              "name": "footer",
-              "description": "The `<footer>` that holds footer content."
+              "name": "dash-end",
+              "description": "The component's internal svg wrapper for the end line of the divider's stroke."
             },
             {
-              "name": "header",
-              "description": "The `<header>` that holds the icon, title, description and close button."
+              "name": "dash-start-line",
+              "description": "The component's internal line component of the divider's stroke."
             },
             {
-              "name": "title",
-              "description": "The `<div>` that holds the title content."
+              "name": "dash-end-line",
+              "description": "The component's internal line component of the divider's stroke."
             }
           ],
+          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BqDialog",
+          "name": "BqDivider",
           "declaration": {
-            "name": "BqDialog",
-            "module": "components/bq-dialog.js"
+            "name": "BqDivider",
+            "module": "components/bq-divider.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-dialog",
+          "name": "bq-divider",
           "declaration": {
-            "name": "BqDialog",
-            "module": "components/bq-dialog.js"
+            "name": "BqDivider",
+            "module": "components/bq-divider.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-drawer.js",
+      "path": "components/bq-dropdown.js",
       "declarations": [
         {
           "kind": "class",
-          "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>",
-          "name": "BqDrawer",
+          "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>",
+          "name": "BqDropdown",
           "cssProperties": [
             {
-              "description": "Background color of the backdrop",
-              "name": "--bq-drawer--backgroundBackdrop"
+              "description": "Panel background color",
+              "name": "--bq-panel--background"
             },
             {
-              "description": "Gap between the drawer and the viewport",
-              "name": "--bq-drawer--gap"
+              "description": "Panel border color",
+              "name": "--bq-panel--border-color"
             },
             {
-              "description": "Width of the drawer",
-              "name": "--bq-drawer--width"
+              "description": "Panel border radius",
+              "name": "--bq-panel--border-radius"
             },
             {
-              "description": "Padding left and right of the drawer",
-              "name": "--bq-drawer--paddingX"
+              "description": "Panel border style",
+              "name": "--bq-panel--border-style"
             },
             {
-              "description": "Padding top and bottom of the drawer",
-              "name": "--bq-drawer--paddingY"
+              "description": "Panel border width",
+              "name": "--bq-panel--border-width"
             },
             {
-              "description": "Z-index of the drawer component",
-              "name": "--bq-drawer--zIndex"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The `<div>` that holds the backdrop overlay.",
-              "name": "backdrop"
+              "description": "Panel box shadow",
+              "name": "--bq-panel--box-shadow"
             },
             {
-              "description": "The BqButton that closes the drawer.",
-              "name": "button-close"
+              "description": "Panel padding",
+              "name": "--bq-panel--padding"
             },
             {
-              "description": "The native button used under the hood that closes the drawer.",
-              "name": "button-close__btn"
+              "description": "Panel height",
+              "name": "--bq-panel--height"
             },
             {
-              "description": "The text inside the native button that closes the drawer.",
-              "name": "button-close__label"
+              "description": "Panel width",
+              "name": "--bq-panel--width"
             },
             {
-              "description": "The `<div>` that holds the drawer entire content.",
-              "name": "panel"
-            },
+              "description": "Panel z-index applied when opened",
+              "name": "--bq-panel-z-index"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The `<header>` that holds the icon, title, and close button.",
-              "name": "header"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             },
             {
-              "description": "The `<div>` that holds the title content.",
-              "name": "title"
+              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel.",
+              "name": "dropdown"
             },
             {
-              "description": "The `<main>` that holds the drawer body content.",
-              "name": "body"
+              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element.",
+              "name": "panel"
             },
             {
-              "description": "The `<footer>` that holds footer content.",
-              "name": "footer"
+              "description": "The `<div>` element that hosts the trigger element.",
+              "name": "trigger"
             }
           ],
           "slots": [
             {
-              "description": "The title content of the drawer.",
-              "name": "title"
+              "description": "The trigger element that opens the dropdown panel.",
+              "name": "trigger"
             },
             {
-              "description": "The body content of the drawer.",
+              "description": "The content of the dropdown panel.",
               "name": ""
-            },
-            {
-              "description": "The footer content of the drawer.",
-              "name": "footer"
-            },
-            {
-              "description": "The close button content of the drawer.",
-              "name": "button-close"
-            },
-            {
-              "description": "The footer divider content of the drawer.",
-              "name": "footer-divider"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "footerElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "name": "dropdownPanelId",
+              "privacy": "private",
+              "default": "`bq-dropdown-panel-${++id}`"
             },
             {
               "kind": "field",
-              "name": "drawerElem",
+              "name": "triggerElem",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "OPEN_CSS_CLASS",
+              "name": "el",
               "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "'bq-drawer--open'"
+                "text": "HTMLBqDropdownElement"
+              }
             },
             {
               "kind": "field",
-              "name": "el",
+              "name": "disableScrollLock",
               "type": {
-                "text": "HTMLBqDrawerElement"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the dropdown panel will not lock the page body scroll when open."
             },
             {
               "kind": "field",
-              "name": "hasFooter",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "If true, the dropdown panel will be visible and won't be shown."
             },
             {
               "kind": "field",
-              "name": "hasIcon",
+              "name": "distance",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false"
+              "default": "4",
+              "description": "Represents the distance (gutter or margin) between the panel and the trigger element."
             },
             {
               "kind": "field",
-              "name": "enableBackdrop",
+              "name": "keepOpenOnSelect",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
               "default": "false",
-              "description": "If true, the backdrop overlay will be shown when the drawer opens"
+              "description": "If true, the panel will remain open after a selection is made."
             },
             {
               "kind": "field",
-              "name": "closeOnClickOutside",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "Placement | undefined"
               },
-              "default": "false",
-              "description": "If true, the drawer will not close when clicking outside the panel"
+              "default": "'bottom-start'",
+              "description": "Position of the panel"
             },
             {
               "kind": "field",
-              "name": "closeOnEsc",
+              "name": "open",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
               "default": "false",
-              "description": "If true, the dialog will not close when the [Esc] key is pressed"
+              "description": "If true, the panel will be visible."
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "panelHeight",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "If true, the drawer component will be shown"
+              "description": "When set, it will override the height of the dropdown panel"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "sameWidth",
               "type": {
-                "text": "TDrawerPlacement"
+                "text": "boolean | undefined"
               },
-              "default": "'right'",
-              "deprecated": "Defines the position of the drawer",
-              "parsedType": {
-                "text": "'left' | 'right'"
+              "default": "false",
+              "description": "Whether the panel should have the same width as the trigger element"
+            },
+            {
+              "kind": "field",
+              "name": "skidding",
+              "type": {
+                "text": "number | undefined"
               },
-              "description": ""
+              "default": "0",
+              "description": "Represents the skidding between the panel and the trigger element."
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "strategy",
               "type": {
-                "text": "TDrawerPosition"
+                "text": "'fixed' | 'absolute' | undefined"
               },
-              "default": "'end'",
-              "description": "Defines the position of the drawer",
-              "parsedType": {
-                "text": "'start' | 'end'"
-              }
+              "default": "'fixed'",
+              "description": "Defines the strategy to position the panel"
             },
             {
               "kind": "method",
-              "name": "handleOpenChange"
+              "name": "onOpenChange"
             },
             {
               "kind": "method",
-              "name": "handlePlacementChange",
-              "description": "!TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property"
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "handlePositionChange"
+              "name": "onItemSelect"
             },
             {
               "kind": "method",
-              "name": "handleMouseClick",
+              "name": "onClickOutside",
               "parameters": [
                 {
                   "name": "event",
@@ -6177,11 +6161,12 @@
                     "text": "MouseEvent"
                   }
                 }
-              ]
+              ],
+              "description": "Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "onEscape",
               "parameters": [
                 {
                   "name": "event",
@@ -6193,56 +6178,13 @@
             },
             {
               "kind": "method",
-              "name": "hide",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "description": "Method to be called to hide the drawer component"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "description": "Method to be called to show the drawer component"
-            },
-            {
-              "kind": "field",
-              "name": "handleFooterSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleAfterHide",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleAfterShow",
-              "privacy": "private"
+              "name": "handleScrollEvent"
             },
             {
               "kind": "field",
-              "name": "handleTransitionEnd",
+              "name": "togglePanel",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "isPositionStart",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "isPositionEnd",
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "render"
@@ -6250,97 +6192,115 @@
           ],
           "events": [
             {
-              "description": "Callback handler to be called when the drawer is closed.",
-              "name": "bqClose"
-            },
-            {
-              "description": "Callback handler to be called when the drawer is opened.",
+              "description": "Callback handler to be called when the dropdown panel is opened or closed.",
               "name": "bqOpen"
             },
             {
-              "description": "Callback handler to be called after the drawer has been opened.",
-              "name": "bqAfterOpen"
+              "name": "bqOpen",
+              "type": {
+                "text": "EventEmitter<{ open: boolean }>"
+              },
+              "description": "Callback handler to be called when the dropdown panel is opened or closed."
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the dropdown panel will be visible and won't be shown.",
+              "name": "disabled"
             },
             {
-              "description": "Callback handler to be called after the drawer has been closed.",
-              "name": "bqAfterClose"
+              "type": {
+                "text": "number"
+              },
+              "description": "Represents the distance (gutter or margin) between the panel and the trigger element.",
+              "name": "distance"
             },
             {
-              "name": "bqClose",
               "type": {
-                "text": "EventEmitter"
+                "text": "boolean"
               },
-              "description": "Callback handler to be called when the drawer is closed"
+              "description": "If true, the panel will remain open after a selection is made.",
+              "name": "keep-open-on-select"
             },
             {
-              "name": "bqOpen",
               "type": {
-                "text": "EventEmitter"
+                "text": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\""
               },
-              "description": "Callback handler to be called when the drawer is opened"
+              "description": "Position of the panel.",
+              "name": "placement"
             },
             {
-              "name": "bqAfterOpen",
               "type": {
-                "text": "EventEmitter"
+                "text": "boolean"
               },
-              "description": "Callback handler to be called after the drawer has been opened"
+              "description": "If true, the panel will be visible.",
+              "name": "open"
             },
             {
-              "name": "bqAfterClose",
               "type": {
-                "text": "EventEmitter"
+                "text": "string"
               },
-              "description": "Callback handler to be called after the drawer has been closed"
-            }
-          ],
-          "attributes": [
+              "description": "When set, it will override the height of the dropdown panel.",
+              "name": "panel-height"
+            },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the backdrop overlay will be shown when the drawer opens.",
-              "name": "enable-backdrop"
+              "description": "Whether the panel should have the same width as the trigger element.",
+              "name": "same-width"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "If true, the drawer will not close when clicking outside the panel.",
-              "name": "close-on-click-outside"
+              "description": "Represents the skidding between the panel and the trigger element.",
+              "name": "skidding"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "\"fixed\" | \"absolute\""
               },
-              "description": "If true, the drawer will not close when the [Esc] key is pressed.",
-              "name": "close-on-esc"
+              "description": "Defines the strategy to position the panel.",
+              "name": "strategy"
             },
             {
+              "name": "disable-scroll-lock",
+              "fieldName": "disableScrollLock",
               "type": {
                 "text": "boolean"
-              },
-              "description": "If true, the drawer component will be shown.",
-              "name": "open"
+              }
             },
             {
+              "name": "disabled",
+              "fieldName": "disabled",
               "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "description": "Defines the position of the drawer.",
-              "name": "position"
+                "text": "boolean"
+              }
             },
             {
-              "name": "enable-backdrop",
-              "fieldName": "enableBackdrop"
+              "name": "distance",
+              "fieldName": "distance",
+              "type": {
+                "text": "number"
+              }
             },
             {
-              "name": "close-on-click-outside",
-              "fieldName": "closeOnClickOutside"
+              "name": "keep-open-on-select",
+              "fieldName": "keepOpenOnSelect",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "name": "close-on-esc",
-              "fieldName": "closeOnEsc"
+              "name": "placement",
+              "fieldName": "placement",
+              "type": {
+                "text": "Placement"
+              }
             },
             {
               "name": "open",
@@ -6350,77 +6310,57 @@
               }
             },
             {
-              "name": "placement",
-              "fieldName": "placement",
+              "name": "panel-height",
+              "fieldName": "panelHeight",
               "type": {
-                "text": "TDrawerPlacement"
-              },
-              "parsedType": {
-                "text": "'left' | 'right'"
+                "text": "string"
               }
             },
             {
-              "name": "position",
-              "fieldName": "position",
+              "name": "same-width",
+              "fieldName": "sameWidth",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "skidding",
+              "fieldName": "skidding",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "strategy",
+              "fieldName": "strategy",
               "type": {
-                "text": "TDrawerPosition"
-              },
-              "parsedType": {
-                "text": "'start' | 'end'"
+                "text": "'fixed' | 'absolute'"
               }
             }
           ],
-          "tagName": "bq-drawer",
+          "tagName": "bq-dropdown",
           "dependencies": [
             {
-              "name": "bq-button",
-              "description": ""
-            },
-            {
-              "name": "bq-icon",
-              "description": ""
-            },
-            {
-              "name": "bq-divider",
+              "name": "bq-panel",
               "description": ""
             }
           ],
           "csspart": [
             {
-              "name": "backdrop",
-              "description": "The `<div>` that holds the backdrop overlay."
-            },
-            {
-              "name": "button-close",
-              "description": "The BqButton that closes the drawer."
-            },
-            {
-              "name": "button-close__btn",
-              "description": "The native button used under the hood that closes the drawer."
+              "name": "base",
+              "description": "The component's internal wrapper."
             },
             {
-              "name": "button-close__label",
-              "description": "The text inside the native button that closes the drawer."
+              "name": "dropdown",
+              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel."
             },
             {
               "name": "panel",
-              "description": "The `<div>` that holds the drawer entire content."
-            },
-            {
-              "name": "header",
-              "description": "The `<header>` that holds the icon, title, and close button."
-            },
-            {
-              "name": "title",
-              "description": "The `<div>` that holds the title content."
-            },
-            {
-              "name": "body",
-              "description": "The `<main>` that holds the drawer body content."
+              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element."
             },
             {
-              "name": "footer",
-              "description": "The `<footer>` that holds footer content."
+              "name": "trigger",
+              "description": "The `<div>` element that hosts the trigger element."
             }
           ],
           "customElement": true
@@ -6429,110 +6369,120 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqDrawer",
+          "name": "BqDropdown",
           "declaration": {
-            "name": "BqDrawer",
-            "module": "components/bq-drawer.js"
+            "name": "BqDropdown",
+            "module": "components/bq-dropdown.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-drawer",
+          "name": "bq-dropdown",
           "declaration": {
-            "name": "BqDrawer",
-            "module": "components/bq-drawer.js"
+            "name": "BqDropdown",
+            "module": "components/bq-dropdown.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-dropdown.js",
+      "path": "components/bq-drawer.js",
       "declarations": [
         {
           "kind": "class",
-          "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>",
-          "name": "BqDropdown",
+          "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>",
+          "name": "BqDrawer",
           "cssProperties": [
             {
-              "description": "Panel background color",
-              "name": "--bq-panel--background"
+              "description": "Background color of the backdrop",
+              "name": "--bq-drawer--backgroundBackdrop"
             },
             {
-              "description": "Panel border color",
-              "name": "--bq-panel--border-color"
+              "description": "Gap between the drawer and the viewport",
+              "name": "--bq-drawer--gap"
             },
             {
-              "description": "Panel border radius",
-              "name": "--bq-panel--border-radius"
+              "description": "Width of the drawer",
+              "name": "--bq-drawer--width"
             },
             {
-              "description": "Panel border style",
-              "name": "--bq-panel--border-style"
+              "description": "Padding left and right of the drawer",
+              "name": "--bq-drawer--paddingX"
             },
             {
-              "description": "Panel border width",
-              "name": "--bq-panel--border-width"
+              "description": "Padding top and bottom of the drawer",
+              "name": "--bq-drawer--paddingY"
             },
             {
-              "description": "Panel box shadow",
-              "name": "--bq-panel--box-shadow"
+              "description": "Z-index of the drawer component",
+              "name": "--bq-drawer--zIndex"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The `<div>` that holds the backdrop overlay.",
+              "name": "backdrop"
             },
             {
-              "description": "Panel padding",
-              "name": "--bq-panel--padding"
+              "description": "The BqButton that closes the drawer.",
+              "name": "button-close"
             },
             {
-              "description": "Panel height",
-              "name": "--bq-panel--height"
+              "description": "The native button used under the hood that closes the drawer.",
+              "name": "button-close__btn"
             },
             {
-              "description": "Panel width",
-              "name": "--bq-panel--width"
+              "description": "The text inside the native button that closes the drawer.",
+              "name": "button-close__label"
             },
             {
-              "description": "Panel z-index applied when opened",
-              "name": "--bq-panel-z-index"
-            }
-          ],
-          "cssParts": [
+              "description": "The `<div>` that holds the drawer entire content.",
+              "name": "panel"
+            },
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
+              "description": "The `<header>` that holds the icon, title, and close button.",
+              "name": "header"
             },
             {
-              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel.",
-              "name": "dropdown"
+              "description": "The `<div>` that holds the title content.",
+              "name": "title"
             },
             {
-              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element.",
-              "name": "panel"
+              "description": "The `<main>` that holds the drawer body content.",
+              "name": "body"
             },
             {
-              "description": "The `<div>` element that hosts the trigger element.",
-              "name": "trigger"
+              "description": "The `<footer>` that holds footer content.",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "The trigger element that opens the dropdown panel.",
-              "name": "trigger"
+              "description": "The title content of the drawer.",
+              "name": "title"
             },
             {
-              "description": "The content of the dropdown panel.",
+              "description": "The body content of the drawer.",
               "name": ""
+            },
+            {
+              "description": "The footer content of the drawer.",
+              "name": "footer"
+            },
+            {
+              "description": "The close button content of the drawer.",
+              "name": "button-close"
+            },
+            {
+              "description": "The footer divider content of the drawer.",
+              "name": "footer-divider"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dropdownPanelId",
-              "privacy": "private",
-              "default": "`bq-dropdown-panel-${++id}`"
-            },
-            {
-              "kind": "field",
-              "name": "triggerElem",
+              "name": "footerElem",
               "type": {
                 "text": "HTMLElement"
               },
@@ -6540,115 +6490,121 @@
             },
             {
               "kind": "field",
-              "name": "el",
+              "name": "drawerElem",
               "type": {
-                "text": "HTMLBqDropdownElement"
-              }
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disableScrollLock",
+              "name": "OPEN_CSS_CLASS",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "default": "false",
-              "description": "If true, the dropdown panel will not lock the page body scroll when open."
+              "privacy": "private",
+              "default": "'bq-drawer--open'"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "el",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "If true, the dropdown panel will be visible and won't be shown."
+                "text": "HTMLBqDrawerElement"
+              }
             },
             {
               "kind": "field",
-              "name": "distance",
+              "name": "hasFooter",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "default": "4",
-              "description": "Represents the distance (gutter or margin) between the panel and the trigger element."
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "keepOpenOnSelect",
+              "name": "hasIcon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the panel will remain open after a selection is made."
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "enableBackdrop",
               "type": {
-                "text": "Placement | undefined"
+                "text": "boolean"
               },
-              "default": "'bottom-start'",
-              "description": "Position of the panel"
+              "default": "false",
+              "description": "If true, the backdrop overlay will be shown when the drawer opens"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "closeOnClickOutside",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the panel will be visible."
+              "description": "If true, the drawer will not close when clicking outside the panel"
             },
             {
               "kind": "field",
-              "name": "panelHeight",
+              "name": "closeOnEsc",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "When set, it will override the height of the dropdown panel"
+              "default": "false",
+              "description": "If true, the dialog will not close when the [Esc] key is pressed"
             },
             {
               "kind": "field",
-              "name": "sameWidth",
+              "name": "open",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "default": "false",
-              "description": "Whether the panel should have the same width as the trigger element"
+              "description": "If true, the drawer component will be shown"
             },
             {
               "kind": "field",
-              "name": "skidding",
+              "name": "placement",
               "type": {
-                "text": "number | undefined"
+                "text": "TDrawerPlacement"
               },
-              "default": "0",
-              "description": "Represents the skidding between the panel and the trigger element."
+              "default": "'right'",
+              "deprecated": "Defines the position of the drawer",
+              "parsedType": {
+                "text": "'left' | 'right'"
+              },
+              "description": ""
             },
             {
               "kind": "field",
-              "name": "strategy",
+              "name": "position",
               "type": {
-                "text": "'fixed' | 'absolute' | undefined"
+                "text": "TDrawerPosition"
               },
-              "default": "'fixed'",
-              "description": "Defines the strategy to position the panel"
+              "default": "'end'",
+              "description": "Defines the position of the drawer",
+              "parsedType": {
+                "text": "'start' | 'end'"
+              }
             },
             {
               "kind": "method",
-              "name": "onOpenChange"
+              "name": "handleOpenChange"
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
+              "name": "handlePlacementChange",
+              "description": "!TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property"
             },
             {
               "kind": "method",
-              "name": "onItemSelect"
+              "name": "handlePositionChange"
             },
             {
               "kind": "method",
-              "name": "onClickOutside",
+              "name": "handleMouseClick",
               "parameters": [
                 {
                   "name": "event",
@@ -6656,12 +6612,11 @@
                     "text": "MouseEvent"
                   }
                 }
-              ],
-              "description": "Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component."
+              ]
             },
             {
               "kind": "method",
-              "name": "onEscape",
+              "name": "handleKeyDown",
               "parameters": [
                 {
                   "name": "event",
@@ -6673,13 +6628,56 @@
             },
             {
               "kind": "method",
-              "name": "handleScrollEvent"
+              "name": "hide",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Method to be called to hide the drawer component"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Method to be called to show the drawer component"
             },
             {
               "kind": "field",
-              "name": "togglePanel",
+              "name": "handleFooterSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleAfterHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleAfterShow",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTransitionEnd",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "isPositionStart",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isPositionEnd",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "render"
@@ -6687,115 +6685,97 @@
           ],
           "events": [
             {
-              "description": "Callback handler to be called when the dropdown panel is opened or closed.",
-              "name": "bqOpen"
+              "description": "Callback handler to be called when the drawer is closed.",
+              "name": "bqClose"
             },
             {
-              "name": "bqOpen",
-              "type": {
-                "text": "EventEmitter<{ open: boolean }>"
-              },
-              "description": "Callback handler to be called when the dropdown panel is opened or closed."
-            }
-          ],
-          "attributes": [
+              "description": "Callback handler to be called when the drawer is opened.",
+              "name": "bqOpen"
+            },
             {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, the dropdown panel will be visible and won't be shown.",
-              "name": "disabled"
+              "description": "Callback handler to be called after the drawer has been opened.",
+              "name": "bqAfterOpen"
             },
             {
-              "type": {
-                "text": "number"
-              },
-              "description": "Represents the distance (gutter or margin) between the panel and the trigger element.",
-              "name": "distance"
+              "description": "Callback handler to be called after the drawer has been closed.",
+              "name": "bqAfterClose"
             },
             {
+              "name": "bqClose",
               "type": {
-                "text": "boolean"
+                "text": "EventEmitter"
               },
-              "description": "If true, the panel will remain open after a selection is made.",
-              "name": "keep-open-on-select"
+              "description": "Callback handler to be called when the drawer is closed"
             },
             {
+              "name": "bqOpen",
               "type": {
-                "text": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\""
+                "text": "EventEmitter"
               },
-              "description": "Position of the panel.",
-              "name": "placement"
+              "description": "Callback handler to be called when the drawer is opened"
             },
             {
+              "name": "bqAfterOpen",
               "type": {
-                "text": "boolean"
+                "text": "EventEmitter"
               },
-              "description": "If true, the panel will be visible.",
-              "name": "open"
+              "description": "Callback handler to be called after the drawer has been opened"
             },
             {
+              "name": "bqAfterClose",
               "type": {
-                "text": "string"
+                "text": "EventEmitter"
               },
-              "description": "When set, it will override the height of the dropdown panel.",
-              "name": "panel-height"
-            },
+              "description": "Callback handler to be called after the drawer has been closed"
+            }
+          ],
+          "attributes": [
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether the panel should have the same width as the trigger element.",
-              "name": "same-width"
+              "description": "If true, the backdrop overlay will be shown when the drawer opens.",
+              "name": "enable-backdrop"
             },
             {
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "Represents the skidding between the panel and the trigger element.",
-              "name": "skidding"
+              "description": "If true, the drawer will not close when clicking outside the panel.",
+              "name": "close-on-click-outside"
             },
             {
               "type": {
-                "text": "\"fixed\" | \"absolute\""
+                "text": "boolean"
               },
-              "description": "Defines the strategy to position the panel.",
-              "name": "strategy"
+              "description": "If true, the drawer will not close when the [Esc] key is pressed.",
+              "name": "close-on-esc"
             },
             {
-              "name": "disable-scroll-lock",
-              "fieldName": "disableScrollLock",
               "type": {
                 "text": "boolean"
-              }
+              },
+              "description": "If true, the drawer component will be shown.",
+              "name": "open"
             },
             {
-              "name": "disabled",
-              "fieldName": "disabled",
               "type": {
-                "text": "boolean"
-              }
+                "text": "\"start\" | \"end\""
+              },
+              "description": "Defines the position of the drawer.",
+              "name": "position"
             },
             {
-              "name": "distance",
-              "fieldName": "distance",
-              "type": {
-                "text": "number"
-              }
+              "name": "enable-backdrop",
+              "fieldName": "enableBackdrop"
             },
             {
-              "name": "keep-open-on-select",
-              "fieldName": "keepOpenOnSelect",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "close-on-click-outside",
+              "fieldName": "closeOnClickOutside"
             },
             {
-              "name": "placement",
-              "fieldName": "placement",
-              "type": {
-                "text": "Placement"
-              }
+              "name": "close-on-esc",
+              "fieldName": "closeOnEsc"
             },
             {
               "name": "open",
@@ -6805,57 +6785,77 @@
               }
             },
             {
-              "name": "panel-height",
-              "fieldName": "panelHeight",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "same-width",
-              "fieldName": "sameWidth",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "skidding",
-              "fieldName": "skidding",
+              "name": "placement",
+              "fieldName": "placement",
               "type": {
-                "text": "number"
+                "text": "TDrawerPlacement"
+              },
+              "parsedType": {
+                "text": "'left' | 'right'"
               }
             },
             {
-              "name": "strategy",
-              "fieldName": "strategy",
+              "name": "position",
+              "fieldName": "position",
               "type": {
-                "text": "'fixed' | 'absolute'"
+                "text": "TDrawerPosition"
+              },
+              "parsedType": {
+                "text": "'start' | 'end'"
               }
             }
           ],
-          "tagName": "bq-dropdown",
+          "tagName": "bq-drawer",
           "dependencies": [
             {
-              "name": "bq-panel",
+              "name": "bq-button",
+              "description": ""
+            },
+            {
+              "name": "bq-icon",
+              "description": ""
+            },
+            {
+              "name": "bq-divider",
               "description": ""
             }
           ],
           "csspart": [
             {
-              "name": "base",
-              "description": "The component's internal wrapper."
+              "name": "backdrop",
+              "description": "The `<div>` that holds the backdrop overlay."
             },
             {
-              "name": "dropdown",
-              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel."
+              "name": "button-close",
+              "description": "The BqButton that closes the drawer."
+            },
+            {
+              "name": "button-close__btn",
+              "description": "The native button used under the hood that closes the drawer."
+            },
+            {
+              "name": "button-close__label",
+              "description": "The text inside the native button that closes the drawer."
             },
             {
               "name": "panel",
-              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element."
+              "description": "The `<div>` that holds the drawer entire content."
             },
             {
-              "name": "trigger",
-              "description": "The `<div>` element that hosts the trigger element."
+              "name": "header",
+              "description": "The `<header>` that holds the icon, title, and close button."
+            },
+            {
+              "name": "title",
+              "description": "The `<div>` that holds the title content."
+            },
+            {
+              "name": "body",
+              "description": "The `<main>` that holds the drawer body content."
+            },
+            {
+              "name": "footer",
+              "description": "The `<footer>` that holds footer content."
             }
           ],
           "customElement": true
@@ -6864,18 +6864,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqDropdown",
+          "name": "BqDrawer",
           "declaration": {
-            "name": "BqDropdown",
-            "module": "components/bq-dropdown.js"
+            "name": "BqDrawer",
+            "module": "components/bq-drawer.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-dropdown",
+          "name": "bq-drawer",
           "declaration": {
-            "name": "BqDropdown",
-            "module": "components/bq-dropdown.js"
+            "name": "BqDrawer",
+            "module": "components/bq-drawer.js"
           }
         }
       ]
@@ -8900,151 +8900,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-option-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>",
-          "name": "BqOptionGroup",
-          "cssProperties": [
-            {
-              "description": "option group background color",
-              "name": "--bq-option-group--background"
-            },
-            {
-              "description": "option group font size",
-              "name": "--bq-option-group--font-size"
-            },
-            {
-              "description": "option group line height",
-              "name": "--bq-option-group--line-height"
-            },
-            {
-              "description": "option group header padding start",
-              "name": "--bq-option-group--label-padding-start"
-            },
-            {
-              "description": "option group header padding start",
-              "name": "--bq-option-group--label-padding-end"
-            },
-            {
-              "description": "option group header padding Y axis",
-              "name": "--bq-option-group--label-paddingY"
-            },
-            {
-              "description": "option group text within label padding start",
-              "name": "--bq-option-group--label-text-padding-start"
-            },
-            {
-              "description": "option group text within label padding start",
-              "name": "--bq-option-group--label-text-padding-end"
-            },
-            {
-              "description": "option group container padding start",
-              "name": "--bq-option-group--container-padding-start"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The `legend` tag element which acts as a container for the label",
-              "name": "label"
-            },
-            {
-              "description": "The prefix of the label",
-              "name": "prefix"
-            },
-            {
-              "description": "The text of the label",
-              "name": "label"
-            },
-            {
-              "description": "The suffix of the label",
-              "name": "suffix"
-            },
-            {
-              "description": "The `div` element which holds the option items",
-              "name": "group"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The label of the option group",
-              "name": "header-label"
-            },
-            {
-              "description": "The prefix of the label",
-              "name": "header-prefix"
-            },
-            {
-              "description": "The suffix of the label",
-              "name": "header-suffix"
-            },
-            {
-              "description": "The option items",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "tagName": "bq-option-group",
-          "csspart": [
-            {
-              "name": "label",
-              "description": "The `legend` tag element which acts as a container for the label"
-            },
-            {
-              "name": "prefix",
-              "description": "The prefix of the label"
-            },
-            {
-              "name": "label",
-              "description": "The text of the label"
-            },
-            {
-              "name": "suffix",
-              "description": "The suffix of the label"
-            },
-            {
-              "name": "group",
-              "description": "The `div` element which holds the option items"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqOptionGroup",
-          "declaration": {
-            "name": "BqOptionGroup",
-            "module": "components/bq-option-group.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-option-group",
-          "declaration": {
-            "name": "BqOptionGroup",
-            "module": "components/bq-option-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bq-option.js",
@@ -9365,123 +9220,11 @@
             },
             {
               "name": "prefix",
-              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`)."
-            },
-            {
-              "name": "suffix",
-              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`)."
-            }
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqOption",
-          "declaration": {
-            "name": "BqOption",
-            "module": "components/bq-option.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-option",
-          "declaration": {
-            "name": "BqOption",
-            "module": "components/bq-option.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-option-list.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "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>",
-          "name": "BqOptionList",
-          "cssProperties": [
-            {
-              "description": "Option group gap between items Y axis",
-              "name": "--bq-option-group--gapY-list"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The option items",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqOptionListElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Options'",
-              "description": "Aria label for the list."
-            },
-            {
-              "kind": "method",
-              "name": "onBqSelect",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLElement>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Aria label for the list.",
-              "name": "aria-label"
-            },
-            {
-              "name": "aria-label",
-              "fieldName": "ariaLabel",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "bq-option-list",
-          "csspart": {
-            "name": "base",
-            "description": "The component's internal wrapper."
-          },
-          "events": [
+              "description": "The `span` element in which the prefix is displayed (generally `bq-icon`)."
+            },
             {
-              "name": "bqSelect",
-              "type": {
-                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
-              },
-              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
+              "name": "suffix",
+              "description": "The `span` element in which the suffix is displayed (generally `bq-icon`)."
             }
           ],
           "customElement": true
@@ -9490,235 +9233,275 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqOptionList",
+          "name": "BqOption",
           "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
+            "name": "BqOption",
+            "module": "components/bq-option.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-option-list",
+          "name": "bq-option",
           "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
+            "name": "BqOption",
+            "module": "components/bq-option.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-page-title.js",
+      "path": "components/bq-option-group.js",
       "declarations": [
         {
           "kind": "class",
-          "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>",
-          "name": "BqPageTitle",
+          "description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>",
+          "name": "BqOptionGroup",
           "cssProperties": [
             {
-              "description": "Padding top and bottom of the page title wrapper",
-              "name": "--paddingY"
+              "description": "option group background color",
+              "name": "--bq-option-group--background"
             },
             {
-              "description": "Page title border end color",
-              "name": "--subtitle-borderBlockEnd"
+              "description": "option group font size",
+              "name": "--bq-option-group--font-size"
             },
             {
-              "description": "Page title font weight for subtitle",
-              "name": "--subtitle-fontWeight"
+              "description": "option group line height",
+              "name": "--bq-option-group--line-height"
             },
             {
-              "description": "Page title color for sub-title",
-              "name": "--subtitle-textColor"
+              "description": "option group header padding start",
+              "name": "--bq-option-group--label-padding-start"
             },
             {
-              "description": "Page title text size for subtitle",
-              "name": "--subtitle-textSize"
+              "description": "option group header padding start",
+              "name": "--bq-option-group--label-padding-end"
             },
             {
-              "description": "Page title font weight for title",
-              "name": "--title-fontWeight"
+              "description": "option group header padding Y axis",
+              "name": "--bq-option-group--label-paddingY"
             },
             {
-              "description": "Page title text line height",
-              "name": "--title-lineHeight"
+              "description": "option group text within label padding start",
+              "name": "--bq-option-group--label-text-padding-start"
             },
             {
-              "description": "Page title color for title",
-              "name": "--title-textColor"
+              "description": "option group text within label padding start",
+              "name": "--bq-option-group--label-text-padding-end"
             },
             {
-              "description": "Page title text size for title",
-              "name": "--title-textSize"
+              "description": "option group container padding start",
+              "name": "--bq-option-group--container-padding-start"
             }
           ],
           "cssParts": [
             {
-              "description": "The inner container `<div>`of element that contains the base page title component.",
-              "name": "base"
-            },
-            {
-              "description": "Defines the main container of the page title component, which includes the title and subtitle elements.",
-              "name": "content"
-            },
-            {
-              "description": "Defines the container that holds the title and any suffix content.",
-              "name": "title-suffix"
+              "description": "The `legend` tag element which acts as a container for the label",
+              "name": "label"
             },
             {
-              "description": "The container `<div>` page title element that acts as back slot container.",
-              "name": "back"
+              "description": "The prefix of the label",
+              "name": "prefix"
             },
             {
-              "description": "The `<h1>` element serves as a container for the page title content, to improve accessibility.",
-              "name": "title"
+              "description": "The text of the label",
+              "name": "label"
             },
             {
-              "description": "The `<div>` page title element that acts as suffix slot container.",
+              "description": "The suffix of the label",
               "name": "suffix"
             },
             {
-              "description": "The `<div>` page title element that acts as sub-title slot container.",
-              "name": "sub-title"
+              "description": "The `div` element which holds the option items",
+              "name": "group"
             }
           ],
           "slots": [
             {
-              "description": "The back navigation button.",
-              "name": "back"
+              "description": "The label of the option group",
+              "name": "header-label"
             },
             {
-              "description": "The main title content.",
-              "name": ""
+              "description": "The prefix of the label",
+              "name": "header-prefix"
             },
             {
-              "description": "The sub-title content.",
-              "name": "sub-title"
+              "description": "The suffix of the label",
+              "name": "header-suffix"
             },
             {
-              "description": "The suffix content.",
-              "name": "suffix"
+              "description": "The option items",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "backNavigationElem",
+              "name": "el",
               "type": {
                 "text": "HTMLElement"
-              },
-              "privacy": "private"
+              }
             },
             {
-              "kind": "field",
-              "name": "suffixElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "bq-option-group",
+          "csspart": [
+            {
+              "name": "label",
+              "description": "The `legend` tag element which acts as a container for the label"
             },
             {
-              "kind": "field",
-              "name": "subTitleElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "name": "prefix",
+              "description": "The prefix of the label"
             },
             {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqPageTitleElement"
-              }
+              "name": "label",
+              "description": "The text of the label"
             },
             {
-              "kind": "field",
-              "name": "haveBackNavigation",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "name": "suffix",
+              "description": "The suffix of the label"
             },
+            {
+              "name": "group",
+              "description": "The `div` element which holds the option items"
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqOptionGroup",
+          "declaration": {
+            "name": "BqOptionGroup",
+            "module": "components/bq-option-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-option-group",
+          "declaration": {
+            "name": "BqOptionGroup",
+            "module": "components/bq-option-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-option-list.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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>",
+          "name": "BqOptionList",
+          "cssProperties": [
+            {
+              "description": "Option group gap between items Y axis",
+              "name": "--bq-option-group--gapY-list"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The option items",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "hasSuffix",
+              "name": "el",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "HTMLBqOptionListElement"
+              }
             },
             {
               "kind": "field",
-              "name": "hasSubTitle",
+              "name": "ariaLabel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "'Options'",
+              "description": "Aria label for the list."
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "onBqSelect",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLElement>"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "render"
             }
           ],
-          "tagName": "bq-page-title",
-          "csspart": [
-            {
-              "name": "base",
-              "description": "The inner container `<div>`of element that contains the base page title component."
-            },
-            {
-              "name": "content",
-              "description": "Defines the main container of the page title component, which includes the title and subtitle elements."
-            },
-            {
-              "name": "title-suffix",
-              "description": "Defines the container that holds the title and any suffix content."
-            },
-            {
-              "name": "back",
-              "description": "The container `<div>` page title element that acts as back slot container."
-            },
+          "attributes": [
             {
-              "name": "title",
-              "description": "The `<h1>` element serves as a container for the page title content, to improve accessibility."
+              "type": {
+                "text": "string"
+              },
+              "description": "Aria label for the list.",
+              "name": "aria-label"
             },
             {
-              "name": "suffix",
-              "description": "The `<div>` page title element that acts as suffix slot container."
-            },
+              "name": "aria-label",
+              "fieldName": "ariaLabel",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-option-list",
+          "csspart": {
+            "name": "base",
+            "description": "The component's internal wrapper."
+          },
+          "events": [
             {
-              "name": "sub-title",
-              "description": "The `<div>` page title element that acts as sub-title slot container."
+              "name": "bqSelect",
+              "type": {
+                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
+              },
+              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
             }
           ],
-          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BqPageTitle",
+          "name": "BqOptionList",
           "declaration": {
-            "name": "BqPageTitle",
-            "module": "components/bq-page-title.js"
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-page-title",
+          "name": "bq-option-list",
           "declaration": {
-            "name": "BqPageTitle",
-            "module": "components/bq-page-title.js"
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
           }
         }
       ]
@@ -10032,8 +9815,225 @@
           "kind": "custom-element-definition",
           "name": "bq-panel",
           "declaration": {
-            "name": "BqPanel",
-            "module": "components/bq-panel.js"
+            "name": "BqPanel",
+            "module": "components/bq-panel.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-page-title.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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>",
+          "name": "BqPageTitle",
+          "cssProperties": [
+            {
+              "description": "Padding top and bottom of the page title wrapper",
+              "name": "--paddingY"
+            },
+            {
+              "description": "Page title border end color",
+              "name": "--subtitle-borderBlockEnd"
+            },
+            {
+              "description": "Page title font weight for subtitle",
+              "name": "--subtitle-fontWeight"
+            },
+            {
+              "description": "Page title color for sub-title",
+              "name": "--subtitle-textColor"
+            },
+            {
+              "description": "Page title text size for subtitle",
+              "name": "--subtitle-textSize"
+            },
+            {
+              "description": "Page title font weight for title",
+              "name": "--title-fontWeight"
+            },
+            {
+              "description": "Page title text line height",
+              "name": "--title-lineHeight"
+            },
+            {
+              "description": "Page title color for title",
+              "name": "--title-textColor"
+            },
+            {
+              "description": "Page title text size for title",
+              "name": "--title-textSize"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The inner container `<div>`of element that contains the base page title component.",
+              "name": "base"
+            },
+            {
+              "description": "Defines the main container of the page title component, which includes the title and subtitle elements.",
+              "name": "content"
+            },
+            {
+              "description": "Defines the container that holds the title and any suffix content.",
+              "name": "title-suffix"
+            },
+            {
+              "description": "The container `<div>` page title element that acts as back slot container.",
+              "name": "back"
+            },
+            {
+              "description": "The `<h1>` element serves as a container for the page title content, to improve accessibility.",
+              "name": "title"
+            },
+            {
+              "description": "The `<div>` page title element that acts as suffix slot container.",
+              "name": "suffix"
+            },
+            {
+              "description": "The `<div>` page title element that acts as sub-title slot container.",
+              "name": "sub-title"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The back navigation button.",
+              "name": "back"
+            },
+            {
+              "description": "The main title content.",
+              "name": ""
+            },
+            {
+              "description": "The sub-title content.",
+              "name": "sub-title"
+            },
+            {
+              "description": "The suffix content.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "backNavigationElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "suffixElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "subTitleElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqPageTitleElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "haveBackNavigation",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasSuffix",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasSubTitle",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "bq-page-title",
+          "csspart": [
+            {
+              "name": "base",
+              "description": "The inner container `<div>`of element that contains the base page title component."
+            },
+            {
+              "name": "content",
+              "description": "Defines the main container of the page title component, which includes the title and subtitle elements."
+            },
+            {
+              "name": "title-suffix",
+              "description": "Defines the container that holds the title and any suffix content."
+            },
+            {
+              "name": "back",
+              "description": "The container `<div>` page title element that acts as back slot container."
+            },
+            {
+              "name": "title",
+              "description": "The `<h1>` element serves as a container for the page title content, to improve accessibility."
+            },
+            {
+              "name": "suffix",
+              "description": "The `<div>` page title element that acts as suffix slot container."
+            },
+            {
+              "name": "sub-title",
+              "description": "The `<div>` page title element that acts as sub-title slot container."
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqPageTitle",
+          "declaration": {
+            "name": "BqPageTitle",
+            "module": "components/bq-page-title.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-page-title",
+          "declaration": {
+            "name": "BqPageTitle",
+            "module": "components/bq-page-title.js"
           }
         }
       ]
@@ -13959,132 +13959,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-status.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "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>",
-          "name": "BqStatus",
-          "cssProperties": [
-            {
-              "description": "Status circle size.",
-              "name": "--bq-status-circ"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper of the status component.",
-              "name": "base"
-            },
-            {
-              "description": "The colored circle that marks the status type.",
-              "name": "circle"
-            },
-            {
-              "description": "The `<div>` container that holds the text label of the status component.",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "content of the status component.",
-              "name": "The"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqStatusElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TStatusType"
-              },
-              "default": "'neutral'",
-              "description": "It defines the type of status to display",
-              "parsedType": {
-                "text": "'info' | 'success' | 'danger' | 'neutral' | 'alert'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "\"alert\" | \"danger\" | \"info\" | \"neutral\" | \"success\""
-              },
-              "description": "It defines the type of status to display.",
-              "name": "type"
-            },
-            {
-              "name": "type",
-              "fieldName": "type",
-              "type": {
-                "text": "TStatusType"
-              },
-              "parsedType": {
-                "text": "'info' | 'success' | 'danger' | 'neutral' | 'alert'"
-              }
-            }
-          ],
-          "tagName": "bq-status",
-          "dependencies": [
-            {
-              "name": "bq-badge",
-              "description": ""
-            }
-          ],
-          "csspart": [
-            {
-              "name": "base",
-              "description": "The component's internal wrapper of the status component."
-            },
-            {
-              "name": "circle",
-              "description": "The colored circle that marks the status type."
-            },
-            {
-              "name": "text",
-              "description": "The `<div>` container that holds the text label of the status component."
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqStatus",
-          "declaration": {
-            "name": "BqStatus",
-            "module": "components/bq-status.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-status",
-          "declaration": {
-            "name": "BqStatus",
-            "module": "components/bq-status.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bq-step-item.js",
@@ -14325,6 +14199,132 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-status.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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>",
+          "name": "BqStatus",
+          "cssProperties": [
+            {
+              "description": "Status circle size.",
+              "name": "--bq-status-circ"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper of the status component.",
+              "name": "base"
+            },
+            {
+              "description": "The colored circle that marks the status type.",
+              "name": "circle"
+            },
+            {
+              "description": "The `<div>` container that holds the text label of the status component.",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "content of the status component.",
+              "name": "The"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqStatusElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TStatusType"
+              },
+              "default": "'neutral'",
+              "description": "It defines the type of status to display",
+              "parsedType": {
+                "text": "'info' | 'success' | 'danger' | 'neutral' | 'alert'"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkPropValues"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "\"alert\" | \"danger\" | \"info\" | \"neutral\" | \"success\""
+              },
+              "description": "It defines the type of status to display.",
+              "name": "type"
+            },
+            {
+              "name": "type",
+              "fieldName": "type",
+              "type": {
+                "text": "TStatusType"
+              },
+              "parsedType": {
+                "text": "'info' | 'success' | 'danger' | 'neutral' | 'alert'"
+              }
+            }
+          ],
+          "tagName": "bq-status",
+          "dependencies": [
+            {
+              "name": "bq-badge",
+              "description": ""
+            }
+          ],
+          "csspart": [
+            {
+              "name": "base",
+              "description": "The component's internal wrapper of the status component."
+            },
+            {
+              "name": "circle",
+              "description": "The colored circle that marks the status type."
+            },
+            {
+              "name": "text",
+              "description": "The `<div>` container that holds the text label of the status component."
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqStatus",
+          "declaration": {
+            "name": "BqStatus",
+            "module": "components/bq-status.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-status",
+          "declaration": {
+            "name": "BqStatus",
+            "module": "components/bq-status.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-steps.js",