@beeq/core 1.12.3-beta.0 → 1.12.3

package/dist/custom-elements.json

@@ -2,240 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-accordion-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>",
-          "name": "BqAccordionGroup",
-          "cssProperties": [
-            {
-              "description": "Accordion group distance between elements",
-              "name": "--bq-accordion-group--gap"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot where the bq-accordion elements are placed.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqAccordionGroupElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "TAccordionAppearance"
-              },
-              "default": "'filled'",
-              "description": "The appearance style of accordion to be applied to all accordions",
-              "parsedType": {
-                "text": "'filled' | 'ghost'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "expandAll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true all accordions are expanded"
-            },
-            {
-              "kind": "field",
-              "name": "noAnimation",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Animation is set through JS when the browser does not support CSS calc-size()\nIf true, the accordion animation, will be disabled. No animation will be applied."
-            },
-            {
-              "kind": "field",
-              "name": "multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true multiple accordions can be expanded at the same time"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "TAccordionSize"
-              },
-              "default": "'medium'",
-              "description": "The size of accordion to be applied to all accordions",
-              "parsedType": {
-                "text": "'small' | 'medium'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "onBqClick",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLBqAccordionElement>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "bqAccordionElements",
-              "type": {
-                "text": "HTMLBqAccordionElement[]"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "\"filled\" | \"ghost\""
-              },
-              "description": "The appearance style of accordion to be applied to all accordions",
-              "name": "appearance",
-              "default": "\"filled\""
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true all accordions are expanded",
-              "name": "expandAll",
-              "default": "false"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.",
-              "name": "no-animation",
-              "default": "false"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true multiple accordions can be expanded at the same time",
-              "name": "multiple",
-              "default": "false"
-            },
-            {
-              "type": {
-                "text": "\"small\" | \"medium\""
-              },
-              "description": "The size of accordion to be applied to all accordions",
-              "name": "size",
-              "default": "\"medium\""
-            },
-            {
-              "name": "appearance",
-              "fieldName": "appearance",
-              "default": "'filled'",
-              "description": "The appearance style of accordion to be applied to all accordions",
-              "type": {
-                "text": "TAccordionAppearance"
-              },
-              "parsedType": {
-                "text": "'filled' | 'ghost'"
-              }
-            },
-            {
-              "name": "expand-all",
-              "fieldName": "expandAll",
-              "description": "If true all accordions are expanded",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "no-animation",
-              "fieldName": "noAnimation",
-              "default": "false",
-              "description": "Animation is set through JS when the browser does not support CSS calc-size()\nIf true, the accordion animation, will be disabled. No animation will be applied.",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "multiple",
-              "fieldName": "multiple",
-              "default": "false",
-              "description": "If true multiple accordions can be expanded at the same time",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "size",
-              "fieldName": "size",
-              "default": "'medium'",
-              "description": "The size of accordion to be applied to all accordions",
-              "type": {
-                "text": "TAccordionSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium'"
-              }
-            }
-          ],
-          "tagName": "bq-accordion-group",
-          "csspart": {
-            "name": "base",
-            "description": "The component's base wrapper."
-          },
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqAccordionGroup",
-          "declaration": {
-            "name": "BqAccordionGroup",
-            "module": "components/bq-accordion-group.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-accordion-group",
-          "declaration": {
-            "name": "BqAccordionGroup",
-            "module": "components/bq-accordion-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bq-accordion.js",
@@ -903,21 +669,255 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-alert.js",
+      "path": "components/bq-accordion-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\nIt can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-alert>\n<bq-icon name=\"star\" slot=\"icon\"></bq-icon>\nTitle\n<span slot=\"body\">\nDescription\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-alert>\n```\n\n</figure>",
-          "name": "BqAlert",
+          "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>",
+          "name": "BqAccordionGroup",
           "cssProperties": [
             {
-              "description": "The alert background color",
-              "name": "--bq-alert--background"
-            },
+              "description": "Accordion group distance between elements",
+              "name": "--bq-accordion-group--gap"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The alert border radius",
-              "name": "--bq-alert--border-radius"
-            },
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot where the bq-accordion elements are placed.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqAccordionGroupElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "TAccordionAppearance"
+              },
+              "default": "'filled'",
+              "description": "The appearance style of accordion to be applied to all accordions",
+              "parsedType": {
+                "text": "'filled' | 'ghost'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expandAll",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true all accordions are expanded"
+            },
+            {
+              "kind": "field",
+              "name": "noAnimation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Animation is set through JS when the browser does not support CSS calc-size()\nIf true, the accordion animation, will be disabled. No animation will be applied."
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true multiple accordions can be expanded at the same time"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "TAccordionSize"
+              },
+              "default": "'medium'",
+              "description": "The size of accordion to be applied to all accordions",
+              "parsedType": {
+                "text": "'small' | 'medium'"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkPropValues"
+            },
+            {
+              "kind": "method",
+              "name": "onBqClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLBqAccordionElement>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "bqAccordionElements",
+              "type": {
+                "text": "HTMLBqAccordionElement[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "\"filled\" | \"ghost\""
+              },
+              "description": "The appearance style of accordion to be applied to all accordions",
+              "name": "appearance",
+              "default": "\"filled\""
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true all accordions are expanded",
+              "name": "expandAll",
+              "default": "false"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.",
+              "name": "no-animation",
+              "default": "false"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true multiple accordions can be expanded at the same time",
+              "name": "multiple",
+              "default": "false"
+            },
+            {
+              "type": {
+                "text": "\"small\" | \"medium\""
+              },
+              "description": "The size of accordion to be applied to all accordions",
+              "name": "size",
+              "default": "\"medium\""
+            },
+            {
+              "name": "appearance",
+              "fieldName": "appearance",
+              "default": "'filled'",
+              "description": "The appearance style of accordion to be applied to all accordions",
+              "type": {
+                "text": "TAccordionAppearance"
+              },
+              "parsedType": {
+                "text": "'filled' | 'ghost'"
+              }
+            },
+            {
+              "name": "expand-all",
+              "fieldName": "expandAll",
+              "description": "If true all accordions are expanded",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "no-animation",
+              "fieldName": "noAnimation",
+              "default": "false",
+              "description": "Animation is set through JS when the browser does not support CSS calc-size()\nIf true, the accordion animation, will be disabled. No animation will be applied.",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "multiple",
+              "fieldName": "multiple",
+              "default": "false",
+              "description": "If true multiple accordions can be expanded at the same time",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "size",
+              "fieldName": "size",
+              "default": "'medium'",
+              "description": "The size of accordion to be applied to all accordions",
+              "type": {
+                "text": "TAccordionSize"
+              },
+              "parsedType": {
+                "text": "'small' | 'medium'"
+              }
+            }
+          ],
+          "tagName": "bq-accordion-group",
+          "csspart": {
+            "name": "base",
+            "description": "The component's base wrapper."
+          },
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqAccordionGroup",
+          "declaration": {
+            "name": "BqAccordionGroup",
+            "module": "components/bq-accordion-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-accordion-group",
+          "declaration": {
+            "name": "BqAccordionGroup",
+            "module": "components/bq-accordion-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-alert.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\nIt can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-alert>\n<bq-icon name=\"star\" slot=\"icon\"></bq-icon>\nTitle\n<span slot=\"body\">\nDescription\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-alert>\n```\n\n</figure>",
+          "name": "BqAlert",
+          "cssProperties": [
+            {
+              "description": "The alert background color",
+              "name": "--bq-alert--background"
+            },
+            {
+              "description": "The alert border radius",
+              "name": "--bq-alert--border-radius"
+            },
             {
               "description": "The alert content and footer gap",
               "name": "--bq-alert--content-footer-gap"
@@ -1876,32 +1876,268 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-breadcrumb-item.js",
+      "path": "components/bq-badge.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>",
-          "name": "BqBreadcrumbItem",
+          "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>",
+          "name": "BqBadge",
           "cssProperties": [
             {
-              "description": "Background color of the breadcrumb item",
-              "name": "--bq-breadcrumb-item--background"
+              "description": "The badge background color",
+              "name": "--bq-badge--background-color"
             },
             {
-              "description": "Box shadow of the breadcrumb item",
-              "name": "--bq-breadcrumb-item--box-shadow"
+              "description": "The badge box shadow",
+              "name": "--bq-badge--box-shadow"
             },
             {
-              "description": "Border color of the breadcrumb item",
-              "name": "--bq-breadcrumb-item--border-color"
+              "description": "The badge border color",
+              "name": "--bq-badge--border-color"
             },
             {
-              "description": "Border style of the breadcrumb item",
-              "name": "--bq-breadcrumb-item--border-style"
+              "description": "The badge border radius",
+              "name": "--bq-badge--border-radius"
             },
             {
-              "description": "Border width of the breadcrumb item",
-              "name": "--bq-breadcrumb-item--border-width"
+              "description": "The badge border style",
+              "name": "--bq-badge--border-style"
+            },
+            {
+              "description": "The badge border width",
+              "name": "--bq-badge--border-width"
+            },
+            {
+              "description": "The badge small size",
+              "name": "--bq-badge--size-small"
+            },
+            {
+              "description": "The badge medium size",
+              "name": "--bq-badge--size-medium"
+            },
+            {
+              "description": "The badge large size",
+              "name": "--bq-badge--size-large"
+            },
+            {
+              "description": "The badge text color",
+              "name": "--bq-badge--text-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper that holds the count.",
+              "name": "base"
+            },
+            {
+              "description": "The component's internal wrapper that holds the slot.",
+              "name": "number"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot is used to add content to the badge. The content can be a number or a text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "spanElement",
+              "type": {
+                "text": "HTMLSpanElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "observer",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "privacy": "private",
+              "default": "new MutationObserver((mutations) => { const [mutation] = mutations; this.contentLength = mutation.target.textContent.length; })"
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqBadgeElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "contentLength",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "backgroundColor",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Badge background color. The value should be a valid value of the palette color"
+            },
+            {
+              "kind": "field",
+              "name": "textColor",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Badge number color. The value should be a valid value of the palette color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "TBadgeSize | undefined"
+              },
+              "default": "'small'",
+              "description": "The size of the badge. Relevant if badge has no content.",
+              "parsedType": {
+                "text": "'small' | 'medium' | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleSizePropChange"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "slot",
+              "type": {
+                "text": "HTMLSlotElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Badge background color. The value should be a valid value of the palette color.",
+              "name": "background-color"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Badge number color. The value should be a valid value of the palette color.",
+              "name": "text-color"
+            },
+            {
+              "type": {
+                "text": "\"small\" | \"medium\" | \"large\""
+              },
+              "description": "The size of the badge. Relevant if badge has no content.",
+              "name": "size"
+            },
+            {
+              "name": "background-color",
+              "fieldName": "backgroundColor",
+              "description": "Badge background color. The value should be a valid value of the palette color",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "text-color",
+              "fieldName": "textColor",
+              "description": "Badge number color. The value should be a valid value of the palette color",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "size",
+              "fieldName": "size",
+              "default": "'small'",
+              "description": "The size of the badge. Relevant if badge has no content.",
+              "type": {
+                "text": "TBadgeSize"
+              },
+              "parsedType": {
+                "text": "'small' | 'medium'"
+              }
+            }
+          ],
+          "tagName": "bq-badge",
+          "csspart": [
+            {
+              "name": "base",
+              "description": "The component's internal wrapper that holds the count."
+            },
+            {
+              "name": "number",
+              "description": "The component's internal wrapper that holds the slot."
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqBadge",
+          "declaration": {
+            "name": "BqBadge",
+            "module": "components/bq-badge.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-badge",
+          "declaration": {
+            "name": "BqBadge",
+            "module": "components/bq-badge.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-breadcrumb-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>",
+          "name": "BqBreadcrumbItem",
+          "cssProperties": [
+            {
+              "description": "Background color of the breadcrumb item",
+              "name": "--bq-breadcrumb-item--background"
+            },
+            {
+              "description": "Box shadow of the breadcrumb item",
+              "name": "--bq-breadcrumb-item--box-shadow"
+            },
+            {
+              "description": "Border color of the breadcrumb item",
+              "name": "--bq-breadcrumb-item--border-color"
+            },
+            {
+              "description": "Border style of the breadcrumb item",
+              "name": "--bq-breadcrumb-item--border-style"
+            },
+            {
+              "description": "Border width of the breadcrumb item",
+              "name": "--bq-breadcrumb-item--border-width"
             },
             {
               "description": "Border radius of the breadcrumb item",
@@ -2151,260 +2387,24 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-badge.js",
+      "path": "components/bq-button.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>",
-          "name": "BqBadge",
+          "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": "The badge background color",
-              "name": "--bq-badge--background-color"
+              "description": "Button border color",
+              "name": "--bq-button--border-color"
             },
             {
-              "description": "The badge box shadow",
-              "name": "--bq-badge--box-shadow"
+              "description": "Button border radius",
+              "name": "--bq-button--border-radius"
             },
             {
-              "description": "The badge border color",
-              "name": "--bq-badge--border-color"
-            },
-            {
-              "description": "The badge border radius",
-              "name": "--bq-badge--border-radius"
-            },
-            {
-              "description": "The badge border style",
-              "name": "--bq-badge--border-style"
-            },
-            {
-              "description": "The badge border width",
-              "name": "--bq-badge--border-width"
-            },
-            {
-              "description": "The badge small size",
-              "name": "--bq-badge--size-small"
-            },
-            {
-              "description": "The badge medium size",
-              "name": "--bq-badge--size-medium"
-            },
-            {
-              "description": "The badge large size",
-              "name": "--bq-badge--size-large"
-            },
-            {
-              "description": "The badge text color",
-              "name": "--bq-badge--text-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper that holds the count.",
-              "name": "base"
-            },
-            {
-              "description": "The component's internal wrapper that holds the slot.",
-              "name": "number"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot is used to add content to the badge. The content can be a number or a text.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "spanElement",
-              "type": {
-                "text": "HTMLSpanElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "observer",
-              "type": {
-                "text": "MutationObserver"
-              },
-              "privacy": "private",
-              "default": "new MutationObserver((mutations) => { const [mutation] = mutations; this.contentLength = mutation.target.textContent.length; })"
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqBadgeElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "contentLength",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "backgroundColor",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Badge background color. The value should be a valid value of the palette color"
-            },
-            {
-              "kind": "field",
-              "name": "textColor",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Badge number color. The value should be a valid value of the palette color"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "TBadgeSize | undefined"
-              },
-              "default": "'small'",
-              "description": "The size of the badge. Relevant if badge has no content.",
-              "parsedType": {
-                "text": "'small' | 'medium' | undefined"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleSizePropChange"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "slot",
-              "type": {
-                "text": "HTMLSlotElement | null"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Badge background color. The value should be a valid value of the palette color.",
-              "name": "background-color"
-            },
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Badge number color. The value should be a valid value of the palette color.",
-              "name": "text-color"
-            },
-            {
-              "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
-              },
-              "description": "The size of the badge. Relevant if badge has no content.",
-              "name": "size"
-            },
-            {
-              "name": "background-color",
-              "fieldName": "backgroundColor",
-              "description": "Badge background color. The value should be a valid value of the palette color",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "text-color",
-              "fieldName": "textColor",
-              "description": "Badge number color. The value should be a valid value of the palette color",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "size",
-              "fieldName": "size",
-              "default": "'small'",
-              "description": "The size of the badge. Relevant if badge has no content.",
-              "type": {
-                "text": "TBadgeSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium'"
-              }
-            }
-          ],
-          "tagName": "bq-badge",
-          "csspart": [
-            {
-              "name": "base",
-              "description": "The component's internal wrapper that holds the count."
-            },
-            {
-              "name": "number",
-              "description": "The component's internal wrapper that holds the slot."
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqBadge",
-          "declaration": {
-            "name": "BqBadge",
-            "module": "components/bq-badge.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-badge",
-          "declaration": {
-            "name": "BqBadge",
-            "module": "components/bq-badge.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 style",
+              "name": "--bq-button--border-style"
             },
             {
               "description": "Button border width",
@@ -3183,27 +3183,186 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-checkbox.js",
+      "path": "components/bq-card.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The checkbox is a UI component that allows users to select one or more options from a list of choices.\nIt is commonly used in forms, surveys, and settings pages.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\nCheckbox label\n</bq-checkbox>\n```\n\n</figure>",
-          "name": "BqCheckbox",
+          "description": "The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\nIts structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-card type=\"default\" border=\"m\">\n<div class=\"p-m\">\n<h3 class=\"text-xl font-bold\">Card Title</h3>\n<p class=\"text-m\">Card content goes here</p>\n</div>\n</bq-card>\n```\n\n</figure>",
+          "name": "BqCard",
           "cssProperties": [
             {
-              "description": "Checkbox size",
-              "name": "--bq-checkbox--size"
+              "description": "Card border color",
+              "name": "--bq-card--borderColor"
             },
             {
-              "description": "Checkbox border radius",
-              "name": "--bq-checkbox--border-radius"
+              "description": "Card border radius",
+              "name": "--bq-card--borderRadius"
             },
             {
-              "description": "Checkbox border width",
-              "name": "--bq-checkbox--border-width"
-            }
-          ],
-          "cssParts": [
+              "description": "Card border style",
+              "name": "--bq-card--borderStyle"
+            },
+            {
+              "description": "Card border width",
+              "name": "--bq-card--borderWidth"
+            },
+            {
+              "description": "Card padding",
+              "name": "--bq-card--padding"
+            },
+            {
+              "description": "Minimal card padding",
+              "name": "--bq-card--paddingMinimal"
+            },
+            {
+              "description": "Card background color",
+              "name": "--bq-card--background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
+              "name": "wrapper"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The content of the card component",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqCardElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TCardType"
+              },
+              "default": "'default'",
+              "description": "Type of card component",
+              "parsedType": {
+                "text": "'default' | 'minimal'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "TCardBorderRadius"
+              },
+              "default": "'m'",
+              "description": "The corner radius of the card component",
+              "parsedType": {
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkPropValue"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "\"default\" | \"minimal\""
+              },
+              "description": "Type of card component",
+              "name": "type"
+            },
+            {
+              "type": {
+                "text": "\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\""
+              },
+              "description": "The corner radius of the card component",
+              "name": "border"
+            },
+            {
+              "name": "type",
+              "fieldName": "type",
+              "default": "'default'",
+              "description": "Type of card component",
+              "type": {
+                "text": "TCardType"
+              },
+              "parsedType": {
+                "text": "'default' | 'minimal'"
+              }
+            },
+            {
+              "name": "border",
+              "fieldName": "border",
+              "default": "'m'",
+              "description": "The corner radius of the card component",
+              "type": {
+                "text": "TCardBorderRadius"
+              },
+              "parsedType": {
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+              }
+            }
+          ],
+          "tagName": "bq-card",
+          "csspart": {
+            "name": "wrapper",
+            "description": "The wrapper container `<div>` of the element inside the shadow DOM"
+          },
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqCard",
+          "declaration": {
+            "name": "BqCard",
+            "module": "components/bq-card.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-card",
+          "declaration": {
+            "name": "BqCard",
+            "module": "components/bq-card.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-checkbox.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The checkbox is a UI component that allows users to select one or more options from a list of choices.\nIt is commonly used in forms, surveys, and settings pages.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\nCheckbox label\n</bq-checkbox>\n```\n\n</figure>",
+          "name": "BqCheckbox",
+          "cssProperties": [
+            {
+              "description": "Checkbox size",
+              "name": "--bq-checkbox--size"
+            },
+            {
+              "description": "Checkbox border radius",
+              "name": "--bq-checkbox--border-radius"
+            },
+            {
+              "description": "Checkbox border width",
+              "name": "--bq-checkbox--border-width"
+            }
+          ],
+          "cssParts": [
             {
               "description": "The component's internal wrapper of the checkbox component.",
               "name": "base"
@@ -3611,224 +3770,65 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-card.js",
+      "path": "components/bq-date-picker.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\nIts structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-card type=\"default\" border=\"m\">\n<div class=\"p-m\">\n<h3 class=\"text-xl font-bold\">Card Title</h3>\n<p class=\"text-m\">Card content goes here</p>\n</div>\n</bq-card>\n```\n\n</figure>",
-          "name": "BqCard",
+          "description": "The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-date-picker\nfirst-day-of-week=\"1\"\nlocale=\"en-GB\"\nmonths-per-view=\"single\"\nmonths=\"2\"\nname=\"bq-date-picker\"\nplaceholder=\"Enter your date\"\nplacement=\"bottom-end\"\nshow-outside-days=\"false\"\ntype=\"range\"\nvalidation-status=\"none\"\nvalue=\"2024-05-25\"\n>\n<label class=\"flex flex-grow items-center\" slot=\"label\">\nDate picker label\n</label>\n</bq-date-picker>\n```\n\n</figure>",
+          "name": "BqDatePicker",
           "cssProperties": [
             {
-              "description": "Card border color",
-              "name": "--bq-card--borderColor"
+              "description": "Date picker background color.",
+              "name": "--bq-date-picker--background-color"
             },
             {
-              "description": "Card border radius",
-              "name": "--bq-card--borderRadius"
+              "description": "Date picker border color.",
+              "name": "--bq-date-picker--border-color"
             },
             {
-              "description": "Card border style",
-              "name": "--bq-card--borderStyle"
+              "description": "Date picker border color when disabled.",
+              "name": "--bq-date-picker--border-color-disabled"
             },
             {
-              "description": "Card border width",
-              "name": "--bq-card--borderWidth"
+              "description": "Date picker border color on focus.",
+              "name": "--bq-date-picker--border-color-focus"
             },
             {
-              "description": "Card padding",
-              "name": "--bq-card--padding"
+              "description": "Date picker border radius.",
+              "name": "--bq-date-picker--border-radius"
             },
             {
-              "description": "Minimal card padding",
-              "name": "--bq-card--paddingMinimal"
+              "description": "Date picker border style.",
+              "name": "--bq-date-picker--border-style"
             },
             {
-              "description": "Card background color",
-              "name": "--bq-card--background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
-            }
-          ],
-          "slots": [
+              "description": "Date picker border width.",
+              "name": "--bq-date-picker--border-width"
+            },
             {
-              "description": "The content of the card component",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "Date picker border color for current date.",
+              "name": "--bq-date-picker--currentDate-border-color"
+            },
             {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqCardElement"
-              }
+              "description": "Date picker border width for current date.",
+              "name": "--bq-date-picker--currentDate-border-width"
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TCardType"
-              },
-              "default": "'default'",
-              "description": "Type of card component",
-              "parsedType": {
-                "text": "'default' | 'minimal'"
-              }
+              "description": "Date picker button day size.",
+              "name": "--bq-date-picker--day-size"
             },
             {
-              "kind": "field",
-              "name": "border",
-              "type": {
-                "text": "TCardBorderRadius"
-              },
-              "default": "'m'",
-              "description": "The corner radius of the card component",
-              "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
-              }
+              "description": "Gap between Date picker content and prefix/suffix.",
+              "name": "--bq-date-picker--gap"
             },
             {
-              "kind": "method",
-              "name": "checkPropValue"
+              "description": "Icon size to use in prefix/suffix and clear button.",
+              "name": "--bq-date-picker--icon-size"
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "\"default\" | \"minimal\""
-              },
-              "description": "Type of card component",
-              "name": "type"
-            },
-            {
-              "type": {
-                "text": "\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\""
-              },
-              "description": "The corner radius of the card component",
-              "name": "border"
-            },
-            {
-              "name": "type",
-              "fieldName": "type",
-              "default": "'default'",
-              "description": "Type of card component",
-              "type": {
-                "text": "TCardType"
-              },
-              "parsedType": {
-                "text": "'default' | 'minimal'"
-              }
-            },
-            {
-              "name": "border",
-              "fieldName": "border",
-              "default": "'m'",
-              "description": "The corner radius of the card component",
-              "type": {
-                "text": "TCardBorderRadius"
-              },
-              "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
-              }
-            }
-          ],
-          "tagName": "bq-card",
-          "csspart": {
-            "name": "wrapper",
-            "description": "The wrapper container `<div>` of the element inside the shadow DOM"
-          },
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqCard",
-          "declaration": {
-            "name": "BqCard",
-            "module": "components/bq-card.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-card",
-          "declaration": {
-            "name": "BqCard",
-            "module": "components/bq-card.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-date-picker.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-date-picker\nfirst-day-of-week=\"1\"\nlocale=\"en-GB\"\nmonths-per-view=\"single\"\nmonths=\"2\"\nname=\"bq-date-picker\"\nplaceholder=\"Enter your date\"\nplacement=\"bottom-end\"\nshow-outside-days=\"false\"\ntype=\"range\"\nvalidation-status=\"none\"\nvalue=\"2024-05-25\"\n>\n<label class=\"flex flex-grow items-center\" slot=\"label\">\nDate picker label\n</label>\n</bq-date-picker>\n```\n\n</figure>",
-          "name": "BqDatePicker",
-          "cssProperties": [
-            {
-              "description": "Date picker background color.",
-              "name": "--bq-date-picker--background-color"
-            },
-            {
-              "description": "Date picker border color.",
-              "name": "--bq-date-picker--border-color"
-            },
-            {
-              "description": "Date picker border color when disabled.",
-              "name": "--bq-date-picker--border-color-disabled"
-            },
-            {
-              "description": "Date picker border color on focus.",
-              "name": "--bq-date-picker--border-color-focus"
-            },
-            {
-              "description": "Date picker border radius.",
-              "name": "--bq-date-picker--border-radius"
-            },
-            {
-              "description": "Date picker border style.",
-              "name": "--bq-date-picker--border-style"
-            },
-            {
-              "description": "Date picker border width.",
-              "name": "--bq-date-picker--border-width"
-            },
-            {
-              "description": "Date picker border color for current date.",
-              "name": "--bq-date-picker--currentDate-border-color"
-            },
-            {
-              "description": "Date picker border width for current date.",
-              "name": "--bq-date-picker--currentDate-border-width"
-            },
-            {
-              "description": "Date picker button day size.",
-              "name": "--bq-date-picker--day-size"
-            },
-            {
-              "description": "Gap between Date picker content and prefix/suffix.",
-              "name": "--bq-date-picker--gap"
-            },
-            {
-              "description": "Icon size to use in prefix/suffix and clear button.",
-              "name": "--bq-date-picker--icon-size"
-            },
-            {
-              "description": "Date picker label margin bottom.",
-              "name": "--bq-date-picker--label-margin-bottom"
-            },
+              "description": "Date picker label margin bottom.",
+              "name": "--bq-date-picker--label-margin-bottom"
+            },
             {
               "description": "Date picker label text color.",
               "name": "--bq-date-picker--label-text-color"
@@ -6775,94 +6775,66 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-dropdown.js",
+      "path": "components/bq-empty-state.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",
-          "cssProperties": [
-            {
-              "description": "Panel background color",
-              "name": "--bq-panel--background"
-            },
-            {
-              "description": "Panel border color",
-              "name": "--bq-panel--border-color"
-            },
-            {
-              "description": "Panel border radius",
-              "name": "--bq-panel--border-radius"
-            },
-            {
-              "description": "Panel border style",
-              "name": "--bq-panel--border-style"
-            },
+          "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>",
+          "name": "BqEmptyState",
+          "cssParts": [
             {
-              "description": "Panel border width",
-              "name": "--bq-panel--border-width"
+              "description": "The container `<div>` that wraps the alert description content",
+              "name": "body"
             },
             {
-              "description": "Panel box shadow",
-              "name": "--bq-panel--box-shadow"
+              "description": "The container `<div>` that wraps the alert footer content",
+              "name": "footer"
             },
             {
-              "description": "Panel padding",
-              "name": "--bq-panel--padding"
+              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)",
+              "name": "icon"
             },
             {
-              "description": "Panel height",
-              "name": "--bq-panel--height"
+              "description": "The container `<div>` that wraps the thumbnail element",
+              "name": "thumbnail"
             },
             {
-              "description": "Panel width",
-              "name": "--bq-panel--width"
+              "description": "The container `<div>` that wraps the empty state title content",
+              "name": "title"
             },
             {
-              "description": "Panel z-index applied when opened",
-              "name": "--bq-panel-z-index"
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
+              "name": "wrapper"
             }
           ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel.",
-              "name": "dropdown"
-            },
+          "slots": [
             {
-              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element.",
-              "name": "panel"
+              "description": "The element that wraps the thumbnail element",
+              "name": "thumbnail"
             },
             {
-              "description": "The `<div>` element that hosts the trigger element.",
-              "name": "trigger"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The trigger element that opens the dropdown panel.",
-              "name": "trigger"
+              "description": "The content to be displayed after the thumbnail section",
+              "name": "body"
             },
             {
-              "description": "The content of the dropdown panel.",
-              "name": ""
+              "description": "The content to be displayed after the body section as footer",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dropdownPanelId",
-              "privacy": "private",
-              "default": "`bq-dropdown-panel-${++id}`"
+              "name": "bodyElem",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "triggerElem",
+              "name": "footerElem",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
@@ -6870,49 +6842,279 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqDropdownElement"
+                "text": "HTMLBqEmptyStateElement"
               }
             },
             {
               "kind": "field",
-              "name": "disableScrollLock",
+              "name": "hasBody",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the dropdown panel will not lock the page body scroll when open."
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "hasFooter",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, the dropdown panel will be visible and won't be shown."
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "distance",
+              "name": "size",
               "type": {
-                "text": "number | undefined"
+                "text": "TEmptyStateSize"
               },
-              "default": "4",
-              "description": "Represents the distance (gutter or margin) between the panel and the trigger element."
+              "default": "'medium'",
+              "description": "The size of the empty state component",
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large'"
+              }
             },
             {
-              "kind": "field",
-              "name": "keepOpenOnSelect",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "If true, the panel will remain open after a selection is made."
+              "kind": "method",
+              "name": "checkPropValues"
             },
             {
               "kind": "field",
-              "name": "placement",
-              "type": {
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "\"large\" | \"medium\" | \"small\""
+              },
+              "description": "The size of the empty state component",
+              "name": "size"
+            },
+            {
+              "name": "size",
+              "fieldName": "size",
+              "default": "'medium'",
+              "description": "The size of the empty state component",
+              "type": {
+                "text": "TEmptyStateSize"
+              },
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large'"
+              }
+            }
+          ],
+          "tagName": "bq-empty-state",
+          "dependencies": [
+            {
+              "name": "bq-icon",
+              "description": ""
+            }
+          ],
+          "csspart": [
+            {
+              "name": "body",
+              "description": "The container `<div>` that wraps the alert description content"
+            },
+            {
+              "name": "footer",
+              "description": "The container `<div>` that wraps the alert footer content"
+            },
+            {
+              "name": "icon",
+              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)"
+            },
+            {
+              "name": "thumbnail",
+              "description": "The container `<div>` that wraps the thumbnail element"
+            },
+            {
+              "name": "title",
+              "description": "The container `<div>` that wraps the empty state title content"
+            },
+            {
+              "name": "wrapper",
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqEmptyState",
+          "declaration": {
+            "name": "BqEmptyState",
+            "module": "components/bq-empty-state.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-empty-state",
+          "declaration": {
+            "name": "BqEmptyState",
+            "module": "components/bq-empty-state.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-dropdown.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",
+          "cssProperties": [
+            {
+              "description": "Panel background color",
+              "name": "--bq-panel--background"
+            },
+            {
+              "description": "Panel border color",
+              "name": "--bq-panel--border-color"
+            },
+            {
+              "description": "Panel border radius",
+              "name": "--bq-panel--border-radius"
+            },
+            {
+              "description": "Panel border style",
+              "name": "--bq-panel--border-style"
+            },
+            {
+              "description": "Panel border width",
+              "name": "--bq-panel--border-width"
+            },
+            {
+              "description": "Panel box shadow",
+              "name": "--bq-panel--box-shadow"
+            },
+            {
+              "description": "Panel padding",
+              "name": "--bq-panel--padding"
+            },
+            {
+              "description": "Panel height",
+              "name": "--bq-panel--height"
+            },
+            {
+              "description": "Panel width",
+              "name": "--bq-panel--width"
+            },
+            {
+              "description": "Panel z-index applied when opened",
+              "name": "--bq-panel-z-index"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel.",
+              "name": "dropdown"
+            },
+            {
+              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element.",
+              "name": "panel"
+            },
+            {
+              "description": "The `<div>` element that hosts the trigger element.",
+              "name": "trigger"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The trigger element that opens the dropdown panel.",
+              "name": "trigger"
+            },
+            {
+              "description": "The content of the dropdown panel.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dropdownPanelId",
+              "privacy": "private",
+              "default": "`bq-dropdown-panel-${++id}`"
+            },
+            {
+              "kind": "field",
+              "name": "triggerElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqDropdownElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableScrollLock",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the dropdown panel will not lock the page body scroll when open."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the dropdown panel will be visible and won't be shown."
+            },
+            {
+              "kind": "field",
+              "name": "distance",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "4",
+              "description": "Represents the distance (gutter or margin) between the panel and the trigger element."
+            },
+            {
+              "kind": "field",
+              "name": "keepOpenOnSelect",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the panel will remain open after a selection is made."
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
                 "text": "Placement | undefined"
               },
               "default": "'bottom-start'",
@@ -7229,228 +7431,26 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-empty-state.js",
+      "path": "components/bq-icon.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>",
-          "name": "BqEmptyState",
-          "cssParts": [
+          "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>",
+          "name": "BqIcon",
+          "cssProperties": [
             {
-              "description": "The container `<div>` that wraps the alert description content",
-              "name": "body"
+              "description": "The stroke color of the SVG.",
+              "name": "--bq-icon--color"
             },
             {
-              "description": "The container `<div>` that wraps the alert footer content",
-              "name": "footer"
-            },
-            {
-              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)",
-              "name": "icon"
-            },
-            {
-              "description": "The container `<div>` that wraps the thumbnail element",
-              "name": "thumbnail"
-            },
-            {
-              "description": "The container `<div>` that wraps the empty state title content",
-              "name": "title"
-            },
-            {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The element that wraps the thumbnail element",
-              "name": "thumbnail"
-            },
-            {
-              "description": "The content to be displayed after the thumbnail section",
-              "name": "body"
-            },
-            {
-              "description": "The content to be displayed after the body section as footer",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "bodyElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "footerElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqEmptyStateElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasBody",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "hasFooter",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "TEmptyStateSize"
-              },
-              "default": "'medium'",
-              "description": "The size of the empty state component",
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "iconSize",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "\"large\" | \"medium\" | \"small\""
-              },
-              "description": "The size of the empty state component",
-              "name": "size"
-            },
-            {
-              "name": "size",
-              "fieldName": "size",
-              "default": "'medium'",
-              "description": "The size of the empty state component",
-              "type": {
-                "text": "TEmptyStateSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large'"
-              }
-            }
-          ],
-          "tagName": "bq-empty-state",
-          "dependencies": [
-            {
-              "name": "bq-icon",
-              "description": ""
-            }
-          ],
-          "csspart": [
-            {
-              "name": "body",
-              "description": "The container `<div>` that wraps the alert description content"
-            },
-            {
-              "name": "footer",
-              "description": "The container `<div>` that wraps the alert footer content"
-            },
-            {
-              "name": "icon",
-              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)"
-            },
-            {
-              "name": "thumbnail",
-              "description": "The container `<div>` that wraps the thumbnail element"
-            },
-            {
-              "name": "title",
-              "description": "The container `<div>` that wraps the empty state title content"
-            },
-            {
-              "name": "wrapper",
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqEmptyState",
-          "declaration": {
-            "name": "BqEmptyState",
-            "module": "components/bq-empty-state.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-empty-state",
-          "declaration": {
-            "name": "BqEmptyState",
-            "module": "components/bq-empty-state.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-icon.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>",
-          "name": "BqIcon",
-          "cssProperties": [
-            {
-              "description": "The stroke color of the SVG.",
-              "name": "--bq-icon--color"
-            },
-            {
-              "description": "The size of the SVG.",
-              "name": "--bq-icon--size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper that holds the icon SVG content.",
-              "name": "base"
+              "description": "The size of the SVG.",
+              "name": "--bq-icon--size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper that holds the icon SVG content.",
+              "name": "base"
             },
             {
               "description": "The `<svg>` tag element inside the component.",
@@ -9278,146 +9278,32 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-option-list.js",
+      "path": "components/bq-option.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",
+          "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>",
+          "name": "BqOption",
           "cssProperties": [
             {
-              "description": "Option group gap between items Y axis",
-              "name": "--bq-option-group--gapY-list"
-            }
-          ],
-          "cssParts": [
+              "description": "background color",
+              "name": "--bq-option--background"
+            },
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
+              "description": "font size",
+              "name": "--bq-option--font-size"
+            },
             {
-              "description": "The option items",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "border color",
+              "name": "--bq-option--border-color"
+            },
             {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqOptionListElement"
-              }
+              "description": "border style",
+              "name": "--bq-option--border-style"
             },
             {
-              "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",
-              "default": "'Options'",
-              "description": "Aria label for the list.",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "bq-option-list",
-          "csspart": {
-            "name": "base",
-            "description": "The component's internal wrapper."
-          },
-          "events": [
-            {
-              "name": "bqSelect",
-              "type": {
-                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
-              },
-              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
-            }
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqOptionList",
-          "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-option-list",
-          "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-option.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>",
-          "name": "BqOption",
-          "cssProperties": [
-            {
-              "description": "background color",
-              "name": "--bq-option--background"
-            },
-            {
-              "description": "font size",
-              "name": "--bq-option--font-size"
-            },
-            {
-              "description": "border color",
-              "name": "--bq-option--border-color"
-            },
-            {
-              "description": "border style",
-              "name": "--bq-option--border-style"
-            },
-            {
-              "description": "border width",
-              "name": "--bq-option--border-width"
+              "description": "border width",
+              "name": "--bq-option--border-width"
             },
             {
               "description": "border radius",
@@ -9907,6 +9793,120 @@
         }
       ]
     },
+    {
+      "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",
+              "default": "'Options'",
+              "description": "Aria label for the list.",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-option-list",
+          "csspart": {
+            "name": "base",
+            "description": "The component's internal wrapper."
+          },
+          "events": [
+            {
+              "name": "bqSelect",
+              "type": {
+                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
+              },
+              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqOptionList",
+          "declaration": {
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-option-list",
+          "declaration": {
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-page-title.js",
@@ -12935,109 +12935,122 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-side-menu-item.js",
+      "path": "components/bq-side-menu.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>",
-          "name": "BqSideMenuItem",
+          "description": "The default side menu serves as a versatile container for organizing and displaying navigation elements,\n with default side menu items providing a clean and straightforward way to represent individual menu options.\n Together, they form the foundation for building structured and intuitive side menu layouts.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu>\n<div slot=\"logo\">\n<h1>Your Logo</h1>\n</div>\n<bq-side-menu-item active>\n<bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\nHome\n</bq-side-menu-item>\n<bq-side-menu-item>\n<bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\nSettings\n</bq-side-menu-item>\n<bq-side-menu-item disabled>\n<bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\nHelp\n</bq-side-menu-item>\n</bq-side-menu>\n```\n\n</figure>",
+          "name": "BqSideMenu",
           "cssProperties": [
             {
-              "description": "Side menu item default background color",
-              "name": "--bq-side-menu-item--bg-default"
-            },
-            {
-              "description": "Side menu item active background color",
-              "name": "--bq-side-menu-item--bg-active"
-            },
-            {
-              "description": "Side menu item default text color",
-              "name": "--bq-side-menu-item--text-default"
-            },
-            {
-              "description": "Side menu item active text color",
-              "name": "--bq-side-menu-item--text-active"
+              "description": "Side menu background color",
+              "name": "--bq-side-menu--bg-color"
             },
             {
-              "description": "Side menu item vertical padding",
-              "name": "--bq-side-menu-item--paddingX"
+              "description": "Side menu logo color",
+              "name": "--bq-side-menu--brand-color"
             },
             {
-              "description": "Side menu item horizontal padding",
-              "name": "--bq-side-menu-item--paddingY"
+              "description": "Side menu border color",
+              "name": "--bq-side-menu--border-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The component wrapper container inside the shadow DOM",
+              "description": "HTML `<aside>` root container",
               "name": "base"
             },
             {
-              "description": "The label slot",
-              "name": "label"
-            },
-            {
-              "description": "The prefix slot",
-              "name": "prefix"
+              "description": "HTML `<div>` element that holds the footer",
+              "name": "footer"
             },
             {
-              "description": "The suffix slot",
-              "name": "suffix"
+              "description": "HTML `<div>` element that holds the logo",
+              "name": "logo"
             },
             {
-              "description": "The `<div>` container that holds the tooltip content (when the side menu is collapsed)",
-              "name": "panel"
-            },
-            {
-              "description": "The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
-              "name": "trigger"
+              "description": "HTML `<nav>` element that holds the navigation items",
+              "name": "nav"
             }
           ],
           "slots": [
             {
-              "description": "The prefix part of menu item.",
-              "name": "prefix"
+              "description": "The section for displaying the logo or brand in the side menu.",
+              "name": "logo"
             },
             {
-              "description": "The content of the menu item.",
-              "name": ""
+              "description": "main section that holds all menu items.",
+              "name": "The"
             },
             {
-              "description": "The suffix part of menu item.",
-              "name": "suffix"
+              "description": "The section for adding footer content to the side menu.",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "labelElem",
+              "name": "menuItemCssSelector",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "'bq-side-menu-item'"
             },
             {
               "kind": "field",
-              "name": "el",
+              "name": "bodyCss",
               "type": {
-                "text": "HTMLBqSideMenuItemElement"
-              }
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'bq-body--side-menu'"
             },
             {
               "kind": "field",
-              "name": "textContent",
+              "name": "bodyCssExpand",
               "type": {
                 "text": "string"
-              }
+              },
+              "privacy": "private",
+              "default": "'bq-body--side-menu__expand'"
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "bodyCssCollapse",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "If true, the menu item will be shown as active/selected."
+              "privacy": "private",
+              "default": "'bq-body--side-menu__collapse'"
+            },
+            {
+              "kind": "field",
+              "name": "menuElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "documentBody",
+              "type": {
+                "text": "HTMLBodyElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "TSideMenuAppearance"
+              },
+              "default": "'default'",
+              "description": "It sets a predefined appearance of the side menu",
+              "parsedType": {
+                "text": "'default' | 'brand' | 'inverse'"
+              }
             },
             {
               "kind": "field",
@@ -13046,37 +13059,65 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent."
+              "description": "If true, the container will reduce its width"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "TSideMenuSize"
               },
-              "default": "false",
-              "description": "If true, the menu item will be disabled (no interaction allowed)"
+              "default": "'medium'",
+              "description": "It sets the size of the navigation menu items",
+              "parsedType": {
+                "text": "'small' | 'medium'"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onCollapsePropChange"
+            },
+            {
+              "kind": "method",
+              "name": "onMenuItemClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleCollapse",
+              "description": "Toggle the collapse state of the side menu"
             },
             {
               "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "menuItems",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "handleBlur"
+              "name": "handleCollapse",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleFocus"
+              "name": "collapseDocumentBody",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleClick"
+              "name": "expandDocumentBody",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "menuItem",
+              "name": "cleanDocumentBodyClass",
               "privacy": "private"
             },
             {
@@ -13086,120 +13127,101 @@
           ],
           "events": [
             {
-              "description": "Handler to be called when the button loses focus.",
-              "name": "bqBlur"
-            },
-            {
-              "description": "Handler to be called when the button gets focused.",
-              "name": "bqClick"
-            },
-            {
-              "description": "Handler to be called when the button is clicked.",
-              "name": "bqFocus"
+              "description": "Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.",
+              "name": "bqCollapse"
             },
             {
-              "name": "bqBlur",
-              "type": {
-                "text": "EventEmitter<HTMLBqSideMenuItemElement>"
-              },
-              "description": "Handler to be called when the button loses focus"
+              "description": "Callback handler to be called when the active/selected menu item changes.",
+              "name": "bqSelect"
             },
             {
-              "name": "bqFocus",
+              "name": "bqCollapse",
               "type": {
-                "text": "EventEmitter<HTMLBqSideMenuItemElement>"
+                "text": "EventEmitter<{ collapse: boolean }>"
               },
-              "description": "Handler to be called when the button is clicked"
+              "description": "Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa"
             },
             {
-              "name": "bqClick",
+              "name": "bqSelect",
               "type": {
                 "text": "EventEmitter<HTMLBqSideMenuItemElement>"
               },
-              "description": "Handler to be called when button gets focus"
+              "description": "Callback handler to be called when the active/selected menu item changes"
             }
           ],
           "attributes": [
             {
               "type": {
-                "text": "boolean"
+                "text": "\"brand\" | \"default\" | \"inverse\""
               },
-              "description": "If `true`, the menu item will be shown as active/selected.",
-              "name": "active"
+              "description": "It sets a predefined appearance of the side menu.",
+              "name": "appearance"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
+              "description": "If `true`, the container will reduce its width.",
               "name": "collapse"
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "\"medium\" | \"small\""
               },
-              "description": "If `true`, the menu item will be disabled (no interaction allowed).",
-              "name": "disabled"
+              "description": "size - It sets the size of the navigation menu items.",
+              "name": ""
             },
             {
-              "name": "active",
-              "fieldName": "active",
-              "default": "false",
-              "description": "If true, the menu item will be shown as active/selected.",
+              "name": "appearance",
+              "fieldName": "appearance",
+              "default": "'default'",
+              "description": "It sets a predefined appearance of the side menu",
               "type": {
-                "text": "boolean"
+                "text": "TSideMenuAppearance"
+              },
+              "parsedType": {
+                "text": "'default' | 'brand' | 'inverse'"
               }
             },
             {
               "name": "collapse",
               "fieldName": "collapse",
               "default": "false",
-              "description": "If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
+              "description": "If true, the container will reduce its width",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "disabled",
-              "fieldName": "disabled",
-              "default": "false",
-              "description": "If true, the menu item will be disabled (no interaction allowed)",
+              "name": "size",
+              "fieldName": "size",
+              "default": "'medium'",
+              "description": "It sets the size of the navigation menu items",
               "type": {
-                "text": "boolean"
+                "text": "TSideMenuSize"
+              },
+              "parsedType": {
+                "text": "'small' | 'medium'"
               }
             }
           ],
-          "tagName": "bq-side-menu-item",
-          "dependencies": [
-            {
-              "name": "bq-tooltip",
-              "description": ""
-            }
-          ],
+          "tagName": "bq-side-menu",
           "csspart": [
             {
               "name": "base",
-              "description": "The component wrapper container inside the shadow DOM"
-            },
-            {
-              "name": "label",
-              "description": "The label slot"
-            },
-            {
-              "name": "prefix",
-              "description": "The prefix slot"
+              "description": "HTML `<aside>` root container"
             },
             {
-              "name": "suffix",
-              "description": "The suffix slot"
+              "name": "footer",
+              "description": "HTML `<div>` element that holds the footer"
             },
             {
-              "name": "panel",
-              "description": "The `<div>` container that holds the tooltip content (when the side menu is collapsed)"
+              "name": "logo",
+              "description": "HTML `<div>` element that holds the logo"
             },
             {
-              "name": "trigger",
-              "description": "The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)"
+              "name": "nav",
+              "description": "HTML `<nav>` element that holds the navigation items"
             }
           ],
           "customElement": true
@@ -13208,140 +13230,127 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqSideMenuItem",
+          "name": "BqSideMenu",
           "declaration": {
-            "name": "BqSideMenuItem",
-            "module": "components/bq-side-menu-item.js"
+            "name": "BqSideMenu",
+            "module": "components/bq-side-menu.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-side-menu-item",
+          "name": "bq-side-menu",
           "declaration": {
-            "name": "BqSideMenuItem",
-            "module": "components/bq-side-menu-item.js"
+            "name": "BqSideMenu",
+            "module": "components/bq-side-menu.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-side-menu.js",
+      "path": "components/bq-side-menu-item.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The default side menu serves as a versatile container for organizing and displaying navigation elements,\n with default side menu items providing a clean and straightforward way to represent individual menu options.\n Together, they form the foundation for building structured and intuitive side menu layouts.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu>\n<div slot=\"logo\">\n<h1>Your Logo</h1>\n</div>\n<bq-side-menu-item active>\n<bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\nHome\n</bq-side-menu-item>\n<bq-side-menu-item>\n<bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\nSettings\n</bq-side-menu-item>\n<bq-side-menu-item disabled>\n<bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\nHelp\n</bq-side-menu-item>\n</bq-side-menu>\n```\n\n</figure>",
-          "name": "BqSideMenu",
+          "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>",
+          "name": "BqSideMenuItem",
           "cssProperties": [
             {
-              "description": "Side menu background color",
-              "name": "--bq-side-menu--bg-color"
+              "description": "Side menu item default background color",
+              "name": "--bq-side-menu-item--bg-default"
             },
             {
-              "description": "Side menu logo color",
-              "name": "--bq-side-menu--brand-color"
+              "description": "Side menu item active background color",
+              "name": "--bq-side-menu-item--bg-active"
             },
             {
-              "description": "Side menu border color",
-              "name": "--bq-side-menu--border-color"
+              "description": "Side menu item default text color",
+              "name": "--bq-side-menu-item--text-default"
+            },
+            {
+              "description": "Side menu item active text color",
+              "name": "--bq-side-menu-item--text-active"
+            },
+            {
+              "description": "Side menu item vertical padding",
+              "name": "--bq-side-menu-item--paddingX"
+            },
+            {
+              "description": "Side menu item horizontal padding",
+              "name": "--bq-side-menu-item--paddingY"
             }
           ],
           "cssParts": [
             {
-              "description": "HTML `<aside>` root container",
+              "description": "The component wrapper container inside the shadow DOM",
               "name": "base"
             },
             {
-              "description": "HTML `<div>` element that holds the footer",
-              "name": "footer"
+              "description": "The label slot",
+              "name": "label"
             },
             {
-              "description": "HTML `<div>` element that holds the logo",
-              "name": "logo"
+              "description": "The prefix slot",
+              "name": "prefix"
             },
             {
-              "description": "HTML `<nav>` element that holds the navigation items",
-              "name": "nav"
+              "description": "The suffix slot",
+              "name": "suffix"
+            },
+            {
+              "description": "The `<div>` container that holds the tooltip content (when the side menu is collapsed)",
+              "name": "panel"
+            },
+            {
+              "description": "The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
+              "name": "trigger"
             }
           ],
           "slots": [
             {
-              "description": "The section for displaying the logo or brand in the side menu.",
-              "name": "logo"
+              "description": "The prefix part of menu item.",
+              "name": "prefix"
             },
             {
-              "description": "main section that holds all menu items.",
-              "name": "The"
+              "description": "The content of the menu item.",
+              "name": ""
             },
             {
-              "description": "The section for adding footer content to the side menu.",
-              "name": "footer"
+              "description": "The suffix part of menu item.",
+              "name": "suffix"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "menuItemCssSelector",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "'bq-side-menu-item'"
-            },
-            {
-              "kind": "field",
-              "name": "bodyCss",
+              "name": "labelElem",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
               },
-              "privacy": "private",
-              "default": "'bq-body--side-menu'"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "bodyCssExpand",
+              "name": "el",
               "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "'bq-body--side-menu__expand'"
+                "text": "HTMLBqSideMenuItemElement"
+              }
             },
             {
               "kind": "field",
-              "name": "bodyCssCollapse",
+              "name": "textContent",
               "type": {
                 "text": "string"
-              },
-              "privacy": "private",
-              "default": "'bq-body--side-menu__collapse'"
-            },
-            {
-              "kind": "field",
-              "name": "menuElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "documentBody",
-              "type": {
-                "text": "HTMLBodyElement"
-              },
-              "privacy": "private"
+              }
             },
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "active",
               "type": {
-                "text": "TSideMenuAppearance"
+                "text": "boolean"
               },
-              "default": "'default'",
-              "description": "It sets a predefined appearance of the side menu",
-              "parsedType": {
-                "text": "'default' | 'brand' | 'inverse'"
-              }
+              "default": "false",
+              "description": "If true, the menu item will be shown as active/selected."
             },
             {
               "kind": "field",
@@ -13350,65 +13359,37 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the container will reduce its width"
+              "description": "If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent."
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "disabled",
               "type": {
-                "text": "TSideMenuSize"
+                "text": "boolean"
               },
-              "default": "'medium'",
-              "description": "It sets the size of the navigation menu items",
-              "parsedType": {
-                "text": "'small' | 'medium'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onCollapsePropChange"
-            },
-            {
-              "kind": "method",
-              "name": "onMenuItemClick",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleCollapse",
-              "description": "Toggle the collapse state of the side menu"
+              "default": "false",
+              "description": "If true, the menu item will be disabled (no interaction allowed)"
             },
             {
               "kind": "field",
-              "name": "menuItems",
-              "privacy": "private",
-              "readonly": true
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleCollapse",
-              "privacy": "private"
+              "name": "handleBlur"
             },
             {
               "kind": "field",
-              "name": "collapseDocumentBody",
-              "privacy": "private"
+              "name": "handleFocus"
             },
             {
               "kind": "field",
-              "name": "expandDocumentBody",
-              "privacy": "private"
+              "name": "handleClick"
             },
             {
               "kind": "field",
-              "name": "cleanDocumentBodyClass",
+              "name": "menuItem",
               "privacy": "private"
             },
             {
@@ -13418,101 +13399,120 @@
           ],
           "events": [
             {
-              "description": "Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.",
-              "name": "bqCollapse"
+              "description": "Handler to be called when the button loses focus.",
+              "name": "bqBlur"
             },
             {
-              "description": "Callback handler to be called when the active/selected menu item changes.",
-              "name": "bqSelect"
+              "description": "Handler to be called when the button gets focused.",
+              "name": "bqClick"
             },
             {
-              "name": "bqCollapse",
+              "description": "Handler to be called when the button is clicked.",
+              "name": "bqFocus"
+            },
+            {
+              "name": "bqBlur",
               "type": {
-                "text": "EventEmitter<{ collapse: boolean }>"
+                "text": "EventEmitter<HTMLBqSideMenuItemElement>"
               },
-              "description": "Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa"
+              "description": "Handler to be called when the button loses focus"
             },
             {
-              "name": "bqSelect",
+              "name": "bqFocus",
               "type": {
                 "text": "EventEmitter<HTMLBqSideMenuItemElement>"
               },
-              "description": "Callback handler to be called when the active/selected menu item changes"
+              "description": "Handler to be called when the button is clicked"
+            },
+            {
+              "name": "bqClick",
+              "type": {
+                "text": "EventEmitter<HTMLBqSideMenuItemElement>"
+              },
+              "description": "Handler to be called when button gets focus"
             }
           ],
           "attributes": [
             {
               "type": {
-                "text": "\"brand\" | \"default\" | \"inverse\""
+                "text": "boolean"
               },
-              "description": "It sets a predefined appearance of the side menu.",
-              "name": "appearance"
+              "description": "If `true`, the menu item will be shown as active/selected.",
+              "name": "active"
             },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "If `true`, the container will reduce its width.",
+              "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
               "name": "collapse"
             },
             {
               "type": {
-                "text": "\"medium\" | \"small\""
+                "text": "boolean"
               },
-              "description": "size - It sets the size of the navigation menu items.",
-              "name": ""
+              "description": "If `true`, the menu item will be disabled (no interaction allowed).",
+              "name": "disabled"
             },
             {
-              "name": "appearance",
-              "fieldName": "appearance",
-              "default": "'default'",
-              "description": "It sets a predefined appearance of the side menu",
+              "name": "active",
+              "fieldName": "active",
+              "default": "false",
+              "description": "If true, the menu item will be shown as active/selected.",
               "type": {
-                "text": "TSideMenuAppearance"
-              },
-              "parsedType": {
-                "text": "'default' | 'brand' | 'inverse'"
+                "text": "boolean"
               }
             },
             {
               "name": "collapse",
               "fieldName": "collapse",
               "default": "false",
-              "description": "If true, the container will reduce its width",
+              "description": "If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "size",
-              "fieldName": "size",
-              "default": "'medium'",
-              "description": "It sets the size of the navigation menu items",
+              "name": "disabled",
+              "fieldName": "disabled",
+              "default": "false",
+              "description": "If true, the menu item will be disabled (no interaction allowed)",
               "type": {
-                "text": "TSideMenuSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium'"
+                "text": "boolean"
               }
             }
           ],
-          "tagName": "bq-side-menu",
+          "tagName": "bq-side-menu-item",
+          "dependencies": [
+            {
+              "name": "bq-tooltip",
+              "description": ""
+            }
+          ],
           "csspart": [
             {
               "name": "base",
-              "description": "HTML `<aside>` root container"
+              "description": "The component wrapper container inside the shadow DOM"
             },
             {
-              "name": "footer",
-              "description": "HTML `<div>` element that holds the footer"
+              "name": "label",
+              "description": "The label slot"
             },
             {
-              "name": "logo",
-              "description": "HTML `<div>` element that holds the logo"
+              "name": "prefix",
+              "description": "The prefix slot"
             },
             {
-              "name": "nav",
-              "description": "HTML `<nav>` element that holds the navigation items"
+              "name": "suffix",
+              "description": "The suffix slot"
+            },
+            {
+              "name": "panel",
+              "description": "The `<div>` container that holds the tooltip content (when the side menu is collapsed)"
+            },
+            {
+              "name": "trigger",
+              "description": "The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)"
             }
           ],
           "customElement": true
@@ -13521,18 +13521,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqSideMenu",
+          "name": "BqSideMenuItem",
           "declaration": {
-            "name": "BqSideMenu",
-            "module": "components/bq-side-menu.js"
+            "name": "BqSideMenuItem",
+            "module": "components/bq-side-menu-item.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-side-menu",
+          "name": "bq-side-menu-item",
           "declaration": {
-            "name": "BqSideMenu",
-            "module": "components/bq-side-menu.js"
+            "name": "BqSideMenuItem",
+            "module": "components/bq-side-menu-item.js"
           }
         }
       ]
@@ -15038,214 +15038,489 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-switch.js",
+      "path": "components/bq-steps.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Toggle switches are digital on/off switches.\nThey should provide immediate results, giving users the freedom to control their preferences as needed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\nToggle me!\n</bq-switch>\n```\n\n</figure>",
-          "name": "BqSwitch",
+          "description": "The Steps Component is a UI element used to display a series of steps or stages in a process or task.\nIt is used to guide users through a process or task and to indicate their progress.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n<bq-step-item status=\"completed\"> ... </bq-step-item>\n<bq-step-item status=\"error\"> ... </bq-step-item>\n<bq-step-item status=\"current\"> ... </bq-step-item>\n<bq-step-item status=\"default\"> ... </bq-step-item>\n</bq-steps>\n```\n\n</figure>",
+          "name": "BqSteps",
           "cssProperties": [
             {
-              "description": "Switch height",
-              "name": "--bq-switch--height"
-            },
-            {
-              "description": "Switch justify content",
-              "name": "--bq-switch--justify-content"
-            },
-            {
-              "description": "Switch width",
-              "name": "--bq-switch--width"
+              "description": "Divider color",
+              "name": "--bq-steps--divider-color"
             },
             {
-              "description": "Switch dot size",
-              "name": "--bq-switch--dot-size"
+              "description": "Gap between steps",
+              "name": "--bq-steps--gap"
             }
           ],
           "cssParts": [
             {
-              "description": "HTML `<label>` root container",
-              "name": "base"
-            },
-            {
-              "description": "HTML `<div>` element for the custom control",
-              "name": "control"
-            },
-            {
-              "description": "HTML `<div>` element that acts as changing dot",
-              "name": "dot"
+              "description": "The container wrapper of the Steps component",
+              "name": "container"
             },
             {
-              "description": "HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label",
-              "name": "icon-off"
+              "description": "The base wrapper of the divider component",
+              "name": "divider-base"
             },
             {
-              "description": "HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label",
-              "name": "icon-on"
+              "description": "The dash start wrapper of the divider component",
+              "name": "divider-dash-start"
             },
             {
-              "description": "HTML `<span>` element that holds the label text",
-              "name": "label"
+              "description": "The dash end wrapper of the divider component",
+              "name": "divider-dash-end"
             }
           ],
           "slots": [
             {
-              "description": "The switch label text",
+              "description": "The step items",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "labelElem",
+              "name": "stepElem",
               "type": {
-                "text": "HTMLSpanElement"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "inputElem",
+              "name": "el",
               "type": {
-                "text": "HTMLInputElement"
-              },
-              "privacy": "private"
+                "text": "HTMLBqStepsElement"
+              }
             },
             {
               "kind": "field",
-              "name": "prevCheckedValue",
+              "name": "dividerColor",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "'stroke--primary'",
+              "description": "The color of the line that connects the steps. It should be a valid declarative color token."
             },
             {
               "kind": "field",
-              "name": "internals",
+              "name": "orientation",
               "type": {
-                "text": "ElementInternals"
+                "text": "TStepsOrientation"
+              },
+              "default": "'horizontal'",
+              "description": "The orientation of the steps",
+              "parsedType": {
+                "text": "'horizontal' | 'vertical'"
               }
             },
             {
               "kind": "field",
-              "name": "el",
+              "name": "size",
               "type": {
-                "text": "HTMLBqSwitchElement"
+                "text": "TStepsSize"
+              },
+              "default": "'medium'",
+              "description": "The size of the steps",
+              "parsedType": {
+                "text": "'small' | 'medium'"
               }
             },
             {
               "kind": "field",
-              "name": "hasLabel",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "TStepsType"
               },
-              "default": "false"
+              "description": "The type of prefix element to use on the step items",
+              "parsedType": {
+                "text": "'numeric' | 'icon' | 'dot'"
+              }
             },
             {
-              "kind": "field",
-              "name": "backgroundOnHover",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "checkPropValues"
+            },
+            {
+              "kind": "method",
+              "name": "setCurrentStepItem",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
               },
-              "default": "false",
-              "description": "If true, a background will be displayed on hover"
+              "parameters": [
+                {
+                  "name": "newCurrentStep",
+                  "type": {
+                    "text": "HTMLBqStepItemElement"
+                  },
+                  "description": "The step item to set as current."
+                }
+              ],
+              "description": "Set the current step item."
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "bqSteps",
               "type": {
-                "text": "boolean | undefined"
+                "text": "HTMLBqStepItemElement[]"
               },
-              "default": "false",
-              "description": "It indicates whether if the switch is `ON` by default (when the page loads)"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "setStepItemProps",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lastStepItem",
               "type": {
-                "text": "boolean | undefined"
+                "text": "HTMLBqStepItemElement | undefined"
               },
-              "default": "false",
-              "description": "If true, the switch control will be disabled and no interaction will be allowed"
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "formValidationMessage",
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The native form validation message"
+              "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
+              "name": "divider-color"
             },
             {
-              "kind": "field",
-              "name": "fullWidth",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"horizontal\" | \"vertical\""
               },
-              "default": "false",
-              "description": "If true, the component will take the full width space available on the parent container"
+              "description": "The orientation of the steps",
+              "name": "orientation"
             },
             {
-              "kind": "field",
-              "name": "innerLabel",
               "type": {
-                "text": "TSwitchInnerLabel | undefined"
+                "text": "\"medium\" | \"small\""
               },
-              "default": "'default'",
-              "description": "It indicates how to to display the on/off marks inside the control, with icons or none (default)",
-              "parsedType": {
-                "text": "'default' | 'icon' | undefined"
-              }
+              "description": "The size of the steps",
+              "name": "size"
             },
             {
-              "kind": "field",
-              "name": "justifyContent",
               "type": {
-                "text": "TSwitchJustifyContent | undefined"
+                "text": "\"numeric\" | \"icon\" | \"dot\""
               },
-              "default": "'start'",
-              "description": "It defines how to distribute the space between and around the control and the label text\n(https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)",
-              "parsedType": {
-                "text": "'start' | 'end' | 'left' | 'right' | 'center' | 'flex-end' | 'flex-start' | 'inherit' | 'initial' | 'normal' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | undefined"
-              }
+              "description": "The type of prefix element to use on the step items",
+              "name": "type"
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "divider-color",
+              "fieldName": "dividerColor",
+              "default": "'stroke--primary'",
+              "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
               "type": {
                 "text": "string"
-              },
-              "description": "Name of the form control. Submitted with the form as part of a name/value pair"
+              }
             },
             {
-              "kind": "field",
-              "name": "required",
+              "name": "orientation",
+              "fieldName": "orientation",
+              "default": "'horizontal'",
+              "description": "The orientation of the steps",
               "type": {
-                "text": "boolean | undefined"
+                "text": "TStepsOrientation"
               },
-              "default": "false",
-              "description": "If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted"
+              "parsedType": {
+                "text": "'horizontal' | 'vertical'"
+              }
             },
             {
-              "kind": "field",
-              "name": "reverseOrder",
+              "name": "size",
+              "fieldName": "size",
+              "default": "'medium'",
+              "description": "The size of the steps",
               "type": {
-                "text": "boolean | undefined"
+                "text": "TStepsSize"
               },
-              "default": "false",
-              "description": "If true, the order of the control and the label text will be changed"
+              "parsedType": {
+                "text": "'small' | 'medium'"
+              }
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "type",
+              "fieldName": "type",
+              "description": "The type of prefix element to use on the step items",
               "type": {
-                "text": "string | undefined"
+                "text": "TStepsType"
               },
-              "description": "The input control's value, submitted as a name/value pair with form data."
-            },
+              "parsedType": {
+                "text": "'numeric' | 'icon' | 'dot'"
+              }
+            }
+          ],
+          "tagName": "bq-steps",
+          "dependencies": [
             {
-              "kind": "method",
-              "name": "handleRequiredChange"
+              "name": "bq-divider",
+              "description": ""
+            }
+          ],
+          "csspart": [
+            {
+              "name": "container",
+              "description": "The container wrapper of the Steps component"
+            },
+            {
+              "name": "divider-base",
+              "description": "The base wrapper of the divider component"
+            },
+            {
+              "name": "divider-dash-start",
+              "description": "The dash start wrapper of the divider component"
+            },
+            {
+              "name": "divider-dash-end",
+              "description": "The dash end wrapper of the divider component"
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqSteps",
+          "declaration": {
+            "name": "BqSteps",
+            "module": "components/bq-steps.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-steps",
+          "declaration": {
+            "name": "BqSteps",
+            "module": "components/bq-steps.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-switch.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toggle switches are digital on/off switches.\nThey should provide immediate results, giving users the freedom to control their preferences as needed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\nToggle me!\n</bq-switch>\n```\n\n</figure>",
+          "name": "BqSwitch",
+          "cssProperties": [
+            {
+              "description": "Switch height",
+              "name": "--bq-switch--height"
+            },
+            {
+              "description": "Switch justify content",
+              "name": "--bq-switch--justify-content"
+            },
+            {
+              "description": "Switch width",
+              "name": "--bq-switch--width"
+            },
+            {
+              "description": "Switch dot size",
+              "name": "--bq-switch--dot-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "HTML `<label>` root container",
+              "name": "base"
+            },
+            {
+              "description": "HTML `<div>` element for the custom control",
+              "name": "control"
+            },
+            {
+              "description": "HTML `<div>` element that acts as changing dot",
+              "name": "dot"
+            },
+            {
+              "description": "HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label",
+              "name": "icon-off"
+            },
+            {
+              "description": "HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label",
+              "name": "icon-on"
+            },
+            {
+              "description": "HTML `<span>` element that holds the label text",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The switch label text",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "labelElem",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "inputElem",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "prevCheckedValue",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqSwitchElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "backgroundOnHover",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, a background will be displayed on hover"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "It indicates whether if the switch is `ON` by default (when the page loads)"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the switch control will be disabled and no interaction will be allowed"
+            },
+            {
+              "kind": "field",
+              "name": "formValidationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The native form validation message"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the component will take the full width space available on the parent container"
+            },
+            {
+              "kind": "field",
+              "name": "innerLabel",
+              "type": {
+                "text": "TSwitchInnerLabel | undefined"
+              },
+              "default": "'default'",
+              "description": "It indicates how to to display the on/off marks inside the control, with icons or none (default)",
+              "parsedType": {
+                "text": "'default' | 'icon' | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "justifyContent",
+              "type": {
+                "text": "TSwitchJustifyContent | undefined"
+              },
+              "default": "'start'",
+              "description": "It defines how to distribute the space between and around the control and the label text\n(https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)",
+              "parsedType": {
+                "text": "'start' | 'end' | 'left' | 'right' | 'center' | 'flex-end' | 'flex-start' | 'inherit' | 'initial' | 'normal' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "Name of the form control. Submitted with the form as part of a name/value pair"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted"
+            },
+            {
+              "kind": "field",
+              "name": "reverseOrder",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "If true, the order of the control and the label text will be changed"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The input control's value, submitted as a name/value pair with form data."
+            },
+            {
+              "kind": "method",
+              "name": "handleRequiredChange"
             },
             {
               "kind": "method",
@@ -15576,281 +15851,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-steps.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The Steps Component is a UI element used to display a series of steps or stages in a process or task.\nIt is used to guide users through a process or task and to indicate their progress.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n<bq-step-item status=\"completed\"> ... </bq-step-item>\n<bq-step-item status=\"error\"> ... </bq-step-item>\n<bq-step-item status=\"current\"> ... </bq-step-item>\n<bq-step-item status=\"default\"> ... </bq-step-item>\n</bq-steps>\n```\n\n</figure>",
-          "name": "BqSteps",
-          "cssProperties": [
-            {
-              "description": "Divider color",
-              "name": "--bq-steps--divider-color"
-            },
-            {
-              "description": "Gap between steps",
-              "name": "--bq-steps--gap"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container wrapper of the Steps component",
-              "name": "container"
-            },
-            {
-              "description": "The base wrapper of the divider component",
-              "name": "divider-base"
-            },
-            {
-              "description": "The dash start wrapper of the divider component",
-              "name": "divider-dash-start"
-            },
-            {
-              "description": "The dash end wrapper of the divider component",
-              "name": "divider-dash-end"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The step items",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "stepElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqStepsElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dividerColor",
-              "type": {
-                "text": "string"
-              },
-              "default": "'stroke--primary'",
-              "description": "The color of the line that connects the steps. It should be a valid declarative color token."
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "TStepsOrientation"
-              },
-              "default": "'horizontal'",
-              "description": "The orientation of the steps",
-              "parsedType": {
-                "text": "'horizontal' | 'vertical'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "TStepsSize"
-              },
-              "default": "'medium'",
-              "description": "The size of the steps",
-              "parsedType": {
-                "text": "'small' | 'medium'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TStepsType"
-              },
-              "description": "The type of prefix element to use on the step items",
-              "parsedType": {
-                "text": "'numeric' | 'icon' | 'dot'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "method",
-              "name": "setCurrentStepItem",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "newCurrentStep",
-                  "type": {
-                    "text": "HTMLBqStepItemElement"
-                  },
-                  "description": "The step item to set as current."
-                }
-              ],
-              "description": "Set the current step item."
-            },
-            {
-              "kind": "field",
-              "name": "bqSteps",
-              "type": {
-                "text": "HTMLBqStepItemElement[]"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "setStepItemProps",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lastStepItem",
-              "type": {
-                "text": "HTMLBqStepItemElement | undefined"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
-              "name": "divider-color"
-            },
-            {
-              "type": {
-                "text": "\"horizontal\" | \"vertical\""
-              },
-              "description": "The orientation of the steps",
-              "name": "orientation"
-            },
-            {
-              "type": {
-                "text": "\"medium\" | \"small\""
-              },
-              "description": "The size of the steps",
-              "name": "size"
-            },
-            {
-              "type": {
-                "text": "\"numeric\" | \"icon\" | \"dot\""
-              },
-              "description": "The type of prefix element to use on the step items",
-              "name": "type"
-            },
-            {
-              "name": "divider-color",
-              "fieldName": "dividerColor",
-              "default": "'stroke--primary'",
-              "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "orientation",
-              "fieldName": "orientation",
-              "default": "'horizontal'",
-              "description": "The orientation of the steps",
-              "type": {
-                "text": "TStepsOrientation"
-              },
-              "parsedType": {
-                "text": "'horizontal' | 'vertical'"
-              }
-            },
-            {
-              "name": "size",
-              "fieldName": "size",
-              "default": "'medium'",
-              "description": "The size of the steps",
-              "type": {
-                "text": "TStepsSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium'"
-              }
-            },
-            {
-              "name": "type",
-              "fieldName": "type",
-              "description": "The type of prefix element to use on the step items",
-              "type": {
-                "text": "TStepsType"
-              },
-              "parsedType": {
-                "text": "'numeric' | 'icon' | 'dot'"
-              }
-            }
-          ],
-          "tagName": "bq-steps",
-          "dependencies": [
-            {
-              "name": "bq-divider",
-              "description": ""
-            }
-          ],
-          "csspart": [
-            {
-              "name": "container",
-              "description": "The container wrapper of the Steps component"
-            },
-            {
-              "name": "divider-base",
-              "description": "The base wrapper of the divider component"
-            },
-            {
-              "name": "divider-dash-start",
-              "description": "The dash start wrapper of the divider component"
-            },
-            {
-              "name": "divider-dash-end",
-              "description": "The dash end wrapper of the divider component"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqSteps",
-          "declaration": {
-            "name": "BqSteps",
-            "module": "components/bq-steps.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-steps",
-          "declaration": {
-            "name": "BqSteps",
-            "module": "components/bq-steps.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bq-tab.js",